switch to forest theme

This commit is contained in:
Benjamin Palko 2025-05-12 18:11:20 -04:00
parent ce50f8a6d6
commit 3ea150227b
9 changed files with 76 additions and 11 deletions

View file

@ -1,5 +1,9 @@
@import 'tailwindcss'; @import 'tailwindcss';
@plugin "daisyui"; @plugin "daisyui" {
themes:
light --default,
forest --prefersdark;
}
:root { :root {
@apply font-[Roboto]; @apply font-[Roboto];

View file

@ -11,7 +11,7 @@
let [first, rest] = $derived([name.split(' ')[0], name.split(' ').slice(1).join(' ')]); let [first, rest] = $derived([name.split(' ')[0], name.split(' ').slice(1).join(' ')]);
</script> </script>
<div class="hero bg-base-200"> <div class="hero">
<div class="hero-content"> <div class="hero-content">
<div class="flex flex-col items-center gap-12 lg:flex-row lg:items-start"> <div class="flex flex-col items-center gap-12 lg:flex-row lg:items-start">
<div class="flex-0"> <div class="flex-0">

View file

@ -34,8 +34,8 @@
{#each pages as page (page.slug)} {#each pages as page (page.slug)}
<a <a
href={page.slug} href={page.slug}
class="link hover:link-accent transition-colors" class="link hover:link-secondary transition-colors"
class:link-accent={route.id === page.slug} class:link-secondary={route.id === page.slug}
> >
{page.name} {page.name}
</a> </a>

View file

@ -0,0 +1,21 @@
import { logger } from '$lib/server/logger';
import { error } from '@sveltejs/kit';
import type { LayoutServerLoad } from './$types';
export const load: LayoutServerLoad = async ({ locals }) => {
const { strapi } = locals;
try {
const result = await strapi.SiteBackground();
return {
background: {
url: result.data.Background.url
}
};
} catch (err) {
logger.error('Uh-oh!', err);
if (err instanceof Error) {
error(500, err);
}
}
};

View file

@ -3,8 +3,9 @@
import { navigating, page } from '$app/state'; import { navigating, page } from '$app/state';
import Navbar from '$lib/components/Navbar.svelte'; import Navbar from '$lib/components/Navbar.svelte';
import '../app.css'; import '../app.css';
import type { LayoutProps } from './$types';
let { children } = $props(); let { children, data }: LayoutProps = $props();
let drawerOpen = $state(false); let drawerOpen = $state(false);
@ -29,19 +30,18 @@
let current = $derived(pages.find((p) => p.slug === page.route.id)); let current = $derived(pages.find((p) => p.slug === page.route.id));
</script> </script>
<div class="drawer drawer-end"> <div class="drawer drawer-end bg-cover" style:background-image={`url(${data.background.url})`}>
<input id="navigation-drawer" type="checkbox" class="drawer-toggle" bind:checked={drawerOpen} /> <input id="navigation-drawer" type="checkbox" class="drawer-toggle" bind:checked={drawerOpen} />
<div class="drawer-content h-screen w-screen overflow-y-scroll lg:p-12">
<div class="drawer-content h-screen w-screen lg:p-12">
<div <div
class="bg-base-200 mx-auto grid min-h-full max-w-7xl grid-rows-[max-content_max-content_auto_max-content] overflow-hidden shadow-md lg:gap-4 lg:rounded-4xl" class="bg-base-100 border-base-300 mx-auto grid min-h-full max-w-7xl grid-rows-[max-content_max-content_auto_max-content] overflow-hidden border-2 shadow-md lg:gap-4 lg:rounded-4xl"
> >
<header class="lg:p-6"> <header class="lg:p-6">
<Navbar drawerId="navigation-drawer" title="Benjamin Palko" {pages} route={page.route} /> <Navbar drawerId="navigation-drawer" title="Benjamin Palko" {pages} route={page.route} />
</header> </header>
<div> <div>
{#if current && current.slug !== '/'} {#if current && current.slug !== '/'}
<div class="bg-base-300 w-full px-6 py-4 lg:px-12 lg:py-8"> <div class="bg-base-200 w-full px-6 py-4 lg:px-12 lg:py-8">
<h1 class="text-2xl font-light lg:text-4xl">{current.name}</h1> <h1 class="text-2xl font-light lg:text-4xl">{current.name}</h1>
</div> </div>
{/if} {/if}
@ -88,7 +88,7 @@
<span class="text-base-content font-semibold">Benjamin</span> <span class="text-base-content font-semibold">Benjamin</span>
Palko Palko
</h2> </h2>
<label for="navigation-drawer" class="btn btn-accent btn-outline btn-lg">Close</label> <label for="navigation-drawer" class="btn btn-secondary btn-outline btn-lg">Close</label>
</div> </div>
</div> </div>
</div> </div>

View file

@ -0,0 +1,19 @@
{
"kind": "singleType",
"collectionName": "site_backgrounds",
"info": {
"singularName": "site-background",
"pluralName": "site-backgrounds",
"displayName": "Site Background"
},
"options": {
"draftAndPublish": true
},
"attributes": {
"Background": {
"allowedTypes": ["images", "files", "videos", "audios"],
"type": "media",
"multiple": false
}
}
}

View file

@ -0,0 +1,7 @@
/**
* site-background controller
*/
import { factories } from '@strapi/strapi';
export default factories.createCoreController('api::site-background.site-background');

View file

@ -0,0 +1,7 @@
/**
* site-background router
*/
import { factories } from '@strapi/strapi';
export default factories.createCoreRouter('api::site-background.site-background');

View file

@ -0,0 +1,7 @@
/**
* site-background service
*/
import { factories } from '@strapi/strapi';
export default factories.createCoreService('api::site-background.site-background');