New blog post!

src/components/ImgComparisonSlider.astro

@@ -0,0 +1,71 @@
+---
+interface Props {
+  imgBefore: string
+  imgAfter: string
+  captionBefore?: string
+  captionAfter?: string
+}
+const { imgBefore, imgAfter, captionBefore, captionAfter } = Astro.props
+---
+
+<img-comparison-slider class="slider-with-animated-handle">
+  <figure slot="first" class="before">
+    <img width="100%" src={imgBefore}>
+    {captionBefore ? <figcaption>{captionBefore}</figcaption> : ""}
+  </figure>
+  <figure slot="second" class="after">
+    <img width="100%" src={imgAfter}>
+    {captionAfter ? <figcaption>{captionAfter}</figcaption> : ""}
+  </figure>
+</img-comparison-slider>
+
+<style lang="scss" is:global>
+  #handle {
+    transition: transform 0.2s;
+  }
+
+  #handle:hover #handle {
+    transform: scale(1.2);
+  }
+  img-comparison-slider:focus, img-comparison-slider:focus-visible {
+    outline: unset;
+    box-shadow: unset;
+  }
+  .before,
+  .after {
+    margin: 0;
+  }
+
+  .before figcaption,
+  .after figcaption {
+    background: #fff;
+    border: 1px solid #c0c0c0;
+    border-radius: 12px;
+    color: #2e3452;
+    opacity: 0.8;
+    padding: 12px;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    line-height: 100%;
+  }
+
+  .before figcaption {
+    left: 12px;
+  }
+
+  .after figcaption {
+    right: 12px;
+  }
+</style>
+
+<script>
+  import "img-comparison-slider/dist/index"
+  import "img-comparison-slider/dist/styles.css"
+</script>
+
+<!-- <script>
+import { HTMLImgComparisonSliderElement } from "img-comparison-slider";
+
+customElements.define('img-comparison-slider', HTMLImgComparisonSliderElement);
+</script> -->

src/components/Navigation.astro

@@ -14,9 +14,8 @@ import { Icon } from 'astro-icon/components'
 <div id="main-navigation" class="is-desktop py-8">
   <div class="container">
     <a href="/" class="flex items-center gap-2 !no-underline">
-      <!-- <Image src={logo} class="drop-shadow-md fill-black" alt="MidnightDust Logo" width="47" height="47" /> -->
       <Icon name="ion:sparkles-outline" width="24" height="24" />
-      <span class="font-bold">MidnightDust – Mods by Motschen</span>
+      <span class="font-bold midnightdust-text">MidnightDust</span>
     </a>
     <div class="wrapper">
       <nav class="desktop-menu" aria-label="Main navigation desktop">
@@ -39,6 +38,7 @@ import { Icon } from 'astro-icon/components'
   document.addEventListener('astro:page-load', () => {
     // variables
     const mainNav = document.querySelector('#main-navigation')
+    if (!mainNav) return;
     const mainMenu = mainNav.querySelector('ul')
     const dropdownMenus = [...document.querySelectorAll('.has-dropdown button')]