mirror of
https://github.com/Motschen/midnightdust-eu.git
synced 2025-12-15 10:05:09 +01:00
Various design improvements
This commit is contained in:
@@ -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%),
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -3,7 +3,7 @@ const currentYear = new Date().getFullYear()
|
||||
---
|
||||
|
||||
<footer>
|
||||
<section class="py-8">
|
||||
<section class="py-8 text-center">
|
||||
<div class="container">
|
||||
<p>
|
||||
© {currentYear} - MidnightDust. A project by <a
|
||||
|
||||
@@ -63,8 +63,8 @@ import { Icon } from 'astro-icon/components'
|
||||
|
||||
[data-icon] {
|
||||
height: auto;
|
||||
margin-top: -4px;
|
||||
width: 30px;
|
||||
margin-top: -2px;
|
||||
width: 28px;
|
||||
|
||||
path {
|
||||
fill: var(--action-color);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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-style: wavy;
|
||||
text-decoration-thickness: 2px;
|
||||
text-decoration-style: solid;
|
||||
text-underline-offset: 7px;
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -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:download" count="78.000.000+" title="Total Downloads" sub="Modrinth & CurseForge" />
|
||||
<Counter icon="ion:star" count="570+" title="Stars in Total" sub="On GitHub" />
|
||||
<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>
|
||||
@@ -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>
|
||||
MidnightControlsExtra provides useful features that might trigger anticheats.<br>
|
||||
We got you!<br/> <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">
|
||||
Place blocks in front of you without sneaking up to the edge of the block.<br>Many controllers are supported without any configuration!
|
||||
<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/>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>
|
||||
|
||||
@@ -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">
|
||||
Supports booleans, numbers (int, float, double), strings, enums, hex colors and string lists!
|
||||
<Feature icon="ion:options-outline" title="Powerful">
|
||||
Supports booleans, numbers (int, float, double), strings, enums, hex colors and lists!
|
||||
</Feature>
|
||||
<Feature icon="mdi:person" title="User-friendly">
|
||||
Organize your config screen using comments, sliders, colors and tabs.
|
||||
<Feature icon="ion:happy-outline" title="User-friendly">
|
||||
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>
|
||||
|
||||
@@ -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");
|
||||
}`
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user