59 lines
1.2 KiB
SCSS
59 lines
1.2 KiB
SCSS
@use "../abstracts/functions" as *;
|
|
|
|
// Make focused anchor not get covered by header
|
|
:target:not(#main-content) {
|
|
scroll-margin-block-start: 6.5rem;
|
|
}
|
|
|
|
:focus-visible,
|
|
:target:not(#main-content) {
|
|
animation: focus-in var(--transition);
|
|
outline: 0.125rem solid var(--accent-color);
|
|
outline-offset: 0.125rem;
|
|
|
|
@keyframes focus-in {
|
|
from {
|
|
outline: 0.5rem solid transparent;
|
|
outline-offset: 0.25rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Style text selection to use accent color
|
|
::selection {
|
|
background-color: var(--accent-color);
|
|
color: var(--contrast-color);
|
|
}
|
|
|
|
body {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
background-color: var(--bg-color);
|
|
color: var(--fg-color);
|
|
font-family: var(--font-sans-serif), var(--font-system-ui), var(--font-emoji);
|
|
overflow-wrap: break-word;
|
|
|
|
@supports (min-height: 100dvh) {
|
|
min-height: 100dvh;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0s !important;
|
|
transition-duration: 0s !important;
|
|
}
|
|
}
|
|
|
|
// Disable blur on Firefox Mobile
|
|
@-moz-document url-prefix() {
|
|
@media only screen and (max-width: 960px) {
|
|
.firefox-unblur,
|
|
.firefox-unblur::before,
|
|
.firefox-unblur::after {
|
|
backdrop-filter: none !important;
|
|
}
|
|
}
|
|
}
|