Basic Header and Footer (#18)

* feat(header): Basic header component Basic unstyled header with dummy theme toggle * feat(footer): Basic footer component
biehlerj · Jul 25, 2023 · 397b3ef · 397b3ef
1 parent 889625f
commit 397b3ef
Show file tree

Hide file tree

Showing 7 changed files with 268 additions and 50 deletions.
diff --git a/public/resume.pdf b/public/resume.pdf
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -0,0 +1,31 @@
+---
+import { format } from "date-fns";
+const fullDate = new Date();
+const year = format(fullDate, "yyyy");
+---
+
+<footer>
+  <span>
+    © {year}
+    <a href="https://biehlerj.xyz">Jacob Biehler</a>
+  </span>
+  <span>
+    Powered by
+    <a href="https://astro.build/">Astro</a>
+  </span>
+</footer>
+
+<style>
+  footer {
+    max-width: calc(var(--main-width) + var(--gap) * 2);
+    margin: auto;
+    padding: calc((var(--footer-height) - var(--gap)) / 2) var(--gap);
+    text-align: center;
+    line-height: 24px;
+  }
+
+  footer span {
+    margin-inline-start: 1px;
+    margin-inline-end: 1px;
+  }
+</style>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -0,0 +1,11 @@
+---
+import Logo from "./Logo.astro";
+import Menu from "./Menu.astro";
+---
+
+<header>
+  <nav class="nav">
+    <Logo />
+    <Menu />
+  </nav>
+</header>
diff --git a/src/components/Logo.astro b/src/components/Logo.astro
@@ -0,0 +1,43 @@
+<div class="logo">
+  <a href="/">Jacob Biehler</a>
+  <div class="logo-switches">
+    <button id="theme-toggle" accesskey="t" title="(Alt + T)">
+      <svg
+        id="moon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="18"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+      </svg>
+      <svg
+        id="sun"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="18"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <circle cx="12" cy="12" r="5"></circle>
+        <line x1="12" y1="1" x2="12" y2="3"></line>
+        <line x1="12" y1="21" x2="12" y2="23"></line>
+        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+        <line x1="1" y1="12" x2="3" y2="12"></line>
+        <line x1="21" y1="12" x2="23" y2="12"></line>
+        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+      </svg>
+    </button>
+  </div>
+</div>
diff --git a/src/components/Menu.astro b/src/components/Menu.astro
@@ -0,0 +1,25 @@
+<ul id="menu">
+  <li>
+    <a href="/about/">
+      <span>About Me</span>
+    </a>
+  </li>
+  <li>
+    <a href="/experience/">
+      <span>Experience</span>
+    </a>
+  </li>
+  <li>
+    <a href="/projects/"><span>Projects</span></a>
+  </li>
+  <li>
+    <a href="/education/">
+      <span>Education</span>
+    </a>
+  </li>
+  <li>
+    <a href="/resume.pdf">
+      <span>Resume</span>
+    </a>
+  </li>
+</ul>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,36 +1,48 @@
---- 
+---
+import "@styles/global.css";
+import Footer from "@components/Footer.astro";
+import Header from "@components/Header.astro";
+
 interface Props {
-	title: string;
+  title: string;
 }
 
 const { title } = Astro.props;
 ---
 
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="description" content="Astro description">
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-		<meta name="generator" content={Astro.generator} />
-		<title>{title}</title>
-	</head>
-	<body>
-		<slot />
-	</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="Astro description" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+  </head>
+  <body>
+    <Header />
+    <slot />
+    <Footer />
+  </body>
 </html>
+
 <style is:global>
-	:root {
-		--accent: 124, 58, 237;
-		--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
-	}
-	html {
-		font-family: system-ui, sans-serif;
-		background-color: #F6F6F6;
-	}
-	code {
-		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-			Bitstream Vera Sans Mono, Courier New, monospace;
-	}
+  :root {
+    --accent: 124, 58, 237;
+    --accent-gradient: linear-gradient(
+      45deg,
+      rgb(var(--accent)),
+      #da62c4 30%,
+      white 60%
+    );
+  }
+  html {
+    font-family: system-ui, sans-serif;
+    background-color: #f6f6f6;
+  }
+  code {
+    font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
+      DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
+  }
 </style>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,26 +1,122 @@
+:root {
+  --gap: 24px;
+  --content-gap: 20px;
+  --nav-width: 1024px;
+  --main-width: 720px;
+  --header-height: 60px;
+  --footer-height: 60px;
+  --radius: 8px;
+}
 .main {
-    position: relative;
-    min-height: calc(100vh - var(--header-height) - var(--footer-height));
-    max-width: calc(var(--main-width) + var(--gap) * 2);
-    margin: auto;
-    padding: var(--gap);
-  }
-
-  main {
-    margin: auto;
-    padding: 1.5rem;
-    max-width: 60ch;
-    text-align: center;
-  }
-
-  h1 {
-    font-size: 3rem;
-    font-weight: 800;
-    margin: 0;
-  }
-
-  img {
-    max-width: 100%;
-    display: inline-table;
-    border-radius: 50%;
-  }
+  position: relative;
+  min-height: calc(100vh - var(--header-height) - var(--footer-height));
+  max-width: calc(var(--main-width) + var(--gap) * 2);
+  margin: auto;
+  padding: var(--gap);
+}
+
+*,
+::after,
+::before {
+  box-sizing: border-box;
+}
+
+main {
+  margin: auto;
+  padding: 1.5rem;
+  max-width: 60ch;
+  text-align: center;
+}
+
+h1 {
+  font-size: 3rem;
+  font-weight: 800;
+  margin: 0;
+}
+
+img {
+  max-width: 100%;
+  display: inline-table;
+  border-radius: 50%;
+}
+
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  max-width: calc(var(--nav-width) + var(--gap) * 2);
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  line-height: var(--header-height);
+}
+
+.nav a {
+  display: block;
+}
+
+.logo,
+#menu {
+  display: flex;
+  margin: auto var(--gap);
+}
+
+.logo {
+  flex-wrap: inherit;
+}
+
+.logo a {
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.logo a img,
+.logo a svg {
+  display: inline;
+  vertical-align: middle;
+  pointer-events: none;
+  transform: translate(0, -10%);
+  border-radius: 6px;
+  margin-inline-end: 8px;
+}
+
+button#theme-toggle {
+  font-size: 26px;
+  margin: auto 4px;
+}
+
+body.dark #moon {
+  vertical-align: middle;
+  display: none;
+}
+
+body:not(.dark) #sun {
+  display: none;
+}
+
+#menu {
+  list-style: none;
+  word-break: keep-all;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+#menu li + li {
+  margin-inline-start: var(--gap);
+}
+
+#menu a {
+  font-size: 16px;
+}
+
+#menu .active {
+  font-weight: 500;
+  border-bottom: 2px solid currentColor;
+}
+
+.logo-switches {
+  flex-wrap: inherit;
+}
+
+ul {
+  padding: 0;
+}