mirror of
https://gitlab.com/veilid/veilid-dot-com.git
synced 2024-09-08 18:13:35 +00:00
161 lines
2.5 KiB
SCSS
161 lines
2.5 KiB
SCSS
![]() |
|
||
|
#site-logo {
|
||
|
max-height: 4rem;
|
||
|
|
||
|
@extend .my-2;
|
||
|
@extend .me-3;
|
||
|
}
|
||
|
|
||
|
#site-title {
|
||
|
display: block;
|
||
|
position: absolute;
|
||
|
top: -100vh;
|
||
|
}
|
||
|
|
||
|
|
||
|
.navbar-toggler img {
|
||
|
min-height: 2rem;
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
/*
|
||
|
// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
|
||
|
@include media-breakpoint-up(sm) { ... }
|
||
|
@include media-breakpoint-up(md) { ... }
|
||
|
@include media-breakpoint-up(lg) { ... }
|
||
|
@include media-breakpoint-up(xl) { ... }
|
||
|
@include media-breakpoint-up(xxl) { ... }
|
||
|
*/
|
||
|
|
||
|
|
||
|
@mixin nav-link-theme {
|
||
|
@extend .nav;
|
||
|
@extend .me-3;
|
||
|
|
||
|
.nav-link:visited, .nav-link:link, .nav-link:hover, .nav-link:active, .nav-link.active {
|
||
|
text-align: left !important;
|
||
|
padding: 0.25rem 0.5rem;
|
||
|
background: transparent !important;
|
||
|
}
|
||
|
.nav-link:visited, .nav-link:link {
|
||
|
text-decoration: underline;
|
||
|
color: $veilid_purple_medium;
|
||
|
}
|
||
|
.nav-link:hover, .nav-link:active {
|
||
|
text-decoration: none;
|
||
|
color: $veilid_fuchsia !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.header-nav {
|
||
|
@include nav-link-theme;
|
||
|
display: block;
|
||
|
li {
|
||
|
display: block;
|
||
|
@extend .my-4;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
@include media-breakpoint-up(lg) {
|
||
|
.header-nav {
|
||
|
display: flex;
|
||
|
li {
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.subsectionnav {
|
||
|
@include nav-link-theme;
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
|
||
|
#site-options {
|
||
|
font-family: 'Atkinson Hyperlegible', sans-serif;
|
||
|
color: $black;
|
||
|
background-color: #E3E4F1;
|
||
|
a:link, a:active, a:visited, a:hover {
|
||
|
color: inherit;
|
||
|
img {
|
||
|
height: 1.5em;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
}
|
||
|
@include media-breakpoint-up(lg) {
|
||
|
#site-options img {
|
||
|
padding-right: 0.25rem;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
#site-nav {
|
||
|
@extend .mt-2;
|
||
|
@extend .mb-4;
|
||
|
}
|
||
|
|
||
|
|
||
|
#site-nav .navbar-brand {
|
||
|
margin-right: 2rem;
|
||
|
}
|
||
|
|
||
|
|
||
|
html, body {
|
||
|
height: 100%;
|
||
|
}
|
||
|
|
||
|
body {
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
#content {
|
||
|
flex: 2;
|
||
|
margin-top: 0rem;
|
||
|
margin-bottom: 4rem;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 992px) {
|
||
|
.subsectionnav li {
|
||
|
display: block;
|
||
|
width: 100%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
#page-footer {
|
||
|
background-color: $black;
|
||
|
color: $white;
|
||
|
padding: 2rem;
|
||
|
p {
|
||
|
margin: 1rem 0;
|
||
|
}
|
||
|
a:link, a:active, a:hover, a:visited {
|
||
|
color: $white;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
@include media-breakpoint-up(md) {
|
||
|
.col-list { columns: 2; }
|
||
|
}
|
||
|
@include media-breakpoint-up(lg) {
|
||
|
.col-list { columns: 3; }
|
||
|
}
|
||
|
|
||
|
|
||
|
.front-page-hero {
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
justify-content: end;
|
||
|
height: 25vh;
|
||
|
@extend .mb-4;
|
||
|
.focus-text {
|
||
|
margin-bottom: 0 !important;
|
||
|
}
|
||
|
.take-back-control {
|
||
|
margin: 0 !important;
|
||
|
h2 {
|
||
|
margin: 0 !important;
|
||
|
}
|
||
|
}
|
||
|
}
|