fix: Heading spacing / header styles

kiosion · Apr 16, 2024 · 45fe93c · 45fe93c
1 parent 5bfca7b
commit 45fe93c
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 37 deletions.
diff --git a/svelte-app/src/components/document/content/header.svelte b/svelte-app/src/components/document/content/header.svelte
@@ -30,7 +30,8 @@
   </h1>
 
   <div
-    class="flex select-none flex-row flex-wrap items-center justify-between gap-5 pb-4"
+    class="flex select-none flex-row flex-wrap items-center justify-between gap-5"
+    class:pb-4={data.tags?.length}
   >
     <div
       class="flex flex-row flex-wrap items-center justify-start gap-x-1 gap-y-2 transition-[color]"
@@ -59,10 +60,24 @@
         </p>
       {/if}
     </div>
+    {#if !data.tags?.length}
+      <ArrowButton
+        class="focus-outline-sm hidden flex-1 select-none whitespace-nowrap sm:block print:hidden"
+        href={model === 'post' ? $linkTo('/thoughts') : $linkTo('/work')}
+        align="right"
+        fullWidth
+        preload
+      >
+        <span class="flex items-center justify-end gap-2 font-mono text-sm">
+          <Icon name="ArrowLeft" inline />
+          <p>{$t('Read more')}</p>
+        </span>
+      </ArrowButton>
+    {/if}
   </div>
 
-  <div class="flex flex-wrap items-end justify-between">
-    {#if data.tags?.length}
+  {#if data.tags?.length}
+    <div class="flex flex-wrap items-end justify-between">
       <div
         class="flex flex-row flex-wrap items-center justify-start gap-2"
         aria-label={$t('Tags')}
@@ -75,20 +90,20 @@
           </span>
         {/each}
       </div>
-    {/if}
-    <ArrowButton
-      class="focus-outline-sm hidden flex-1 select-none whitespace-nowrap sm:block print:hidden"
-      href={model === 'post' ? $linkTo('/thoughts') : $linkTo('/work')}
-      align="right"
-      fullWidth
-      preload
-    >
-      <span class="flex items-center justify-end gap-2 font-mono text-sm">
-        <Icon name="ArrowLeft" inline />
-        <p>{$t('Read more')}</p>
-      </span>
-    </ArrowButton>
-  </div>
+      <ArrowButton
+        class="focus-outline-sm hidden flex-1 select-none whitespace-nowrap sm:block print:hidden"
+        href={model === 'post' ? $linkTo('/thoughts') : $linkTo('/work')}
+        align="right"
+        fullWidth
+        preload
+      >
+        <span class="flex items-center justify-end gap-2 font-mono text-sm">
+          <Icon name="ArrowLeft" inline />
+          <p>{$t('Read more')}</p>
+        </span>
+      </ArrowButton>
+    </div>
+  {/if}
 </div>
 
 {#if data._type === 'project' && data.github}

diff --git a/svelte-app/src/components/headings/headed-block.svelte b/svelte-app/src/components/headings/headed-block.svelte
@@ -7,7 +7,7 @@
   export const id = Math.random().toString(36).substring(2);
 </script>
 
-<section class="w-full transition-colors" {id} data-test-id={testId}>
+<section class="mb-6 w-full transition-colors" {id} data-test-id={testId}>
   <div class="my-6 w-full px-8">
     <h1 class="font-display text-2xl font-black" id="{id}-heading">{heading}</h1>
   </div>

diff --git a/svelte-app/src/components/lists/list-item.svelte b/svelte-app/src/components/lists/list-item.svelte
@@ -8,8 +8,7 @@
 
   import type { PostDocument, ProjectDocument } from '$types';
 
-  export let document: PostDocument | ProjectDocument,
-    small = false;
+  export let document: PostDocument | ProjectDocument;
 
   const link =
     document._type === 'post'
@@ -26,7 +25,7 @@
     data-sveltekit-preload-data
   >
     <div
-      class="flex flex-row items-center justify-start pb-1.5 pt-0.5 font-mono text-sm leading-[1.2] text-dark/80 transition-colors dark:text-light/80"
+      class="flex flex-row items-center justify-start pb-1 pt-0.5 font-mono text-sm leading-[1.2] text-dark/80 transition-colors dark:text-light/80"
       class:gap-3={document.tags?.length}
     >
       <p class="line-clamp-1" aria-label={$t('Date posted')}>
@@ -44,21 +43,15 @@
     </div>
 
     <h1
-      class="min-w-fit font-sans font-bold decoration-accent-light transition-colors dark:decoration-accent-dark"
-      class:pb-2={!small && document.desc?.length}
+      class="line-clamp-1 font-sans text-2xl font-bold leading-9 decoration-accent-light decoration-[3px] underline-offset-4 transition-colors dark:decoration-accent-dark lg:max-w-[60rem]"
+      class:pb-0.5={document.desc?.length}
       class:underline={hovered}
-      class:text-xl={small}
-      class:text-2xl={!small}
-      class:decoration-2={small}
-      class:decoration-[3px]={!small}
-      class:underline-offset-2={small}
-      class:underline-offset-4={!small}
     >
       {document.title}
     </h1>
 
-    {#if !small && document.desc?.length}
-      <p class="line-clamp-1 text-base leading-6">{document.desc}</p>
+    {#if document.desc?.length}
+      <p class="line-clamp-2 lg:max-w-[60rem]">{document.desc}</p>
     {/if}
   </a>
 </Hoverable>
diff --git a/svelte-app/src/components/portable-text/serializers/custom-heading.svelte b/svelte-app/src/components/portable-text/serializers/custom-heading.svelte
@@ -25,22 +25,22 @@
 
 <style lang="scss">
   .h1 {
-    @apply mb-6 mt-14;
+    @apply mb-6 mt-10;
   }
   .h2 {
-    @apply mb-6 mt-12;
+    @apply mb-6 mt-10;
   }
   .h3 {
-    @apply mb-5 mt-10;
+    @apply mb-5 mt-8;
   }
   .h4 {
-    @apply mb-4 mt-8;
+    @apply mb-5 mt-8;
   }
   .h5 {
     @apply mb-4 mt-6;
   }
   .h6 {
-    @apply mb-3 mt-5;
+    @apply mb-4 mt-6;
   }
 
   h1 {

diff --git a/svelte-app/src/routes/[[lang=lang]]/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/+page.svelte
@@ -31,7 +31,7 @@
 {#if data.config?.about}
   {#each data.config.about as aboutSection}
     <HeadedBlock heading={aboutSection.title}>
-      <PortableText text={aboutSection.content} class="-mt-2 pb-0.5 text-md" />
+      <PortableText text={aboutSection.content} class="-mt-2 text-md" />
     </HeadedBlock>
 
     <Divider />