From 19584ef7f1ded2bb0c6f83e798c70e8c795050ee Mon Sep 17 00:00:00 2001
From: haetae <hello@haetae.nya.pub>
Date: Sun, 9 Feb 2025 00:42:14 -0500
Subject: [PATCH] redo styles and add new fonts

---
 astro.config.mjs                              |   6 +-
 public/fonts/sq.woff2                         | Bin 0 -> 4160 bytes
 public/fonts/sqb.woff2                        | Bin 0 -> 3568 bytes
 src/assets/images/guild-bbs-content.png       | Bin 301 -> 169 bytes
 src/assets/images/guild-bbs-list.png          | Bin 0 -> 731 bytes
 src/assets/images/guild-bbs.png               | Bin 583 -> 699 bytes
 src/assets/styles/base.css                    |  95 ++++++-
 src/assets/styles/fonts.css                   |  12 +
 src/components/Navbar.astro                   |   4 +
 src/components/ThemeSwitch.astro              |  15 ++
 src/layouts/About.astro                       |   3 +-
 src/layouts/Blog.astro                        | 231 ++++++++++++------
 src/layouts/Chapter.astro                     |  30 ++-
 src/pages/blog/[...id].astro                  |  10 +
 src/pages/fics/[ficId]/[...chapterId].astro   |  15 +-
 src/pages/guestbook.astro                     |  28 ++-
 .../utils/last-modified.mjs                   |   0
 17 files changed, 353 insertions(+), 96 deletions(-)
 create mode 100644 public/fonts/sq.woff2
 create mode 100644 public/fonts/sqb.woff2
 create mode 100644 src/assets/images/guild-bbs-list.png
 create mode 100644 src/components/ThemeSwitch.astro
 rename last-modified.mjs => src/utils/last-modified.mjs (100%)

diff --git a/astro.config.mjs b/astro.config.mjs
index 9109be1..dd22baa 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -2,7 +2,7 @@
 import { defineConfig } from 'astro/config';
 import db from '@astrojs/db';
 import node from '@astrojs/node';
-import { modifiedTime } from './last-modified.mjs';
+import { modifiedTime } from './src/utils/last-modified.mjs';
 
 // https://astro.build/config
 export default defineConfig({
@@ -12,6 +12,6 @@ export default defineConfig({
   },
   integrations: [db()],
   adapter: node({
-    mode: 'standalone'
-  })
+    mode: 'standalone',
+  }),
 });
\ No newline at end of file
diff --git a/public/fonts/sq.woff2 b/public/fonts/sq.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..33d5e323af6e4c9bdd32a5019728f6e8d666c9e9
GIT binary patch
literal 4160
zcmV-G5WnwtPew8T0RR9101!X`3IG5A07X;)01xy40RR9100000000000000000000
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
K{?v+M{;CoH5D2{h

literal 0
HcmV?d00001

diff --git a/public/fonts/sqb.woff2 b/public/fonts/sqb.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..074db18947ba3e21a44ed77bdafa8b8c96a3ac7f
GIT binary patch
literal 3568
zcmV<M4G;2nPew8T0RR9101fZ}3IG5A06S;^01c!70RR9100000000000000000000
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/guild-bbs-content.png b/src/assets/images/guild-bbs-content.png
index 7693ae1334b12d1ce1107b126b0bb697114d38b7..f9cc5638930122aeb9b9f87eedba128922b50641 100644
GIT binary patch
literal 169
zcmeAS@N?(olHy`uVBq!ia0vp^oFL4>1|%O$WD@{VjKx9jP7LeL$-D$|l097<LnNjq
z@A>`iZhhN#9*cvvKvIY2y`+TI_cw_GDFR1Uoj4lN*~ohA=H@EXwx$bP0@#3{Ws&jj
z^dyZ}F?-t^L4b36wm?Hw*Mq#KoBg~7_xApN_kZvA3Z|~cMn;B1&m{M<IdtCwTF2n&
L>gTe~DWM4f0OLP}

literal 301
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=jKx9jP7LeL$-D$|o_o4DhE&XX
zd)rX-5Ca4A#RG>K#5Odr>Lf7gdpJ0&25?4b2t{!kF!KFyE{@(-y*=Id>}PH7u#?8#
zWs#F!Tcpk3`|YRo^2dt1&r7sB?)o$L^V2yh`x*Lw_nzcfcX)=%%_M$5<_tz(I^wgh
tm}}N=p0EA#)(xM_f2#Df|DIQ`Wd0Z+rJZ}rW){%P44$rjF6*2UngHC3Tz&um

