More finishing touches

src/components/CallToAction.astro

@@ -1,15 +1,20 @@
 ---
 const { text, url_gh, url_mr, url_cf, url_wiki = "" } = Astro.props
+import { Icon } from 'astro-icon/components'
 ---
 
 <div class="container">
   <div class="call-to-action mt-24 mb-32 flex flex-col items-center gap-12 rounded-xl p-12 md:p-24">
     <h2 class="text-center text-3xl md:text-5xl">{text}</h2>
-    <div class="flex-row">
-      <a href={url_gh} class="text-center text-lg">GitHub</a>
-      <a href={url_mr} class="text-center text-lg">Modrinth</a>
-      <a href={url_cf} class="text-center text-lg">CurseForge</a>
-      {(url_wiki != '') ? <a href={url_wiki} class="text-center text-lg">Wiki</a> : ''}
+    <div class="flex flex-col gap-3 min-[800px]:flex-row">
+      {(url_gh != '') ? <a href={url_gh} class="button has-icon text-center text-lg">
+        <Icon name="ion:logo-github" />GitHub</a> : ''}
+      {(url_mr != '') ? <a href={url_mr} class="button has-icon text-center text-lg">
+        <Icon name="modrinth" />Modrinth</a> : ''}
+      {(url_cf != '') ? <a href={url_cf} class="button has-icon color-tertiary text-lg">
+        <Icon name="curseforge" />CurseForge</a> : ''}
+      {(url_wiki != '') ? <a href={url_wiki} class="button has-icon color-secondary text-lg">
+        <Icon name="ion:book" />Visit the new Wiki!</a> : ''}
     </div>
   </div>
 </div>
@@ -22,7 +27,6 @@ const { text, url_gh, url_mr, url_cf, url_wiki = "" } = Astro.props
 
   .call-to-action a:not(button),
   .call-to-action a:not(button):visited {
-    display: inline-block;
     vertical-align: top;
     padding: 1rem;
     margin: 0 1rem 0 1rem;

src/components/Hero.astro

@@ -1,7 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components'
 
-const { src = '/retrowave-moon.png' } = Astro.props
+const { src = '/motschensummer-cutout.png' } = Astro.props
 ---
 
 <section class="hero my-24">
@@ -12,16 +12,16 @@ const { src = '/retrowave-moon.png' } = Astro.props
           <slot><span class="text-gradient">Modding</span> done with passion</slot>
         </h1>
         <div class="flex flex-col gap-3 min-[500px]:flex-row">
-          <a class="button has-icon" href="https://github.com/markteekman/accessible-astro-starter">
+          <a class="button has-icon" href="https://github.com/Motschen">
             <Icon name="ion:logo-github" />
-            View on GitHub
+            Visit GitHub Profile
           </a>
           <a
             class="button has-icon color-secondary"
-            href="https://github.com/markteekman/accessible-astro-starter/blob/main/README.md"
+            href="wiki/midnightlib"
           >
-            <Icon name="ion:bookmark-outline" />
-            Read the Docs
+            <Icon name="ion:document-text" />
+            View the Wiki
           </a>
         </div>
       </div>

src/components/Navigation.astro

@@ -3,12 +3,17 @@ import ResponsiveToggle from './ResponsiveToggle.astro'
 import { DarkMode } from 'accessible-astro-components'
 import { Image } from 'astro:assets'
 import logo from '../assets/img/logo.png'
+import logo_lightmode from '../assets/img/logo_lightmode.png'
+
 ---
+<script>
+  
+</script>
 
 <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} alt="MidnightDust Logo" width="47" height="47" />
+      <Image src={logo} class="drop-shadow-md fill-black" alt="MidnightDust Logo" width="47" height="47" />
       <span class="font-bold">MidnightDust – Mods by Motschen</span>
     </a>
     <div class="wrapper">