sendevia/website
1
0
Fork 0
mirror of https://github.com/sendevia/website.git synced 2026-03-06 07:40:50 +08:00
Code Activity

feat(styles): improve layout in article components

Browse Source
This commit is contained in:
sendevia
2025-12-22 15:48:16 +08:00
parent bff9295688
commit 537f5f45a6
7 changed files with 55 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.vitepress/theme/styles/components/Header.scss
View File

@@ -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 {

3
.vitepress/theme/styles/components/NavBar.scss
View File

@@ -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;

2
.vitepress/theme/styles/components/PageIndicator.scss
View File

@@ -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: "";

2
.vitepress/theme/styles/components/Table.scss
View File

@@ -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);
}
}
}

59
.vitepress/theme/styles/layouts/Article.scss
View File

@@ -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 {

11
.vitepress/theme/styles/main.scss
View File

@@ -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;
}

4
.vitepress/theme/styles/mixin.scss
View File

@@ -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;
}