Motschen/midnightdust-eu
1
0
Fork 0
mirror of https://github.com/Motschen/midnightdust-eu.git synced 2025-12-17 19:05:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Various design improvements

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CallToAction.astro
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>

2
src/components/Footer.astro
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

4
src/components/Header.astro
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);

10
src/components/Hero.astro
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;

8
src/components/Navigation.astro
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;
}