Add fallbacks to CSS variables for older browsers

This commit is contained in:
2023-03-11 14:07:43 -08:00
parent c631be65bc
commit 0bd55bc58a
7 changed files with 71 additions and 61 deletions

View File

@@ -1,10 +1,11 @@
@import "variables.scss";
@import "mixins.scss";
@import "toc.scss";
@import "modes.scss";
body {
background-color: var(--background-color);
color: var(--text-color);
@include var(background-color, background-color);
@include var(color, text-color);
font-family: $font-body;
font-size: 1.0rem;
line-height: 1.5;
@@ -24,7 +25,7 @@ h1, h2, h3, h4, h5, h6 {
text-align: center;
&:target {
background-color: var(--target-background-color);
@include var(background-color, target-background-color);
border-radius: 1rem;
}
@@ -90,7 +91,7 @@ nav {
a {
padding: 0.25rem 0.75rem 0.25rem .75rem;
text-decoration: none;
color: var(--text-color);
@include var(color, text-color);
display: inline-block;
border-bottom: none;
white-space: nowrap;
@@ -130,7 +131,7 @@ h6 {
}
a {
color: var(--text-color);
@include var(color, text-color);
text-decoration: none;
border-bottom: .2rem solid $primary-color;
transition: color 0.25s;
@@ -272,8 +273,8 @@ figure {
.warning {
@include bordered-block;
padding: 0.5rem;
background-color: var(--warning-background-color);
border-color: var(--warning-border-color);
@include var(background-color, warning-background-color);
@include var(border-color, warning-border-color);
}
.feather {