Various design improvements

This commit is contained in:
Martin Prokoph
2024-09-18 14:23:17 +02:00
parent b2e20fa63b
commit b8272c378f
11 changed files with 47 additions and 37 deletions

View File

@@ -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%),

View File

@@ -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>

View File

@@ -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

View File

@@ -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);

View File

@@ -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;

View File

@@ -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;
}

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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");
}`
}
```