index: release v1.18 with only altgr index linked

[sheet.git] / base.css

diff --git a/base.css b/base.css
index 805046324a3ddfbfd2ac61c07c783fb20908baff..e4ed58d7fb2da99e8fbd74814177f6124730add6 100644 (file)
--- a/base.css
+++ b/base.css
@@ -138,11 +138,6 @@ h2 small {
        grid: auto-flow / 1fr 1fr;
        clear: both;
 }
-@media (max-width: 42em) {
-       .section dl {
-               grid: auto-flow / minmax(8em, 1fr) minmax(20em, 1fr);
-       }
-}
 .section dl > dt {
        grid-column: 1;
        text-align: right;
@@ -154,7 +149,15 @@ dl > dd {
        grid-column: 2;
        text-align: left;
        padding-left: 1em;
-       margin: 0;
+       margin: 0 0 .5ex;
+}
+@media (max-width: 42em) {
+       .section dl {
+               grid: auto-flow / minmax(8em, 1fr) minmax(20em, 1fr);
+       }
+       dl > dd {
+               margin-bottom: 1ex; /* distinguish rows more as dts can wrap */
+       }
 }
 
 /* "keyboard" (list of keys) */
@@ -243,6 +246,49 @@ dl.legend dt,
        font-weight: normal; /* nice and subtle */
 }
 
+/* enlarged keys */
+
+.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 */
+}
+
+.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;
+}
+
 /* tables */
 
 table {
@@ -474,10 +520,10 @@ table.dimap {
 .u-invalid {background: #BBB} /* invalid, impossible */
 
 /* foreground representation */
-#digraphs .u-l3 {color: #080} /* partial */
-#digraphs .u-l3.ex {color: #4C0} /* experimental */
-#digraphs .u-l2 {color: #A44; color: rgba(128, 0, 0, .6)} /* unofficial proposal */
-#digraphs .u-l1 {color: #D00; color: rgba(255, 0, 0, .8)} /* minimal or invalid */
+#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 */
 
 /* support percentage (browser cells) */
 .p0         {opacity: .6}
@@ -549,8 +595,8 @@ table.dimap {
 .l3:hover                                  {background: #FF8}
 .l4:hover                                  {background: #CF8}
 .l5:hover                                  {background: #8F8}
-.u-l3:hover    {outline: 1px solid #080}
-.u-l3.ex:hover {outline: 1px solid #8F0}
+.u-l4:hover    {outline: 1px solid #080}
+.u-l5:hover    {outline: 1px solid #8F0}
 .u-l2:hover    {outline: 1px solid #800}
 .u-l1:hover    {outline: 1px solid #F00}
 
@@ -611,6 +657,7 @@ dl.legend dt.new,
 .keys td.new {
        border-style: dashed;
 }
+.ext,
 dl.legend dt.ext,
 .keys td.ext {
        opacity: .6;
@@ -980,17 +1027,19 @@ body .magic-perma {
        .row4 {margin-left: 7.5em} /* 10em / Δtd */
 
        /* letter scripts columns to rows */
-       .legend .glyphs:first-child td:not(td td) {
+       .legend .glyphs:first-child td {
                display: table-row;
+               vertical-align: baseline;
        }
        .legend .glyphs td > table {
                width: auto;
-               display: inline-block;
-               margin: 1px 0 1px 1ex;
-               vertical-align: -6px;
+               display: inline;
+               margin-left: 1ex;
        }
-       .legend .glyphs td td {
+       .legend .glyphs:first-child td td {
                margin: 2px;
+               display: inline-block;
+               width: auto;
        }
 
        @media (max-width: 61em) {