feat: added skeleton as ui toolkit

2025-06-28 07:19:09 +00:00 · 2023-07-27 10:14:19 +02:00 · 2023-07-27 10:14:19 +02:00 · 3fbf85db06
commit 3fbf85db06
parent fede9a2142
24 changed files with 695 additions and 204 deletions
--- a/src/app.html
+++ b/src/app.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
 <head>
  <meta charset="utf-8" />
  <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
@ -14,6 +14,6 @@
 	%sveltekit.head%
 </head>
 <body data-sveltekit-preload-data="hover">
-  <div style="display: contents">%sveltekit.body%</div>
+  <div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
 </body>
 </html>
--- a/src/app.postcss
+++ b/src/app.postcss
@ -0,0 +1,4 @@
+html,
+body {
+  @apply h-full overflow-hidden
+}
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@ -1,17 +0,0 @@
-<!-- Footer.svelte -->
-<footer>
-  <p>&copy; {new Date().getFullYear()} hellob.art. All rights reserved.</p>
-  <p>Contact: bart@vanderbraak.nl</p>
-</footer>
-
-<style>
-  footer {
-    background-color: #f0f0f0;
-    padding: 1rem;
-    text-align: center;
-  }
-
-  p {
-    margin: 0.5rem 0;
-  }
-</style>
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@ -1,43 +0,0 @@
-<script lang="ts">
-  export let routes: { url: string; label: string }[];
-</script>
-
-<nav>
-  <ul>
-    {#each routes as route}
-      <li><a href={route.url}>{route.label}</a></li>
-    {/each}
-  </ul>
-</nav>
-
-<style>
-  nav {
-    background-color: #007bff;
-    padding: 1rem;
-  }
-
-  ul {
-    list-style: none;
-    display: flex;
-    justify-content: space-around;
-    margin: 0;
-    padding: 0;
-  }
-
-  li {
-    margin: 0;
-  }
-
-  a {
-    color: #fff;
-    text-decoration: none;
-    font-size: 1.2rem;
-    padding: 0.5rem 1rem;
-    border-radius: 5px;
-    transition: background-color 0.2s ease-in-out;
-  }
-
-  a:hover {
-    background-color: #0056b3;
-  }
-</style>
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@ -0,0 +1,30 @@
+<script>
+	import GitHub from './icons/GitHub.svelte';
+	import Svelte from './icons/Svelte.svelte';
+	import Vercel from './icons/Vercel.svelte';
+</script>
+
+<footer class="text-right px-4 py-2">
+	<p>
+		<a href="https://svelte.dev/" target="_blank" rel="noopener noreferrer">
+			Made with <Svelte />
+		</a>
+		|
+		<a href="https://vercel.com/" target="_blank" rel="noopener noreferrer">
+			Hosted on <Vercel />
+		</a>
+		|
+		<a href="https://github.com/bartvdbraak/hellob.art" target="_blank" rel="noopener noreferrer">
+			Source code at <GitHub />
+		</a>
+	</p>
+	<p>
+		Licensed under GPLv3 &mdash; &copy; {new Date().getFullYear()} hellob.art &mdash; Bart van der Braak
+	</p>
+</footer>
+
+<style>
+	:global(.inline-svg) {
+		display: inline;
+	}
+</style>
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@ -0,0 +1,19 @@
+<script>
+	import { AppBar } from "@skeletonlabs/skeleton";
+	import GitHub from "./icons/GitHub.svelte";
+</script>
+
+<AppBar>
+  <svelte:fragment slot="lead">
+    <img src="./icon.svg" alt="Logo" srcset="" class="pr-2" />
+    <code class="code">hellob.art</code>
+  </svelte:fragment>
+  <svelte:fragment slot="trail">
+    <a
+      href="https://github.com/bartvdbraak/hellob.art"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="btn-icon variant-primary"><GitHub /></a
+    >
+  </svelte:fragment>
+</AppBar>
--- a/src/lib/components/Navigation.svelte
+++ b/src/lib/components/Navigation.svelte
@ -0,0 +1,16 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	$: classesActive = (href: string) => (href === $page.url.pathname ? '!bg-primary-500' : '');
+
+	export let routes: { url: string; label: string }[];
+</script>
+
+<nav class="list-nav m-5">
+	<ul>
+		{#each routes as route}
+			<li>
+				<a class="{classesActive(route.url)}" href={route.url}>{route.label}</a>
+			</li>
+		{/each}
+	</ul>
+</nav>
--- a/src/lib/components/icons/GitHub.svelte
+++ b/src/lib/components/icons/GitHub.svelte
@ -0,0 +1 @@
+<svg class="inline-svg" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
--- a/src/lib/components/icons/Svelte.svelte
+++ b/src/lib/components/icons/Svelte.svelte
@ -0,0 +1 @@
+<svg class="inline-svg" stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><title></title><path d="M10.354 21.125a4.44 4.44 0 0 1-4.765-1.767 4.109 4.109 0 0 1-.703-3.107 3.898 3.898 0 0 1 .134-.522l.105-.321.287.21a7.21 7.21 0 0 0 2.186 1.092l.208.063-.02.208a1.253 1.253 0 0 0 .226.83 1.337 1.337 0 0 0 1.435.533 1.231 1.231 0 0 0 .343-.15l5.59-3.562a1.164 1.164 0 0 0 .524-.778 1.242 1.242 0 0 0-.211-.937 1.338 1.338 0 0 0-1.435-.533 1.23 1.23 0 0 0-.343.15l-2.133 1.36a4.078 4.078 0 0 1-1.135.499 4.44 4.44 0 0 1-4.765-1.766 4.108 4.108 0 0 1-.702-3.108 3.855 3.855 0 0 1 1.742-2.582l5.589-3.563a4.072 4.072 0 0 1 1.135-.499 4.44 4.44 0 0 1 4.765 1.767 4.109 4.109 0 0 1 .703 3.107 3.943 3.943 0 0 1-.134.522l-.105.321-.286-.21a7.204 7.204 0 0 0-2.187-1.093l-.208-.063.02-.207a1.255 1.255 0 0 0-.226-.831 1.337 1.337 0 0 0-1.435-.532 1.231 1.231 0 0 0-.343.15L8.62 9.368a1.162 1.162 0 0 0-.524.778 1.24 1.24 0 0 0 .211.937 1.338 1.338 0 0 0 1.435.533 1.235 1.235 0 0 0 .344-.151l2.132-1.36a4.067 4.067 0 0 1 1.135-.498 4.44 4.44 0 0 1 4.765 1.766 4.108 4.108 0 0 1 .702 3.108 3.857 3.857 0 0 1-1.742 2.583l-5.589 3.562a4.072 4.072 0 0 1-1.135.499m10.358-17.95C18.484-.015 14.082-.96 10.9 1.068L5.31 4.63a6.412 6.412 0 0 0-2.896 4.295 6.753 6.753 0 0 0 .666 4.336 6.43 6.43 0 0 0-.96 2.396 6.833 6.833 0 0 0 1.168 5.167c2.229 3.19 6.63 4.135 9.812 2.108l5.59-3.562a6.41 6.41 0 0 0 2.896-4.295 6.756 6.756 0 0 0-.665-4.336 6.429 6.429 0 0 0 .958-2.396 6.831 6.831 0 0 0-1.167-5.168Z"></path></svg>
--- a/src/lib/components/icons/Vercel.svelte
+++ b/src/lib/components/icons/Vercel.svelte
@ -0,0 +1 @@
+<svg class="inline-svg" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 19h18l-9 -15z"></path></svg>
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -1,18 +1,33 @@
-<script>
-  import Footer from '../components/Footer.svelte';
-  import Nav from '../components/Nav.svelte';
+<script lang="ts">
+	import '../theme.postcss';
+	import '@skeletonlabs/skeleton/styles/skeleton.css';
+	import '../app.postcss';
+	import { AppShell } from '@skeletonlabs/skeleton';
+	import Footer from '../lib/components/Footer.svelte';
+	import Navigation from '../lib/components/Navigation.svelte';
+	import Header from '$lib/components/Header.svelte';

-  export let routes = [
-    { url: "/", label: "Home" },
-    { url: "/projects", label: "Projects" },
-    { url: "/about", label: "About" },
-    // { url: "/blog", label: "Blog" },
-    { url: "/contact", label: "Contact" }
-  ]
+	export let routes = [
+		{ url: '/', label: 'Home' },
+		{ url: '/projects', label: 'Projects' },
+		{ url: '/tools', label: 'Tools' },
+		{ url: '/blog', label: 'Blog' }
+	];
 </script>

-<main>
-  <Nav {routes} />
-  <slot />
-  <Footer />
-</main>
+<AppShell>
+	<svelte:fragment slot="header">
+		<Header />
+	</svelte:fragment>
+	<svelte:fragment slot="sidebarLeft">
+		<Navigation {routes} />
+	</svelte:fragment>
+	<!-- Router Slot -->
+	<div class="container p-10 mx-auto">
+		<slot />
+	</div>
+	<!-- ---- / ---- -->
+	<svelte:fragment slot="pageFooter">
+		<Footer />
+	</svelte:fragment>
+</AppShell>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -1,16 +1,60 @@
+<!-- About.svelte -->
 <script>
-	import { calculateAge } from "$lib/calculate-age";
-
-  export let age = calculateAge('1994-10-18');
-  export let location = "Zaandam, Netherlands";
-  export let loves = "cats and whiskey";
-  export let passion = "solving problems with code and automation";
+	import { calculateAge } from '$lib/calculate-age';
 </script>

-<main>
-  <h1>Hello, I'm Bart van der Braak!</h1>
-  <p>I'm {age} years old</p>
-  <p>I'm located in {location}.</p>
-  <p>I love {loves}.</p>
-  <p>I'm passionate about {passion}.</p>
-</main>
+<main class="container mx-auto px-4 py-8 text-left">
+	<h2 class="text-3xl font-bold mb-4">About Me</h2>
+
+	<p class="text-lg leading-relaxed mb-8">
+		Welcome to my homepage! I'm a passionate DevOps engineer based in Zaandam, Netherlands. At {calculateAge("1994-10-18")}
+		years old, I've already gathered a wealth of experience and expertise in the world of
+		technology. From programming in Python, Javascript, and Bash to utilizing cutting-edge
+		technologies like Terraform, Bicep, and Kubernetes, I've honed my skills to drive efficient and
+		innovative solutions. My journey in the tech industry began during my Information Sciences
+		studies, where I fell in love with data-driven projects and statistical learning. This passion
+		led me to explore languages like Python and LaTeX, enabling me to bring ideas to life through
+		powerful data management and visualization.
+	</p>
+
+	<h2 class="text-3xl font-bold mb-4">Empowering the Cloud with Azure</h2>
+
+	<p class="text-lg leading-relaxed mb-8">
+		My career took off when I joined Triple as a DevOps Engineer. At Triple, I've embraced the world
+		of Azure and Azure DevOps, mastering the intricacies of cloud architecture and deployment.
+		Holding certifications like AZ-104 and CKA has further solidified my expertise, empowering me to
+		build and manage robust, scalable, and secure cloud environments. My proficiency in
+		containerization and Kubernetes has allowed me to take application development to new heights,
+		ensuring seamless and efficient deployment at scale.
+	</p>
+
+	<h2 class="text-3xl font-bold mb-4">Solving Problems with Code and Automation</h2>
+
+	<p class="text-lg leading-relaxed mb-8">
+		As a DevOps engineer, I thrive on solving complex challenges with the power of code and
+		automation. My passion for streamlining workflows led me to create internal tooling using APIs,
+		boosting productivity for myself and my colleagues. Outside of work, I enjoy taking on side
+		projects that push my boundaries, expanding my skill set, and exploring new technologies. I
+		strongly believe that innovation and continuous learning are key drivers of success in the
+		ever-evolving tech landscape.
+	</p>
+
+	<h2 class="text-3xl font-bold mb-4">Cat Lover and Whiskey Enthusiast</h2>
+
+	<p class="text-lg leading-relaxed mb-8">
+		When I'm not busy crafting technological solutions, you'll often find me indulging in two of my
+		favorite passions: cats and whiskey. There's something special about the companionship of cats,
+		and their playful antics never fail to bring joy to my day. As for whiskey, I appreciate the
+		intricate flavors and the artistry behind its production. I find both interests to be a
+		delightful way to unwind and recharge my creative energies.
+	</p>
+
+	<h2 class="text-3xl font-bold mb-4">Let's Connect</h2>
+
+	<p class="text-lg leading-relaxed">
+		I'm always eager to collaborate on exciting projects and explore new opportunities. Whether it's
+		discussing data-driven ideas, cloud architecture, or just sharing cute cat pictures, I'd love to
+		connect with like-minded individuals. Feel free to reach out to me through the provided contact
+		information. Let's work together to create something extraordinary!
+	</p>
+</main>
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@ -1,19 +0,0 @@
-<!-- About.svelte -->
-<script>
-  export let proficientLanguages = ["Python", "Javascript", "Bash"];
-  export let proficientTechnologies = ["Terraform", "Bicep"];
-  export let workPlace = "Triple, Alkmaar";
-  export let workRole = "DevOps engineer";
-  export let azureExperience = "Azure and Azure DevOps";
-  export let containerSkills = "containers and Kubernetes";
-  export let certifications = ["AZ-104", "CKA"];
-</script>
-
-<main>
-  <h1>About Me</h1>
-  <p>I'm a {workRole} at {workPlace}.</p>
-  <p>I'm proficient in languages like {proficientLanguages.join(", ")} and technologies such as {proficientTechnologies.join(", ")}.</p>
-  <p>I have extensive experience with {azureExperience}.</p>
-  <p>I'm keen on utilizing {containerSkills}.</p>
-  <p>Certifications I've obtained: {certifications.join(", ")}.</p>
-</main>
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@ -0,0 +1,4 @@
+<main class="text-center">
+	<h2 class="h2">Blog Posts</h2>
+</main>
+
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@ -1,29 +0,0 @@
-<main>
-  <h1>Get in Touch!</h1>
-  <p>If you want to chat about cats, whiskey, or anything else, don't hesitate to reach out:</p>
-  <a href="mailto:bart@vanderbraak.nl" class="contact-email">bart@vanderbraak.nl</a>
-  <p>Looking forward to hearing from you!</p>
-</main>
-
-<style>
-  main {
-    text-align: center;
-    padding: 1rem;
-  }
-
-  h1 {
-    font-size: 2.5rem;
-    margin-bottom: 1rem;
-  }
-
-  .contact-email {
-    font-size: 1.2rem;
-    text-decoration: none;
-    color: #007bff;
-    transition: color 0.2s ease-in-out;
-  }
-
-  .contact-email:hover {
-    color: #0056b3;
-  }
-</style>
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@ -1,67 +1,71 @@
-<main>
-  <h1>My Projects</h1>
+<main class="text-center">
+	<h2 class="h2">My Projects</h2>

-  <div class="project">
-    <h2>Triple Ticket Dashboard</h2>
-    <p>Dec 2021 - Present</p>
-    <p>The Ticket Dashboard consolidates tickets from various sources into a centralized view.</p>
-  </div>
+	<div class="project">
+		<h2>Triple Ticket Dashboard</h2>
+		<p>Dec 2021 - Present</p>
+		<p>The Ticket Dashboard consolidates tickets from various sources into a centralized view.</p>
+	</div>

-  <div class="project">
-    <h2>Triple Videowall</h2>
-    <p>May 2022 - Sep 2022</p>
-    <p>An internal application to control an impressive 6x5 monitor setup with a user-friendly frontend built on Next.js and a powerful backend developed in Golang.</p>
-  </div>
+	<div class="project">
+		<h2>Triple Videowall</h2>
+		<p>May 2022 - Sep 2022</p>
+		<p>
+			An internal application to control an impressive 6x5 monitor setup with a user-friendly
+			frontend built on Next.js and a powerful backend developed in Golang.
+		</p>
+	</div>

-  <div class="project">
-    <h2>Zaantje</h2>
-    <p>Jan 2020 - Jan 2021</p>
-    <p>A SPA crafted with Nuxt.js and Vue.js, backed by Sanity CMS, taking you on a virtual tour of Zaandam, showcasing locations of famous music videos.</p>
-  </div>
+	<div class="project">
+		<h2>Zaantje</h2>
+		<p>Jan 2020 - Jan 2021</p>
+		<p>
+			A SPA crafted with Nuxt.js and Vue.js, backed by Sanity CMS, taking you on a virtual tour of
+			Zaandam, showcasing locations of famous music videos.
+		</p>
+	</div>

-  <h2>Open Source Contributions</h2>
-  
-  <div class="contribution">
-    <h3>microsoft/terraform-provider-azuredevops</h3>
-    <p>Terraform Azure DevOps provider</p>
-  </div>
+	<h2>Open Source Contributions</h2>

-  <div class="contribution">
-    <h3>iKenndac/Tofu</h3>
-    <p>An easy-to-use two-factor authentication app for iOS</p>
-  </div>
+	<div class="contribution">
+		<h3>microsoft/terraform-provider-azuredevops</h3>
+		<p>Terraform Azure DevOps provider</p>
+	</div>

-  <div class="contribution">
-    <h3>bartvdbraak/SlayerWeightCalculator</h3>
-    <p>A calculator for RuneScape slayer geeks that need to know percentages. (archived)</p>
-  </div>
+	<div class="contribution">
+		<h3>iKenndac/Tofu</h3>
+		<p>An easy-to-use two-factor authentication app for iOS</p>
+	</div>
+
+	<div class="contribution">
+		<h3>bartvdbraak/SlayerWeightCalculator</h3>
+		<p>A calculator for RuneScape slayer geeks that need to know percentages. (archived)</p>
+	</div>
 </main>

 <style>
-  main {
-    text-align: center;
-    padding: 1rem;
-  }

-  h1 {
-    font-size: 2.5rem;
-    margin-bottom: 1rem;
-  }
+	h1 {
+		font-size: 2.5rem;
+		margin-bottom: 1rem;
+	}

-  h2 {
-    font-size: 2rem;
-    margin-top: 2rem;
-  }
+	h2 {
+		font-size: 2rem;
+		margin-top: 2rem;
+	}

-  .project, .contribution {
-    margin: 1rem auto;
-    padding: 1rem;
-    max-width: 500px;
-    border: 2px solid #007bff;
-    border-radius: 10px;
-  }
+	.project,
+	.contribution {
+		margin: 1rem auto;
+		padding: 1rem;
+		max-width: 500px;
+		border: 2px solid #007bff;
+		border-radius: 10px;
+	}

-  .project p, .contribution p {
-    margin: 0.5rem 0;
-  }
+	.project p,
+	.contribution p {
+		margin: 0.5rem 0;
+	}
 </style>
--- a/src/routes/tools/+page.svelte
+++ b/src/routes/tools/+page.svelte
@ -0,0 +1,4 @@
+<main class="text-center">
+  <h2 class="h2">My Tools</h2>
+</main>
+
--- a/src/theme.postcss
+++ b/src/theme.postcss
@ -0,0 +1,98 @@
+
+:root {
+	/* =~= Theme Properties =~= */
+	--theme-font-family-base: system-ui;
+	--theme-font-family-heading: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+	--theme-font-color-base: 0 0 0;
+	--theme-font-color-dark: 255 255 255;
+	--theme-rounded-base: 4px;
+	--theme-rounded-container: 12px;
+	--theme-border-base: 2px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 0 0 0;
+	--on-secondary: 255 255 255;
+	--on-tertiary: 0 0 0;
+	--on-success: 0 0 0;
+	--on-warning: 0 0 0;
+	--on-error: 255 255 255;
+	--on-surface: 255 255 255;
+	/* =~= Theme Colors  =~= */
+	/* primary | #67a1ba */
+	--color-primary-50: 232 241 245; /* ⬅ #e8f1f5 */
+	--color-primary-100: 225 236 241; /* ⬅ #e1ecf1 */
+	--color-primary-200: 217 232 238; /* ⬅ #d9e8ee */
+	--color-primary-300: 194 217 227; /* ⬅ #c2d9e3 */
+	--color-primary-400: 149 189 207; /* ⬅ #95bdcf */
+	--color-primary-500: 103 161 186; /* ⬅ #67a1ba */
+	--color-primary-600: 93 145 167; /* ⬅ #5d91a7 */
+	--color-primary-700: 77 121 140; /* ⬅ #4d798c */
+	--color-primary-800: 62 97 112; /* ⬅ #3e6170 */
+	--color-primary-900: 50 79 91; /* ⬅ #324f5b */
+	/* secondary | #4F46E5 */
+	--color-secondary-50: 229 227 251; /* ⬅ #e5e3fb */
+	--color-secondary-100: 220 218 250; /* ⬅ #dcdafa */
+	--color-secondary-200: 211 209 249; /* ⬅ #d3d1f9 */
+	--color-secondary-300: 185 181 245; /* ⬅ #b9b5f5 */
+	--color-secondary-400: 132 126 237; /* ⬅ #847eed */
+	--color-secondary-500: 79 70 229; /* ⬅ #4F46E5 */
+	--color-secondary-600: 71 63 206; /* ⬅ #473fce */
+	--color-secondary-700: 59 53 172; /* ⬅ #3b35ac */
+	--color-secondary-800: 47 42 137; /* ⬅ #2f2a89 */
+	--color-secondary-900: 39 34 112; /* ⬅ #272270 */
+	/* tertiary | #0EA5E9 */
+	--color-tertiary-50: 219 242 252; /* ⬅ #dbf2fc */
+	--color-tertiary-100: 207 237 251; /* ⬅ #cfedfb */
+	--color-tertiary-200: 195 233 250; /* ⬅ #c3e9fa */
+	--color-tertiary-300: 159 219 246; /* ⬅ #9fdbf6 */
+	--color-tertiary-400: 86 192 240; /* ⬅ #56c0f0 */
+	--color-tertiary-500: 14 165 233; /* ⬅ #0EA5E9 */
+	--color-tertiary-600: 13 149 210; /* ⬅ #0d95d2 */
+	--color-tertiary-700: 11 124 175; /* ⬅ #0b7caf */
+	--color-tertiary-800: 8 99 140; /* ⬅ #08638c */
+	--color-tertiary-900: 7 81 114; /* ⬅ #075172 */
+	/* success | #84cc16 */
+	--color-success-50: 237 247 220; /* ⬅ #edf7dc */
+	--color-success-100: 230 245 208; /* ⬅ #e6f5d0 */
+	--color-success-200: 224 242 197; /* ⬅ #e0f2c5 */
+	--color-success-300: 206 235 162; /* ⬅ #ceeba2 */
+	--color-success-400: 169 219 92; /* ⬅ #a9db5c */
+	--color-success-500: 132 204 22; /* ⬅ #84cc16 */
+	--color-success-600: 119 184 20; /* ⬅ #77b814 */
+	--color-success-700: 99 153 17; /* ⬅ #639911 */
+	--color-success-800: 79 122 13; /* ⬅ #4f7a0d */
+	--color-success-900: 65 100 11; /* ⬅ #41640b */
+	/* warning | #EAB308 */
+	--color-warning-50: 252 244 218; /* ⬅ #fcf4da */
+	--color-warning-100: 251 240 206; /* ⬅ #fbf0ce */
+	--color-warning-200: 250 236 193; /* ⬅ #faecc1 */
+	--color-warning-300: 247 225 156; /* ⬅ #f7e19c */
+	--color-warning-400: 240 202 82; /* ⬅ #f0ca52 */
+	--color-warning-500: 234 179 8; /* ⬅ #EAB308 */
+	--color-warning-600: 211 161 7; /* ⬅ #d3a107 */
+	--color-warning-700: 176 134 6; /* ⬅ #b08606 */
+	--color-warning-800: 140 107 5; /* ⬅ #8c6b05 */
+	--color-warning-900: 115 88 4; /* ⬅ #735804 */
+	/* error | #d31922 */
+	--color-error-50: 248 221 222; /* ⬅ #f8ddde */
+	--color-error-100: 246 209 211; /* ⬅ #f6d1d3 */
+	--color-error-200: 244 198 200; /* ⬅ #f4c6c8 */
+	--color-error-300: 237 163 167; /* ⬅ #eda3a7 */
+	--color-error-400: 224 94 100; /* ⬅ #e05e64 */
+	--color-error-500: 211 25 34; /* ⬅ #d31922 */
+	--color-error-600: 190 23 31; /* ⬅ #be171f */
+	--color-error-700: 158 19 26; /* ⬅ #9e131a */
+	--color-error-800: 127 15 20; /* ⬅ #7f0f14 */
+	--color-error-900: 103 12 17; /* ⬅ #670c11 */
+	/* surface | #063142 */
+	--color-surface-50: 218 224 227; /* ⬅ #dae0e3 */
+	--color-surface-100: 205 214 217; /* ⬅ #cdd6d9 */
+	--color-surface-200: 193 204 208; /* ⬅ #c1ccd0 */
+	--color-surface-300: 155 173 179; /* ⬅ #9badb3 */
+	--color-surface-400: 81 111 123; /* ⬅ #516f7b */
+	--color-surface-500: 6 49 66; /* ⬅ #063142 */
+	--color-surface-600: 5 44 59; /* ⬅ #052c3b */
+	--color-surface-700: 5 37 50; /* ⬅ #052532 */
+	--color-surface-800: 4 29 40; /* ⬅ #041d28 */
+	--color-surface-900: 3 24 32; /* ⬅ #031820 */
+	
+}
				`@ -0,0 +1 @@`
				<svg class="inline-svg" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
				`@ -0,0 +1 @@`
				`<svg class="inline-svg" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 19h18l-9 -15z"></path></svg>`
				`@ -1 +0,0 @@`
				// place files you want to import through the `$lib` alias in this folder.