@import “variables”;
/* Header */ .header {
&-brand { font-weight: bold !important; color: $color-dark-gray; } &-link { font-weight: bold !important; color: $color-black; text-decoration: none !important; display: inline-block; &:after { content: ""; display: flex; margin: 0 auto; height: $border-weight; background: $color-black; transition: width $transition-time ease 0s; width: 0; position: relative; top: $space-1; } &:hover:after { width: 100%; } } &-nav { position: fixed; width: 100%; transition: transform $transition-time ease 0s; z-index: 100; background-color: $header-color; &.hide { transform: translateY(-100%); } &.reveal { transform: none; border-bottom: $border-weight solid $color-black; } .header-menu-btn { display: none; cursor: pointer; } @media(max-width: $breakpoint-lg) { .header-menu-lg-stretch { display: none; &.reveal { display: block; } } .header-menu-btn { display: block; } } }
}
/* Footer */ .footer {
&-nav { top: $header-height; position: relative; }
}
/* Carousel */ .carousel {
position: relative; color: $color-white; a { color: $color-white; } &-card { height: inherit; border-radius: $border-radius; background-color: rgba($color: $color-black, $alpha: 0.6); transition: width $transition-time; @media (max-width: $breakpoint-lg) { width: 100% !important; } @media (max-width: $breakpoint-sm) { h2 { font-size: $h3-size; } } } &-slide { height: $carousel-height; border-radius: $border-radius; background-color: $color-light-gray; background-size: cover; opacity: 0; z-index: 1; position: absolute; top: $space-3; left: $space-3; right: $space-3; transition: opacity $transition-time; &.active { opacity: 1; z-index: 2; position: relative; top: 0; left: 0; right: 0; } } &-navigation { z-index: 3; position: relative; width: 100%; top: -$space-4 * 1.5; } &-btn { cursor: pointer; }
}
/* Evil Icons */ .icon {
fill: $color-black !important;
}
/* Images */ img.image {
&-thumbnail { width: $img-width-sm; height: $img-height-sm; object-fit: cover; border-radius: $border-radius; } &-post { width: 100%; border-radius: $border-radius; }
}
/* Home page postcard */ .postcard {
@media(max-width: $breakpoint-lg) { img.image-lg-stretch { display: block !important; width: 100%; height: 100%; margin-top: 1em; } }
}
/* Post and page table of contents */ .toc {
position: sticky; top: $space-4 * 2; overflow-y: auto; max-height: calc(100vh - #{$content-height-offset}); @media(max-width: $breakpoint-lg) { display: none; } .scroll-nav { .scroll-nav__item { padding-left: $space-3; font-size: $post-font-size; } .scroll-nav__sub-item { font-size: $font-size; } .scroll-nav__item, .scroll-nav__sub-item { &--active::before { left: 0; border-left: $border-weight * 2 solid $color-black; content: ""; display: block; position: absolute; height: 1em; } } li { margin-bottom: 1em; list-style-type: none; ol { margin-top: 1em; li { margin-bottom: 0.5em; } } } }
}