You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
1.1 KiB
SCSS
39 lines
1.1 KiB
SCSS
@use '../utilities/main_utilities' as *;
|
|
|
|
html{scroll-behavior: smooth}
|
|
@media (prefers-reduced-motion: reduce){
|
|
html{scroll-behavior: auto}
|
|
}
|
|
|
|
/* Footer fixed to bottom */
|
|
html,body{height: 100%}
|
|
body{display: flex;flex-direction: column;}
|
|
main, .main{ flex: 1 0 auto }
|
|
|
|
|
|
html{
|
|
font-size: $font-size; /* rem based on this (root element), em is based on the parent element of wherever the change is */
|
|
// @include media($media-xl){ font-size: 1vw; } /* (Potential) for better responsive scaling on larger monitors. Trying out */
|
|
}
|
|
|
|
body {
|
|
background: $color-background;
|
|
color: $color-text;
|
|
font-family: $font-family;
|
|
line-height: $line-height;
|
|
overflow-x: hidden;
|
|
@include reset; /* Margin 0, padding 0. Testing new @use/@forward as globals aren't allowed... */
|
|
|
|
@include color-scheme(dark) {
|
|
background: $color-background--dark;
|
|
color: $color-text--dark;
|
|
}
|
|
}
|
|
|
|
// On very small screens allow the text to completetly distort itself to fit on the page
|
|
*{
|
|
overflow-wrap: anywhere;
|
|
@include media($media-xs){
|
|
overflow-wrap: normal;
|
|
}
|
|
} |