From 382f668a17654f5e17809cdcbc450c92c61ab990 Mon Sep 17 00:00:00 2001
From: Angel Wang <angel@angelcube.dev>
Date: Mon, 23 Mar 2026 14:55:06 -0600
Subject: [PATCH] feat: accessibility changes and mobile optimization

---
 src/components/footer.astro          |  2 +-
 src/components/header.astro          |  4 +--
 src/layouts/layout.astro             | 39 ++--------------------
 src/layouts/meta.astro               | 37 ++++++++++++++++++++
 src/pages/index.astro                |  2 +-
 src/styles/_var.scss                 |  6 ++++
 src/styles/footer.scss               | 22 +++++++++---
 src/styles/{nav.scss => header.scss} |  2 +-
 src/styles/{main.scss => index.scss} | 22 ++++++++++++
 src/styles/projects.scss             | 50 +++++++++++++++-------------
 10 files changed, 117 insertions(+), 69 deletions(-)
 create mode 100644 src/layouts/meta.astro
 rename src/styles/{nav.scss => header.scss} (96%)
 rename src/styles/{main.scss => index.scss} (73%)

diff --git a/src/components/footer.astro b/src/components/footer.astro
index 2156c8c..1412da0 100644
--- a/src/components/footer.astro
+++ b/src/components/footer.astro
@@ -12,6 +12,6 @@ import {Temporal} from 'temporal-polyfill'
         <span>&copy; {Temporal.Now.plainDateISO().year} Angel Wang</span>
         <span>Computer [for] human.</span>
     </div>
-    <img src="/logotype.svg" />
+    <img src="/logotype.svg" alt="angelcube" />
 
 </footer>
diff --git a/src/components/header.astro b/src/components/header.astro
index 669117b..344ebd9 100644
--- a/src/components/header.astro
+++ b/src/components/header.astro
@@ -1,5 +1,5 @@
 ---
-import "../styles/nav.scss"
+import "../styles/header.scss"
 import {SparkleFillIcon} from '@primer/octicons-react'
 const { title } = Astro.props
 ---
@@ -8,7 +8,7 @@ const { title } = Astro.props
         <h1>{title}</h1>
     </div>
     <nav>
-        <a href="/">
+        <a href="/" aria-label="Home">
             <SparkleFillIcon size={32} className="header-icon"/>
         </a>
         <a href="/about">About</a>
diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro
index e583976..30fe204 100644
--- a/src/layouts/layout.astro
+++ b/src/layouts/layout.astro
@@ -1,44 +1,11 @@
 ---
+import Meta from '../layouts/meta.astro'
 import Header from '../components/header.astro'
 import Footer from "../components/footer.astro"
 const { title } = Astro.props
 ---
 
-<!doctype html>
-<html lang="en-CA">
-	<head>
-
-		<!-- Important metadata, and the like -->
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width = device-width, initial-scale = 1" />
-		<meta name="generator" content={Astro.generator} />
-		<title>angelcube</title>
-
-		<!-- External stuff -->
-		<meta property="og:url" content="https://angelcube.dev/" />
-		<meta property="og:type" content="website" />
-		<meta property="og:site_name" content="angelcube" />
-		<meta
-			name="google-site-verification"
-			content="mLGkfIju91jXMWCVVf4n8JlIIrkjqHFPU6OWuLZQzTo"
-		/>
-				
-		<!-- Favicon -->
-		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-		<link rel="icon" type="image/svg+xml" sizes="any" href="/favicon.svg">
-
-		<!-- Schema -->
-		<script type="application/ld+json">
-			{
-				"@context": "https://schema.org",
-				"@type": "WebSite",
-				"name": "angelcube",
-				"url": "https://angelcube.dev"
-			}
-		</script>
-	</head>
-
+<Meta>
 	<body>
 		<main>
 			<Header title={title}/>
@@ -46,4 +13,4 @@ const { title } = Astro.props
 		</main>
 		<Footer />
 	</body>
-</html>
+<Meta />
diff --git a/src/layouts/meta.astro b/src/layouts/meta.astro
new file mode 100644
index 0000000..452ec13
--- /dev/null
+++ b/src/layouts/meta.astro
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en-CA">
+	<head>
+
+		<!-- Important metadata, and the like -->
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width = device-width, initial-scale = 1" />
+		<meta name="generator" content={Astro.generator} />
+		<title>angelcube</title>
+
+		<!-- External stuff -->
+		<meta property="og:url" content="https://angelcube.dev/" />
+		<meta property="og:type" content="website" />
+		<meta property="og:site_name" content="angelcube" />
+		<meta
+			name="google-site-verification"
+			content="mLGkfIju91jXMWCVVf4n8JlIIrkjqHFPU6OWuLZQzTo"
+		/>
+				
+		<!-- Favicon -->
+		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+		<link rel="icon" type="image/svg+xml" sizes="any" href="/favicon.svg">
+
+		<!-- Schema -->
+		<script type="application/ld+json">
+			{
+				"@context": "https://schema.org",
+				"@type": "WebSite",
+				"name": "angelcube",
+				"url": "https://angelcube.dev"
+			}
+		</script>
+	</head>
+
+	<slot />
+</html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 26b3423..4763a92 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
 import Layout from "../layouts/layout.astro";
