Initial commit0.1.0

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>