fix: Misc responsive bugs

svelte-app/src/components/code-block.svelte

@@ -2,7 +2,6 @@
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-nocheck Need to fix typings for hlAuto and hlHighlight
   import { onDestroy, onMount } from 'svelte';
-  import { fade } from 'svelte/transition';
 
   import {
     type Highlight,
@@ -121,7 +120,7 @@
 <div
   class="relative -mx-1 my-7 overflow-hidden rounded-sm border border-dark/40 duration-75 dark:border-light/40 {hovered
     ? 'border-dark/60 dark:border-light/60'
-    : ''}"
+    : ''} transition-none"
   role="group"
   aria-label={$t('Code block')}
   aria-labelledby={filename ? `${id}-filename` : undefined}
@@ -146,11 +145,8 @@
     <Tooltip text={$t('Copy to clipboard')} position="left" delay={200} fixed>
       {#key copied}
         <button
-          class="focusOutline-sm absolute right-0 top-0 z-[2] cursor-pointer rounded-sm pb-3 pl-3 pr-4 pt-4 text-dark/60 opacity-0 transition-opacity duration-75 hover:text-dark dark:text-light/60 dark:hover:text-light"
-          class:opacity-100={hovered || filename}
+          class="focusOutline-sm absolute right-0 top-0 z-[2] cursor-pointer rounded-sm pb-3 pl-3 pr-4 pt-4 text-dark/60 hover:text-dark dark:text-light/60 dark:hover:text-light"
           on:click={() => copy()}
-          in:fade={{ duration: 100, delay: 100 }}
-          out:fade={{ delay: 100, duration: 100 }}
         >
           <Icon icon={copied ? 'Check' : 'Copy'} />
         </button>

svelte-app/src/components/document/content/common/footer.svelte

@@ -13,8 +13,8 @@
 <div class="mt-4">
   <Divider />
   <ArrowButton
-    class="w-full text-right"
-    href={$linkTo(model === 'post' ? '/blog' : '/work')}
+    class="w-full text-left"
+    href={model === 'post' ? $linkTo('/blog') : $linkTo('/projects')}
     preload
   >
     &larr; {$t('Read more')}

svelte-app/src/components/document/content/common/header.svelte

@@ -38,7 +38,7 @@
         </h1>
       </svelte:fragment>
       <svelte:fragment slot="meta">
-        <div class="flex flex-row items-center justify-between gap-4">
+        <div class="flex flex-row flex-wrap items-center justify-between gap-4">
           <div class="flex flex-row flex-wrap items-center justify-start gap-y-2">
             <p class="cursor-default font-mono text-base">
               {date ? date : $t('Unknown date')}
@@ -50,7 +50,7 @@
           </div>
           {#if headings?.length}
             <ArrowButton
-              class="focusOutline-sm flex-1 rounded-sm text-right"
+              class="focusOutline-sm flex-1 whitespace-nowrap rounded-sm text-right"
               on:click={() => (summaryExpanded = !summaryExpanded)}
             >
               <span class="inline-block {summaryExpanded ? 'rotate-90' : '-rotate-90'}"

svelte-app/src/components/link.svelte

@@ -23,7 +23,7 @@
     href={link}
     target={$$props.newtab ? '_blank' : undefined}
     rel={$$props.newtab ? 'noopener noreferrer' : undefined}
-    class="focusOutline-sm rounded-sm from-accent-light text-dark/90 underline decoration-accent-light underline-offset-[2px] dark:text-light dark:decoration-accent-dark {hovered
+    class="focusOutline-sm rounded-sm from-accent-light underline decoration-accent-light underline-offset-[2px] dark:decoration-accent-dark {hovered
       ? 'decoration-[3px]'
       : 'decoration-2'}"
     tabindex="0"

svelte-app/src/components/nav.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
   import { circInOut } from 'svelte/easing';
   import { slide } from 'svelte/transition';
 
   import { linkTo } from '$i18n';
   import { BASE_ANIMATION_DURATION, NAV_LINKS } from '$lib/consts';
+  import { isDesktop } from '$lib/helpers/responsive';
   import { navOpen } from '$stores/navigation';
 
   import LanguageControls from '$components/controls/language-toggle.svelte';
@@ -13,14 +15,25 @@
   import Spinner from '$components/loading/spinner.svelte';
   import NavLink from '$components/nav/nav-link.svelte';
 
+  import type { Unsubscriber } from 'svelte/store';
+
   export let loaded = false;
 
   export const toggle = (vis: boolean) => {
     hideNav = !vis;
   };
 
   let hovered = false,
-    hideNav = false;
+    hideNav = false,
+    unsubscribe: Unsubscriber;
+
+  onMount(() => {
+    unsubscribe = isDesktop.subscribe((state) => {
+      state && navOpen.set(false);
+    });
+  });
+
+  onDestroy(() => unsubscribe && unsubscribe());
 </script>
 
 <div
@@ -55,7 +68,7 @@
               ? 'bg-accent-light dark:bg-accent-dark'
               : 'bg-accent-light/60 dark:bg-accent-dark/60'}"
           />
