🍱 [Font] Use Outfit (#60)

* 🧰 [Dependency] Install outfit from fontsource

* 💄 [Styles] Setup outfit font

* 💄 [ProjectLogo] Resize some logos at short heights

* 🛠️ [Page] Properly import outfit from fontsource

* ♻️ [Font] Update some headings for the new font

* 💄 [404] Minor tweaks

* 🍱 [Assets] Replace PNG cursors with SVGs

* 💄 [Earwurm] Revise image and color

* 🚚 [Assets] Move dulmage-social

package.json

@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.8.2",
+    "@fontsource-variable/outfit": "^5.0.13",
     "astro": "^4.12.2",
     "astro-icon": "^1.1.0",
     "beeftools": "^0.1.6",

src/assets/img/README.md

@@ -0,0 +1,3 @@
+# Images
+
+Place any images here that we want optimized by Astro. Otherwise, put pre-optimized images in the `/public` folder.

src/components/Contact.astro

@@ -128,7 +128,7 @@ import {SecretEmail} from '@scripts/SecretEmail';
     display: block;
     padding-left: 1rem;
     font-size: var(--h4-size);
-    font-weight: 600;
+    font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.2em;
     white-space: nowrap;

src/components/ContentBlock.astro

@@ -63,6 +63,10 @@ const inactive = !title || !subtitle;
     /* Just a small nudge for better vertical centering */
     padding-top: calc(var(--space-tightest) + 0.1rem);
 
+    & > h3 {
+      font-weight: 800;
+    }
+
     @media (--min-tablet) {
       padding: var(--space-tighter);
     }

src/components/Hamburger.astro

@@ -26,11 +26,10 @@ const {id, controlsId} = Astro.props;
   @import '@styles/shared.css';
 
   :root {
+    /* `height` and `padding` variables come from `globla.css` */
     --hamburger-width-min: 2.4rem;
     --hamburger-width-max: 3rem;
-    --hamburger-height: 2rem;
     --hamburger-line-height: 0.3rem;
-    --hamburger-padding: var(--space-tightest);
 
     /* Computed value: `height - line-height` */
     --hamburger-patty3-y: 1.7rem;

src/components/Navigation.astro

@@ -38,12 +38,6 @@ const {id, items = []} = Astro.props;
   @import '@styles/shared.css';
 
   :root {
-    /* TODO: Figure out how to share `Hamburger` variables. */
-    --hamburger-height: 2rem;
-    --hamburger-padding: var(--space-tightest);
-
-    /* Component */
-
     --nav-offset-safety: 0.2rem;
     --nav-item-shift-x: 0.3rem;
 
@@ -162,11 +156,11 @@ const {id, items = []} = Astro.props;
     padding-bottom: var(--nav-label-padding-y);
     padding-left: var(--nav-label-padding-left);
     font-size: var(--p-size);
-    font-weight: 700;
+    font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.2rem;
     white-space: nowrap;
-    /* Required for the `rock` cursor to work. */
+    /* Required for the `horns` cursor to work. */
     pointer-events: none;
   }
 
@@ -188,7 +182,7 @@ const {id, items = []} = Astro.props;
   html[data-current-index='12'] .Item:nth-child(13) .Link,
   html[data-current-index='13'] .Item:nth-child(14) .Link,
   html[data-current-index='14'] .Item:nth-child(15) .Link {
-    cursor: url('../assets/img/cursor-rock.png'), not-allowed;
+    cursor: url('../assets/svg/cursors/CursorHorns.svg'), not-allowed;
     color: var(--color-primary);
     translate: calc(var(--nav-item-shift-x) * -1) 0;
   }
@@ -208,7 +202,7 @@ const {id, items = []} = Astro.props;
   html[data-current-index='12'] .Item:nth-child(13) .Link:active,
   html[data-current-index='13'] .Item:nth-child(14) .Link:active,
   html[data-current-index='14'] .Item:nth-child(15) .Link:active {
-    cursor: url('../assets/img/cursor-rock-clicked.png'), not-allowed;
+    cursor: url('../assets/svg/cursors/CursorHornsClicked.svg'), not-allowed;
   }
 
   html[data-current-index='0'] .Item:nth-child(1) .Link::before,

src/components/ProjectLogo.astro

@@ -49,6 +49,10 @@ const iconProps = {
   :root {
     --project-logo-size: 18rem;
 
+    @media (--max-phone-height) {
+      --project-logo-size: 16rem;
+    }
+
     @media (--min-tablet) {
       --project-logo-size: 24rem;
     }
@@ -64,7 +68,11 @@ const iconProps = {
   }
 
   div.ProjectLogo {
-    cursor: url('../assets/img/cursor-dead.png'), not-allowed;
+    cursor: url('../assets/svg/cursors/CursorDead.svg'), not-allowed;
+
+    &:active {
+      cursor: url('../assets/svg/cursors/CursorDeadClicked.svg'), not-allowed;
+    }
   }
 
   .ProjectLogo > [data-icon] {
@@ -76,67 +84,55 @@ const iconProps = {
 
   /* Unique logo sizes per section id */
 
-  :global(#Chicken) {
+  :global(#Chicken),
+  :global(#PreservationSociety) {
     --project-logo-size: 14rem;
 
+    @media (--max-phone-height) {
+      --project-logo-size: 12rem;
+    }
+
     @media (--min-tablet) {
       --project-logo-size: 20rem;
     }
   }
 
+  :global(#Earwurm),
   :global(#CommerceAwards),
   :global(#Polaris) {
     --project-logo-size: 12rem;
 
-    @media (--min-tablet) {
-      --project-logo-size: 18rem;
+    @media (--max-phone-height) {
+      --project-logo-size: 10rem;
     }
-  }
-
-  :global(#Draggable) {
-    --project-logo-size: 16rem;
-
-    @media (--min-tablet) {
-      --project-logo-size: 22rem;
-    }
-  }
-
-  :global(#Earwurm) {
-    --project-logo-size: 12rem;
 
     @media (--min-tablet) {
       --project-logo-size: 18rem;
     }
   }
 
-  :global(#Fringe) {
-    --project-logo-size: 20rem;
-
-    @media (--min-tablet) {
-      --project-logo-size: 26rem;
-    }
-  }
-
+  :global(#Draggable),
   :global(#NA2012),
   :global(#NorthernArmy) {
     --project-logo-size: 16rem;
 
-    @media (--min-tablet) {
-      --project-logo-size: 22rem;
+    @media (--max-phone-height) {
+      --project-logo-size: 14rem;
     }
-  }
-
-  :global(#PreservationSociety) {
-    --project-logo-size: 14rem;
 
     @media (--min-tablet) {
-      --project-logo-size: 20rem;
+      --project-logo-size: 22rem;
     }
   }
 
+  :global(#Fringe),
   :global(#Tetchi) {
     --project-logo-size: 20rem;
 
+    @media (--max-phone-height) {
+      --project-logo-size: 18rem;
+    }
+
     @media (--min-tablet) {
       --project-logo-size: 26rem;
     }

src/components/Stars.astro

@@ -46,7 +46,6 @@ const {default: patternStarsHtml} = await import(
   .Stars {
     position: fixed;
     inset: 0;
-    overflow: hidden;
     pointer-events: none;
     background: linear-gradient(
       48deg,