website/static/src/scss/_hero.scss
Jake Howard 38cc5182ca
Add a shadow to the hero when it scrolls
Sadly done in JS, but it's much much easier this way
2022-07-20 22:39:35 +01:00

72 lines
1000 B
SCSS

img.hero {
height: calc(50vh - $navbar-height) !important;
width: 100%;
object-fit: cover;
}
section.hero {
position: sticky;
top: 0;
z-index: 10;
margin-top: 3rem;
padding-top: 0.5rem;
margin-bottom: 1.5rem;
background-color: $white;
display: block;
&.stuck {
box-shadow: $shadow;
}
.hero-body {
padding: 0;
}
.dropdown-wrapper {
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
.dropdown {
li {
list-style: none !important;
}
.dropdown-content {
overflow-y: scroll;
max-height: 50vh;
}
ul {
margin: 0.5rem;
}
.menu-list li ul {
padding-left: initial;
}
}
.subtitle {
margin-bottom: 0.5rem;
}
.title {
margin-bottom: 1.25rem;
font-weight: 300;
font-size: 3.5rem;
}
.column {
padding-bottom: unset;
}
nav.breadcrumb {
margin-bottom: 0 !important;
}
.content-details {
margin-bottom: 0 !important;
}
}