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

Some style fixes

Browse source
This commit is contained in:
Justin Edmund 2025-05-26 15:14:14 -07:00
parent cbc2587cc9
commit 691d0cf464
4 changed files with 28 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/lib/components/Header.svelte
View file

@ -3,11 +3,19 @@
import SegmentedController from './SegmentedController.svelte' import SegmentedController from './SegmentedController.svelte'
let scrollY = $state(0) let scrollY = $state(0)
let hasScrolled = $derived(scrollY > 10) let hasScrolled = $state(false)
let gradientOpacity = $derived(Math.min(scrollY / 40, 1))
$effect(() => { $effect(() => {
const handleScroll = () => { const handleScroll = () => {
scrollY = window.scrollY scrollY = window.scrollY
// Add hysteresis to prevent flickering
if (!hasScrolled && scrollY > 30) {
hasScrolled = true
} else if (hasScrolled && scrollY < 20) {
hasScrolled = false
}
} }
window.addEventListener('scroll', handleScroll) window.addEventListener('scroll', handleScroll)
@ -15,7 +23,7 @@
}) })
</script> </script>
<header class="site-header {hasScrolled ? 'scrolled' : ''}"> <header class="site-header {hasScrolled ? 'scrolled' : ''}" style="--gradient-opacity: {gradientOpacity}">
<div class="header-content"> <div class="header-content">
<a href="/about" class="header-link" aria-label="@jedmund"> <a href="/about" class="header-link" aria-label="@jedmund">
<Avatar /> <Avatar />
@ -26,15 +34,15 @@
<style lang="scss"> <style lang="scss">
.site-header { .site-header {
position: fixed; position: sticky;
top: 0; top: 0;
left: 0;
right: 0;
z-index: 100; z-index: 100;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: $unit-5x 0; padding: $unit-5x 0;
transition: padding 0.3s ease; transition:
padding 0.3s ease,
background 0.3s ease;
pointer-events: none; pointer-events: none;
&.scrolled { &.scrolled {
@ -47,13 +55,15 @@
left: 0; left: 0;
right: 0; right: 0;
height: 120px; height: 120px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent); background: linear-gradient(to bottom, rgba(0, 0, 0, calc(0.15 * var(--gradient-opacity))), transparent);
backdrop-filter: blur(6px); backdrop-filter: blur(calc(6px * var(--gradient-opacity)));
-webkit-backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(calc(6px * var(--gradient-opacity)));
mask-image: linear-gradient(to bottom, black 0%, black 15%, transparent 90%); mask-image: linear-gradient(to bottom, black 0%, black 15%, transparent 90%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 15%, transparent 90%); -webkit-mask-image: linear-gradient(to bottom, black 0%, black 15%, transparent 90%);
pointer-events: none; pointer-events: none;
z-index: -1; z-index: -1;
opacity: var(--gradient-opacity);
transition: opacity 0.2s ease;
} }
} }
} }

4
src/lib/components/Page.svelte
View file

@ -17,9 +17,9 @@
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $unit-4x; gap: $unit-3x;
margin: $unit-6x auto $unit-6x; margin: $unit-6x auto $unit-6x;
padding: $unit-5x; padding: $unit-3x;
width: 100%; width: 100%;
max-width: 700px; max-width: 700px;

1
src/routes/+layout.svelte
View file

@ -39,7 +39,6 @@ user-scalable=no"
} }
main { main {
padding-top: calc(52px + #{$unit-5x * 2}); // Avatar height + header padding
min-height: 100vh; min-height: 100vh;
} }

10
src/routes/about/+page.svelte
View file

@ -36,9 +36,6 @@
target="_blank">Carnegie Mellon University</a target="_blank">Carnegie Mellon University</a
> in 2011 with a Bachelors of Arts in Communication Design. > in 2011 with a Bachelors of Arts in Communication Design.
</p> </p>
<p>
I occasionally write about design and development on my <a href="/universe">blog</a>.
</p>
</section> </section>
</Page> </Page>
<Page> <Page>
@ -91,8 +88,11 @@
} }
.bio { .bio {
font-size: 1rem; font-size: 1.125rem;
line-height: 1.3; line-height: 1.5;
color: #333;
background: $grey-100;
border-radius: $card-corner-radius;
p:first-child { p:first-child {
margin-top: 0; margin-top: 0;