-import "../styles/main.scss";
+import "../styles/index.scss";
 import NowPlaying from "../scripts/NowPlaying";
 import LocalTime from "../scripts/LocalTime";
 ---
diff --git a/src/styles/_var.scss b/src/styles/_var.scss
index f971e58..70fd6cc 100644
--- a/src/styles/_var.scss
+++ b/src/styles/_var.scss
@@ -18,10 +18,16 @@
     --code-background-color: light-dark(#e1e4ea, #303030);
     --code-color: light-dark(#000, #fff);
     --blockquote-color: light-dark(#cfcfcf, #303030);
+
+    ::selection {
+        background-color: light-dark(#242424, #dcdcdc);
+        color: light-dark(#eff1f5, #171717);
+    }
 }
 
 body {
     margin: 0;
+    padding: 0 20px;
     font-family: var(--font-secondary);
     font-size: var(--font-scale);
     text-align: left;
diff --git a/src/styles/footer.scss b/src/styles/footer.scss
index 94311e1..0dbc804 100644
--- a/src/styles/footer.scss
+++ b/src/styles/footer.scss
@@ -1,6 +1,4 @@
 footer {
-    // padding: 0 20px;
-    // padding: 0 calc((100vw - var(--width)) / 2);
     overflow: hidden;
 
     hr {
@@ -21,11 +19,25 @@ footer {
         }
     }
 
+    @media only screen and (max-width: 786px) {
+        .footer-caption {
+            grid-template-columns: 1fr 1fr;
+            gap: 0.5em;
+
+            span {
+                font-size: 1rem;
+                text-align: end;
+            }
+
+            span:last-child {
+                grid-area: 2 / 2;
+            }
+        }
+    }
+
     img {
         margin-top: -6.66%;
-        margin-left: 20px;
-        margin-right: 20px;
-        width: calc(100% - 40px);
+        width: 100%;
         transform: translateY(33%);
     }
 }
\ No newline at end of file
diff --git a/src/styles/nav.scss b/src/styles/header.scss
similarity index 96%
rename from src/styles/nav.scss
rename to src/styles/header.scss
index 0e149b1..f19eb87 100644
--- a/src/styles/nav.scss
+++ b/src/styles/header.scss
@@ -24,7 +24,7 @@ header nav {
     a {
         width: fit-content;
         font-family: var(--font-main);
-        font-size: 1.8rem;
+        font-size: 2rem;
         text-decoration: none;
 
         .header-icon:hover {
diff --git a/src/styles/main.scss b/src/styles/index.scss
similarity index 73%
rename from src/styles/main.scss
rename to src/styles/index.scss
index d777907..204c950 100644
--- a/src/styles/main.scss
+++ b/src/styles/index.scss
@@ -28,6 +28,28 @@ p.big {
     }
 }
 
+@media only screen and (max-width: 786px) {
+    .columns {
+        flex-direction: column;
+
+        .column {
+            padding: 20px 0;
+        }
+
+        .column.left {
+            margin-right: 0;
+        }
+
+        .column.right {
+            // border-bottom: 2px solid var(--text-color);
+            width: auto;
+        }
+    }
+
+
+
+}
+
 #now-playing {
     // display: flex;
     // flex-direction: row;
diff --git a/src/styles/projects.scss b/src/styles/projects.scss
index 5637408..be91942 100644
--- a/src/styles/projects.scss
+++ b/src/styles/projects.scss
@@ -8,37 +8,41 @@ header a:nth-child(3) {
 .projects-container {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
-}
 
-.projects-container div {
-    margin-right: 10%;
-}
+    div {
+        margin-right: 10%;
 
-.projects-container div:last-child {
-    margin-right: 0; // commits a design crime :)
-}
+        h3 {
+            margin-top: 0;
+            margin-bottom: 0.5em;
+        }
 
-.projects-container a:has(h3) {
-    text-decoration: none;
-}
+        p {
+            margin-top: 0;
+        }
+    }
 
-.projects-container a:has(h3):hover {
-    text-decoration: underline;
-    text-decoration-thickness: 2px;
+    div:last-child {
+        margin-right: 0; // commits a design crime :)
+        
+    }
+
+    a:has(h3) {
+        text-decoration: none;
+    }
+
+    a:has(h3):hover {
+        text-decoration: underline;
+        text-decoration-thickness: 2px;
+    }
 }
 
 main h2 {
     margin-bottom: 0.5em
 }
 
-.projects-container {
-    div {
-        h3 {
-            margin-top: 0;
-            margin-bottom: 0.5em;
-        }
-        p {
-            margin-top: 0;
-        }
+@media only screen and (max-width: 786px) {
+    .projects-container {
+        grid-template-columns: 1fr;
     }
-} 
+}
\ No newline at end of file
-- 
2.51.2