feat: added table styling (#129)

Author: lamATnginx

assets/css/v2/style.css

@@ -19,6 +19,7 @@
     --color-footer: #1D1D1D;
     --color-footer-text: #E2E2E2;
     --color-product-title: #8D8D8D;
+    --color-table-divider: #CCCCCC;
 
     --sidebar-margin: 24px;
     --sidebar-line-box-side-length: 8px;
@@ -27,6 +28,13 @@
     --sidebar-width: 24rem;
     --sidebar-line-width: 11.5px;
     --side-gutter-width: 20rem;
+    --table-top-bottom-spacing: 3rem;
+    --table-row-space-between: 1.5rem;
+    --table-min-column-spacing-narrow: 1.5rem;
+    --table-min-column-spacing-wide: 0.75rem;
+    --table-header-bottom-spacing: 1rem;
+    --table-line-extension: 1rem;
+    --table-line-height: 1px;
     --text-content-width-iphone-13: 30rem;
     --text-content-width-mbp-14: 40rem;
     --text-content-width-mbp-16: 50rem;
@@ -188,11 +196,6 @@ nav {
     min-width: 100%;
 }
 
-.main-layout {
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
 .sidebar-layout {
     display: flex;
     flex-direction: column;
@@ -205,58 +208,6 @@ nav {
     }
 }
 
-.text-content {
-    grid-column-start: 1;
-}
-
-@media (min-width: 1512px) { /* Macbook Pro 14 */
-    .main-layout {
-        display: grid;
-        grid-template-columns: var(--sidebar-width) 1fr;
-        column-gap: var(--component-gap);
-    }
-
-    .content-layout {
-        display: grid;
-        grid-template-columns: var(--text-content-width-mbp-14) var(--side-gutter-width); 
-        column-gap: var(--component-gap);
-    }
-
-    .content-layout .side-gutter {
-        grid-column-start: 2;
-    }
-
-    .base-layout {
-        display: grid;
-        grid-template-rows: repeat(2, auto);
-        column-gap: var(--component-gap);
-    }
-
-    .breadcrumb-layout {
-        display: grid;
-        grid-template-columns: var(--sidebar-width) 1fr;
-        column-gap: var(--component-gap);
-        align-items: center;
-        margin: 0 2rem;
-    }
-}
-
-@media (min-width: 1728px) { /* Macbook Pro 16 */
-    .content-layout {
-        display: grid;
-        grid-template-columns: var(--text-content-width-mbp-16) var(--side-gutter-width); 
-        column-gap: var(--component-gap);
-    }
-}
-
-@media (min-width: 2560px) { /* 4k Desktop */
-    .content-layout {
-        display: grid;
-        grid-template-columns: var(--text-content-width-4k-display) var(--side-gutter-width); 
-        column-gap: var(--component-gap);
-    }
-}
-
 #searchbox {
     width: 24rem;
     display:none;
@@ -286,14 +237,21 @@ nav {
     flex-direction: column;
 }
 
-.content-layout {
+.text-content {
+    grid-column-start: 1;
     display: grid;
-    grid-template-columns: var(--text-content-width-iphone-13) var(--side-gutter-width); 
-    column-gap: var(--component-gap);
 }
 
-.text-content {
-    grid-column-start: 1;
+.text-content > :not(.wide) {
+    grid-column: 1;
+}
+
+.text-content .wide {
+    grid-column: 1 / -1;
+}
+
+.text-content table {
+    width: 100%;
 }
 
 @media (min-width: 1512px) { /* Macbook Pro 14 */
@@ -310,6 +268,11 @@ nav {
         align-items: center;
     }
 
+    .text-content {
+        grid-template-columns: var(--text-content-width-mbp-14) var(--side-gutter-width);
+        column-gap: var(--component-gap);
+    }
+
     .main-layout {
         display: grid;
         grid-template-columns: var(--sidebar-width) 1fr;
@@ -333,6 +296,11 @@ nav {
         grid-template-columns: var(--text-content-width-mbp-16) var(--side-gutter-width); 
         column-gap: var(--component-gap);
     }
+
+    .text-content {
+        grid-template-columns: var(--text-content-width-mbp-16) var(--side-gutter-width);
+        column-gap: var(--component-gap);
+    }
 }
 
 @media (min-width: 2560px) { /* 4k Desktop */
@@ -341,6 +309,11 @@ nav {
         grid-template-columns: var(--text-content-width-4k-display) var(--side-gutter-width); 
         column-gap: var(--component-gap);
     }
+
+    .text-content {
+        grid-template-columns: var(--text-content-width-4k-display) var(--side-gutter-width);
+        column-gap: var(--component-gap);
+    }
 }
 
 .main {
@@ -672,6 +645,65 @@ h2 {
     margin: 3rem 0 1rem 0;
 }
 
+/* tables */
+table {
+    td {
+        padding: var(--table-row-space-between) 0;
+    }
+    
+    th {
+        font-weight: bold;
+        text-align: start;
+        vertical-align: top;
+        padding-bottom: var(--table-header-bottom-spacing);
+    }
+    
+    tr {
+        position: relative;
+    }
+    
+    tr::after {
+        content: '';
+        position: absolute;
+        border-bottom: var(--table-line-height) solid var(--color-table-divider);
+        bottom: 0;
+        left: calc(-1 * var(--table-line-extension));
+        width: calc(100% + (2 * var(--table-line-extension)));
+    }
+}
+
+.narrow table {
+    min-width: 100%;
+    margin: var(--table-top-bottom-spacing) 0;
+    border-collapse: collapse;
+}
+
+.wide table {
+    margin: var(--table-top-bottom-spacing) 0;
+    border-collapse: collapse;
+}
+
+.narrow table th,
+.narrow table td {
+    padding-left: var(--table-min-column-spacing-narrow);
+}
+
+.wide table th,
+.wide table td {
+    padding-left: var(--table-min-column-spacing-wide);
+}
+
+table th:first-child,
+table td:first-child {
+    padding-left: 0;
+}
+
+table hr {
+    color: var(--color-table-divider);
+    border: none;
+    border-bottom: var(--table-line-height) solid var(--color-table-divider);
+}
+
 /* callouts */
 blockquote {
     border: 1px solid var(--color-foreground);

layouts/_default/baseof.html

@@ -72,6 +72,10 @@
         }
       });
 
+      document.querySelectorAll(".table-v1").forEach((table) => {
+        table.style.display = isNewTheme ? "none" : "";
+      });
+
       const mfElements = ['[data-mf="true"]'];
       mfElements.forEach((elementId) => {
         document.querySelectorAll(elementId).forEach(

layouts/shortcodes/bootstrap-table.html

@@ -1,6 +1,17 @@
 {{ $htmlTable := .Inner | markdownify }}
 {{ $class := .Get 0 }}
 {{ $old := "<table>" }}
-{{ $new := printf "<table class=\"%s\">" $class }}
+{{ $new := printf "<table class=\"%s %s\">" $class "table-v1" }}
 {{ $htmlTable := replace $htmlTable $old $new }}
-{{ $htmlTable | safeHTML }}
+{{ $htmlTable | safeHTML }}
+
+<!-- Add default option for table of "narrow" if one is not provided -->
+{{ $narrowOption := "narrow" }}
+{{ $wideOption := "wide" }}
+{{ if and (not (strings.Contains $class $narrowOption)) (not (strings.Contains $class $wideOption)) }}
+  {{ $class = printf "%s %s" $class $narrowOption }}
+{{ end }}
+
+<div data-mf="true" style="display: none;" class="table-v2 {{ $class }}">
+    {{ .Inner | markdownify }}
+</div>