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,21 +1,5 @@
@import "variables.scss";
$code-color-lineno: grey;
:root {
--code-color-keyword: black;
--code-color-type: black;
--code-color-comment: grey;
}
@media (prefers-color-scheme: dark) {
:root {
--code-color-keyword: #{darken(white, 40%)};
--code-color-type: #{darken(white, 40%)};
--code-color-comment: grey;
}
}
.highlight-label {
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
border: $code-border;
@@ -32,7 +16,7 @@ $code-color-lineno: grey;
code {
font-family: $font-code;
background-color: var(--code-color);
@include var(background-color, code-color);
border: $code-border;
padding: 0 0.25rem 0 0.25rem;
}
@@ -48,7 +32,7 @@ pre code {
.lntable {
border-spacing: 0;
padding: 0.5rem 0 0.5rem 0;
background-color: var(--code-color);
@include var(background-color, code-color);
border-radius: 0;
border: $code-border;
display: block;
@@ -80,7 +64,7 @@ pre code {
.lnt {
display: block;
padding: 0 1rem 0 1rem;
color: $code-color-lineno;
color: $code-lineno-color;
}
.hl {
@@ -95,14 +79,14 @@ pre code {
.kr, .k {
font-weight: bold;
color: var(--code-color-keyword);
@include var(color, code-keyword-color);
}
.kt {
font-weight: bold;
color: var(--code-color-type);
@include var(color, code-type-color);
}
.c, .c1 {
color: var(--code-color-comment);
color: $code-comment-color;
}