feat(article): add scroll for table (#428)

* feat: table can't scroll & delete scrollbar style for Chromium

* Undo some line breaks

* Add a table with overflow to exampleSite

assets/scss/partials/base.scss

@@ -23,17 +23,3 @@ body {
     scrollbar-color: var(--scrollbar-thumb) transparent;
 }
 /**/
-
-/* scrollbar styles for Chromium */
-::-webkit-scrollbar {
-    height: auto;
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar-thumb);
-}
-
-::-webkit-scrollbar-track {
-    background-color: transparent;
-}
-/**/

assets/scss/partials/layout/article.scss

@@ -71,7 +71,8 @@
                 text-transform: unset;
             }
 
-            .article-copyright, .article-lastmod {
+            .article-copyright,
+            .article-lastmod {
                 a {
                     color: var(--body-text-color);
                 }
@@ -359,6 +360,12 @@
         }
     }
 
+    .table-wrapper {
+        padding: 0 var(--card-padding);
+        overflow-x: auto;
+        display: block;
+    }
+
     table {
         width: 100%;
         border-collapse: collapse;
@@ -407,9 +414,10 @@
     /// Negative margins
     blockquote,
     figure,
-    .gallery,
     pre,
+    .gallery,
     .video-wrapper,
+    .table-wrapper,
     .s_video_simple {
         margin-left: calc((var(--card-padding)) * -1);
         margin-right: calc((var(--card-padding)) * -1);

assets/scss/variables.scss

@@ -8,6 +8,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 }
 
 [data-scheme="dark"] {
+    color-scheme: dark;
     --pre-text-color: #f8f8f2;
     --pre-background-color: #272822;
     @import "partials/highlight/dark.scss";

exampleSite/content/post/markdown-syntax/index.md

@@ -69,6 +69,10 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 | --------  | -------- | ------ |
 | *italics* | **bold** | `code` |
 
+| A                                                        | B                                                                                                             | C                                                                                                                                    | D                                                 | E                                                          | F                                                                    |
+|----------------------------------------------------------|---------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------|------------------------------------------------------------|----------------------------------------------------------------------|
+| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Phasellus ultricies, sapien non euismod aliquam, dui ligula tincidunt odio, at accumsan nulla sapien eget ex. | Proin eleifend dictum ipsum, non euismod ipsum pulvinar et. Vivamus sollicitudin, quam in pulvinar aliquam, metus elit pretium purus | Proin sit amet velit nec enim imperdiet vehicula. | Ut bibendum vestibulum quam, eu egestas turpis gravida nec | Sed scelerisque nec turpis vel viverra. Vivamus vitae pretium sapien |
+
 ## Code Blocks
 
 #### Code block with backticks

layouts/partials/article/components/content.html

@@ -1,3 +1,5 @@
 <section class="article-content">
-    {{ .Content }}
+    <!-- Refer to https://discourse.gohugo.io/t/responsive-tables-in-markdown/10639/5 -->
+    {{ $wrappedTable := printf "<div class=\"table-wrapper\">${1}</div>" }}
+    {{ .Content | replaceRE "(<table>(?:.|\n)+?</table>)" $wrappedTable | safeHTML }}
 </section>