fix some stuff with fics loader

public/.well-known/atproto-did

@@ -0,0 +1 @@
+did:plc:dg2qmmjic7mmecrbvpuhtvh6

src/content/fics/phai/_test.yaml

@@ -1,9 +0,0 @@
-title: truly
-series: honkai
-publishedAt: 2021-05-20
-summary: 
-  this is crazy but...
-
-  but would you
-
-  > trust me?

src/content/fics/phai/chap.md

@@ -1,11 +0,0 @@
----
-title: take me on
-publishedAt: 2025-01-05
-notes: hahah
----
-
-dksafjasldkjfksdl
-kjfdlskafjaslk
-k
-
-ss sddd

src/content/fics/test/_index.toml

@@ -1,9 +0,0 @@
-title = "this is a test"
-series = [
-  "test",
-  "fandom 2"
-]
-publishedAt = 2022-12-22
-summary = """
-  yeller
-  """

src/content/fics/test/test.md

@@ -1,10 +0,0 @@
----
-title: ch 1
-publishedAt: 2022-11-01
-notes: i wrote this in a fugue state while listening to [Waste by Oh Wonder](https://www.youtube.com/watch?v=Ar1grAdGkec)
-sortOrder: 1
----
-
-test
-
-two

src/content/fics/test/two.md

@@ -1,13 +0,0 @@
----
-title: chapter 2
-publishedAt: 2023-12-12
-notes: i wrote this in a fugue state while listening to [Waste by Oh Wonder](https://www.youtube.com/watch?v=Ar1grAdGkec)
-sortOrder: 2
----
-
-tksdfalkjflkd
-kasdjfldk
-k
-
-
-kdsafsd

src/content/fics/weight of living/moving on.md

@@ -4,8 +4,6 @@ publishedAt: 2020-12-20T19:18:00
 notes: i wrote this in a fugue state while listening to [Waste by Oh Wonder](https://www.youtube.com/watch?v=Ar1grAdGkec)
 ---
 
-![the of all time]($/images/the-of-all-time.png)
-
  
 
  

src/layouts/Blog.astro

@@ -6,10 +6,6 @@ import Navbar from "~/Navbar.astro";
 import formatDate from "@/utils/formatDate";
 import moods from "@/utils/moods";
 
-import outerBBS from "$/guild-bbs.png";
-import innerBBS from "$/guild-bbs-content.png";
-import sideBBS from "$/guild-bbs-list.png";
-
 interface Props {
   id?: string;
   title: string;
@@ -31,54 +27,14 @@ blog.sort((a, b) => b.data.pubDate!.valueOf() - a.data.pubDate!.valueOf());
 ---
 <Layout {title}>
   <Fragment slot="head">
-    <link rel="preload" href={outerBBS.src} as="image" />
-    <link rel="preload" href={innerBBS.src} as="image" />
-    <link rel="preload" href={sideBBS.src} as="image" />
-    <Font cssVariable="--arial" preload />
-    <Font cssVariable="--dotumche-11" preload />
-    <Font cssVariable="--dotumche-12" preload />
-    <Font cssVariable="--dotum-11" preload />
-    <Font cssVariable="--dotum-12" preload />
     <slot name="head" />
   </Fragment>
   <Navbar />
 
   <main>
-    <nav id="blog-links">
-      <div class="inner">
-        <div class="nav-section">
-          <h1><span class="title">recent posts</span></h1>
-          <ul>
-            {blog.map(entry => (
-              <li>
-                <span class="item">
-                  <a href={`/blog/${entry.id}`} class="entry-title" aria-labelledby={entry.id}>
-                    <span style="display: none">{entry.data.title}</span>
-                  </a>
-                  <span id={entry.id} class="link" aria-hidden="true">{entry.data.title}</span>
-                  <time datetime={formatDate(entry.data.pubDate!, true)}>
-                    {formatDate(entry.data.pubDate!, false, "MM/DD/YY")}
-                  </time>
-                </span>
-              </li>
-            ))}
-          </ul>
-        </div>
-        <div class="nav-section">
-          <h1><span class="title">other links</span></h1>
-          <ul>
-            <li><span class="item"><a href="/blog" class="link">archive</a></span></li>
-            <li><span class="item"><a href="/blog/rss.xml" class="link">rss feed</a></span></li>
-          </ul>
-        </div>
-      </div>
-    </nav>
-
     <article id={id}>
-      <div class="inner">
       <header>
         <h1>{title}</h1>
-          <hr />
         <div class="info">
           <time datetime={formatDate(date, true)}>
             <span class="title">Date</span>
@@ -129,337 +85,38 @@ blog.sort((a, b) => b.data.pubDate!.valueOf() - a.data.pubDate!.valueOf());
           )}
         </aside>
       )}
