diff --git a/.node-version b/.node-version
index 805b5a4e0..53d1c14db 100644
--- a/.node-version
+++ b/.node-version
@@ -1 +1 @@
-v20.9.0
+v22
diff --git a/package.json b/package.json
index 83fac885b..d5e0c677e 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
},
"engines": {
"npm": ">=9.3.1",
- "node": "20 || >=22"
+ "node": ">=22"
},
"keywords": [
"site generator",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 80ab67f82..ff8323b82 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2387,14 +2387,14 @@ packages:
reading-time@1.5.0:
resolution: {integrity: sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==}
- regex-recursion@5.0.0:
- resolution: {integrity: sha512-UwyOqeobrCCqTXPcsSqH4gDhOjD5cI/b8kjngWgSZbxYh5yVjAwTjO5+hAuPRNiuR70+5RlWSs+U9PVcVcW9Lw==}
+ regex-recursion@5.1.1:
+ resolution: {integrity: sha512-ae7SBCbzVNrIjgSbh7wMznPcQel1DNlDtzensnFxpiNpXt1U2ju/bHugH422r+4LAVS1FpW1YCwilmnNsjum9w==}
regex-utilities@2.3.0:
resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
- regex@5.0.2:
- resolution: {integrity: sha512-/pczGbKIQgfTMRV0XjABvc5RzLqQmwqxLHdQao2RTXPk+pmTXB2P0IaUHYdYyk412YLwUIkaeMd5T+RzVgTqnQ==}
+ regex@5.1.1:
+ resolution: {integrity: sha512-dN5I359AVGPnwzJm2jN1k0W9LPZ+ePvoOeVMMfqIMFz53sSwXkxaJoxr50ptnsC771lK95BnTrVSZxq0b9yCGw==}
rehype-autolink-headings@7.1.0:
resolution: {integrity: sha512-rItO/pSdvnvsP4QRB1pmPiNHUskikqtPojZKJPPPAVx9Hj8i8TwMBhofrrAYRhYOOBZH9tgmG5lPqDLuIWPWmw==}
@@ -5184,8 +5184,8 @@ snapshots:
oniguruma-to-es@0.8.1:
dependencies:
emoji-regex-xs: 1.0.0
- regex: 5.0.2
- regex-recursion: 5.0.0
+ regex: 5.1.1
+ regex-recursion: 5.1.1
package-json-from-dist@1.0.1: {}
@@ -5305,13 +5305,14 @@ snapshots:
reading-time@1.5.0: {}
- regex-recursion@5.0.0:
+ regex-recursion@5.1.1:
dependencies:
+ regex: 5.1.1
regex-utilities: 2.3.0
regex-utilities@2.3.0: {}
- regex@5.0.2:
+ regex@5.1.1:
dependencies:
regex-utilities: 2.3.0
diff --git a/quartz.config.ts b/quartz.config.ts
index e822892be..fb5f43f1f 100644
--- a/quartz.config.ts
+++ b/quartz.config.ts
@@ -24,8 +24,8 @@ const config: QuartzConfig = {
fontOrigin: "googleFonts",
cdnCaching: true,
typography: {
- header: "Schibsted Grotesk",
- body: "Source Sans Pro",
+ header: "Noto Sans Simplified Chinese",
+ body: "Noto Sans Simplified Chinese",
code: "IBM Plex Mono",
},
colors: {
diff --git a/quartz.layout.ts b/quartz.layout.ts
index 4a78256aa..a70693cef 100644
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@@ -8,8 +8,10 @@ export const sharedPageComponents: SharedLayout = {
afterBody: [],
footer: Component.Footer({
links: {
- GitHub: "https://github.com/jackyzha0/quartz",
- "Discord Community": "https://discord.gg/cRFFHYye7t",
+ GitHub: "https://github.com/cssdao",
+ "Discord": "https://discord.gg/Yn26BZ5x",
+ "X(Twitter)": "https://x.com/cssdao",
+ "Telegram": "https://t.me/brotherblockchain",
},
}),
}
diff --git a/quartz/components/Footer.tsx b/quartz/components/Footer.tsx
index f08c4901c..05a9321c2 100644
--- a/quartz/components/Footer.tsx
+++ b/quartz/components/Footer.tsx
@@ -11,22 +11,21 @@ export default ((opts?: Options) => {
const Footer: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
const year = new Date().getFullYear()
const links = opts?.links ?? []
- return null
- // (
- //
- // )
+ return (
+
+ )
}
Footer.css = style
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 99acd4e60..00893d5b1 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -24,6 +24,7 @@ section {
padding: 0 0.1rem;
border-radius: 5px;
}
+
::selection {
background: color-mix(in srgb, var(--tertiary) 60%, rgba(255, 255, 255, 0));
color: var(--darkgray);
@@ -90,6 +91,7 @@ a {
border-radius: 0;
padding: 0;
}
+
&.tag-link {
&::before {
content: "#";
@@ -101,7 +103,7 @@ a {
height: 1ex;
margin: 0 0.15em;
- > path {
+ >path {
fill: var(--dark);
}
}
@@ -109,6 +111,7 @@ a {
.desktop-only {
display: initial;
+
@media all and ($mobile) {
display: none;
}
@@ -116,6 +119,7 @@ a {
.mobile-only {
display: none;
+
@media all and ($mobile) {
display: initial;
}
@@ -124,8 +128,9 @@ a {
.page {
max-width: calc(#{map.get($breakpoints, desktop)} + 300px);
margin: 0 auto;
+
& article {
- & > h1 {
+ &>h1 {
font-size: 2rem;
}
@@ -140,23 +145,24 @@ a {
color: var(--gray);
}
- & li > * {
+ & li>* {
margin-top: 0;
margin-bottom: 0;
}
- p > strong {
+ p>strong {
color: var(--dark);
}
}
- & > #quartz-body {
+ &>#quartz-body {
display: grid;
grid-template-columns: #{map.get($desktopGrid, templateColumns)};
grid-template-rows: #{map.get($desktopGrid, templateRows)};
column-gap: #{map.get($desktopGrid, columnGap)};
row-gap: #{map.get($desktopGrid, rowGap)};
grid-template-areas: #{map.get($desktopGrid, templateAreas)};
+
@media all and ($tablet) {
grid-template-columns: #{map.get($tabletGrid, templateColumns)};
grid-template-rows: #{map.get($tabletGrid, templateRows)};
@@ -164,6 +170,7 @@ a {
row-gap: #{map.get($tabletGrid, rowGap)};
grid-template-areas: #{map.get($tabletGrid, templateAreas)};
}
+
@media all and ($mobile) {
grid-template-columns: #{map.get($mobileGrid, templateColumns)};
grid-template-rows: #{map.get($mobileGrid, templateRows)};
@@ -175,6 +182,7 @@ a {
@media all and not ($desktop) {
padding: 0 1rem;
}
+
@media all and ($mobile) {
margin: 0 auto;
}
@@ -193,6 +201,7 @@ a {
z-index: 1;
grid-area: grid-sidebar-left;
flex-direction: column;
+
@media all and ($mobile) {
gap: 0;
align-items: center;
@@ -209,24 +218,29 @@ a {
grid-area: grid-sidebar-right;
margin-right: 0;
flex-direction: column;
+
@media all and ($mobile) {
margin-left: inherit;
margin-right: inherit;
}
+
@media all and not ($desktop) {
position: initial;
height: unset;
width: 100%;
flex-direction: row;
padding: 0;
- & > * {
+
+ &>* {
flex: 1;
}
- & > .toc {
+
+ &>.toc {
display: none;
}
}
}
+
& .page-header,
& .page-footer {
margin-top: 1rem;
@@ -235,13 +249,14 @@ a {
& .page-header {
grid-area: grid-header;
margin: $topSpacing 0 0 0;
+
@media all and ($mobile) {
margin-top: 0;
padding: 0;
}
}
- & .center > article {
+ & .center>article {
grid-area: grid-center;
}
@@ -255,14 +270,17 @@ a {
min-width: 100%;
margin-left: auto;
margin-right: auto;
+
@media all and ($tablet) {
margin-right: 0;
}
+
@media all and ($mobile) {
margin-right: 0;
margin-left: 0;
}
}
+
& footer {
margin-left: 0;
}
@@ -325,7 +343,7 @@ thead {
font-weight: revert;
margin-bottom: 0;
- article > & > a[role="anchor"] {
+ article>&>a[role="anchor"] {
color: var(--dark);
background-color: transparent;
}
@@ -337,7 +355,7 @@ h3,
h4,
h5,
h6 {
- &[id] > a[href^="#"] {
+ &[id]>a[href^="#"] {
margin: 0 0.5rem;
opacity: 0;
transition: opacity 0.2s ease;
@@ -346,7 +364,7 @@ h6 {
user-select: none;
}
- &[id]:hover > a {
+ &[id]:hover>a {
opacity: 1;
}
}
@@ -384,7 +402,7 @@ figure[data-rehype-pretty-code-figure] {
line-height: 1.6rem;
position: relative;
- & > [data-rehype-pretty-code-title] {
+ &>[data-rehype-pretty-code-title] {
font-family: var(--codeFont);
font-size: 0.9rem;
padding: 0.1rem 0.5rem;
@@ -395,7 +413,7 @@ figure[data-rehype-pretty-code-figure] {
color: var(--darkgray);
}
- & > pre {
+ &>pre {
padding: 0;
}
}
@@ -412,7 +430,7 @@ pre {
border: none;
}
- & > code {
+ &>code {
background: none;
padding: 0;
font-size: 0.85rem;
@@ -427,7 +445,7 @@ pre {
border-radius: 5px;
}
- & > [data-line] {
+ &>[data-line] {
padding: 0 0.25rem;
box-sizing: border-box;
border-left: 3px solid transparent;
@@ -448,11 +466,11 @@ pre {
}
}
- &[data-line-numbers-max-digits="2"] > [data-line]::before {
+ &[data-line-numbers-max-digits="2"]>[data-line]::before {
width: 2rem;
}
- &[data-line-numbers-max-digits="3"] > [data-line]::before {
+ &[data-line-numbers-max-digits="3"]>[data-line]::before {
width: 3rem;
}
}
@@ -470,13 +488,13 @@ code {
tbody,
li,
p {
- line-height: 1.6rem;
+ line-height: 1.75em;
}
.table-container {
overflow-x: auto;
- & > table {
+ &>table {
margin: 1rem;
padding: 1.5rem;
border-collapse: collapse;
@@ -486,7 +504,7 @@ p {
min-width: 75px;
}
- & > * {
+ &>* {
line-height: 2rem;
}
}
@@ -504,6 +522,7 @@ td {
tr {
border-bottom: 1px solid var(--lightgray);
+
&:last-child {
border-bottom: none;
}
@@ -515,7 +534,7 @@ img {
margin: 1rem 0;
}
-p > img + em {
+p>img+em {
display: block;
transform: translateY(-1rem);
}
@@ -553,9 +572,10 @@ ol.overflow {
content: "";
clear: both;
- & > li:last-of-type {
+ &>li:last-of-type {
margin-bottom: 30px;
}
+
/*&:after {
pointer-events: none;
content: "";
@@ -587,4 +607,4 @@ iframe.pdf {
height: 100%;
width: 100%;
border-radius: 5px;
-}
+}
\ No newline at end of file