diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index a1fce9866..5c6df6083 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -24,6 +24,7 @@ + {{/* Deferred loading of css based on: https://web.dev/defer-non-critical-css/ */}} @@ -32,6 +33,7 @@ + diff --git a/static/css/collapse-tables.css b/static/css/collapse-tables.css new file mode 100644 index 000000000..6916b70dc --- /dev/null +++ b/static/css/collapse-tables.css @@ -0,0 +1,61 @@ +@media screen and (max-width: 576px) { + table.js-collapse { + border-collapse: collapse; + margin: 0; + padding: 0; + display: block; + width: 100%; + table-layout: fixed; + overflow-x: unset; + } + + table.js-collapse tbody { + display: block; + width:100%; + } + + table.js-collapse caption { + font-size: 1.3em; + } + + table.js-collapse thead { + border: none; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + + table.js-collapse tr { + border-bottom: 3px solid #ddd; + display: block; + margin-bottom: .625em; + } + + table.js-collapse td { + border-bottom: 1px solid #ddd; + display: block; + font-size: .8em; + text-align: right; + background: #FFF !important; + min-height: 40px; + } + + table.js-collapse td:nth-child(odd) { + background: #E9ECEF !important; + } + + table.js-collapse td::before { + content: attr(data-label); + float: left; + font-weight: bold; + text-transform: uppercase; + } + + table.js-collapse td:last-child { + border-bottom: 0; + } +} \ No newline at end of file diff --git a/static/css/master.css b/static/css/master.css index becdc1bbf..c0e87ca04 100644 --- a/static/css/master.css +++ b/static/css/master.css @@ -53,6 +53,17 @@ footer a:hover { text-decoration: none; } +@media screen and (max-width:576px) { + .subtext { + margin-top:20% + } + .xs-center { + display: block; + margin-left: auto; + margin-right: auto; + } +} + /* ================================================================== */ /* Rows */ @@ -176,16 +187,6 @@ p.cta a::after { content: " →"; } -@media screen and (max-width:576px) { - .subtext { - margin-top:20% - } - .xs-center { - display: block; - margin-left: auto; - margin-right: auto; - } -} /* ================================================================== */ /* Block quotes */ @@ -233,6 +234,10 @@ table { background: white; border-radius: 3px; border-collapse: collapse; + overflow-x: auto; + display: block; + width: max-content; + max-width: 100%; padding: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); animation: float 5s infinite; @@ -296,7 +301,7 @@ td { text-align: center; vertical-align: middle; font-weight: 300; - font-size: 18px; + font-size: 16px; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1); border-right: 1px dashed #FFF; } diff --git a/static/js/collapse-tables.js b/static/js/collapse-tables.js new file mode 100644 index 000000000..a7d419f17 --- /dev/null +++ b/static/js/collapse-tables.js @@ -0,0 +1,15 @@ +document.addEventListener("DOMContentLoaded", function() { + const tables = Array.from(document.querySelectorAll("table")); + console.log(tables) + tables.forEach((table, i) => { + table.classList.add("js-collapse"); + let labels = []; + table.querySelectorAll("thead th").forEach(function(header, i) { + labels.push(header.innerText); + }); + console.log(labels) + table.querySelectorAll("table tbody tr td").forEach(function(cell, i) { + cell.setAttribute("data-label", labels[cell.cellIndex]); + }); + }); +}); \ No newline at end of file