feat: Rework design

kiosion · Sep 16, 2023 · 30b9810 · 30b9810
1 parent 5f1319a
commit 30b9810
Show file tree

Hide file tree

Showing 41 changed files with 523 additions and 1,044 deletions.
diff --git a/svelte-app/cypress/e2e/routes/blog.cy.ts b/svelte-app/cypress/e2e/routes/blog.cy.ts
@@ -19,7 +19,7 @@ describe('E2E | Blog', () => {
     cy.visit('/blog');
 
     cy.get('div.main', { timeout: 4000 }).should('exist');
-    cy.get('div.main').should('contain', 'kio.dev | Blog');
+    cy.get('div.main').should('contain', 'Recent posts');
   });
 
   // TODO: This should be a separate test

diff --git a/svelte-app/cypress/e2e/routes/index.cy.ts b/svelte-app/cypress/e2e/routes/index.cy.ts
@@ -3,12 +3,12 @@ describe('E2E | Index', () => {
     cy.intercept('GET', '/api/get/config');
     cy.visit('/');
 
-    cy.get('div.main', { timeout: 4000 }).should('contain', 'kio.dev | Index');
+    cy.get('div.main', { timeout: 4000 }).should('contain', 'About me');
     cy.get('[data-test-id="error-text"]').should('not.exist');
 
     cy.reload();
 
-    cy.get('div.main', { timeout: 4000 }).should('contain', 'kio.dev | Index');
+    cy.get('div.main', { timeout: 4000 }).should('contain', 'About me');
     cy.get('[data-test-id="error-text"]').should('not.exist');
   });
 });
