mtd/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

fix: mobile responsiveness (hacky) (#4230)

Browse Source
This commit is contained in:
Cal H.
2025-08-19 21:39:05 +01:00
committed by GitHub
parent f56672fb68
commit 328500d381
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue
View File

@@ -1,24 +1,28 @@
<template>
<div
id="medal"
class="medal-promotion flex w-full flex-row justify-between rounded-xl px-8 py-6 shadow-xl"
class="medal-promotion flex w-full flex-col items-start gap-4 rounded-xl px-4 py-4 shadow-xl md:flex-row md:items-center md:justify-between md:gap-0 md:px-8 md:py-6"
>
<MedalBackgroundImage />
<div class="z-10 flex items-center gap-6 text-2xl font-semibold text-contrast">
<MedalIcon class="h-10 w-auto text-contrast" />
<div
class="z-10 flex items-start gap-3 text-xl font-semibold text-contrast md:items-center md:gap-6 md:text-2xl"
>
<MedalIcon class="h-8 w-auto text-contrast md:h-10" />
<div class="flex flex-col items-start gap-1">
<span>
Try a free
<span class="text-medal-orange">3GB server</span> for 5 days powered by
<span class="text-medal-orange">Medal</span>
</span>
<span class="text-sm font-medium text-secondary">
<span class="text-xs font-medium text-secondary md:text-sm">
Limited-time offer. No credit card required. Available for US servers.
</span>
</div>
</div>
<ButtonStyled color="medal-promo" type="outlined" size="large">
<nuxt-link to="https://medal.tv/modrinth" class="z-10 my-auto"
<ButtonStyled color="medal-promo" type="outlined" size="large" class="z-10 my-auto mt-2">
<nuxt-link
to="https://medal.tv/modrinth"
class="z-10 flex w-full items-center justify-center gap-1 md:mt-0 md:w-auto"
>Learn more <ExternalIcon
/></nuxt-link>
</ButtonStyled>