Website update

website/package.json

@@ -10,6 +10,9 @@
   },
   "dependencies": {
     "@astrojs/svelte": "^7.2.3",
+    "@fontsource/inter": "^5.2.8",
+    "@fontsource/open-sans": "^5.2.7",
+    "@fontsource/ramaraja": "^5.2.8",
     "@tailwindcss/vite": "^4.1.17",
     "astro": "^5.15.5",
     "svelte": "^5.45.8",

website/src/components/Contact.astro

@@ -7,14 +7,14 @@ import wedge from "../assets/backgrounds/wedge.svg";
   <div class="max-w-[130ch] mx-auto">
     <div class="flex flex-row">
       <div class="sm:w-2/5 p-6 py-12">
-        <div class="prose">
+        <div class="prose prose-headings:text-left">
           <Content />
         </div>
         <form action="message" class="mt-6">
           <div><label for="name">Name:</label></div>
           <div>
             <input
-              class="my-3 p-3 w-full border-2 border-sky-500 rounded-2xl"
+              class="my-3 p-3 w-full border-2 border-bdt-blue rounded-2xl"
               type="text"
               name="name"
               id="name"
@@ -24,7 +24,7 @@ import wedge from "../assets/backgrounds/wedge.svg";
           <div><label for="name">Email:</label></div>
           <div>
             <input
-              class="my-3 p-3 w-full border-2 border-sky-500 rounded-2xl"
+              class="my-3 p-3 w-full border-2 border-bdt-blue rounded-2xl"
               type="text"
               name="email"
               id="email"
@@ -34,13 +34,13 @@ import wedge from "../assets/backgrounds/wedge.svg";
           <div><label for="name">Message:</label></div>
           <div>
             <textarea
-              class="my-3 p-3 w-full h-40 border-2 border-sky-500 rounded-2xl"
+              class="my-3 p-3 w-full h-40 border-2 border-bdt-blue rounded-2xl"
               name="message"
               id="message"
               placeholder="Your message"></textarea>
           </div>
           <input
-            class="px-6 py-2 mt-3 font-serif font-bold bg-green-300 rounded-full text-lg cursor-pointer"
+            class="px-6 py-2 pt-3 mt-3 font-serif bg-bdt-green rounded-full text-xl cursor-pointer"
             type="submit"
             value="Submit"
             size=""

website/src/components/Footer.astro

@@ -1,7 +1,5 @@
-<footer class="py-12 text-center flex flex-col gap-3 bg-green-300">
-  <a class="underline text-lg" href=`${import.meta.env.BASE_URL}/#top`
-    >Return to top</a
-  >
-  <p class="text-2xl! font-semibold font-serif">Benefit Decision Toolkit</p>
+<footer class="py-12 text-center flex flex-col gap-3 bg-bdt-green">
+  <a class="underline" href=`${import.meta.env.BASE_URL}/#top`>Return to top</a>
+  <p class="text-2xl! font-serif mt-2">Benefit Decision Toolkit</p>
   <p>With ❤️ from Philly</p>
 </footer>

website/src/components/Header.astro

@@ -4,7 +4,7 @@ import logo from "../assets/logos/bdt-logo-large-mono-dark.svg";
 import NavMenu from "./NavMenu.svelte";
 ---
 
-<header class="p-6 bg-sky-500 sm:static z-50">
+<header class="p-6 bg-bdt-blue sm:static z-50">
   <div
     class="flex flex-row justify-between items-baseline gap-6 max-w-[130ch] mx-auto"
   >

website/src/components/Hero.astro

@@ -8,16 +8,16 @@ import { Content } from "../assets/copy/Hero.md";
 >
   <div class="max-w-[130ch] mx-auto mt-20">
     <div
-      class="prose prose-p:text-slate-100 prose-headings:text-slate-100 prose-headings:text-left max-w-120 prose-p:text-shadow-sm/35 prose-p:text-2xl! prose-p:leading-8! prose-headings:text-shadow-lg/15"
+      class="prose prose-p:text-slate-100 prose-headings:text-slate-100 prose-headings:text-left max-w-120 prose-p:text-shadow-sm/35 prose-p:text-xl! prose-p:leading-7! prose-headings:text-shadow-lg/15"
     >
       <Content />
     </div>
     <a href=`${import.meta.env.BASE_URL}/#projects`>
-      <p
-        class="mt-6 w-fit px-6 py-2 bg-white border-2 border-sky-500 rounded-full text-sky-700! text-lg font-bold font-serif"
+      <div
+        class="mt-6 w-fit px-6 py-2 pt-3 bg-white border-2 border-bdt-blue rounded-full text-sky-700 font-serif text-xl"
       >
-        See what we can do
-      </p>
+        <span>See what we can do</span>
+      </div>
     </a>
   </div>
 </section>

website/src/components/Overview.astro

@@ -2,7 +2,7 @@
 import { Content } from "../assets/copy/Overview.md";
 ---
 
-<section id="overview" class="bg-green-200">
+<section id="overview" class="bg-bdt-green">
   <div class="max-w-[85ch] mx-auto py-12 px-3 prose">
     <Content />
   </div>

website/src/components/Process.astro

@@ -3,7 +3,7 @@ import { Content } from "../assets/copy/Process.md";
 const steps = ["Create a Screener", "Add Logic", "Deploy Your Tool"];
 ---
 
-<section id="process" class="border-b-2 border-sky-500">
+<section id="process" class="border-b-2 border-bdt-blue">
   <div class="max-w-[85ch] mx-auto py-12 px-3 flex flex-col gap-8 relative">
     <div class="prose max-w-[85ch]">
       <Content />

website/src/components/Projects.astro

@@ -6,7 +6,7 @@ const projects = await getCollection("projects");
 
 <section
   id="projects"
-  class="bg-sky-500/50 bg-[url(../assets/backgrounds/wavy.png)] bg-cover bg-blend-multiply"
+  class="bg-bdt-blue/60 bg-[url(../assets/backgrounds/wavy.png)] bg-cover bg-blend-multiply"
 >
   <div class="max-w-[130ch] mx-auto py-12 px-3">
     <h2 class="font-bold font-serif text-2xl text-center mb-9">
@@ -18,7 +18,7 @@ const projects = await getCollection("projects");
           const { Content } = await render(project);
           return (
             <li class="bg-white/50 p-6 rounded-2xl md:w-1/2">
-              <div class="prose">
+              <div class="prose prose-a:font-semibold">
                 <Content />
               </div>
             </li>

website/src/layouts/Layout.astro

@@ -2,6 +2,8 @@
 import "../styles/global.css";
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
+import "@fontsource/inter";
+import "@fontsource/ramaraja";
 ---
 
 <html lang="en" class="scroll-smooth">
@@ -13,7 +15,7 @@ import Footer from "../components/Footer.astro";
     <title>Benefit Decision Toolkit</title>
   </head>
   <body
-    class="prose-headings:font-serif prose-headings:text-center prose-p:text-black prose-p:leading-6 prose-a:font-semibold prose-h2:text-3xl prose-h3:text-2xl prose-p:text-lg"
+    class="prose-headings:font-serif prose-headings:font-normal prose-headings:text-center prose-p:text-black prose-p:leading-6 prose-h2:text-4xl prose-h3:text-3xl prose-p:text-lg"
   >
     <div id="top"></div>
     <Header />

website/src/styles/global.css

@@ -2,6 +2,8 @@
 @plugin "@tailwindcss/typography";
 
 @theme {
-  --font-sans: "Open Sans";
-  --font-serif: "Ramaraja";
+  --font-sans: "Inter", sans;
+  --font-serif: "Ramaraja", serif;
+  --color-bdt-blue: #1a84d2;
+  --color-bdt-green: #cff7d3;
 }