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
This commit is contained in:
zhixuan 2022-01-20 20:09:25 +09:00 committed by GitHub
parent 3b98d3ba05
commit 0af9d23e49
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 18 additions and 17 deletions

View file

@ -23,17 +23,3 @@ body {
scrollbar-color: var(--scrollbar-thumb) transparent; 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;
}
/**/

View file

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

View file

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

View file

@ -69,6 +69,10 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
| -------- | -------- | ------ | | -------- | -------- | ------ |
| *italics* | **bold** | `code` | | *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 Blocks
#### Code block with backticks #### Code block with backticks

View file

@ -1,3 +1,5 @@
<section class="article-content"> <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> </section>