rythondev/media-kit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mobile responsiveness

Browse source
This commit is contained in:
liyunze 2026-11-05 23:00:18 +08:00
parent 0f5155811d
commit 36ea6bee96
2 changed files with 29 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/components/Card.svelte
View file

@ -62,8 +62,9 @@
@media (max-width: 700px) { @media (max-width: 700px) {
.card { .card {
width: calc(100% - 2rem); width: 100%;
margin: 0rem 1rem; min-width: 0;
margin: 0;
padding: 0.75rem; padding: 0.75rem;
border-radius: 1rem; border-radius: 1rem;
} }

40
frontend/src/routes/MediaKit.svelte
View file

@ -78,20 +78,32 @@
<div class="py-8 text-gray-500 dark:text-gray-400">Loading…</div> <div class="py-8 text-gray-500 dark:text-gray-400">Loading…</div>
</main> </main>
{:else} {:else}
<main class="grid grid-cols-2 max-w-6xl mx-auto pt-20 pb-10 gap-10"> <main
<div class=""> class="mx-auto grid w-full max-w-6xl grid-cols-1 gap-10 px-4 pt-8 pb-10 sm:px-6 lg:grid-cols-2 lg:px-0 lg:pt-20"
<div class="px-5"> >
<div class="flex justify-end items-start"> {#if content.profile_image_url}
<div class="flex justify-center lg:hidden">
<img
class="h-auto w-full max-w-75 rounded-xl object-cover shadow-lg shadow-cyan-300"
src={content.profile_image_url}
alt={content.brand_name ?? "Profile image"}
width="300"
/>
</div>
{/if}
<div class="order-2 lg:order-1">
<div class="lg:px-5">
<div class="hidden items-start justify-end lg:flex">
{#if content.profile_image_url} {#if content.profile_image_url}
<img <img
class="shrink-0 rounded-xl object-cover shadow-cyan-300 shadow-lg" class="h-auto w-full max-w-75 shrink-0 rounded-xl object-cover shadow-lg shadow-cyan-300"
src={content.profile_image_url} src={content.profile_image_url}
alt={content.brand_name ?? "Profile image"} alt={content.brand_name ?? "Profile image"}
width="300" width="300"
/> />
{/if} {/if}
</div> </div>
<div class="mt-6 grid grid-cols-2 gap-4"> <div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2">
<!-- Twitch --> <!-- Twitch -->
<Card <Card
className="flex flex-col gap-1 rounded-2xl border p-5 transition-colors border-zinc-800 bg-neutral-900" className="flex flex-col gap-1 rounded-2xl border p-5 transition-colors border-zinc-800 bg-neutral-900"
@ -173,12 +185,12 @@
</div> </div>
</div> </div>
<!-- 2nd column --> <!-- 2nd column -->
<div class="flex flex-col justify-start items-start gap-5"> <div class="order-1 flex min-w-0 flex-col items-start justify-start gap-5 lg:order-2">
<div <div
class="border-cyan-300 border-2 rounded-lg translate-y-2 w-fit" class="w-full translate-y-2 rounded-lg border-2 border-cyan-300 sm:w-fit"
> >
<div <div
class="-translate-x-20 px-5 py-5 text-4xl bg-cyan-300 text-black rounded-xl -translate-y-2" class="-translate-y-2 rounded-xl bg-cyan-300 px-5 py-5 text-3xl text-black sm:-translate-x-8 sm:text-4xl lg:-translate-x-20"
> >
Hi there, I'm <br /> Hi there, I'm <br />
<b>RythonDev</b> <b>RythonDev</b>
@ -190,23 +202,23 @@
{/if} {/if}
</div> </div>
<div class="mt-5"> <div class="mt-5">
<div class="text-white font-bold text-4xl mb-2">About Me</div> <div class="mb-2 text-3xl font-bold text-white sm:text-4xl">About Me</div>
<p> <p class="break-words">
{content.about ?? ""} {content.about ?? ""}
</p> </p>
</div> </div>
<div> <div>
<div class="text-white font-bold text-4xl mb-2"> <div class="mb-2 text-3xl font-bold text-white sm:text-4xl">
Collaborations Collaborations
</div> </div>
<Collabs /> <Collabs />
</div> </div>
{#if services.length} {#if services.length}
<section class="w-full"> <section class="w-full">
<div class="mb-3 text-4xl font-bold text-white"> <div class="mb-3 text-3xl font-bold text-white sm:text-4xl">
Services Services
</div> </div>
<div class="grid grid-cols-2 gap-x-8"> <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 sm:gap-x-8">
<ul <ul
class="list-disc space-y-2 pl-5 marker:text-cyan-300" class="list-disc space-y-2 pl-5 marker:text-cyan-300"
> >