repos/website
1
Fork 0
Code Issues 1 Pull requests 27 Activity

Hide subtitle and breadcrumbs from hero once stuck

Browse source
This commit is contained in:
Jake Howard 2022-10-02 18:00:42 +01:00
parent 80cbcfbb47
commit f16f22ad48
Signed by: jake
GPG key ID: 57AFB45680EDD477
2 changed files with 20 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
static/src/js/base.js
View file

@ -23,7 +23,7 @@ function scrollToElement(element, behavior = "smooth") {
} }
function handleHeroStuck() { function handleHeroStuck() {
if (HERO.getBoundingClientRect().top === 0) { if (HERO.getBoundingClientRect().top <= 0) {
HERO.classList.add("stuck"); HERO.classList.add("stuck");
} else { } else {
HERO.classList.remove("stuck"); HERO.classList.remove("stuck");

33
static/src/scss/_hero.scss
View file

@ -5,8 +5,6 @@ img.hero {
} }
section.hero { section.hero {
position: sticky;
top: 0;
z-index: 10; z-index: 10;
margin-top: 2rem; margin-top: 2rem;
padding-top: 0.5rem; padding-top: 0.5rem;
@ -18,8 +16,27 @@ section.hero {
background-color: $dark-mode-background; background-color: $dark-mode-background;
} }
.subtitle {
margin-bottom: 1rem;
font-weight: 300;
}
.title,
.subtitle {
@include dark-mode {
color: $dark-mode-text;
}
}
&.stuck { &.stuck {
box-shadow: $shadow; box-shadow: $shadow;
position: sticky;
top: 0;
.breadcrumb,
.subtitle {
display: none;
}
} }
.hero-body { .hero-body {
@ -79,24 +96,12 @@ section.hero {
} }
} }
.subtitle {
margin-bottom: 1rem;
font-weight: 300;
}
.title { .title {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
font-weight: 300; font-weight: 300;
font-size: 3.5rem; font-size: 3.5rem;
} }
.title,
.subtitle {
@include dark-mode {
color: $dark-mode-text;
}
}
.column { .column {
padding-bottom: unset; padding-bottom: unset;
} }