From 8e2b3d415b44319b272fd3e9cd87248f7881df4b Mon Sep 17 00:00:00 2001
From: Simon Scarfe <simon.scarfe@slalom.com>
Date: Mon, 26 Feb 2024 21:11:47 +0000
Subject: [PATCH] Initial mess on with some remaining stuff to do

---
 packages/bdt-astro/public/style/global.scss   | 44 +++++++++++++------
 .../bdt-astro/src/layouts/BaseLayout.astro    | 33 ++++++++++----
 .../bdt-components/src/logo/logo.module.css   |  8 ++--
 packages/bdt-components/src/logo/logo.tsx     |  8 ++--
 .../bdt-components/src/nav/nav.module.css     | 17 +++++--
 packages/bdt-components/src/nav/nav.test.tsx  |  1 +
 packages/bdt-components/src/nav/nav.tsx       | 16 +++----
 7 files changed, 86 insertions(+), 41 deletions(-)

diff --git a/packages/bdt-astro/public/style/global.scss b/packages/bdt-astro/public/style/global.scss
index ea3b9e48..83e6a125 100644
--- a/packages/bdt-astro/public/style/global.scss
+++ b/packages/bdt-astro/public/style/global.scss
@@ -12,15 +12,23 @@
   --s4: calc(var(--s3) * var(--ratio));
   --s5: calc(var(--s4) * var(--ratio));
 
