2 * Nick's web site: default stylesheet
4 * Copyright © 2018-2022 Nick Bowler
6 * This program is free software: you can redistribute it and/or modify
7 * it under the terms of the GNU General Public License as published by
8 * the Free Software Foundation, either version 3 of the License, or
9 * (at your option) any later version.
11 * This program is distributed in the hope that it will be useful,
12 * but WITHOUT ANY WARRANTY; without even the implied warranty of
13 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14 * GNU General Public License for more details.
16 * You should have received a copy of the GNU General Public License
17 * along with this program. If not, see <https://www.gnu.org/licenses/>.
20 @import "lib/colourmap.scss";
23 ( $background: #ffffff #000000
24 , $foreground: #000000 #ffffff
26 , $linkdefault: #0000cd #a3aaff
27 , $linkactive: #ff0000
28 , $linkvisited: #800080 #e493f7
31 , $annotation: #708090
32 , $tableshade: #f5f5f5 #101010
34 , $ruledefault: #d3d3d3 #494949
35 , $rulestrong: #696969 #939393
38 @mixin header_size($maxwidth, $fontsize) {
40 max-width: 1em * ($maxwidth / $fontsize);
43 html { @include usecolours($background-color: background); }
45 @include usecolours($color: foreground);
46 font-family: sans-serif;
51 @include usecolours($color: linkdefault, $border-color: linkdefault);
54 @include usecolours($color: linkvisited, $border-color: linkvisited);
57 @include usecolours($color: linkactive, $border-color: linkactive);
60 @supports (outline-style: auto) {
61 a:link { border-width: 0; }
62 a:focus { @include usecolour(outline, focusring, auto); }
63 li, td, dt { &>a:link { border: solid 1px transparent; } }
66 h1 { @include header_size(60em, 2em); }
67 h2 { @include header_size(60em, 1.5em); }
68 h5 { @include header_size(60em, 1em); }
70 @supports (display: grid) {
74 grid-template-columns: repeat( auto-fill, minmax(18em, 1fr) );
77 p.img { margin: 0.5em 0; }
85 vertical-align: bottom;
92 text-decoration: none;
93 display: inline-block;
98 @include usecolours($color: foreground);
100 @media (max-width: 24em) { text-align: left; }
109 @media (max-width: 28em) { text-align: left; }
114 p, table, div, ul, ol, dl, hr {
120 p, table, body>div, h5 { margin: 1em 0; }
122 @media (max-width: 28em) { margin: 1em 0.5em; }
126 li { margin: 0 0 0 2em; }
127 dd { margin: 0 0 0 1em; }
133 @include usecolour(border-top, ruledefault, 1px solid);
137 font-family: monospace;
139 &:before { content: "% "; }
140 &>span { white-space: nowrap; }
151 @include usecolours($color: annotation);
154 a:link, a:visited { color: inherit; }
155 a:active { @include usecolours($color: linkactive); }
156 @media not screen { visibility: hidden; }
159 // General table styles.
161 @include usecolour(border-top, ruledefault, 1px solid);
162 border-collapse: collapse;
166 table>* { font-size: 0.9em; }
176 vertical-align: middle;
182 thead>tr, tbody>tr { @include usecolour(border, ruledefault, solid); }
183 th, thead>tr { @include usecolour(border-bottom, rulestrong, 1px solid); }
184 tbody+tbody { @include usecolour(border-bottom, ruledefault, 1px solid); }
185 *>table, *>th { border: none; }
186 thead>tr { border-width: 1px; }
187 tbody>tr { border-width: 0 1px; }
190 @include usecolour(box-shadow, background, -1px 0);
194 &:nth-of-type(even) { @include usecolours($background-color: tableshade); }
195 &:last-child { @include usecolour(border-bottom, ruledefault, solid 1px); }
198 // Specific table styles
200 &>tr>*:first-child, &>*>tr>*:first-child {
201 &+* { text-align: center; }
206 // CSS rules for stortable clicky table headers: Update the display of
207 // the /table based on the current state. Each column has its own set
208 // nearly-identical rules, only the class names differ.
210 // The clickytables.xsl stylesheet generates two inputs for each column.
211 // These inputs are siblings of the table and all precede it in document
212 // order. Moreover, the inputs for a column are ordered with respect to
213 // each other, in this sequence:
215 // input.clicky-NAME -- checked iff NAME is selected for sorting.
216 // input.clicky-NAME-rev -- checked to select reverse order.
218 // One of the column selection inputs will have a 'checked' attribute to
219 // indicate the default order. This input is always first in document
220 // order. No other inputs begin checked.
222 // The table itself consists of a thead (where the header labels are
223 // located) and two tbody elements. The bulk of these rules relate
224 // to updating the headers to visually indicate the current state.
226 // A sortable column's th element has the .clicky-NAME class, matching
227 // its corresponding inputs, and has two label children. The first label
228 // is visible only when the column is unselected, and is linked to the
229 // .clicky-NAME input to activate that column. The second label is visible
230 // only on the selected column and is linked to the .clicky-NAME-rev input
231 // to toggle the reverse order.
233 // For the table body, the first tbody contains the default ordering
234 // and is not styled by these rules (except to hide it when alternate
235 // orderings are selected). The second tbody contains rows for all
236 // alternate orderings, and is revealed by these rules. When revealed,
237 // rows with the NAMEfwd or NAMErev class (for the forward and reverse
238 // orderings, respectively) are shown and other rows are hidden.
240 $clickynames: name, date, size;
241 @each $col in $clickynames {
242 input.clicky-#{$col} {
245 // Update table header state
246 & th.clicky-#{$col} {
248 display: -moz-inline-box !important;
249 display: inline-block !important;
251 label { display: none; }
254 // Show only appropriate items from the sort body (forward)
255 &>tbody+tbody>tr.#{$col}fwd { display: table-row; }
256 &>tbody+tbody>tr { display: none; }
260 &+tbody { display: table-row-group !important; }
265 // reverse state for selected sort column
266 &~input.clicky-#{$col}-rev {
268 // Show only appropriate items from sort body (reversed)
269 &>tbody+tbody>tr.#{$col}rev { display: table-row; }
270 &>tbody+tbody>tr { display: none; }
274 &+tbody { display: table-row-group !important; }
279 // Unhide to allow keyboard navigation to this input
280 display: block !important;
284 // If default input element is the only one selected, match it to
285 // return to default view (overriding the changes above). It is
286 // always the first input element among all the sibling elements.
287 // This seems to interoperate better than using the [checked] or
288 // :first-of-type selectors.
289 @at-root &:first-child, :not(input)+& {
290 &:checked~table>tbody {
291 &+tbody { display: none !important; }
292 display: table-row-group;
296 // Unhide to allow keyboard navigation
297 display: block !important;
298 pointer-events: none;
304 input.clicky-#{$col}-rev {
306 // Update table header state
307 & th.clicky-#{$col} {
309 display: -moz-inline-box !important;
310 display: inline-block !important;
312 .svg { display: none; }
316 pointer-events: none;
322 $focuslabel: ":focus ~ table th.clicky-#{$col}>label~label";
323 #{"input.clicky-#{$col+$focuslabel}"}>span:first-child
324 , #{"input.clicky-#{$col}-rev#{$focuslabel}"} .svg
326 @include usecolours($border-color: foreground);
327 @at-root { @supports (outline-style: auto) { & {
328 @include usecolour(outline, focusring, auto);
329 border-color: transparent !important;
340 display: -moz-inline-box;
341 display: inline-block;
342 border: 1px dotted transparent;
343 vertical-align: middle;
346 // Expand the first label a bit so the table (hopefully)
347 // does not reshape as columns are selected.
349 margin-right: 1.75em;
353 &:active { @include usecolours($color: linkactive); }
354 &:first-child:active>span, &~label:active>.svg {
355 @include usecolours($border-color: linkactive);
356 @at-root { @supports (outline-style: auto) { & {
357 @include usecolour(outline, focusring, auto);
358 border-color: transparent;
366 .svg, svg, img.svgfallback {
370 .svg svg { width: 1.5em; }
374 &>*>tr>*:first-child {
376 // chrome doesn't like width: 0 for some reason
381 .svg, svg, img.svgfallback {
382 vertical-align: middle;
388 svg { width: 1.5em; }
389 display: inline-block;
395 #breadcrumbs>*, #sitetitle>* { font-size: 0.8em; }
399 list-style-type: none;
405 li + li:before { content: "/ "; }
408 display: inline-block;
413 #footer, #article-info {
420 display: inline-block;
427 #footer p { @include usecolours($color: annotation); }
428 #article-info p { font-style: italic; }
430 .wbr:after { content: "\200b"; }
432 // "unordered" lists with explicit ordering in content
434 li { list-style: none; }
435 li>span:first-child, li>*:first-child>span:first-child {
436 display: inline-block;
443 @media (max-width: 512px) {
444 body { margin: 0.6em; }
445 ul ul { margin-left: -1.2em; }
449 @media (max-width: 35em) {
450 #sitetitle * { float: none; }
451 #footer { padding: 0 1em; }
454 // lighten icon shadows in dark mode
455 @media (prefers-color-scheme: dark) {
456 svg.icons { path.shadow, g.shadow>* { opacity: 0.7; } }
457 svg.icons .shadow>stop { stop-color: #aaa; }
458 svg.return path.shadow { opacity: 0.45; }
461 // page-specific dark mode styles
462 @media (prefers-color-scheme: dark) and (min-width: 35em) {
463 #page_weblog_responsive_tables {
464 @each $tN in t6 t7 t8 {
465 ##{$tN}>tbody>tr.#{$tN}-split {
466 @include usecolour_dark_(border-bottom, ruledefault);
468 &:nth-of-type(odd) ~ tr:nth-of-type(odd) {
469 @include usecolour_dark_(background-color, tableshade);