diff options
| author | Eltrac <hi@guhub.cn> | 2025-07-15 14:17:39 +0800 |
|---|---|---|
| committer | Eltrac <hi@guhub.cn> | 2025-07-15 14:17:39 +0800 |
| commit | dde50ab716a9ca7d3d0bdd58435c34594cd497ea (patch) | |
| tree | ade1f3a2b479a5737d87268a5c279b6caee7ae67 /assets/css/components/_shortcodes.scss | |
| parent | 18c8c39bf285694c49e23643a0aca7271af52775 (diff) | |
refactor: replace _footer.scss and _shortcode.scss with UnoCSS
Former-commit-id: 272a67d7a8b8752dda3cddf44482e9d85de2c4d0
Diffstat (limited to 'assets/css/components/_shortcodes.scss')
| -rw-r--r-- | assets/css/components/_shortcodes.scss | 226 |
1 files changed, 0 insertions, 226 deletions
diff --git a/assets/css/components/_shortcodes.scss b/assets/css/components/_shortcodes.scss deleted file mode 100644 index 5c4e893a..00000000 --- a/assets/css/components/_shortcodes.scss +++ /dev/null @@ -1,226 +0,0 @@ -/* callouts */ - -.callout { - background-color: rgba(var(--block-background-color-rgb), 0.5); - border-radius: .25rem; - padding: 1rem 1.25rem; - line-height: 1.75; - - display: flex; - gap: .75rem; - - margin: 0.5rem 0; -} - -.callout .callout-content p { - margin: 0; -} - -/* quote shortcode */ - -.quote-card { - --card-bg: rgba(255,255,255,0.25); - --card-bg-lighter: rgba(255,255,255,0.1); - --card-noise: rgba(255,255,255,0.04); - - font-size: 1.5rem; - font-style: italic; - text-align: center; - margin: 5rem 3rem; - padding: 1rem; - border: 1px solid var(--border-color); - border-radius: 1rem; - box-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a; - transform: rotate(3deg); - background-color: rgba(255,255,255,0.35); - - background: linear-gradient(var(--card-bg-lighter), var(--card-bg-lighter)), - repeating-radial-gradient(var(--card-bg) 0 0.0001%, var(--card-noise) 0 0.0002%) 50% 0 / 2500px 2500px, - repeating-conic-gradient(var(--card-bg) 0 0.0001%, var(--card-noise) 0 0.0002%) 60% 60% / 2500px 2500px; - background-blend-mode: normal, difference; -} - -@media screen and (max-width: 768px) { - .quote-card { - font-size: 1.2rem; - margin: 3rem 1rem; - } -} - -/* book showcase shortcode */ - -.book-showcase { - display: flex; - gap: 2rem; - line-height: 1.5; - margin: 2rem 0 -} - -.book-showcase .book-cover { - width: 25%; - flex-shrink: 0; -} - -.book-description-header .book-title { - margin: 0 -} - -.book-description-header p { - font-size: 1rem; - margin: 0.1rem -} - -/* 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%; - } - } - } -} - -/* sidenote shortcode */ - -@media screen and (max-width: 1199px) { - .sidenote { - border: 1px solid var(--block-background-color); - padding: .75rem 1rem; - border-radius: 0.5rem; - line-height: 1.5; - } - .sidenote-title { - font-size: 1rem; - text-align: right; - font-style: italic - } -} - -@media screen and (min-width: 1200px) { - .sidenote { - position: absolute; - left: calc(50% + var(--page-width) / 2); - margin-left: 2rem; - max-width: 20rem - } -} - -.sidenote-title { - margin: 0.5rem 0 -} - -.sidenote-content { - font-size: 1rem -} - -/* blog links */ - -.linkroll { - display: flex; - flex-wrap: wrap; - gap: 1rem; -} - -a.blog-link { - position: relative; - background-color: var(--block-background-color); - text-decoration: none; - color: var(--text-color); - padding: 1rem 2rem; - padding-right: 4rem; - border-radius: 1rem; - width: calc(50% - 2rem); - box-sizing: border-box; - overflow: hidden; - - h4, p { - margin: 0; - font-size: 1.2rem; - } - - p { - line-height: 1.5; - } - - .link-content { - z-index: 10; - } - - img { - --size: 5rem; - display: block; - position: absolute; - right: -1rem; - bottom: -1rem; - width: var(--size); - height: var(--size); - border-radius: 100%; - z-index: 0; - } -} - -@media screen and (max-width: 768px) { - a.blog-link { - font-size: 1.2rem; - padding: 0.5rem 1rem; - padding-right: 2rem; - width: 100%; - } -} - -a.podcast-link { - text-decoration: none; - color: inherit; - width: calc(25% - 1rem); - .link-image { - overflow: hidden; - border-radius: 5px; - img { margin: 0 } - } -} |
