mirror of
https://github.com/Motschen/midnightdust-eu.git
synced 2025-12-15 18:15:10 +01:00
48 lines
1.6 KiB
Plaintext
48 lines
1.6 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon/components'
|
|
|
|
const { src = '/retrowave-moon.png' } = Astro.props
|
|
---
|
|
|
|
<section class="hero my-24">
|
|
<div class="container">
|
|
<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>
|
|
</h1>
|
|
<div class="flex flex-col gap-3 min-[500px]:flex-row">
|
|
<a class="button has-icon" href="https://github.com/markteekman/accessible-astro-starter">
|
|
<Icon name="ion:logo-github" />
|
|
View on GitHub
|
|
</a>
|
|
<a
|
|
class="button has-icon color-secondary"
|
|
href="https://github.com/markteekman/accessible-astro-starter/blob/main/README.md"
|
|
>
|
|
<Icon name="ion:bookmark-outline" />
|
|
Read the Docs
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<img class="hidden lg:block" src={src} alt="" decoding="async" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style lang="scss">
|
|
.text-gradient {
|
|
background: linear-gradient(315deg, var(--primary-200) 25%, var(--secondary-500));
|
|
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-clip: border-box;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
</style>
|