navbar overhaul and darkmode implementation fix.
All checks were successful
Vercel Preview Deployment / Deploy-Preview (push) Successful in 2m9s
All checks were successful
Vercel Preview Deployment / Deploy-Preview (push) Successful in 2m9s
This commit is contained in:
parent
b22d9e97b3
commit
862bbeaf8d
@ -2,9 +2,9 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
/* body {
|
||||
transition:
|
||||
background-color 0.2s ease-in-out,
|
||||
color 0.2s ease-in-out;
|
||||
@apply bg-stone-200 dark:bg-gray-900 text-gray-900 dark:text-stone-200 text-center;
|
||||
}
|
||||
/* @apply bg-stone-200 dark:bg-gray-900 text-gray-900 dark:text-stone-200 text-center; */
|
||||
/* } */
|
||||
|
@ -9,7 +9,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover" class="font-jose font-light">
|
||||
<body data-sveltekit-preload-data="hover" class="bg-stone-200 dark:bg-primary-900 text-primary-900 dark:text-stone-200 font-jose font-light">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
5
src/lib/PageHeader.svelte
Normal file
5
src/lib/PageHeader.svelte
Normal file
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
export let title;
|
||||
</script>
|
||||
|
||||
<h1 class="text-center text-4xl">{title}</h1>
|
@ -1,7 +0,0 @@
|
||||
<script>
|
||||
export let data;
|
||||
|
||||
</script>
|
||||
|
||||
<h2>{data.post.title}</h2>
|
||||
<p>data.</p>
|
BIN
src/lib/logo.png
Normal file
BIN
src/lib/logo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 44 KiB |
3900
src/lib/logo.svg
Normal file
3900
src/lib/logo.svg
Normal file
File diff suppressed because it is too large
Load Diff
After Width: | Height: | Size: 186 KiB |
@ -1,8 +1,19 @@
|
||||
<script>
|
||||
import { blur } from 'svelte/transition';
|
||||
import {
|
||||
Navbar,
|
||||
NavBrand,
|
||||
NavLi,
|
||||
NavUl,
|
||||
NavHamburger,
|
||||
Dropdown,
|
||||
DropdownItem,
|
||||
DarkMode
|
||||
} from 'flowbite-svelte';
|
||||
import { ChevronDownOutline } from 'flowbite-svelte-icons';
|
||||
import '../app.css';
|
||||
import CloudflareAnalytics from '../lib/CloudflareAnalytics.svelte';
|
||||
import { DarkMode } from 'flowbite-svelte';
|
||||
import logo from '$lib/logo.png';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
// Navigation links are generated based on this object
|
||||
const nav = [
|
||||
@ -23,62 +34,38 @@
|
||||
subPages: ['get_in_touch', 'socials']
|
||||
}
|
||||
];
|
||||
|
||||
let selected = nav[0]; // keep track of the selected 'page' object.
|
||||
let intSelected = 0; // selected page index
|
||||
|
||||
// change the selected component (the event.originalTarget.id is not accessible in Chrome so switched to event.srcElement.id)
|
||||
function changeComponent(event) {
|
||||
selected = nav[event.srcElement.id];
|
||||
intSelected = event.srcElement.id;
|
||||
}
|
||||
$: activeUrl = $page.url.pathname;
|
||||
</script>
|
||||
|
||||
<CloudflareAnalytics />
|
||||
<nav class="nav-container h-32 w-full mt-12">
|
||||
<ul class="text-center">
|
||||
{#each nav as main, i}
|
||||
{#if i != 0}
|
||||
{#if !nav[i].subPages[0]}
|
||||
<li class="nav-item font-jose inline-block">
|
||||
<a
|
||||
href={main.name}
|
||||
class={selected == nav[i]
|
||||
? 'nav-link text-2xl p-3 hover:text-slate-400'
|
||||
: 'nav-link text-2xl p-3 hover:text-slate-400'}
|
||||
on:click={changeComponent}
|
||||
id={i}>{main.name}</a
|
||||
<Navbar class="bg-transparent">
|
||||
<NavBrand href="/">
|
||||
<img src={logo} class="me-3 h-6 sm:h-9" alt="Flowbite Logo" />
|
||||
<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-stone-200"
|
||||
>rannes.dev</span
|
||||
>
|
||||
</li>
|
||||
{:else}
|
||||
<li class="nav-item font-jose inline-block hover:text-slate-400">
|
||||
<button
|
||||
class={selected == nav[i] ? 'nav-link text-2xl p-3' : 'nav link text-2xl p-3'}
|
||||
on:click={changeComponent}
|
||||
id={i}>{main.name}</button
|
||||
>
|
||||
</li>
|
||||
{/if}
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
<hr class="nav-divider max-w-xl border-1 mx-auto rounded border-slate-400" />
|
||||
{#key selected}
|
||||
<ul in:blur={{ delay: 250 }} out:blur={{ duration: 250 }} class="text-center h-4 my-1">
|
||||
{#each selected.subPages as subPage}
|
||||
<li class="sub-nav-item inline-block font-jose hover:text-slate-400">
|
||||
<a class="sub-nav-link text-xl p-2" href={subPage}>{subPage.replace(/_/g, ' ')}</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/key}
|
||||
<div class="absolute top-2 md:top-6 right-2 md:right-6">
|
||||
<DarkMode />
|
||||
</div>
|
||||
</nav>
|
||||
</NavBrand>
|
||||
<NavHamburger />
|
||||
<NavUl {activeUrl}>
|
||||
<NavLi href="/">home</NavLi>
|
||||
<NavLi href="/about">whoami</NavLi>
|
||||
<NavLi class="cursor-pointer">
|
||||
projects<ChevronDownOutline class="w-6 h-6 text-primary-800 dark:text-stone-200 inline" />
|
||||
</NavLi>
|
||||
<Dropdown class="w-44 z-20">
|
||||
<DropdownItem href="/svelte">svelte</DropdownItem>
|
||||
<DropdownItem href="/nextjs">nextjs</DropdownItem>
|
||||
<DropdownItem href="/homelab">homelab</DropdownItem>
|
||||
</Dropdown>
|
||||
<NavLi href="/contact">contact</NavLi>
|
||||
<NavLi>
|
||||
<DarkMode btnClass="p-0" />
|
||||
</NavLi>
|
||||
</NavUl>
|
||||
</Navbar>
|
||||
<div class="mt-6 mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center">
|
||||
<slot />
|
||||
</div>
|
||||
<footer class="mt-12">
|
||||
<p class="text-sm text-gray-400">built by christian rannes 2024</p>
|
||||
<footer class="mt-12 text-center">
|
||||
<p class="text-sm text-stone-400">built by christian rannes 2024</p>
|
||||
</footer>
|
||||
|
@ -1,10 +1,12 @@
|
||||
<script>
|
||||
import { fade } from 'svelte/transition';
|
||||
import Projects from '../../lib/Projects.svelte';
|
||||
import PageHeader from '../../lib/PageHeader.svelte';
|
||||
const category = 'nextjs';
|
||||
const title = 'Next.js Projects';
|
||||
</script>
|
||||
|
||||
<div in:fade>
|
||||
<h1 class="text-2xl mb-4">Next.js Projects</h1>
|
||||
<PageHeader {title} />
|
||||
<Projects {category} />
|
||||
</div>
|
@ -1,11 +1,13 @@
|
||||
<script>
|
||||
import { fade } from 'svelte/transition';
|
||||
import Projects from '../../lib/Projects.svelte';
|
||||
import PageHeader from '../../lib/PageHeader.svelte';
|
||||
const projectRssUrl = 'https://gitea.rannes.dev/rannes.dev/my-portfolio.rss';
|
||||
const category = 'svelte';
|
||||
const title = 'Svelte Projects';
|
||||
</script>
|
||||
|
||||
<div in:fade>
|
||||
<h1 class="text-2xl mb-4">Svelte Projects</h1>
|
||||
<PageHeader {title} />
|
||||
<Projects {category} />
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user