diff --git a/docs/layout.md b/docs/layout.md index 686b2f29f..184a066f7 100644 --- a/docs/layout.md +++ b/docs/layout.md @@ -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. diff --git a/package-lock.json b/package-lock.json index 738fe8fa9..d4d5961f8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 3800706d2..6bd026792 100644 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/quartz/components/Backlinks.tsx b/quartz/components/Backlinks.tsx index aa412a2e0..041a54131 100644 --- a/quartz/components/Backlinks.tsx +++ b/quartz/components/Backlinks.tsx @@ -14,20 +14,22 @@ const Backlinks: QuartzComponent = ({ const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug)) return (
-

{i18n(cfg.locale).components.backlinks.title}

- +
+

{i18n(cfg.locale).components.backlinks.title}

+ +
) } diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx index ec5124f4f..19aa35b14 100644 --- a/quartz/components/renderPage.tsx +++ b/quartz/components/renderPage.tsx @@ -220,19 +220,19 @@ export function renderPage(
{LeftComponent} -
-
-
- {header.map((HeaderComponent) => ( - - ))} -
-
- {beforeBody.map((BodyComponent) => ( - - ))} -
+
+
+ {header.map((HeaderComponent) => ( + + ))} +
+
+ {beforeBody.map((BodyComponent) => ( + + ))}
+
+
@@ -242,8 +242,8 @@ export function renderPage(
{RightComponent} +
-
{pageResources.js diff --git a/quartz/components/styles/backlinks.scss b/quartz/components/styles/backlinks.scss index 04302f22e..2f4e4425a 100644 --- a/quartz/components/styles/backlinks.scss +++ b/quartz/components/styles/backlinks.scss @@ -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; } } } diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss index 2f94b158c..248bc7f05 100644 --- a/quartz/components/styles/explorer.scss +++ b/quartz/components/styles/explorer.scss @@ -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 { diff --git a/quartz/components/styles/graph.scss b/quartz/components/styles/graph.scss index 3deaa1feb..c2ce6ec90 100644 --- a/quartz/components/styles/graph.scss +++ b/quartz/components/styles/graph.scss @@ -62,7 +62,7 @@ height: 60vh; width: 50vw; - @media all and (max-width: $fullPageWidth) { + @media all and ($desktop) { width: 90%; } } diff --git a/quartz/components/styles/listPage.scss b/quartz/components/styles/listPage.scss index d51568dc0..4d305d22d 100644 --- a/quartz/components/styles/listPage.scss +++ b/quartz/components/styles/listPage.scss @@ -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; } diff --git a/quartz/components/styles/popover.scss b/quartz/components/styles/popover.scss index b1694f97c..38d612697 100644 --- a/quartz/components/styles/popover.scss +++ b/quartz/components/styles/popover.scss @@ -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; } } diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss index cc2daca3b..b0df6c8b3 100644 --- a/quartz/components/styles/search.scss +++ b/quartz/components/styles/search.scss @@ -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; } diff --git a/quartz/plugins/transformers/links.ts b/quartz/plugins/transformers/links.ts index b6a2c9122..38bc0dc5d 100644 --- a/quartz/plugins/transformers/links.ts +++ b/quartz/plugins/transformers/links.ts @@ -65,6 +65,7 @@ export const CrawlLinks: QuartzTransformerPlugin> = (userOpts) type: "element", tagName: "svg", properties: { + "aria-hidden": "true", class: "external-icon", viewBox: "0 0 512 512", }, diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index 3b3ead7c3..c54479b7a 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -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; } } } diff --git a/quartz/styles/variables.scss b/quartz/styles/variables.scss index e45cc9158..3ac5a8b4f 100644 --- a/quartz/styles/variables.scss +++ b/quartz/styles/variables.scss @@ -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"', +);