jedmund/jedmund-svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Page styling

Browse source
This commit is contained in:
Justin Edmund 2025-06-02 14:02:35 -07:00
parent c32e770396
commit 5dba6af729
3 changed files with 24 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/lib/components/admin/AdminNavBar.svelte
View file

@ -1,11 +1,26 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/stores' import { page } from '$app/stores'
import { onMount } from 'svelte'
import AvatarSimple from '$lib/components/AvatarSimple.svelte' import AvatarSimple from '$lib/components/AvatarSimple.svelte'
import WorkIcon from '$icons/work.svg?component' import WorkIcon from '$icons/work.svg?component'
import UniverseIcon from '$icons/universe.svg?component' import UniverseIcon from '$icons/universe.svg?component'
import PhotosIcon from '$icons/photos.svg?component' import PhotosIcon from '$icons/photos.svg?component'
const currentPath = $derived($page.url.pathname) const currentPath = $derived($page.url.pathname)
let isScrolled = $state(false)
onMount(() => {
const handleScroll = () => {
isScrolled = window.scrollY > 0
}
window.addEventListener('scroll', handleScroll)
handleScroll() // Check initial scroll position
return () => {
window.removeEventListener('scroll', handleScroll)
}
})
interface NavItem { interface NavItem {
text: string text: string
@ -34,7 +49,7 @@
) )
</script> </script>
<nav class="admin-nav-bar"> <nav class="admin-nav-bar" class:scrolled={isScrolled}>
<div class="nav-container"> <div class="nav-container">
<div class="nav-content"> <div class="nav-content">
<a href="/" class="nav-brand"> <a href="/" class="nav-brand">
@ -70,8 +85,13 @@
top: 0; top: 0;
z-index: 100; z-index: 100;
width: 100%; width: 100%;
background: $grey-90; background: $bg-color;
border-bottom: 1px solid $grey-70; border-bottom: 1px solid transparent;
transition: border-bottom 0.2s ease;
&.scrolled {
border-bottom: 1px solid $grey-60;
}
} }
.nav-container { .nav-container {

2
src/lib/components/admin/AdminPage.svelte
View file

@ -28,7 +28,7 @@
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 auto $unit-6x; margin: 0 auto $unit-2x;
width: calc(100% - #{$unit-6x}); width: calc(100% - #{$unit-6x});
max-width: 900px; // Much wider for admin max-width: 900px; // Much wider for admin
min-height: calc(100vh - #{$unit-16x}); // Full height minus margins min-height: calc(100vh - #{$unit-16x}); // Full height minus margins

2
src/routes/admin/+layout.svelte
View file

@ -73,8 +73,6 @@
.admin-content { .admin-content {
flex: 1; flex: 1;
padding-top: $unit-4x;
padding-bottom: $unit-6x;
} }
.admin-card-layout { .admin-card-layout {