From 07c9720cc3719ddef47fe86cd2951b85f2d8ddf3 Mon Sep 17 00:00:00 2001
From: Prasanta Kumar Dutta <7580745+pkd2512@users.noreply.github.com>
Date: Fri, 8 Sep 2023 16:11:33 +0530
Subject: [PATCH] list style and header fixes

---
 .../NavBar/NavDropdown/MoreDropdown.svelte    |  5 +++
 .../NavBar/NavDropdown/SectionDropdown.svelte | 10 ++++++
 .../NavBar/NavDropdown/StoryCard/index.svelte |  1 +
 .../NavBar/NavDropdown/index.svelte           |  7 ++++
 src/components/SiteHeader/NavBar/index.svelte | 10 ++++++
 .../SiteHeadline/SiteHeadline.svelte          | 10 ------
 src/scss/reset/_typography.scss               | 32 +++++++++++++------
 7 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte b/src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte
index b5cc2fbc..ee0256af 100644
--- a/src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte
+++ b/src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte
@@ -42,6 +42,7 @@
 
   a {
     text-decoration: none;
+    font-family: var(--theme-font-family-sans-serif);
     &:hover {
       color: inherit;
       text-decoration: underline !important;
@@ -71,6 +72,10 @@
       margin: 0;
       list-style: none;
 
+      li {
+        margin: 0;
+      }
+
       .subsection-link {
         font-size: 16px;
         color: var(--nav-primary, var(--tr-dark-grey));
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte b/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
index a3559edc..3773eb36 100644
--- a/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
+++ b/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
@@ -67,6 +67,16 @@
       padding: 0;
       margin: 12px 0 0 0;
 
+      font-family: var(--theme-font-family-sans-serif);
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 18px;
+      color: var(--nav-primary, #404040);
+
+      li {
+        margin: 0;
+      }
+
       &:first-child {
         margin-right: 16px;
       }
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte b/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte
index 5bba1afc..007f7046 100644
--- a/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte
+++ b/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte
@@ -101,6 +101,7 @@
         object-fit: cover;
         width: 100%;
         height: 100%;
+        margin: 0;
       }
     }
   }
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/index.svelte b/src/components/SiteHeader/NavBar/NavDropdown/index.svelte
index 2ea1952e..c51838cf 100644
--- a/src/components/SiteHeader/NavBar/NavDropdown/index.svelte
+++ b/src/components/SiteHeader/NavBar/NavDropdown/index.svelte
@@ -166,6 +166,12 @@
     padding: 0;
     margin: 20px 0 0 0;
 
+    font-family: var(--theme-font-family-sans-serif);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--nav-primary, #404040);
+
     @include at-4-columns {
       grid-template-columns: repeat(1, 1fr);
     }
@@ -173,6 +179,7 @@
 
   .story-item {
     padding-bottom: 20px;
+    margin: 0;
     animation: fadein 0.5s both $easeOutExpo;
 
     &:nth-child(1),
diff --git a/src/components/SiteHeader/NavBar/index.svelte b/src/components/SiteHeader/NavBar/index.svelte
index 0b1df751..c6aa6610 100644
--- a/src/components/SiteHeader/NavBar/index.svelte
+++ b/src/components/SiteHeader/NavBar/index.svelte
@@ -28,9 +28,11 @@
 
 <div class="nav-bar">
   <nav aria-label="Main navigation">
+    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
     <ul class="nav-list">
       {#each displaySections as section}
         {#if section.children}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
           <li
             class="nav-item category link"
             on:mouseenter="{() => {
@@ -83,6 +85,7 @@
           </li>
         {/if}
       {/each}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <li
         class="nav-item"
         on:mouseenter="{() => {
@@ -138,13 +141,20 @@
   }
 
   .nav-list {
+    display: block;
     list-style: none;
     margin: 0;
     padding: 0;
+
+    font-family: var(--theme-font-family-sans-serif);
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 1.5;
   }
 
   .nav-item {
     display: inline-flex;
+    margin: 0;
     padding: 0 10px;
     @include font-sans;
     font-weight: 500;
diff --git a/src/components/SiteHeadline/SiteHeadline.svelte b/src/components/SiteHeadline/SiteHeadline.svelte
index 7bbb562e..436fb594 100644
--- a/src/components/SiteHeadline/SiteHeadline.svelte
+++ b/src/components/SiteHeadline/SiteHeadline.svelte
@@ -99,13 +99,3 @@
     />
   </header>
 </Block>
-
-<style lang="scss">
-  @use '../../scss/mixins' as *;
-
-  @media (max-width: $column-width-narrow) {
-    h1 {
-      @include font-semibold;
-    }
-  }
-</style>
diff --git a/src/scss/reset/_typography.scss b/src/scss/reset/_typography.scss
index 54e4e919..8c800f72 100644
--- a/src/scss/reset/_typography.scss
+++ b/src/scss/reset/_typography.scss
@@ -1,9 +1,13 @@
 @use '../mixins' as *;
 
+html {
+  font-size: 100%;
+}
+
 body {
   font-size: 1rem;
   color: #404040;
-  @include font-sans;
+  @include font-knowledge;
   @include font-regular;
   @include leading-tight;
 
@@ -14,6 +18,7 @@ body {
   .theme {
     font-size: calc(0.9 * var(--theme-font-size-base));
     color: var(--theme-colour-text-primary);
+    @include font-sans;
   }
 }
 
@@ -70,20 +75,29 @@ ul {
   display: block;
   @include body-text;
   @include fmb-6;
+  @include fpl-4;
+  list-style-position: outside;
+
+  ol,
+  ul {
+    @include fpl-4;
+    @include fmb-2;
+  }
+
   li {
-    @include fpl-1;
     @include fmy-1;
   }
+
+  li::marker {
+    @include font-light;
+    @include font-note;
+    @include text-sm;
+    @include text-secondary;
+  }
 }
 
 ul {
-  @include fpl-2;
-
-  li::marker {
-    content: '–';
-    @include font-light;
-    @include text-secondary;
-  }
+  list-style-type: disc;
 }
 
 a {