Rework header and footer

WICG · Mar 19, 2024 · 96a5c5d · 96a5c5d
1 parent 42adb55
commit 96a5c5d
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 69 deletions.
diff --git a/public/img/bg-lines--light.svg b/public/img/bg-lines--light.svg
diff --git a/src/components/pages/Footer.astro b/src/components/pages/Footer.astro
@@ -1,65 +1,46 @@
 ---
 ---
 <footer>
-  <div class="contentWrapperLg">
-    <div class="linkWrapper">
-      <ul>
-        <li><a href="/link-tag">Link Element Generator</a></li>
-        <li><a href="/prob-revshare">Probabilistic Revshare Generator</a></li>
-      </ul>
-      <ul>
-        <li><a href="https://github.com/WICG/webmonetization">Github</a></li>
-        <li><a href="https://community.interledger.org/">Community Forem</a></li>
-        <li><a href="https://wicg.io/">Web Incubator Community Group</a></li>
-      </ul>
-      <ul>
-        <li><a href="https://paymentpointers.org/">Payment Pointers</a></li>
-        <li><a href="https://openpayments.guide/">Open Payments</a></li>
-        <li><a href="https://interledger.org/">Interledger</a></li>
-      </ul>
-    </div>
-    <span>
-      Copyright © {new Date().getFullYear()} Interledger Foundation.
-    </span>
-  </div>
+  <ul>
+    <li><a href="https://community.interledger.org/">Community Forem</a></li>
+    <li><a href="https://wicg.io/">Web Incubator Community Group</a></li>
+    <li><a href="https://github.com/WICG/webmonetization">Github</a></li>
+  </ul>
+  <span>
+    Copyright © {new Date().getFullYear()} Interledger Foundation.
+  </span>
 </footer>
 
 <style>
   footer {
-    padding: var(--space-s);
-    background-color: var(--sl-color-gray-5);
-    color: var(--sl-color-white);
-  }
-
-  .linkWrapper {
-    display: flex;
-    gap: var(--space-l);
-    flex-direction: column;
-    padding-block-start:var(--space-s);
-    padding-block-end: var(--space-m);
-  }
+    padding: var(--space-xs);
+    padding-top: calc(var(--space-xs) + 3px);
+    font-size: var(--step--1);
+    text-align: center;
+    color: #333;
 
-  @media screen and (min-width: 500px) {
-    .linkWrapper {
-      flex-direction: row;
-    }
+    background-image: url("/img/bg-lines.svg");
+    background-size: 100% 3px;
+    background-position: top;
+    background-repeat: no-repeat;
   }
 
   ul {
     list-style: none;
     padding: 0;
-  }
-
-  li {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-s);
     margin-block-end: var(--space-xs);
   }
 
   a {
-    color: var(--sl-color-white);
     text-decoration: none;
+    color: #333;
   }
 
   a:hover {
     text-decoration: underline;
+    color: var(--wm-accent);
   }
 </style>
diff --git a/src/components/pages/TopNav.astro b/src/components/pages/TopNav.astro
@@ -15,16 +15,20 @@
       </div>
     </button>
     <ul id="navMenu" class="nav-menu collapsed">
