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