Updated styling

src/components/Footer.astro

@@ -23,7 +23,7 @@ const today = new Date();
 </footer>
 <style>
 	footer {
-		background-color: var(--background);
+		background-color: var(--background-soft);
 		padding: 1rem 1rem 2rem;
 		width: 100%;
 	}

src/components/Header.astro

@@ -5,7 +5,9 @@ import HeaderLink from "./HeaderLink.astro";
 
 <header>
 	<nav>
-		<a class="logo" href="/"><img src="/logo.png" alt="ಠ_ಠ" /></a>
+	  <a class="logo" href="/">
+	    <img src="/logo.svg" alt="ಠ_ಠ" />
+	  </a>
 		<div class="internal-links">
 			<HeaderLink href="/">Home</HeaderLink>
 			<HeaderLink href="/projects">Projects</HeaderLink>
@@ -36,8 +38,7 @@ import HeaderLink from "./HeaderLink.astro";
 		margin: 0;
 		padding: 0 1em;
 		width: 100%;
-		background: var(--background);
-		box-shadow: var(--standard-box-shadow);
+		background-color: var(--background-soft);
 	}
 
 	header .logo {
@@ -50,8 +51,7 @@ import HeaderLink from "./HeaderLink.astro";
 	}
 
 	header .logo img {
-		width: 96px;
-		height: 96px;
+		height: 24pt;
 	}
 
 	nav {
@@ -61,7 +61,7 @@ import HeaderLink from "./HeaderLink.astro";
 	}
 
 	nav a {
-		padding: 1em 0.5em;
+		padding: .4em 0.5em;
 		color: var(--text);
 		border-bottom: 4px solid transparent;
 		text-decoration: none;
@@ -76,13 +76,14 @@ import HeaderLink from "./HeaderLink.astro";
 	.social-links a {
 		display: flex;
 	}
-	@media (max-width: 720px) {
-		.logo {
-			display: none;
-		}
 
-		.logo img {
-			display: none;
-		}
+	@media (max-width: 720px) {
+	  header .logo img {
+	    height: 18pt;
+	  }
+
+	  nav {
+	    font-size: 16px;
+	  }
 	}
 </style>

src/components/Main.astro

@@ -0,0 +1,72 @@
+---
+import { ClientRouter } from "astro:transitions";
+---
+<canvas id="dotted-background" transition:persist></canvas>
+<main transition:name="main" transition:animate="slide">
+  <slot />
+</main>
+
+<style>
+  canvas#dotted-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+</style>
+
+<script type="module" transition:persist>
+  let canvas = document.getElementById("dotted-background");
+  let ctx = canvas.getContext("2d");
+
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+
+  let gap = 20;
+
+  let mouse = { x: canvas.width / 2, y: canvas.height / 2 };
+  document.addEventListener("mousemove", (e) => {
+    mouse.x = e.clientX;
+    mouse.y = e.clientY;
+  });
+
+  let distanceThreshold = .2;
+  let baseOpacity = .05;
+  let baseRadius = 1;
+
+  const draw = () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    for (let x = gap; x < canvas.width; x += gap) {
+      for (let y = gap; y < canvas.height; y += gap) {
+	// mouse distance
+	const mouseDistance = Math.sqrt(
+	  Math.pow(mouse.x - x, 2) +
+	  Math.pow(mouse.y - y, 2)
+	);
+
+	// normalized mouse distance
+	const normalizedMouseDistance = mouseDistance / Math.sqrt(
+	  Math.pow(canvas.width, 2) +
+	  Math.pow(canvas.height, 2)
+	);
+
+	const opacity = Math.max(baseOpacity, .4 - normalizedMouseDistance / distanceThreshold);
+	const radius = baseRadius + Math.max(0, 1 - normalizedMouseDistance / distanceThreshold);
+
+	// draw dots
+	ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`;
+	ctx.beginPath();
+	ctx.arc(x, y, radius, 0, Math.PI * 2);
+	ctx.fill();
+	ctx.closePath();
+      }
+    }
+  };
+
+  setInterval(() => {
+    draw();
+  }, 1000 / 60);
+</script>