From 0af9d23e4989ed7ada10e6990802ccd9a28d8797 Mon Sep 17 00:00:00 2001
From: zhixuan <59254886+zhixuan2333@users.noreply.github.com>
Date: Thu, 20 Jan 2022 20:09:25 +0900
Subject: 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                    | 14 --------------
 assets/scss/partials/layout/article.scss          | 12 ++++++++++--
 assets/scss/variables.scss                        |  1 +
 exampleSite/content/post/markdown-syntax/index.md |  4 ++++
 layouts/partials/article/components/content.html  |  4 +++-
 5 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/assets/scss/partials/base.scss b/assets/scss/partials/base.scss
index ab3bf42..f02dcbd 100644
--- a/assets/scss/partials/base.scss
+++ b/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;
-}
-/**/
diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss
index 7059853..b421cfc 100644
--- a/assets/scss/partials/layout/article.scss
+++ b/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);
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index c75eb5c..8e371d6 100644
--- a/assets/scss/variables.scss
+++ b/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";
diff --git a/exampleSite/content/post/markdown-syntax/index.md b/exampleSite/content/post/markdown-syntax/index.md
index 85fdcff..be381a0 100644
--- a/exampleSite/content/post/markdown-syntax/index.md
+++ b/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
diff --git a/layouts/partials/article/components/content.html b/layouts/partials/article/components/content.html
index fc0f8f6..61e536c 100644
--- a/layouts/partials/article/components/content.html
+++ b/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>
-- 
cgit v1.2.3