diff --git a/src/assets/images/guild-bbs-list.png b/src/assets/images/guild-bbs-list.png
new file mode 100644
index 0000000000000000000000000000000000000000..b985d753ed895052e4c42ccaed08c450fcfc3c53
GIT binary patch
literal 731
zcmV<10wn#3P)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00001b5ch_0Itp)
z=>Px%l}SWFRCt{2o6&KjFc5}6JZ?ZO&;nNiR{||ut^=opTnSDKTnDEX)WWu~C2$Wi
zjsZdJ2V3^SH<K3`Pj>$i@N0Kn039o44{$jCo4r5*_eASU-0~e&;q(1>6hKuu9-15f
z-Rt5-X<GqcH~vsH{#hdCq{D?1yYYoV0&NJxFT60SiWi{`lFVte0~8Su5pKT&pB0CS
z%;vNoT<RQ6Q-PK^1NnDdhjRr@Q-f+Ur~P=r0Vc8silP9Pb2<y)MdEv84P0n(7NBi?
zj!?3*2M8hLjw2IY6rirE+>vA<{4Kt2fx51!t1@Ri55ot+`vBdX6EyZToH)S?CQi^x
zpl!vB9X{t2(m73>pbCfzcHW7noFtJ`k#K^)nhLP<P>k-j1g)lCs7p9Oi#S~RXfxgc
z070y5{WMj1p~Tz{u<8n%rk<=N1@K`d0;FyMh_8<0$Keq%J&d>aKhwpfhoE&=*qgnH
z6I>g~9pHc;Ki?i4%6*wD@gxN}9zX6F%5yOhVDO$?0g2O~nkk9*EajBw3ka=G*U(>)
z*cZ^4Q{sR(+yU;?7f>-%83s_%n3I0j7r@cf6;Rq~i#SJ9mq6k)NUARoi|BU`?2)*I
z-8>M$2f2GN&&D3Wdyn@v4?xTGW%0VEuI*HTuEG02@Snq5!1@8G#|N1|3@w$AUzKQt
z(x0UVBupA1f5U);S{jh(jZk`o%JhH)^hT%xmo|5%2PAry%-!lMLYn}&1IW!LK<)r?
zvk8zpfZS{X<PIP=n*g~3$jv4|?f`PL2{2x;S`w41dV`#%Dh-yz{7g=}(bX4|qIQZR
z=icB|C9%FYXe9sda#~4m5ax2)dV>&0#@bc(2G7mWwf<%Z3ReE}`TqkDJc+z9H^Tq`
N002ovPDHLkV1hm9L+bzl

literal 0
HcmV?d00001

diff --git a/src/assets/images/guild-bbs.png b/src/assets/images/guild-bbs.png
index a7e45df3e4a515d6dd8322b20784f5a83676e51b..73d00f8f11275a6e95791fb1a1539514f7ffebf8 100644
GIT binary patch
delta 662
zcmV;H0%`rn1iJ;0F@JSQL_t(|ob8+4m76dSMlXA4KrPUMTA&4bNC%r5(!r($(m}K(
zsD)`^N+1ui9UBC}*<@vpxaar<gU`%|jOLF9n5dW*;Pvh2>In+C2Ri<@*DTIe;rrJw
zNdQ&l?RD6B>GKmr8Ak!&W&WjV`dA|Qq_+o7yv$FG5*cH>y?@||QB{HnW0b5<vlXC-
zfQYdF-}LA>RAkks_U2UQ7zPj8;SBgcO%u*F3_}m9S)bbZ0SB1y9%z~d*!JlnKoCj$
zNDW+RaS>n~LkUxg(*nd8OWRS1DGAVfU)qu)#2?M?zd+x6df%0_=hFyL2qD6>8VTBZ
z8gBWNj|795*?$mJmAF3=1W^zbLkWRH)*``X5edTJJMi90ER=j&iv*`!BxuF+D^?@H
z`3hJgMESQCeG<+&e7A8!b1Ptr%^!O}WXEG{@er(vrgi~xflyV{yaE(GRsb9V+_w#y
ziH@&W2yk}tI&iX(CZ7|bd8E6@27^S#V5ctt=iY#(EPr?A*RmcUnzBJNeSyT9U(0N8
zqlW&hIOiDp4p?TnruzcdtYx`30z7Nh_Yqov5MnA4R>!F<?g!6cs0#Ea6h{b=`2H;k
z;7&V(@1B3Z-$RIks%(|TOPKZlxT`E~EfBg4NMwQ_$gTiufzW9{V#TLSS-b~tClGQD
zhQ0@<*?(J_DT{-hyPw$dsrq`rAwX#ZN^=NM+JMp=0+cqOG=~7C4JgeaKxqR?a|lq{
zfYKZS%n#U{6jkKzNl_yjocn@dZ%OPjDQad|cDvu1ofK6=J%ZF1^g#YSsO+Su5#KLt
wmBfzTAf$<@F;xA|P<?kkG0{-@>+`<==HNF8?GNW1Z2$lO07*qoM6N<$f-$%>cK`qY

delta 545
zcmdnZdYol~VLhX#i(^Q|oVT-Y=RP(NaOGz<KOlC6DLR1rRigEYZIf~xUnbmSik>01
zjO8u+<25>+P2U@Pd_OV#o9OxYoT+PXgEza5$r;uMU*Dz|HZc8bT=)O&oVyXCbv6H|
z@dkw6i(78J+|E95N~IV>+_v~t&-{I#%=+@}5WD{EMo*z)ukFJ1^CUu5yA0GV*JN&H
z5)l*-e7AqLoNRxWNcOHfJYVN!axGxq*Ys<8>cQ&cCcO))A}*&^A7l;<;kS6+@OhRU
zZ->%P%S%k!`gXiCo@Xc?ox|<mbuy}5(AzA5=U`MP=gYf)_pu%`G-x{*bbh+vWP#+S
zr8hXQZIzyPwd4+`+sbE+3+h)b`EBhez#6#nMe70OrG6LQS~<=*#GrWP68F<tUUMH5
zUE#bI^s_5TeMc;#YSN_tt6y|~xF_5;+5Srg>zu-0$^0F6Huk<XJGiW1t#rW^4pY~7
z#<kKH!W|B?y*Pf`Z!=rWOSTB^4a=kxbPvqRYuL(=y^HZ0(;9?eJyucdg7#dVp_Avv
zY&3ol^~5SH+_~eI)a1L*6v`tXYIIs&E6(Csr+(ZdeSvxD+sls@S!&0eUAfU`<+|Fi
zA5U7YZho{kU5Y(ne&f1dS8mJ-V*7QhA^j}Ne{QM1WBup<Gg)6b<eK47c8viDJYD@<
J);T3K0RU!r{`vp_

diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css
index e3ed799..1492e2f 100644
--- a/src/assets/styles/base.css
+++ b/src/assets/styles/base.css
@@ -2,17 +2,57 @@
 @import url("./fonts.css");
 
 :root {
-  --body-font: "Wonder Mail", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  color-scheme: light dark;
+  --body-font: "sq", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   --title-font: "Kiwi Soda", Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   --mono-font: "Departure Mono", ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
   --serif-font: "Redaction 35", 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
   --sans-font: "MLSS", 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   --arial-font: "Arial Pixel", Arial, Helvetica, sans-serif;
+  --pmd-font: "Wonder Mail", Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
+
+  @media screen and (prefers-color-scheme: light) {
+    --bg-color: #e6f2ef;
+    --fg-color: #151640;
+    --accent-color: #f783b0;
+    --secondary-color: #3f6d9e;
+  }
+
+  @media screen and (prefers-color-scheme: dark) {
+    --bg-color: #555568;
+    --fg-color: #f3eded;
+    --accent-color: #eeb9c7;
+    --secondary-color: #b9eedc;
+  }
+}
+
+.light {
+  --bg-color: #e6f2ef;
+  --fg-color: #151640;
+  --accent-color: #f783b0;
+  --secondary-color: #3f6d9e;
+}
+
+.dark {
+  --bg-color: #555568;
+  --fg-color: #f3eded;
+  --accent-color: #eeb9c7;
+  --secondary-color: #b9eedc;
 }
 
 body {
   font-family: var(--body-font);
-  font-size: 2rem;
+  font-size: calc((1rem - 1px) * 2);
+  background-color: var(--bg-color);
+  color: var(--fg-color);
+}
+
+a {
+  color: var(--secondary-color);
+
+  &:hover {
+    text-decoration: none;
+  }
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -39,4 +79,55 @@ input, button, textarea, select {
   /* @media screen and (max-width: 48em) {
     font-size: 11px;
   } */
+}
+
+input, textarea {
+  background-color: var(--bg-color);
+  color: var(--fg-color);
+  border: 2px solid var(--fg-color);
+  box-shadow: inset 0 2px hsl(from var(--fg-color) h s l / 0.25);
+
+  &:focus { outline: 2px solid var(--secondary-color); }
+}
+
+button {
+  background-color: hsl(from var(--accent-color) h calc(s - 20) calc(l - 20));
+  color: var(--bg-color);
+  border: 2px solid var(--fg-color);
+  box-shadow: 0 4px 0 var(--fg-color);
+  transform: translateY(-4px);
+  cursor: pointer;
+  transition: transform 0.25s, box-shadow 0.5s ease;
+
+  &:hover {
+    background-color: var(--accent-color);
+    color: var(--fg-color);
+  }
+
+  &:active, &:focus {
+    background-color: var(--secondary-color);
+    color: var(--bg-color);
+    border-color: var(--bg-color);
+    outline: 2px solid var(--secondary-color);
+    box-shadow: 0 0 0 var(--fg-color);
+    transform: translateY(0);
+  }
+}
+
+.dark {
+  button {
+    background-color: var(--accent-color);
+    color: var(--bg-color);
+
+    &:hover {
+      background-color: hsl(from var(--accent-color) h s calc(l - 10));
+      color: var(--bg-color);
+    }
+
+    &:active, &:focus {
+      color: var(--bg-color);
+      background-color: var(--secondary-color);
+      border-color: var(--bg-color);
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/assets/styles/fonts.css b/src/assets/styles/fonts.css
index a3a8c42..c873ec2 100644
--- a/src/assets/styles/fonts.css
+++ b/src/assets/styles/fonts.css
@@ -49,6 +49,18 @@
   font-style: normal;
 }
 
+@font-face {
+  font-family: "sq";
+  src: url("/fonts/sq.woff2") format("woff2");
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: "sq";
+  src: url("/fonts/sqb.woff2") format("woff2");
+  font-weight: bold;
+}
+
 @font-face {
   font-family: "Wonder Mail";
   src: url("/fonts/wondermail.woff2") format("woff2");
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index efc242a..a976002 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -1,4 +1,6 @@
 ---
+import ThemeSwitch from "./ThemeSwitch.astro";
+
 const links = [
   "about",
   "blog",
@@ -14,6 +16,8 @@ const links = [
       <li><a href={`/${link}`}>{link}</a></li>
     ))}
   </ul>
+
+  <ThemeSwitch />
 </nav>
 
 <style>
diff --git a/src/components/ThemeSwitch.astro b/src/components/ThemeSwitch.astro
new file mode 100644
index 0000000..d5582ca
--- /dev/null
+++ b/src/components/ThemeSwitch.astro
@@ -0,0 +1,15 @@
+<div>
+  <input type="radio" name="theme-switch" id="theme-switch" value="system" />
+  <input type="radio" name="theme-switch" id="theme-switch" value="light" />
+  <input type="radio" name="theme-switch" id="theme-switch" value="dark" />
+</div>
+
+<script is:inline>
+  const radio = document.querySelectorAll("input[type='radio']");
+  console.log(radio);
+  radio.forEach(input => {
+    input.addEventListener("click", () => {
+      document.documentElement.className = input.value;
+    });
+  });
+</script>
\ No newline at end of file
diff --git a/src/layouts/About.astro b/src/layouts/About.astro
index ddb4e4a..dad16fd 100644
--- a/src/layouts/About.astro
+++ b/src/layouts/About.astro
@@ -28,6 +28,7 @@ const { frontmatter } = Astro.props;
 
 <style define:vars={{ borderImage: `url(${border.src})`, frameImage: `url(${frame.src})` }}>
   main {
+    font: 2rem var(--pmd-font);
     margin: 3rem auto;
     max-width: clamp(50ch, 80ch, 100%);
   }
@@ -41,7 +42,7 @@ const { frontmatter } = Astro.props;
     image-rendering: pixelated;
 
     h1, h2, h3 {
-      font-family: var(--body-font);
+      font-family: var(--pmd-font);
       border-bottom: 2px solid #f8f8f8;
     }
   }
diff --git a/src/layouts/Blog.astro b/src/layouts/Blog.astro
index c3ef8f8..c640f4c 100644
--- a/src/layouts/Blog.astro
+++ b/src/layouts/Blog.astro
@@ -1,11 +1,15 @@
 ---
+import { Image } from "astro:assets";
 import { getCollection } from "astro:content";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
 import Layout from "./Layout.astro";
 import Navbar from "@/components/Navbar.astro";
 import moods from "@/utils/moods";
+
 import outerBBS from "@/assets/images/guild-bbs.png";
 import innerBBS from "@/assets/images/guild-bbs-content.png";
-import { Image } from "astro:assets";
+import sideBBS from "@/assets/images/guild-bbs-list.png";
 
 interface Props {
   title: string;
@@ -19,6 +23,7 @@ interface Props {
   }
 }
 
+dayjs.extend(utc);
 const blog = await getCollection("blog");
 blog.length = Math.min(blog.length, 5);
 blog.sort((a, b) => a.data.pubDate!.valueOf() - b.data.pubDate!.valueOf());
@@ -29,22 +34,30 @@ const { title, date, currently } = Astro.props;
 
   <main>
     <nav id="blog-links">
-      <h1>recent posts</h1>
-      <ul>
-        {blog.map(entry => (
-          <li>
-            <time datetime={entry.data.pubDate!.toISOString()}>
-              {entry.data.pubDate?.toLocaleDateString(undefined, { dateStyle: "short" })}
-            </time>
-            <a href={`/blog/${entry.id}`}>{entry.data.title}</a>
-          </li>
-        ))}
-      </ul>
-      <h1>other links</h1>
-      <ul>
-        <li><a href="/blog">archive</a></li>
-        <li><a href="/blog/rss.xml">rss feed</a></li>
-      </ul>
+      <div class="inner">
+        <hgroup>
+          <h1><span class="title">recent posts</span></h1>
+          <ul>
+            {blog.map(entry => (
+              <li>
+                <span class="item">
+                  <a href={`/blog/${entry.id}`}>{entry.data.title}</a>
+                  <time datetime={dayjs(entry.data.pubDate!).utc(true).toISOString()}>
+                    {dayjs(entry.data.pubDate).utc(true).format("M/D/YY")}
+                  </time>
+                </span>
+              </li>
+            ))}
+          </ul>
+        </hgroup>
+        <hgroup>
+          <h1><span class="title">other links</span></h1>
+          <ul>
+            <li><span class="item"><a href="/blog">archive</a></span></li>
+            <li><span class="item"><a href="/blog/rss.xml">rss feed</a></span></li>
+          </ul>
+        </hgroup>
+      </div>
     </nav>
 
     <section>
@@ -54,9 +67,9 @@ const { title, date, currently } = Astro.props;
             <h1>{title}</h1>
             <hr />
             <div class="info">
-              <time datetime={date.toISOString()}>
+              <time datetime={dayjs(date).utc(true).toISOString()}>
                 <span class="title">Date</span>
-                <span class="desc">{date.toLocaleDateString(undefined, { dateStyle: "long" })}</span>
+                <span class="desc">{dayjs(date).utc(true).format("MMMM DD, YYYY")}</span>
               </time>
             </div>
           </header>
@@ -103,91 +116,155 @@ const { title, date, currently } = Astro.props;
           )}
         </div>
       </article>
-
-      <slot name="pagination" />
     </section>
+    <slot name="pagination" />
   </main>
 </Layout>
 
-<style define:vars={{ outerBorder: `url(${outerBBS.src})`, innerBorder: `url(${innerBBS.src})` }}>
+<style define:vars={{ outerBorder: `url(${outerBBS.src})`, innerBorder: `url(${innerBBS.src})`, sideBorder: `url(${sideBBS.src})` }}>
+  body {
+    image-rendering: pixelated;
+    --bg-0: #fff;
+    --bg-1: #eeffff;
+    --bg-2: #eeeeff;
+    --bg-3: #eee;
+    --bg-4: #ddddee;
+    --bg-5: #ddeeee;
+    --bg-6: #ccccdd;
+    --bg-7: #ccddee;
+    --bg-8: #8888bb;
+    --border-0: #000;
+    --border-1: #6699aa;
+    --border-2: #7799bb;
+    --border-3: #88aabb;
+    --border-4: #99bbcc;
+    --border-5: #bbccdd;
+  }
+  h1 { font: bold 1rem var(--arial-font); }
   main {
+    font: 1rem var(--arial-font);
     display: grid;
-    grid-template-columns: repeat(2, auto);
+    grid-template-columns: auto minmax(auto, 75ch);
     justify-content: center;
-    gap: 1rem;
-    height: calc(100% - 2.5rem);
 
-    @media screen and (max-width: 1270px) {
-      grid-template-columns: 1fr;
+    @media screen and (max-width: 1360px) {
       margin: 0 1rem;
     }
+
+    @media screen and (max-width: 76em) {
+      grid-template-columns: 1fr;
+    }
   }
-  
+
   #blog-links {
     min-width: 28ch;
-    border: 2px solid black;
-    border-bottom: none;
-    margin-top: 2rem;
-    padding: 0.5rem;
+    border: 2px solid var(--border-0);
+    border-image: var(--sideBorder) 22 8 40 7 fill / 44px 16px 80px 14px;
+    background-color: var(--bg-0);
+    padding: 42px 10px 78px;
+    margin-right: -2px;
+
+    .inner {
+      display: flex;
+      height: calc(100% - 34px);
+      flex-flow: column wrap;
+      background-color: var(--bg-3);
+      padding: 2px;
+      margin: 18px 6px;
+      border: 2px solid var(--border-5);
+    }
 
     h1 {
-      font-size: 2rem;
-      margin: 1rem 1rem 0.25rem;
+      padding: 6px 2px;
+      border-block: 2px solid var(--border-2);
+
+      .title {
+        display: inline-block;
+        background-color: var(--bg-8);
+        color: var(--bg-0);
+        padding: 5px 2px;
+        text-align: center;
+        width: 100%;
+      }
     }
 
     ul {
       display: flex;
       flex-flow: column wrap;
-      gap: 0.5rem;
       list-style: none;
       padding: 0;
 
       li {
-        display: flex;
-        padding: 0 0.5rem;
-        justify-content: space-between;
-        align-items: center;
+        padding: 4px 2px;
+        border-bottom: 2px solid var(--bg-4);
+
+        .item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          
+          a {
+            flex: 1;
+            background-color: var(--bg-1);
+            padding: 6px;
+            color: var(--border-0);
+            text-decoration: none;
+          }
+
+          time { 
+            background-color: var(--bg-5);
+            padding: 6px;
+          }
+
+          &:hover {
+            a { background-color: var(--bg-7); }
+            time { background-color: var(--border-5); }
+          }
+        }
+        &:last-child { border: none; }
       }
     }
 
-    @media screen and (max-width: 1270px) {
-      border-bottom: 2px solid black;
+    hgroup {
+      margin: 0 4px;
+      background-color: var(--bg-0);
+
+      &:first-child { margin-top: 4px; }
+      &:last-child { 
+        border-bottom: 2px solid var(--border-1);
+        margin-bottom: 4px;
+      }
     }
-  }
 
-  section {
-    width: 75ch;
-
-    @media screen and (max-width: 1270px) {
-      width: 100%;
+    @media screen and (max-width: 76em) {
+      margin-right: 0;
+      margin-bottom: -2px;
     }
   }
   
   article {
-    font: 1rem var(--arial-font);
     letter-spacing: 1px;
-    border-image: var(--outerBorder) 26 11 12 13 fill / 52px 22px 24px 26px;
-    border-style: solid;
-    image-rendering: pixelated;
-    padding: calc(2rem + 2px) calc(1rem - 2px) calc(1rem - 4px) calc(1rem + 2px);
+    border: 2px solid var(--border-0);
+    border-image: var(--outerBorder) 19 9 38 11 fill / 38px 18px 76px 22px;
+    background-color: var(--bg-3);
+    padding: 36px 16px 74px 20px;
 
     .inner {
-      border-image: var(--innerBorder) 4 3 3 fill / 8px 6px 6px;
-      border-style: solid;
-      image-rendering: pixelated;
+      border: 2px solid var(--border-1);
+      border-image: var(--innerBorder) 3 2 2 fill / 6px 4px 4px;
       margin: 14px 4px 8px;
-      padding: 2px 1px 1px;
+      padding: 4px 2px 2px;
+      background-color: var(--bg-0);
     }
 
     header {
-      border-bottom: 2px solid #ccccdd;
+      border-bottom: 2px solid var(--bg-6);
 
       h1 {
-        font: bold 1rem var(--arial-font);
         text-align: center;
         margin: 6px 2px;
         padding: 2px 0;
-        background-color: #bbccdd;
+        background-color: var(--border-5);
       }
 
       .info {
@@ -195,10 +272,10 @@ const { title, date, currently } = Astro.props;
         gap: 2px;
         border-style: solid;
         border-width: 2px;
-        border-top-color: #eeeeff;
-        border-right-color: #eeeeff;
-        border-left-color: #eeffff;
-        border-bottom-color: #eeffff;
+        border-top-color: var(--bg-2);
+        border-right-color: var(--bg-2);
+        border-left-color: var(--bg-1);
+        border-bottom-color: var(--bg-1);
         padding: 2px 4px;
 
         time, .section {
@@ -207,19 +284,19 @@ const { title, date, currently } = Astro.props;
         }
 
         .title {
-          background-color: #eeeeff;
+          background-color: var(--bg-2);
           padding: 4px 6px;
         }
 
         .desc {
-          background-color: #ddddee;
+          background-color: var(--bg-4);
           padding: 4px 6px;
           flex: 1;
         }
       }
 
       hr {
-        background-color: #99bbcc;
+        background-color: var(--border-4);
         border: none;
         height: 2px;
       }
@@ -227,12 +304,12 @@ const { title, date, currently } = Astro.props;
 
     .content {
       position: relative;
-      background-image: linear-gradient(to right, #fff 5px, transparent 2px),  linear-gradient(#d1d5db 2px, transparent 2px); 
-      background-size: 10px 2em;
-      background-position-y: 1.75rem;
-      margin: 0 2rem 2rem;
-      padding: 2rem;
-      line-height: 2em;
+      background-image: linear-gradient(to right, var(--bg-0) 5px, transparent 2px),  linear-gradient(var(--bg-4) 2px, transparent 2px); 
+      background-size: 10px 1lh;
+      background-position-y: 1.9lh;
+      margin: 0 1rem 2rem;
+      padding: 2rem 1rem 0;
+      line-height: 2;
       margin-trim: block;
 
       p { margin-block: 1lh; }
@@ -250,26 +327,26 @@ const { title, date, currently } = Astro.props;
     }
 
     aside {
-      border-top: 2px solid #88aabb;
+      border-top: 2px solid var(--border-3);
 
       dl {
         display: flex;
         align-items: center;
         padding: 2px 6px;
-        border-bottom: 2px solid #88aabb;
+        border-bottom: 2px solid var(--border-3);
 
         dt { 
-          background-color: #eeeeff;
+          background-color: var(--bg-2);
           padding: 4px 6px;
         }
 
         dd {
-          background-color: #ddddee;
+          background-color: var(--bg-4);
           padding: 4px 6px;
           flex: 1;
         }
 
-        &:first-child > dt ~ dd { padding: 0; }
+        &:first-child > dt ~ dd { padding: 0 6px; }
         &:last-child { border: none; }
       }
     }
diff --git a/src/layouts/Chapter.astro b/src/layouts/Chapter.astro
index 4294ae8..3fa77a7 100644
--- a/src/layouts/Chapter.astro
+++ b/src/layouts/Chapter.astro
@@ -1,7 +1,7 @@
 ---
-import Layout from "./Layout.astro";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
+import Layout from "./Layout.astro";
 
 interface Props {
   title: string;
@@ -28,10 +28,12 @@ dayjs.extend(utc);
         </time>
       )}
       {notes && (
-        <blockquote><Fragment set:html={notes.split("\n").join("<br />")} /></blockquote>
+        <blockquote>
+          <Fragment set:html={notes.split("\n").join("<br />")} />
+        </blockquote>
       )}
     </header>
-    
+
     <article>
       <slot />
     </article>
@@ -42,16 +44,24 @@ dayjs.extend(utc);
 
 <style>
   main {
-    max-width: 80ch;
+    display: grid;
+    place-content: center;
     margin: 1rem auto 2rem;
+
+    @media screen and (max-width: 1000px) {
+      margin: 1rem 1rem 2rem;
+    }
   }
   
-  article, blockquote { font-family: var(--serif-font); }
+  article, blockquote {
+    max-width: 80ch;
+    font-family: var(--serif-font);
+  }
 
   header {
     blockquote {
       margin: 1rem;
-      font-size: 1.125rem;
+      font-size: calc(35px / 2);
 
       &::before {
         display: block;
@@ -60,13 +70,17 @@ dayjs.extend(utc);
         line-height: 1;
         alt: "Author's Notes:";
       }
-    } 
+    }
+
+    @media screen and (max-width: 800px) {
+      time { font-size: calc(1rem - 1px); }
+    }
   }
 
   article {
     margin: 1rem 0;
     font-size: 1.25rem;
-    line-height: 1.5;
+    line-height: 1.75;
     margin-trim: block;
 
     p { margin-block: 1lh; }
diff --git a/src/pages/blog/[...id].astro b/src/pages/blog/[...id].astro
index 685286b..417295f 100644
--- a/src/pages/blog/[...id].astro
+++ b/src/pages/blog/[...id].astro
@@ -39,6 +39,7 @@ const next = current === 0 ? undefined : blog[current - 1];
 <style>
   #blog-pagination {
     display: grid;
+    grid-column: 1 / -1;
     grid-template-columns: repeat(2, 1fr);
 
     #previous {
@@ -50,5 +51,14 @@ const next = current === 0 ? undefined : blog[current - 1];
       grid-column: 2 / -1;
       justify-self: right;
     }
+
+    a {
+      /* display: block; */
+      padding: 5px;
+      color: var(--bg-0);
+      text-decoration: none;
+      background: linear-gradient(to top, #4499cc, #113366);
+      border: 2px solid #112244;
+    }
   }
 </style>
\ No newline at end of file
diff --git a/src/pages/fics/[ficId]/[...chapterId].astro b/src/pages/fics/[ficId]/[...chapterId].astro
index 6d3080c..6170536 100644
--- a/src/pages/fics/[ficId]/[...chapterId].astro
+++ b/src/pages/fics/[ficId]/[...chapterId].astro
@@ -87,9 +87,14 @@ const links = [
 
       .c-breadcrumbs__separator { opacity: 0.5; }
       a[aria-current="location"] {
-        color: aqua;
+        color: hsl(from var(--accent-color) h calc(s - 10) calc(l / 1.75));
+        font-weight: bold;
       }
     }
+
+    @media screen and (max-width: 600px) {
+      font-size: calc(1rem - 1px);
+    }
   }
 
   #chapter-pagination {
@@ -104,10 +109,12 @@ const links = [
     }
 
     #chapter-select {
-      background-color: black;
-      color: white;
-      border: none;
+      background-color: var(--bg-color);
+      color: var(--fg-color);
+      border: 2px solid var(--fg-color);
       padding: 0.25rem 0.5rem;
+      
+      &:hover { background-color: hsl(from var(--bg-color) h s calc(l - 10)); }
     }
 
     #previous {
diff --git a/src/pages/guestbook.astro b/src/pages/guestbook.astro
index 9808884..578da51 100644
--- a/src/pages/guestbook.astro
+++ b/src/pages/guestbook.astro
@@ -1,10 +1,14 @@
 ---
 import { actions, isInputError } from "astro:actions";
 import { db, Guestbook as table } from "astro:db";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
 import Layout from "@/layouts/Layout.astro";
+import ThemeSwitch from "@/components/ThemeSwitch.astro";
 
 export const prerender = false;
 
+dayjs.extend(utc);
 const result = Astro.getActionResult(actions.guestbook);
 const errors = isInputError(result?.error) ? result.error.fields : {};
 const entries = await db.select().from(table);
@@ -12,6 +16,7 @@ entries.sort((a, b) => b.date.valueOf() - a.date.valueOf());
 ---
 
 <Layout>
+  <ThemeSwitch />
   <main>
     <h1>Guestbook</h1>
 
@@ -38,7 +43,7 @@ entries.sort((a, b) => b.date.valueOf() - a.date.valueOf());
       <article class="entry">
         <h1>{username}</h1>
         {website && <p><a href={website} target="_blank" referrerpolicy="no-referrer">website</a></p>}
-        <time datetime={date.toISOString()}>{date}</time>
+        <time datetime={dayjs(date).utc(true).toISOString()}>{dayjs(date).utc(true).format("MMMM DD, YYYY")}</time>
         <div>
           {body}
         </div>
@@ -48,12 +53,33 @@ entries.sort((a, b) => b.date.valueOf() - a.date.valueOf());
 </Layout>
 
 <style>
+  main {
+    max-width: clamp(75ch, 80ch, 100%);
+    margin: 1rem auto;
+
+    article {
+      max-width: calc(80ch + 2rem);
+      padding: 1rem;
+    }
+
+    @media screen and (max-width: 1000px) {
+      max-width: 100%;
+      margin: 1rem;
+
+      article {
+        max-width: 100%;
+        padding: 0.5rem;
+      }
+    }
+  }
+
   form {
     display: flex;
     flex-flow: column wrap;
     
     input, textarea {
       margin-bottom: 1rem;
+      padding: 2px 6px;
     }
   }
 </style>
\ No newline at end of file
diff --git a/last-modified.mjs b/src/utils/last-modified.mjs
similarity index 100%
rename from last-modified.mjs
rename to src/utils/last-modified.mjs