website/static/src/scss/_hero.scss
Jake Howard 93c06b3fe7
Don't hide bits of the header when stuck
This causes horrible scroll jumping on mobile
2022-10-30 13:04:38 +00:00

117 lines
1.7 KiB
SCSS

img.hero {
height: calc(50vh - $navbar-height) !important;
width: 100%;
object-fit: cover;
}
section.hero {
z-index: 10;
margin-top: 2rem;
padding-top: 0.5rem;
margin-bottom: 1.5rem;
background-color: $white;
display: block;
@include dark-mode {
background-color: $dark-mode-background;
}
.subtitle {
margin-bottom: 1rem;
font-weight: 300;
}
.title,
.subtitle {
@include dark-mode {
color: $dark-mode-text;
}
}
&.stuck {
box-shadow: $shadow;
position: sticky;
top: 0;
}
.hero-body {
padding: 0;
}
.dropdown-wrapper {
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
.dropdown-menu {
min-width: 15rem;
}
.dropdown {
li {
list-style: none !important;
}
.dropdown-content {
overflow-y: scroll;
max-height: 50vh;
@include dark-mode {
background-color: $grey-dark;
a {
color: $dark-mode-text;
&:hover {
background-color: $grey-darker;
}
}
}
}
ul {
margin: 0.5rem;
}
.menu-list li ul {
padding-left: initial;
}
}
.button {
@include dark-mode {
background-color: $grey-darker;
border-color: $black;
color: $dark-mode-text;
&:hover {
border-color: $grey-dark;
}
}
}
.title {
margin-bottom: 0.75rem;
font-weight: 300;
font-size: 3.5rem;
}
.column {
padding-bottom: unset;
}
nav.breadcrumb {
margin-bottom: 0 !important;
}
.content-details {
margin-bottom: 0.25rem;
}
}
#view-restriction-banner {
text-align: center;
border-radius: 0;
}