Add about to homepage, add color script to templates

src/components/BaseHead.astro

@@ -1,7 +1,5 @@
 ---
-// Import the global.css file here so that it is included on
-// all pages through the use of the <BaseHead /> component.
-import '../styles/global.css';
+import '../global.css';
 
 export interface Props {
 	title: string;
@@ -41,5 +39,8 @@ const { title, description, image = '/placeholder-social.jpg' } = Astro.props;
 <meta name="twitter:creator" content="@cassidoo" />
 <meta name="twitter:image" content="http://cassidoo.co/img/headshot.png" />
 
-
+<link
+	href="https://fonts.googleapis.com/css?family=Roboto+Mono"
+	rel="stylesheet"
+/>
 

src/components/ColorScript.astro

@@ -0,0 +1,28 @@
+<script is:inline>
+		let colors = ['#24d05a', '#eb4888', '#10a2f5', '#e9bc3f'];
+
+		function getRandomColor() {
+			return colors[Math.floor(Math.random() * colors.length)];
+		}
+
+		function setRandomLinkColor() {
+			Array.from(document.getElementsByTagName('a')).forEach((e) => {
+				e.style.color = getRandomColor();
+			});
+		}
+
+		function setColorHoverListener() {
+			Array.from(document.querySelectorAll('a, button')).forEach((e) => {
+				e.addEventListener('mouseover', setRandomLinkColor);
+			});
+		}
+
+		(function () {
+			setRandomLinkColor();
+			setColorHoverListener();
+
+			setInterval(() => {
+				setRandomLinkColor();
+			}, 3000);
+		})();
+</script>

src/components/Header.astro

@@ -1,19 +1,25 @@
 ---
-import HeaderLink from './HeaderLink.astro';
-import { SITE_TITLE } from '../config';
+import HeaderLink from "./HeaderLink.astro";
+import { SITE_TITLE } from "../config";
 ---
 
 <header>
-	<h2>
-		{SITE_TITLE}
-	</h2>
+	<div class="header-section">
+		<div class="header-frame">
+			<h1>{SITE_TITLE}</h1>
+			<h2>a blog, or whatever</h2>
+		</div>
+	</div>
 	<nav>
-		<HeaderLink href="/">Home</HeaderLink>
-		<HeaderLink href="/blog">Blog</HeaderLink>
-		<HeaderLink href="/about">About</HeaderLink>
-		<HeaderLink href="https://cassidoo.co/newsletter" target="_blank">Newsletter</HeaderLink>
-		<HeaderLink href="https://twitter.com/cassidoo" target="_blank">Twitter</HeaderLink>
-		<HeaderLink href="https://github.com/cassidoo" target="_blank">GitHub</HeaderLink>
+		<HeaderLink href="/">home</HeaderLink>
+		<HeaderLink href="/blog">posts</HeaderLink>
+		<HeaderLink href="https://cassidoo.co" target="_blank">website</HeaderLink>
+		<HeaderLink href="https://twitter.com/cassidoo" target="_blank"
+			>twitter
+		</HeaderLink>
+		<HeaderLink href="https://cassidoo.co/newsletter" target="_blank"
+			>newsletter
+		</HeaderLink>
 	</nav>
 </header>
 <style>