mirror of
https://github.com/Motschen/midnightdust-eu.git
synced 2025-12-15 10:05:09 +01:00
103 lines
2.7 KiB
Plaintext
103 lines
2.7 KiB
Plaintext
---
|
|
const { text, url_gh, url_mr, url_cf, url_wiki = '', mod = 'default', icon = '' } = Astro.props
|
|
import { Icon } from 'astro-icon/components'
|
|
---
|
|
|
|
<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>
|
|
) : (
|
|
''
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.call-to-action {
|
|
color: var(--neutral-900);
|
|
background-image: linear-gradient(40deg, var(--primary-100), var(--secondary-200));
|
|
}
|
|
.midnightcontrols {
|
|
color: var(--neutral-100);
|
|
background-image: linear-gradient(40deg, #e302a4, #9400c6);
|
|
}
|
|
.midnightcontrols-button-primary {
|
|
background-color: #ff6fff;
|
|
}
|
|
.midnightcontrols-button-secondary {
|
|
background-color: #b356ff;
|
|
}
|
|
|
|
.call-to-action a:not(button),
|
|
.call-to-action a:not(button):visited {
|
|
vertical-align: top;
|
|
padding: 1rem;
|
|
margin: 0 1rem 0 1rem;
|
|
color: var(--neutral-900);
|
|
font-weight: bold;
|
|
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;
|
|
|
|
&:where(:hover, :focus) {
|
|
color: var(--neutral-100);
|
|
background-color: var(--neutral-900);
|
|
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>
|