fix: nav issues, styling

kiosion · Sep 18, 2023 · f9ac276 · f9ac276
1 parent 1c1a92a
commit f9ac276
Show file tree

Hide file tree

Showing 14 changed files with 153 additions and 234 deletions.
diff --git a/svelte-app/src/app.scss b/svelte-app/src/app.scss
@@ -30,23 +30,11 @@ img {
 body {
   @apply h-full w-full overflow-x-hidden;
 
-  @media (min-width: 0px) {
     background-color: $dark;
-  }
-  @media (min-width: 768px) {
-    background-color: $black;
-  }
-
   --textColour: $light;
 
   &.light {
-    @media (min-width: 0px) {
-      background-color: $white;
-    }
-    @media (min-width: 768px) {
-      background-color: $light;
-    }
-
+    background-color: $light;
     --textColour: $dark;
   }
   &:not(.is-loaded) {

diff --git a/svelte-app/src/components/about/timeline.svelte b/svelte-app/src/components/about/timeline.svelte
@@ -75,22 +75,24 @@
               icon="ChevronDown"
               class="{selected === i ? 'rotate-0' : '-rotate-90'} transition-all"
             />
-            <p
-              class="min-w-[10rem] select-none font-code text-base text-dark/90 dark:text-light/90"
-            >
-              {dateDisplay(item.range.start, item.range.end)}
-            </p>
-            <div class="flex flex-row items-center justify-start">
-              <h1
-                class="text-lg font-bold decoration-accent-light decoration-[3px] underline-offset-4 dark:decoration-accent-dark"
-                class:underline={data[i].hovered}
+            <div class="flex flex-row flex-wrap items-center justify-start gap-x-4">
+              <p
+                class="min-w-[10rem] select-none font-code text-base text-dark/90 dark:text-light/90"
               >
-                {item.title}
-              </h1>
-              {#if item.subtitle}
-                <BulletPoint />
-                <p class="text-base">{item.subtitle}</p>
-              {/if}
+                {dateDisplay(item.range.start, item.range.end)}
+              </p>
+              <div class="flex flex-row items-center justify-start">
+                <h1
+                  class="text-lg font-bold decoration-accent-light decoration-[3px] underline-offset-4 dark:decoration-accent-dark"
+                  class:underline={data[i].hovered}
+                >
+                  {item.title}
+                </h1>
+                {#if item.subtitle}
+                  <BulletPoint />
+                  <p class="text-base">{item.subtitle}</p>
+                {/if}
+              </div>
             </div>
           </div>
           {#if selected === i && item.body}

diff --git a/svelte-app/src/components/controls/language-toggle.svelte b/svelte-app/src/components/controls/language-toggle.svelte
@@ -10,11 +10,6 @@
   import Icon from '$components/icon.svelte';
   import Tooltip from '$components/tooltip.svelte';
 
-  export let langs = [
-    { lang: 'en', name: 'English' },
-    { lang: 'fr', name: 'Français' }
-  ];
-
   let modalOpen = false;
 
   const handleClick = (event: Event, lang: string) => {
@@ -40,106 +35,43 @@
       modalOpen = false;
       navOpen.set(false);
     };
-
-  $: _langs = langs as ((typeof langs)[0] & { active: boolean })[];
 </script>
 
-<Dialog
-  title="{$t('Change language')}?"
-  description={$t(
-    'French translations are incomplete, and hilariously broken in places :)'
-  )}
-  confirmText={$t('Continue')}
-  open={modalOpen}
-  on:close={() => (modalOpen = false)}
-  on:confirm={modalConfirm}
-/>
-
-<Hoverable>
-  <Tooltip
-    text={$t(
-      $currentLang === 'en' ? 'Switch language to French' : 'Switch language to English'
+<div class="flex items-center justify-center">
+  <Dialog
+    title="{$t('Change language')}?"
+    description={$t(
+      'French translations are incomplete, and hilariously broken in places :)'
     )}
-    delay={150}
-    fixed
-  >
-    <button
-      class="focusOutline h-[20px] w-[20px] rounded-sm hover:text-accent-light dark:hover:text-accent-dark {$$props.class ||
-        ''}"
-      aria-label={$t(
-        $currentLang === 'en' ? 'Switch language to French' : 'Switch language to English'
-      )}
-      tabindex="0"
-      on:click={(e) => {
-        handleClick(e, $currentLang === 'en' ? 'fr' : 'en');
-      }}
-    >
-      <Icon icon="script" />
-    </button>
-  </Tooltip>
-</Hoverable>
+    confirmText={$t('Continue')}
+    open={modalOpen}
+    on:close={() => (modalOpen = false)}
+    on:confirm={modalConfirm}
+  />
 
-<!-- <div class={$$props.class || ''}>
-  <span class="cursor-default select-none">{$t('Language')} (</span>
-  {#each _langs as lang, i}
-    <Hoverable bind:hovered={lang.active}>
-      <a
-        class="focusOutline-sm rounded-sm"
-        class:active={lang.active}
-        class:forNav
-        aria-label={$t('Switch language to {lang}', {
-          lang: lang.name
-        })}
-        href={$linkTo($page.url.pathname, lang.lang)}
-        target="_self"
-        role="button"
+  <Hoverable>
+    <Tooltip
+      text={$t('Switch language to {language}', {
+        language: $currentLang === 'en' ? $t('French') : $t('English')
+      })}
+      delay={150}
+      fixed
+    >
+      <button
+        class="focusOutline h-[20px] w-[20px] rounded-sm hover:text-accent-light dark:hover:text-accent-dark {$$props.class ||
+          ''}"
+        aria-label={$t(
+          $currentLang === 'en'
+            ? 'Switch language to French'
+            : 'Switch language to English'
+        )}
         tabindex="0"
         on:click={(e) => {
-          handleClick(e, lang.lang);
-        }}
-        on:keydown={(e) => {
-          if (e.code === 'Enter' || e.code === 'Space') {
-            handleClick(e, lang.lang);
-          }
+          handleClick(e, $currentLang === 'en' ? 'fr' : 'en');
         }}
       >
-        {lang.lang}
-      </a>
-    </Hoverable>
-    {#if i < _langs.length - 1}
-      <span class="cursor-default select-none">/</span>
-    {/if}
-  {/each}
-  <span class="cursor-default select-none">)</span>
-</div> -->
-<style lang="scss">
-  a {
-    &.forNav {
-      @apply px-1;
-
-      &.active {
-        @apply text-dark;
-      }
-    }
-    &:not(.forNav) {
-      @apply decoration-accent-light decoration-2;
-
-      &.active {
-        @apply underline;
-      }
-    }
-  }
-
-  :global(.dark) {
-    a {
-      &.forNav {
-        &.active {
-          @apply text-light;
-        }
-      }
-      &:not(.forNav) {
-        @apply decoration-accent-dark;
-      }
-    }
-  }
-</style>
+        <Icon icon="script" />
+      </button>
+    </Tooltip>
+  </Hoverable>
+</div>
diff --git a/svelte-app/src/components/controls/menu-toggle.svelte b/svelte-app/src/components/controls/menu-toggle.svelte
@@ -8,7 +8,8 @@
 
 <Hoverable>
   <button
-    class="focusOutline h-[20px] w-[20px] rounded-sm hover:text-accent-light dark:hover:text-accent-dark"
+    class="focusOutline h-[20px] w-[20px] rounded-sm hover:text-accent-light dark:hover:text-accent-dark {$$props.class ||
+      ''}"
     aria-label="Toggle navigation"
     data-test-id="nav-toggle"
     on:click={() => navOpen.set(!$navOpen)}

diff --git a/svelte-app/src/components/document/route.svelte b/svelte-app/src/components/document/route.svelte
@@ -65,9 +65,6 @@
   });
 
   $: $page?.url && scrollTo($page.url);
-  $: pageName = `${isPost ? $t('Blog') : $t('My work')}${
-    !isAtTop && data?.title ? ` | ${data.title}` : ''
-  }`;
   $: pageTitle = `kio.dev${data?.title ? ` | ${data.title}` : ''}`;
   $: pageDescription = data?.desc
     ? data.desc
@@ -79,7 +76,9 @@
   <meta name="description" content={pageDescription} />
   <meta
     name="keywords"
-    content="{allTags}blog, {isPost ? 'post' : 'project'}, kio.dev, kio, kiosion"
+    content="{allTags}blog, {isPost
+      ? 'post, blog post'
+      : 'project'}, kio.dev, kio, kiosion"
   />
   <meta name="author" content="Kio" />
   <meta property="og:type" content="website" />

diff --git a/svelte-app/src/components/nav.svelte b/svelte-app/src/components/nav.svelte
@@ -2,15 +2,13 @@
   import { circInOut } from 'svelte/easing';
   import { slide } from 'svelte/transition';
 
-  import { goto } from '$app/navigation';
   import { linkTo } from '$i18n';
   import { BASE_ANIMATION_DURATION, TOP_LEVEL_ROUTES } from '$lib/consts';
   import { navOpen } from '$stores/navigation';
 
   import LanguageControls from '$components/controls/language-toggle.svelte';
   import MenuToggle from '$components/controls/menu-toggle.svelte';
   import ThemeToggle from '$components/controls/theme-toggle.svelte';
-  import Hoverable from '$components/hoverable.svelte';
   import NavLink from '$components/nav/nav-link.svelte';
 
   const navLinks = TOP_LEVEL_ROUTES.filter((route) => !route.hidden)?.map((route) => ({
@@ -19,69 +17,61 @@
   }));
 </script>
 
-<div class="fixed left-6 right-6 top-4 z-10 hidden items-center justify-center md:flex">
+<div class="fixed left-6 right-6 top-4 z-10 flex items-center justify-center">
   <nav
-    class="flex w-full max-w-6xl flex-row items-center justify-between rounded-lg border border-dark/40 bg-light/40 px-6 py-2 backdrop-blur-lg transition-[background-color,border-color] hover:border-dark/60 hover:bg-light/60
+    class="flex w-full max-w-6xl flex-col items-center justify-center rounded-lg border border-dark/40 bg-light/40 px-6 py-2 backdrop-blur-lg transition-[background-color,border-color] hover:border-dark/60 hover:bg-light/60
     focus-visible:border-dark/60 focus-visible:bg-light/60 dark:border-light/40 dark:bg-dark/50 dark:hover:border-light/60 dark:hover:bg-dark/70 dark:focus-visible:border-light/60 dark:focus-visible:bg-dark/70"
     aria-label="Main navigation"
     role="group"
     data-test-id="navBar"
   >
-    <div class="flex flex-row items-center justify-start gap-5">
-      <a
-        class="focusOutline no-select h-12 w-fit rounded-sm py-3 font-code text-xl font-black leading-none"
-        href={$linkTo('/')}
-        aria-label="Home"
+    <div class="flex w-full flex-row items-center justify-between">
+      <div class="hidden flex-row items-center justify-start gap-5 md:flex">
+        <a
+          class="focusOutline no-select h-12 w-fit rounded-sm py-3 font-code text-xl font-black leading-none"
+          href={$linkTo('/')}
+          aria-label="Home"
+        >
+          kio.dev
+        </a>
+        <span class="block h-[24px] w-[2px] bg-accent-light/60 dark:bg-accent-dark/60" />
+        <div class="flex flex-row items-center justify-start gap-5">
+          {#each navLinks as link}
+            <NavLink {link} />
+          {/each}
+        </div>
+      </div>
+      <div class="relative flex flex-row items-center justify-start gap-4 md:hidden">
+        <MenuToggle />
+        <span class="block h-[24px] w-[2px] bg-accent-light/60 dark:bg-accent-dark/60" />
+        <a
+          class="focusOutline no-select h-12 w-fit rounded-sm py-3 font-code text-xl font-black leading-none"
+          href={$linkTo('/')}
+          aria-label="Home"
+          on:click={() => {
+            navOpen.set(false);
+          }}
+        >
+          kio.dev
+        </a>
+      </div>
+      <div class="flex flex-row items-center justify-end gap-4">
+        <ThemeToggle />
+        <LanguageControls />
+      </div>
+    </div>
+    {#if $navOpen}
+      <div
+        class="my-2 flex w-full flex-col items-start justify-start gap-y-2 text-2xl"
+        transition:slide|local={{
+          duration: BASE_ANIMATION_DURATION,
+          easing: circInOut
+        }}
       >
-        kio.dev
-      </a>
-      <span class="block h-[24px] w-[2px] bg-accent-light/60 dark:bg-accent-dark/60" />
-      <div class="flex flex-row items-center justify-start gap-5">
-        {#each navLinks as link, index}
-          <NavLink {link} links={navLinks} {index} />
+        {#each navLinks as link}
+          <NavLink {link} mobile />
         {/each}
       </div>
-    </div>
-    <div class="flex flex-row items-center justify-end gap-4">
-      <ThemeToggle />
-      <LanguageControls />
-    </div>
+    {/if}
   </nav>
 </div>
-
-<nav class="block md:hidden" data-test-id="navBar">
-  <div
-    class="relative m-4 flex flex-row flex-wrap items-center justify-between gap-4 px-3"
-  >
-    <MenuToggle />
-    <Hoverable>
-      <button
-        class="logo-text -mr-6 h-8 transition-[filter] dark:invert"
-        data-test-id="nav-logo"
-        on:click={() => {
-          navOpen.set(false);
-          goto($linkTo('/'));
-        }}
-      >
-        <img class="h-full" src="/assets/logo-text--short.webp" alt="Kiosion" />
-      </button>
-    </Hoverable>
-    <div class="align-center flex w-fit flex-row justify-start gap-4 pt-1">
-      <ThemeToggle />
-      <LanguageControls />
-    </div>
-  </div>
-  {#if $navOpen}
-    <div
-      class="mb-[10px] flex flex-col items-center justify-center gap-3 text-2xl"
-      transition:slide|local={{
-        duration: BASE_ANIMATION_DURATION,
-        easing: circInOut
-      }}
-    >
-      {#each navLinks as link, index}
-        <NavLink {link} links={navLinks} {index} mobile />
-      {/each}
-    </div>
-  {/if}
-</nav>