Apply background colour to the html element.

[homepage.git] / content / style.scss

diff --git a/content/style.scss b/content/style.scss
index 5f2ef9686cff45de2ac8899ff196ddd7aa5ee193..2708bb462e00c701f9b563fe9dec8ac94f67d9e5 100644 (file)
--- a/content/style.scss
+++ b/content/style.scss
@@ -40,14 +40,11 @@
     max-width: 1em * ($maxwidth / $fontsize);
 }
 
+html { @include usecolours($background-color: background); }
 body {
+    @include usecolours($color: foreground);
     font-family: sans-serif;
     margin: 1em;
-
-    @include usecolours
-        ( $background-color: background
-        , $color: foreground
-        );
 }
 
 a:link {
@@ -329,7 +326,7 @@ $clickynames: name, date, size;
         @include usecolours($border-color: foreground);
         @at-root { @supports (outline-style: auto) { & {
             @include usecolour(outline, focusring, auto);
-            border-color: transparent;
+            border-color: transparent !important;
         }}}
     }
 }
@@ -454,15 +451,22 @@ ul.ordered > {
     #footer { padding: 0 1em; }
 }
 
+// lighten icon shadows in dark mode
+@media (prefers-color-scheme: dark) {
+    svg.icons { path.shadow, g.shadow>* { opacity: 0.7; } }
+    svg.icons .shadow>stop { stop-color: #aaa; }
+    svg.return path.shadow { opacity: 0.45; }
+}
+
 // page-specific dark mode styles
-@media (min-width: 35em) {
+@media (prefers-color-scheme: dark) and (min-width: 35em) {
     #page_weblog_responsive_tables {
         @each $tN in t6 t7 t8 {
             ##{$tN}>tbody>tr.#{$tN}-split {
-                @include usecolour_var_(border-bottom, ruledefault);
+                @include usecolour_dark_(border-bottom, ruledefault);
 
                 &:nth-of-type(odd) ~ tr:nth-of-type(odd) {
-                    @include usecolour_var_(background-color, tableshade);
+                    @include usecolour_dark_(background-color, tableshade);
                 }
             }
         }