Added a bunch of background images and improved CSS

assets/css/custom.css

@@ -12,12 +12,16 @@
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid rgba(18, 47, 101, 0.35);
   padding: 2rem;
-  margin-bottom: 2rem;
+  filter: saturate(0.7) brightness(0.8);
-  position: relative;
-  filter: saturate(0.7);
   z-index: 2;
 }
 
+.toc:has(#TableOfContents) {
+  background-color: rgba(25, 25, 35, 0.45);
+  border-radius: 10px;
+  max-height: 70vh;
+}
+
 .background-container {
   position: fixed;
   top: 0;
@@ -41,15 +45,30 @@
   filter: blur(4px) saturate(0.65);
 }
 
+/* Lead Styling */
+.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: rgb(209, 182, 164);
+}
+
+/* Header Page Name Styling */
+nav > div > a {
+  font-size: 1.5rem;
+  text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
+}
+
 /* Header Button Styling */
 header nav ul li a, 
 header nav ul li button {
   display: inline-block;
   padding: 0.5rem 1rem;
-  background-color: rgba(25, 25, 35, 0.25);
+  background: rgba(18, 47, 101, 0.25);
   border-radius: 8px;
   border: 1px solid rgba(25, 25, 35, 0.35);
   transition: all 0.3s ease;
+  backdrop-filter: blur(4px);
+  animation: backdropShift 10s linear infinite;
+  -webkit-backdrop-filter: blur(8px);
+  filter: saturate(0.9) brightness(0.9);
 }
 
 header nav ul li a:hover, 
