chore(front): updates heading hierarchies (#1163)

dgrebb · Jan 17, 2024 · 1ead3a4 · 1ead3a4
1 parent c9101c1
commit 1ead3a4
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 5 deletions.
diff --git a/front/src/lib/components/posts/PostsGrid.svelte b/front/src/lib/components/posts/PostsGrid.svelte
@@ -10,7 +10,7 @@
       style={lazyImage && `background-image: url('${lazyImage}');`}
     >
       <a href="/post/{slug}/" class="posts-grid-link">
-        <span class="link-bg">{title}</span>
+        <h2 class="link-bg">{title}</h2>
       </a>
     </li>
   {/each}

diff --git a/front/src/lib/layout/Header.svelte b/front/src/lib/layout/Header.svelte
@@ -5,14 +5,15 @@
   import '@styles/components/nav.css';
   import '@styles/components/theme-toggle.css';
 
+  export let route;
   export let navHeading;
   export let navItems;
 </script>
 
 <header class="header" id="header">
   <a href="#main" class="btn skip-to-content">Skip to Main Content</a>
   <div class="site-title">
-    <NavHome {navHeading} />
+    <NavHome {navHeading} {route} />
   </div>
   {#if navItems}<NavBar {navItems} />{/if}
   <ThemeToggle />

diff --git a/front/src/lib/layout/NavHome.svelte b/front/src/lib/layout/NavHome.svelte
@@ -1,7 +1,12 @@
 <script>
+  export let route;
   export let navHeading;
 </script>
 
 <a class="nav-home" href="/" aria-label="Dan Grebb | Home">
-  <h1>{navHeading}</h1>
+  {#if route === '/'}
+    <h1>{navHeading}</h1>
+  {:else}
+    {navHeading}
+  {/if}
 </a>
diff --git a/front/src/routes/+layout.svelte b/front/src/routes/+layout.svelte
@@ -36,7 +36,7 @@
 </script>
 
 <span class="flourish" />
-<Header {navHeading} {navItems} />
+<Header {navHeading} {navItems} {route} />
 <main class="main" class:secondary class:l-post={post} data-sveltekit-noscroll>
   <slot />
 </main>

diff --git a/front/src/routes/+page.svelte b/front/src/routes/+page.svelte
@@ -87,7 +87,7 @@
     </noscript>
 
     <a id="main">Main Content</a>
-    <h1 class="headline">{headline}</h1>
+    <h2 class="headline">{headline}</h2>
     {@html intro}
   </section>