feat: theme

public/scripts/index.js

@@ -243,9 +243,9 @@
         const currentTheme =
           document.documentElement.getAttribute("data-theme");
         if (currentTheme === "dark") {
-          themeToggle.textContent = "ʕ•ᴥ•ʔつ☾";
+          themeToggle.textContent = "☾⊂ʕ•ᴥ•ʔ";
         } else {
-          themeToggle.textContent = "ʕ•ᴥ•ʔつ☼";
+          themeToggle.textContent = "☼⊂ʕ•ᴥ•ʔ";
         }
       }
 

public/styles/common.css

@@ -202,15 +202,17 @@ body {
 header,
 footer {
   padding: 20px;
-}
-
-header {
   font-size: 1.5em;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
+#theme-toggle {
+  cursor: pointer;
+  user-select: none;
+}
+
 .main {
   display: flex;
   justify-content: center;

src/components/Footer.astro

@@ -1,6 +1,12 @@
 <footer>
-  <span id="theme-toggle">ʕ•ᴥ•ʔつ☼</span>
-  <div class="footer-links">
+  <div class="footer-links-left">
+    <a href="/resume.pdf" data-topic="resume" target="_blank">resume</a>
+    <a href="/transcript.pdf" data-topic="transcript" target="_blank"
+      >transcript</a
+    >
+    <a href="/about.html" data-topic="about">about</a>
+  </div>
+  <div class="footer-links-right">
     <a href="/gist.html" data-topic="gist">gist</a>
     <a href="/git.html" data-topic="git">git</a>
     <a
@@ -13,22 +19,23 @@
 </footer>
 
 <style>
-  footer {
-    padding: 20px;
-    font-size: 1.5em;
+  .footer-links-left,
+  .footer-links-right {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
+    gap: 25px;
   }
-  #theme-toggle {
-    cursor: pointer;
-    user-select: none;
-  }
-  .footer-links a {
-    margin-left: 25px;
+  .footer-links-left a,
+  .footer-links-right a {
     text-decoration: none;
     cursor: pointer;
   }
+  @media (max-width: 768px) {
+    .footer-links-left,
+    .footer-links-right {
+      flex-direction: column;
+      gap: 5px;
+    }
+  }
 </style>
 
 <script type="module" src="/scripts/index.js"></script>

src/components/Header.astro

@@ -21,35 +21,21 @@ const promptText = topic ? `barrett@ruth:~$ ${topic}` : "barrett@ruth:~$";
       <span class="terminal-cursor"></span>
     </div>
   </a>
-  <div class="header-links">
-    <a href="/resume.pdf" data-topic="resume" target="_blank">resume</a>
-    <a href="/transcript.pdf" data-topic="transcript" target="_blank"
-      >transcript</a
-    >
-    <a href="/about.html" data-topic="about">about</a>
-  </div>
+  <span id="theme-toggle">☼⊂ʕ•ᴥ•ʔ</span>
 </header>
 
 <style>
-  .header-links a {
-    margin-left: 25px;
-    text-decoration: none;
+  #theme-toggle {
     cursor: pointer;
+    user-select: none;
   }
   @media (max-width: 768px) {
     header {
       flex-direction: column;
       align-items: flex-start;
     }
-    .header-links {
+    #theme-toggle {
       align-self: flex-end;
-      display: flex;
-      flex-direction: column;
-      text-align: right;
-      gap: 5px;
-    }
-    .header-links a {
-      margin-left: 0;
     }
   }
 </style>