mirror of
https://github.com/sendevia/website.git
synced 2026-03-06 07:40:50 +08:00
feat: restructure component's SCSS imports and file organization
This commit is contained in:
@@ -136,6 +136,7 @@ onUnmounted(() => {
|
||||
window.removeEventListener("popstate", handlePopState);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="appbar"
|
||||
@@ -192,210 +193,5 @@ onUnmounted(() => {
|
||||
|
||||
<style lang="scss">
|
||||
@use "sass:meta";
|
||||
@use "../styles/mixin";
|
||||
|
||||
.appbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
gap: 8px;
|
||||
justify-content: space-between;
|
||||
|
||||
position: fixed;
|
||||
top: -64px;
|
||||
right: 0px;
|
||||
|
||||
height: 64px;
|
||||
width: calc(100% - 96px);
|
||||
|
||||
padding-inline: 4px;
|
||||
|
||||
color: var(--md-sys-color-on-surface);
|
||||
|
||||
background-color: var(--md-sys-color-surface);
|
||||
|
||||
overflow: hidden;
|
||||
transition: var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect);
|
||||
z-index: 998;
|
||||
|
||||
.actionArea {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
|
||||
position: relative;
|
||||
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
|
||||
.leadingButton {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
|
||||
margin-inline: 4px 8px;
|
||||
|
||||
opacity: 1;
|
||||
transition: opacity var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
|
||||
z-index: 0;
|
||||
|
||||
MaterialButton:focus-visible {
|
||||
@include mixin.focus-ring($thickness: 2);
|
||||
}
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
@include mixin.typescale-style("title-medium");
|
||||
|
||||
flex-grow: 1;
|
||||
|
||||
height: 56px;
|
||||
min-width: 0px;
|
||||
|
||||
margin-inline-start: 0px;
|
||||
padding-block: 0px;
|
||||
padding-inline: 24px;
|
||||
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
text-overflow: ellipsis;
|
||||
|
||||
border: none;
|
||||
border-radius: var(--md-sys-shape-corner-full);
|
||||
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
|
||||
transition: margin var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
|
||||
z-index: 1;
|
||||
|
||||
&:focus-visible {
|
||||
@include mixin.focus-ring($thickness: 2);
|
||||
}
|
||||
}
|
||||
|
||||
.authorAvatar {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
|
||||
img {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
||||
object-fit: cover;
|
||||
-webkit-mask: var(--via-svg-mask) no-repeat 0 / 100%;
|
||||
mask: var(--via-svg-mask) no-repeat 0 / 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.searchResult {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
gap: 8px;
|
||||
|
||||
position: absolute;
|
||||
top: 64px;
|
||||
|
||||
width: 100%;
|
||||
|
||||
padding-inline: 24px;
|
||||
padding-block-start: 12px;
|
||||
|
||||
overflow: scroll;
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
|
||||
.description {
|
||||
margin-block-end: 12px;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include mixin.focus-ring($thickness: 2, $offset: 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.searching {
|
||||
top: 0px;
|
||||
|
||||
height: 100%;
|
||||
|
||||
padding: 12px;
|
||||
|
||||
.actionArea {
|
||||
.leadingButton {
|
||||
opacity: 0;
|
||||
transition: opacity var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
margin-inline-start: 0px;
|
||||
|
||||
transition: margin var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.scroll {
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
|
||||
.searchInput {
|
||||
background-color: var(--md-sys-color-surface-container-highest);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 840px) {
|
||||
.appbar {
|
||||
top: 0;
|
||||
|
||||
width: 100%;
|
||||
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
.actionArea {
|
||||
.searchInput {
|
||||
margin-inline-start: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.searchResult {
|
||||
height: calc(100% - (80px + 64px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
}
|
||||
@include meta.load-css("../styles/components/AppBar");
|
||||
</style>
|
||||
@@ -32,235 +32,6 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "../styles/mixin";
|
||||
|
||||
.md-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
position: relative;
|
||||
|
||||
text-decoration: none !important;
|
||||
vertical-align: middle;
|
||||
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 0px;
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: border-radius var(--md-sys-motion-spring-fast-spatial-standard-duration)
|
||||
var(--md-sys-motion-spring-fast-spatial-standard);
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
background-color: var(--md-sys-state-hover-state-layer);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include mixin.focus-ring($thickness: 3, $offset: 2);
|
||||
|
||||
&::after {
|
||||
background-color: var(--md-sys-state-focus-state-layer);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
|
||||
|
||||
&::after {
|
||||
background-color: var(--md-sys-state-pressed-state-layer);
|
||||
}
|
||||
}
|
||||
|
||||
&.xs {
|
||||
@include mixin.typescale-style("label-large");
|
||||
|
||||
gap: 8px;
|
||||
|
||||
height: 32px;
|
||||
|
||||
padding-inline: 12px;
|
||||
|
||||
border-width: 1px;
|
||||
|
||||
span {
|
||||
@include mixin.material-symbols($size: 20);
|
||||
}
|
||||
|
||||
&.round {
|
||||
border-radius: var(--md-sys-shape-corner-full);
|
||||
}
|
||||
|
||||
&.square {
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
}
|
||||
}
|
||||
|
||||
&.s {
|
||||
@include mixin.typescale-style("label-large");
|
||||
|
||||
gap: 8px;
|
||||
|
||||
height: 40px;
|
||||
|
||||
padding-inline: 16px;
|
||||
|
||||
border-width: 1px;
|
||||
|
||||
span {
|
||||
@include mixin.material-symbols($size: 20);
|
||||
}
|
||||
|
||||
&.round {
|
||||
border-radius: var(--md-sys-shape-corner-full);
|
||||
}
|
||||
|
||||
&.square {
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
}
|
||||
}
|
||||
|
||||
&.m {
|
||||
@include mixin.typescale-style("title-medium");
|
||||
|
||||
gap: 8px;
|
||||
|
||||
height: 56px;
|
||||
|
||||
padding-inline: 24px;
|
||||
|
||||
border-width: 1px;
|
||||
|
||||
span {
|
||||
@include mixin.material-symbols($size: 24);
|
||||
}
|
||||
|
||||
&.round {
|
||||
border-radius: var(--md-sys-shape-corner-full);
|
||||
}
|
||||
|
||||
&.square {
|
||||
border-radius: var(--md-sys-shape-corner-large);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-radius: var(--md-sys-shape-corner-large);
|
||||
}
|
||||
}
|
||||
|
||||
&.l {
|
||||
@include mixin.typescale-style("headline-small");
|
||||
|
||||
gap: 12px;
|
||||
|
||||
height: 96px;
|
||||
|
||||
padding-inline: 48px;
|
||||
|
||||
border-width: 2px;
|
||||
|
||||
span {
|
||||
@include mixin.material-symbols($size: 32);
|
||||
}
|
||||
|
||||
&.round {
|
||||
border-radius: var(--md-sys-shape-corner-full);
|
||||
}
|
||||
|
||||
&.square {
|
||||
border-radius: var(--md-sys-shape-corner-extra-large);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-radius: var(--md-sys-shape-corner-extra-large);
|
||||
}
|
||||
}
|
||||
|
||||
&.xl {
|
||||
@include mixin.typescale-style("headline-large");
|
||||
|
||||
gap: 16px;
|
||||
|
||||
height: 136px;
|
||||
|
||||
padding-inline: 64px;
|
||||
|
||||
border-width: 3px;
|
||||
|
||||
span {
|
||||
@include mixin.material-symbols($size: 40);
|
||||
}
|
||||
|
||||
&.round {
|
||||
border-radius: var(--md-sys-shape-corner-full);
|
||||
}
|
||||
|
||||
&.square {
|
||||
border-radius: var(--md-sys-shape-corner-extra-large);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-radius: var(--md-sys-shape-corner-extra-large);
|
||||
}
|
||||
}
|
||||
|
||||
&.elevated {
|
||||
color: var(--md-sys-color-primary);
|
||||
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
|
||||
box-shadow: 0px 1px 3px var(--md-sys-color-shadow);
|
||||
}
|
||||
|
||||
&.filled {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
&.tonal {
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
}
|
||||
|
||||
&.outlined {
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
|
||||
border-color: var(--md-sys-color-outline-variant);
|
||||
}
|
||||
|
||||
&.standard,
|
||||
&.text {
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
}
|
||||
@use "sass:meta";
|
||||
@include meta.load-css("../styles/components/Button");
|
||||
</style>
|
||||
|
||||
@@ -27,7 +27,9 @@ const siteVersion = theme.value.siteVersion;
|
||||
<div id="main-layout-footer-description-beian">
|
||||
<div id="main-layout-footer-beian-gongan">
|
||||
<img src="/assets/images/beian.png" loading="eager" />
|
||||
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=23020002230215" target="_blank">黑公网安备23020002230215</a>
|
||||
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=23020002230215" target="_blank"
|
||||
>黑公网安备23020002230215</a
|
||||
>
|
||||
</div>
|
||||
<div id="main-layout-footer-Registration-icp">
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank">黑ICP备2024016516号-1</a>
|
||||
@@ -39,111 +41,5 @@ const siteVersion = theme.value.siteVersion;
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "sass:meta";
|
||||
@use "../styles/mixin";
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
grid-column: span 12;
|
||||
justify-content: space-around;
|
||||
|
||||
margin-inline: 12px;
|
||||
padding-block-end: 18px;
|
||||
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#main-layout-footer-description {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
|
||||
#main-layout-footer-description-topic {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
|
||||
img {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
|
||||
-webkit-mask: var(--via-svg-mask) no-repeat 0 / 100%;
|
||||
mask: var(--via-svg-mask) no-repeat 0 / 100%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
letter-spacing: 0.8px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
#main-layout-footer-description-theme {
|
||||
@include mixin.typescale-style("body-large");
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
#main-layout-footer-description-beian {
|
||||
@include mixin.typescale-style("body-large");
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
|
||||
#main-layout-footer-beian-gongan {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
img {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#main-layout-footer-social-media {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
footer {
|
||||
grid-column: span 12;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
footer {
|
||||
grid-column: span 8;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 840px) {
|
||||
footer {
|
||||
grid-column: span 6;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
footer {
|
||||
grid-column: span 4;
|
||||
}
|
||||
}
|
||||
@include meta.load-css("../styles/components/Footer");
|
||||
</style>
|
||||
|
||||
@@ -47,211 +47,5 @@ if (typeof window !== "undefined") {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "sass:meta";
|
||||
@use "../styles/mixin";
|
||||
|
||||
header {
|
||||
grid-column: span 12;
|
||||
|
||||
position: relative;
|
||||
|
||||
height: 540px;
|
||||
|
||||
word-break: break-word;
|
||||
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#header-hero-container {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
|
||||
padding: 54px;
|
||||
|
||||
color: var(--md-ref-palette-secondary100);
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
border: 1px solid var(--md-sys-color-outline-variant);
|
||||
|
||||
overflow: hidden;
|
||||
transition: var(--md-sys-motion-duration-extra-long4) var(--md-sys-motion-easing-standard);
|
||||
z-index: 1;
|
||||
|
||||
#header-hero-headline {
|
||||
@include mixin.typescale-style(
|
||||
"display-large",
|
||||
$font-size: 90rem,
|
||||
$line-height: 90rem,
|
||||
$font-variation-settings: "wght" 700
|
||||
);
|
||||
|
||||
width: 100%;
|
||||
|
||||
text-align: center;
|
||||
|
||||
mix-blend-mode: hard-light;
|
||||
transition: var(--md-sys-motion-duration-short1) var(--md-sys-motion-easing-standard);
|
||||
}
|
||||
|
||||
#header-hero-subtitle {
|
||||
@include mixin.typescale-style("headline-large", $font-size: 22rem, $line-height: 22rem);
|
||||
|
||||
width: 100%;
|
||||
|
||||
text-align: center;
|
||||
|
||||
mix-blend-mode: hard-light;
|
||||
transition: var(--md-sys-motion-duration-short1) var(--md-sys-motion-easing-standard);
|
||||
}
|
||||
|
||||
#header-impression {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
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;
|
||||
|
||||
#header-impression-noise {
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
filter: url(#noise-filter);
|
||||
mix-blend-mode: soft-light;
|
||||
opacity: 0.2;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#header-impression-image {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
background: center/cover no-repeat;
|
||||
|
||||
opacity: 0.8;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: var(--md-ref-palette-secondary10);
|
||||
|
||||
#header-impression-noise {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
#header-impression-image {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
header {
|
||||
grid-column: span 12;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
header {
|
||||
grid-column: span 8;
|
||||
|
||||
height: 45vh;
|
||||
min-height: 360px;
|
||||
|
||||
#header-hero-container {
|
||||
padding: 5vw;
|
||||
|
||||
#header-hero-headline {
|
||||
@include mixin.typescale-style(
|
||||
"display-large",
|
||||
$font-size: 7vw,
|
||||
$line-height: 7vw,
|
||||
$font-variation-settings: "wght" 500
|
||||
);
|
||||
}
|
||||
|
||||
#header-hero-subtitle {
|
||||
@include mixin.typescale-style(
|
||||
"display-small",
|
||||
$font-size: 18rem,
|
||||
$line-height: 20rem,
|
||||
$font-variation-settings: "wght" 500
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 840px) {
|
||||
header {
|
||||
grid-column: span 6;
|
||||
|
||||
#header-hero-container {
|
||||
width: 100%;
|
||||
|
||||
#header-hero-headline {
|
||||
@include mixin.typescale-style(
|
||||
"display-large",
|
||||
$font-size: 8vw,
|
||||
$line-height: 8vw,
|
||||
$font-variation-settings: "wght" 600
|
||||
);
|
||||
}
|
||||
|
||||
#header-hero-subtitle {
|
||||
@include mixin.typescale-style("headline-large", $font-size: 23rem, $line-height: 23rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
header {
|
||||
grid-column: span 4;
|
||||
|
||||
#header-hero-container {
|
||||
padding: 30px;
|
||||
|
||||
#header-hero-headline {
|
||||
@include mixin.typescale-style(
|
||||
"display-large",
|
||||
$font-size: 40rem,
|
||||
$line-height: 40rem,
|
||||
$font-variation-settings: "wght" 700
|
||||
);
|
||||
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
#header-hero-subtitle {
|
||||
@include mixin.typescale-style(
|
||||
"display-small",
|
||||
$font-size: 15rem,
|
||||
$line-height: 17rem,
|
||||
$font-variation-settings: "wght" 400
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include meta.load-css("../styles/components/Header");
|
||||
</style>
|
||||
|
||||
@@ -456,178 +456,6 @@ defineExpose({
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "../styles/mixin";
|
||||
|
||||
.image-viewer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
background-color: #ffffffb9;
|
||||
backdrop-filter: blur(20px);
|
||||
|
||||
opacity: 0;
|
||||
transition: var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect);
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
z-index: 9999;
|
||||
|
||||
.index-text {
|
||||
padding-block: 3px;
|
||||
padding-inline: 9px;
|
||||
|
||||
color: var(--md-sys-color-surface-variant);
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
|
||||
background-color: var(--md-sys-color-on-surface-variant);
|
||||
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.btn-close,
|
||||
.btn-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
position: absolute !important;
|
||||
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.btn-nav {
|
||||
top: 50%;
|
||||
|
||||
&.prev {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
&.next {
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
|
||||
padding-block-start: 5vh;
|
||||
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.content-image {
|
||||
border-radius: var(--md-sys-shape-corner-full);
|
||||
|
||||
background-color: var(--md-sys-color-surface-variant);
|
||||
|
||||
clip-path: circle(10%);
|
||||
object-fit: contain;
|
||||
transition: var(--md-sys-motion-spring-slow-spatial-duration) var(--md-sys-motion-spring-slow-spatial);
|
||||
|
||||
&.transitioning {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&.notransition {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnails {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
max-width: calc(100% - 66px);
|
||||
|
||||
padding: 24px;
|
||||
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
flex-shrink: 0;
|
||||
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
|
||||
padding: 0px;
|
||||
|
||||
border: 0px;
|
||||
border-radius: var(--md-sys-shape-corner-large);
|
||||
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
|
||||
|
||||
&.active {
|
||||
@include mixin.focus-ring($thickness: 1, $offset: 2);
|
||||
|
||||
outline-color: var(--md-sys-color-on-surface-variant) !important;
|
||||
transition: transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include mixin.focus-ring($thickness: 2, $offset: 2);
|
||||
}
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
// 入场结束
|
||||
&.animating {
|
||||
opacity: 1;
|
||||
|
||||
.content-image {
|
||||
border-radius: var(--md-sys-shape-corner-large);
|
||||
|
||||
clip-path: circle(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: #000000b9;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 840px) {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
}
|
||||
@use "sass:meta";
|
||||
@include meta.load-css("../styles/components/ImageViewer");
|
||||
</style>
|
||||
|
||||
69
.vitepress/theme/components/NavBar.vue
Normal file
69
.vitepress/theme/components/NavBar.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { useGlobalData } from "../composables/useGlobalData";
|
||||
import { useScreenWidth } from "../composables/useScreenWidth";
|
||||
import { useSearchState } from "../composables/useSearchState";
|
||||
|
||||
const { page, theme } = useGlobalData();
|
||||
const { isAboveBreakpoint } = useScreenWidth(840);
|
||||
const { isSearchActive, activateSearch, deactivateSearch } = useSearchState();
|
||||
|
||||
// 计算导航段落
|
||||
const navSegment = computed(() => {
|
||||
const items = theme.value.navSegment;
|
||||
return Array.isArray(items) && items.length > 0 ? items : [];
|
||||
});
|
||||
|
||||
// 规范化路径
|
||||
function normalizePath(path: string): string {
|
||||
return path.replace(/(\/index)?\.(md|html)$/, "").replace(/\/$/, "");
|
||||
}
|
||||
|
||||
// 检查链接是否为当前活动链接
|
||||
function isActive(link: string): boolean {
|
||||
const currentPath = normalizePath(page.value.relativePath);
|
||||
const targetPath = normalizePath(link);
|
||||
|
||||
return currentPath === targetPath.replace(/^\//, "") || (targetPath === "" && currentPath === "index");
|
||||
}
|
||||
|
||||
// 处理fab点击事件 - 切换搜索状态
|
||||
function toggleSearch(event: MouseEvent) {
|
||||
event.stopPropagation();
|
||||
|
||||
if (isSearchActive.value) {
|
||||
deactivateSearch();
|
||||
} else {
|
||||
activateSearch();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav :class="isAboveBreakpoint ? 'rail' : 'bar'">
|
||||
<button class="fab" @mousedown.prevent @click.stop="toggleSearch">
|
||||
<span>search</span>
|
||||
</button>
|
||||
<div class="destinations">
|
||||
<div class="segment" v-for="item in navSegment" :key="item.link" :class="isActive(item.link) ? 'active' : 'inactive'">
|
||||
<a :href="item.link">
|
||||
<div class="destination-accent">
|
||||
<div class="segment-icon">
|
||||
<span>
|
||||
{{ item.icon }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="destination-label">
|
||||
{{ item.text }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "sass:meta";
|
||||
@include meta.load-css("../styles/components/NavBar");
|
||||
</style>
|
||||
@@ -279,144 +279,7 @@ if (typeof window !== "undefined") {
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../styles/mixin";
|
||||
|
||||
.page-indicator {
|
||||
position: relative;
|
||||
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
||||
p {
|
||||
@include mixin.typescale-style("label-small");
|
||||
|
||||
margin-inline-start: 18px;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-inline-start: 18px;
|
||||
padding-block-end: 18px;
|
||||
|
||||
font-variation-settings: "wght" 600;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
|
||||
outline: 1px solid var(--md-sys-color-primary);
|
||||
border-radius: var(--md-sys-shape-corner-extra-large);
|
||||
|
||||
pointer-events: none;
|
||||
transition: var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.indicator-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
z-index: 0;
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
|
||||
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: "";
|
||||
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
|
||||
height: 100%;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-extra-large);
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
transition: width var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial),
|
||||
heigh var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial),
|
||||
background-color var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
a {
|
||||
@include mixin.typescale-style("label-large");
|
||||
|
||||
width: 100%;
|
||||
|
||||
padding-block: 9px;
|
||||
padding-inline: 18px;
|
||||
|
||||
color: var(--md-sys-color-on-surface);
|
||||
font-variation-settings: "wght" 200;
|
||||
text-decoration: none;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-extra-large);
|
||||
|
||||
&:focus-visible {
|
||||
@include mixin.focus-ring($thickness: 2);
|
||||
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
& > a {
|
||||
color: var(--md-sys-color-primary);
|
||||
font-variation-settings: "wght" 700;
|
||||
|
||||
&:focus-visible {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.active) {
|
||||
&::after {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
width: 100%;
|
||||
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 840px) {
|
||||
.page-indicator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
@use "sass:meta";
|
||||
@include meta.load-css("../styles/components/PageIndicator");
|
||||
</style>
|
||||
|
||||
@@ -100,78 +100,6 @@ const next = computed(() => {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "../styles/mixin";
|
||||
|
||||
.prev-next {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
|
||||
margin-block-start: 24px;
|
||||
|
||||
.prev {
|
||||
grid-column: 1 / 2;
|
||||
|
||||
margin-inline-end: 6px;
|
||||
|
||||
text-align: start;
|
||||
|
||||
a {
|
||||
padding-inline-start: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.next {
|
||||
grid-column: 2 / 3;
|
||||
|
||||
margin-inline-start: 6px;
|
||||
|
||||
text-align: end;
|
||||
|
||||
a {
|
||||
padding-inline-end: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.prev,
|
||||
.next {
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
width: 100%;
|
||||
|
||||
padding-block: 12px;
|
||||
|
||||
color: var(--md-sys-color-on-surface);
|
||||
text-decoration: none !important;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
|
||||
.label {
|
||||
@include mixin.typescale-style("label-medium");
|
||||
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
|
||||
.title {
|
||||
@include mixin.typescale-style("title-large");
|
||||
|
||||
font-variation-settings: "wght" 600;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include mixin.focus-ring($thickness: 2);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--md-sys-color-surface-dim);
|
||||
}
|
||||
}
|
||||
}
|
||||
@use "sass:meta";
|
||||
@include meta.load-css("../styles/components/PrevNext");
|
||||
</style>
|
||||
|
||||
@@ -16,80 +16,6 @@ function scrollToTop() {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "../styles/mixin";
|
||||
|
||||
#layout-scrolltop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
grid-column: 10 / 13;
|
||||
justify-content: center;
|
||||
|
||||
position: sticky;
|
||||
bottom: 72px;
|
||||
right: 0px;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
-moz-user-select: none;
|
||||
opacity: 0;
|
||||
transition: var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
|
||||
user-select: none;
|
||||
visibility: hidden;
|
||||
z-index: 21;
|
||||
|
||||
#scrolltop-button {
|
||||
@include mixin.material-symbols($size: 24, $line-height: 84);
|
||||
|
||||
position: relative;
|
||||
|
||||
height: 84px;
|
||||
width: 84px;
|
||||
|
||||
color: var(--md-sys-color-outline);
|
||||
text-align: center;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-full);
|
||||
border: 1px solid var(--md-sys-color-outline-variant);
|
||||
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--md-sys-color-surface-container-high);
|
||||
}
|
||||
}
|
||||
|
||||
&.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
#layout-scrolltop {
|
||||
grid-column: 10 / 13;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
#layout-scrolltop {
|
||||
grid-column: 7 / 9;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 840px) {
|
||||
#layout-scrolltop {
|
||||
grid-column: 6 / 7;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
#layout-scrolltop {
|
||||
grid-column: 4 / 5;
|
||||
}
|
||||
}
|
||||
@use "sass:meta";
|
||||
@include meta.load-css("../styles/components/ScrollToTop");
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import type { Theme } from "vitepress";
|
||||
import Layout from "./layouts/Default.vue";
|
||||
|
||||
import AppBar from "./components/Appbar.vue";
|
||||
import AppBar from "./components/AppBar.vue";
|
||||
import Button from "./components/Button.vue";
|
||||
import Footer from "./components/Footer.vue";
|
||||
import Header from "./components/Header.vue";
|
||||
@@ -9,7 +9,7 @@ import ImageViewer from "./components/ImageViewer.vue";
|
||||
import PageIndicator from "./components/PageIndicator.vue";
|
||||
import PrevNext from "./components/PrevNext.vue";
|
||||
import ScrollToTop from "./components/ScrollToTop.vue";
|
||||
import Navbar from "./components/Navbar.vue";
|
||||
import NavBar from "./components/NavBar.vue";
|
||||
|
||||
import "./styles/main.scss";
|
||||
|
||||
@@ -22,7 +22,7 @@ export default {
|
||||
app.component("ImageViewer", ImageViewer);
|
||||
app.component("MainLayout", Layout);
|
||||
app.component("MaterialButton", Button);
|
||||
app.component("Navbar", Navbar);
|
||||
app.component("NavBar", NavBar);
|
||||
app.component("PageIndicator", PageIndicator);
|
||||
app.component("PrevNext", PrevNext);
|
||||
app.component("ScrollToTop", ScrollToTop);
|
||||
|
||||
@@ -152,760 +152,6 @@ if (typeof window !== "undefined") {
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "../styles/mixin";
|
||||
|
||||
section {
|
||||
&#article-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-column: 1 / 10;
|
||||
|
||||
& > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
*[class^="language-"] {
|
||||
position: relative;
|
||||
|
||||
margin-block-end: 12px;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-large-increased);
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
button.copy {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
|
||||
margin-block-start: 6px;
|
||||
margin-inline-end: 6px;
|
||||
padding: 0px;
|
||||
|
||||
border: none;
|
||||
border-radius: var(--md-sys-shape-corner-extra-large);
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial),
|
||||
opacity var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect);
|
||||
visibility: hidden;
|
||||
z-index: 2;
|
||||
|
||||
&::before {
|
||||
@include mixin.material-symbols($name: "content_copy", $size: 18, $line-height: 42);
|
||||
|
||||
color: var(--md-ref-palette-neutral90);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-radius: var(--md-sys-shape-corner-large);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include mixin.focus-ring($thickness: 2, $z-index: 3);
|
||||
|
||||
outline-color: var(--md-ref-palette-neutral90) !important;
|
||||
}
|
||||
}
|
||||
|
||||
span.lang {
|
||||
@include mixin.typescale-style("body-medium", $font-family: Source Code Pro, $font-variation-settings: "wght" 700);
|
||||
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
|
||||
margin-block-start: 6px;
|
||||
margin-inline-end: 9px;
|
||||
|
||||
color: var(--md-ref-palette-neutral50);
|
||||
text-transform: uppercase;
|
||||
|
||||
transition: color var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
pre.shiki {
|
||||
grid-column: 2/3;
|
||||
grid-row: 1;
|
||||
|
||||
margin: 0px;
|
||||
padding-block: 15px;
|
||||
|
||||
overflow: overlay;
|
||||
z-index: 0;
|
||||
|
||||
code {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
div.line-numbers-wrapper {
|
||||
grid-column: 1/2;
|
||||
grid-row: 1;
|
||||
|
||||
width: max-content;
|
||||
|
||||
padding-block: 15px;
|
||||
padding-inline: 12px;
|
||||
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
|
||||
color: var(--md-ref-palette-neutral-variant50);
|
||||
|
||||
border-right: 1px solid var(--md-ref-palette-neutral-variant50);
|
||||
background-color: var(--md-ref-palette-neutral10);
|
||||
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
z-index: 0;
|
||||
|
||||
span {
|
||||
@include mixin.typescale-style("body-large", $font-family: Source Code Pro);
|
||||
}
|
||||
}
|
||||
|
||||
&.line-numbers-mode {
|
||||
display: grid;
|
||||
grid-template-columns: max-content auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span.lang {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
button.copy {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--md-ref-palette-neutral10);
|
||||
|
||||
&::before {
|
||||
color: var(--md-ref-palette-neutral90);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block {
|
||||
display: grid;
|
||||
column-gap: 12px;
|
||||
grid-template-columns: 24px auto;
|
||||
|
||||
position: relative;
|
||||
|
||||
margin-block-end: 12px;
|
||||
padding-block: 12px;
|
||||
padding-inline: 12px;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-large-increased);
|
||||
|
||||
z-index: 0;
|
||||
|
||||
&::before {
|
||||
@include mixin.material-symbols($size: 24);
|
||||
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
p.custom-block-title {
|
||||
grid-column: 2;
|
||||
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
|
||||
font-variation-settings: "wght" 700;
|
||||
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
> * {
|
||||
grid-column: 2 / 3;
|
||||
|
||||
margin-inline: 0px;
|
||||
padding-block: 0px;
|
||||
}
|
||||
|
||||
&.details {
|
||||
display: block;
|
||||
transition: background-color var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect);
|
||||
|
||||
padding: 0px;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
summary {
|
||||
@include mixin.typescale-style("body-large");
|
||||
|
||||
display: grid;
|
||||
column-gap: 12px;
|
||||
grid-template-columns: 24px auto;
|
||||
|
||||
padding-block: 12px;
|
||||
padding-inline: 12px;
|
||||
|
||||
font-variation-settings: "wght" 700;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-large-increased);
|
||||
|
||||
cursor: pointer;
|
||||
transition: var(--md-sys-motion-spring-slow-spatial-standard-duration)
|
||||
var(--md-sys-motion-spring-slow-spatial-standard);
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
||||
&::before {
|
||||
@include mixin.material-symbols("expand_more");
|
||||
|
||||
font-variation-settings: "wght" 500;
|
||||
|
||||
transform: rotateZ(-90deg);
|
||||
transition: var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include mixin.focus-ring($thickness: 3);
|
||||
}
|
||||
}
|
||||
|
||||
:not(summary) {
|
||||
margin-inline: 12px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--md-sys-color-inverse-on-surface);
|
||||
}
|
||||
|
||||
&[open] {
|
||||
padding-block-end: 12px;
|
||||
|
||||
background-color: var(--md-sys-color-inverse-on-surface);
|
||||
|
||||
summary {
|
||||
padding-block-end: 12px;
|
||||
|
||||
&::before {
|
||||
transform: rotateZ(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
color: var(--md-sys-color-on-blue-container);
|
||||
|
||||
background-color: var(--md-sys-color-blue-container);
|
||||
|
||||
&::before {
|
||||
content: "info";
|
||||
|
||||
color: var(--md-sys-color-on-blue-container);
|
||||
}
|
||||
}
|
||||
|
||||
&.tip {
|
||||
color: var(--md-sys-color-on-green-container);
|
||||
|
||||
background-color: var(--md-sys-color-green-container);
|
||||
|
||||
&::before {
|
||||
content: "lightbulb_2";
|
||||
|
||||
color: var(--md-sys-color-on-green-container);
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: var(--md-sys-color-on-yellow-container);
|
||||
|
||||
background-color: var(--md-sys-color-yellow-container);
|
||||
|
||||
&::before {
|
||||
content: "brightness_alert";
|
||||
|
||||
color: var(--md-sys-color-on-yellow-container);
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: var(--md-sys-color-on-red-container);
|
||||
|
||||
background-color: var(--md-sys-color-red-container);
|
||||
|
||||
&::before {
|
||||
content: "dangerous";
|
||||
|
||||
color: var(--md-sys-color-on-red-container);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.headline-block {
|
||||
position: relative;
|
||||
|
||||
padding-block-end: 12px;
|
||||
padding-inline-start: 24px;
|
||||
|
||||
a.title-anchor {
|
||||
@include mixin.typescale-style("body-large");
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
|
||||
position: absolute;
|
||||
left: -54px;
|
||||
top: 0px;
|
||||
|
||||
height: 54px;
|
||||
width: 54px;
|
||||
|
||||
color: var(--md-sys-color-on-surface);
|
||||
text-decoration: none;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-full);
|
||||
|
||||
opacity: 0;
|
||||
transition: var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
||||
&:focus-visible {
|
||||
@include mixin.focus-ring($thickness: 2, $z-index: 2);
|
||||
|
||||
opacity: 1;
|
||||
|
||||
span:nth-of-type(1) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
span:nth-of-type(1) {
|
||||
@include mixin.material-symbols($size: 24);
|
||||
|
||||
display: block;
|
||||
|
||||
height: 54px;
|
||||
width: 54px;
|
||||
|
||||
line-height: 54px;
|
||||
text-align: center;
|
||||
|
||||
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: 9px;
|
||||
|
||||
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 {
|
||||
display: inline-block;
|
||||
|
||||
padding-block-end: 12px;
|
||||
|
||||
line-height: 54px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&: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: underline solid;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
position: relative;
|
||||
|
||||
margin-inline: 0px;
|
||||
padding-inline-start: 24px;
|
||||
|
||||
color: var(--md-sys-color-on-tertiary-container);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
left: calc(24px / 2 - 3px);
|
||||
|
||||
height: 100%;
|
||||
width: 6px;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-small);
|
||||
|
||||
background-color: var(--md-sys-color-inverse-on-surface);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin-inline: 12px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-block: 12px;
|
||||
margin-inline: 0px;
|
||||
padding-block-end: 0px;
|
||||
}
|
||||
|
||||
.task-list-container {
|
||||
padding-block-end: 0px;
|
||||
padding-inline: 0px;
|
||||
|
||||
li.task-list-item {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
grid-template-columns: 20px auto;
|
||||
|
||||
input.task-list-item-checkbox[type="checkbox"] {
|
||||
&::before {
|
||||
@include mixin.material-symbols("check_box_outline_blank", $size: 20);
|
||||
|
||||
font-variation-settings: "FILL" 1;
|
||||
}
|
||||
|
||||
appearance: none;
|
||||
|
||||
grid-column: 1 / 2;
|
||||
|
||||
margin: 0px;
|
||||
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
&:checked {
|
||||
&::before {
|
||||
@include mixin.material-symbols("check_box", $size: 20);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > {
|
||||
ul,
|
||||
ol {
|
||||
margin-inline: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
@include mixin.typescale-style("body-large", $font-family: Source Code Pro);
|
||||
|
||||
display: inline-block;
|
||||
|
||||
width: max-content;
|
||||
|
||||
padding-block: 24px;
|
||||
|
||||
text-indent: initial;
|
||||
vertical-align: baseline;
|
||||
word-break: break-word;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-small);
|
||||
|
||||
overflow: initial;
|
||||
|
||||
&::selection {
|
||||
color: var(--md-sys-color-on-tertiary);
|
||||
|
||||
background-color: var(--md-sys-color-tertiary);
|
||||
}
|
||||
|
||||
span.line {
|
||||
display: inline-block;
|
||||
|
||||
width: 100%;
|
||||
|
||||
padding-inline: 12px;
|
||||
|
||||
&.highlighted {
|
||||
background-color: var(--md-ref-palette-neutral10);
|
||||
|
||||
span {
|
||||
background-color: var(--md-ref-palette-neutral10);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@include mixin.typescale-style("body-large", $font-family: Source Code Pro);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-block-end: 24px;
|
||||
margin-block-start: 12px;
|
||||
}
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
|
||||
margin-block-start: 12px;
|
||||
padding-block-end: 12px;
|
||||
|
||||
code {
|
||||
@include mixin.typescale-style("body-large", $font-family: Source Code Pro);
|
||||
display: inline;
|
||||
|
||||
min-width: max-content;
|
||||
|
||||
padding: 0px;
|
||||
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
em {
|
||||
display: inline-block;
|
||||
|
||||
font-style: normal;
|
||||
|
||||
transform: skewX(-10deg);
|
||||
}
|
||||
|
||||
s {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-variation-settings: "wght" 700;
|
||||
}
|
||||
|
||||
img {
|
||||
width: calc(50% - 6px);
|
||||
|
||||
margin-inline: 3px;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
padding-block-end: 12px;
|
||||
|
||||
overflow: overlay;
|
||||
|
||||
&.shiki {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
font-variation-settings: "wght" 700;
|
||||
}
|
||||
|
||||
sup.footnote-ref {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
|
||||
a[href] {
|
||||
@include mixin.typescale-style("label-small");
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
margin-block-end: 12px;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-block-end: 12px;
|
||||
|
||||
li {
|
||||
@include mixin.typescale-style("body-large");
|
||||
|
||||
position: relative;
|
||||
|
||||
margin-block-start: 12px;
|
||||
|
||||
vertical-align: middle;
|
||||
|
||||
code {
|
||||
display: inline;
|
||||
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
li {
|
||||
&::marker {
|
||||
font-variation-settings: "wght" 700;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-inline: 0px;
|
||||
padding-block: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-inline-start: 24px;
|
||||
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: var(--bullet-top);
|
||||
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
||||
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;
|
||||
|
||||
transform: rotate(var(--random-rotation, 0deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&#article-indicator {
|
||||
grid-column: 10 / 13;
|
||||
|
||||
position: sticky;
|
||||
top: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
section {
|
||||
&#article-content {
|
||||
grid-column: 1 / 10;
|
||||
}
|
||||
|
||||
&#article-indicator {
|
||||
grid-column: 10 / 13;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
section {
|
||||
&#article-content {
|
||||
grid-column: 1 / 7;
|
||||
}
|
||||
|
||||
&#article-indicator {
|
||||
grid-column: 7 / 9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 840px) {
|
||||
section {
|
||||
&#article-content {
|
||||
grid-column: 1 / 7;
|
||||
}
|
||||
|
||||
&#article-indicator {
|
||||
grid-column: 5 / 7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
section {
|
||||
&#article-content {
|
||||
grid-column: 1 / 5;
|
||||
}
|
||||
|
||||
&#article-indicator {
|
||||
grid-column: 3 / 5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@use "sass:meta";
|
||||
@include meta.load-css("../styles/layouts/Article");
|
||||
</style>
|
||||
|
||||
@@ -105,7 +105,7 @@ if (typeof window !== "undefined") {
|
||||
|
||||
<template>
|
||||
<div id="layout">
|
||||
<Navbar />
|
||||
<NavBar />
|
||||
<AppBar />
|
||||
<Transition name="layout-content" mode="out-in" @before-leave="onBeforeLeave" @after-enter="onAfterEnter">
|
||||
<div id="layout-content-flow" :key="route.path">
|
||||
@@ -124,119 +124,5 @@ if (typeof window !== "undefined") {
|
||||
|
||||
<style lang="scss">
|
||||
@use "sass:meta";
|
||||
@use "../styles/mixin";
|
||||
|
||||
#layout {
|
||||
display: grid;
|
||||
grid-template-columns: 96px auto;
|
||||
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
#layout-content-flow {
|
||||
display: grid;
|
||||
align-content: space-between;
|
||||
align-items: start;
|
||||
gap: 24px;
|
||||
grid-column: 2;
|
||||
grid-template-columns: repeat(12, minmax(60px, 72px));
|
||||
justify-content: center;
|
||||
|
||||
position: relative;
|
||||
|
||||
padding-block-end: 68px;
|
||||
padding-block-start: 12px;
|
||||
|
||||
width: 100%;
|
||||
|
||||
overflow: overlay;
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding-top: 120px;
|
||||
scrollbar-width: thin;
|
||||
|
||||
#layout-content-filler {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
grid-column: 1 / 13;
|
||||
|
||||
height: 100%;
|
||||
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
#layout-home-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 42px;
|
||||
grid-column: 1 / 13;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
|
||||
h1 {
|
||||
@include mixin.typescale-style("display-large");
|
||||
|
||||
grid-column: span 9;
|
||||
}
|
||||
|
||||
h6 {
|
||||
grid-column: span 9;
|
||||
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
img {
|
||||
grid-column: 11 / span 2;
|
||||
grid-row: 2 / span 2;
|
||||
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
|
||||
-webkit-mask: var(--via-svg-mask) no-repeat 0 / 100%;
|
||||
mask: var(--via-svg-mask) no-repeat 0 / 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
#layout #layout-content-flow {
|
||||
grid-template-columns: repeat(12, minmax(60px, 72px));
|
||||
|
||||
padding-inline: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
#layout #layout-content-flow {
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 840px) {
|
||||
#layout {
|
||||
grid-template-columns: 0px auto;
|
||||
grid-template-rows: auto 80px;
|
||||
|
||||
#layout-content-flow {
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
|
||||
padding-block: 64px;
|
||||
padding-inline: 42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
#layout #layout-content-flow {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
|
||||
padding-inline: 12px;
|
||||
}
|
||||
}
|
||||
@include meta.load-css("../styles/layouts/Default");
|
||||
</style>
|
||||
|
||||
@@ -20,95 +20,5 @@
|
||||
|
||||
<style lang="scss">
|
||||
@use "sass:meta";
|
||||
@use "../styles/mixin";
|
||||
|
||||
.notfound {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
grid-column: span 12;
|
||||
justify-content: space-evenly;
|
||||
|
||||
height: 100%;
|
||||
|
||||
padding: 5vw;
|
||||
|
||||
color: var(--md-sys-color-on-error-container);
|
||||
|
||||
#notfound-information {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
margin-inline-start: 5px;
|
||||
|
||||
h1 {
|
||||
margin: 6vh 0px;
|
||||
|
||||
font-size: 100rem;
|
||||
line-height: 100rem;
|
||||
}
|
||||
|
||||
h2,
|
||||
a {
|
||||
@include mixin.typescale-style("display-small");
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
#notfound-qrcode {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
justify-content: flex-start;
|
||||
|
||||
margin-inline-start: 5px;
|
||||
|
||||
span {
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
outline: 2px solid var(--md-sys-color-outline);
|
||||
|
||||
background-image: var(--via-svg-qrcode-rickroll);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
.notfound {
|
||||
grid-column: span 12;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
.notfound {
|
||||
grid-column: span 8;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 840px) {
|
||||
.notfound {
|
||||
grid-column: span 6;
|
||||
|
||||
#notfound-information {
|
||||
h1 {
|
||||
font-size: 75rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 20rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.notfound {
|
||||
grid-column: span 4;
|
||||
}
|
||||
}
|
||||
@include meta.load-css("../styles/layouts/NotFound");
|
||||
</style>
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
.loading-splash {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
opacity: 1;
|
||||
transition: var(--md-sys-motion-duration-long1) var(--md-sys-motion-easing-standard);
|
||||
z-index: 100;
|
||||
|
||||
md-linear-progress {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
206
.vitepress/theme/styles/components/AppBar.scss
Normal file
206
.vitepress/theme/styles/components/AppBar.scss
Normal file
@@ -0,0 +1,206 @@
|
||||
@use "../mixin";
|
||||
|
||||
.appbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
gap: 8px;
|
||||
justify-content: space-between;
|
||||
|
||||
position: fixed;
|
||||
top: -64px;
|
||||
right: 0px;
|
||||
|
||||
height: 64px;
|
||||
width: calc(100% - 96px);
|
||||
|
||||
padding-inline: 4px;
|
||||
|
||||
color: var(--md-sys-color-on-surface);
|
||||
|
||||
background-color: var(--md-sys-color-surface);
|
||||
|
||||
overflow: hidden;
|
||||
transition: var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect);
|
||||
z-index: 998;
|
||||
|
||||
.actionArea {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
|
||||
position: relative;
|
||||
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
|
||||
.leadingButton {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
|
||||
margin-inline: 4px 8px;
|
||||
|
||||
opacity: 1;
|
||||
transition: opacity var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
|
||||
z-index: 0;
|
||||
|
||||
MaterialButton:focus-visible {
|
||||
@include mixin.focus-ring($thickness: 2);
|
||||
}
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
@include mixin.typescale-style("title-medium");
|
||||
|
||||
flex-grow: 1;
|
||||
|
||||
height: 56px;
|
||||
min-width: 0px;
|
||||
|
||||
margin-inline-start: 0px;
|
||||
padding-block: 0px;
|
||||
padding-inline: 24px;
|
||||
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
text-overflow: ellipsis;
|
||||
|
||||
border: none;
|
||||
border-radius: var(--md-sys-shape-corner-full);
|
||||
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
|
||||
transition: margin var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
|
||||
z-index: 1;
|
||||
|
||||
&:focus-visible {
|
||||
@include mixin.focus-ring($thickness: 2);
|
||||
}
|
||||
}
|
||||
|
||||
.authorAvatar {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
|
||||
img {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
||||
object-fit: cover;
|
||||
-webkit-mask: var(--via-svg-mask) no-repeat 0 / 100%;
|
||||
mask: var(--via-svg-mask) no-repeat 0 / 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.searchResult {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
gap: 8px;
|
||||
|
||||
position: absolute;
|
||||
top: 64px;
|
||||
|
||||
width: 100%;
|
||||
|
||||
padding-inline: 24px;
|
||||
padding-block-start: 12px;
|
||||
|
||||
overflow: scroll;
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
|
||||
.description {
|
||||
margin-block-end: 12px;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include mixin.focus-ring($thickness: 2, $offset: 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.searching {
|
||||
top: 0px;
|
||||
|
||||
height: 100%;
|
||||
|
||||
padding: 12px;
|
||||
|
||||
.actionArea {
|
||||
.leadingButton {
|
||||
opacity: 0;
|
||||
transition: opacity var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
margin-inline-start: 0px;
|
||||
|
||||
transition: margin var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.scroll {
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
|
||||
.searchInput {
|
||||
background-color: var(--md-sys-color-surface-container-highest);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 840px) {
|
||||
.appbar {
|
||||
top: 0;
|
||||
|
||||
width: 100%;
|
||||
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
.actionArea {
|
||||
.searchInput {
|
||||
margin-inline-start: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.searchResult {
|
||||
height: calc(100% - (80px + 64px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
}
|
||||
231
.vitepress/theme/styles/components/Button.scss
Normal file
231
.vitepress/theme/styles/components/Button.scss
Normal file
@@ -0,0 +1,231 @@
|
||||
@use "../mixin";
|
||||
|
||||
.md-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
position: relative;
|
||||
|
||||
text-decoration: none !important;
|
||||
vertical-align: middle;
|
||||
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 0px;
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: border-radius var(--md-sys-motion-spring-fast-spatial-standard-duration)
|
||||
var(--md-sys-motion-spring-fast-spatial-standard);
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
background-color: var(--md-sys-state-hover-state-layer);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include mixin.focus-ring($thickness: 3, $offset: 2);
|
||||
|
||||
&::after {
|
||||
background-color: var(--md-sys-state-focus-state-layer);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
|
||||
|
||||
&::after {
|
||||
background-color: var(--md-sys-state-pressed-state-layer);
|
||||
}
|
||||
}
|
||||
|
||||
&.xs {
|
||||
@include mixin.typescale-style("label-large");
|
||||
|
||||
gap: 8px;
|
||||
|
||||
height: 32px;
|
||||
|
||||
padding-inline: 12px;
|
||||
|
||||
border-width: 1px;
|
||||
|
||||
span {
|
||||
@include mixin.material-symbols($size: 20);
|
||||
}
|
||||
|
||||
&.round {
|
||||
border-radius: var(--md-sys-shape-corner-full);
|
||||
}
|
||||
|
||||
&.square {
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
}
|
||||
}
|
||||
|
||||
&.s {
|
||||
@include mixin.typescale-style("label-large");
|
||||
|
||||
gap: 8px;
|
||||
|
||||
height: 40px;
|
||||
|
||||
padding-inline: 16px;
|
||||
|
||||
border-width: 1px;
|
||||
|
||||
span {
|
||||
@include mixin.material-symbols($size: 20);
|
||||
}
|
||||
|
||||
&.round {
|
||||
border-radius: var(--md-sys-shape-corner-full);
|
||||
}
|
||||
|
||||
&.square {
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
}
|
||||
}
|
||||
|
||||
&.m {
|
||||
@include mixin.typescale-style("title-medium");
|
||||
|
||||
gap: 8px;
|
||||
|
||||
height: 56px;
|
||||
|
||||
padding-inline: 24px;
|
||||
|
||||
border-width: 1px;
|
||||
|
||||
span {
|
||||
@include mixin.material-symbols($size: 24);
|
||||
}
|
||||
|
||||
&.round {
|
||||
border-radius: var(--md-sys-shape-corner-full);
|
||||
}
|
||||
|
||||
&.square {
|
||||
border-radius: var(--md-sys-shape-corner-large);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-radius: var(--md-sys-shape-corner-large);
|
||||
}
|
||||
}
|
||||
|
||||
&.l {
|
||||
@include mixin.typescale-style("headline-small");
|
||||
|
||||
gap: 12px;
|
||||
|
||||
height: 96px;
|
||||
|
||||
padding-inline: 48px;
|
||||
|
||||
border-width: 2px;
|
||||
|
||||
span {
|
||||
@include mixin.material-symbols($size: 32);
|
||||
}
|
||||
|
||||
&.round {
|
||||
border-radius: var(--md-sys-shape-corner-full);
|
||||
}
|
||||
|
||||
&.square {
|
||||
border-radius: var(--md-sys-shape-corner-extra-large);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-radius: var(--md-sys-shape-corner-extra-large);
|
||||
}
|
||||
}
|
||||
|
||||
&.xl {
|
||||
@include mixin.typescale-style("headline-large");
|
||||
|
||||
gap: 16px;
|
||||
|
||||
height: 136px;
|
||||
|
||||
padding-inline: 64px;
|
||||
|
||||
border-width: 3px;
|
||||
|
||||
span {
|
||||
@include mixin.material-symbols($size: 40);
|
||||
}
|
||||
|
||||
&.round {
|
||||
border-radius: var(--md-sys-shape-corner-full);
|
||||
}
|
||||
|
||||
&.square {
|
||||
border-radius: var(--md-sys-shape-corner-extra-large);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-radius: var(--md-sys-shape-corner-extra-large);
|
||||
}
|
||||
}
|
||||
|
||||
&.elevated {
|
||||
color: var(--md-sys-color-primary);
|
||||
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
|
||||
box-shadow: 0px 1px 3px var(--md-sys-color-shadow);
|
||||
}
|
||||
|
||||
&.filled {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
&.tonal {
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
}
|
||||
|
||||
&.outlined {
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
|
||||
border-color: var(--md-sys-color-outline-variant);
|
||||
}
|
||||
|
||||
&.standard,
|
||||
&.text {
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
}
|
||||
107
.vitepress/theme/styles/components/Footer.scss
Normal file
107
.vitepress/theme/styles/components/Footer.scss
Normal file
@@ -0,0 +1,107 @@
|
||||
@use "../mixin";
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
grid-column: span 12;
|
||||
justify-content: space-around;
|
||||
|
||||
margin-inline: 12px;
|
||||
padding-block-end: 18px;
|
||||
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#main-layout-footer-description {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
|
||||
#main-layout-footer-description-topic {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
|
||||
img {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
|
||||
-webkit-mask: var(--via-svg-mask) no-repeat 0 / 100%;
|
||||
mask: var(--via-svg-mask) no-repeat 0 / 100%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
letter-spacing: 0.8px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
#main-layout-footer-description-theme {
|
||||
@include mixin.typescale-style("body-large");
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
#main-layout-footer-description-beian {
|
||||
@include mixin.typescale-style("body-large");
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
|
||||
#main-layout-footer-beian-gongan {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
img {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#main-layout-footer-social-media {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
footer {
|
||||
grid-column: span 12;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
footer {
|
||||
grid-column: span 8;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 840px) {
|
||||
footer {
|
||||
grid-column: span 6;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
footer {
|
||||
grid-column: span 4;
|
||||
}
|
||||
}
|
||||
207
.vitepress/theme/styles/components/Header.scss
Normal file
207
.vitepress/theme/styles/components/Header.scss
Normal file
@@ -0,0 +1,207 @@
|
||||
@use "../mixin";
|
||||
|
||||
header {
|
||||
grid-column: span 12;
|
||||
|
||||
position: relative;
|
||||
|
||||
height: 540px;
|
||||
|
||||
word-break: break-word;
|
||||
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#header-hero-container {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
|
||||
padding: 54px;
|
||||
|
||||
color: var(--md-ref-palette-secondary100);
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
border: 1px solid var(--md-sys-color-outline-variant);
|
||||
|
||||
overflow: hidden;
|
||||
transition: var(--md-sys-motion-duration-extra-long4) var(--md-sys-motion-easing-standard);
|
||||
z-index: 1;
|
||||
|
||||
#header-hero-headline {
|
||||
@include mixin.typescale-style(
|
||||
"display-large",
|
||||
$font-size: 90rem,
|
||||
$line-height: 90rem,
|
||||
$font-variation-settings: "wght" 700
|
||||
);
|
||||
|
||||
width: 100%;
|
||||
|
||||
text-align: center;
|
||||
|
||||
mix-blend-mode: hard-light;
|
||||
transition: var(--md-sys-motion-duration-short1) var(--md-sys-motion-easing-standard);
|
||||
}
|
||||
|
||||
#header-hero-subtitle {
|
||||
@include mixin.typescale-style("headline-large", $font-size: 22rem, $line-height: 22rem);
|
||||
|
||||
width: 100%;
|
||||
|
||||
text-align: center;
|
||||
|
||||
mix-blend-mode: hard-light;
|
||||
transition: var(--md-sys-motion-duration-short1) var(--md-sys-motion-easing-standard);
|
||||
}
|
||||
|
||||
#header-impression {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
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;
|
||||
|
||||
#header-impression-noise {
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
filter: url(#noise-filter);
|
||||
mix-blend-mode: soft-light;
|
||||
opacity: 0.2;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#header-impression-image {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
background: center/cover no-repeat;
|
||||
|
||||
opacity: 0.8;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: var(--md-ref-palette-secondary10);
|
||||
|
||||
#header-impression-noise {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
#header-impression-image {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
header {
|
||||
grid-column: span 12;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
header {
|
||||
grid-column: span 8;
|
||||
|
||||
height: 45vh;
|
||||
min-height: 360px;
|
||||
|
||||
#header-hero-container {
|
||||
padding: 5vw;
|
||||
|
||||
#header-hero-headline {
|
||||
@include mixin.typescale-style(
|
||||
"display-large",
|
||||
$font-size: 7vw,
|
||||
$line-height: 7vw,
|
||||
$font-variation-settings: "wght" 500
|
||||
);
|
||||
}
|
||||
|
||||
#header-hero-subtitle {
|
||||
@include mixin.typescale-style(
|
||||
"display-small",
|
||||
$font-size: 18rem,
|
||||
$line-height: 20rem,
|
||||
$font-variation-settings: "wght" 500
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 840px) {
|
||||
header {
|
||||
grid-column: span 6;
|
||||
|
||||
#header-hero-container {
|
||||
width: 100%;
|
||||
|
||||
#header-hero-headline {
|
||||
@include mixin.typescale-style(
|
||||
"display-large",
|
||||
$font-size: 8vw,
|
||||
$line-height: 8vw,
|
||||
$font-variation-settings: "wght" 600
|
||||
);
|
||||
}
|
||||
|
||||
#header-hero-subtitle {
|
||||
@include mixin.typescale-style("headline-large", $font-size: 23rem, $line-height: 23rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
header {
|
||||
grid-column: span 4;
|
||||
|
||||
#header-hero-container {
|
||||
padding: 30px;
|
||||
|
||||
#header-hero-headline {
|
||||
@include mixin.typescale-style(
|
||||
"display-large",
|
||||
$font-size: 40rem,
|
||||
$line-height: 40rem,
|
||||
$font-variation-settings: "wght" 700
|
||||
);
|
||||
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
#header-hero-subtitle {
|
||||
@include mixin.typescale-style(
|
||||
"display-small",
|
||||
$font-size: 15rem,
|
||||
$line-height: 17rem,
|
||||
$font-variation-settings: "wght" 400
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
174
.vitepress/theme/styles/components/ImageViewer.scss
Normal file
174
.vitepress/theme/styles/components/ImageViewer.scss
Normal file
@@ -0,0 +1,174 @@
|
||||
@use "../mixin";
|
||||
|
||||
.image-viewer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
background-color: #ffffffb9;
|
||||
backdrop-filter: blur(20px);
|
||||
|
||||
opacity: 0;
|
||||
transition: var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect);
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
z-index: 9999;
|
||||
|
||||
.index-text {
|
||||
padding-block: 3px;
|
||||
padding-inline: 9px;
|
||||
|
||||
color: var(--md-sys-color-surface-variant);
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
|
||||
background-color: var(--md-sys-color-on-surface-variant);
|
||||
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.btn-close,
|
||||
.btn-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
position: absolute !important;
|
||||
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.btn-nav {
|
||||
top: 50%;
|
||||
|
||||
&.prev {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
&.next {
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
|
||||
padding-block-start: 5vh;
|
||||
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.content-image {
|
||||
border-radius: var(--md-sys-shape-corner-full);
|
||||
|
||||
background-color: var(--md-sys-color-surface-variant);
|
||||
|
||||
clip-path: circle(10%);
|
||||
object-fit: contain;
|
||||
transition: var(--md-sys-motion-spring-slow-spatial-duration) var(--md-sys-motion-spring-slow-spatial);
|
||||
|
||||
&.transitioning {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&.notransition {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnails {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
max-width: calc(100% - 66px);
|
||||
|
||||
padding: 24px;
|
||||
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
flex-shrink: 0;
|
||||
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
|
||||
padding: 0px;
|
||||
|
||||
border: 0px;
|
||||
border-radius: var(--md-sys-shape-corner-large);
|
||||
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
|
||||
|
||||
&.active {
|
||||
@include mixin.focus-ring($thickness: 1, $offset: 2);
|
||||
|
||||
outline-color: var(--md-sys-color-on-surface-variant) !important;
|
||||
transition: transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include mixin.focus-ring($thickness: 2, $offset: 2);
|
||||
}
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
// 入场结束
|
||||
&.animating {
|
||||
opacity: 1;
|
||||
|
||||
.content-image {
|
||||
border-radius: var(--md-sys-shape-corner-large);
|
||||
|
||||
clip-path: circle(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: #000000b9;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 840px) {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
}
|
||||
@@ -1,71 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { useGlobalData } from "../composables/useGlobalData";
|
||||
import { useScreenWidth } from "../composables/useScreenWidth";
|
||||
import { useSearchState } from "../composables/useSearchState";
|
||||
|
||||
const { page, theme } = useGlobalData();
|
||||
const { isAboveBreakpoint } = useScreenWidth(840);
|
||||
const { isSearchActive, activateSearch, deactivateSearch } = useSearchState();
|
||||
|
||||
// 计算导航段落
|
||||
const navSegment = computed(() => {
|
||||
const items = theme.value.navSegment;
|
||||
return Array.isArray(items) && items.length > 0 ? items : [];
|
||||
});
|
||||
|
||||
// 规范化路径
|
||||
function normalizePath(path: string): string {
|
||||
return path.replace(/(\/index)?\.(md|html)$/, "").replace(/\/$/, "");
|
||||
}
|
||||
|
||||
// 检查链接是否为当前活动链接
|
||||
function isActive(link: string): boolean {
|
||||
const currentPath = normalizePath(page.value.relativePath);
|
||||
const targetPath = normalizePath(link);
|
||||
|
||||
return currentPath === targetPath.replace(/^\//, "") || (targetPath === "" && currentPath === "index");
|
||||
}
|
||||
|
||||
// 处理fab点击事件 - 切换搜索状态
|
||||
function toggleSearch(event: MouseEvent) {
|
||||
event.stopPropagation();
|
||||
|
||||
if (isSearchActive.value) {
|
||||
deactivateSearch();
|
||||
} else {
|
||||
activateSearch();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav :class="isAboveBreakpoint ? 'rail' : 'bar'">
|
||||
<button class="fab" @mousedown.prevent @click.stop="toggleSearch">
|
||||
<span>search</span>
|
||||
</button>
|
||||
<div class="destinations">
|
||||
<div class="segment" v-for="item in navSegment" :key="item.link" :class="isActive(item.link) ? 'active' : 'inactive'">
|
||||
<a :href="item.link">
|
||||
<div class="destination-accent">
|
||||
<div class="segment-icon">
|
||||
<span>
|
||||
{{ item.icon }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="destination-label">
|
||||
{{ item.text }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "sass:meta";
|
||||
@use "../styles/mixin";
|
||||
@use "../mixin";
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
@@ -303,4 +236,3 @@ nav {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
139
.vitepress/theme/styles/components/PageIndicator.scss
Normal file
139
.vitepress/theme/styles/components/PageIndicator.scss
Normal file
@@ -0,0 +1,139 @@
|
||||
@use "../mixin";
|
||||
|
||||
.page-indicator {
|
||||
position: relative;
|
||||
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
||||
p {
|
||||
@include mixin.typescale-style("label-small");
|
||||
|
||||
margin-inline-start: 18px;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-inline-start: 18px;
|
||||
padding-block-end: 18px;
|
||||
|
||||
font-variation-settings: "wght" 600;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
|
||||
outline: 1px solid var(--md-sys-color-primary);
|
||||
border-radius: var(--md-sys-shape-corner-extra-large);
|
||||
|
||||
pointer-events: none;
|
||||
transition: var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.indicator-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
z-index: 0;
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
|
||||
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: "";
|
||||
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
|
||||
height: 100%;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-extra-large);
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
transition: width var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial),
|
||||
heigh var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial),
|
||||
background-color var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
a {
|
||||
@include mixin.typescale-style("label-large");
|
||||
|
||||
width: 100%;
|
||||
|
||||
padding-block: 9px;
|
||||
padding-inline: 18px;
|
||||
|
||||
color: var(--md-sys-color-on-surface);
|
||||
font-variation-settings: "wght" 200;
|
||||
text-decoration: none;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-extra-large);
|
||||
|
||||
&:focus-visible {
|
||||
@include mixin.focus-ring($thickness: 2);
|
||||
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
& > a {
|
||||
color: var(--md-sys-color-primary);
|
||||
font-variation-settings: "wght" 700;
|
||||
|
||||
&:focus-visible {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.active) {
|
||||
&::after {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
width: 100%;
|
||||
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 840px) {
|
||||
.page-indicator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
}
|
||||
74
.vitepress/theme/styles/components/PrevNext.scss
Normal file
74
.vitepress/theme/styles/components/PrevNext.scss
Normal file
@@ -0,0 +1,74 @@
|
||||
@use "../mixin";
|
||||
|
||||
.prev-next {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
|
||||
margin-block-start: 24px;
|
||||
|
||||
.prev {
|
||||
grid-column: 1 / 2;
|
||||
|
||||
margin-inline-end: 6px;
|
||||
|
||||
text-align: start;
|
||||
|
||||
a {
|
||||
padding-inline-start: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.next {
|
||||
grid-column: 2 / 3;
|
||||
|
||||
margin-inline-start: 6px;
|
||||
|
||||
text-align: end;
|
||||
|
||||
a {
|
||||
padding-inline-end: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.prev,
|
||||
.next {
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
width: 100%;
|
||||
|
||||
padding-block: 12px;
|
||||
|
||||
color: var(--md-sys-color-on-surface);
|
||||
text-decoration: none !important;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
|
||||
.label {
|
||||
@include mixin.typescale-style("label-medium");
|
||||
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
|
||||
.title {
|
||||
@include mixin.typescale-style("title-large");
|
||||
|
||||
font-variation-settings: "wght" 600;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include mixin.focus-ring($thickness: 2);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--md-sys-color-surface-dim);
|
||||
}
|
||||
}
|
||||
}
|
||||
76
.vitepress/theme/styles/components/ScrollToTop.scss
Normal file
76
.vitepress/theme/styles/components/ScrollToTop.scss
Normal file
@@ -0,0 +1,76 @@
|
||||
@use "../mixin";
|
||||
|
||||
#layout-scrolltop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
grid-column: 10 / 13;
|
||||
justify-content: center;
|
||||
|
||||
position: sticky;
|
||||
bottom: 72px;
|
||||
right: 0px;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
-moz-user-select: none;
|
||||
opacity: 0;
|
||||
transition: var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
|
||||
user-select: none;
|
||||
visibility: hidden;
|
||||
z-index: 21;
|
||||
|
||||
#scrolltop-button {
|
||||
@include mixin.material-symbols($size: 24, $line-height: 84);
|
||||
|
||||
position: relative;
|
||||
|
||||
height: 84px;
|
||||
width: 84px;
|
||||
|
||||
color: var(--md-sys-color-outline);
|
||||
text-align: center;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-full);
|
||||
border: 1px solid var(--md-sys-color-outline-variant);
|
||||
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--md-sys-color-surface-container-high);
|
||||
}
|
||||
}
|
||||
|
||||
&.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
#layout-scrolltop {
|
||||
grid-column: 10 / 13;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
#layout-scrolltop {
|
||||
grid-column: 7 / 9;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 840px) {
|
||||
#layout-scrolltop {
|
||||
grid-column: 6 / 7;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
#layout-scrolltop {
|
||||
grid-column: 4 / 5;
|
||||
}
|
||||
}
|
||||
756
.vitepress/theme/styles/layouts/Article.scss
Normal file
756
.vitepress/theme/styles/layouts/Article.scss
Normal file
@@ -0,0 +1,756 @@
|
||||
@use "../mixin";
|
||||
|
||||
section {
|
||||
&#article-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-column: 1 / 10;
|
||||
|
||||
& > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
*[class^="language-"] {
|
||||
position: relative;
|
||||
|
||||
margin-block-end: 12px;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-large-increased);
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
button.copy {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
|
||||
margin-block-start: 6px;
|
||||
margin-inline-end: 6px;
|
||||
padding: 0px;
|
||||
|
||||
border: none;
|
||||
border-radius: var(--md-sys-shape-corner-extra-large);
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial),
|
||||
opacity var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect);
|
||||
visibility: hidden;
|
||||
z-index: 2;
|
||||
|
||||
&::before {
|
||||
@include mixin.material-symbols($name: "content_copy", $size: 18, $line-height: 42);
|
||||
|
||||
color: var(--md-ref-palette-neutral90);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-radius: var(--md-sys-shape-corner-large);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include mixin.focus-ring($thickness: 2, $z-index: 3);
|
||||
|
||||
outline-color: var(--md-ref-palette-neutral90) !important;
|
||||
}
|
||||
}
|
||||
|
||||
span.lang {
|
||||
@include mixin.typescale-style("body-medium", $font-family: Source Code Pro, $font-variation-settings: "wght" 700);
|
||||
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
|
||||
margin-block-start: 6px;
|
||||
margin-inline-end: 9px;
|
||||
|
||||
color: var(--md-ref-palette-neutral50);
|
||||
text-transform: uppercase;
|
||||
|
||||
transition: color var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
pre.shiki {
|
||||
grid-column: 2/3;
|
||||
grid-row: 1;
|
||||
|
||||
margin: 0px;
|
||||
padding-block: 15px;
|
||||
|
||||
overflow: overlay;
|
||||
z-index: 0;
|
||||
|
||||
code {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
div.line-numbers-wrapper {
|
||||
grid-column: 1/2;
|
||||
grid-row: 1;
|
||||
|
||||
width: max-content;
|
||||
|
||||
padding-block: 15px;
|
||||
padding-inline: 12px;
|
||||
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
|
||||
color: var(--md-ref-palette-neutral-variant50);
|
||||
|
||||
border-right: 1px solid var(--md-ref-palette-neutral-variant50);
|
||||
background-color: var(--md-ref-palette-neutral10);
|
||||
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
z-index: 0;
|
||||
|
||||
span {
|
||||
@include mixin.typescale-style("body-large", $font-family: Source Code Pro);
|
||||
}
|
||||
}
|
||||
|
||||
&.line-numbers-mode {
|
||||
display: grid;
|
||||
grid-template-columns: max-content auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span.lang {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
button.copy {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--md-ref-palette-neutral10);
|
||||
|
||||
&::before {
|
||||
color: var(--md-ref-palette-neutral90);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block {
|
||||
display: grid;
|
||||
column-gap: 12px;
|
||||
grid-template-columns: 24px auto;
|
||||
|
||||
position: relative;
|
||||
|
||||
margin-block-end: 12px;
|
||||
padding-block: 12px;
|
||||
padding-inline: 12px;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-large-increased);
|
||||
|
||||
z-index: 0;
|
||||
|
||||
&::before {
|
||||
@include mixin.material-symbols($size: 24);
|
||||
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
p.custom-block-title {
|
||||
grid-column: 2;
|
||||
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
|
||||
font-variation-settings: "wght" 700;
|
||||
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
> * {
|
||||
grid-column: 2 / 3;
|
||||
|
||||
margin-inline: 0px;
|
||||
padding-block: 0px;
|
||||
}
|
||||
|
||||
&.details {
|
||||
display: block;
|
||||
transition: background-color var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect);
|
||||
|
||||
padding: 0px;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
summary {
|
||||
@include mixin.typescale-style("body-large");
|
||||
|
||||
display: grid;
|
||||
column-gap: 12px;
|
||||
grid-template-columns: 24px auto;
|
||||
|
||||
padding-block: 12px;
|
||||
padding-inline: 12px;
|
||||
|
||||
font-variation-settings: "wght" 700;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-large-increased);
|
||||
|
||||
cursor: pointer;
|
||||
transition: var(--md-sys-motion-spring-slow-spatial-standard-duration)
|
||||
var(--md-sys-motion-spring-slow-spatial-standard);
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
||||
&::before {
|
||||
@include mixin.material-symbols("expand_more");
|
||||
|
||||
font-variation-settings: "wght" 500;
|
||||
|
||||
transform: rotateZ(-90deg);
|
||||
transition: var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include mixin.focus-ring($thickness: 3);
|
||||
}
|
||||
}
|
||||
|
||||
:not(summary) {
|
||||
margin-inline: 12px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--md-sys-color-inverse-on-surface);
|
||||
}
|
||||
|
||||
&[open] {
|
||||
padding-block-end: 12px;
|
||||
|
||||
background-color: var(--md-sys-color-inverse-on-surface);
|
||||
|
||||
summary {
|
||||
padding-block-end: 12px;
|
||||
|
||||
&::before {
|
||||
transform: rotateZ(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
color: var(--md-sys-color-on-blue-container);
|
||||
|
||||
background-color: var(--md-sys-color-blue-container);
|
||||
|
||||
&::before {
|
||||
content: "info";
|
||||
|
||||
color: var(--md-sys-color-on-blue-container);
|
||||
}
|
||||
}
|
||||
|
||||
&.tip {
|
||||
color: var(--md-sys-color-on-green-container);
|
||||
|
||||
background-color: var(--md-sys-color-green-container);
|
||||
|
||||
&::before {
|
||||
content: "lightbulb_2";
|
||||
|
||||
color: var(--md-sys-color-on-green-container);
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: var(--md-sys-color-on-yellow-container);
|
||||
|
||||
background-color: var(--md-sys-color-yellow-container);
|
||||
|
||||
&::before {
|
||||
content: "brightness_alert";
|
||||
|
||||
color: var(--md-sys-color-on-yellow-container);
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: var(--md-sys-color-on-red-container);
|
||||
|
||||
background-color: var(--md-sys-color-red-container);
|
||||
|
||||
&::before {
|
||||
content: "dangerous";
|
||||
|
||||
color: var(--md-sys-color-on-red-container);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.headline-block {
|
||||
position: relative;
|
||||
|
||||
padding-block-end: 12px;
|
||||
padding-inline-start: 24px;
|
||||
|
||||
a.title-anchor {
|
||||
@include mixin.typescale-style("body-large");
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
|
||||
position: absolute;
|
||||
left: -54px;
|
||||
top: 0px;
|
||||
|
||||
height: 54px;
|
||||
width: 54px;
|
||||
|
||||
color: var(--md-sys-color-on-surface);
|
||||
text-decoration: none;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-full);
|
||||
|
||||
opacity: 0;
|
||||
transition: var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
||||
&:focus-visible {
|
||||
@include mixin.focus-ring($thickness: 2, $z-index: 2);
|
||||
|
||||
opacity: 1;
|
||||
|
||||
span:nth-of-type(1) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
span:nth-of-type(1) {
|
||||
@include mixin.material-symbols($size: 24);
|
||||
|
||||
display: block;
|
||||
|
||||
height: 54px;
|
||||
width: 54px;
|
||||
|
||||
line-height: 54px;
|
||||
text-align: center;
|
||||
|
||||
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: 9px;
|
||||
|
||||
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 {
|
||||
display: inline-block;
|
||||
|
||||
padding-block-end: 12px;
|
||||
|
||||
line-height: 54px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&: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: underline solid;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
position: relative;
|
||||
|
||||
margin-inline: 0px;
|
||||
padding-inline-start: 24px;
|
||||
|
||||
color: var(--md-sys-color-on-tertiary-container);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
left: calc(24px / 2 - 3px);
|
||||
|
||||
height: 100%;
|
||||
width: 6px;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-small);
|
||||
|
||||
background-color: var(--md-sys-color-inverse-on-surface);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin-inline: 12px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-block: 12px;
|
||||
margin-inline: 0px;
|
||||
padding-block-end: 0px;
|
||||
}
|
||||
|
||||
.task-list-container {
|
||||
padding-block-end: 0px;
|
||||
padding-inline: 0px;
|
||||
|
||||
li.task-list-item {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
grid-template-columns: 20px auto;
|
||||
|
||||
input.task-list-item-checkbox[type="checkbox"] {
|
||||
&::before {
|
||||
@include mixin.material-symbols("check_box_outline_blank", $size: 20);
|
||||
|
||||
font-variation-settings: "FILL" 1;
|
||||
}
|
||||
|
||||
appearance: none;
|
||||
|
||||
grid-column: 1 / 2;
|
||||
|
||||
margin: 0px;
|
||||
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
&:checked {
|
||||
&::before {
|
||||
@include mixin.material-symbols("check_box", $size: 20);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > {
|
||||
ul,
|
||||
ol {
|
||||
margin-inline: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
@include mixin.typescale-style("body-large", $font-family: Source Code Pro);
|
||||
|
||||
display: inline-block;
|
||||
|
||||
width: max-content;
|
||||
|
||||
padding-block: 24px;
|
||||
|
||||
text-indent: initial;
|
||||
vertical-align: baseline;
|
||||
word-break: break-word;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-small);
|
||||
|
||||
overflow: initial;
|
||||
|
||||
&::selection {
|
||||
color: var(--md-sys-color-on-tertiary);
|
||||
|
||||
background-color: var(--md-sys-color-tertiary);
|
||||
}
|
||||
|
||||
span.line {
|
||||
display: inline-block;
|
||||
|
||||
width: 100%;
|
||||
|
||||
padding-inline: 12px;
|
||||
|
||||
&.highlighted {
|
||||
background-color: var(--md-ref-palette-neutral10);
|
||||
|
||||
span {
|
||||
background-color: var(--md-ref-palette-neutral10);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@include mixin.typescale-style("body-large", $font-family: Source Code Pro);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-block-end: 24px;
|
||||
margin-block-start: 12px;
|
||||
}
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
|
||||
margin-block-start: 12px;
|
||||
padding-block-end: 12px;
|
||||
|
||||
code {
|
||||
@include mixin.typescale-style("body-large", $font-family: Source Code Pro);
|
||||
display: inline;
|
||||
|
||||
min-width: max-content;
|
||||
|
||||
padding: 0px;
|
||||
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
em {
|
||||
display: inline-block;
|
||||
|
||||
font-style: normal;
|
||||
|
||||
transform: skewX(-10deg);
|
||||
}
|
||||
|
||||
s {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-variation-settings: "wght" 700;
|
||||
}
|
||||
|
||||
img {
|
||||
width: calc(50% - 6px);
|
||||
|
||||
margin-inline: 3px;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
padding-block-end: 12px;
|
||||
|
||||
overflow: overlay;
|
||||
|
||||
&.shiki {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
font-variation-settings: "wght" 700;
|
||||
}
|
||||
|
||||
sup.footnote-ref {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
|
||||
a[href] {
|
||||
@include mixin.typescale-style("label-small");
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
margin-block-end: 12px;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-block-end: 12px;
|
||||
|
||||
li {
|
||||
@include mixin.typescale-style("body-large");
|
||||
|
||||
position: relative;
|
||||
|
||||
margin-block-start: 12px;
|
||||
|
||||
vertical-align: middle;
|
||||
|
||||
code {
|
||||
display: inline;
|
||||
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
li {
|
||||
&::marker {
|
||||
font-variation-settings: "wght" 700;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-inline: 0px;
|
||||
padding-block: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-inline-start: 24px;
|
||||
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: var(--bullet-top);
|
||||
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
||||
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;
|
||||
|
||||
transform: rotate(var(--random-rotation, 0deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&#article-indicator {
|
||||
grid-column: 10 / 13;
|
||||
|
||||
position: sticky;
|
||||
top: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
section {
|
||||
&#article-content {
|
||||
grid-column: 1 / 10;
|
||||
}
|
||||
|
||||
&#article-indicator {
|
||||
grid-column: 10 / 13;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
section {
|
||||
&#article-content {
|
||||
grid-column: 1 / 7;
|
||||
}
|
||||
|
||||
&#article-indicator {
|
||||
grid-column: 7 / 9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 840px) {
|
||||
section {
|
||||
&#article-content {
|
||||
grid-column: 1 / 7;
|
||||
}
|
||||
|
||||
&#article-indicator {
|
||||
grid-column: 5 / 7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
section {
|
||||
&#article-content {
|
||||
grid-column: 1 / 5;
|
||||
}
|
||||
|
||||
&#article-indicator {
|
||||
grid-column: 3 / 5;
|
||||
}
|
||||
}
|
||||
}
|
||||
115
.vitepress/theme/styles/layouts/Default.scss
Normal file
115
.vitepress/theme/styles/layouts/Default.scss
Normal file
@@ -0,0 +1,115 @@
|
||||
@use "../mixin";
|
||||
|
||||
#layout {
|
||||
display: grid;
|
||||
grid-template-columns: 96px auto;
|
||||
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
#layout-content-flow {
|
||||
display: grid;
|
||||
align-content: space-between;
|
||||
align-items: start;
|
||||
gap: 24px;
|
||||
grid-column: 2;
|
||||
grid-template-columns: repeat(12, minmax(60px, 72px));
|
||||
justify-content: center;
|
||||
|
||||
position: relative;
|
||||
|
||||
padding-block-end: 68px;
|
||||
padding-block-start: 12px;
|
||||
|
||||
width: 100%;
|
||||
|
||||
overflow: overlay;
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding-top: 120px;
|
||||
scrollbar-width: thin;
|
||||
|
||||
#layout-content-filler {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
grid-column: 1 / 13;
|
||||
|
||||
height: 100%;
|
||||
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
#layout-home-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 42px;
|
||||
grid-column: 1 / 13;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
|
||||
h1 {
|
||||
@include mixin.typescale-style("display-large");
|
||||
|
||||
grid-column: span 9;
|
||||
}
|
||||
|
||||
h6 {
|
||||
grid-column: span 9;
|
||||
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
img {
|
||||
grid-column: 11 / span 2;
|
||||
grid-row: 2 / span 2;
|
||||
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
|
||||
-webkit-mask: var(--via-svg-mask) no-repeat 0 / 100%;
|
||||
mask: var(--via-svg-mask) no-repeat 0 / 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
#layout #layout-content-flow {
|
||||
grid-template-columns: repeat(12, minmax(60px, 72px));
|
||||
|
||||
padding-inline: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
#layout #layout-content-flow {
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 840px) {
|
||||
#layout {
|
||||
grid-template-columns: 0px auto;
|
||||
grid-template-rows: auto 80px;
|
||||
|
||||
#layout-content-flow {
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
|
||||
padding-block: 64px;
|
||||
padding-inline: 42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
#layout #layout-content-flow {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
|
||||
padding-inline: 12px;
|
||||
}
|
||||
}
|
||||
91
.vitepress/theme/styles/layouts/NotFound.scss
Normal file
91
.vitepress/theme/styles/layouts/NotFound.scss
Normal file
@@ -0,0 +1,91 @@
|
||||
@use "../mixin";
|
||||
|
||||
.notfound {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
grid-column: span 12;
|
||||
justify-content: space-evenly;
|
||||
|
||||
height: 100%;
|
||||
|
||||
padding: 5vw;
|
||||
|
||||
color: var(--md-sys-color-on-error-container);
|
||||
|
||||
#notfound-information {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
margin-inline-start: 5px;
|
||||
|
||||
h1 {
|
||||
margin: 6vh 0px;
|
||||
|
||||
font-size: 100rem;
|
||||
line-height: 100rem;
|
||||
}
|
||||
|
||||
h2,
|
||||
a {
|
||||
@include mixin.typescale-style("display-small");
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
#notfound-qrcode {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
justify-content: flex-start;
|
||||
|
||||
margin-inline-start: 5px;
|
||||
|
||||
span {
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
outline: 2px solid var(--md-sys-color-outline);
|
||||
|
||||
background-image: var(--via-svg-qrcode-rickroll);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
.notfound {
|
||||
grid-column: span 12;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
.notfound {
|
||||
grid-column: span 8;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 840px) {
|
||||
.notfound {
|
||||
grid-column: span 6;
|
||||
|
||||
#notfound-information {
|
||||
h1 {
|
||||
font-size: 75rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 20rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.notfound {
|
||||
grid-column: span 4;
|
||||
}
|
||||
}
|
||||
@@ -8,10 +8,7 @@
|
||||
@include meta.load-css("tokens");
|
||||
@include meta.load-css("animation");
|
||||
|
||||
@include meta.load-css("_components/dialog");
|
||||
@include meta.load-css("_components/loading-splash");
|
||||
@include meta.load-css("_components/snackbar");
|
||||
@include meta.load-css("_components/table");
|
||||
@include meta.load-css("components/Table");
|
||||
|
||||
:root {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
Reference in New Issue
Block a user