Merge pull request #6 from IATI/sphinx-updates

Update of styles used in Sphinx theme
IATI · Jun 7, 2024 · d5e5611 · d5e5611
2 parents 8d58db9 + 73c201b
commit d5e5611
Show file tree

Hide file tree

Showing 18 changed files with 190 additions and 57 deletions.
diff --git a/src/scss/base/_mixins.scss b/src/scss/base/_mixins.scss
@@ -19,7 +19,17 @@
 }
 
 @mixin unstyled-list {
-  list-style-type: none;
+  list-style: none;
   margin: 0;
   padding: 0;
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li li {
+    padding-left: $padding-block;
+  }
 }
diff --git a/src/scss/base/_reset.scss b/src/scss/base/_reset.scss
@@ -9,14 +9,6 @@ button {
   cursor: pointer;
 }
 
-strong {
-  font-weight: bold;
-}
-
-em {
-  font-style: italic;
-}
-
 html {
   height: 100%;
 }
@@ -27,7 +19,7 @@ body {
   flex-flow: column;
 }
 
-a:has(i),
-a:has(img) {
-  text-decoration: none;
+button,
+input {
+  font-weight: inherit;
 }
diff --git a/src/scss/components/callout/_callout.scss b/src/scss/components/callout/_callout.scss
@@ -38,7 +38,8 @@
   }
 
   &__title {
-    font-weight: bold;
+    font-family: $font-stack-heading;
+    font-weight: $font-weight-heading;
     font-size: 1.2rem;
     line-height: $line-height-body;
   }

diff --git a/src/scss/components/card/_card.scss b/src/scss/components/card/_card.scss
@@ -1,5 +1,7 @@
 @use "../../tokens/color" as *;
+@use "../../tokens/font" as *;
 @use "../../tokens/spacing" as *;
+@use "../../base/mixins";
 
 .iati-card {
   box-shadow: 0 4px 5px $color-grey-20;
@@ -17,15 +19,36 @@
 
   &__title {
     margin: 0;
-    font-weight: bold;
+    font-family: $font-stack-heading;
+    font-weight: $font-weight-heading;
     font-size: 1.2rem;
   }
 
   &__subtitle {
     color: $color-teal-90;
+    font-family: $font-stack-heading;
+    font-weight: $font-weight-heading;
     font-size: 0.8rem;
-    font-weight: bold;
     margin: 0;
     text-transform: uppercase;
   }
+
+  &__menu {
+    @include mixins.unstyled-list();
+
+    li,
+    a {
+      line-height: 1.2;
+    }
+
+    a {
+      text-decoration: none;
+      display: block;
+      padding: 0.6em 0;
+
+      &.current {
+        font-weight: $font-weight-body-strong;
+      }
+    }
+  }
 }
