From 764e20e3ebabcb1f38f6a91c3b09de2473cadb5d 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. --- assets/css/components/_markdown.scss | 187 ----------------------------------- assets/css/components/_post.scss | 57 ----------- 2 files changed, 244 deletions(-) delete mode 100644 assets/css/components/_markdown.scss delete mode 100644 assets/css/components/_post.scss (limited to 'assets/css/components') 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%; - } - } - } -} -- cgit v1.2.3