-  --measure: 70ch;
+  --measure: 60ch;
+
+  --colour-shade-light: #BFD7EA;
+  --colour-accent-sub: #087E8B;
+  --colour-accent-main: #B81007;
+  --colour-shade-dark: #060707;
 }
 
 * {
-  background-color: #f7f5e8;
+  background-color: var(--colour-shade-light);
   box-sizing: border-box;
-  color: #050704;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: var(--colour-shade-dark);
+  font-family: "Hind Madurai", sans-serif;
+  font-weight: 300;
+  font-style: normal;
+  line-height: 1.6;
+
   font-size: var(--s0);
   margin: 0;
   padding: 0;
@@ -44,11 +52,11 @@ img {
 
 a,
 button {
-  color: #b81007;
-}
+  color: var(--colour-accent-main);
+
+  text-decoration-color: var(--colour-accent-sub);
+  text-underline-offset: var(--s-4);
 
-a:visited {
-  color: #345693;
 }
 
 nav button {
@@ -59,18 +67,26 @@ nav button {
 h1,
 h2,
 h3 {
-  font-family: Actor;
+  color: #111;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 700;
+  font-optical-sizing: auto;
+  font-style: normal;
+  
   margin: 0;
   padding: 0;
+  
 }
 
 h1 {
   font-size: var(--s3);
-  line-height: 1;
+  letter-spacing: -2px;
+  line-height: 1.1;
 }
 
 h2 {
   font-size: var(--s2);
+  letter-spacing: -1px;
 }
 
 .listing h2 {
@@ -78,7 +94,7 @@ h2 {
 }
 
 .selected-media h2 {
-  border-bottom: 2px #dfcc4c solid;
+  border-bottom: 2px var(--colour-accent-sub) solid;
   padding-bottom: var(--s0);
 }
 
@@ -124,7 +140,7 @@ dd {
 }
 
 footer {
-  border-top: 4px #dfcc4c solid;
+  border-top: 4px var(--colour-accent-sub) solid;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -139,7 +155,7 @@ footer * {
 
 /* SVG overrides for recharts */
 .recharts-cartesian-axis-tick-value tspan {
-  fill: #050704;
+  fill: var(--colour-shade-dark);
   font-size: var(--s-1);
 }
 
diff --git a/packages/bdt-astro/src/layouts/BaseLayout.astro b/packages/bdt-astro/src/layouts/BaseLayout.astro
index 26704060..175ec519 100644
--- a/packages/bdt-astro/src/layouts/BaseLayout.astro
+++ b/packages/bdt-astro/src/layouts/BaseLayout.astro
@@ -1,7 +1,7 @@
 ---
 import Nav from "@components/nav/nav";
 import { AstroLogo } from "../components/AstroLogo";
-import { ViewTransitions } from 'astro:transitions';
+import { ViewTransitions } from "astro:transitions";
 
 const { title } = Astro.props;
 const path = new URL(Astro.url.pathname, Astro.site);
@@ -14,11 +14,25 @@ const path = new URL(Astro.url.pathname, Astro.site);
     <title>{title}</title>
     <ViewTransitions />
 
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <!-- TODO: make dynamic :D -->
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🥪</text></svg>"
+    />
+
+    <!-- TODO: delete me -->
     <link
       href="https://fonts.googleapis.com/css2?family=Actor&display=swap"
       rel="stylesheet"
     />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@300&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
+
     <style lang="scss" is:global>
       @use "../../../bdt-components/src/styles/style.scss";
       @use "../../public/style/global.scss";
@@ -26,19 +40,20 @@ const path = new URL(Astro.url.pathname, Astro.site);
     <slot name="head_after" />
   </head>
   <body>
+    <!-- TODO: Fix this DIVitus -->
     <div class="shell">
-      <div class="sidebar left">
+      <div class="">
         <div>
-          <div>
-            <div class="stack" >
-              <AstroLogo client:load />
-              <Nav url={path} />
-            </div>
-          </div>
           <div>
             <main class="stack">
+              <!-- TODO: delete logo and tidy up -->
+              <!-- <AstroLogo client:load /> -->
+              <Nav url={path} />
+              <!-- TODO: style me/fix me -->
+              <p>Simon Scarfe writes here sometimes</p>
               <slot />
               <footer>
+                <!-- TODO: do something with this -->
                 <span class="footer-item">
                   <a
                     rel="license"
diff --git a/packages/bdt-components/src/logo/logo.module.css b/packages/bdt-components/src/logo/logo.module.css
index 2a5cd82e..25f1f77c 100644
--- a/packages/bdt-components/src/logo/logo.module.css
+++ b/packages/bdt-components/src/logo/logo.module.css
@@ -1,8 +1,6 @@
 .logo {
-  border-bottom: 4px #dfcc4c solid;
+  border-bottom: 4px var(--colour-accent-sub) solid;
   display: block;
-  max-width: 9.3rem; /* Yes, this is hacky as fuck (and probably brittle), 
-                        I just like the way the type falls. */
   padding-bottom: var(--s1);
   text-decoration: none;
 }
@@ -14,6 +12,10 @@
   overflow-wrap: break-word;
 }
 
+.logo span {
+  display: block;
+}
+
 .logo .highlighted {
   color: #b81007;
 }
diff --git a/packages/bdt-components/src/logo/logo.tsx b/packages/bdt-components/src/logo/logo.tsx
index 11a6a8a0..e415ba21 100644
--- a/packages/bdt-components/src/logo/logo.tsx
+++ b/packages/bdt-components/src/logo/logo.tsx
@@ -31,12 +31,14 @@ export const Logo = ({ highlight }: LogoProps): JSX.Element => {
   return (
     <a href="/" className={logo}>
       <span className={highlightedMeal === "Breakfast" ? highlighted : ""}>
-        Breakfast
+        🥣 Breakfast
       </span>
       <span className={highlightedMeal === "Dinner" ? highlighted : ""}>
-        Dinner
+        🍴 Dinner
+      </span>
+      <span className={highlightedMeal === "Tea" ? highlighted : ""}>
+        🫖 Tea
       </span>
-      <span className={highlightedMeal === "Tea" ? highlighted : ""}>Tea</span>
     </a>
   );
 };
diff --git a/packages/bdt-components/src/nav/nav.module.css b/packages/bdt-components/src/nav/nav.module.css
index d1a800b2..a40036ad 100644
--- a/packages/bdt-components/src/nav/nav.module.css
+++ b/packages/bdt-components/src/nav/nav.module.css
@@ -1,11 +1,14 @@
 .mainMenu a {
-  color: #345693;
-  text-decoration-color: #b81007;
-  text-underline-offset: var(--s-4);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+.mainMenu a:visited {
+  color: var(--colour-accent-main);
 }
 
 .current::before {
-  color: #050704;
+  color: var(--colour-shade-dark);
   content: "\2192";
   margin-left: calc(var(--s1) * -1);
   position: absolute;
@@ -13,4 +16,10 @@
 
 .mainMenu li {
   list-style: none;
+  display: inline-block;
+  padding: 0 20px;
+}
+
+.mainMenu li:first-child {
+  padding-left: 0;
 }
diff --git a/packages/bdt-components/src/nav/nav.test.tsx b/packages/bdt-components/src/nav/nav.test.tsx
index 7cfc71fc..049fc724 100644
--- a/packages/bdt-components/src/nav/nav.test.tsx
+++ b/packages/bdt-components/src/nav/nav.test.tsx
@@ -3,6 +3,7 @@ import "@testing-library/jest-dom";
 import { render } from "@testing-library/react";
 import Nav from "./nav";
 
+/* TODO: FIX THESE TESTS */
 describe("Nav component", () => {
   it("displays some links that link to the right place", () => {
     const { getByText } = render(<Nav />);
diff --git a/packages/bdt-components/src/nav/nav.tsx b/packages/bdt-components/src/nav/nav.tsx
index 2e86bc21..fb2f2b4a 100644
--- a/packages/bdt-components/src/nav/nav.tsx
+++ b/packages/bdt-components/src/nav/nav.tsx
@@ -1,22 +1,22 @@
 import React from "react";
 import { mainMenu, current } from "./nav.module.css";
 
-export const Nav = ({ url = "" }: { url?: string }): JSX.Element => {
-  const makeLink = (href: string, text: string, i: number) => {
-    return (<li key={`nav-${i + 1}`}>
+export const Nav = ({ url }: { url: URL }): JSX.Element => {
+  const makeLink = (href: string, text: string, i: number) => (
+    <li key={`nav-${i + 1}`}>
       <a
-        className={new RegExp(`^.*\/${href}`).test(url) ? current : ""}
+        className={new RegExp(`^.*\/${href}`).test(url.pathname) ? current : ""}
         href={`/${href}`}
       >
         {text}
       </a>
-    </li>);
-  };
+    </li>
+  );
   return (
     <nav className={mainMenu}>
-      <ul className="stack compressed">
+      <ul>
         <li key={`nav-0`}>
-          <a className={url === "/" ? current : ""} href="/">
+          <a className={url?.pathname === "/" ? current : ""} href="/">
             Home
           </a>
         </li>