From 21849b023654cbe057ee7d44cee215f519da4cac Mon Sep 17 00:00:00 2001
From: zhixuan <jinzhixuan666@gmail.com>
Date: Thu, 9 Dec 2021 18:03:06 +0900
Subject: [PATCH] feat: table can't scroll & delete scrollbar style for
 Chromium

---
 assets/scss/partials/base.scss                | 14 -------------
 assets/scss/partials/layout/article.scss      | 21 +++++++++++++++----
 assets/scss/variables.scss                    |  1 +
 .../partials/article/components/content.html  |  4 +++-
 4 files changed, 21 insertions(+), 19 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..2b5afe4 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);
                 }
@@ -264,7 +265,11 @@
         &.has-image {
             .article-details {
                 padding: 20px;
-                background: linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.75) 100%);
+                background: linear-gradient(
+                    0deg,
+                    rgba(0, 0, 0, 0.25) 0%,
+                    rgba(0, 0, 0, 0.75) 100%
+                );
             }
         }
     }
@@ -303,7 +308,8 @@
     blockquote {
         position: relative;
         margin: 1.5em 0;
-        border-left: var(--blockquote-border-size) solid var(--card-separator-color);
+        border-left: var(--blockquote-border-size) solid
+            var(--card-separator-color);
         padding: 15px calc(var(--card-padding) - var(--blockquote-border-size));
         background-color: var(--blockquote-background-color);
     }
@@ -359,6 +365,12 @@
         }
     }
 
+    .table-wrapper {
+        padding: 0 var(--card-padding);
+        overflow-x: auto;
+        display: block;
+    }
+
     table {
         width: 100%;
         border-collapse: collapse;
@@ -407,9 +419,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/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>