@@ -62,10 +81,14 @@ header nav ul li button:hover {
 /* Search button specific styling */
 header button[id^="search-button"] {
   padding: 0.5rem 1rem;
-  background-color: rgba(25, 25, 35, 0.25);
+  background: rgba(18, 47, 101, 0.25);
   border-radius: 8px;
   border: 1px solid rgba(25, 25, 35, 0.35);
   transition: all 0.3s ease;
+  backdrop-filter: blur(4px);
+  animation: backdropShift 10s linear infinite;
+  -webkit-backdrop-filter: blur(8px);
+  filter: saturate(0.9) brightness(0.9);
 }
 
 header button[id^="search-button"]:hover {
@@ -76,12 +99,12 @@ header button[id^="search-button"]:hover {
 
 @keyframes backdropShift {
   0% {
-    backdrop-filter: blur(8px) hue-rotate(-15deg);
+    backdrop-filter: blur(8px) hue-rotate(-10deg);
   }
   50% {
-    backdrop-filter: blur(8px) hue-rotate(15deg);
+    backdrop-filter: blur(8px) hue-rotate(10deg);
   }
   100% {
-    backdrop-filter: blur(8px) hue-rotate(-15deg);
+    backdrop-filter: blur(8px) hue-rotate(-10deg);
   }
 }

content/personal-blog/first-post/index.md

@@ -16,4 +16,4 @@ Markdown has been my go-to format for note taking for years now. While searching
 
 This website will be a central place to share my projects, thoughts, and ideas, as well as a landing page for KarstTech. If you would like to see how it is built, I decided to make the source code available at [code.karsttech.com](https://code.karsttech.com).
 
-![Alt text](figure.jpg "Image caption")
+![Alt text](karsttech_logo_horiz.png "New KarstTech Logo")

layouts/_default/list.html

@@ -0,0 +1,36 @@
+{{ define "main" }}
+<article class="prose max-w-full dark:prose-invert glass">
+  {{ with .Title }}
+    <header>
+      <h1>{{ . | emojify }}</h1>
+    </header>
+  {{ end }}
+  <section>{{ .Content | emojify }}</section>
+  <section>
+    {{ if .Data.Pages }}
+      {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
+        {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
+          <h2 class="mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
+            {{ .Key }}
+          </h2>
+          <hr class="w-36 border-dotted border-neutral-400" />
+          {{ range .Pages }}
+            {{ partial "article-link.html" . }}
+          {{ end }}
+        {{ end }}
+      {{ else }}
+        {{ range (.Paginate .Pages).Pages }}
+          {{ partial "article-link.html" . }}
+        {{ end }}
+      {{ end }}
+      {{ partial "pagination.html" . }}
+    {{ else }}
+      <section class="prose mt-10 dark:prose-invert">
+        <p class="border-t py-8">
+          <em>{{ i18n "list.no_articles" | emojify }}</em>
+        </p>
+      </section>
+    {{ end }}
+  </section>
+</article>
+{{ end }}

layouts/partials/background-images.html

@@ -0,0 +1,15 @@
+{{ $images := slice }}
+{{ range readDir "static/backgrounds" }}
+  {{ if in .Name ".webp" }}
+    {{ $images = $images | append .Name }}
+  {{ end }}
+{{ end }}
+
+<div class="background-container">
+  <img id="background-image" alt="Background" class="background-image">
+  <script>
+    const images = {{ $images }};
+    const randomImage = images[Math.floor(Math.random() * images.length)];
+    document.getElementById('background-image').src = `/backgrounds/${randomImage}`;
+  </script>
+</div> 

layouts/partials/favicons.html

@@ -1,2 +1,2 @@
-<link rel="shortcut icon"  href="web-app-manifest-192x192.png">
+<link rel="shortcut icon"  href="/android-chrome-192x192.png">
-<link rel="apple-touch-icon" sizes="192x192" href="/web-app-manifest-192x192.png">
+<link rel="apple-touch-icon" sizes="192x192" href="/android-chrome-192x192.png">

layouts/partials/scripts.html

@@ -0,0 +1,3 @@
+{{ if .Params.showTableOfContents | default (.Site.Params.article.showTableOfContents | default false) }}
+  <script src="/js/scrollspy.js"></script>
+{{ end }} 

layouts/personal-blog/list.html

@@ -0,0 +1,37 @@
+{{ define "main" }}
+{{ partial "background-images.html" . }}
+<article class="prose max-w-full dark:prose-invert glass">
+  {{ with .Title }}
+    <header>
+      <h1>{{ . | emojify }}</h1>
+    </header>
+  {{ end }}
+  <section>{{ .Content | emojify }}</section>
+  <section>
+    {{ if .Data.Pages }}
+      {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
+        {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
+          <h2 class="mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
+            {{ .Key }}
+          </h2>
+          <hr class="w-36 border-dotted border-neutral-400" />
+          {{ range .Pages }}
+            {{ partial "article-link.html" . }}
+          {{ end }}
+        {{ end }}
+      {{ else }}
+        {{ range (.Paginate .Pages).Pages }}
+          {{ partial "article-link.html" . }}
+        {{ end }}
+      {{ end }}
+      {{ partial "pagination.html" . }}
+    {{ else }}
+      <section class="prose mt-10 dark:prose-invert">
+        <p class="border-t py-8">
+          <em>{{ i18n "list.no_articles" | emojify }}</em>
+        </p>
+      </section>
+    {{ end }}
+  </section>
+</article>
+{{ end }} 

layouts/personal-blog/single.html

@@ -0,0 +1,67 @@
+{{ define "main" }}
+{{ partial "background-images.html" . }}
+  {{- $images := .Resources.ByType "image" }}
+  {{- $cover := $images.GetMatch (.Params.cover | default "*cover*") }}
+  {{- $feature := $images.GetMatch (.Params.feature | default "*feature*") | default $cover }}
+  <article class="prose max-w-full dark:prose-invert glass">
+    <header class="max-w-prose">
+      {{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }}
+        {{ partial "breadcrumbs.html" . }}
+      {{ end }}
+      <h1 class="mb-8 mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
+        {{ .Title | emojify }}
+      </h1>
+      {{ if or
+        (.Params.showDate | default (.Site.Params.article.showDate | default true))
+        (and (.Params.showDateUpdated | default (.Site.Params.article.showDateUpdated | default false)) (ne (partial "functions/date.html" .Date) (partial "functions/date.html" .Lastmod)))
+        (and (.Params.showWordCount | default (.Site.Params.article.showWordCount | default false)) (ne .WordCount 0))
+        (and (.Params.showReadingTime | default (.Site.Params.article.showReadingTime | default true)) (ne .ReadingTime 0))
+        (.Params.showEdit | default (.Site.Params.article.showEdit | default false))
+      }}
+        <div class="mb-10 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
+          {{ partial "article-meta.html" (dict "context" . "scope" "single") }}
+        </div>
+      {{ end }}
+      {{ with $feature }}
+        <div class="prose">
+          {{ $altText := $.Params.featureAlt | default $.Params.coverAlt | default "" }}
+          {{ $class := "mb-6 rounded-md" }}
+          {{ $webp := $.Page.Site.Params.enableImageWebp | default true }}
+          {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "lazy" false "webp" $webp) }}
+          {{ with $.Params.coverCaption }}
+            <figcaption class="-mt-3 mb-6 text-center">{{ . | markdownify }}</figcaption>
+          {{ end }}
+        </div>
+      {{ end }}
+    </header>
+    <section class="prose mt-0 flex max-w-full flex-col dark:prose-invert lg:flex-row">
+      {{ if and (.Params.showTableOfContents | default (.Site.Params.article.showTableOfContents | default false)) (in .TableOfContents "<ul") }}
+        <div class="order-first px-0 lg:order-last lg:max-w-xs lg:ps-8">
+          <div class="toc pe-5 lg:sticky lg:top-10 print:hidden">
+            {{ partial "toc.html" . }}
+          </div>
+        </div>
+      {{ end }}
+      <div class="min-h-0 min-w-0 max-w-prose grow">
+        {{ .Content | emojify }}
+      </div>
+    </section>
+    <footer class="max-w-prose pt-8 print:hidden">
+      {{ partial "author.html" . }}
+      {{ partial "sharing-links.html" . }}
+      {{ partial "article-pagination.html" . }}
+      {{ if .Params.showComments | default (.Site.Params.article.showComments | default false) }}
+        {{ if templates.Exists "partials/comments.html" }}
+          <div class="pt-3">
+            <hr class="border-dotted border-neutral-300 dark:border-neutral-600" />
+            <div class="pt-3">
+              {{ partial "comments.html" . }}
+            </div>
+          </div>
+        {{ else }}
+          {{ warnf "[CONGO] Comments are enabled for %s but no comments partial exists." .File.Path }}
+        {{ end }}
+      {{ end }}
+    </footer>
+  </article>
+{{ end }}