-       <li class="nav-link__docs"><a href="/docs/">Docs</a></li>
+       <li class="nav-link__docs"><a href="/docs/">Documentation</a></li>
+       <li class="nav-link__docs"><a href="https://community.interledger.org/">Community</a></li>
        <li class="nav-link__github"><a href="https://github.com/WICG/webmonetization/"><img src="/img/icon-github.svg" alt="Link to Github repository"></a></li>
     </ul>
  </nav>
 </header>
 
 <style>
   header {
-    background-color: hsl(240, 20%, 97%);
-    color: hsl(222, 11%, 23%);
+    background-color: #fff;
+    color: #333;
+    box-shadow: 0 2px 6px -4px var(--wm-accent);
+    position: sticky;
+    top: 0;
   }
 
   .site-nav {
@@ -55,7 +59,11 @@
   a {
     text-decoration: none;
     color: var(--sl-color-text);
-    padding-block: var(--space-xs);
+    padding-block: var(--space-s);
+  }
+
+  a:hover {
+    color: var(--wm-accent);
   }
 
   .menu-toggle {
@@ -114,10 +122,6 @@
   .menu-icon.open span:nth-child(3) {
     transform: rotate(-45deg);
   }
-  .nav-link__github {
-    margin-inline-start: auto;
-    flex: none;
-  }
 
   .nav-link__github img {
     height: 1.5em;
@@ -138,6 +142,7 @@
       padding: 0;
       left: 0;
       right: 0;
+      box-shadow: 0 2px 6px -4px var(--wm-accent);
     }
 
     .nav-menu a {
@@ -153,6 +158,7 @@
       align-items: center;
       list-style-type: none;
       flex: 1;
+      justify-content: end;
     }
 
     .menu-toggle {

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -38,14 +38,14 @@ const description = t("site.description");
 <style>
   /* Hero section styles */
   .hero {
-    background-image: url("/img/bg-lines.svg"), url("/img/bg-tile.svg");
+    background-image: url("/img/bg-lines--light.svg"), url("/img/bg-tile.svg");
     background-repeat: repeat-x, repeat;
-    background-size: 25em, 40%;
+    background-size: 17em, 40%;
     background-position: bottom, center;
     min-height: 50vh;
     display: flex;
     margin-block-end: var(--space-xl);
-    padding-block: var(--space-xl);
+    padding-block: var(--space-3xl);
   }
 
   .heroContent {

diff --git a/src/styles/webm.css b/src/styles/webm.css
@@ -1,25 +1,25 @@
 /* Custom styles for non-Starlight pages */
-/* @link https://utopia.fyi/type/calculator?c=320,16,1.333,1440,20,1.333,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+/* @link https://utopia.fyi/type/calculator?c=320,16,1.25,1440,19,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
 
 :root {
-  --step--2: clamp(0.5628rem, 0.5226rem + 0.201vi, 0.7035rem);
-  --step--1: clamp(0.7502rem, 0.6966rem + 0.2679vi, 0.9377rem);
-  --step-0: clamp(1rem, 0.9286rem + 0.3571vi, 1.25rem);
-  --step-1: clamp(1.333rem, 1.2378rem + 0.4761vi, 1.6663rem);
-  --step-2: clamp(1.7769rem, 1.65rem + 0.6346vi, 2.2211rem);
-  --step-3: clamp(2.3686rem, 2.1994rem + 0.8459vi, 2.9607rem);
-  --step-4: clamp(3.1573rem, 2.9318rem + 1.1276vi, 3.9467rem);
-  --step-5: clamp(4.2087rem, 3.9081rem + 1.5031vi, 5.2609rem);
-  --step-6: clamp(5.6102rem, 5.2095rem + 2.0037vi, 7.0128rem);
+  --step--2: clamp(0.64rem, 0.6057rem + 0.1714vi, 0.76rem);
+  --step--1: clamp(0.8rem, 0.7571rem + 0.2143vi, 0.95rem);
+  --step-0: clamp(1rem, 0.9464rem + 0.2679vi, 1.1875rem);
+  --step-1: clamp(1.25rem, 1.183rem + 0.3348vi, 1.4844rem);
+  --step-2: clamp(1.5625rem, 1.4788rem + 0.4185vi, 1.8555rem);
+  --step-3: clamp(1.9531rem, 1.8485rem + 0.5232vi, 2.3193rem);
+  --step-4: clamp(2.4414rem, 2.3106rem + 0.6539vi, 2.8992rem);
+  --step-5: clamp(3.0518rem, 2.8883rem + 0.8174vi, 3.624rem);
+  --step-6: clamp(3.8147rem, 3.6103rem + 1.0218vi, 4.53rem);
   --space-3xs: clamp(0.25rem, 0.2321rem + 0.0893vi, 0.3125rem);
   --space-2xs: clamp(0.5rem, 0.4643rem + 0.1786vi, 0.625rem);
-  --space-xs: clamp(0.75rem, 0.6964rem + 0.2679vi, 0.9375rem);
-  --space-s: clamp(1rem, 0.9286rem + 0.3571vi, 1.25rem);
-  --space-m: clamp(1.5rem, 1.3929rem + 0.5357vi, 1.875rem);
-  --space-l: clamp(2rem, 1.8571rem + 0.7143vi, 2.5rem);
-  --space-xl: clamp(3rem, 2.7857rem + 1.0714vi, 3.75rem);
-  --space-2xl: clamp(4rem, 3.7143rem + 1.4286vi, 5rem);
-  --space-3xl: clamp(6rem, 5.5714rem + 2.1429vi, 7.5rem);
+  --space-xs: clamp(0.75rem, 0.7143rem + 0.1786vi, 0.875rem);
+  --space-s: clamp(1rem, 0.9464rem + 0.2679vi, 1.1875rem);
+  --space-m: clamp(1.5rem, 1.4107rem + 0.4464vi, 1.8125rem);
+  --space-l: clamp(2rem, 1.8929rem + 0.5357vi, 2.375rem);
+  --space-xl: clamp(3rem, 2.8393rem + 0.8036vi, 3.5625rem);
+  --space-2xl: clamp(4rem, 3.7857rem + 1.0714vi, 4.75rem);
+  --space-3xl: clamp(6rem, 5.6786rem + 1.6071vi, 7.125rem);
   --border-radius: 6px;
 
   --wm-accent: hsl(180 100% 23%);