fix up blog + fic layouts

src/layouts/Blog.astro

@@ -75,7 +75,7 @@ dayjs.extend(utc);
             </div>
           </header>
 
-          <div class="content">
+          <div class="content" data-simplebar>
             <slot />
           </div>
 
@@ -143,6 +143,7 @@ dayjs.extend(utc);
     --border-4: #88aabb;
     --border-5: #99bbcc;
     --border-6: #bbccdd;
+    color: #000;
   }
   h1 { font: bold 1rem var(--arial-font); }
   h2 {
@@ -315,12 +316,15 @@ dayjs.extend(utc);
 
     .content {
       position: relative;
+      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 1lh;
-      background-position-y: 1.9lh;
+      background-position-y: calc(2lh - 2px);
-      margin: 0 1rem 2rem;
+      margin: 2rem 1rem;
-      padding: 2rem 1rem 0;
+      padding: 0 1rem;
       line-height: 2;
+      max-height: 38em;
+      overflow-y: auto;
       margin-trim: block;
 
       p { margin-block: 1lh; }
@@ -347,8 +351,7 @@ dayjs.extend(utc);
         display: grid;
         place-content: center;
         grid-area: 1 / 1 / -1;
-        padding-top: -2px;
+        padding: 0 4px 0 8px;
-        padding-left: 2px;
         height: 100%;
         border-top: 2px solid var(--border-1);
         border-right: 2px solid var(--border-4);

src/layouts/Chapter.astro

@@ -7,7 +7,7 @@ interface Props {
   title: string;
   ficTitle: string;
   date: Date;
-  notes?: any;
+  notes?: string;
   lastModified?: Date;
 }
 

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

@@ -2,6 +2,12 @@
 import Blog from '@/layouts/Blog.astro';
 import type { GetStaticPaths } from 'astro';
 import { getCollection, render } from 'astro:content';
+import leftNormal from "@/assets/left-normal.png";
+import leftHover from "@/assets/left-hover.png";
+import leftActive from "@/assets/left-active.png";
+import rightNormal from "@/assets/right-normal.png";
+import rightHover from "@/assets/right-hover.png";
+import rightActive from "@/assets/right-active.png";
 
 export const getStaticPaths = (async () => {
   const blog = await getCollection("blog");
@@ -26,39 +32,58 @@ const next = current === 0 ? undefined : blog[current - 1];
   {(previous || next) && (
     <div id="blog-pagination" slot="pagination">
       {previous && (
-        <a id="previous" aria-label="previous post" href={`/blog/${previous.id}`}>{previous.data.title}</a>
+        <a id="previous" aria-label="previous post" href={`/blog/${previous.id}`}>
+          <img class="arrow" src={leftNormal.src} alt="" />
+          {previous.data.title}
+        </a>
       )}
 
       {next && (
-        <a id="next" aria-label="next post" href={`/blog/${next.id}`}>{next.data.title}</a>
+        <a id="next" aria-label="next post" href={`/blog/${next.id}`}>
+          {next.data.title}
+          <img class="arrow" src={rightNormal.src} alt="" />
+        </a>
       )}
     </div>
   )}
 </Blog>
 
-<style>
+<style define:vars={{ leftNormal: `url(${leftNormal.src})`, leftHover: `url(${leftHover.src})`, leftActive: `url(${leftActive.src})`, rightNormal: `url(${rightNormal.src})`, rightHover: `url(${rightHover.src})`, rightActive: `url(${rightActive.src})` }}>
   #blog-pagination {
     display: grid;
     grid-column: 1 / -1;
     grid-template-columns: repeat(2, 1fr);
 
+    .arrow {
+      width: 36px;
+      height: 50px;
+    }
+
     #previous {
       grid-column: 1 / 2;
       justify-self: left;
+      
+      .arrow { content: var(--leftNormal) var(--leftHover) var(--leftActive); }
+      &:hover .arrow { content: var(--leftHover); }
+      &:active .arrow, &:focus .arrow { content: var(--leftActive); }
     }
     
     #next {
       grid-column: 2 / -1;
       justify-self: right;
+
+      .arrow { content: var(--rightNormal) var(--rightHover) var(--rightActive); }
+      &:hover .arrow { content: var(--rightHover); }
+      &:active .arrow, &:focus .arrow { content: var(--rightActive); }
     }
 
     a {
-      /* display: block; */
+      display: flex;
-      padding: 5px;
+      flex-flow: row wrap;
+      align-items: center;
+      gap: 2px;
       color: var(--bg-0);
       text-decoration: none;
-      background: linear-gradient(to top, #4499cc, #113366);
-      border: 2px solid #112244;
     }
   }
 </style>

src/pages/blog/rss.xml.ts

@@ -18,6 +18,5 @@ export const GET: APIRoute = async (context) => {
       }),
       ...entry.data,
     })),
-    stylesheet: "/pretty-feed-v3.xsl",
   });
 }

src/pages/fics/[ficId]/rss.xml.ts

@@ -27,7 +27,6 @@ export const GET: APIRoute = async (context) => {
       }),
       categories: fic?.data.series.concat(fic.data.title),
     })),
-    stylesheet: "/pretty-feed-v3.xsl",
   });
 };