Motschen/midnightdust-eu
1
0
Fork 0
mirror of https://github.com/Motschen/midnightdust-eu.git synced 2025-12-16 18:45:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve styling

Browse Source
This commit is contained in:
Martin Prokoph
2025-07-30 23:22:41 +02:00
parent 886b532519
commit c580b9e181
15 changed files with 872 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/CallToAction.astro
View File

@@ -1,20 +1,54 @@
---
const { text, url_gh, url_mr, url_cf, url_wiki = "", mod = "default" } = Astro.props
const { text, url_gh, url_mr, url_cf, url_wiki = '', mod = 'default', icon = '' } = Astro.props
import { Icon } from 'astro-icon/components'
---
<div class="container rellax" data-rellax-speed="-1.5">
<div class={"call-to-action mt-24 mb-32 flex flex-col items-center gap-12 rounded-xl p-12 md:p-24 " + mod}>
<h2 class="text-center text-3xl md:text-5xl">{text}</h2>
<div class="rellax container" data-rellax-speed="-1.5">
<div class={'call-to-action mt-24 mb-32 flex flex-col items-center gap-12 rounded-xl p-12 md:p-24 ' + mod}>
<h2 class="text-center text-3xl md:text-5xl">
{icon != '' ? <Icon class='inline pr-2 align-bottom' name={icon} /> : ''}{text}
</h2>
<div class="flex flex-col gap-3 min-[800px]:flex-row">
{(url_mr != '') ? <a href={url_mr} class={"button has-icon text-lg " + mod+"-button-primary"}>
<Icon name="simple-icons:modrinth" />Modrinth</a> : ''}
{(url_cf != '') ? <a href={url_cf} class={"button has-icon text-lg " + mod+"-button-primary"}>
<Icon name="simple-icons:curseforge" />CurseForge</a> : ''}
{(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:library" />Visit the new Wiki!</a> : ''}
{
url_mr != '' ? (
<a href={url_mr} class={'button has-icon text-lg ' + mod + '-button-primary'}>
<Icon name="simple-icons:modrinth" />
Modrinth
</a>
) : (
''
)
}
{
url_cf != '' ? (
<a href={url_cf} class={'button has-icon text-lg ' + mod + '-button-primary'}>
<Icon name="simple-icons:curseforge" />
CurseForge
</a>
) : (
''
)
}
{
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:library" />
Visit the new Wiki!
</a>
) : (
''
)
}
</div>
</div>
</div>
@@ -26,7 +60,7 @@ import { Icon } from 'astro-icon/components'
}
.midnightcontrols {
color: var(--neutral-100);
background-image: linear-gradient(40deg, #E302A4, #9400C6);
background-image: linear-gradient(40deg, #e302a4, #9400c6);
}
.midnightcontrols-button-primary {
background-color: #ff6fff;
@@ -45,7 +79,9 @@ import { Icon } from 'astro-icon/components'
border: 3px solid var(--neutral-900);
border-radius: 3px;
text-decoration: none;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
transition:
color 0.15s ease-in-out,
background-color 0.15s ease-in-out;
&:where(:hover, :focus) {
color: var(--neutral-100);
@@ -53,4 +89,14 @@ import { Icon } from 'astro-icon/components'
text-decoration: underline;
}
}
.neoforge {
color: var(--neutral-100);
background-image: linear-gradient(40deg, #d7742f, #ee5577);
}
.neoforge-button-primary {
background-color: #ee5577;
}
.neoforge-button-secondary {
background-color: #d7742f;
}
</style>