sc: spread related data over second line on small screens

[sheet.git] / sc.css

diff --git a/sc.css b/sc.css
index 45d86382cd05ebd05180ef4c7f20fa74a98f2d3a..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%;
@@ -157,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;
+       }
+}
+