mirror of
https://github.com/sendevia/website.git
synced 2026-03-05 23:32:45 +08:00
feat(theme): add basic typography
This commit is contained in:
@@ -64,10 +64,10 @@ if (typeof window !== "undefined") {
|
||||
|
||||
<template>
|
||||
<Header />
|
||||
<section>
|
||||
<section id="article-content">
|
||||
<Content />
|
||||
</section>
|
||||
<section>
|
||||
<section id="article-indicator">
|
||||
<PageIndicator />
|
||||
</section>
|
||||
</template>
|
||||
@@ -76,16 +76,76 @@ if (typeof window !== "undefined") {
|
||||
@use "../styles/mixin";
|
||||
|
||||
section {
|
||||
&:nth-of-type(1) {
|
||||
&#article-content {
|
||||
display: flex;
|
||||
grid-column: 1 / 10;
|
||||
|
||||
margin-inline-start: 24px;
|
||||
|
||||
& > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
*[class^="language-"] {
|
||||
position: relative;
|
||||
|
||||
margin-inline: 24px;
|
||||
padding-block-end: 12px;
|
||||
|
||||
button.copy {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
|
||||
margin-block-start: 3px;
|
||||
margin-inline-end: 3px;
|
||||
padding: 0px;
|
||||
|
||||
border: none;
|
||||
border-radius: var(--md-sys-shape-corner-small);
|
||||
|
||||
background-color: var(--md-sys-color-surface-container-highest);
|
||||
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
|
||||
visibility: hidden;
|
||||
z-index: 11;
|
||||
|
||||
&::before {
|
||||
@include mixin.material-symbols($name: "content_copy", $size: 24, $line-height: 42);
|
||||
|
||||
color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
}
|
||||
|
||||
span.lang {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
|
||||
margin-block-start: 3px;
|
||||
margin-inline-end: 6px;
|
||||
|
||||
text-transform: uppercase;
|
||||
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
button.copy {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-with-achor {
|
||||
position: relative;
|
||||
|
||||
@@ -95,30 +155,32 @@ section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
gap: 6px;
|
||||
|
||||
position: absolute;
|
||||
left: -55px;
|
||||
left: -54px;
|
||||
top: 0px;
|
||||
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
width: 54px;
|
||||
|
||||
padding-inline-end: 10px;
|
||||
|
||||
color: var(--md-sys-color-on-surface);
|
||||
text-decoration: none;
|
||||
|
||||
opacity: 0;
|
||||
transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
|
||||
transition: var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
|
||||
|
||||
span:nth-of-type(1) {
|
||||
@include mixin.material-symbols($size: 24);
|
||||
|
||||
display: block;
|
||||
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
height: 54px;
|
||||
width: 54px;
|
||||
|
||||
line-height: 54px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-full);
|
||||
|
||||
@@ -131,7 +193,7 @@ section {
|
||||
@include mixin.typescale-style("label-medium");
|
||||
|
||||
padding-block: 3px;
|
||||
padding-inline: 6px;
|
||||
padding-inline: 9px;
|
||||
|
||||
word-break: keep-all;
|
||||
|
||||
@@ -150,7 +212,14 @@ section {
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-block: 24px 12px;
|
||||
margin-block-start: 18px;
|
||||
padding-block-end: 36px;
|
||||
|
||||
line-height: 54px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@@ -176,138 +245,11 @@ section {
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-block: 12px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-block: 12px;
|
||||
|
||||
em {
|
||||
display: inline-block;
|
||||
|
||||
font-style: normal;
|
||||
|
||||
transform: skewX(-10deg);
|
||||
}
|
||||
|
||||
s {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-variation-settings: "wght" 700;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-small);
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
@include mixin.typescale-style("body-large");
|
||||
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-inline-start: 20px;
|
||||
|
||||
li {
|
||||
@include mixin.typescale-style("body-large");
|
||||
|
||||
position: relative;
|
||||
|
||||
margin-block-end: 5px;
|
||||
|
||||
vertical-align: middle;
|
||||
|
||||
p a:has(img) {
|
||||
max-width: 100%;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
padding-inline-start: 70ch;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
|
||||
li::before {
|
||||
content: "";
|
||||
|
||||
display: inline-block;
|
||||
|
||||
position: absolute;
|
||||
left: -21px;
|
||||
top: 4.5px;
|
||||
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
|
||||
background-color: var(--md-sys-color-on-surface);
|
||||
|
||||
-webkit-mask: var(--via-svg-list-bullet) 0 0/100% no-repeat;
|
||||
mask: var(--via-svg-list-bullet) 0 0/100% no-repeat;
|
||||
}
|
||||
|
||||
li > p::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
p a,
|
||||
li a {
|
||||
display: inline-flex;
|
||||
|
||||
position: relative;
|
||||
|
||||
text-indent: initial;
|
||||
text-decoration: underline dashed;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
|
||||
background-color: var(--md-sys-color-primary);
|
||||
|
||||
opacity: 0.2;
|
||||
transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline solid;
|
||||
|
||||
&::before {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin-block-end: 12px;
|
||||
margin-inline: 0px;
|
||||
margin-inline: 24px;
|
||||
padding-block-start: 12px;
|
||||
|
||||
color: var(--md-sys-color-on-tertiary-container);
|
||||
@@ -326,10 +268,16 @@ section {
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-inline: 24px;
|
||||
padding-block-end: 7px;
|
||||
}
|
||||
|
||||
& > {
|
||||
ul,
|
||||
ol {
|
||||
margin-inline: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.task-list-item {
|
||||
margin: 0px;
|
||||
|
||||
@@ -339,6 +287,66 @@ section {
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
@include mixin.typescale-style("body-large", $font-family: Source Code Pro);
|
||||
|
||||
display: inline-block;
|
||||
|
||||
min-height: 46px;
|
||||
width: 100%;
|
||||
|
||||
padding-block: 24px;
|
||||
|
||||
color: var(--shiki-light);
|
||||
text-indent: initial;
|
||||
vertical-align: middle;
|
||||
word-break: break-word;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-small);
|
||||
|
||||
background-color: var(--shiki-light-bg);
|
||||
|
||||
overflow: initial;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--shiki-dark);
|
||||
|
||||
background-color: var(--shiki-dark-bg);
|
||||
|
||||
span {
|
||||
color: var(--shiki-dark);
|
||||
|
||||
background-color: var(--shiki-dark-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&::selection {
|
||||
color: var(--md-sys-color-on-tertiary);
|
||||
|
||||
background-color: var(--md-sys-color-tertiary);
|
||||
}
|
||||
|
||||
span.line {
|
||||
display: inline-block;
|
||||
|
||||
width: 100%;
|
||||
|
||||
padding-inline: 24px;
|
||||
|
||||
&.highlighted {
|
||||
background-color: var(--md-sys-color-surface-variant);
|
||||
|
||||
span {
|
||||
background-color: var(--md-sys-color-surface-variant);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@include mixin.typescale-style("body-large", $font-family: Source Code Pro);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
margin: 0.5vh 0px;
|
||||
|
||||
@@ -393,6 +401,75 @@ section {
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-block: 24px;
|
||||
margin-inline-end: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
|
||||
margin-inline: 24px;
|
||||
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 {
|
||||
max-width: 100%;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-small);
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-inline: 24px;
|
||||
padding-block-end: 12px;
|
||||
|
||||
&.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;
|
||||
margin-inline: 24px;
|
||||
@@ -400,9 +477,73 @@ section {
|
||||
|
||||
width: calc(100% - 48px);
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-inline: 24px;
|
||||
padding-block-end: 12px;
|
||||
|
||||
li {
|
||||
@include mixin.typescale-style("body-large");
|
||||
|
||||
position: relative;
|
||||
|
||||
margin-block-end: 5px;
|
||||
|
||||
vertical-align: middle;
|
||||
|
||||
code {
|
||||
display: inline;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
padding-inline-start: 70ch;
|
||||
|
||||
li {
|
||||
p {
|
||||
margin-inline: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-inline-start: 20px;
|
||||
|
||||
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));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
&#article-indicator {
|
||||
grid-column: 11 / 13;
|
||||
|
||||
position: sticky;
|
||||
|
||||
@@ -119,7 +119,6 @@ if (typeof window !== "undefined") {
|
||||
|
||||
<style lang="scss">
|
||||
@use "sass:meta";
|
||||
@use "sass:string";
|
||||
@use "../styles/mixin";
|
||||
|
||||
#layout {
|
||||
@@ -198,83 +197,49 @@ if (typeof window !== "undefined") {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
$columns: 9;
|
||||
@media screen and (max-width: 1600px) {
|
||||
$columns: 9;
|
||||
|
||||
#layout-content-flow {
|
||||
grid-template-columns: repeat($columns, 1fr);
|
||||
padding-inline: 6vw;
|
||||
#layout #layout-content-flow {
|
||||
grid-template-columns: repeat($columns, 1fr);
|
||||
padding-inline: 6vw;
|
||||
|
||||
#layout-content-filler {
|
||||
grid-column: span $columns;
|
||||
grid-template-columns: minmax(50vw, 70%) minmax(300px, 30%);
|
||||
}
|
||||
|
||||
hr {
|
||||
grid-column: span $columns;
|
||||
}
|
||||
|
||||
.layout-quicklinks {
|
||||
&[spec="previous"] {
|
||||
grid-column: 1 string.unquote("/") calc(($columns + 1) / 2);
|
||||
}
|
||||
|
||||
&[spec="next"] {
|
||||
grid-column: calc(($columns + 1) / 2) string.unquote("/") $columns;
|
||||
}
|
||||
}
|
||||
#layout-content-filler {
|
||||
grid-column: span $columns;
|
||||
grid-template-columns: minmax(50vw, 70%) minmax(300px, 30%);
|
||||
}
|
||||
|
||||
&[spec="feed"] {
|
||||
#layout-content-flow {
|
||||
& > {
|
||||
h1,
|
||||
h6 {
|
||||
grid-column: span calc($columns - 2);
|
||||
}
|
||||
|
||||
img {
|
||||
grid-column: calc($columns - 1) / calc($columns + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
hr {
|
||||
grid-column: span $columns;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
$columns: 6;
|
||||
@media screen and (max-width: 1200px) {
|
||||
$columns: 6;
|
||||
|
||||
#layout-content-flow {
|
||||
grid-template-columns: repeat($columns, 1fr);
|
||||
#layout #layout-content-flow {
|
||||
grid-template-columns: repeat($columns, 1fr);
|
||||
|
||||
padding-inline: 24px;
|
||||
padding-inline: 24px;
|
||||
|
||||
#layout-content-filler {
|
||||
grid-column: span $columns;
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
#layout-content-filler {
|
||||
grid-column: span $columns;
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
|
||||
#layout-scrolltop {
|
||||
grid-column: $columns;
|
||||
}
|
||||
|
||||
hr {
|
||||
grid-column: span $columns;
|
||||
}
|
||||
|
||||
.layout-quicklinks {
|
||||
&[spec="previous"],
|
||||
&[spec="next"] {
|
||||
grid-column: span calc($columns / 2);
|
||||
}
|
||||
}
|
||||
hr {
|
||||
grid-column: span $columns;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 840px) {
|
||||
$columns: 4;
|
||||
@media screen and (max-width: 840px) {
|
||||
$columns: 4;
|
||||
|
||||
#layout {
|
||||
grid-template-columns: 0px auto;
|
||||
grid-template-rows: auto 80px;
|
||||
|
||||
@@ -297,70 +262,20 @@ if (typeof window !== "undefined") {
|
||||
hr {
|
||||
grid-column: span $columns;
|
||||
}
|
||||
|
||||
.layout-quicklinks {
|
||||
&[spec="previous"],
|
||||
&[spec="next"] {
|
||||
grid-column: span calc($columns / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[spec="feed"] {
|
||||
#layout-content-flow {
|
||||
& > {
|
||||
h1 {
|
||||
@include mixin.typescale-style("display-medium");
|
||||
|
||||
grid-column: span calc($columns - 1);
|
||||
|
||||
margin-inline-start: 12px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
grid-column: span $columns;
|
||||
|
||||
margin-inline-start: 12px;
|
||||
}
|
||||
|
||||
img {
|
||||
grid-column: $columns;
|
||||
grid-row: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
$columns: 4;
|
||||
|
||||
#layout-content-flow {
|
||||
padding-inline: 12px;
|
||||
#layout-content-filler [role="doc-endnotes"]ol {
|
||||
margin-inline: 0px;
|
||||
padding-inline: 0px;
|
||||
}
|
||||
|
||||
.layout-quicklinks {
|
||||
&[spec="previous"],
|
||||
&[spec="next"] {
|
||||
grid-column: span $columns;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 840px) {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
$columns: 4;
|
||||
|
||||
#layout #layout-content-flow {
|
||||
padding-inline: 12px;
|
||||
|
||||
#layout-content-filler [role="doc-endnotes"]ol {
|
||||
margin-inline: 0px;
|
||||
padding-inline: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
@use "../mixin";
|
||||
|
||||
// code
|
||||
|
||||
pre.shiki {
|
||||
position: relative;
|
||||
|
||||
margin-block: 0px;
|
||||
|
||||
code {
|
||||
@include mixin.typescale-style("body-large", $font-family: Source Code Pro);
|
||||
display: inline-block;
|
||||
|
||||
margin: 0px;
|
||||
|
||||
min-height: 46px;
|
||||
width: 100%;
|
||||
|
||||
color: var(--shiki-light);
|
||||
vertical-align: middle;
|
||||
word-break: break-word;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
|
||||
background-color: var(--shiki-light-bg);
|
||||
|
||||
span {
|
||||
color: var(--shiki-light);
|
||||
|
||||
background-color: var(--shiki-light-bg);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--shiki-dark);
|
||||
|
||||
background-color: var(--shiki-dark-bg);
|
||||
|
||||
span {
|
||||
color: var(--shiki-dark);
|
||||
|
||||
background-color: var(--shiki-dark-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
code.language-plaintext {
|
||||
padding-inline: 4px;
|
||||
|
||||
color: var(--md-sys-color-inverse-surface);
|
||||
text-indent: initial;
|
||||
word-break: break-word;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-small);
|
||||
|
||||
background-color: var(--md-sys-color-inverse-on-surface);
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
&::selection {
|
||||
color: var(--md-sys-color-on-tertiary);
|
||||
|
||||
background-color: var(--md-sys-color-tertiary);
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
|
||||
@include meta.load-css("_components/appbar");
|
||||
@include meta.load-css("_components/card");
|
||||
@include meta.load-css("_components/code");
|
||||
@include meta.load-css("_components/dialog");
|
||||
@include meta.load-css("_components/loading-splash");
|
||||
@include meta.load-css("_components/snackbar");
|
||||
@@ -104,7 +103,8 @@ h6 {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
p {
|
||||
p,
|
||||
pre {
|
||||
@include mixin.typescale-style("body-large");
|
||||
|
||||
margin: 0px;
|
||||
@@ -133,17 +133,16 @@ abbr {
|
||||
|
||||
hr {
|
||||
height: 15px;
|
||||
width: 100%;
|
||||
|
||||
margin: 0px;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-small);
|
||||
border: none;
|
||||
border-radius: var(--md-sys-shape-corner-small);
|
||||
border: none;
|
||||
|
||||
background: var(--md-sys-color-outline-variant);
|
||||
background: var(--md-sys-color-outline-variant);
|
||||
|
||||
-webkit-mask: var(--via-svg-wave) repeat;
|
||||
mask: var(--via-svg-wave) repeat;
|
||||
-webkit-mask: var(--via-svg-wave) repeat;
|
||||
mask: var(--via-svg-wave) repeat;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user