Add main navigation component (#5)

* Add tailwind config and typography * Add main navigation bar component
1xINTERNET · Jun 14, 2024 · 1ba18fb · 1ba18fb
1 parent 33134f3
commit 1ba18fb
Show file tree

Hide file tree

Showing 11 changed files with 122 additions and 14 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -4,6 +4,10 @@ import tailwind from "@astrojs/tailwind";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind()],
+  integrations: [
+    tailwind({
+      applyBaseStyles: false,
+    }),
+  ],
   base: process.env.BASE_URL ? process.env.BASE_URL : "/",
 });
diff --git a/public/fonts/Stolzl-Bold.ttf b/public/fonts/Stolzl-Bold.ttf
diff --git a/public/fonts/Stolzl-Book.ttf b/public/fonts/Stolzl-Book.ttf
diff --git a/public/fonts/Stolzl-Light.ttf b/public/fonts/Stolzl-Light.ttf
diff --git a/public/fonts/Stolzl-Medium.ttf b/public/fonts/Stolzl-Medium.ttf
diff --git a/public/fonts/Stolzl-Regular.ttf b/public/fonts/Stolzl-Regular.ttf
diff --git a/src/components/NavigationBar.astro b/src/components/NavigationBar.astro
@@ -0,0 +1,51 @@
+---
+import HashtagWhyULoveFootball from "./HashtagWhyULoveFootball.astro";
+---
+
+<nav class="bg-transparent">
+  <div class="container flex flex-wrap items-center justify-between mx-auto p-4">
+    <a href="https://whyuluvfootball.world/">
+        <HashtagWhyULoveFootball />
+    </a>
+    <button id="open-mobile-menu" type="button" class="lg:hidden">
+        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+            <path stroke="#54F400" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
+        </svg>
+    </button>
+    <div class="hidden absolute top-0 right-0 bottom-0 left-0 bg-blue lg:bg-transparent lg:static lg:block lg:w-auto" id="navbar">
+      <button id="close-mobile-menu" class="absolute right-2 top-2 text-2xl text-green p-3 lg:hidden">X</button>
+      <ul class="font-medium text-3xl px-4 pt-14 flex flex-col lg:p-0 lg:text-lg lg:flex-row gap-8 lg:gap-12">
+        <li>
+          <a href="#our-goal" class="block text-green">Our Goal</a>
+        </li>
+        <li>
+          <a href="#how-to-support" class="block text-green">How to Support</a>
+        </li>
+        <li>
+          <a href="#partners" class="block text-green">Partners</a>
+        </li>
+        <li>
+          <a href="#social-media-news" class="block text-green">Social Media News</a>
+        </li>
+        <li>
+          <a href="/media-requests" class="block text-green">Media Requests</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
+
+<script>
+  var navBar = document.getElementById("navbar");
+  var openButton = document.getElementById("open-mobile-menu");
+  var closeButton = document.getElementById("close-mobile-menu");
+
+  if (navBar && openButton && closeButton) {
+    openButton.addEventListener('click', () => {
+      navBar?.classList.contains('hidden') ? navBar.classList.remove('hidden') : navBar?.classList.add('hidden');
+    });
+    closeButton.addEventListener('click', () => {
+      navBar?.classList.add('hidden');
+    });
+  }
+  </script>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,5 +1,6 @@
 ---
 import Footer from '../components/Footer.astro';
+import NavigationBar from '../components/NavigationBar.astro';
 
 interface Props {
 	title: string;
@@ -20,7 +21,7 @@ const { title } = Astro.props;
 	</head>
 	<body>
 		<main>
-			<!-- NavBar component will be placed here -->
+			<NavigationBar />
 
 			<slot />
 			<Footer />

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,17 +1,8 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.astro';
+import '../styles/global.css';
 ---
 
 <Layout title="Welcome to Whyuluvfootball">
-		<h1>About <span class="text-gradient">300 million</span> kids worldwide don't have a football.</h1>
-
-		<ul role="list" class="link-card-grid">
-			<Card
-				href="https://docs.astro.build/"
-				title="Documentation"
-				body="Learn how Astro works and explore the official API docs."
-			/>
-		</ul>
 </Layout>
 
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -0,0 +1,59 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  @font-face {
+    font-family: 'Stolzl';
+    src: url('/fonts/Stolzl-Light.ttf') format('truetype');
+    font-weight: lighter;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Stolzl';
+    src: url('/fonts/Stolzl-Book.ttf') format('truetype');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Stolzl';
+    src: url('/fonts/Stolzl-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Stolzl';
+    src: url('/fonts/Stolzl-Medium.ttf') format('truetype');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Stolzl';
+    src: url('/fonts/Stolzl-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  h1 {
+    @apply text-[64px] leading-[78px];
+  }
+
+  h2 {
+    @apply text-[44px] leading-[64px];
+  }
+
+  h3 {
+    @apply text-[32px] leading-[48px];
+  }
+
+  body, p {
+    @apply text-[18px] leading-6;
+  }
+}
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -1,10 +1,12 @@
 /** @type {import('tailwindcss').Config} */
+import defaultTheme from 'tailwindcss/defaultTheme'
+
 export default {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
     extend: {
       colors: {
-        blue: "#232222",
+        blue: "#2B00FF",
         "blue-darker": "#1C00A8",
         green: "#54F400",
         "green-darker": "#4FC90E",
@@ -13,7 +15,7 @@ export default {
         fucsia: "#EF5DA8",
       },
       fontFamily: {
-        // sans: ["Stolzl", ...defaultTheme.fontFamily.sans],
+        sans: ["Stolzl", ...defaultTheme.fontFamily.sans],
       },
     },
   },