props/Props/assets/scss/main.scss

125 lines
2.4 KiB
SCSS
Raw Normal View History

@use "themer";
@use "sass:color";
@use "~/node_modules/bootstrap/scss/bootstrap";
2021-07-13 01:00:17 +00:00
header > nav {
@extend .navbar-expand-lg;
@extend .navbar;
@extend .border-bottom;
@include themer.themed {
background-color: themer.color-of("navbar");
}
.nav-link, .navbar-brand {
@include themer.themed {
color: themer.color-of("bold");
}
&.active {
@include themer.themed {
color: themer.color-of("text");
}
}
}
.navbar-toggler {
.bi-list {
font-size: 1.5rem;
}
}
}
main {
flex-grow: 1;
display: flex;
flex-direction: column;
.tear {
@extend .p-3;
border-top: 1px;
border-top-style: solid;
border-bottom: 1px;
border-bottom-style: solid;
@include themer.themed {
$tear: themer.color-of("background");
border-color: adjust-color($color: $tear, $lightness: -12%, $alpha: 1.0);
background-color: adjust-color($color: $tear, $lightness: -5%, $alpha: 1.0);
}
}
2021-07-13 01:00:17 +00:00
}
footer {
@extend .text-center;
@extend .border-top;
@extend .py-2;
@include themer.themed {
background-color: themer.color-of("footer");
color: themer.color-of("muted");
}
a {
@include themer.themed {
color: themer.color-of("muted");
}
}
width: 100%;
}
.jumbotron {
@extend .container-fluid;
@extend .p-4;
@include themer.themed {
background-color: themer.color-of("main");
}
2021-07-13 01:00:17 +00:00
&.sub {
@include themer.themed {
background-color: themer.color-of("sub");
}
}
}
.concise {
max-width: 630px;
width: inherit;
}
.less-concise {
max-width: 720px;
width: inherit;
}
hr.concise {
2021-07-13 01:00:17 +00:00
@extend .my-3;
@include themer.themed {
2021-07-13 01:00:17 +00:00
color: themer.color-of("bold");
}
width: 15%;
max-width: 160px;
min-width: 32px;
margin-left: auto;
margin-right: auto;
height: 2px;
2021-07-13 01:00:17 +00:00
}
html {
min-height: 100%;
display: flex;
flex-direction: column;
}
body {
display: flex;
flex-direction: column;
flex-grow: 1;
@include themer.themed {
background-color: themer.color-of("background");
color: themer.color-of("text");
}
}
// Site-wide css imports:
@import "~/node_modules/bootstrap-icons/font/bootstrap-icons.css";
@import "~/node_modules/simplebar/dist/simplebar.min.css";