mirror of
https://github.com/Motschen/midnightdust-eu.git
synced 2025-12-13 09:25:10 +01:00
68 lines
1.3 KiB
Plaintext
68 lines
1.3 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon/components'
|
|
|
|
const { icon = 'mdi:rocket', title = 'Title' } = Astro.props
|
|
---
|
|
|
|
<div class="feature flex flex-col gap-4">
|
|
<Icon name={icon} />
|
|
<div class="content">
|
|
<h3>{title}</h3>
|
|
<p>
|
|
<slot>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, corporis.</slot>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@use '../assets/scss/base/breakpoint' as *;
|
|
|
|
.feature {
|
|
position: relative;
|
|
width: calc(100% - 0.5rem);
|
|
padding: 2rem;
|
|
|
|
> * {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
@include breakpoint(large) {
|
|
width: 100%;
|
|
}
|
|
|
|
&::before,
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
}
|
|
|
|
&::before {
|
|
inset: 0;
|
|
background-color: var(--neutral-100);
|
|
border: 3px solid var(--neutral-700);
|
|
border-radius: 1rem;
|
|
box-shadow: 0 0 0 6px var(--neutral-100);
|
|
z-index: 1;
|
|
}
|
|
|
|
&::after {
|
|
background-color: var(--action-color);
|
|
inset: 1rem -0.85rem -0.85rem 1rem;
|
|
border-radius: 1rem;
|
|
z-index: 0;
|
|
}
|
|
}
|
|
|
|
:global(.feature [data-icon]) {
|
|
height: auto;
|
|
width: 4rem;
|
|
color: var(--action-color);
|
|
}
|
|
|
|
:global(.darkmode .feature::before) {
|
|
background-color: var(--dark-100);
|
|
box-shadow: 0 0 0 6px var(--dark-100);
|
|
}
|
|
</style>
|