diff options
Diffstat (limited to '')
| -rw-r--r-- | frontend/src/lib/containers/Cardlets.svelte | 11 | ||||
| -rw-r--r-- | frontend/src/lib/containers/Cards.svelte | 8 | ||||
| -rw-r--r-- | frontend/src/lib/containers/Carousel.svelte | 15 | ||||
| -rw-r--r-- | frontend/src/lib/containers/Column.svelte | 3 | ||||
| -rw-r--r-- | frontend/src/lib/containers/Grid.svelte | 23 |
5 files changed, 60 insertions, 0 deletions
diff --git a/frontend/src/lib/containers/Cardlets.svelte b/frontend/src/lib/containers/Cardlets.svelte new file mode 100644 index 0000000..129da61 --- /dev/null +++ b/frontend/src/lib/containers/Cardlets.svelte @@ -0,0 +1,11 @@ +<script> + import { fadeDefault } from '$lib/Transitions'; + import { fade } from 'svelte/transition'; +</script> + +<div + class="grid gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 min-[1600px]:grid-cols-8 min-[1920px]:grid-cols-10" + in:fade={fadeDefault} +> + <slot /> +</div> diff --git a/frontend/src/lib/containers/Cards.svelte b/frontend/src/lib/containers/Cards.svelte new file mode 100644 index 0000000..a19e8be --- /dev/null +++ b/frontend/src/lib/containers/Cards.svelte @@ -0,0 +1,8 @@ +<script> + import { fadeDefault } from '$lib/Transitions'; + import { fade } from 'svelte/transition'; +</script> + +<div class="grid gap-4 xl:grid-cols-2 min-[1920px]:grid-cols-3" in:fade|global={fadeDefault}> + <slot /> +</div> diff --git a/frontend/src/lib/containers/Carousel.svelte b/frontend/src/lib/containers/Carousel.svelte new file mode 100644 index 0000000..1268a78 --- /dev/null +++ b/frontend/src/lib/containers/Carousel.svelte @@ -0,0 +1,15 @@ +<script lang="ts"> + export let title: string; + export let href: string; +</script> + +<div class="flex flex-col gap-1"> + <h2 class="flex text-2xl font-medium"> + <a class="hover:text-white" {href}> + {title} + </a> + </h2> + <div class="flex flex-wrap gap-5"> + <slot /> + </div> +</div> diff --git a/frontend/src/lib/containers/Column.svelte b/frontend/src/lib/containers/Column.svelte new file mode 100644 index 0000000..05daece --- /dev/null +++ b/frontend/src/lib/containers/Column.svelte @@ -0,0 +1,3 @@ +<div class="flex flex-col gap-4"> + <slot /> +</div> diff --git a/frontend/src/lib/containers/Grid.svelte b/frontend/src/lib/containers/Grid.svelte new file mode 100644 index 0000000..1224156 --- /dev/null +++ b/frontend/src/lib/containers/Grid.svelte @@ -0,0 +1,23 @@ +<script> + import { fadeDefault } from '$lib/Transitions'; + + import { fade } from 'svelte/transition'; +</script> + +<div + class="flex flex-col gap-1 lg:grid lg:h-full lg:max-h-full lg:overflow-auto" + in:fade|global={fadeDefault} +> + <slot /> +</div> + +<style> + div { + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr; + + grid-template-areas: + 'header header' + 'sidebar main'; + } +</style> |