diff options
Diffstat (limited to 'assets/css')
| -rw-r--r-- | assets/css/components/_markdown.scss | 31 | ||||
| -rw-r--r-- | assets/css/components/_post.scss | 31 |
2 files changed, 46 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%; } } } |