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 {
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;
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 {
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;
}
}
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;
table {
@include usecolour(border-top, ruledefault, 1px solid);
border-collapse: collapse;
+ clear: both;
width: 100%;
}
}
}
-// 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.
@include usecolours($border-color: foreground);
@at-root { @supports (outline-style: auto) { & {
@include usecolour(outline, focusring, auto);
- border-color: transparent;
+ border-color: transparent !important;
}}}
}
}
#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);
}
}
}