GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-28 07:14:05 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

Responsive design grid

Browse Source
This commit is contained in:
saberzero1 2024-08-18 22:23:35 +02:00
parent 323167a001
commit 32d6aaeb5e
No known key found for this signature in database
GPG Key ID: 41AEE99107640F10
14 changed files with 445 additions and 276 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/layout.md
View File

@ -13,8 +13,8 @@ export interface FullPageLayout {
beforeBody: QuartzComponent[] // laid out vertically
pageBody: QuartzComponent // single component
afterBody: QuartzComponent[] // laid out vertically
left: QuartzComponent[] // vertical on desktop, horizontal on mobile
right: QuartzComponent[] // vertical on desktop, horizontal on mobile
left: QuartzComponent[] // vertical on desktop and tablet, horizontal on mobile
right: QuartzComponent[] // vertical on desktop, horizontal on tablet and mobile
footer: QuartzComponent // single component
}
```
@ -33,6 +33,23 @@ Quartz **components**, like plugins, can take in additional properties as config
See [a list of all the components](component.md) for all available components along with their configuration options. You can also checkout the guide on [[creating components]] if you're interested in further customizing the behaviour of Quartz.
### Layout breakpoints
Quartz has different layouts depending on the width the screen viewing the website.
The breakpoints for layouts can be configured in `variables.scss`.
- `mobile`: screen width below this size will use mobile layout.
- `desktop`: screen width above this size will use desktop layout.
- Screen width between `mobile` and `desktop` width will use the tablet layout.
```scss
$breakpoints: (
mobile: 800px,
desktop: 1200px,
);
```
### Style
Most meaningful style changes like colour scheme and font can be done simply through the [[configuration#General Configuration|general configuration]] options. However, if you'd like to make more involved style changes, you can do this by writing your own styles. Quartz 4, like Quartz 3, uses [Sass](https://sass-lang.com/guide/) for styling.

337
package-lock.json generated
View File

@ -32,13 +32,13 @@
"mdast-util-to-hast": "^13.2.0",
"mdast-util-to-string": "^4.0.0",
"micromorph": "^0.4.5",
"preact": "^10.22.1",
"preact": "^10.23.2",
"preact-render-to-string": "^6.5.7",
"pretty-bytes": "^6.1.1",
"pretty-time": "^1.1.0",
"reading-time": "^1.5.0",
"rehype-autolink-headings": "^7.1.0",
"rehype-citation": "^2.0.0",
"rehype-citation": "^2.1.1",
"rehype-katex": "^7.0.0",
"rehype-mathjax": "^6.0.0",
"rehype-pretty-code": "^0.13.2",
@ -55,7 +55,7 @@
"rfdc": "^1.4.1",
"rimraf": "^6.0.1",
"serve-handler": "^6.1.5",
"shiki": "^1.10.3",
"shiki": "^1.12.1",
"source-map-support": "^0.5.21",
"to-vfile": "^8.0.0",
"toml": "^3.0.0",
@ -81,8 +81,8 @@
"@types/yargs": "^17.0.32",
"esbuild": "^0.19.9",
"prettier": "^3.3.3",
"tsx": "^4.16.2",
"typescript": "^5.5.3"
"tsx": "^4.17.0",
"typescript": "^5.5.4"
},
"engines": {
"node": "20 || >=22",
@ -100,9 +100,9 @@
}
},
"node_modules/@citation-js/core": {
"version": "0.7.9",
"resolved": "https://registry.npmjs.org/@citation-js/core/-/core-0.7.9.tgz",
"integrity": "sha512-fSbkB32JayDChZnAYC/kB+sWHRvxxL7ibVetyBOyzOc+5aCnjb6UVsbcfhnkOIEyAMoRRvWDyFmakEoTtA5ttQ==",
"version": "0.7.14",
"resolved": "https://registry.npmjs.org/@citation-js/core/-/core-0.7.14.tgz",
"integrity": "sha512-dgeGqYDSQmn2MtnWZkwPGpJQPh43yr1lAAr9jl1NJ9pIY1RXUQxtlAUZVur0V9PHdbfQC+kkvB1KC3VpgVV3MA==",
"dependencies": {
"@citation-js/date": "^0.5.0",
"@citation-js/name": "^0.4.2",
@ -130,9 +130,9 @@
}
},
"node_modules/@citation-js/plugin-bibjson": {
"version": "0.7.9",
"resolved": "https://registry.npmjs.org/@citation-js/plugin-bibjson/-/plugin-bibjson-0.7.9.tgz",
"integrity": "sha512-YNCWIrkhqZ3cZKewHkLBixABo2PvOWnU+8dBx6KfN47ysdECR76xENe86YYpJ0ska2D5ZnTP0jKZIrUHQoxYfQ==",
"version": "0.7.14",
"resolved": "https://registry.npmjs.org/@citation-js/plugin-bibjson/-/plugin-bibjson-0.7.14.tgz",
"integrity": "sha512-Hcmk01KrpHwcl5uVoLE6TRaJRFg7/qUvpJDcKqx3LLLCsNbaBlISfRDeFETrjjipTetkX70RvtS7FfGUN58gCQ==",
"dependencies": {
"@citation-js/date": "^0.5.0",
"@citation-js/name": "^0.4.2"
@ -145,9 +145,9 @@
}
},
"node_modules/@citation-js/plugin-bibtex": {
"version": "0.7.9",
"resolved": "https://registry.npmjs.org/@citation-js/plugin-bibtex/-/plugin-bibtex-0.7.9.tgz",
"integrity": "sha512-gIJpCd6vmmTOcRfDrSOjtoNhw2Mi94UwFxmgJ7GwkXyTYcNheW5VlMMo1tlqjakJGARQ0eOsKcI57gSPqJSS2g==",
"version": "0.7.14",
"resolved": "https://registry.npmjs.org/@citation-js/plugin-bibtex/-/plugin-bibtex-0.7.14.tgz",
"integrity": "sha512-xHOHqhF6dthLRv46N9U+mQgYLiiWQHLvQWK9+mcBKz+/3NWge62Xb1oBouNWwLEPd5FV/8gp9fp7SOp93T0dUg==",
"dependencies": {
"@citation-js/date": "^0.5.0",
"@citation-js/name": "^0.4.2",
@ -161,9 +161,9 @@
}
},
"node_modules/@citation-js/plugin-csl": {
"version": "0.7.9",
"resolved": "https://registry.npmjs.org/@citation-js/plugin-csl/-/plugin-csl-0.7.9.tgz",
"integrity": "sha512-mbD7CnUiPOuVnjeJwo+d0RGUcY0PE8n01gHyjq0qpTeS42EGmQ9+LzqfsTUVWWBndTwc6zLRuIF1qFAUHKE4oA==",
"version": "0.7.14",
"resolved": "https://registry.npmjs.org/@citation-js/plugin-csl/-/plugin-csl-0.7.14.tgz",
"integrity": "sha512-7AKB8lMz1IqdtoE33NnWIpteLYMuSl3xqT+Cax7sQKwAIJEoq2HBmb43Ja8xQQ36nREAupQJv1V6XksIAmYnCg==",
"dependencies": {
"@citation-js/date": "^0.5.0",
"citeproc": "^2.4.6"
@ -479,6 +479,22 @@
"node": ">=12"
}
},
"node_modules/@esbuild/openbsd-arm64": {
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.23.0.tgz",
"integrity": "sha512-suXjq53gERueVWu0OKxzWqk7NxiUWSUlrxoZK7usiF50C6ipColGR5qie2496iKGYNLhDZkPxBI3erbnYkU0rQ==",
"cpu": [
"arm64"
],
"dev": true,
"optional": true,
"os": [
"openbsd"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/openbsd-x64": {
"version": "0.19.12",
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz",
@ -820,9 +836,9 @@
}
},
"node_modules/@shikijs/core": {
"version": "1.10.3",
"resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.10.3.tgz",
"integrity": "sha512-D45PMaBaeDHxww+EkcDQtDAtzv00Gcsp72ukBtaLSmqRvh0WgGMq3Al0rl1QQBZfuneO75NXMIzEZGFitThWbg==",
"version": "1.12.1",
"resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.12.1.tgz",
"integrity": "sha512-biCz/mnkMktImI6hMfMX3H9kOeqsInxWEyCHbSlL8C/2TR1FqfmGxTLRNwYCKsyCyxWLbB8rEqXRVZuyxuLFmA==",
"dependencies": {
"@types/hast": "^3.0.4"
}
@ -4691,9 +4707,9 @@
}
},
"node_modules/preact": {
"version": "10.22.1",
"resolved": "https://registry.npmjs.org/preact/-/preact-10.22.1.tgz",
"integrity": "sha512-jRYbDDgMpIb5LHq3hkI0bbl+l/TQ9UnkdQ0ww+lp+4MMOdqaUYdFc5qeyP+IV8FAd/2Em7drVPeKdQxsiWCf/A==",
"version": "10.23.2",
"resolved": "https://registry.npmjs.org/preact/-/preact-10.23.2.tgz",
"integrity": "sha512-kKYfePf9rzKnxOAKDpsWhg/ysrHPqT+yQ7UW4JjdnqjFIeNUnNcEJvhuA8fDenxAGWzUqtd51DfVg7xp/8T9NA==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/preact"
@ -4826,16 +4842,16 @@
}
},
"node_modules/rehype-citation": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/rehype-citation/-/rehype-citation-2.0.0.tgz",
"integrity": "sha512-rGawTBI8SJA1Y4IRyROvpYF6oXBVNFXlJYHIJ2jJH3HgeuCbAC9AO8wE/NMPLDOPQ8+Q8QkZm93fKsnUNbvwZA==",
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/rehype-citation/-/rehype-citation-2.1.1.tgz",
"integrity": "sha512-9aXDHR4pnR8Yyt6DFDXq2EKcxhwjf4HuF5kxvQDbhH8xfY5VjqJQNmIzpsXAn6YcmytOGWNf+82WnIroKAaLSw==",
"dependencies": {
"@citation-js/core": "^0.7.1",
"@citation-js/core": "^0.7.14",
"@citation-js/date": "^0.5.1",
"@citation-js/name": "^0.4.2",
"@citation-js/plugin-bibjson": "^0.7.2",
"@citation-js/plugin-bibtex": "^0.7.2",
"@citation-js/plugin-csl": "^0.7.2",
"@citation-js/plugin-bibjson": "^0.7.14",
"@citation-js/plugin-bibtex": "^0.7.14",
"@citation-js/plugin-csl": "^0.7.14",
"citeproc": "^2.4.63",
"cross-fetch": "^4.0.0",
"hast-util-from-dom": "^5.0.0",
@ -5412,11 +5428,11 @@
}
},
"node_modules/shiki": {
"version": "1.10.3",
"resolved": "https://registry.npmjs.org/shiki/-/shiki-1.10.3.tgz",
"integrity": "sha512-eneCLncGuvPdTutJuLyUGS8QNPAVFO5Trvld2wgEq1e002mwctAhJKeMGWtWVXOIEzmlcLRqcgPSorR6AVzOmQ==",
"version": "1.12.1",
"resolved": "https://registry.npmjs.org/shiki/-/shiki-1.12.1.tgz",
"integrity": "sha512-nwmjbHKnOYYAe1aaQyEBHvQymJgfm86ZSS7fT8OaPRr4sbAcBNz7PbfAikMEFSDQ6se2j2zobkXvVKcBOm0ysg==",
"dependencies": {
"@shikijs/core": "1.10.3",
"@shikijs/core": "1.12.1",
"@types/hast": "^3.0.4"
}
},
@ -5745,12 +5761,12 @@
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
},
"node_modules/tsx": {
"version": "4.16.2",
"resolved": "https://registry.npmjs.org/tsx/-/tsx-4.16.2.tgz",
"integrity": "sha512-C1uWweJDgdtX2x600HjaFaucXTilT7tgUZHbOE4+ypskZ1OP8CRCSDkCxG6Vya9EwaFIVagWwpaVAn5wzypaqQ==",
"version": "4.17.0",
"resolved": "https://registry.npmjs.org/tsx/-/tsx-4.17.0.tgz",
"integrity": "sha512-eN4mnDA5UMKDt4YZixo9tBioibaMBpoxBkD+rIPAjVmYERSG0/dWEY1CEFuV89CgASlKL499q8AhmkMnnjtOJg==",
"dev": true,
"dependencies": {
"esbuild": "~0.21.5",
"esbuild": "~0.23.0",
"get-tsconfig": "^4.7.5"
},
"bin": {
@ -5764,9 +5780,9 @@
}
},
"node_modules/tsx/node_modules/@esbuild/aix-ppc64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
"integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.23.0.tgz",
"integrity": "sha512-3sG8Zwa5fMcA9bgqB8AfWPQ+HFke6uD3h1s3RIwUNK8EG7a4buxvuFTs3j1IMs2NXAk9F30C/FF4vxRgQCcmoQ==",
"cpu": [
"ppc64"
],
@ -5776,13 +5792,13 @@
"aix"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/@esbuild/android-arm": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
"integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.23.0.tgz",
"integrity": "sha512-+KuOHTKKyIKgEEqKbGTK8W7mPp+hKinbMBeEnNzjJGyFcWsfrXjSTNluJHCY1RqhxFurdD8uNXQDei7qDlR6+g==",
"cpu": [
"arm"
],
@ -5792,13 +5808,13 @@
"android"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/@esbuild/android-arm64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
"integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.23.0.tgz",
"integrity": "sha512-EuHFUYkAVfU4qBdyivULuu03FhJO4IJN9PGuABGrFy4vUuzk91P2d+npxHcFdpUnfYKy0PuV+n6bKIpHOB3prQ==",
"cpu": [
"arm64"
],
@ -5808,13 +5824,13 @@
"android"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/@esbuild/android-x64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
"integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.23.0.tgz",
"integrity": "sha512-WRrmKidLoKDl56LsbBMhzTTBxrsVwTKdNbKDalbEZr0tcsBgCLbEtoNthOW6PX942YiYq8HzEnb4yWQMLQuipQ==",
"cpu": [
"x64"
],
@ -5824,13 +5840,13 @@
"android"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/@esbuild/darwin-arm64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
"integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.23.0.tgz",
"integrity": "sha512-YLntie/IdS31H54Ogdn+v50NuoWF5BDkEUFpiOChVa9UnKpftgwzZRrI4J132ETIi+D8n6xh9IviFV3eXdxfow==",
"cpu": [
"arm64"
],
@ -5840,13 +5856,13 @@
"darwin"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/@esbuild/darwin-x64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
"integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.23.0.tgz",
"integrity": "sha512-IMQ6eme4AfznElesHUPDZ+teuGwoRmVuuixu7sv92ZkdQcPbsNHzutd+rAfaBKo8YK3IrBEi9SLLKWJdEvJniQ==",
"cpu": [
"x64"
],
@ -5856,13 +5872,13 @@
"darwin"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/@esbuild/freebsd-arm64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
"integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.23.0.tgz",
"integrity": "sha512-0muYWCng5vqaxobq6LB3YNtevDFSAZGlgtLoAc81PjUfiFz36n4KMpwhtAd4he8ToSI3TGyuhyx5xmiWNYZFyw==",
"cpu": [
"arm64"
],
@ -5872,13 +5888,13 @@
"freebsd"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/@esbuild/freebsd-x64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
"integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.23.0.tgz",
"integrity": "sha512-XKDVu8IsD0/q3foBzsXGt/KjD/yTKBCIwOHE1XwiXmrRwrX6Hbnd5Eqn/WvDekddK21tfszBSrE/WMaZh+1buQ==",
"cpu": [
"x64"
],
@ -5888,13 +5904,13 @@
"freebsd"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/@esbuild/linux-arm": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
"integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.23.0.tgz",
"integrity": "sha512-SEELSTEtOFu5LPykzA395Mc+54RMg1EUgXP+iw2SJ72+ooMwVsgfuwXo5Fn0wXNgWZsTVHwY2cg4Vi/bOD88qw==",
"cpu": [
"arm"
],
@ -5904,13 +5920,13 @@
"linux"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/@esbuild/linux-arm64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
"integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.23.0.tgz",
"integrity": "sha512-j1t5iG8jE7BhonbsEg5d9qOYcVZv/Rv6tghaXM/Ug9xahM0nX/H2gfu6X6z11QRTMT6+aywOMA8TDkhPo8aCGw==",
"cpu": [
"arm64"
],
@ -5920,13 +5936,13 @@
"linux"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/@esbuild/linux-ia32": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
"integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.23.0.tgz",
"integrity": "sha512-P7O5Tkh2NbgIm2R6x1zGJJsnacDzTFcRWZyTTMgFdVit6E98LTxO+v8LCCLWRvPrjdzXHx9FEOA8oAZPyApWUA==",
"cpu": [
"ia32"
],
@ -5936,13 +5952,13 @@
"linux"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/@esbuild/linux-loong64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
"integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.23.0.tgz",
"integrity": "sha512-InQwepswq6urikQiIC/kkx412fqUZudBO4SYKu0N+tGhXRWUqAx+Q+341tFV6QdBifpjYgUndV1hhMq3WeJi7A==",
"cpu": [
"loong64"
],
@ -5952,13 +5968,13 @@
"linux"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/@esbuild/linux-mips64el": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
"integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.23.0.tgz",
"integrity": "sha512-J9rflLtqdYrxHv2FqXE2i1ELgNjT+JFURt/uDMoPQLcjWQA5wDKgQA4t/dTqGa88ZVECKaD0TctwsUfHbVoi4w==",
"cpu": [
"mips64el"
],
@ -5968,13 +5984,13 @@
"linux"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/@esbuild/linux-ppc64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
"integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.23.0.tgz",
"integrity": "sha512-cShCXtEOVc5GxU0fM+dsFD10qZ5UpcQ8AM22bYj0u/yaAykWnqXJDpd77ublcX6vdDsWLuweeuSNZk4yUxZwtw==",
"cpu": [
"ppc64"
],
@ -5984,13 +6000,13 @@
"linux"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/@esbuild/linux-riscv64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
"integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.23.0.tgz",
"integrity": "sha512-HEtaN7Y5UB4tZPeQmgz/UhzoEyYftbMXrBCUjINGjh3uil+rB/QzzpMshz3cNUxqXN7Vr93zzVtpIDL99t9aRw==",
"cpu": [
"riscv64"
],
@ -6000,13 +6016,13 @@
"linux"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/@esbuild/linux-s390x": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
"integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.23.0.tgz",
"integrity": "sha512-WDi3+NVAuyjg/Wxi+o5KPqRbZY0QhI9TjrEEm+8dmpY9Xir8+HE/HNx2JoLckhKbFopW0RdO2D72w8trZOV+Wg==",
"cpu": [
"s390x"
],
@ -6016,13 +6032,13 @@
"linux"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/@esbuild/linux-x64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
"integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.23.0.tgz",
"integrity": "sha512-a3pMQhUEJkITgAw6e0bWA+F+vFtCciMjW/LPtoj99MhVt+Mfb6bbL9hu2wmTZgNd994qTAEw+U/r6k3qHWWaOQ==",
"cpu": [
"x64"
],
@ -6032,13 +6048,13 @@
"linux"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/@esbuild/netbsd-x64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
"integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.23.0.tgz",
"integrity": "sha512-cRK+YDem7lFTs2Q5nEv/HHc4LnrfBCbH5+JHu6wm2eP+d8OZNoSMYgPZJq78vqQ9g+9+nMuIsAO7skzphRXHyw==",
"cpu": [
"x64"
],
@ -6048,13 +6064,13 @@
"netbsd"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/@esbuild/openbsd-x64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
"integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.23.0.tgz",
"integrity": "sha512-6p3nHpby0DM/v15IFKMjAaayFhqnXV52aEmv1whZHX56pdkK+MEaLoQWj+H42ssFarP1PcomVhbsR4pkz09qBg==",
"cpu": [
"x64"
],
@ -6064,13 +6080,13 @@
"openbsd"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/@esbuild/sunos-x64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
"integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.23.0.tgz",
"integrity": "sha512-BFelBGfrBwk6LVrmFzCq1u1dZbG4zy/Kp93w2+y83Q5UGYF1d8sCzeLI9NXjKyujjBBniQa8R8PzLFAUrSM9OA==",
"cpu": [
"x64"
],
@ -6080,13 +6096,13 @@
"sunos"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/@esbuild/win32-arm64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
"integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.23.0.tgz",
"integrity": "sha512-lY6AC8p4Cnb7xYHuIxQ6iYPe6MfO2CC43XXKo9nBXDb35krYt7KGhQnOkRGar5psxYkircpCqfbNDB4uJbS2jQ==",
"cpu": [
"arm64"
],
@ -6096,13 +6112,13 @@
"win32"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/@esbuild/win32-ia32": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
"integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.23.0.tgz",
"integrity": "sha512-7L1bHlOTcO4ByvI7OXVI5pNN6HSu6pUQq9yodga8izeuB1KcT2UkHaH6118QJwopExPn0rMHIseCTx1CRo/uNA==",
"cpu": [
"ia32"
],
@ -6112,13 +6128,13 @@
"win32"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/@esbuild/win32-x64": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
"integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.23.0.tgz",
"integrity": "sha512-Arm+WgUFLUATuoxCJcahGuk6Yj9Pzxd6l11Zb/2aAuv5kWWvvfhLFo2fni4uSK5vzlUdCGZ/BdV5tH8klj8p8g==",
"cpu": [
"x64"
],
@ -6128,51 +6144,52 @@
"win32"
],
"engines": {
"node": ">=12"
"node": ">=18"
}
},
"node_modules/tsx/node_modules/esbuild": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
"integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.23.0.tgz",
"integrity": "sha512-1lvV17H2bMYda/WaFb2jLPeHU3zml2k4/yagNMG8Q/YtfMjCwEUZa2eXXMgZTVSL5q1n4H7sQ0X6CdJDqqeCFA==",
"dev": true,
"hasInstallScript": true,
"bin": {
"esbuild": "bin/esbuild"
},
"engines": {
"node": ">=12"
"node": ">=18"
},
"optionalDependencies": {
"@esbuild/aix-ppc64": "0.21.5",
"@esbuild/android-arm": "0.21.5",
"@esbuild/android-arm64": "0.21.5",
"@esbuild/android-x64": "0.21.5",
"@esbuild/darwin-arm64": "0.21.5",
"@esbuild/darwin-x64": "0.21.5",
"@esbuild/freebsd-arm64": "0.21.5",
"@esbuild/freebsd-x64": "0.21.5",
"@esbuild/linux-arm": "0.21.5",
"@esbuild/linux-arm64": "0.21.5",
"@esbuild/linux-ia32": "0.21.5",
"@esbuild/linux-loong64": "0.21.5",
"@esbuild/linux-mips64el": "0.21.5",
"@esbuild/linux-ppc64": "0.21.5",
"@esbuild/linux-riscv64": "0.21.5",
"@esbuild/linux-s390x": "0.21.5",
"@esbuild/linux-x64": "0.21.5",
"@esbuild/netbsd-x64": "0.21.5",
"@esbuild/openbsd-x64": "0.21.5",
"@esbuild/sunos-x64": "0.21.5",
"@esbuild/win32-arm64": "0.21.5",
"@esbuild/win32-ia32": "0.21.5",
"@esbuild/win32-x64": "0.21.5"
"@esbuild/aix-ppc64": "0.23.0",
"@esbuild/android-arm": "0.23.0",
"@esbuild/android-arm64": "0.23.0",
"@esbuild/android-x64": "0.23.0",
"@esbuild/darwin-arm64": "0.23.0",
"@esbuild/darwin-x64": "0.23.0",
"@esbuild/freebsd-arm64": "0.23.0",
"@esbuild/freebsd-x64": "0.23.0",
"@esbuild/linux-arm": "0.23.0",
"@esbuild/linux-arm64": "0.23.0",
"@esbuild/linux-ia32": "0.23.0",
"@esbuild/linux-loong64": "0.23.0",
"@esbuild/linux-mips64el": "0.23.0",
"@esbuild/linux-ppc64": "0.23.0",
"@esbuild/linux-riscv64": "0.23.0",
"@esbuild/linux-s390x": "0.23.0",
"@esbuild/linux-x64": "0.23.0",
"@esbuild/netbsd-x64": "0.23.0",
"@esbuild/openbsd-arm64": "0.23.0",
"@esbuild/openbsd-x64": "0.23.0",
"@esbuild/sunos-x64": "0.23.0",
"@esbuild/win32-arm64": "0.23.0",
"@esbuild/win32-ia32": "0.23.0",
"@esbuild/win32-x64": "0.23.0"
}
},
"node_modules/typescript": {
"version": "5.5.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
"integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
"version": "5.5.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
"integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
"dev": true,
"bin": {
"tsc": "bin/tsc",

10
package.json
View File

@ -58,13 +58,13 @@
"mdast-util-to-hast": "^13.2.0",
"mdast-util-to-string": "^4.0.0",
"micromorph": "^0.4.5",
"preact": "^10.22.1",
"preact": "^10.23.2",
"preact-render-to-string": "^6.5.7",
"pretty-bytes": "^6.1.1",
"pretty-time": "^1.1.0",
"reading-time": "^1.5.0",
"rehype-autolink-headings": "^7.1.0",
"rehype-citation": "^2.0.0",
"rehype-citation": "^2.1.1",
"rehype-katex": "^7.0.0",
"rehype-mathjax": "^6.0.0",
"rehype-pretty-code": "^0.13.2",
@ -81,7 +81,7 @@
"rfdc": "^1.4.1",
"rimraf": "^6.0.1",
"serve-handler": "^6.1.5",
"shiki": "^1.10.3",
"shiki": "^1.12.1",
"source-map-support": "^0.5.21",
"to-vfile": "^8.0.0",
"toml": "^3.0.0",
@ -104,7 +104,7 @@
"@types/yargs": "^17.0.32",
"esbuild": "^0.19.9",
"prettier": "^3.3.3",
"tsx": "^4.16.2",
"typescript": "^5.5.3"
"tsx": "^4.17.0",
"typescript": "^5.5.4"
}
}

30
quartz/components/Backlinks.tsx
View File

@ -14,20 +14,22 @@ const Backlinks: QuartzComponent = ({
const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug))
return (
<div class={classNames(displayClass, "backlinks")}>
<h3>{i18n(cfg.locale).components.backlinks.title}</h3>
<ul class="overflow">
{backlinkFiles.length > 0 ? (
backlinkFiles.map((f) => (
<li>
<a href={resolveRelative(fileData.slug!, f.slug!)} class="internal">
{f.frontmatter?.title}
</a>
</li>
))
) : (
<li>{i18n(cfg.locale).components.backlinks.noBacklinksFound}</li>
)}
</ul>
<div class="backlinks-container">
<h3>{i18n(cfg.locale).components.backlinks.title}</h3>
<ul class="overflow">
{backlinkFiles.length > 0 ? (
backlinkFiles.map((f) => (
<li>
<a href={resolveRelative(fileData.slug!, f.slug!)} class="internal">
{f.frontmatter?.title}
</a>
</li>
))
) : (
<li>{i18n(cfg.locale).components.backlinks.noBacklinksFound}</li>
)}
</ul>
</div>
</div>
)
}

26
quartz/components/renderPage.tsx
View File

@ -220,19 +220,19 @@ export function renderPage(
<div id="quartz-root" class="page">
<Body {...componentData}>
{LeftComponent}
<div class="center">
<div class="page-header">
<Header {...componentData}>
{header.map((HeaderComponent) => (
<HeaderComponent {...componentData} />
))}
</Header>
<div class="popover-hint">
{beforeBody.map((BodyComponent) => (
<BodyComponent {...componentData} />
))}
</div>
<div class="page-header">
<Header {...componentData}>
{header.map((HeaderComponent) => (
<HeaderComponent {...componentData} />
))}
</Header>
<div class="popover-hint">
{beforeBody.map((BodyComponent) => (
<BodyComponent {...componentData} />
))}
</div>
</div>
<div class="center">
<Content {...componentData} />
<hr />
<div class="page-footer">
@ -242,8 +242,8 @@ export function renderPage(
</div>
</div>
{RightComponent}
<Footer {...componentData} />
</Body>
<Footer {...componentData} />
</div>
</body>
{pageResources.js

53
quartz/components/styles/backlinks.scss
View File

@ -1,19 +1,48 @@
.backlinks {
position: relative;
@use "../../styles/variables.scss" as *;
& > h3 {
font-size: 1rem;
margin: 0;
.backlinks {
@media all and not ($desktop) {
overflow-y: auto;
display: initial;
&:after {
pointer-events: none;
content: "";
width: 100%;
height: 50px;
position: absolute;
left: 0;
bottom: 0;
opacity: 1;
transition: opacity 0.3s ease;
background: linear-gradient(transparent 0px, var(--light));
}
}
& > ul {
list-style: none;
padding: 0;
margin: 0.5rem 0;
& > .backlinks-container {
& > h3 {
font-size: 1rem;
margin: 0;
}
& > li {
& > a {
background-color: transparent;
& > ul {
list-style: none;
padding: 0;
margin: 0.5rem 0;
& > li {
& > a {
background-color: transparent;
}
}
}
& > .overflow {
max-height: unset;
& > li:last-of-type {
margin-bottom: 0;
}
&:after {
display: none;
}
}
}

23
quartz/components/styles/explorer.scss
View File

@ -1,5 +1,23 @@
@use "../../styles/variables.scss" as *;
.explorer {
&.desktop-only {
overflow-y: auto;
}
&:after {
pointer-events: none;
content: "";
width: 100%;
height: 50px;
position: absolute;
left: 0;
bottom: 0;
opacity: 1;
transition: opacity 0.3s ease;
background: linear-gradient(transparent 0px, var(--light));
}
}
button#explorer {
background-color: transparent;
border: none;
@ -59,7 +77,7 @@ button#explorer {
}
&.collapsed > .overflow::after {
opacity: 0;
display: none;
}
& ul {
@ -76,6 +94,9 @@ button#explorer {
pointer-events: all;
}
}
> #explorer-ul {
max-height: none;
}
}
svg {

2
quartz/components/styles/graph.scss
View File

@ -62,7 +62,7 @@
height: 60vh;
width: 50vw;
@media all and (max-width: $fullPageWidth) {
@media all and ($desktop) {
width: 90%;
}
}

2
quartz/components/styles/listPage.scss
View File

@ -13,7 +13,7 @@ li.section-li {
display: grid;
grid-template-columns: fit-content(8em) 3fr 1fr;
@media all and (max-width: $mobileBreakpoint) {
@media all and ($mobile) {
& > .tags {
display: none;
}

2
quartz/components/styles/popover.scss
View File

@ -70,7 +70,7 @@
opacity 0.3s ease,
visibility 0.3s ease;
@media all and (max-width: $mobileBreakpoint) {
@media all and ($mobile) {
display: none !important;
}
}

10
quartz/components/styles/search.scss
View File

@ -3,7 +3,9 @@
.search {
min-width: fit-content;
max-width: 14rem;
flex-grow: 0.3;
@media all and ($mobile) {
flex-grow: 0.3;
}
& > .search-button {
background-color: var(--lightgray);
@ -62,7 +64,7 @@
margin-left: auto;
margin-right: auto;
@media all and (max-width: $fullPageWidth) {
@media all and ($desktop) {
width: 90%;
}
@ -104,7 +106,7 @@
flex: 0 0 min(30%, 450px);
}
@media all and (min-width: $tabletBreakpoint) {
@media all and not ($tablet) {
&[data-preview] {
& .result-card > p.preview {
display: none;
@ -130,7 +132,7 @@
border-radius: 5px;
}
@media all and (max-width: $tabletBreakpoint) {
@media all and ($tablet) {
& > #preview-container {
display: none !important;
}

1
quartz/plugins/transformers/links.ts
View File

@ -65,6 +65,7 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options>> = (userOpts)
type: "element",
tagName: "svg",
properties: {
"aria-hidden": "true",
class: "external-icon",
viewBox: "0 0 512 512",
},

147
quartz/styles/base.scss
View File

@ -12,7 +12,6 @@ html {
body,
section {
margin: 0;
max-width: 100%;
box-sizing: border-box;
background-color: var(--light);
font-family: var(--bodyFont);
@ -109,25 +108,21 @@ a {
.desktop-only {
display: initial;
@media all and (max-width: $fullPageWidth) {
@media all and ($mobile) {
display: none;
}
}
.mobile-only {
display: none;
@media all and (max-width: $fullPageWidth) {
@media all and ($mobile) {
display: initial;
}
}
.page {
@media all and (max-width: $fullPageWidth) {
margin: 0 auto;
padding: 0 1rem;
max-width: $pageWidth;
}
max-width: calc(#{map-get($breakpoints, desktop)} + 300px);
margin: 0 auto;
& article {
& > h1 {
font-size: 2rem;
@ -155,78 +150,116 @@ a {
}
& > #quartz-body {
width: 100%;
display: flex;
@media all and (max-width: $fullPageWidth) {
flex-direction: column;
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 ($desktop) {
grid-template-columns: #{map-get($tabletGrid, templateColumns)};
grid-template-rows: #{map-get($tabletGrid, templateRows)};
column-gap: #{map-get($tabletGrid, columnGap)};
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)};
column-gap: #{map-get($mobileGrid, columnGap)};
row-gap: #{map-get($mobileGrid, rowGap)};
grid-template-areas: #{map-get($mobileGrid, templateAreas)};
}
@media all and ($desktop) {
padding: 0 1rem;
}
@media all and ($mobile) {
margin: 0 auto;
}
& .sidebar {
flex: 1;
display: flex;
flex-direction: column;
gap: 2rem;
top: 0;
width: $sidePanelWidth;
margin-top: $topSpacing;
box-sizing: border-box;
padding: 0 4rem;
position: fixed;
@media all and (max-width: $fullPageWidth) {
position: initial;
flex-direction: row;
padding: 0;
width: initial;
margin-top: 2rem;
}
padding: $topSpacing 2rem 2rem 2rem;
display: flex;
height: 100vh;
position: sticky;
}
& .sidebar.left {
left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
@media all and (max-width: $fullPageWidth) {
grid-area: sidebar-left;
flex-direction: column;
@media all and ($mobile) {
gap: 0;
align-items: center;
position: initial;
display: flex;
height: unset;
flex-direction: row;
padding: 0;
padding-top: 2rem;
}
}
& .sidebar.right {
right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
flex-wrap: wrap;
& > * {
@media all and (max-width: $fullPageWidth) {
grid-area: sidebar-right;
margin-right: 0;
flex-direction: column;
@media all and ($mobile) {
margin-left: inherit;
margin-right: inherit;
}
@media all and ($desktop) {
position: initial;
height: unset;
width: 100%;
flex-direction: row;
padding: 0;
& > * {
flex: 1;
min-width: 140px;
}
& > .toc {
display: none;
}
}
}
}
& .page-header,
& .page-footer {
width: $pageWidth;
margin-top: 1rem;
@media all and (max-width: $fullPageWidth) {
width: initial;
& .page-header,
& .page-footer {
margin-top: 1rem;
}
}
& .page-header {
margin: $topSpacing auto 0 auto;
@media all and (max-width: $fullPageWidth) {
margin-top: 2rem;
& .page-header {
grid-area: page-header;
margin: 4rem 0 0 0;
@media all and ($mobile) {
margin-top: 0;
padding: 0;
}
}
}
& .center,
& footer {
margin-left: auto;
margin-right: auto;
width: $pageWidth;
@media all and (max-width: $fullPageWidth) {
width: initial;
& .center > article {
grid-area: page-center;
}
& .page-footer {
grid-area: page-footer;
}
& .center,
& footer {
margin-left: auto;
margin-right: auto;
@media all and ($desktop) {
margin-right: 0;
}
@media all and ($mobile) {
margin-left: 0;
}
}
& footer {
margin-left: 0;
margin-right: 0;
}
}
}

57
quartz/styles/variables.scss
View File

@ -1,9 +1,56 @@
$pageWidth: 750px;
$mobileBreakpoint: 600px;
$tabletBreakpoint: 1000px;
$sidePanelWidth: 380px;
/**
* Layout breakpoints
* $mobile: screen width below this value will use mobile styles
* $desktop: screen width above this value will use desktop styles
* Screen width between $mobile and $desktop width will use the tablet layout.
* assuming mobile < desktop
*/
$breakpoints: (
mobile: 800px,
desktop: 1200px,
);
$mobile: "(max-width: #{map-get($breakpoints, mobile)})";
$tablet: "(min-width: #{map-get($breakpoints, mobile)}) and (max-width: #{map-get($breakpoints, desktop)})";
$desktop: "(max-width: #{map-get($breakpoints, desktop)})";
$pageWidth: #{map-get($breakpoints, mobile)};
$sidePanelWidth: 320px; //380px;
$topSpacing: 6rem;
$fullPageWidth: $pageWidth + 2 * $sidePanelWidth;
$boldWeight: 700;
$semiBoldWeight: 600;
$normalWeight: 400;
$mobileGrid: (
templateRows: "auto auto auto auto auto",
templateColumns: "auto",
rowGap: "5px",
columnGap: "5px",
templateAreas:
'"sidebar-left"\
"page-header"\
"page-center"\
"sidebar-right"\
"page-footer"',
);
$tabletGrid: (
templateRows: "auto auto auto auto",
templateColumns: "#{$sidePanelWidth} auto",
rowGap: "5px",
columnGap: "5px",
templateAreas:
'"sidebar-left page-header"\
"sidebar-left page-center"\
"sidebar-left sidebar-right"\
"sidebar-left page-footer"',
);
$desktopGrid: (
templateRows: "auto auto auto",
templateColumns: "#{$sidePanelWidth} auto #{$sidePanelWidth}",
rowGap: "5px",
columnGap: "5px",
templateAreas:
'"sidebar-left page-header sidebar-right"\
"sidebar-left page-center sidebar-right"\
"sidebar-left page-footer sidebar-right"',
);