mirror of
https://github.com/pockethost/pockethost.git
synced 2025-06-06 22:26:45 +00:00
41 lines
1.0 KiB
Svelte
41 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
export let minHeight: number = 0
|
|
export let bgColor: string = 'var(--bs-body-bg)'
|
|
|
|
// Construct the CSS styles since Svelte doesn't support CSS injection yet
|
|
let cssStyles = `min-height: ${minHeight}px; background-color: ${bgColor};`
|
|
</script>
|
|
|
|
<div class="homepage-hero-animation" style={cssStyles}>
|
|
<slot />
|
|
</div>
|
|
|
|
<style>
|
|
.homepage-hero-animation {
|
|
box-shadow:
|
|
var(--bs-primary) 0 0 0 3px inset,
|
|
var(--bs-body-bg) 10px -10px 0px -3px,
|
|
var(--bs-success) 10px -10px,
|
|
var(--bs-body-bg) 20px -20px 0px -3px,
|
|
var(--bs-warning) 20px -20px,
|
|
var(--bs-body-bg) 30px -30px 0px -3px,
|
|
var(--bs-orange) 30px -30px,
|
|
var(--bs-body-bg) 40px -40px 0px -3px,
|
|
var(--bs-danger) 40px -40px;
|
|
border: 0;
|
|
border-radius: 25px;
|
|
padding: 30px;
|
|
margin-right: 45px;
|
|
margin-top: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.homepage-hero-animation {
|
|
margin: 0;
|
|
}
|
|
}
|
|
</style>
|