diff --git a/svelte-app/src/app.scss b/svelte-app/src/app.scss
@@ -33,7 +33,7 @@ body {
   @media (min-width: 0px) {
     background-color: $dark;
   }
-  @media (min-width: 1024px) {
+  @media (min-width: 768px) {
     background-color: $black;
   }
 
@@ -43,7 +43,7 @@ body {
     @media (min-width: 0px) {
       background-color: $white;
     }
-    @media (min-width: 1024px) {
+    @media (min-width: 768px) {
       background-color: $light;
     }
 

diff --git a/svelte-app/src/components/about/timeline.svelte b/svelte-app/src/components/about/timeline.svelte
@@ -6,7 +6,7 @@
   import { currentLang, t } from '$i18n';
   import Settings from '$stores/settings';
 
-  import EmptyContent from '$components/empty-content.svelte';
+  import BulletPoint from '$components/bullet-point.svelte';
   import Hoverable from '$components/hoverable.svelte';
   import Icon from '$components/icon.svelte';
   import PortableText from '$components/portable-text/portable-text.svelte';
@@ -17,7 +17,7 @@
 
   let selected: number | null = null;
 
-  export let data: AuthorTimelineItem[] | undefined;
+  export let data: AuthorTimelineItem[];
 
   const dateDisplay = (start: string, end: string | undefined) => {
     try {
@@ -26,33 +26,16 @@
 
       if (!endDate) {
         return `${new Intl.DateTimeFormat($currentLang, {
-          month: 'long',
+          month: 'short',
           year: 'numeric'
-        }).format(startDate)} ${$t('to')} ${$t('now')}`;
-      }
-
-      if (startDate.getFullYear() === endDate.getFullYear()) {
-        if (startDate.getMonth() === endDate.getMonth()) {
-          return `${new Intl.DateTimeFormat($currentLang, {
-            month: 'long',
-            day: 'numeric'
-          }).format(startDate)} ${$t('to')} ${new Intl.DateTimeFormat($currentLang, {
-            day: 'numeric',
-            year: 'numeric'
-          }).format(endDate)}`;
-        }
-        return `${new Intl.DateTimeFormat($currentLang, {
-          month: 'long'
-        }).format(startDate)} ${$t('to')} ${new Intl.DateTimeFormat($currentLang, {
-          month: 'long'
-        }).format(endDate)} ${endDate.getFullYear()}`;
+        }).format(startDate)} - ${$t('present')}`;
       }
 
       return `${new Intl.DateTimeFormat($currentLang, {
-        month: 'long',
+        month: 'short',
         year: 'numeric'
-      }).format(startDate)} ${$t('to')} ${new Intl.DateTimeFormat($currentLang, {
-        month: 'long',
+      }).format(startDate)} - ${new Intl.DateTimeFormat($currentLang, {
+        month: 'short',
         year: 'numeric'
       }).format(endDate)}`;
     } catch (_) {
@@ -63,104 +46,79 @@
   const { reduce_motion } = Settings;
 </script>
 
-<div class="relative ml-0 mr-2 mt-4 h-fit">
-  {#if data}
-    <div
-      class="absolute left-0 top-[14px] h-[calc(100%_-_14px)] w-[1px] rounded-full bg-dark/40 dark:bg-light/40"
-    />
-    <div class="-ml-[4px] flex flex-col items-start justify-start gap-4">
-      {#each data as item, i}
-        <div class="flex w-full flex-row items-start justify-start gap-2">
-          <Icon
-            width={24}
-            height={24}
-            icon="ArrowRight"
-            class="translate-x-[1px] translate-y-[2.5px] text-dark/40 dark:text-light/40"
-          />
-          <div class="mr-6 flex w-full flex-col items-start justify-start">
-            <h1 class="select-none font-code text-base text-dark/90 dark:text-light/90">
+<div class="flex flex-col items-start justify-start gap-4">
+  {#each data as item, i}
+    <Hoverable bind:hovered={data[i].hovered}>
+      <Tooltip
+        text={selected === i ? $t('Click to hide details') : $t('Click to show details')}
+        position="bottom"
+        disable={!item.body}
+      >
+        <div
+          class="flex w-full flex-col items-start justify-start"
+          on:click={() => {
+            if (item.body) {
+              selected = selected === i ? null : i;
+            }
+          }}
+          on:keydown={(e) => {
+            if (item.body && (e.code === 'Enter' || e.code === 'Space')) {
+              selected = selected === i ? null : i;
+            }
+          }}
+          aria-expanded={selected === i}
+          tabindex={0}
+          role="button"
+        >
+          <div class="flex flex-row items-center justify-start gap-4">
+            <Icon
+              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)}
-            </h1>
-            <Hoverable bind:hovered={data[i].hovered}>
-              <Tooltip
-                text={selected === i
-                  ? $t('Click to hide details')
-                  : $t('Click to show details')}
-                position="bottom"
-                disable={!item.body}
+            </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="relative ml-2 mt-2 w-full rounded-lg {data[i].hovered
-                    ? 'border-dark/60 bg-dark/10 dark:border-light/60 dark:bg-dark/40'
-                    : 'border-dark/40 bg-dark/5 dark:border-light/40 dark:bg-dark/20'} focusOutline overflow-hidden border px-4 py-3 transition-[background-color,border-color]"
-                  on:click={() => {
-                    if (item.body) {
-                      selected = selected === i ? null : i;
-                    }
-                  }}
-                  on:keydown={(e) => {
-                    if (item.body && (e.code === 'Enter' || e.code === 'Space')) {
-                      selected = selected === i ? null : i;
-                    }
-                  }}
-                  aria-expanded={selected === i}
-                  tabindex={0}
-                  role="button"
-                >
-                  <div class="line-clamp-1 select-none font-sans text-base font-bold">
-                    {item.title}
-                  </div>
-                  {#if item.subtitle}
-                    <div
-                      class="text-gray-700 dark:text-gray-200 mt-1 line-clamp-1 select-none font-sans text-base italic"
-                    >
-                      {item.subtitle}
-                    </div>
-                  {/if}
-                  {#if selected === i && item.body}
-                    <div
-                      class="pb-2 font-sans text-base"
-                      in:maybe={{
-                        fn: $reduce_motion ? 'fade' : 'slide',
-                        enable: true,
-                        duration: 200,
-                        easing: circInOut
-                      }}
-                      out:maybe={{
-                        fn: $reduce_motion ? 'fade' : 'slide',
-                        enable: true,
-                        duration: 150,
-                        easing: circInOut
-                      }}
-                    >
-                      {#if item.skills}
-                        <Tags
-                          model="project"
-                          data={item.skills}
-                          classes="my-2 select-none"
-                        />
-                      {/if}
-                      <div class="-mb-5 mt-4">
-                        <PortableText text={item.body} />
-                      </div>
-                    </div>
-                  {/if}
-                  {#if item.body}
-                    <Icon
-                      icon="ChevronDown"
-                      class="{selected === i
-                        ? 'rotate-0'
-                        : 'rotate-90'} absolute right-4 top-4 transition-all"
-                    />
-                  {/if}
-                </div>
-              </Tooltip>
-            </Hoverable>
+                {item.title}
+              </h1>
+              {#if item.subtitle}
+                <BulletPoint />
+                <p class="text-base">{item.subtitle}</p>
+              {/if}
+            </div>
           </div>
+          {#if selected === i && item.body}
+            <div
+              class="mx-10 pb-2 font-sans text-base"
+              in:maybe={{
+                fn: $reduce_motion ? 'fade' : 'slide',
+                enable: true,
+                duration: 200,
+                easing: circInOut
+              }}
+              out:maybe={{
+                fn: $reduce_motion ? 'fade' : 'slide',
+                enable: true,
+                duration: 150,
+                easing: circInOut
+              }}
+            >
+              {#if item.skills}
+                <Tags model="project" data={item.skills} classes="my-2 select-none" />
+              {/if}
+              <div class="-mb-5 mt-4">
+                <PortableText text={item.body} />
+              </div>
+            </div>
+          {/if}
         </div>
-      {/each}
-    </div>
-  {:else}
-    <EmptyContent />
-  {/if}
+      </Tooltip>
+    </Hoverable>
+  {/each}
 </div>
diff --git a/svelte-app/src/components/bullet-point.svelte b/svelte-app/src/components/bullet-point.svelte
@@ -1,3 +1,4 @@
 <div
-  class="mx-2 h-1 w-1 rounded-full bg-dark/80 transition-all duration-150 dark:bg-light/90"
+  class="mx-2 h-1 w-1 rounded-full bg-dark/80 transition-all duration-150 dark:bg-light/90 {$$props.class ||
+    ''}"
 />
diff --git a/svelte-app/src/components/context-menu/divider.svelte b/svelte-app/src/components/context-menu/divider.svelte
@@ -3,5 +3,5 @@
 </script>
 
 <span
-  class="mx-3 my-2 block h-[1px] bg-dark/30 transition-colors duration-150 dark:bg-light/20 {classes}"
+  class="mx-3 my-2 block h-[1px] bg-dark/40 transition-colors duration-150 dark:bg-light/40 {classes}"
 />
diff --git a/svelte-app/src/components/context-menu/menu.svelte b/svelte-app/src/components/context-menu/menu.svelte
@@ -64,12 +64,12 @@
 
 <style lang="scss">
   div {
-    @apply fixed z-20 grid min-w-[14rem] overflow-hidden rounded-lg bg-light py-2 text-dark shadow-[0_0_20px_-2px_var(--tw-shadow)] shadow-dark/40;
+    @apply fixed z-20 grid min-w-[14rem] overflow-hidden rounded-lg border border-dark/40 bg-light/60 py-2 text-dark backdrop-blur-md;
   }
 
   :global(.dark) {
     div {
-      @apply bg-gray text-light shadow-gray/80;
+      @apply border-light/40 bg-dark/60 text-light;
     }
   }
 </style>
diff --git a/...ponents/controls/language-controls.svelte → ...omponents/controls/language-toggle.svelte b/...ponents/controls/language-controls.svelte → ...omponents/controls/language-toggle.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
-  import { linkTo, t } from '$i18n';
+  import { currentLang, linkTo, t } from '$i18n';
   import { APP_LANGS } from '$lib/consts';
   import { navOpen } from '$stores/navigation';
 
   import Dialog from '$components/dialog.svelte';
   import Hoverable from '$components/hoverable.svelte';
+  import Icon from '$components/icon.svelte';
+  import Tooltip from '$components/tooltip.svelte';
 
   export let langs = [
-      { lang: 'en', name: 'English' },
-      { lang: 'fr', name: 'Français' }
-    ],
-    forNav = false;
+    { lang: 'en', name: 'English' },
+    { lang: 'fr', name: 'Français' }
+  ];
 
   let modalOpen = false;
 
@@ -54,7 +55,31 @@
   on:confirm={modalConfirm}
 />
 
-<div class={$$props.class || ''}>
+<Hoverable>
+  <Tooltip
+    text={$t(
+      $currentLang === 'en' ? 'Switch language to French' : 'Switch language to 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, $currentLang === 'en' ? 'fr' : 'en');
+      }}
+    >
+      <Icon icon="script" />
+    </button>
+  </Tooltip>
+</Hoverable>
+
+<!-- <div class={$$props.class || ''}>
   <span class="cursor-default select-none">{$t('Language')} (</span>
   {#each _langs as lang, i}
     <Hoverable bind:hovered={lang.active}>
@@ -86,8 +111,7 @@
     {/if}
   {/each}
   <span class="cursor-default select-none">)</span>
-</div>
-
+</div> -->
 <style lang="scss">
   a {
     &.forNav {