X-Git-Url: https://git.draconx.ca/gitweb/homepage.git/blobdiff_plain/062c731462e3ec513b470308cc2dd475098ce231..HEAD:/content/style.scss

diff --git a/content/style.scss b/content/style.scss
index 5f2ef96..17aff0b 100644
--- 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 {
@@ -70,6 +67,8 @@ h1 { @include header_size(60em, 2em); }
 h2 { @include header_size(60em, 1.5em); }
 h5 { @include header_size(60em, 1em); }
 
+h1, h2 { abbr { text-decoration: none; } }
+
 @supports (display: grid) {
     .gallery {
         display: grid;
@@ -79,6 +78,16 @@ h5 { @include header_size(60em, 1em); }
 
         p.img { margin: 0.5em 0; }
     }
+
+    @media (max-width: 45em) {
+        .inline.gallery {
+            display: block;
+            p.img {
+                a { max-width: 24em; }
+                margin: 1em 0;
+            }
+        }
+    }
 }
 
 p.img {
@@ -97,12 +106,22 @@ p.img {
         border: solid 2px;
     }
 
+    a.left { margin: 0 1em 0.5em 0; float: left; clear: left; }
+    a.right { margin: 0 0 0.5em 1em; float: right; clear: right; }
+    a.left, a.right {
+        @media (max-width: 45em) { float: none; margin: 0; }
+
+        max-width: 24em;
+    }
+
     small {
         @include usecolours($color: foreground);
-        text-align: justify;
         @media (max-width: 24em) { text-align: left; }
         padding: 0.5ex;
         display: block;
+        display: -moz-inline-box;
+        display: inline-block;
+        text-align: justify;
         font-size: 0.9em;
     }
 }
@@ -140,10 +159,12 @@ kbd {
     font-family: monospace;
     font-size: 0.95em;
     &:before { content: "% "; }
+    &.ok:before { content: "ok "; }
     &>span { white-space: nowrap; }
 
     blockquote & {
         display: block;
+        & + br { display: none; }
         text-align: left;
         padding-left: 3em;
         text-indent: -3em;
@@ -163,6 +184,7 @@ kbd {
 table {
     @include usecolour(border-top, ruledefault, 1px solid);
     border-collapse: collapse;
+    clear: both;
     width: 100%;
 }
 
@@ -206,8 +228,8 @@ table.cc {
     }
 }
 
-// CSS rules for stortable clicky table headers: Update the display of
-// the /table based on the current state.  Each column has its own set
+// CSS rules for sortable clicky table headers: Update the display of
+// the table based on the current state.  Each column has its own set
 // nearly-identical rules, only the class names differ.
 //
 // The clickytables.xsl stylesheet generates two inputs for each column.
@@ -329,7 +351,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 +476,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);
                 }
             }
         }