From 869f9d12c84ebf38fe8f21611af9d3bf7ff5ea0d Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Sat, 10 Sep 2022 17:20:54 -0700
Subject: [PATCH] Add a shortcode for folding rows of a table on small screens

---
 assets/scss/style.scss            | 14 ++++++++------
 layouts/shortcodes/foldtable.html |  1 +
 2 files changed, 9 insertions(+), 6 deletions(-)
 create mode 100644 layouts/shortcodes/foldtable.html

diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 01b77a2..d5ade8a 100755
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -149,10 +149,12 @@ table {
     padding: 0.5rem;
 }
 
-tr {
-    @include below-container-width {
-        display: flex;
-        flex-direction: column;
+.fold-table + table {
+    tr {
+        @include below-container-width {
+            display: flex;
+            flex-direction: column;
+        }
     }
 }
 
@@ -160,11 +162,11 @@ td {
     @include below-container-width {
         overflow-x: auto;
     }
-    padding: 0.5rem;
 }
 
-th {
+td, th {
     padding: 0.5rem;
+    vertical-align: top;
 }
 
 div.highlight tr {
diff --git a/layouts/shortcodes/foldtable.html b/layouts/shortcodes/foldtable.html
new file mode 100644
index 0000000..402d623
--- /dev/null
+++ b/layouts/shortcodes/foldtable.html
@@ -0,0 +1 @@
+<span class="fold-table"></span>