mirror of
https://github.com/bartvdbraak/hellob.art.git
synced 2025-06-28 07:19:09 +00:00
refactor: migration to skeleton v2
This commit is contained in:
parent
13d749d3af
commit
4199cfb778
10 changed files with 233 additions and 130 deletions
|
|
@ -14,7 +14,7 @@
|
|||
<title></title>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<body data-sveltekit-preload-data="hover" data-theme="theme">
|
||||
<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,8 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@tailwind variants;
|
||||
|
||||
html,
|
||||
body {
|
||||
@apply h-full overflow-hidden;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,19 @@
|
|||
<script lang="ts">
|
||||
import { AppBar, LightSwitch, ProgressBar, drawerStore } from '@skeletonlabs/skeleton';
|
||||
import { AppBar, LightSwitch, ProgressBar } from '@skeletonlabs/skeleton';
|
||||
import { getDrawerStore, type DrawerSettings } from '@skeletonlabs/skeleton';
|
||||
import GitHub from './icons/GitHub.svelte';
|
||||
import Hamburger from './icons/Hamburger.svelte';
|
||||
import LinkedIn from './icons/LinkedIn.svelte';
|
||||
import routes from '$lib/routes';
|
||||
import { page } from '$app/stores';
|
||||
$: classesActive = (href: string) => (href === $page.url.pathname ? 'underline' : '');
|
||||
const drawerStore = getDrawerStore();
|
||||
export let progress: number;
|
||||
|
||||
function drawerOpen(): void {
|
||||
drawerStore.open();
|
||||
$: classesActive = (href: string) => (href === $page.url.pathname ? 'underline' : '');
|
||||
|
||||
function trigger(position: 'right'): void {
|
||||
const s: DrawerSettings = { id: 'navigation', position };
|
||||
drawerStore.open(s);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -59,7 +63,9 @@
|
|||
<button
|
||||
aria-label="Toggle navigation menu"
|
||||
class="btn-icon btn-icon-sm hover:variant-soft-primary md:hidden"
|
||||
on:click={drawerOpen}
|
||||
on:click={() => {
|
||||
trigger('right');
|
||||
}}
|
||||
>
|
||||
<Hamburger />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,27 @@
|
|||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import type { Route } from '$lib/routes';
|
||||
import { drawerStore } from '@skeletonlabs/skeleton';
|
||||
import { getDrawerStore } from '@skeletonlabs/skeleton';
|
||||
const drawerStore = getDrawerStore();
|
||||
|
||||
$: classesActive = (href: string) =>
|
||||
href === $page.url.pathname ? '!bg-primary-500 text-indigo-100' : '';
|
||||
href === $page.url.pathname ? '!bg-secondary-500 text-indigo-100' : '';
|
||||
|
||||
export let routes: Route[];
|
||||
|
||||
function drawerClose(): void {
|
||||
drawerStore.close();
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav class="list-nav">
|
||||
<ul>
|
||||
{#each routes as route}
|
||||
<li class="mb-2">
|
||||
<a class={classesActive(route.url)} href={route.url} on:click={drawerClose}>
|
||||
<span class="badge bg-primary-500"
|
||||
<a
|
||||
class={classesActive(route.url)}
|
||||
href={route.url}
|
||||
on:click={() => {
|
||||
drawerStore.close();
|
||||
}}
|
||||
>
|
||||
<span class="badge bg-secondary-500"
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
|
|
@ -33,7 +37,7 @@
|
|||
>
|
||||
<span class="flex-auto">{route.label}</span>
|
||||
</a>
|
||||
</li>{/each}
|
||||
<!-- ... -->
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<script lang="ts">
|
||||
// import '@skeletonlabs/skeleton/themes/theme-crimson.css';
|
||||
import '../theme.postcss';
|
||||
import '@skeletonlabs/skeleton/styles/skeleton.css';
|
||||
import { Drawer, AppShell, initializeStores } from '@skeletonlabs/skeleton';
|
||||
initializeStores();
|
||||
import '../app.postcss';
|
||||
import { AppShell, Drawer } from '@skeletonlabs/skeleton';
|
||||
import Footer from '../lib/components/Footer.svelte';
|
||||
import Navigation from '../lib/components/Navigation.svelte';
|
||||
import Header from '$lib/components/Header.svelte';
|
||||
|
|
@ -37,7 +35,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<Drawer width="w-[280px] md:w-[200px]" position="right" bgDrawer="bg-gray-200 dark:bg-gray-800">
|
||||
<Drawer width="w-[280px] md:w-[200px]" position="right" bgDrawer="bg-black/30 backdrop-blur">
|
||||
<div class="p-5 w-full mx-auto">
|
||||
<h2 class="text-3xl font-bold mb-12 z-10 text-center">Pages</h2>
|
||||
<Navigation {routes} />
|
||||
|
|
|
|||
|
|
@ -1,96 +0,0 @@
|
|||
:root {
|
||||
/* =~= Theme Properties =~= */
|
||||
--theme-font-family-base: system-ui;
|
||||
--theme-font-family-heading: system-ui;
|
||||
--theme-font-color-base: 0 0 0;
|
||||
--theme-font-color-dark: 255 255 255;
|
||||
--theme-rounded-base: 9999px;
|
||||
--theme-rounded-container: 8px;
|
||||
--theme-border-base: 1px;
|
||||
/* =~= Theme On-X Colors =~= */
|
||||
--on-primary: 255 255 255;
|
||||
--on-secondary: 0 0 0;
|
||||
--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 | #3833a5 */
|
||||
--color-primary-50: 225 224 242; /* ⬅ #e1e0f2 */
|
||||
--color-primary-100: 215 214 237; /* ⬅ #d7d6ed */
|
||||
--color-primary-200: 205 204 233; /* ⬅ #cdcce9 */
|
||||
--color-primary-300: 175 173 219; /* ⬅ #afaddb */
|
||||
--color-primary-400: 116 112 192; /* ⬅ #7470c0 */
|
||||
--color-primary-500: 56 51 165; /* ⬅ #3833a5 */
|
||||
--color-primary-600: 50 46 149; /* ⬅ #322e95 */
|
||||
--color-primary-700: 42 38 124; /* ⬅ #2a267c */
|
||||
--color-primary-800: 34 31 99; /* ⬅ #221f63 */
|
||||
--color-primary-900: 27 25 81; /* ⬅ #1b1951 */
|
||||
/* secondary | #0FBA81 */
|
||||
--color-secondary-50: 219 245 236; /* ⬅ #dbf5ec */
|
||||
--color-secondary-100: 207 241 230; /* ⬅ #cff1e6 */
|
||||
--color-secondary-200: 195 238 224; /* ⬅ #c3eee0 */
|
||||
--color-secondary-300: 159 227 205; /* ⬅ #9fe3cd */
|
||||
--color-secondary-400: 87 207 167; /* ⬅ #57cfa7 */
|
||||
--color-secondary-500: 15 186 129; /* ⬅ #0FBA81 */
|
||||
--color-secondary-600: 14 167 116; /* ⬅ #0ea774 */
|
||||
--color-secondary-700: 11 140 97; /* ⬅ #0b8c61 */
|
||||
--color-secondary-800: 9 112 77; /* ⬅ #09704d */
|
||||
--color-secondary-900: 7 91 63; /* ⬅ #075b3f */
|
||||
/* 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 | #D41976 */
|
||||
--color-error-50: 249 221 234; /* ⬅ #f9ddea */
|
||||
--color-error-100: 246 209 228; /* ⬅ #f6d1e4 */
|
||||
--color-error-200: 244 198 221; /* ⬅ #f4c6dd */
|
||||
--color-error-300: 238 163 200; /* ⬅ #eea3c8 */
|
||||
--color-error-400: 225 94 159; /* ⬅ #e15e9f */
|
||||
--color-error-500: 212 25 118; /* ⬅ #D41976 */
|
||||
--color-error-600: 191 23 106; /* ⬅ #bf176a */
|
||||
--color-error-700: 159 19 89; /* ⬅ #9f1359 */
|
||||
--color-error-800: 127 15 71; /* ⬅ #7f0f47 */
|
||||
--color-error-900: 104 12 58; /* ⬅ #680c3a */
|
||||
/* surface | #141a26 */
|
||||
--color-surface-50: 220 221 222; /* ⬅ #dcddde */
|
||||
--color-surface-100: 208 209 212; /* ⬅ #d0d1d4 */
|
||||
--color-surface-200: 196 198 201; /* ⬅ #c4c6c9 */
|
||||
--color-surface-300: 161 163 168; /* ⬅ #a1a3a8 */
|
||||
--color-surface-400: 91 95 103; /* ⬅ #5b5f67 */
|
||||
--color-surface-500: 20 26 38; /* ⬅ #141a26 */
|
||||
--color-surface-600: 18 23 34; /* ⬅ #121722 */
|
||||
--color-surface-700: 15 20 29; /* ⬅ #0f141d */
|
||||
--color-surface-800: 12 16 23; /* ⬅ #0c1017 */
|
||||
--color-surface-900: 10 13 19; /* ⬅ #0a0d13 */
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue