diff options
| -rw-r--r-- | assets/css/components/_markdown.scss | 31 | ||||
| -rw-r--r-- | assets/css/components/_post.scss | 31 | ||||
| -rw-r--r-- | layouts/_default/_markup/render-table.html | 24 |
3 files changed, 70 insertions, 16 deletions
diff --git a/assets/css/components/_markdown.scss b/assets/css/components/_markdown.scss index d1e1c50d..4378d398 100644 --- a/assets/css/components/_markdown.scss +++ b/assets/css/components/_markdown.scss @@ -109,17 +109,28 @@ $em-text-color: #889E73; background-color: rgba(255, 235, 0, .5) } - table { - border-collapse: collapse; - border-top: 2px solid var(--border-color); + .table-container { overflow-x: auto; - width: 100%; - tr { - border-bottom: 1px solid var(--border-color); - } - td, th { - padding: 0.5rem 1rem; - line-height: 1.5; + -webkit-overflow-scrolling: touch; + + table { + border-collapse: collapse; + table-layout: fixed; + min-width: 100%; + width: max-content; + + border-top: 2px solid var(--border-color); + + tr { + border-bottom: 1px solid var(--border-color); + } + td, th { + max-width: 200px; + padding: 0.5rem 1rem; + line-height: 1.5; + white-space: normal; + word-wrap: break-word; + } } } diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss index 4497a7cc..4c05841a 100644 --- a/assets/css/components/_post.scss +++ b/assets/css/components/_post.scss @@ -59,18 +59,37 @@ position: absolute; z-index: 5; - right: 1rem; - top: 1rem; - width: 5rem; + right: 0.25rem; + top: 0.25rem; + width: 3rem; + padding: 0.5rem; + + @media screen and (min-width: 640px) { + right: 0.5rem; + top: 0.5rem; + width: 4rem; + padding: 1rem; + } - .title-image { - width: 100%; + @media screen and (min-width: 768px) { + width: 6rem; + left: calc(50vw + var(--page-width) / 2 - 7rem); + top: calc(var(--page-margin-y) - 2rem); } @media screen and (min-width: 768px) { + width: 6rem; + left: calc(50vw + var(--page-width) / 2 - 7rem); + top: calc(var(--page-margin-y) - 2rem); + } + + @media screen and (min-width: 1200px) { width: 8rem; left: calc(50vw + var(--page-width) / 2 - 5rem); - top: calc(var(--page-margin-y) - 2rem); + } + + .title-image { + width: 100%; } } } diff --git a/layouts/_default/_markup/render-table.html b/layouts/_default/_markup/render-table.html new file mode 100644 index 00000000..75196aeb --- /dev/null +++ b/layouts/_default/_markup/render-table.html @@ -0,0 +1,24 @@ +<div class="table-container"> + <table> + {{- if .THead }} + <thead> + {{- range .THead }} + <tr> + {{- range . }} + <th{{ with .Alignment }} style="text-align:{{ . }}"{{ end }}>{{ .Text | safeHTML }}</th> + {{- end }} + </tr> + {{- end }} + </thead> + {{- end }} + <tbody> + {{- range .TBody }} + <tr> + {{- range . }} + <td{{ with .Alignment }} style="text-align:{{ . }}"{{ end }}>{{ .Text | safeHTML }}</td> + {{- end }} + </tr> + {{- end }} + </tbody> + </table> +</div> |