Various design improvements

src/assets/scss/base/_color.scss

@@ -8,7 +8,8 @@ $colors: (
     200: hsl(243, 79%, 69%),
     300: hsl(243, 53%, 49%),
     400: hsl(243, 64%, 48%),
-    500: hsl(243, 96%, 20%),
+    500: hsl(243, 89%, 29%),
+    600: hsl(243, 96%, 14%),
   ),
   secondary: (
     100: hsl(140, 80%, 68%),
@@ -16,6 +17,7 @@ $colors: (
     300: hsl(140, 72%, 57%),
     400: hsl(140, 75%, 47%),
     500: hsl(140, 90%, 30%),
+    600: hsl(140, 93%, 25%),
   ),
   neutral: (
     100: hsl(0 0% 100%),

src/components/CallToAction.astro

@@ -14,7 +14,7 @@ import { Icon } from 'astro-icon/components'
       {(url_gh != '') ? <a href={url_gh} class={"button has-icon text-lg " + mod+"-button-primary"}>
         <Icon name="simple-icons:github" />GitHub</a> : ''}
       {(url_wiki != '') ? <a href={url_wiki} class={"button has-icon color-secondary text-lg " + mod+"-button-secondary"}>
-        <Icon name="ion:book" />Visit the new Wiki!</a> : ''}
+        <Icon name="ion:library" />Visit the new Wiki!</a> : ''}
     </div>
   </div>
 </div>

src/components/Footer.astro

@@ -3,7 +3,7 @@ const currentYear = new Date().getFullYear()
 ---
 
 <footer>
-  <section class="py-8">
+  <section class="py-8 text-center">
     <div class="container">
       <p>
         &copy; {currentYear} - MidnightDust. A project by <a

src/components/Header.astro

@@ -63,8 +63,8 @@ import { Icon } from 'astro-icon/components'
 
       [data-icon] {
         height: auto;
-        margin-top: -4px;
+        margin-top: -2px;
-        width: 30px;
+        width: 28px;
 
         path {
           fill: var(--action-color);

src/components/Hero.astro

@@ -9,12 +9,12 @@ const { src = '/motschensummer-cutout.png' } = Astro.props
     <div class="grid grid-cols-1 items-center gap-24 lg:grid-cols-2">
       <div class="flex flex-col items-center gap-8 md:items-start">
         <h1 class="text-center text-6xl md:text-left lg:text-8xl">
-          <slot><span class="text-gradient">Modding</span> done with passion</slot>
+          <slot><span class="text-gradient drop-shadow-xl">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/Motschen">
             <Icon name="ion:logo-github" />
-            Visit GitHub Profile
+            Visit my GitHub Profile
           </a>
           <a class="button has-icon color-secondary"
             href="wiki/midnightlib">
@@ -28,16 +28,16 @@ const { src = '/motschensummer-cutout.png' } = Astro.props
   </div>
 </section>
 
-<style lang="scss">
+<style>
   .text-gradient {
-    background: linear-gradient(315deg, var(--primary-200) 25%, var(--secondary-500));
+    background: linear-gradient(315deg, var(--secondary-300) 25%, var(--primary-300));
     background-clip: border-box;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
 
   :global(.darkmode .text-gradient) {
-    background: linear-gradient(315deg, var(--primary-200) 25%, var(--secondary-400));
+    background: linear-gradient(315deg, var(--secondary-300) 25%, var(--primary-200));
     background-clip: border-box;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;

src/components/Navigation.astro

@@ -4,6 +4,7 @@ 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'
+import { Icon } from 'astro-icon/components'
 
 ---
 <script>
@@ -13,7 +14,8 @@ import logo_lightmode from '../assets/img/logo_lightmode.png'
 <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" />
+      <!-- <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>
     </a>
     <div class="wrapper">
@@ -295,8 +297,8 @@ import logo_lightmode from '../assets/img/logo_lightmode.png'
         .has-dropdown > button:hover,
         .has-dropdown > button:focus {
           text-decoration: underline;
-          text-decoration-thickness: 1px;
+          text-decoration-thickness: 2px;
-          text-decoration-style: wavy;
+          text-decoration-style: solid;
           text-underline-offset: 7px;
         }
 

src/layouts/MarkdownLayout.astro

@@ -86,5 +86,11 @@ const { frontmatter } = Astro.props
     background-color: var(--secondary-500);
     box-shadow: -1px 1px 8px var(--secondary-500);
   }
+  .notification:is(.darkmode *) a:not(.button) {
+    color: var(--secondary-400);
+  }
+  .notification:is(.darkmode *) a:not(.button):visited {
+    color: var(--secondary-500);
+  }
 
 </style>

src/pages/index.astro

@@ -10,11 +10,11 @@ import Counter from '../components/Counter.astro'
     <div class="container">
       <h2 class="mb-16 text-6xl">Statistics</h2>
       <div class="grid grid-cols-1 gap-12 sm:grid-cols-2 md:grid-cols-3">
-        <Counter icon="ion:star" count="572+" title="Stars in Total" sub="On GitHub" />
+        <Counter icon="ion:star" count="570+" title="Stars in Total" sub="On GitHub" />
-        <Counter icon="ion:download" count="78.000.000+" title="Total Downloads" sub="Modrinth & CurseForge" />
+        <Counter icon="ion:download" count="90.000.000+" title="Total Downloads" sub="Modrinth & CurseForge" />
         <Counter icon="ion:code-slash" count="5+" title="Years" sub="Development experience" />
       </div>
     </div>
   </section>
 </DefaultLayout>
-<a rel="me" href="https://planetearth.social/@motschen">Mastodon</a>
+<a class="hidden" rel="me" href="https://planetearth.social/@motschen">Mastodon</a>

src/pages/midnightcontrols.astro

@@ -26,22 +26,22 @@ import ContentMedia from '../components/ContentMedia.astro'
     <div class="container">
       <h2 class="mb-16 text-6xl">Features</h2>
       <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
-        <Feature icon="mdi:controller" title="Controller Support">
+        <Feature icon="ion:game-controller-outline" title="Controller Support">
           Use your favorite controller to play your favorite game.<br>Many controllers are supported without any configuration!
         </Feature>
-        <Feature icon="mdi:gesture-touch-button" title="Touchscreen Support">
+        <Feature icon="ion:finger-print-outline" title="Touchscreen Support">
           You only have a touchscreen? No problem! The only thing missing is multitouch support.
         </Feature>
         <Feature icon="mdi:monitor-eye" title="Eye Tracker Support">
           Eye Trackers are a great way for people with disabilities to still be able to enjoy this great game!
         </Feature>
-        <Feature icon="mdi:cog" title="Configurable">
+        <Feature icon="ion:options-outline" title="Configurable">
           The MidnightLib-powered config is full of exciting features.<br>Use the advanced config screen for even more of them!
         </Feature>
-        <Feature icon="mdi:account-multiple" title="Split Screen">
+        <Feature icon="ion:people-outline" title="Splitscreen">
           Invite your homies and loved ones for a local splitscreen Minecraft session! Consult the wiki for setup instructions.
         </Feature>
-        <Feature icon="mdi:world" title="Great Community">
+        <Feature icon="ion:happy-outline" title="Great Community">
           MidnightControls has an amazing community that is always willing to help with any trouble!
         </Feature>
       </div>
@@ -60,19 +60,19 @@ import ContentMedia from '../components/ContentMedia.astro'
       <ContentMedia imgSrc="/midnightcontrols/front-block-placing.webp">
         <h2>You want even <span class="bg-clip-text text-transparent bg-gradient-to-r from-green-500 to-cyan-500">more</span>?</h2>
         <p class="text-2xl">
-          We got you!<br> <br>
+          We got you!<br/> <br/>
-          MidnightControlsExtra provides useful features that might trigger anticheats.<br>
+          MidnightControlsExtra provides useful features that might trigger anticheats.<br/>
           Front block placing, anyone?
         </p>
       </ContentMedia>
       <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
-        <Feature icon="mdi:speedometer" title="Fast Block Placement">
+        <Feature icon="ion:speedometer-outline" title="Fast Block Placement">
           Place those pesky blocks almost as fast as Sonic would!
         </Feature>
-        <Feature icon="mdi:chevron-left-right" title="Front Block Placing">
+        <Feature icon="ion:share-outline" title="Front Block Placing">
-          Place blocks in front of you without sneaking up to the edge of the block.<br>Many controllers are supported without any configuration!
+          Place blocks in front of you without sneaking up to the edge of the block.<br/>Just like on Bedrock!
         </Feature>
-        <Feature icon="mdi:arrow-u-up-left-bold" title="Vertical Reacharound">
+        <Feature icon="ion:layers-outline" title="Vertical Reacharound">
           Easily place something below the block you are standing on!
         </Feature>
       </div>

src/pages/midnightlib.astro

@@ -27,22 +27,22 @@ import ContentMedia from '../components/ContentMedia.astro'
     <div class="container">
       <h2 class="mb-16 text-6xl">Features</h2>
       <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
-        <Feature icon="mdi:feather" title="Lightweight">
+        <Feature icon="ion:leaf-outline" title="Lightweight">
           Size of the .jar is currently just 50KB.<br>Everything essential for the config (including GUI) is only 30KB!
         </Feature>
-        <Feature icon="mdi:coffee" title="JiJ-able">
+        <Feature icon="ion:cafe-outline" title="JiJ-able">
           Bundle MidnightLib with your mod with ease. Gone are the days of installing dependencies manually!
         </Feature>
-        <Feature icon="mdi:laptop" title="Automated">
+        <Feature icon="ion:code-working-outline" title="Automated">
           Automatic generation of config screens (and server-side commands) makes adding config options a breeze!
         </Feature>
-        <Feature icon="mdi:cog" title="Powerful">
+        <Feature icon="ion:options-outline" title="Powerful">
-          Supports booleans, numbers (int, float, double), strings, enums, hex colors and string lists!
+          Supports booleans, numbers (int, float, double), strings, enums, hex colors and lists!
         </Feature>
-        <Feature icon="mdi:person" title="User-friendly">
+        <Feature icon="ion:happy-outline" title="User-friendly">
-          Organize your config screen using comments, sliders, colors and tabs.
+          Organize your config screen using comments, sliders, color pickers, file choosers and tabs.
         </Feature>
-        <Feature icon="mdi:world" title="Universal">
+        <Feature icon="ion:globe-outline" title="Universal">
           MidnightLib is compatible with Quilt, Fabric and (Neo-)Forge, making it ideal for multiplatform mods!
         </Feature>
       </div>

src/pages/wiki/midnightlib.mdx

@@ -39,7 +39,7 @@ dependencies {
   <Icon name="ion:information-circle-outline" />
   <p>
     <strong>Info:</strong> You should always pick the version that suits your modloader and Minecraft version best.  
-    The version selector is finally fully functional!
+    Forge support is retired in favor of NeoForge.
   </p>
 </Notification>  
 
@@ -172,5 +172,5 @@ If you don't use the whole library and therefore not the automatic ModMenu integ
 @Override
 public ConfigScreenFactory<?> getModConfigScreenFactory() {
   return parent -> MidnightConfig.getScreen(parent, "modid");
-}`
+}
 ```