-          <span class="relative h-fit w-fit">
+          <span class="relative mt-0.5 h-fit w-fit">
             <a
               class="focusOutline no-select h-12 w-fit rounded-sm py-3 font-code text-xl font-black leading-none transition-[color,opacity]"
               class:opacity-0={!loaded}
@@ -89,7 +102,7 @@
       </div>
       {#if $navOpen}
         <div
-          class="my-2 flex w-full flex-col items-start justify-start gap-y-2 text-2xl"
+          class="mt-3 flex w-full flex-col items-start justify-start text-2xl"
           transition:slide|local={{
             duration: BASE_ANIMATION_DURATION,
             easing: circInOut

svelte-app/src/languages/en.json

@@ -25,6 +25,7 @@
   "Enable sounds": "Enable sounds",
   "English": "English",
   "Error": "Error",
+  "Etc": "Etc",
   "Features": "Features",
   "Footnotes": "Footnotes",
   "Forward": "Forward",

svelte-app/src/languages/fr.json

@@ -25,6 +25,7 @@
   "Enable sounds": "Activer les effets sonores",
   "English": "Anglais",
   "Error": "Erreur",
+  "Etc": "Etc",
   "Features": "Fonctionnalités",
   "Footnotes": "Notes de bas de page",
   "Forward": "Vers l'avant",

svelte-app/src/lib/consts.ts

@@ -34,7 +34,7 @@ export const APP_ROUTES = [
     hidden: false
   },
   {
-    name: 'Meta',
+    name: 'Etc',
     path: '/etc',
     hidden: false
   }

svelte-app/src/routes/+layout.svelte

@@ -2,17 +2,19 @@
   import '../app.scss';
 
   import { onDestroy, onMount, setContext } from 'svelte';
-  import { fade, fly } from 'svelte/transition';
+  import { circInOut } from 'svelte/easing';
+  import { fade, fly, slide } from 'svelte/transition';
 
   import { classList } from 'svelte-body';
   import { useMediaQuery } from 'svelte-breakpoints';
 
   import { navigating, page } from '$app/stores';
   import { isDesktop } from '$helpers/responsive';
   import { check as checkTranslations, currentLang, isLocalized, t } from '$i18n';
-  import { APP_LANGS, DEFAULT_APP_LANG } from '$lib/consts';
+  import { APP_LANGS, BASE_ANIMATION_DURATION, DEFAULT_APP_LANG } from '$lib/consts';
   import { ENV } from '$lib/env';
   import { setState as setMenuState, state as menuState } from '$lib/helpers/menu';
+  import { navOpen } from '$stores/navigation';
   import Settings, { loading } from '$stores/settings';
 
   import ContextMenu from '$components/context-menu.svelte';
@@ -131,6 +133,16 @@
     on:scrollDown={() => toggleNav(false)}
     on:scrollUp={() => toggleNav(true)}
   >
+    <!-- Janky but works for now lmao -->
+    {#if $navOpen}
+      <div
+        class="block h-52 w-full"
+        transition:slide={{
+          duration: BASE_ANIMATION_DURATION,
+          easing: circInOut
+        }}
+      />
+    {/if}
     <div class="relative mt-16 max-h-full w-full">
       <PageTransition pathname={data.pathname}>
         <slot />