diff --git a/src/scss/components/card/card.stories.ts b/src/scss/components/card/card.stories.ts
@@ -18,3 +18,26 @@ export const Card: Story = {
     </div>
   `,
 };
+
+export const CardWithMenu: Story = {
+  render: () => html`
+    <div class="iati-card">
+      <p class="iati-card__title">Card Title</p>
+      <p class="iati-card__subtitle">Subtitle</p>
+      <ul class="iati-card__menu">
+        <li><a>Item 1</a></li>
+        <li>
+          <a>Item 2</a>
+          <ul>
+            <li>
+              <a class="current">Nested Item 1</a>
+              <ul>
+                <li><a>Nested Item 2</a></li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  `,
+};
diff --git a/src/scss/components/table/_table.scss b/src/scss/components/table/_table.scss
@@ -1,4 +1,5 @@
 @use "../../tokens/color" as *;
+@use "../../tokens/font" as *;
 @use "../../tokens/spacing" as *;
 
 table {
@@ -13,7 +14,7 @@ table {
 
     &,
     p {
-      font-weight: bold;
+      font-weight: $font-weight-body-strong;
     }
   }
 

diff --git a/src/scss/layout/footer/_footer.scss b/src/scss/layout/footer/_footer.scss
@@ -1,4 +1,5 @@
 @use "../../tokens/color" as *;
+@use "../../tokens/font" as *;
 @use "../../tokens/spacing" as *;
 @use "../../base/mixins";
 
@@ -31,7 +32,9 @@
   &__list {
     &-title {
       text-transform: uppercase;
-      font-weight: bold;
+      font-family: $font-stack-heading;
+      font-weight: $font-weight-heading;
+      line-height: $line-height-body;
     }
 
     ul {

diff --git a/src/scss/layout/header/_header.scss b/src/scss/layout/header/_header.scss
@@ -1,4 +1,5 @@
 @use "../../tokens/color" as *;
+@use "../../tokens/screens" as *;
 @use "../../tokens/spacing" as *;
 @use "../../base/mixins";
 
@@ -8,27 +9,52 @@
   background-color: $color-teal-90;
   background-color: white;
   flex-wrap: wrap;
+  padding: $padding-block 3rem 0 3rem;
 
   &__logo {
-    max-height: 60px;
+    height: 40px;
     max-width: 100%;
+    margin-bottom: $padding-block;
+
+    @media (min-width: $screen-sm) {
+      height: 56px;
+    }
   }
 
   &__nav {
     @include mixins.unstyled-list();
+    align-self: flex-end;
   }
 
   &__nav-item {
     display: inline-block;
-    font-size: 1.1rem;
+    position: relative;
+    margin: 0 0.2rem;
 
     & a {
+      display: inline-block;
+      padding: $padding-block 0.2rem;
+      color: $color-grey-90;
+      letter-spacing: 0.1rem;
       text-decoration: none;
-      padding: 0.5rem;
+      text-transform: uppercase;
+    }
+
+    &::after {
+      position: absolute;
+      content: "";
+      background-color: $color-teal-30;
+      bottom: 0;
+      height: 4px;
+      right: 0;
+      width: 0;
+      transition: all ease-out 0.3s;
+    }
 
-      &:hover {
-        border-bottom: 4px solid currentColor;
-      }
+    &:hover::after {
+      width: 100%;
+      left: 0;
+      right: auto;
     }
   }
 }
diff --git a/src/scss/layout/page/page.stories.ts b/src/scss/layout/page/page.stories.ts
@@ -2,8 +2,7 @@ import type { Meta, StoryObj } from "@storybook/web-components";
 import { html } from "lit";
 
 import { Footer } from "../footer/footer.stories";
-import { Header } from "../header/header.stories";
-import { TitleBar } from "../title-bar/title-bar.stories";
+import { WithHeader as TitleBarWithHeader } from "../title-bar/title-bar.stories";
 
 const meta: Meta = {
   title: "Layout/Page",
@@ -14,7 +13,7 @@ type Story = StoryObj;
 
 export const Page: Story = {
   render: (args) => html`
-    ${Header.render?.call({ ...args })} ${TitleBar.render?.call({ ...args })}
+    ${TitleBarWithHeader.render?.call({ ...args })}
     <main class="iati-main">
       <h1>Page heading</h1>
       <p>Page contents</p>

diff --git a/src/scss/layout/title-bar/_title-bar.scss b/src/scss/layout/title-bar/_title-bar.scss
@@ -1,37 +1,53 @@
 @use "../../tokens/color" as *;
+@use "../../tokens/font" as *;
+@use "../../tokens/screens" as *;
 @use "../../tokens/spacing" as *;
 @use "../../base/mixins";
 
 .iati-title-bar {
-  background-color: $color-teal-90;
+  position: relative;
+  background-image: linear-gradient(
+    0deg,
+    darken($color-teal-90, 4%) 4%,
+    $color-teal-90 20%
+  );
+
+  &::after {
+    content: "";
+    position: absolute;
+    pointer-events: none;
+    top: 0px;
+    left: 0px;
+    height: 100%;
+    width: 100%;
+    opacity: 25%;
+    background-image: url("http://styles.iatistandard.org/assets/svg/source/marque-white.svg");
+    background-repeat: no-repeat;
+    background-position: right center;
+    background-size: 90%;
+
+    @media (min-width: $screen-lg) {
+      background-size: 50%;
+    }
+  }
 
   &__title {
+    display: block;
     @include mixins.page-width-container();
     color: white;
-    font-weight: bold;
-    font-size: 2.5rem;
-    padding: 1.2em $padding-block;
+    font-family: $font-stack-heading;
+    font-weight: $font-weight-heading;
+    font-size: 2.25rem;
+    padding: $padding-block;
+    padding-top: 3rem;
+    padding-bottom: 2rem;
     position: relative;
+    text-decoration: none;
 
-    &:before {
-      content: "";
-      border-left: $border-width solid $color-teal-50;
-      padding: $padding-block;
-    }
-
-    &:after {
+    &::before {
       content: "";
-      position: absolute;
-      top: 0px;
-      right: 0px;
-      bottom: 0px;
-      left: 0px;
-      background-image: url("http://styles.iatistandard.org/assets/svg/source/marque-white.svg");
-      background-repeat: no-repeat;
-      background-position: right center;
-      background-size: 300px;
-      opacity: 0.2;
-      pointer-events: none;
+      border-left: $border-width solid $color-teal-30;
+      padding: 0 $padding-block;
     }
   }
 }
diff --git a/src/scss/layout/title-bar/title-bar.stories.ts b/src/scss/layout/title-bar/title-bar.stories.ts
@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from "@storybook/web-components";
 
 import { html } from "lit";
 
+import { Header } from "../header/header.stories";
+
 const meta: Meta = {
   title: "Layout/Title Bar",
 };
@@ -16,3 +18,12 @@ export const TitleBar: Story = {
     </div>
   `,
 };
+
+export const WithHeader: Story = {
+  render: (args) => html`
+    <div class="iati-title-bar">
+      ${Header.render?.call({ ...args })}
+      <div class="iati-title-bar__title">Title</div>
+    </div>
+  `,
+};
diff --git a/src/scss/tokens/_font.scss b/src/scss/tokens/_font.scss
@@ -1,5 +1,9 @@
-$font-stack-heading: "Avenir", Helvetica, Arial, sans-serif;
-$font-stack-body: "Avenir", Helvetica, Arial, sans-serif;
+$font-stack-heading: "pragmatica", Helvetica, Arial, sans-serif;
+$font-stack-body: "chalet-london-sixty", Helvetica, Arial, sans-serif;
 $font-stack-monospace: monospace;
 
+$font-weight-body: 300;
+$font-weight-body-strong: 600;
+$font-weight-heading: 600;
+
 $line-height-body: 2;
diff --git a/src/scss/tokens/_index.scss b/src/scss/tokens/_index.scss
@@ -1,3 +1,4 @@
 @forward "color";
 @forward "font";
+@forward "screens";
 @forward "spacing";
diff --git a/src/scss/tokens/_screens.scss b/src/scss/tokens/_screens.scss
@@ -0,0 +1,5 @@
+$screen-sm: 640px;
+$screen-md: 768px;
+$screen-lg: 1024px;
+$screen-xl: 1280px;
+$screen-2xl: 1536px;
diff --git a/src/scss/tokens/_spacing.scss b/src/scss/tokens/_spacing.scss
@@ -1,5 +1,7 @@
+@use "screens" as *;
+
 $border-width: 4px;
 
 $padding-block: 1rem;
 
-$page-width-max: 1280px;
+$page-width-max: $screen-xl;