trafficlunar/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: responsiveness

Browse source
This commit is contained in:
trafficlunar 2025-05-09 14:41:14 +01:00
parent f2eed91109
commit 386c9094b9
6 changed files with 23 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Clock.svelte
View file

@ -17,7 +17,7 @@
});
</script>
<section class="font-mono !py-2.5">
<section class="font-mono !py-2.5 min-w-40 h-min">
<legend>clock</legend>
<span class="block font-bold text-lg">{clock}</span>

2
src/components/Projects.svelte
View file

@ -34,7 +34,7 @@
});
</script>
<div class="grid grid-cols-2 gap-4">
<div class="grid grid-cols-2 gap-4 max-sm:grid-cols-1">
{#each projects as project}
<a href={project.url} class="group">
<section class="h-full flex flex-col">

2
src/components/Socials.astro
View file

@ -9,7 +9,7 @@ import LastFMIcon from "../assets/icons/socials/lastfm.svg";
import MailIcon from "../assets/icons/socials/mail.svg";
---
<section class="mt-8 !p-2">
<section class="!p-2 min-w-40">
<legend>socials</legend>
<ul class="grid grid-cols-4 [&_a]:flex [&_a]:justify-center [&_a]:size-full [&_a]:py-1">
<li class="z-50">

9
src/components/Tools.astro
View file

@ -27,7 +27,7 @@ import LinuxIcon from "../assets/icons/coding/linux.svg";
<hr class="flex-grow border-surface1" />
</div>
<div class="flex gap-1 mb-4 *:bg-surface0/50 *:border *:border-surface1 *:rounded-md *:p-1.5 *:text-sm *:flex *:items-center *:gap-1.5">
<div class="flex flex-wrap gap-1 mb-4 *:bg-surface0/50 *:border *:border-surface1 *:rounded-md *:p-1.5 *:text-sm *:flex *:items-center *:gap-1.5">
<div>
<VSCodiumIcon class="size-5" />
<span>VSCodium</span>
@ -45,7 +45,7 @@ import LinuxIcon from "../assets/icons/coding/linux.svg";
<hr class="flex-grow border-surface1" />
</div>
<div class="flex gap-1 mb-4 *:bg-surface0/50 *:border *:border-surface1 *:rounded-md *:p-1.5 *:text-sm *:flex *:items-center *:gap-1.5">
<div class="flex flex-wrap gap-1 mb-4 *:bg-surface0/50 *:border *:border-surface1 *:rounded-md *:p-1.5 *:text-sm *:flex *:items-center *:gap-1.5">
<div>
<TypeScriptIcon class="size-5" />
<span>TypeScript</span>
@ -78,7 +78,8 @@ import LinuxIcon from "../assets/icons/coding/linux.svg";
<span>frameworks</span>
<hr class="flex-grow border-surface1" />
</div>
<div class="flex gap-1 *:bg-surface0/50 *:border *:border-surface1 *:rounded-md *:p-1.5 *:text-sm *:flex *:items-center *:gap-1.5">
<div class="flex flex-wrap gap-1 *:bg-surface0/50 *:border *:border-surface1 *:rounded-md *:p-1.5 *:text-sm *:flex *:items-center *:gap-1.5">
<div>
<SvelteIcon class="size-5" />
<span>Svelte</span>
@ -102,7 +103,7 @@ import LinuxIcon from "../assets/icons/coding/linux.svg";
</div>
<!-- separator -->
<div class="flex items-center gap-4 text-subtext0 text-sm font-medium my-2">
<div class="flex flex-wrap items-center gap-4 text-subtext0 text-sm font-medium my-2">
<hr class="w-4 border-surface1" />
<span>infrastructure</span>
<hr class="flex-grow border-surface1" />

19
src/layouts/Layout.astro
View file

@ -33,30 +33,33 @@ import Lunar from "../assets/lunar.svg";
<ClientRouter />
</head>
<body class="bg-base text-text flex flex-col items-center">
<body class="bg-base text-text flex flex-col items-center px-8">
<a href="/" transition:persist>
<KawaiiLogo class="w-full h-48 mt-16 transition-transform duration-300 hover:rotate-2 hover:scale-105" />
</a>
<Lunar class="fixed top-8 right-8 size-12 cursor-pointer animate-avoid hover:animate-running not-hover:animate-pause" />
<TrafficConeAlt class="fixed size-12 bottom-0 left-8 text-peach" />
<TrafficConeAlt class="fixed size-14 bottom-0 left-19 text-peach" />
<Lunar class="absolute top-8 right-8 size-12 cursor-pointer animate-avoid hover:animate-running not-hover:animate-pause" />
<div class="max-w-4xl grid grid-cols-5 gap-4 py-8">
<div transition:persist>
<div class="max-w-4xl grid grid-cols-5 gap-4 py-8 max-[56rem]:grid-cols-1">
<div class="flex flex-col items-center max-[56rem]:flex-row max-[56rem]:justify-center max-sm:flex-col gap-8" transition:persist>
<a href="/">
<img
src="/pfp.png"
alt="profile picture"
class="rounded-full animate-spin animate-duration-2s hover:animate-running not-hover:animate-pause"
class="rounded-full animate-spin animate-duration-2s hover:animate-running not-hover:animate-pause max-h-40"
/>
</a>
<div class="flex flex-col justify-center max-sm:flex-row max-[56rem]:items-center max-[56rem]:mt-8 max-sm:mt-0 max-sm:gap-2">
<Socials />
<Clock client:only />
</div>
</div>
<div class="col-span-4 flex flex-col relative">
<TrafficConeAlt class="absolute size-12 bottom-full left-16 text-peach" />
<TrafficConeAlt class="absolute size-14 bottom-full left-27 text-peach" />
<div class="col-span-4 flex flex-col">
<slot />
<Footer />
</div>

4
src/pages/index.astro
View file

@ -15,9 +15,9 @@ import LocationIcon from "../assets/icons/location.svg";
<p>
Hey there, I'm <strong class="text-peach">trafficlunar</strong>. I'm a <Age client:only /> year old self-proclaimed full-stack developer and sysadmin.
</p>
<p>You can view what I'm currently doing by going <a href="/status" class="link">here</a>.</p>
<p class="my-2">You can view what I'm currently doing by going <a href="/status" class="link">here</a>.</p>
<div class="flex gap-1 mt-2">
<div class="flex gap-1 mt-4">
<div class="text-sm rounded-lg bg-peach/25 text-peach w-fit px-2 py-0.5 flex gap-1 items-center">
<PersonIcon />
he/him