styling adjustments

Author: marvin-j97

src/components/Footer.astro

@@ -5,7 +5,7 @@ import config from "../config";
 <footer class="flex flex-col gap-5 py-10 mx-auto max-w-3xl w-full">
   <!-- TODO: move into a fixed FAB button, outside of footer -->
   <div class="text-right">
-    <button onclick="scrollToTop()">Back to top</button>
+    <button class="hover:opacity-80 transition-opacity" onclick="scrollToTop()">Back to top</button>
   </div>
   <div class="text-center">
     &copy; {new Date().getFullYear()}

src/components/LandingPage.astro

@@ -21,13 +21,13 @@ const cards = [
     },
   },
   {
-    name: "value-log",
-    repo: "https://github.com/fjall-rs/value-log",
-    description: "Log-structured value log for key-value separated storage",
+    name: "sfa",
+    repo: "https://github.com/fjall-rs/sfa",
+    description: "Minimal, flat file archive encoding/decoding library",
     license: "MIT / Apache",
     colors: {
-      title: "text-pink-700 dark:text-pink-300",
-      card: "hover:border-pink-500 hover:bg-pink-500",
+      title: "text-amber-700 dark:text-amber-300",
+      card: "hover:border-amber-500 hover:bg-amber-500",
     },
   },
   {
@@ -57,9 +57,9 @@ const cards = [
           class={`${card.colors.card} flex flex-col gap-2 rounded-lg border border-gray-500 border-opacity-30 bg-white bg-opacity-5 p-3 transition-all hover:bg-opacity-5`}
         >
           <div class="flex items-center justify-between gap-2">
-            <h3 class={`${card.colors.title} text-xl font-medium`}>{card.name}</h3>
+            <h3 class={`${card.colors.title} font-medium`}>{card.name}</h3>
           </div>
-          <div class="opacity-75">{card.description}</div>
+          <div class="opacity-75 text-sm">{card.description}</div>
           <div class="grow" />
           <div class="flex">
             <div class="rounded bg-black bg-opacity-20 px-2 py-1 text-xs font-semibold">
@@ -73,7 +73,7 @@ const cards = [
 
   <h2 class="mb-3 italic">Sponsors</h2>
   <div class="flex flex-wrap gap-8">
-    <a href="https://sqlsync.dev" target="_blank">
+    <a class="hover:opacity-80 transition-opacity" href="https://sqlsync.dev" target="_blank">
       <img class="max-w-80 dark:hidden" src="/logos/orbitinghail.svg" alt="Orbitinghail" />
       <img
         class="max-w-80 hidden dark:block"

src/components/PostHeader.astro

@@ -44,7 +44,7 @@ const { title, publishedAt, author, readingMinutes, tags, image } = Astro.props;
       )
     }
   </div>
-  {tags.length > 0 && <TagList transition items={tags} />}
+  {tags.length > 0 && tags.length <= config.post.maxTags && <TagList transition items={tags} />}
   {
     image && (
       <img

src/config.ts

@@ -52,6 +52,11 @@ export default {
     /// Show reading progress bar on top of page
     showReadingProgress: true,
 
+    /// Hide the tags when there are too many tags
+    ///
+    /// Will always be shown in the footer
+    maxTags: 10,
+
     /// Shows a reading time estimate on top of every blog post
     readingTime: {
       enabled: true,

src/content/blog/2024-08-09_block-format.md

@@ -11,6 +11,7 @@ tags:
 published_at: 2024-08-09T18:01:53.233Z
 last_modified_at: 2024-08-11T23:30:53.233Z
 image: /media/thumbs/pantheon.jpg
+outdated: true
 ---
 
 [Fjall](https://github.com/fjall-rs/fjall) is an LSM-tree based storage engine written in Rust.

src/content/config.ts

@@ -18,6 +18,7 @@ const blogCollection = defineCollection({
       draft: z.boolean().optional(),
       featured: z.boolean().optional(),
       image: z.string().optional(),
+      outdated: z.boolean().optional(),
     })
     .strict(),
 });

src/pages/post/[...slug]/index.astro

@@ -34,6 +34,14 @@ const readingMinutes = Math.max(
   <!-- Global -->
   {config.post.showReadingProgress && <ReadingProgressBar />}
 
+  {
+    post.data.outdated && (
+      <div class="border border-amber-300 dark:border-amber-800 text-amber-700 dark:text-amber-200 p-5 mb-10 bg-amber-100 dark:bg-amber-500/30 rounded-xl">
+        This post is very outdated.
+      </div>
+    )
+  }
+
   <!-- Post header -->
   <PostHeader
     title={post.data.title}
@@ -45,7 +53,9 @@ const readingMinutes = Math.max(
   />
 
   <!-- Content -->
-  <article class="my-10 w-full !max-w-full prose dark:prose-invert text-justify dark:prose-gray">
+  <article
+    class="[&_p]:dark:text-gray-300/90 my-10 w-full !max-w-full prose dark:prose-invert text-justify dark:prose-gray"
+  >
     <Content />
     <hr />
     <ArticleAddendum />
@@ -74,6 +84,15 @@ const readingMinutes = Math.max(
     overflow-x: hidden;
   }
 
+  article h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    text-align: left;
+  }
+
   article a {
     color: rgb(7 89 133) !important;
     text-decoration: underline dotted !important;
@@ -102,8 +121,8 @@ const readingMinutes = Math.max(
   }
 
   p code {
-    border-radius: 4px;
-    padding: 2px 4px;
+    border-radius: 5px;
+    padding: 3px 5px;
     white-space: normal !important;
   }
 
@@ -112,7 +131,7 @@ const readingMinutes = Math.max(
   }
 
   .dark p code {
-    color: rgb(193, 228, 248) !important;
+    color: rgb(150, 228, 255) !important;
     background: rgba(7, 89, 133, 0.33) !important;
   }
 
@@ -139,5 +158,7 @@ const readingMinutes = Math.max(
     font-style: var(--shiki-dark-font-style) !important;
     font-weight: var(--shiki-dark-font-weight) !important;
     text-decoration: var(--shiki-dark-text-decoration) !important;
+    font-size: 14px;
+ 	line-height: 25px;
   }
 </style>