generated from tpl/obsidian-sample-plugin
61 lines
1.6 KiB
Svelte
61 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { type Snippet } from "svelte";
|
|
interface Props {
|
|
children?: Snippet;
|
|
}
|
|
|
|
let { children }: Props = $props();
|
|
</script>
|
|
|
|
<div class="bookshelf">
|
|
{@render children?.()}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@use "sass:color";
|
|
@use "./variables.scss" as bookshelf;
|
|
|
|
div.bookshelf {
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
min-height: calc(bookshelf.$height + bookshelf.$shelf-width);
|
|
background-image: linear-gradient(
|
|
color.scale(bookshelf.$color, $lightness: -32%),
|
|
color.scale(bookshelf.$color, $lightness: -30%) bookshelf.$height,
|
|
|
|
color.scale(bookshelf.$color, $lightness: bookshelf.$shadow-pct)
|
|
bookshelf.$height,
|
|
color.scale(bookshelf.$color, $lightness: bookshelf.$shadow-pct)
|
|
calc(bookshelf.$height + bookshelf.$shadow-width),
|
|
bookshelf.$color bookshelf.$height,
|
|
bookshelf.$color calc(bookshelf.$height + bookshelf.$shelf-width),
|
|
color.scale(
|
|
bookshelf.$color,
|
|
$lightness: -1 * bookshelf.$shadow-pct
|
|
)
|
|
calc(
|
|
bookshelf.$height + bookshelf.$shelf-width -
|
|
bookshelf.$shadow-width
|
|
),
|
|
color.scale(
|
|
bookshelf.$color,
|
|
$lightness: -1 * bookshelf.$shadow-pct
|
|
)
|
|
calc(bookshelf.$height + bookshelf.$shelf-width)
|
|
);
|
|
background-size: 10px calc(bookshelf.$height + bookshelf.$shelf-width);
|
|
border: 10px bookshelf.$color solid;
|
|
padding-left: bookshelf.$book-spacing;
|
|
padding-right: bookshelf.$book-spacing;
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: bookshelf.$shelf-width bookshelf.$book-spacing;
|
|
|
|
container: bookshelf / inline-size;
|
|
@container bookshelf (width < 600px) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|