tools: includes from relative or project paths

[sheet.git] / style / _base.scss

diff --git a/style/_base.scss b/style/_base.scss
index 2a3899b80b88b9255bdf02d657183b9adf5481d8..938f8a009420f909e3f042917f2d852f565658fa 100644 (file)
--- a/style/_base.scss
+++ b/style/_base.scss
@@ -27,14 +27,15 @@ h2, caption {
 }
 caption {
        margin: 1ex;
 }
 caption {
        margin: 1ex;

-}
-caption aside {
-       position: absolute;
-       margin-left: 1ex;
-       font-weight: normal;
-       display: inline;
-       font-size: 91%; /* 100% */
-       margin-top: .3ex; /* align with 110% baseline */
+
+       aside {
+               position: absolute;
+               margin-left: 1ex;
+               font-weight: normal;
+               display: inline;
+               font-size: 91%; /* 100% */
+               margin-top: .3ex; /* align with 110% baseline */
+       }

 }
 
 hr {
 }
 
 hr {


@@ -44,23 +45,25 @@ hr {
        margin: 0;
 }
 
        margin: 0;
 }
 

-.section ul {
-       margin-bottom: 1ex;
-}
-.section h2 {
-       margin: 0 1ex;
-       clear: both;
-}
-.section table {
-       float: left;
-       position: relative; /* prevents buggy hovering in table if caption present in gecko */
-       margin: 1ex 1ex 2ex;
-}
-.section .section {
-       float: left;
-}
-#charset .section table {
-       margin: -0.5ex 0 1ex; /* headers provide sufficient spacing already */
+.section {
+       ul {
+               margin-bottom: 1ex;
+       }
+       h2 {
+               margin: 0 1ex;
+               clear: both;
+       }
+       table {
+               float: left;
+               position: relative; /* prevents buggy hovering in table if caption present in gecko */
+               margin: 1ex 1ex 2ex;
+       }
+       .section {
+               float: left;
+       }
+       #charset & table {
+               margin: -0.5ex 0 1ex; /* headers provide sufficient spacing already */
+       }

 }
 
 p {
 }
 
 p {


@@ -86,12 +89,13 @@ p.footer {
        padding: 1em;
        margin: 2ex auto;
        clear: both;
        padding: 1em;
        margin: 2ex auto;
        clear: both;

-}
-.error > * {
-       margin-bottom: 1ex;
-}
-.error > *:last-child {
-       margin-bottom: 0;
+
+       > * {
+               margin-bottom: 1ex;
+       }
+       > *:last-child {
+               margin-bottom: 0;
+       }

 }
 
 ul {
 }
 
 ul {


@@ -105,16 +109,17 @@ pre {
        margin: 2ex auto;
        white-space: pre-wrap;
        overflow-wrap: break-word;
        margin: 2ex auto;
        white-space: pre-wrap;
        overflow-wrap: break-word;

-}
-body > pre {
-       width: 78ch;
-       tab-size: 4;
-       -moz-tab-size: 4;
-       padding: 0 1em;
-       border-width: 0 1px;
-       border-style: solid;
-       white-space: pre;
-       font-size: 1.9vmin; /* cover full width at most */
+
+       body > & {
+               width: 78ch;
+               tab-size: 4;
+               -moz-tab-size: 4;
+               padding: 0 1em;
+               border-width: 0 1px;
+               border-style: solid;
+               white-space: pre;
+               font-size: 1.9vmin; /* cover full width at most */
+       }

 }
 code {
        white-space: nowrap;
 }
 code {
        white-space: nowrap;


@@ -137,10 +142,11 @@ h2 small {
        display: grid;
        grid: auto-flow / 1fr 1fr;
        clear: both;
        display: grid;
        grid: auto-flow / 1fr 1fr;
        clear: both;

-}
-.section dl > dt {
-       grid-column: 1;
-       text-align: right;
+
+       & > dt {
+               grid-column: 1;
+               text-align: right;
+       }

 }
 dt code {
        white-space: normal;
 }
 dt code {
        white-space: normal;


@@ -174,125 +180,137 @@ dl > dd {
 .row4 {margin-left: 10em} /* should actually align to next key on row1 */
        /* ...however rows>=1 are shifted a bit, to make space */
 
 .row4 {margin-left: 10em} /* should actually align to next key on row1 */
        /* ...however rows>=1 are shifted a bit, to make space */
 

-table.keys tr {
-       clear: both; /* start new row (screen row) */
-       display: block;
+h3 {
+       display: none; /* semantic details (non-css/js) */

 }
 }

-table.keys tbody {
-       /* start new row block (keyboard row) */
-       clear: both;
-       padding-top: 1ex;
-       display: block;
-}
-
-table.keys th,
-h3      {display: none} /* semantic details (non-css/js) */
-.keys .mode {display: none} /* initially hidden (only show interactively (js)) */

 
 

-table.keys {
-       display: block;
-       border-spacing: 0;
-       border-collapse: collapse;
-       white-space: nowrap;
-       text-align: left;
-}
+.keys {
+       @at-root #{selector-unify(table, &)} {
+               display: block;
+               border-spacing: 0;
+               border-collapse: collapse;
+               white-space: nowrap;
+               text-align: left;

 
 

-/* individual keys */
+               tr {
+                       clear: both; /* start new row (screen row) */
+                       display: block;
+               }
+               tbody {
+                       /* start new row block (keyboard row) */
+                       clear: both;
+                       padding-top: 1ex;
+                       display: block;
+               }
+               th {
+                       @extend h3;
+               }
+       }

 
 

-dl.legend dt,
-.keys td {
-       display: inline-block;
-       white-space: normal;
-       width: 6.2em;
-       line-height: 2.25ex; /* a little terser (seems to be gecko's default anyway) */
-       height: 4.5ex; /* 2 lines */
-       overflow: hidden;
-       margin: 0 2px -1px;
-       padding: 0;
-       text-align: center;
-       border: 1px solid #000;
-       border-radius: 4px;
-       -moz-border-radius: 4px;
-       text-transform-variation: text;
-}
-.keys td b {
-       float: left;
-       font-size: 200%;
-       line-height: 2.5ex; /* inherits otherwise */
-       padding-left: 2px;
-}
-.keys .row0 td { /* omni-present esc */
-       width: 8.5em;
-}
+       /* individual keys */

 
 

-/* fine tuning of special occurrences */
+       .mode {
+               @extend h3; /* initially hidden (only show interactively (js)) */
+       }
+       @at-root {
+               dl.legend dt,
+               & td {
+                       display: inline-block;
+                       white-space: normal;
+                       width: 6.2em;
+                       line-height: 2.25ex; /* a little terser (seems to be gecko's default anyway) */
+                       height: 4.5ex; /* 2 lines */
+                       overflow: hidden;
+                       margin: 0 2px -1px;
+                       padding: 0;
+                       text-align: center;
+                       border: 1px solid #000;
+                       border-radius: 4px;
+                       -moz-border-radius: 4px;
+                       text-transform-variation: text;
+               }
+       }
+       td b {
+               float: left;
+               font-size: 200%;
+               line-height: 2.5ex; /* inherits otherwise */
+               padding-left: 2px;
+       }
+       .row0 td { /* omni-present esc */
+               width: 8.5em;
+       }

 
 

-.keys td b[title] { /* mnemonic hover */
-       cursor: help;
-}
-.keys td[onclick]:hover { /* link */
-       cursor: pointer;
-}
-.keys td a { /* key link */
-       color: inherit;
-       text-decoration: none;
-       display: block;
-       height: 100%;
-}
+       /* fine tuning of special occurrences */

 
 

-.keys .meta td b,
-.keys .ctrl td b,
-.keys .lead td b { /* char with ctrl or leading key */
-       font-size: 100%; /* space is too limited for 2+ double-sized chars */
-       line-height: 5ex; /* keep double height though */
-}
-.keys .meta td b small,
-.keys .ctrl td b small { /* meta key indicator */
-       font-size: 70%;
-       font-weight: normal; /* nice and subtle */
-}
+       td b[title] { /* mnemonic hover */
+               cursor: help;
+       }
+       td[onclick]:hover { /* link */
+               cursor: pointer;
+       }
+       td a { /* key link */
+               color: inherit;
+               text-decoration: none;
+               display: block;
+               height: 100%;
+       }

 
 

-/* enlarged keys */
+       .meta, .ctrl, .lead {
+               td b { /* char with ctrl or leading key */
+                       font-size: 100%; /* space is too limited for 2+ double-sized chars */
+                       line-height: 5ex; /* keep double height though */
+               }
+       }
+       .meta, .ctrl {
+               td b small { /* meta key indicator */
+                       font-size: 70%;
+                       font-weight: normal; /* nice and subtle */
+               }
+       }

 
 

-.keys.big td {
-       width: 1em;
-       min-width: auto;
-       height: 2.25ex;
-       font-size: 200%;
-       font-size: calc(7vmin - 4px); /* fit 12 keys to page */
-       overflow: visible;
-       position: relative;
-       padding: 0;
-       margin: 0 .2vw -1px;
-}
+       /* enlarged keys */
+
+       &.big {
+               td {
+                       width: 1em;
+                       min-width: auto;
+                       height: 2.25ex;
+                       font-size: 200%;
+                       font-size: calc(7vmin - 4px); /* fit 12 keys to page */
+                       overflow: visible;
+                       position: relative;
+                       padding: 0;
+                       margin: 0 .2vw -1px;
+               }

 
 

-/* override row alignments */
-.keys.big tbody {
-       font-size: calc(1.4vmin); /* enlarged td conversion */
-}
-.keys.big .row2 {margin-left: 7em}
-.keys.big .row3 {margin-left: 8em}
-.keys.big .row4 {margin-left: 10em}
-.keys.big .row0 {
-       display: none; /* headerless */
-}
+               /* override row alignments */
+               tbody {
+                       font-size: calc(1.4vmin); /* enlarged td conversion */
+               }
+               .row2 {margin-left: 7em}
+               .row3 {margin-left: 8em}
+               .row4 {margin-left: 10em}
+               .row0 {
+                       display: none; /* headerless */
+               }

 
 

-.keys.big td b {
-       position: absolute; /* overlay */
-       z-index: 1;
-       top: -1.2ex; /* halfway over shift */
-       left: 0;
-       right: 0;
-       font-size: 50%;
-       opacity: .5;
-       color: #FFF;
-       line-height: 2.25ex;
-}
-.keys.big.cmp td b,
-.keys.big .ctrl td b,
-.keys.big .meta td b,
-.keys.big .shift td b {
-       display: none;
+               td b {
+                       position: absolute; /* overlay */
+                       z-index: 1;
+                       top: -1.2ex; /* halfway over shift */
+                       left: 0;
+                       right: 0;
+                       font-size: 50%;
+                       opacity: .5;
+                       color: #FFF;
+                       line-height: 2.25ex;
+               }
+               &.cmp, .ctrl, .meta, .shift {
+                       td b {
+                               display: none;
+                       }
+               }
+       }

 }
 
 /* tables */
 }
 
 /* tables */


@@ -331,20 +349,22 @@ thead {
 
 /* character table */
 
 
 /* character table */
 

-.glyphs thead th, .glyphs td {
-       width: 1.6em; /* regular interval */
-}
-.glyphs tbody td {
-       font-size: 112%;
-}
-.glyphs.big tbody td {
-       font-size: 200%;
-}
-.glyphs .glyphs {
-       margin: 0.5ex 0; /* nested in legend */
-}
-.glyphs .glyphs td {
-       font-size: 100%;
+.glyphs {
+       thead th, td {
+               width: 1.6em; /* regular interval */
+       }
+       tbody td {
+               font-size: 112%;
+       }
+       &.big tbody td {
+               font-size: 200%;
+       }
+       & & {
+               margin: 0.5ex 0; /* nested in legend */
+               td {
+                       font-size: 100%;
+               }
+       }

 }
 
 .cover td {
 }
 
 .cover td {


@@ -387,21 +407,25 @@ tfoot .cat th {
 
 /* colour map */
 
 
 /* colour map */
 

-table.color td {
-       border: 1px solid #555;
-       font-weight: normal;
-       padding: 0 8px;
-}
-table.color td samp {
-       margin: 0 -8px 0 8px;
-       font-family: inherit;
-       float: right;
-}
-table.color td samp ~ samp {
-}
-table.color td samp small {
-       font: 100% monospace;
-       padding: 0 .5ex;
+table.color {
+       td {
+               & {
+                       border: 1px solid #555;
+                       font-weight: normal;
+                       padding: 0 8px;
+               }
+               samp {
+                       margin: 0 -8px 0 8px;
+                       font-family: inherit;
+                       float: right;
+               }
+               samp ~ samp {
+               }
+               samp small {
+                       font: 100% monospace;
+                       padding: 0 .5ex;
+               }
+       }

 }
 
 /* digraphs map */
 }
 
 /* digraphs map */


@@ -409,26 +433,28 @@ table.color td samp small {
 table.dimap {
        table-layout: fixed; /* prevent resizing, notably in msie6 */
 }
 table.dimap {
        table-layout: fixed; /* prevent resizing, notably in msie6 */
 }

-.dimap thead th, .dimap td {
-       /* below-maximum size (but still average enough to be regular) so we can fit more */
-       width: 1.2em; /* msie only looks at the first row */
-       min-width: 1em; /* prevents gecko from restricting to page width */
-}
-.dimap th {
-       text-align: center; /* row headers are also glyph-sized */
+.dimap {
+       thead th, td {
+               /* below-maximum size (but still average enough to be regular) so we can fit more */
+               width: 1.2em; /* msie only looks at the first row */
+               min-width: 1em; /* prevents gecko from restricting to page width */
+       }
+       th {
+               text-align: center; /* row headers are also glyph-sized */
+       }

 }
 
 }
 

-.mapped tbody, .mapped colgroup,
-.dimap tbody, .dimap colgroup {
-       border: 2px double #888; /* major character group grid */
-}
-.mapped tbody,
-.dimap tbody {
-       border-width: 2px 0; /* horizontal group dividers */
-}
-.mapped colgroup,
-.dimap colgroup {
-       border-width: 0 2px; /* vertical divides */
+.mapped,
+.dimap {
+       tbody, colgroup {
+               border: 2px double #888; /* major character group grid */
+       }
+       tbody {
+               border-width: 2px 0; /* horizontal group dividers */
+       }
+       colgroup {
+               border-width: 0 2px; /* vertical divides */
+       }

 }
 
 /* digraph selection */
 }
 
 /* digraph selection */


@@ -437,36 +463,39 @@ table.dimap {
        -moz-column-width: 24em;
        -webkit-column-width: 24em;
        column-width: 24em;
        -moz-column-width: 24em;
        -webkit-column-width: 24em;
        column-width: 24em;

-}
-.diinfo > div {
-       overflow: hidden;
-       column-break-inside: avoid;
-       -webkit-column-break-inside: avoid;
-       position: relative; z-index: 1; /* webkit bug */
+
+       & > div {
+               overflow: hidden;
+               column-break-inside: avoid;
+               -webkit-column-break-inside: avoid;
+               position: relative; z-index: 1; /* webkit bug */
+       }

 }
 
 /* glyph cell overlay (digraph labels) */
 
 }
 
 /* glyph cell overlay (digraph labels) */
 

-.glyphs.dilabel td {
-       padding: 0;
-       padding-bottom: 1.1ex; /* reserve space for label */
-       vertical-align: bottom;
-}
-.glyphs.dilabel small {
-       font-size: 50%;
-       display: block;
-       margin-top: 0.2ex;
-       margin-bottom: -2.2ex; /* take cell padding */
-}
-.glyphs.dilabel small.digraph {
-       background: #000;
-       color: #FFF;
-       opacity: 0.3;
-}
-.glyphs.dilabel small.value {
-       background: #600;
-       color: #FFF;
-       opacity: 0.3;
+.glyphs.dilabel {
+       td {
+               padding: 0;
+               padding-bottom: 1.1ex; /* reserve space for label */
+               vertical-align: bottom;
+       }
+       small {
+               font-size: 50%;
+               display: block;
+               margin-top: 0.2ex;
+               margin-bottom: -2.2ex; /* take cell padding */
+       }
+       small.digraph {
+               background: #000;
+               color: #FFF;
+               opacity: 0.3;
+       }
+       small.value {
+               background: #600;
+               color: #FFF;
+               opacity: 0.3;
+       }

 }
 
 /* character properties */
 }
 
 /* character properties */


@@ -526,10 +555,12 @@ table.dimap {
 .u-invalid {background: #BBB} /* invalid, impossible */
 
 /* foreground representation */
 .u-invalid {background: #BBB} /* invalid, impossible */
 
 /* foreground representation */

-#digraphs .u-l4 {color: #080} /* partial */
-#digraphs .u-l5 {color: #4C0} /* experimental */
-#digraphs .u-l2 {color: #A44; color: rgba(128, 0, 0, .6)} /* unofficial */
-#digraphs .u-l1 {color: #D00; color: rgba(255, 0, 0, .8)} /* missing */
+#digraphs {
+       .u-l4 {color: #080} /* partial */
+       .u-l5 {color: #4C0} /* experimental */
+       .u-l2 {color: #A44; color: rgba(128, 0, 0, .6)} /* unofficial */
+       .u-l1 {color: #D00; color: rgba(255, 0, 0, .8)} /* missing */
+}

 
 /* support percentage (browser cells) */
 .p0         {opacity: .6}
 
 /* support percentage (browser cells) */
 .p0         {opacity: .6}


@@ -673,49 +704,60 @@ dl.legend dt.ext,
 .help {
        display: table;
        width: 100%;
 .help {
        display: table;
        width: 100%;

-}
-.help > * {
-       display: table-cell;
-       width: 20%;
-       vertical-align: top;
-}

 
 

-.left dl.legend {
-       margin-left: 6.4em; /* a bit over 6.2em to allow for borders+padding (border-sizing would work too) */
-}
-.left dl.legend dt {
-       margin-left: -6.4em; /* msie<=6 multiply this by two for some reason */
-       float: left;
-       clear: left;
-}
-.left dl.legend dd {
-       float: left; /* align next to dt (except msie<=7 does just the opposite) */
-}
-.right dl.legend {
-       margin-right: 6.4em;
-}
-.right dl.legend dt {
-       margin-right: -6.4em;
-       float: right;
-       clear: right;
+       & > * {
+               display: table-cell;
+               width: 20%;
+               vertical-align: top;
+       }

 }
 }

-.right dl.legend dd {
-       float: right;
+
+.left {
+       dl.legend {
+               & {
+                       margin-left: 6.4em; /* a bit over 6.2em to allow for borders+padding (border-sizing would work too) */
+               }
+               dt {
+                       margin-left: -6.4em; /* msie<=6 multiply this by two for some reason */
+                       float: left;
+                       clear: left;
+               }
+               dd {
+                       float: left; /* align next to dt (except msie<=7 does just the opposite) */
+               }
+       }

 }
 .right {
 }
 .right {

-       text-align: right;
+       dl.legend {
+               & {
+                       margin-right: 6.4em;
+               }
+               dt {
+                       margin-right: -6.4em;
+                       float: right;
+                       clear: right;
+               }
+               dd {
+                       float: right;
+               }
+       }
+       & {
+               text-align: right;
+       }

 }
 
 /* help/legend */
 
 }
 
 /* help/legend */
 

-dl.legend dt {
-       margin: 0 0 1px; /* distinct keys */
-       height: auto; /* not key-height */
-       padding: 2px 0;
-}
-dl.legend dd {
-       margin: 3px 0.4em 0; /* align text (add dt border+padding height) */
-       padding: 0;
+dl.legend {
+       dt {
+               margin: 0 0 1px; /* distinct keys */
+               height: auto; /* not key-height */
+               padding: 2px 0;
+       }
+       dd {
+               margin: 3px 0.4em 0; /* align text (add dt border+padding height) */
+               padding: 0;
+       }

 }
 
 dl.legend-options dt {
 }
 
 dl.legend-options dt {


@@ -725,19 +767,21 @@ dl.legend-options dt {
 ul.legend-set {
        clear: right;
        padding-top: 1ex;
 ul.legend-set {
        clear: right;
        padding-top: 1ex;

-}
-ul.legend-set li {
-       margin: 6px 0; /* similar to dl legends */
+
+       li {
+               margin: 6px 0; /* similar to dl legends */
+       }

 }
 
 .legend {
        margin-top: 1em;
 }
 
 .legend {
        margin-top: 1em;

-}
-.legend table {
-       width: 100%;
-}
-.legend td {
-       padding: 0 0.2em;
+
+       table {
+               width: 100%;
+       }
+       td {
+               padding: 0 0.2em;
+       }

 }
 
 /* images */
 }
 
 /* images */


@@ -745,10 +789,11 @@ ul.legend-set li {
 figure {
        margin: 0;
        position: relative;
 figure {
        margin: 0;
        position: relative;

-}
-figure img {
-       vertical-align: bottom;
-       width: 100%;
+
+       img {
+               vertical-align: bottom;
+               width: 100%;
+       }

 }
 
 @media (min-width: 60em) {
 }
 
 @media (min-width: 60em) {


@@ -779,60 +824,62 @@ figure img {
        display: grid;
        grid: auto-flow dense / repeat(auto-fit, minmax(200px, 1fr));
        grid-gap: 1px;
        display: grid;
        grid: auto-flow dense / repeat(auto-fit, minmax(200px, 1fr));
        grid-gap: 1px;

-}
-.gallery li, .gallery ul {
-       display: contents;
-}
-.gallery figure {
-       overflow: hidden;
-       box-sizing: border-box;
-       hyphens: auto;
-       max-width: 900px;
-}
-.gallery figcaption > small {
-       display: inline-block;
-}

 
 

-@media (min-width: 403px) and (min-height: 266px) {
-       /* able to fit 2 cells of 200x133 */
-       .gallery li.large > figure {
-               grid-row: span 2;
-               grid-column: span 2;
+       li, ul {
+               display: contents;

        }
        }

-}
-@media (min-width: 603px) and (min-height: 400px) {
-       /* fit 3 cells of 200x133 */
-       .gallery > li:first-child > figure,
-       .gallery li.huge > figure {
-               grid-row: span 3;
-               grid-column: span 3;
+       figure {
+               overflow: hidden;
+               box-sizing: border-box;
+               hyphens: auto;
+               max-width: 900px;
+       }
+       figcaption > small {
+               display: inline-block;

        }
        }

-}

 
 

-.gallery figure, .gallery figcaption {
-       transition: all .5s ease-in;
-}
-.gallery figure:hover ~ ul figcaption {
-       /* mark all children */
-       color: #FFF;
-       background: rgba(0, 0, 0, .5);
-}
+       @media (min-width: 403px) and (min-height: 266px) {
+               /* able to fit 2 cells of 200x133 */
+               li.large > figure {
+                       grid-row: span 2;
+                       grid-column: span 2;
+               }
+       }
+       @media (min-width: 603px) and (min-height: 400px) {
+               /* fit 3 cells of 200x133 */
+               > li:first-child > figure,
+               li.huge > figure {
+                       grid-row: span 3;
+                       grid-column: span 3;
+               }
+       }

 
 

-.gallery figure[data-sup]:after {
-       position: absolute;
-       right: 0;
-       content: attr(data-sup);
-       color: #FFF;
-       background: #0006;
-       border-radius: 1em;
-       padding: .1ex .4em;
-       margin: .4em;
-}
-.gallery .expand > figure[data-sup]:after {
-       content: '+' attr(data-sup);
-       background: #0008;
-       font-size: 150%;
-       border: 2px solid #FFF8;
+       figure, figcaption {
+               transition: all .5s ease-in;
+       }
+       figure:hover ~ ul figcaption {
+               /* mark all children */
+               color: #FFF;
+               background: rgba(0, 0, 0, .5);
+       }
+
+       $oversup: 'figure[data-sup]:after'; // select parent overlays
+       #{$oversup} {
+               position: absolute;
+               right: 0;
+               content: attr(data-sup);
+               color: #FFF;
+               background: #0006;
+               border-radius: 1em;
+               padding: .1ex .4em;
+               margin: .4em;
+       }
+       .expand > #{$oversup} {
+               content: '+' attr(data-sup);
+               background: #0008;
+               font-size: 150%;
+               border: 2px solid #FFF8;
+       }

 }
 
 /* specialised galleries */
 }
 
 /* specialised galleries */


@@ -842,61 +889,68 @@ body#word {
 }
 
 table.gallery {
 }
 
 table.gallery {

-       grid-auto-flow: row;
-       grid-template-columns: repeat(auto-fit, minmax(2em, max-content)); /* 1fr */
-}
-table.gallery tbody,
-table.gallery tr {
-       display: contents;
-}
-table.gallery tr > :first-child {
-       grid-column: 1;
-       -grid-row: span 6;
-       margin: auto; /* vertical-align: middle */
-}
-table.gallery tr > :nth-child(2) {
-       grid-column: 2; /* in case 1st is missing */
-}
-table.gallery td {
-       border: 0; /* does not collapse */
-       outline: 1px solid #888; /* over grid-gap */
+       & {
+               grid-auto-flow: row;
+               grid-template-columns: repeat(auto-fit, minmax(2em, max-content)); /* 1fr */
+       }
+       tbody,
+       tr {
+               display: contents;
+       }
+       tr > :first-child {
+               grid-column: 1;
+               -grid-row: span 6;
+               margin: auto; /* vertical-align: middle */
+       }
+       tr > :nth-child(2) {
+               grid-column: 2; /* in case 1st is missing */
+       }
+       td {
+               border: 0; /* does not collapse */
+               outline: 1px solid #888; /* over grid-gap */
+       }

 }
 
 /* page-specific */
 
 }
 
 /* page-specific */
 

-#browser td > a {
-       text-decoration: none;
-}
-#browser td > a:active,
-#browser td > a:hover {
-       text-decoration: underline;
-}
-#browser tr .aside {
-       font-size: 80%;
-       overflow: hidden;
-       height: 0;
-       -webkit-transition: all 1s ease-in;
-       -o-transition: all 1s ease-in;
-       -moz-transition: all 1s ease-in;
-       transition: height 1s ease-in;
-}
-#browser tr .aside p {
-       margin: 1ex 0;
-}
-#browser tr.target .aside,
-#browser tr:target .aside {
-       height: auto;
-}
-#browser td.X {
-       white-space: nowrap; /* some browsers break on dashes */
-}
+#browser {
+       td > a {
+               text-decoration: none;
+       }
+       td > a:active,
+       td > a:hover {
+               text-decoration: underline;
+       }
+       tr .aside {
+               font-size: 80%;
+               overflow: hidden;
+               height: 0;
+               -webkit-transition: all 1s ease-in;
+               -o-transition: all 1s ease-in;
+               -moz-transition: all 1s ease-in;
+               transition: height 1s ease-in;
+
+               p {
+                       margin: 1ex 0;
+               }
+       }
+       tr.target, tr:target {
+               .aside {
+                       height: auto;
+               }
+       }
+       td.X {
+               white-space: nowrap; /* some browsers break on dashes */
+       }

 
 

-#browser tr:target > td:first-of-type,
-#browser tr.focus > td:first-of-type {
-       background: inherit;
-}
-#browser tr.focus > td {
-       border-bottom-color: #000;
+       tr:target, tr.focus {
+               & > td:first-of-type {
+                       background: inherit;
+               }
+       }
+       tr.focus > td {
+               border-bottom-color: #000;
+       }

 }
 
 form.aside {
 }
 
 form.aside {


@@ -969,19 +1023,21 @@ nav > .section {
        .row4 {margin-left: 7.5em} /* 10em / Δtd */
 
        /* letter scripts columns to rows */
        .row4 {margin-left: 7.5em} /* 10em / Δtd */
 
        /* letter scripts columns to rows */

-       .legend .glyphs:first-child td {
-               display: table-row;
-               vertical-align: baseline;
-       }
-       .legend .glyphs td > table {
-               width: auto;
-               display: inline;
-               margin-left: 1ex;
-       }
-       .legend .glyphs:first-child td td {
-               margin: 2px;
-               display: inline-block;
-               width: auto;
+       .legend .glyphs {
+               &:first-child td {
+                       display: table-row;
+                       vertical-align: baseline;
+               }
+               td > table {
+                       width: auto;
+                       display: inline;
+                       margin-left: 1ex;
+               }
+               &:first-child td td {
+                       margin: 2px;
+                       display: inline-block;
+                       width: auto;
+               }

        }
 
        @media (max-width: 61em) {
        }
 
        @media (max-width: 61em) {


@@ -1012,17 +1068,19 @@ nav > .section {
                        clear: left;
                }
                .right dl.legend {
                        clear: left;
                }
                .right dl.legend {

-                       margin-right: 0;
-                       margin-left: 6.4em;
-               }
-               .right dl.legend dt {
-                       margin-right: 0;
-                       margin-left: -6.4em;
-                       float: left;
-                       clear: left;
-               }
-               .right dl.legend dd {
-                       float: left;
+                       & {
+                               margin-right: 0;
+                               margin-left: 6.4em;
+                       }
+                       dt {
+                               margin-right: 0;
+                               margin-left: -6.4em;
+                               float: left;
+                               clear: left;
+                       }
+                       dd {
+                               float: left;
+                       }

                }
        }
 }
                }
        }
 }