From 537f5f45a61bf09971f24bd73d7883807b7e300f Mon Sep 17 00:00:00 2001 From: sendevia Date: Mon, 22 Dec 2025 15:48:16 +0800 Subject: [PATCH] feat(styles): improve layout in article components --- .../theme/styles/components/Header.scss | 1 - .../theme/styles/components/NavBar.scss | 3 - .../styles/components/PageIndicator.scss | 2 - .vitepress/theme/styles/components/Table.scss | 2 - .vitepress/theme/styles/layouts/Article.scss | 59 ++++++++++++++----- .vitepress/theme/styles/main.scss | 11 +++- .vitepress/theme/styles/mixin.scss | 4 +- 7 files changed, 55 insertions(+), 27 deletions(-) diff --git a/.vitepress/theme/styles/components/Header.scss b/.vitepress/theme/styles/components/Header.scss index 61d417c..cd20c01 100644 --- a/.vitepress/theme/styles/components/Header.scss +++ b/.vitepress/theme/styles/components/Header.scss @@ -72,7 +72,6 @@ background-color: var(--md-ref-palette-secondary48); - transition: background-color var(--md-sys-motion-duration-extra-long4) var(--md-sys-motion-easing-standard); z-index: -1; .noise { diff --git a/.vitepress/theme/styles/components/NavBar.scss b/.vitepress/theme/styles/components/NavBar.scss index 5dfccb9..988ffe8 100644 --- a/.vitepress/theme/styles/components/NavBar.scss +++ b/.vitepress/theme/styles/components/NavBar.scss @@ -8,7 +8,6 @@ background-color: var(--md-sys-color-surface-container-low); - transition: background-color var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect); user-select: none; -moz-user-select: none; z-index: 999; @@ -44,7 +43,6 @@ background-color: var(--md-sys-color-secondary-container); cursor: pointer; - transition: background-color var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect); span { @include mixin.material-symbols(); @@ -101,7 +99,6 @@ border-radius: var(--md-sys-shape-corner-full); overflow: hidden; - transition: background-color var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect); .segment-icon { height: 24px; diff --git a/.vitepress/theme/styles/components/PageIndicator.scss b/.vitepress/theme/styles/components/PageIndicator.scss index 98641cf..38fa00b 100644 --- a/.vitepress/theme/styles/components/PageIndicator.scss +++ b/.vitepress/theme/styles/components/PageIndicator.scss @@ -47,8 +47,6 @@ border-radius: var(--md-sys-shape-corner-extra-large); - transition: background-color var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect); - &::after { content: ""; diff --git a/.vitepress/theme/styles/components/Table.scss b/.vitepress/theme/styles/components/Table.scss index b30cd20..77086be 100644 --- a/.vitepress/theme/styles/components/Table.scss +++ b/.vitepress/theme/styles/components/Table.scss @@ -37,8 +37,6 @@ table { text-transform: capitalize; background-color: var(--md-sys-color-surface-variant); - - transition: background-color var(--md-sys-motion-duration-extra-long1) var(--md-sys-motion-easing-standard); } } } diff --git a/.vitepress/theme/styles/layouts/Article.scss b/.vitepress/theme/styles/layouts/Article.scss index 987f20c..2429a8c 100644 --- a/.vitepress/theme/styles/layouts/Article.scss +++ b/.vitepress/theme/styles/layouts/Article.scss @@ -206,7 +206,6 @@ main#article-content { &.details { display: block; - transition: background-color var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect); padding: 0px; @@ -403,10 +402,10 @@ main#article-content { h6 { display: inline-block; - padding-block-end: 12px; - line-height: 54px; + border-radius: var(--md-sys-shape-corner-medium); + a { text-decoration: none; } @@ -574,6 +573,10 @@ main#article-content { margin-block-start: 12px; padding-block-end: 12px; + a { + border-radius: var(--md-sys-shape-corner-small); + } + code { @include mixin.typescale-style("body-large", $font-family: Source Code Pro); display: inline; @@ -601,18 +604,24 @@ main#article-content { font-variation-settings: "wght" 700; } - img { - width: calc(50% - 6px); + &:has(img) { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 6px; - margin-inline: 3px; + img { + display: inline-block; - border-radius: var(--md-sys-shape-corner-medium); + width: 100%; - cursor: pointer; - transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial); + border-radius: var(--md-sys-shape-corner-medium); - &:hover { - border-radius: var(--md-sys-shape-corner-extra-large); + cursor: pointer; + transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial); + + &:hover { + border-radius: var(--md-sys-shape-corner-extra-large); + } } } } @@ -632,11 +641,10 @@ main#article-content { } sup.footnote-ref { - position: absolute; - top: -10px; + vertical-align: bottom; a[href] { - @include mixin.typescale-style("label-small"); + @include mixin.typescale-style("label-large"); text-decoration: none; } @@ -650,6 +658,10 @@ main#article-content { ol { padding-block-end: 12px; + a { + border-radius: var(--md-sys-shape-corner-small); + } + li { @include mixin.typescale-style("body-large"); @@ -771,6 +783,13 @@ div#article-beside { @media screen and (max-width: 1200px) { main#article-content { grid-column: 1 / 7; + + .headline-block a.title-anchor { + gap: 0px; + + position: relative; + left: inherit; + } } div#article-beside { @@ -781,6 +800,14 @@ div#article-beside { @media screen and (max-width: 840px) { main#article-content { grid-column: 1 / 7; + + .custom-block > * { + grid-column: 1 / 3; + } + + .headline-block { + padding-inline: 12px; + } } div#article-beside { @@ -791,6 +818,10 @@ div#article-beside { @media screen and (max-width: 600px) { main#article-content { grid-column: 1 / 5; + + p:has(img) { + grid-template-columns: 1fr; + } } div#article-beside { diff --git a/.vitepress/theme/styles/main.scss b/.vitepress/theme/styles/main.scss index cf0591f..40908aa 100644 --- a/.vitepress/theme/styles/main.scss +++ b/.vitepress/theme/styles/main.scss @@ -3,6 +3,14 @@ * { box-sizing: border-box; + + transition: background-color var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect); + + &::after, + &::before { + transition: background-color var(--md-sys-motion-spring-default-effect-duration) + var(--md-sys-motion-spring-default-effect); + } } @include meta.load-css("tokens"); @@ -53,7 +61,6 @@ body { width: 100%; touch-action: none; - transition: background-color var(--md-sys-motion-duration-extra-long1) var(--md-sys-motion-easing-standard); z-index: 0; :disabled, @@ -163,8 +170,6 @@ span { background-color: transparent; - transition: background-color var(--md-sys-motion-spring-default-effect-duration) - var(--md-sys-motion-spring-default-effect); z-index: 0; } diff --git a/.vitepress/theme/styles/mixin.scss b/.vitepress/theme/styles/mixin.scss index 190cf99..94c6bbf 100644 --- a/.vitepress/theme/styles/mixin.scss +++ b/.vitepress/theme/styles/mixin.scss @@ -53,7 +53,7 @@ animation: focus-ring var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect) forwards; outline-offset: #{$offset}px; - transition: background-color var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect), - outline var(--md-sys-motion-spring-fast-spatial-standard-duration) var(--md-sys-motion-spring-fast-spatial-standard); + transition: outline var(--md-sys-motion-spring-fast-spatial-standard-duration) + var(--md-sys-motion-spring-fast-spatial-standard); z-index: $z-index; }