-      </div>
     </article>
+
     <slot name="pagination" />
+
+    <nav id="blog-links">
+      <div class="inner">
+        <div class="nav-section">
+          <h2>recent posts</h2>
+          <ul>
+            {blog.map(entry => (
+              <li>
+                <a href={`/blog/${entry.id}`} class="entry-title" aria-labelledby={entry.id}>
+                  {entry.data.title}
+                </a>
+                <time datetime={formatDate(entry.data.pubDate!, true)}>
+                  {formatDate(entry.data.pubDate!, false, "MM/DD/YY")}
+                </time>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div class="nav-section">
+          <h2>other links</h2>
+          <ul>
+            <li><a href="/blog" class="link">archive</a></li>
+            <li><a href="/blog/rss.xml" class="link">rss feed</a></li>
+          </ul>
+        </div>
+      </div>
+    </nav>
   </main>
 </Layout>
 
-<style define:vars={{ outerBorder: `url(${outerBBS.src})`, innerBorder: `url(${innerBBS.src})`, sideBorder: `url(${sideBBS.src})` }}>
+<style>
-  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: #334466;
-    --border-2: #6699aa;
-    --border-3: #7799bb;
-    --border-4: #88aabb;
-    --border-5: #99bbcc;
-    --border-6: #bbccdd;
-    --normal-color: #335577;
-    --active-color: #aa0033;
-    --active-border: #442266;
-    color: #000;
-  }
-  
-  h1 { font: bold 1rem var(--arial-font); }
-  h2 {
-    font: normal 1.5rem var(--dotum-12-font);
-    text-transform: uppercase;
-  }
-  main {
-    font: 1rem var(--arial-font);
-    letter-spacing: 1px;
-    display: grid;
-    grid-template-columns: auto minmax(auto, 75ch);
-    justify-content: center;
-
-    @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 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: 16px 6px;
-      margin: 18px 20px 16px;
-      border: 2px solid var(--border-6);
-    }
-
-    h1 {
-      padding: 6px 2px;
-      border-block: 2px solid var(--border-3);
-
-      .title {
-        display: block;
-        background-color: var(--bg-8);
-        color: var(--bg-0);
-        font-weight: normal;
-        text-transform: uppercase;
-        padding: 5px 2px;
-        text-align: center;
-      }
-    }
-
-    ul {
-      display: flex;
-      flex-flow: column wrap;
-      list-style: none;
-      padding: 0;
-
-      li {
-        padding: 4px 2px;
-        border-bottom: 2px solid var(--bg-4);
-        max-width: 100%;
-
-        .item {
-          position: relative;
-          font: normal 1.375rem var(--dotum-11-font);
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          
-          a {
-            &.entry-title {
-              position: absolute;
-              display: block;
-              top: 0;
-              left: 0;
-              width: 100%;
-              height: 100%;
-
-              ~ .link {
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                max-width: 19ch;
-
-                @media screen and (max-width: 76em) {
-                  max-width: unset;
-                }
-              }
-            }
-          }
-
-          .link {
-            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 {
-            .link { background-color: var(--bg-7); }
-            time { background-color: var(--border-6); }
-          }
-        }
-        &:last-child { border: none; }
-      }
-    }
-
-    .nav-section {
-      background-color: var(--bg-0);
-      max-width: 100%;
-
-      &:last-child { 
-        border-bottom: 2px solid var(--border-2);
-      }
-    }
-
-    @media screen and (max-width: 76em) {
-      margin-bottom: -2px;
-    }
-  }
-  
-  article {
-    display: flex;
-    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 {
-      display: flex;
-      flex-direction: column;
-      border: 2px solid var(--border-2);
-      border-image: var(--innerBorder) 3 2 2 fill / 6px 4px 4px;
-      margin: 14px 4px 8px;
-      padding: 4px 2px 2px;
-      background-color: var(--bg-0);
-    }
-
-    .title {
-      display: grid;
-      place-content: center;
-      font: normal 1.5em var(--dotum-12-font);
-      background-color: var(--bg-2);
-      padding: 2px 6px;
-    }
-
-    .desc {
-      background-color: var(--bg-4);
-      padding: 4px 6px;
-      flex: 1;
-    }
-
-    header {
-      border-bottom: 2px solid var(--bg-6);
-
-      h1 {
-        text-align: center;
-        margin: 6px 2px;
-        padding: 2px 0;
-        background-color: var(--border-6);
-      }
-
-      .info {
-        display: flex;
-        align-items: baseline;
-        gap: 2px;
-        border-style: solid;
-        border-width: 2px;
-        border-color: var(--bg-2) var(--bg-2) var(--bg-1) var(--bg-1);
-        padding: 2px 4px;
-
-        time {
-          display: flex;
-          width: 100%;
-          align-items: stretch;
-        }
-      }
-
-      hr {
-        background-color: var(--border-5);
-        border: none;
-        height: 2px;
-      }
-    }
-
-    .content {
-      /* position: relative; */
-      flex: 1;
-      background-attachment: local;
-      background-image: linear-gradient(to right, var(--bg-0) 5px, transparent 2px), linear-gradient(var(--bg-4) 2px, transparent 2px); 
-      background-size: 10px 2em;
-      background-position-y: calc(2em - 2px);
-      margin: 2rem 1rem;
-      padding: 0 1rem;
-      line-height: 2;
-      max-height: 38em;
-      overflow-y: auto;
-      margin-trim: block;
-
-      p {
-        margin-block: 2em;
-
-        &:has(> img) {
-          margin-block: 0;
-        }
-      }
-      a, del, s { text-decoration-thickness: 2px; }
-      a {
-        color: var(--normal-color);
-
-        &:visited {
-          color: var(--active-border);
-        }
-        &:hover {
-          color: var(--active-color);
-        }
-        &:active, &:focus {
-          color: var(--normal-color);
-        }
-      }
-
-      figure {
-        border: 2px solid var(--border-5);
-        border-image: var(--innerBorder) 3 2 2 fill / 6px 4px 4px;
-        padding: 4px 2px 2px;
-        background-color: var(--bg-0);
-        width: max-content;
-        margin: 0 auto;
-
-        img {
-          min-height: 2em;
-          border-bottom: 2px solid var(--border-3);
-        }
-
-        figcaption {
-          font-family: var(--dotum-11-font);
-          font-size: calc(1em + 2px);
-          color: var(--border-1);
-          background-color: var(--bg-3);
-          margin: 4px;
-          padding: 0 6px;
-          text-align: center;
-        }
-      }
-      
-      @supports not (margin-trim: block) {
-        p:first-child { margin-block-start: 0; }
-        p:last-child { margin-block-end: 0; }
-      }
-
-      @media screen and (max-width: 950px) {
-        background-position-y: 0.8rem;
-        padding: 1rem;
-        margin: 0.25rem 0;
-      }
-    }
-
-    aside {
-      display: grid;
-      grid-template-columns: auto 1fr;
-      grid-template-rows: repeat(4, auto);
-      border-top: 2px solid var(--border-4);
-
-      h2 {
-        display: grid;
-        place-content: center;
-        grid-area: 1 / 1 / -1;
-        padding: 0 4px 0 8px;
-        height: 100%;
-        border-top: 2px solid var(--border-1);
-        border-right: 2px solid var(--border-4);
-        background-color: var(--bg-7);
-      }
-
-      dl {
-        display: flex;
-        align-items: center;
-        padding: 2px 6px;
-        border-bottom: 2px solid var(--border-4);
-        border-top: 2px solid var(--border-1);
-        border-left: 2px solid var(--border-1);
-
-        &:first-of-type > dd {
-          display: flex;
-          align-items: center;
-          gap: 6px;
-          margin: -2px;
-          padding: 0 6px;
-        }
-        &:last-child { border-bottom: none; }
-      }
-    }
-  }
 </style>

src/pages/blog/[...id].astro

@@ -2,7 +2,6 @@
 import Blog from '@/layouts/Blog.astro';
 import type { GetStaticPaths } from 'astro';
 import { getCollection, render } from 'astro:content';
-import buttons from "$/guild-bbs-buttons.png";
 
 export const getStaticPaths = (async () => {
   const blog = await getCollection("blog");
@@ -24,7 +23,6 @@ const next = current === 0 ? undefined : blog[current - 1];
 <Blog id={entry.id} title={entry.data.title!} date={entry.data.pubDate!} currently={entry.data.currently}>
   <Fragment slot="head">
     <meta name="description" content={entry.body?.substring(0, 150) + "…"} />
-    <link rel="preload" href={buttons.src} as="image" />
   </Fragment>
 
   <Content />
@@ -33,116 +31,15 @@ const next = current === 0 ? undefined : blog[current - 1];
     <footer id="blog-pagination" slot="pagination">
       {previous && (
         <a id="previous" aria-label="go to previous post" href={`/blog/${previous.id}`}>
-          <div class="arrow" />
-          <div class="title">
          <span>{previous.data.title}</span>
-          </div>
         </a>
       )}
 
       {next && (
         <a id="next" aria-label="go to next post" href={`/blog/${next.id}`}>
-          <div class="title">
           <span>{next.data.title}</span>
-          </div>
-          <div class="arrow" />
         </a>
       )}
     </footer>
   )}
 </Blog>
-
-<style define:vars={{ buttons: `url(${buttons.src})` }}>
-  #blog-pagination {
-    margin: 1rem 0;
-    display: grid;
-    grid-column: 1 / -1;
-    grid-template-columns: repeat(2, 1fr);
-
-    .arrow {
-      width: 36px;
-      height: 50px;
-      background: var(--buttons) no-repeat top left;
-    }
-
-    #previous {
-      grid-column: 1 / 2;
-      justify-self: left;
-      
-      .arrow { background-position: 0 0; }
-      &:hover .arrow { background-position: -36px 0; }
-      &:active .arrow, &:focus .arrow { background-position: -72px 0; }
-
-      .title {
-        border-left: none;
-        margin-left: -2px;
-        padding-left: calc(0.5em + 2px);
-      }
-    }
-    
-    #next {
-      grid-column: 2 / -1;
-      justify-self: right;
-
-      .arrow { background-position: -108px 0; }
-      &:hover .arrow { background-position: -144px 0; }
-      &:active .arrow, &:focus .arrow { background-position: -180px 0; }
-
-      .title {
-        position: relative;
-        z-index: 1;
-        border-right: none;
-        margin-right: -2px;
-        padding-right: calc(0.5em + 2px);
-      }
-    }
-
-    a {
-      display: flex;
-      flex-flow: row wrap;
-      align-items: stretch;
-      font: normal 1.5rem var(--dotum-12-font);
-      color: var(--normal-color);
-      text-decoration: none;
-
-      .title {
-        display: grid;
-        place-content: center;
-        padding: 0 0.5em;
-        background-color: var(--bg-7);
-        border: 2px solid var(--border-1);
-        box-shadow: 
-          inset 2px 2px 0 0 var(--bg-0),
-          inset 4px 4px 0 0 var(--bg-5),
-          inset -2px -2px 0 0 var(--border-5),
-          inset -4px -4px 0 0 var(--border-6);
-        
-        @media screen and (468px > width) {
-          > span {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            max-width: calc(12ch + 1em);
-          }
-        }
-      }
-
-      &:hover {
-        color: var(--active-color);
-        .title { border-color: var(--active-border); }
-      }
-
-      &:active, &:focus {
-        color: var(--normal-color);
-        .title {
-          border-color: var(--border-1);
-          box-shadow: 
-            inset -2px -2px 0 0 var(--bg-0),
-            inset -4px -4px 0 0 var(--bg-5),
-            inset 2px 2px 0 0 var(--border-5),
-            inset 4px 4px 0 0 var(--border-6);
-        }
-      }
-    }
-  }
-</style>

