sc: spread related data over second line on small screens

[sheet.git] / sc.css

diff --git a/sc.css b/sc.css
index 17aec8160b73c5ae906b39de2b92eb3214c56c8f..2d73ee0537a7b98370cf066264de98fdc8ac9974 100644 (file)
--- a/sc.css
+++ b/sc.css
@@ -9,6 +9,7 @@
        padding: 0 0.2em;
        background: transparent;
        text-align: left;
+       vertical-align: top;
 }
 tr.alt td {
        font-size: 70%;
@@ -37,6 +38,12 @@ table h2 {
 .units td.unit + td.unit {
        padding-left: 0;
 }
+.gas {
+       color: #040;
+}
+.min, .min a:not(:hover) {
+       color: #004;
+}
 .unit-supply {
        color: #080;
 }
@@ -47,15 +54,22 @@ table h2 {
        color: #C88;
        font-size: 70%;
 }
-.unit-s {color: #770}
+.unit-air {
+       color: #08C;
+}
+.unit-x {color: #888}
+.unit-s {color: #890}
 .unit-m {color: #C70}
 .unit-l {color: #D22}
 .unit-h {color: #804}
-td .unit-massive,
 td .unit-jump,
 .hurt .unit-splash {
        position: absolute;
 }
+td .unit-massive {
+       float: right;
+       width: 0;
+}
 .hurtrel, .units .hurtrel {
        color: #778;
 }
@@ -97,6 +111,16 @@ tbody .unit-shield {
 .unit-magic {
        padding-left: 0.5em;
 }
+.magic-opt::before {
+       color: #000;
+       content: '(';
+       position: absolute;
+       margin-left: -0.33em;
+}
+.magic-opt::after {
+       color: #000;
+       content: ')';
+}
 .magic-perma {
        text-decoration: underline;
                text-decoration-color: #8C0;
@@ -134,3 +158,76 @@ tbody .unit-shield {
        margin-right: 2em;
 }
 
+@media (max-width: 52em) {
+       .units {
+               width: auto;
+       }
+       .units th {
+       }
+       .units td {
+               height: 2em;
+       }
+
+       .units tbody .cat {
+               position: absolute;
+               visibility: hidden;
+       }
+       .units td:nth-child(2) {
+               max-width: 6.5em;
+               white-space: normal;
+               overflow: hidden;
+       }
+
+       .units thead th:first-child,
+       .units .cat,
+       .units .unit-speed,
+       .units .hurtrel,
+       .units .unit-pop, .units .unit-type,
+       .units .unit-shield,
+       .units .gas {
+               padding: 0;
+               position: absolute;
+               margin-top: 3.2ex;
+               margin-top: 1rem;
+               min-width: 4em;
+               text-align: right;
+               margin-left: -4.3em;
+               font-size: 70%;
+       }
+       .units th.unit-attr {
+               position: absolute;
+       }
+       .units .unit-type {
+               text-align: left;
+               margin-left: 0;
+       }
+       .units .unit-speed {
+               margin-left: -6em;
+       }
+       .units .alt thead th:first-child,
+       .units .alt .cat,
+       .units .alt .unit-speed,
+       .units .alt .hurtrel,
+       .units .alt .unit-pop, .units .alt .unit-type,
+       .units .alt .unit-shield,
+       .units .alt .gas {
+               margin-top: 2ex;
+       }
+       .units .cat {
+               margin-top: -2ex;
+               margin-left: 0;
+               text-align: left;
+       }
+
+       .units thead th:first-child {
+               margin-left: 0.5em;
+       }
+       .units thead th:first-child,
+       .units th.unit-speed,
+       .units th.hurtrel,
+       .units th.unit-shield,
+       .units th.gas {
+               margin-top: 2.2ex;
+       }
+}
+