From f8e1ce6b700bbe1c2ee56358377dc6139de7465a Mon Sep 17 00:00:00 2001
From: Drew Haven <drew.haven@gmail.com>
Date: Fri, 1 May 2026 20:48:01 -0700
Subject: [PATCH] Unify social links component.  Style tweaks for
 responsiveness

---
 src/components/Footer.astro      | 14 +++++++++++++-
 src/components/Header.astro      | 31 ++++---------------------------
 src/components/Sidebar.astro     | 31 ++-----------------------------
 src/components/SocialLinks.astro | 32 ++++++++++++++++++++++++++++++++
 src/layouts/RootLayout.astro     | 12 ++++++++++--
 src/styles/global.css            |  4 ++++
 6 files changed, 65 insertions(+), 59 deletions(-)
 create mode 100644 src/components/SocialLinks.astro

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 314aa62..e41b760 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,8 +1,12 @@
 ---
+import SocialLinks from "./SocialLinks.astro";
 const today = new Date();
 ---
 
 <footer>
+  <div class="social-links">
+    <SocialLinks />
+  </div>
   <div>
     &copy; {today.getFullYear()} Periodic. All rights reserved.
   </div>
@@ -19,7 +23,15 @@ const today = new Date();
 <style>
 	footer {
 		padding: 2em 1em 6em 1em;
-		text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     color: var(--color-gray);
 	}
+
+  @media (min-width: 1000px) {
+    .social-links {
+      display: none;
+    }
+  }
 </style>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 7dca068..e42a23a 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -3,6 +3,7 @@ import HeaderLink from './HeaderLink.astro';
 import Blazestar from './Blazestar.astro';
 import NoteHierarchy from './NoteHierarchy.astro';
 import NotchedBox from './NotchedBox.astro';
+import SocialLinks from './SocialLinks.astro';
 ---
 
 <header>
@@ -24,26 +25,6 @@ import NotchedBox from './NotchedBox.astro';
         </div>
       </div>
 		</div>
-		<div class="social-links">
-			<a href="https://m.webtoo.ls/@astro" target="_blank">
-				<span class="sr-only">Follow Periodic on Mastodon</span>
-				<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
-					><path
-						fill="currentColor"
-						d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
-					></path></svg
-				>
-			</a>
-			<a href="https://github.com/periodic" target="_blank">
-				<span class="sr-only">Go to Periodic's GitHub repo</span>
-				<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
-					><path
-						fill="currentColor"
-						d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
-					></path></svg
-				>
-			</a>
-		</div>
 	</nav>
   <div class="h-card">
     <img class="u-photo" src="/photos/Bingley Business.jpg" />
@@ -54,7 +35,7 @@ import NotchedBox from './NotchedBox.astro';
 <style>
 	header {
     color: var(--color-light-text);
-		margin: 0;
+    margin: 0 1em;
     padding: 0;
 	}
 
@@ -71,6 +52,7 @@ import NotchedBox from './NotchedBox.astro';
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
+    flex-wrap: wrap;
 	}
 	nav a {
 		padding: 1em 0.5em;
@@ -90,12 +72,6 @@ import NotchedBox from './NotchedBox.astro';
 		display: flex;
 	}
 
-	@media (max-width: 800px) {
-    nav {
-      flex-direction: column;
-    }
-	}
-
   .internal-links {
     display: flex;
     flex-direction: row;
@@ -151,4 +127,5 @@ import NotchedBox from './NotchedBox.astro';
   .h-card {
     display: none;
   }
+
 </style>
diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
index a98f355..597fa15 100644
--- a/src/components/Sidebar.astro
+++ b/src/components/Sidebar.astro
@@ -2,6 +2,7 @@
 import SidebarLink from './SidebarLink.astro';
 import Blazestar from './Blazestar.astro';
 import NotesLinks from './NotesLinks.astro';
+import SocialLinks from './SocialLinks.astro';
 ---
 
 <header>
@@ -14,24 +15,7 @@ import NotesLinks from './NotesLinks.astro';
       <NotesLinks />
 		</div>
 		<div class="social-links">
-			<a href="https://mastodon.social/@periodic" target="_blank" rel="me">
-				<span class="sr-only">Follow Periodic on Mastodon</span>
-				<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
-					><path
-						fill="currentColor"
-						d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
-					></path></svg
-				>
-			</a>
-			<a href="https://github.com/periodic" target="_blank" rel="me">
-				<span class="sr-only">Go to Periodic's GitHub repo</span>
-				<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
-					><path
-						fill="currentColor"
-						d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
-					></path></svg
-				>
-			</a>
+      <SocialLinks />
 		</div>
 	</nav>
 </header>
@@ -75,15 +59,4 @@ import NotesLinks from './NotesLinks.astro';
     flex-direction: column;
     gap: 16px;
   }
-	.social-links,
-	.social-links a {
-		display: flex;
-    gap: 16px;
-    justify-content: center;
-	}
-	@media (max-width: 720px) {
-		.social-links {
-			display: none;
-		}
-	}
 </style>
diff --git a/src/components/SocialLinks.astro b/src/components/SocialLinks.astro
new file mode 100644
index 0000000..1f0d270
--- /dev/null
+++ b/src/components/SocialLinks.astro
@@ -0,0 +1,32 @@
+<div class="social-links">
+  <a href="https://m.webtoo.ls/@astro" target="_blank">
+    <span class="sr-only">Follow Periodic on Mastodon</span>
+    <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
+      ><path
+        fill="currentColor"
+        d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
+      ></path></svg>
+  </a>
+  <a href="https://github.com/periodic" target="_blank">
+    <span class="sr-only">Go to Periodic's GitHub repo</span>
+    <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
+      ><path
+        fill="currentColor"
+        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
+      ></path></svg
+    >
+  </a>
+</div>
+
+<style>
+.social-links {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+
+  a {
+    color: var(--color-light-text);
+    text-decoration: none;
+  }
+}
+</style>
diff --git a/src/layouts/RootLayout.astro b/src/layouts/RootLayout.astro
index b205bad..923584e 100644
--- a/src/layouts/RootLayout.astro
+++ b/src/layouts/RootLayout.astro
@@ -33,7 +33,7 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
     </div>
 	</body>
   <style>
-    @media (max-width: 900px) {
+    @media (max-width: 1000px) {
       body {
         grid-template-areas: 
           "header"
@@ -52,7 +52,8 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
         display: none;
       }
     }
-    @media (min-width: 900px) {
+
+    @media (min-width: 1000px) {
       body {
         grid-template-areas: 
           "header header"
@@ -69,6 +70,13 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
         display: block;
       }
     }
+
+    @media (max-width: 500px) {
+      body {
+        font-size: 14px;
+      }
+    }
+
     body {
       display: grid;
     }
diff --git a/src/styles/global.css b/src/styles/global.css
index 62685df..32c4453 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -23,6 +23,10 @@
   --font-size-2xl: calc(var(--font-size-xl) * 1.2);
   --font-size-3xl: calc(var(--font-size-2xl) * 1.2);
   --font-size-4xl: calc(var(--font-size-3xl) * 1.2);
+
+  --width-full: 1000px;
+  --width-narrow: 800px;
+  --width-mobile: 500px;
 }
 
 @font-face {