100 lines
1.8 KiB
SCSS
100 lines
1.8 KiB
SCSS
@use "themer";
|
|
@use "sass:color";
|
|
@use "/node_modules/bootstrap/scss/bootstrap";
|
|
@import "/node_modules/bootstrap-icons/font/bootstrap-icons.css"; // @use introduces errors. Perhaps webpack is missing a loader?
|
|
|
|
header > nav {
|
|
@extend .navbar;
|
|
@extend .navbar-expand-lg;
|
|
|
|
position: fixed !important;
|
|
top: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
|
|
@include themer.themed {
|
|
border-bottom-color: color.adjust(themer.color-of("navbar"), $lightness: 10%);
|
|
background-color: color.change($color: themer.color-of("navbar"), $alpha: 0.75);
|
|
}
|
|
|
|
.navbar-brand {
|
|
@include themer.themed {
|
|
color: themer.color-of("navbar-brand");
|
|
}
|
|
}
|
|
|
|
.nav-link {
|
|
@include themer.themed {
|
|
color: themer.color-of("navbar-link");
|
|
}
|
|
&.active {
|
|
@include themer.themed {
|
|
color: themer.color-of("navbar-active");
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-toggler {
|
|
@include themer.themed {
|
|
color: color.invert(themer.color-of("navbar"), 100%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.pages {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
flex-direction: column;
|
|
|
|
.page {
|
|
min-height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.contained-title {
|
|
text-align: center;
|
|
max-width: 50%;
|
|
}
|
|
|
|
.panels {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
.panel {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100%;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-grow: 1;
|
|
@include themer.themed {
|
|
color: themer.color-of("text");
|
|
background-color: themer.color-of("background");
|
|
}
|
|
}
|