atuleu/flanders
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Uses tailwind

Browse Source
This commit is contained in:
Alexandre Tuleu
2023-09-19 16:47:48 +02:00
parent d4bde5834a
commit 08f006c308
9 changed files with 697 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app.css Normal file
View File

@@ -0,0 +1,11 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html {
height: 100%;
}
body {
min-height: 100%;
}

4
src/app.html
View File

@@ -7,6 +7,8 @@
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
<div class="bg-neutral-400 p-4 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-400">
<div class="container mx-auto">%sveltekit.body%</div>
</div>
</body>
</html>

78
src/lib/components/Header.svelte
View File

@@ -8,47 +8,53 @@
export let links: Array<LinkConfig>;
</script>
<header>
<section class="first-line">
<div class="container">
<div class="logo">
<a href="/">
<Brand brand={section} color="var(--text-header)" />
</a>
</div>
<div class="dashboard-title">
{#if section.subtitle}
<h2>{section.subtitle}</h2>
{/if}
<h1>{section.title}</h1>
</div>
<header class="flex flex-col gap-4">
<section class="flex h-16 flex-row items-center gap-4">
<div class="h-16 w-16">
<a href="/">
<Brand brand={section} color="var(--logo-color)" />
</a>
</div>
<div>
{#if section.subtitle}
<h2 class="text-xl">{section.subtitle}</h2>
{/if}
<h1 class="text-4xl">{section.title}</h1>
</div>
</section>
<nav class="navbar" aria-label="main navigation">
<div class="container">
<div class="navbar-start">
{#each links as link}
<a class="navbar-item" href={link.url}>
{#if link.icon}
<i class={link.icon} />
{/if}
<span class="link-label">{link.title}</span>
</a>
{/each}
</div>
<div class="navbar-end">
<ThemeVariantButton class="navbar-item" />
<nav class="navbar flex flex-row justify-between" aria-label="main navigation">
<div class="justfiy-start flex flex-row gap-4">
{#each links as link}
<a class="justify-self-start" href={link.url}>
{#if link.icon}
<i class={link.icon} />
{/if}
<span class="link-label">{link.title}</span>
</a>
{/each}
</div>
<div class="flex flex-row items-center justify-start gap-4">
<ThemeVariantButton class="" />
<LayoutButton class="navbar-item" />
<div class="navbar-item">
<div class="control has-icons-left">
<input class="input" type="text" placeholder="Filter" />
<span class="icon is-small is-left">
<i class="fa fa-search" />
</span>
</div>
<LayoutButton class="" />
<div class="">
<div class="">
<input
class="w-40 rounded-xl border-2 border-neutral-400 bg-neutral-300 px-4 py-0 outline-0 transition-all focus:w-60 dark:border-neutral-800 dark:bg-neutral-700"
type="text"
placeholder="Filter"
/>
</div>
</div>
</div>
</nav>
</header>
<style lang="postcss">
:root {
--logo-color: theme(colors.neutral.800);
}
:global(.dark) {
--logo-color: theme(colors.neutral.400);
}
</style>

36
src/routes/+layout.svelte
View File

@@ -1,25 +1,25 @@
<script lang="ts">
import { themeVariant } from '$lib/stores/themeVariant';
import '../app.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import { themeVariant, type ThemeVariant } from '$lib/stores/themeVariant';
import { browser } from '$app/environment';
function setBodyClass(variant: ThemeVariant) {
if (variant == 'default') {
variant = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
if (variant == 'light') {
document.body.classList.remove('dark');
} else {
document.body.classList.add('dark');
}
}
$: {
if (browser) {
switch ($themeVariant) {
case 'default': {
document.body.classList.remove('is-dark');
document.body.classList.remove('is-light');
break;
}
case 'light': {
document.body.classList.remove('is-dark');
document.body.classList.add('is-light');
break;
}
case 'dark': {
document.body.classList.add('is-dark');
document.body.classList.remove('is-light');
break;
}
}
setBodyClass($themeVariant);
}
}
</script>