fix: responsiveness

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

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>

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">

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">

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" />