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(theme): add comprehensive article layout styles

Browse Source
This commit is contained in:
sendevia
2025-10-10 18:27:47 +08:00
parent 4dfcb96eba
commit 083c530766
4 changed files with 399 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files

339
.vitepress/theme/layouts/Article.vue
View File

@@ -34,3 +34,342 @@ onMounted(() => {
</section>
</article>
</template>
<style lang="scss">
@use "../styles/mixin";
article {
width: 100%;
section {
&:nth-of-type(1) {
.title-with-achor {
position: relative;
a.title-anchor {
@include mixin.typescale-style("body-large");
display: flex;
align-items: center;
flex-direction: column;
gap: 3px;
position: absolute;
left: -55px;
top: 0px;
height: 40px;
width: 40px;
color: var(--md-sys-color-on-surface);
opacity: 0;
transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
span:nth-of-type(1) {
@include mixin.material-symbols($size: 24);
display: block;
height: 40px;
width: 40px;
text-align: center;
line-height: 40px;
border-radius: var(--md-sys-shape-corner-full);
background-color: transparent;
opacity: 0;
}
span.visually-hidden {
@include mixin.typescale-style("label-medium");
padding-block: 3px;
padding-inline: 6px;
word-break: keep-all;
border-radius: var(--md-sys-shape-corner-small);
background-color: var(--md-sys-color-surface-container-low);
opacity: 0;
visibility: hidden;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-block: 24px 12px;
}
&:hover {
a.title-anchor {
opacity: 1;
span:nth-of-type(1) {
opacity: 1;
}
&:hover {
span:nth-of-type(1):hover {
background-color: var(--md-sys-color-surface-container-low);
+ span.visually-hidden {
opacity: 1;
visibility: visible;
}
}
}
}
}
}
a {
text-decoration: none;
}
hr {
margin-block: 12px;
}
p {
margin-block: 12px;
em {
display: inline-block;
font-style: normal;
transform: skewX(-10deg);
}
s {
opacity: 0.5;
}
strong {
font-variation-settings: "wght" 700;
}
img {
max-width: 100%;
border-radius: var(--md-sys-shape-corner-small);
}
}
pre {
@include mixin.typescale-style("body-large");
overflow: auto;
}
ul,
ol {
padding-inline-start: 20px;
li {
@include mixin.typescale-style("body-large");
position: relative;
margin-block-end: 5px;
vertical-align: middle;
p a:has(img) {
max-width: 100%;
img {
max-width: 100%;
}
}
}
}
ol {
padding-inline-start: 70ch;
}
ul {
list-style-type: none;
li::before {
content: "";
display: inline-block;
position: absolute;
left: -21px;
top: 4.5px;
height: 18px;
width: 18px;
background-color: var(--md-sys-color-on-surface);
-webkit-mask: var(--via-svg-list-bullet) 0 0/100% no-repeat;
mask: var(--via-svg-list-bullet) 0 0/100% no-repeat;
}
li > p::before {
display: none;
}
}
p a,
li a {
display: inline-flex;
position: relative;
text-indent: initial;
text-decoration: underline dashed;
overflow: hidden;
&::before {
content: "";
display: block;
position: absolute;
bottom: 0px;
height: 100%;
width: 0%;
background-color: var(--md-sys-color-primary);
opacity: 0.2;
transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
}
&:hover {
text-decoration: underline solid;
&::before {
width: 100%;
}
}
}
blockquote {
margin-block-end: 12px;
margin-inline: 0px;
padding-block-start: 12px;
color: var(--md-sys-color-on-tertiary-container);
border-inline-start: 6px solid var(--md-sys-color-inverse-on-surface);
blockquote {
margin-inline: 24px;
}
p {
margin-inline: 24px;
margin-block: 0px;
padding-block-end: 12px;
}
ul,
ol {
margin-inline: 24px;
padding-block-end: 7px;
}
.task-list-item {
margin: 0px;
&::before {
display: none;
}
}
}
details {
margin: 0.5vh 0px;
border-radius: var(--md-sys-shape-corner-small);
overflow: hidden;
transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
img {
display: block;
}
summary {
@include mixin.typescale-style("body-large");
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: nowrap;
gap: 12px;
padding: 12px;
cursor: pointer;
list-style: none;
transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
&::before {
@include mixin.material-symbols("expand_more");
transform: rotateZ(-90deg);
transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
}
}
&:hover {
background-color: var(--md-sys-color-inverse-on-surface);
}
&[open] {
border-radius: var(--md-sys-shape-corner-extra-large);
summary {
&:focus-visible {
border-radius: var(--md-sys-shape-corner-extra-large-top);
}
&::before {
transform: rotateZ(0deg);
}
}
}
}
table {
margin-block-end: 12px;
margin-inline: 24px;
padding: 0px;
width: calc(100% - 48px);
}
}
}
}
@media screen and (max-width: 1600px) {
}
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 840px) {
}
@media screen and (max-width: 600px) {
}
</style>

418
.vitepress/theme/layouts/Default.vue
View File

@@ -228,329 +228,6 @@ function onAfterEnter() {
text-decoration: none;
}
}
article {
width: 100%;
section {
&:nth-of-type(1) {
.title-with-achor {
position: relative;
a.title-anchor {
@include mixin.typescale-style("body-large");
display: flex;
align-items: center;
flex-direction: column;
gap: 3px;
position: absolute;
left: -55px;
top: 0px;
height: 40px;
width: 40px;
color: var(--md-sys-color-on-surface);
opacity: 0;
transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
span:nth-of-type(1) {
@include mixin.material-symbols($size: 24);
display: block;
height: 40px;
width: 40px;
text-align: center;
line-height: 40px;
border-radius: var(--md-sys-shape-corner-full);
background-color: transparent;
opacity: 0;
}
span.visually-hidden {
@include mixin.typescale-style("label-medium");
padding-block: 3px;
padding-inline: 6px;
word-break: keep-all;
border-radius: var(--md-sys-shape-corner-small);
background-color: var(--md-sys-color-surface-container-low);
opacity: 0;
visibility: hidden;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-block: 24px 12px;
}
&:hover {
a.title-anchor {
opacity: 1;
span:nth-of-type(1) {
opacity: 1;
}
&:hover {
span:nth-of-type(1):hover {
background-color: var(--md-sys-color-surface-container-low);
+ span.visually-hidden {
opacity: 1;
visibility: visible;
}
}
}
}
}
}
a {
text-decoration: none;
}
hr {
margin-block: 12px;
}
p {
margin-block: 12px;
em {
display: inline-block;
font-style: normal;
transform: skewX(-10deg);
}
s {
opacity: 0.5;
}
strong {
font-variation-settings: "wght" 700;
}
img {
max-width: 100%;
border-radius: var(--md-sys-shape-corner-small);
}
}
pre {
@include mixin.typescale-style("body-large");
overflow: auto;
}
ul,
ol {
padding-inline-start: 20px;
li {
@include mixin.typescale-style("body-large");
position: relative;
margin-block-end: 5px;
vertical-align: middle;
p a:has(img) {
max-width: 100%;
img {
max-width: 100%;
}
}
}
}
ol {
padding-inline-start: 70ch;
}
ul {
list-style-type: none;
li::before {
content: "";
display: inline-block;
position: absolute;
left: -21px;
top: 4.5px;
height: 18px;
width: 18px;
background-color: var(--md-sys-color-on-surface);
-webkit-mask: var(--via-svg-list-bullet) 0 0/100% no-repeat;
mask: var(--via-svg-list-bullet) 0 0/100% no-repeat;
}
li > p::before {
display: none;
}
}
p a,
li a {
display: inline-flex;
position: relative;
text-indent: initial;
text-decoration: underline dashed;
overflow: hidden;
&::before {
content: "";
display: block;
position: absolute;
bottom: 0px;
height: 100%;
width: 0%;
background-color: var(--md-sys-color-primary);
opacity: 0.2;
transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
}
&:hover {
text-decoration: underline solid;
&::before {
width: 100%;
}
}
}
blockquote {
margin-block-end: 12px;
margin-inline: 0px;
padding-block-start: 12px;
color: var(--md-sys-color-on-tertiary-container);
border-inline-start: 6px solid var(--md-sys-color-inverse-on-surface);
blockquote {
margin-inline: 24px;
}
p {
margin-inline: 24px;
margin-block: 0px;
padding-block-end: 12px;
}
ul,
ol {
margin-inline: 24px;
padding-block-end: 7px;
}
.task-list-item {
margin: 0px;
&::before {
display: none;
}
}
}
details {
margin: 0.5vh 0px;
border-radius: var(--md-sys-shape-corner-small);
overflow: hidden;
transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
img {
display: block;
}
summary {
@include mixin.typescale-style("body-large");
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: nowrap;
gap: 12px;
padding: 12px;
cursor: pointer;
list-style: none;
transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
&::before {
@include mixin.material-symbols("expand_more");
transform: rotateZ(-90deg);
transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
}
}
&:hover {
background-color: var(--md-sys-color-inverse-on-surface);
}
&[open] {
border-radius: var(--md-sys-shape-corner-extra-large);
summary {
&:focus-visible {
border-radius: var(--md-sys-shape-corner-extra-large-top);
}
&::before {
transform: rotateZ(0deg);
}
}
}
}
table {
margin-block-end: 12px;
margin-inline: 24px;
padding: 0px;
width: calc(100% - 48px);
}
}
}
}
}
#layout-scrolltop {
@@ -602,6 +279,7 @@ function onAfterEnter() {
#layout-content-filler {
grid-column: span $columns;
grid-template-columns: minmax(50vw, 70%) minmax(300px, 30%);
}
#layout-scrolltop {
@@ -612,29 +290,21 @@ function onAfterEnter() {
grid-column: span $columns;
}
.layout-quicklinks {
&[spec="previous"] {
grid-column: 1 string.unquote("/") calc(($columns + 1) / 2);
}
&[spec="next"] {
grid-column: calc(($columns + 1) / 2) string.unquote("/") $columns;
}
}
.layout-footer {
grid-column: span $columns;
}
}
&[spec="article"] {
#layout-content-flow {
#layout-content-filler {
grid-template-columns: minmax(50vw, 70%) minmax(300px, 30%);
}
.layout-quicklinks {
&[spec="previous"] {
grid-column: 1 string.unquote("/") calc(($columns + 1) / 2);
}
&[spec="next"] {
grid-column: calc(($columns + 1) / 2) string.unquote("/") $columns;
}
}
}
}
&[spec="feed"] {
#layout-content-flow {
& > {
@@ -665,6 +335,7 @@ function onAfterEnter() {
#layout-content-filler {
grid-column: span $columns;
grid-template-columns: auto;
}
#layout-scrolltop {
@@ -675,30 +346,18 @@ function onAfterEnter() {
grid-column: span $columns;
}
.layout-quicklinks {
&[spec="previous"],
&[spec="next"] {
grid-column: span calc($columns / 2);
}
}
.layout-footer {
grid-column: span $columns;
}
}
&[spec="article"] {
#layout-content-flow {
#layout-content-filler {
grid-template-columns: auto;
section:nth-child(2) {
display: none;
}
}
.layout-quicklinks {
&[spec="previous"],
&[spec="next"] {
grid-column: span calc($columns / 2);
}
}
}
}
&[spec="feed"] {
#layout-content-flow {
& > {
@@ -741,22 +400,18 @@ function onAfterEnter() {
grid-column: span $columns;
}
.layout-quicklinks {
&[spec="previous"],
&[spec="next"] {
grid-column: span calc($columns / 2);
}
}
.layout-footer {
grid-column: span $columns;
}
}
&[spec="article"] {
#layout-content-flow {
.layout-quicklinks {
&[spec="previous"],
&[spec="next"] {
grid-column: span calc($columns / 2);
}
}
}
}
&[spec="feed"] {
#layout-content-flow {
& > {
@@ -813,20 +468,15 @@ function onAfterEnter() {
#layout-content-flow {
padding-inline: 12px;
}
#layout-content-filler [role="doc-endnotes"]ol {
margin-inline: 0px;
padding-inline: 0px;
}
&[spec="article"] {
#layout-content-flow {
#layout-content-filler [role="doc-endnotes"]ol {
margin-inline: 0px;
padding-inline: 0px;
}
.layout-quicklinks {
&[spec="previous"],
&[spec="next"] {
grid-column: span $columns;
}
.layout-quicklinks {
&[spec="previous"],
&[spec="next"] {
grid-column: span $columns;
}
}
}

64
.vitepress/theme/styles/animation.scss
View File

@@ -1,50 +1,28 @@
// 动画
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes popOut {
0% {
transform: scale(0);
}
40% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes search-results-container-show {
0% {
visibility: hidden;
}
1% {
visibility: visible;
opacity: 0;
}
100% {
height: calc(100% - 68px);
opacity: 1;
}
}
.layout-content-enter-active,
.layout-content-leave-active {
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.layout-content-enter-active,
.layout-content-leave-active {
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#layout-content-filler.layout-content-enter-from,
#layout-content-filler.layout-content-leave-to {
opacity: 0;
transform: translateY(6px);
pointer-events: none;
will-change: opacity, transform;
}
#layout-content-filler.layout-content-enter-to,
#layout-content-filler.layout-content-leave-from {
opacity: 1;
transform: none;
pointer-events: auto;
}
.layout-content-enter-from,
.layout-content-leave-to {
opacity: 0;

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

@@ -152,3 +152,8 @@ hr {
mask: var(--via-svg-wave) repeat;
}
}
a,
span {
@include mixin.typescale-style("body-large");
}