From c62145c2dd0dec9269337bf4a5bd2784eaf0d41b Mon Sep 17 00:00:00 2001 From: Eltrac Date: Tue, 15 Jul 2025 23:51:25 +0800 Subject: refactor: gallery styles and update imports Moved gallery shortcode styles from _post.scss to _markdown.scss and deleted the unused _post.scss file. Updated import paths in content.scss and global.scss to reflect the new location of markdown styles. Former-commit-id: 764e20e3ebabcb1f38f6a91c3b09de2473cadb5d --- assets/css/_markdown.scss | 234 +++++++++++++++++++++++++++++++++++ assets/css/components/_markdown.scss | 187 ---------------------------- assets/css/components/_post.scss | 57 --------- assets/css/content.scss | 4 - assets/css/global.scss | 3 +- 5 files changed, 235 insertions(+), 250 deletions(-) create mode 100644 assets/css/_markdown.scss delete mode 100644 assets/css/components/_markdown.scss delete mode 100644 assets/css/components/_post.scss (limited to 'assets') diff --git a/assets/css/_markdown.scss b/assets/css/_markdown.scss new file mode 100644 index 00000000..f7c99600 --- /dev/null +++ b/assets/css/_markdown.scss @@ -0,0 +1,234 @@ +// Variables (can be moved to a separate variables file if needed) +$font-size: var(--content-font-size); +$link-color: var(--link-color); +$secondary-text-color: var(--secondary-text-color); +$border-color: var(--border-color); +$block-background-color: var(--block-background-color); +$strong-text-color: #A94A4A; +$em-text-color: #889E73; + +// Main styles +.markdown-body { + font-size: $font-size; + max-width: 100%; + + // Nested styles for child elements + a { + text-decoration: underline; + color: $link-color; + &.external-link::after { + content: ''; + display: inline-block; + width: 0.9em; + height: 0.9em; + background-image: url('/img/external-link.svg'); + background-size: cover; + @media (prefers-color-scheme: dark) { + filter: invert(1); + } + } + } + + blockquote { + color: var(--secondary-text-color); + padding: 0; + margin: 0; + &:not(blockquote > blockquote) { + margin-left: 1em; + } + & > blockquote { + border-left: 2px solid $border-color; + padding-left: 1em; + } + } + + code { + font-size: 90%; + color: var(--secondary-text-color); + &:not(pre > code)::before, + &:not(pre > code)::after { + content: '`' + } + } + + pre { + padding: 0.5rem 1rem; + font-size: 1rem; + border-radius: 5px; + border-top-right-radius: 0; + position: relative; + + & > code { + padding: 0; + color: unset; + background-color: inherit; + border: 0; + overflow: auto; + display: block; + + &:not([data-lang="fallback"])::before { + --width: 1rem; + content: attr(data-lang); + display: block; + box-sizing: border-box; + line-height: 1rem; + + position: absolute; + top: 0; + right: -1rem; + width: var(--width); + min-height: 2.5rem; + writing-mode: vertical-rl; + text-align: center; + + font-size: 0.75em; + background: #333; + color: #fff; + padding: 0.5rem 0; + border-radius: 0 4px 4px 0; + } + } + } + + p { + hyphens: auto; + text-justify: ideographic; + margin-bottom: 1em; + } + + strong { + color: $strong-text-color; + } + + em { + color: $em-text-color; + } + + img { + max-width: 100%; + display: block; + margin: 1rem auto; + } + + figure { + display: block; + margin: 0; + figcaption { + max-width: 100%; + h4 { + font-size: 0.9rem; + color: var(--secondary-text-color); + font-weight: 400; + text-align: center; + white-space: normal; + } + } + } + + ul { + list-style-type: square; + } + + ul, ol { + padding-inline-start: 1.75rem; + li { + padding-left: 0.25rem; + } + ::marker { + color: var(--secondary-text-color); + } + } + + mark { + background-color: rgba(255, 235, 0, .5) + } + + .table-container { + overflow-x: auto; + -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; + } + } + } + + del { + opacity: 0.5 + } + + iframe { + max-width: 100%; + } +} + +/* gallery shortcode */ + +.gallery { + display: flex; + overflow-x: auto; + scroll-behavior: smooth; + gap: 0.5rem; + white-space: nowrap; + + & > figure, & > a:has(> figure) { + margin: 0; + flex-shrink: 0; + display: inline-block; + max-width: 100%; + position: relative; + box-shadow: inset 0 -2rem 2rem -2rem rgba(0, 0, 0, 0.1); + img { + height: 20rem; + display: block; + border-radius: 4px; + margin: 0; + } + figcaption { + position: absolute; + bottom: 0; + left: 0; + padding: 0.35rem; + h4 { + font-size: 0.8rem; + margin: 0; + text-align: left; + width: fit-content; + color: var(--text-color); + background-color: rgba(var(--block-background-color-rgb), 0.75); + backdrop-filter: blur(0.5rem); + padding: 0.2rem 0.35rem; + border-radius: 3px; + line-height: 1.2; + } + } + } + & > p { display: none } + + &.center { + justify-content: center; + } + &.full-width { + & > figure { + flex-shrink: unset; + img { + width: 100%; + } + } + } +} diff --git a/assets/css/components/_markdown.scss b/assets/css/components/_markdown.scss deleted file mode 100644 index 9acd73d4..00000000 --- a/assets/css/components/_markdown.scss +++ /dev/null @@ -1,187 +0,0 @@ -// Variables (can be moved to a separate variables file if needed) -$font-size: var(--content-font-size); -$link-color: var(--link-color); -$secondary-text-color: var(--secondary-text-color); -$border-color: var(--border-color); -$block-background-color: var(--block-background-color); -$strong-text-color: #A94A4A; -$em-text-color: #889E73; - -// Main styles -.markdown-body { - font-size: $font-size; - max-width: 100%; - - // Nested styles for child elements - a { - text-decoration: underline; - color: $link-color; - &.external-link::after { - content: ''; - display: inline-block; - width: 0.9em; - height: 0.9em; - background-image: url('/img/external-link.svg'); - background-size: cover; - @media (prefers-color-scheme: dark) { - filter: invert(1); - } - } - } - - blockquote { - color: var(--secondary-text-color); - padding: 0; - margin: 0; - &:not(blockquote > blockquote) { - margin-left: 1em; - } - & > blockquote { - border-left: 2px solid $border-color; - padding-left: 1em; - } - } - - code { - font-size: 90%; - color: var(--secondary-text-color); - &:not(pre > code)::before, - &:not(pre > code)::after { - content: '`' - } - } - - pre { - padding: 0.5rem 1rem; - font-size: 1rem; - border-radius: 5px; - border-top-right-radius: 0; - position: relative; - - & > code { - padding: 0; - color: unset; - background-color: inherit; - border: 0; - overflow: auto; - display: block; - - &:not([data-lang="fallback"])::before { - --width: 1rem; - content: attr(data-lang); - display: block; - box-sizing: border-box; - line-height: 1rem; - - position: absolute; - top: 0; - right: -1rem; - width: var(--width); - min-height: 2.5rem; - writing-mode: vertical-rl; - text-align: center; - - font-size: 0.75em; - background: #333; - color: #fff; - padding: 0.5rem 0; - border-radius: 0 4px 4px 0; - } - } - } - - p { - hyphens: auto; - text-justify: ideographic; - margin-bottom: 1em; - } - - strong { - color: $strong-text-color; - } - - em { - color: $em-text-color; - } - - img { - max-width: 100%; - display: block; - margin: 1rem auto; - } - - figure { - display: block; - margin: 0; - figcaption { - max-width: 100%; - h4 { - font-size: 0.9rem; - color: var(--secondary-text-color); - font-weight: 400; - text-align: center; - white-space: normal; - } - } - } - - ul { - list-style-type: square; - } - - ul, ol { - padding-inline-start: 1.75rem; - li { - padding-left: 0.25rem; - } - ::marker { - color: var(--secondary-text-color); - } - } - - mark { - background-color: rgba(255, 235, 0, .5) - } - - .table-container { - overflow-x: auto; - -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; - } - } - } - - del { - opacity: 0.5 - } - - iframe { - max-width: 100%; - } -} - -/* additional elements */ - -.link-icon img { - width: 0.8em; - height: 0.8em; - display: inline; - opacity: 0.7; -} diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss deleted file mode 100644 index 4ffe742c..00000000 --- a/assets/css/components/_post.scss +++ /dev/null @@ -1,57 +0,0 @@ - - -/* gallery shortcode */ - -.gallery { - display: flex; - overflow-x: auto; - scroll-behavior: smooth; - gap: 0.5rem; - white-space: nowrap; - - & > figure, & > a:has(> figure) { - margin: 0; - flex-shrink: 0; - display: inline-block; - max-width: 100%; - position: relative; - box-shadow: inset 0 -2rem 2rem -2rem rgba(0, 0, 0, 0.1); - img { - height: 20rem; - display: block; - border-radius: 4px; - margin: 0; - } - figcaption { - position: absolute; - bottom: 0; - left: 0; - padding: 0.35rem; - h4 { - font-size: 0.8rem; - margin: 0; - text-align: left; - width: fit-content; - color: var(--text-color); - background-color: rgba(var(--block-background-color-rgb), 0.75); - backdrop-filter: blur(0.5rem); - padding: 0.2rem 0.35rem; - border-radius: 3px; - line-height: 1.2; - } - } - } - & > p { display: none } - - &.center { - justify-content: center; - } - &.full-width { - & > figure { - flex-shrink: unset; - img { - width: 100%; - } - } - } -} diff --git a/assets/css/content.scss b/assets/css/content.scss index 7fba283f..ca707daf 100644 --- a/assets/css/content.scss +++ b/assets/css/content.scss @@ -1,6 +1,2 @@ -@import "utils/mixins"; - -@import "components/post"; - @import "libraries/littlefoot"; @import "libraries/fancybox"; diff --git a/assets/css/global.scss b/assets/css/global.scss index c4fe59a1..807b946d 100644 --- a/assets/css/global.scss +++ b/assets/css/global.scss @@ -3,5 +3,4 @@ @import "utils/reset"; @import "utils/utility"; @import "utils/animation"; - -@import "components/markdown"; +@import "markdown"; -- cgit v1.2.3