src/pages/blog/index.astro

@@ -1,6 +1,5 @@
 ---
 import Layout from "@/layouts/Layout.astro";
-import Figure from "~/Figure.astro";
 import formatDate from "@/utils/formatDate";
 import { getCollection } from "astro:content";
 import dayjs from "dayjs";

src/pages/fics/[ficId]/index.astro

@@ -59,14 +59,14 @@ const notes = fic.rendered && await parser.parse((fic.rendered.metadata!.frontma
         </dl>
         
         <div class="links">
-          {fic.data.chapters && <>
+          {chapters && <>
-            <a class="button" href={`/fics/${chapters[0].id}`}>start reading</a>
+            {/* <a class="button" href={`/fics/${chapters[0].id}`}>start reading</a> */}
             <a class="button" href={`/fics/${Astro.params.ficId}/rss.xml`}>rss feed</a>
           </>}
         </div>
       </header>
       
-      {fic.data.chapters && (
+      {chapters && (
         <h2>chapters</h2>
         <ul>
           {chapters.map(chapter => (
@@ -75,7 +75,6 @@ const notes = fic.rendered && await parser.parse((fic.rendered.metadata!.frontma
         </ul>
       )}
     </section>
-
     {fic.body && (
       <section id="oneshot">
         <ChapterContent lastModified={lastMod} notes={notes}>

src/pages/index.astro

@@ -1,21 +1,24 @@
 ---
+import { Font } from 'astro:assets';
 import Layout from '@/layouts/Layout.astro';
 import Navbar from '~/Navbar.astro';
 
-import bulletin from "$/acnl-bulletin.png";
+import outerBBS from "$/guild-bbs.png";
+import innerBBS from "$/guild-bbs-content.png";
+import sideBBS from "$/guild-bbs-list.png";
+import buttons from "$/guild-bbs-buttons.png";
 ---
 <Layout>
+  <Fragment slot="head">
+    <link rel="preload" href={outerBBS.src} as="image" />
+    <link rel="preload" href={innerBBS.src} as="image" />
+    <link rel="preload" href={sideBBS.src} as="image" />
+    <link rel="preload" href={buttons.src} as="image" />
+    <Font cssVariable="--arial" preload />
+  </Fragment>
+
   <Navbar />
   <main>
-    <section id="welcome">
-      <div class="card">
-        <h1>welcome!</h1>
-        <article>
-          this is 
-        </article>
-      </div>
-    </section>
-
     <section id="updates">
       <article class="update card">
         <h1>update title</h1>
@@ -24,6 +27,26 @@ import bulletin from "$/acnl-bulletin.png";
           <p>some stuff happened</p>
         </div>
       </article>
+
+      <footer id="updates-pagination">
+        <a id="previous" aria-label="go to previous post" href="javascript:void(0)">
+          <div class="arrow" />
+          <div class="title">prev</div>
+        </a>
+        <a id="next" aria-label="go to next post" href="javascript:void(0)">
+          <div class="title">next</div>
+          <div class="arrow" />
+        </a>
+      </footer>
+    </section>
+
+    <section id="welcome">
+      <div class="card">
+        <h1>welcome!</h1>
+        <article>
+          this is 
+        </article>
+      </div>
     </section>
 
     <section id="wall">
@@ -36,76 +59,146 @@ import bulletin from "$/acnl-bulletin.png";
   </main>
 </Layout>
 
-<style define:vars={{ bulletin: `url(${bulletin.src})` }}>
+<style define:vars={{ outerBorder: `url(${outerBBS.src})`, innerBorder: `url(${innerBBS.src})`, sideBorder: `url(${sideBBS.src})`, buttons: `url(${buttons.src})` }}>
-  body {
+  main {
-    --acnl-border: #ac6835;
+    image-rendering: pixelated;
-    --acnl-bg: #8c5321;
+    --bg-0: #fff;
-    --card-border-1: #ffd53c;
+    --bg-1: #eeffff;
-    --card-border-2: #5acbbd;
+    --bg-2: #eeeeff;
-    --card-bg: white;
+    --bg-3: #eee;
+    --bg-4: #ddddee;
+    --bg-5: #ddeeee;
+    --bg-6: #ccccdd;
+    --bg-7: #ccddee;
+    --bg-8: #8888bb;
+    --border-0: #000;
+    --border-1: #334466;
+    --border-2: #6699aa;
+    --border-3: #7799bb;
+    --border-4: #88aabb;
+    --border-5: #99bbcc;
+    --border-6: #bbccdd;
+    --normal-color: #335577;
+    --active-color: #aa0033;
+    --active-border: #442266;
+    color: #000;
+
+    font: 1rem var(--arial-font);
+    letter-spacing: 1px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    margin: 1em;
   }
 
-  main {
+  h1 { font: bold 1rem var(--arial-font); }
+
+  /* UPDATES */
+  #updates {
+    border-image: var(--sideBorder) 22 9 40 8 fill / 44px 18px 80px 16px;
+    padding: 44px 18px 80px 16px;
+    margin-right: -2px;
+  }
+
+  #updates-pagination {
+    margin: 1rem 0;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    justify-content: center;
-    gap: 1rem;
-    max-width: 50em;
-    margin: 0 auto;
 
-    @media screen and (max-width: 1360px) {
+    .arrow {
-      margin: 0 1rem;
+      width: 36px;
+      height: 50px;
+      background: var(--buttons) no-repeat top left;
     }
 
-    @media screen and (max-width: 76em) {
+    #previous {
-      grid-template-columns: 1fr;
+      grid-column: 1 / 2;
+      justify-self: left;
+      
+      .arrow { background-position: 0 0; }
+      &:hover .arrow { background-position: -36px 0; }
+      &:active .arrow, &:focus .arrow { background-position: -72px 0; }
+
+      .title {
+        border-left: none;
+        margin-left: -2px;
+        padding-left: calc(0.5em + 2px);
       }
     }
     
-  h1 { font-size: 2rem; }
+    #next {
+      grid-column: 2 / -1;
+      justify-self: right;
 
-  .board {
+      .arrow { background-position: -108px 0; }
-    image-rendering: pixelated;
+      &:hover .arrow { background-position: -144px 0; }
-    border: 2px solid var(--acnl-border);
+      &:active .arrow, &:focus .arrow { background-position: -180px 0; }
-    background-color: transparent;
-    border-image: var(--bulletin) 42 30 30 fill / 42px 30px 30px;
-    padding: 42px 30px 30px;
-  }
 
-  .card {
+      .title {
-    border: 6px solid black;
+        position: relative;
-    background-color: var(--card-bg);
+        z-index: 1;
-    box-shadow: inset 0 0 0 4px var(--card-bg), inset 0 0 0 6px black;
+        border-right: none;
-    padding: calc(1rem + 4px);
+        margin-right: -2px;
-
+        padding-right: calc(0.5em + 2px);
-    h1 {
-      padding-bottom: 2px;
-      border-bottom: 2px solid black;
-      text-align: center;
-      margin-bottom: 1rem;
       }
     }
 
+    a {
+      display: flex;
+      flex-flow: row wrap;
+      align-items: stretch;
+      color: var(--normal-color);
+      text-decoration: none;
+
+      .title {
+        display: grid;
+        place-content: center;
+        padding: 0 0.5em;
+        background-color: var(--bg-7);
+        border: 2px solid var(--border-1);
+        box-shadow: 
+          inset 2px 2px 0 0 var(--bg-0),
+          inset 4px 4px 0 0 var(--bg-5),
+          inset -2px -2px 0 0 var(--border-5),
+          inset -4px -4px 0 0 var(--border-6);
+        
+        @media screen and (468px > width) {
+          > span {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: calc(12ch + 1em);
+          }
+        }
+      }
+
+      &:hover {
+        color: var(--active-color);
+        .title { border-color: var(--active-border); }
+      }
+
+      &:active, &:focus {
+        color: var(--normal-color);
+        .title {
+          border-color: var(--border-1);
+          box-shadow: 
+            inset -2px -2px 0 0 var(--bg-0),
+            inset -4px -4px 0 0 var(--bg-5),
+            inset 2px 2px 0 0 var(--border-5),
+            inset 4px 4px 0 0 var(--border-6);
+        }
+      }
+    }
+  }
+
+  /* WELCOME */
   #welcome {
-    .card {
+    border-image: var(--outerBorder) 20 9 39 11 fill / 40px 18px 78px 22px;
-      border-color: var(--card-border-1);
+    padding: 40px 18px 78px 22px;
-      box-shadow: inset 0 0 0 4px var(--card-bg), inset 0 0 0 6px var(--card-border-1);
-      height: 100%;
-
-      h1 { border-bottom-color: var(--card-border-1); }
-    }
   }
 
-  #updates {
+  /* INNER BORDERS */
-    .card {
+  .inner {
-      border-color: var(--card-border-2);
+    border-image: var(--innerBorder) 3 2 2 2 fill / 6px 4px 4px;
-      box-shadow: inset 0 0 0 4px var(--card-bg), inset 0 0 0 6px var(--card-border-2);
+    padding: 6px 4px 4px;
-
-      h1 { border-bottom-color: var(--card-border-2); }
-    }
-  }
-
-  #wall {
-    grid-column: 1 / -1;
   }
 </style>

src/utils/loader.ts

@@ -81,7 +81,10 @@ async function getAllChapters(metaPath: string) {
   const ficFolder = fic.split("/").at(-1);
   const entries = await Array.fromAsync(glob(fic + '/*.md'));
   const chapters = entries.map(chapter => path.relative(fic, chapter));
-  return chapters.map(chapter => `${ficFolder}/${chapter}`);
+  return chapters.map(chapter => {
+    const chapterWithoutExt = path.parse(chapter).name; // needed for loader to properly grab ids
+    return `${ficFolder}/${chapterWithoutExt}`;
+  });
 }
 
 // unused for now