website/static/src/scss/_hero.scss

149 lines
2.1 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;
}
}
.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;
}
.columns {
margin-bottom: unset !important;
}
nav.breadcrumb {
margin-bottom: 0 !important;
}
.content-details {
margin-bottom: 0.25rem;
}
.hero-buttons .button {
margin-right: 0 !important;
}
@include mobile {
.hero-buttons {
display: none;
}
}
@include tablet {
position: sticky;
top: 0;
&.stuck {
box-shadow: $shadow;
}
}
.scroll-indicator-container {
height: 5px;
#scroll-indicator {
transition-duration: 0.3s;
transition-property: background-color;
height: 100%;
width: 0%;
}
}
&.stuck #scroll-indicator {
background-color: $primary;
}
}
#view-restriction-banner {
text-align: center;
border-radius: 0;
}