From a1cabdeaaf3bade1bd0872bcafc52c81f1c31ce8 Mon Sep 17 00:00:00 2001 From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com> Date: Thu, 19 Oct 2023 23:13:30 +0100 Subject: Optimise CSS (#17) * Installs Sass * installs concurrently * Ports CSS to SCSS * Gitignores CSS build output * Moves public/main.css to scss/index.scss * Fixes port to SCSS * Use-ifies base styles * Use-ifies layout styles * Use-ifies modules styles * Use-ifies variables * Use-ifies utils * Moves normalize to scss * Implements a CSS minifying step with CSSO --------- Co-authored-by: Joe Carstairs --- .gitignore | 2 + build_csso.sh | 6 + dev_csso.sh | 11 + package-lock.json | 476 +++++++++++++++++++++++++++++++++ package.json | 16 +- public/css/base/index.css | 3 - public/css/base/list.css | 4 - public/css/base/theme.css | 13 - public/css/base/typography.css | 68 ----- public/css/layout/grid.css | 30 --- public/css/layout/grid.md.css | 8 - public/css/layout/grid.xs.css | 55 ---- public/css/layout/index.css | 4 - public/css/layout/section-margins.css | 14 - public/css/modules/btn.css | 38 --- public/css/modules/committee.css | 9 - public/css/modules/committee.md.css | 16 -- public/css/modules/committee.xl.css | 15 -- public/css/modules/footer.css | 28 -- public/css/modules/index.css | 16 -- public/css/modules/link-gallery.css | 41 --- public/css/modules/link-gallery.xs.css | 21 -- public/css/modules/link.css | 42 --- public/css/modules/nav.css | 77 ------ public/css/modules/nav.lg.css | 15 -- public/css/modules/nav.md.css | 11 - public/css/modules/nav.xs.css | 19 -- public/css/modules/news-index.css | 31 --- public/css/modules/product.css | 20 -- public/css/modules/schedule.css | 13 - public/css/modules/schedule.md.css | 16 -- public/css/modules/skip-to-content.css | 13 - public/css/utils.css | 7 - public/css/variables/colours.css | 23 -- public/css/variables/index.css | 11 - public/css/variables/palette.css | 35 --- public/css/variables/spacing.css | 47 ---- public/css/variables/spacing.lg.css | 6 - public/css/variables/spacing.md.css | 6 - public/css/variables/spacing.sm.css | 4 - public/css/variables/spacing.xl.css | 10 - public/css/variables/spacing.xs.css | 6 - public/css/variables/spacing.xxl.css | 6 - public/css/variables/typography.css | 42 --- public/css/variables/typography.md.css | 9 - public/css/variables/typography.xs.css | 9 - public/main.css | 9 - public/normalize.css | 116 -------- scss/base/index.scss | 4 + scss/base/list.scss | 4 + scss/base/theme.scss | 13 + scss/base/typography.scss | 68 +++++ scss/index.lg.scss | 3 + scss/index.md.scss | 4 + scss/index.scss | 7 + scss/index.sm.scss | 2 + scss/index.xl.scss | 3 + scss/index.xs.scss | 4 + scss/index.xxl.scss | 2 + scss/layout/grid.md.scss | 8 + scss/layout/grid.scss | 30 +++ scss/layout/grid.xs.scss | 55 ++++ scss/layout/index.md.scss | 2 + scss/layout/index.scss | 3 + scss/layout/index.xs.scss | 2 + scss/layout/section-margins.scss | 14 + scss/modules/btn.scss | 38 +++ scss/modules/committee.md.scss | 16 ++ scss/modules/committee.scss | 9 + scss/modules/committee.xl.scss | 15 ++ scss/modules/footer.scss | 28 ++ scss/modules/index.lg.scss | 2 + scss/modules/index.md.scss | 4 + scss/modules/index.scss | 11 + scss/modules/index.xl.scss | 2 + scss/modules/index.xs.scss | 3 + scss/modules/link-gallery.scss | 41 +++ scss/modules/link-gallery.xs.scss | 21 ++ scss/modules/link.scss | 42 +++ scss/modules/nav.lg.scss | 15 ++ scss/modules/nav.md.scss | 11 + scss/modules/nav.scss | 77 ++++++ scss/modules/nav.xs.scss | 19 ++ scss/modules/news-index.scss | 31 +++ scss/modules/product.scss | 20 ++ scss/modules/schedule.md.scss | 16 ++ scss/modules/schedule.scss | 13 + scss/modules/skip-to-content.scss | 13 + scss/normalize.scss | 116 ++++++++ scss/utils.scss | 7 + scss/variables/colours.scss | 21 ++ scss/variables/index.lg.scss | 2 + scss/variables/index.md.scss | 3 + scss/variables/index.scss | 5 + scss/variables/index.sm.scss | 2 + scss/variables/index.xl.scss | 2 + scss/variables/index.xs.scss | 3 + scss/variables/index.xxl.scss | 2 + scss/variables/palette.scss | 35 +++ scss/variables/spacing.lg.scss | 6 + scss/variables/spacing.md.scss | 6 + scss/variables/spacing.scss | 47 ++++ scss/variables/spacing.sm.scss | 4 + scss/variables/spacing.xl.scss | 10 + scss/variables/spacing.xs.scss | 6 + scss/variables/spacing.xxl.scss | 6 + scss/variables/typography.md.scss | 9 + scss/variables/typography.scss | 42 +++ scss/variables/typography.xs.scss | 9 + src/layouts/Layout.astro | 9 +- 110 files changed, 1533 insertions(+), 991 deletions(-) create mode 100644 build_csso.sh create mode 100644 dev_csso.sh delete mode 100644 public/css/base/index.css delete mode 100644 public/css/base/list.css delete mode 100644 public/css/base/theme.css delete mode 100644 public/css/base/typography.css delete mode 100644 public/css/layout/grid.css delete mode 100644 public/css/layout/grid.md.css delete mode 100644 public/css/layout/grid.xs.css delete mode 100644 public/css/layout/index.css delete mode 100644 public/css/layout/section-margins.css delete mode 100644 public/css/modules/btn.css delete mode 100644 public/css/modules/committee.css delete mode 100644 public/css/modules/committee.md.css delete mode 100644 public/css/modules/committee.xl.css delete mode 100644 public/css/modules/footer.css delete mode 100644 public/css/modules/index.css delete mode 100644 public/css/modules/link-gallery.css delete mode 100644 public/css/modules/link-gallery.xs.css delete mode 100644 public/css/modules/link.css delete mode 100644 public/css/modules/nav.css delete mode 100644 public/css/modules/nav.lg.css delete mode 100644 public/css/modules/nav.md.css delete mode 100644 public/css/modules/nav.xs.css delete mode 100644 public/css/modules/news-index.css delete mode 100644 public/css/modules/product.css delete mode 100644 public/css/modules/schedule.css delete mode 100644 public/css/modules/schedule.md.css delete mode 100644 public/css/modules/skip-to-content.css delete mode 100644 public/css/utils.css delete mode 100644 public/css/variables/colours.css delete mode 100644 public/css/variables/index.css delete mode 100644 public/css/variables/palette.css delete mode 100644 public/css/variables/spacing.css delete mode 100644 public/css/variables/spacing.lg.css delete mode 100644 public/css/variables/spacing.md.css delete mode 100644 public/css/variables/spacing.sm.css delete mode 100644 public/css/variables/spacing.xl.css delete mode 100644 public/css/variables/spacing.xs.css delete mode 100644 public/css/variables/spacing.xxl.css delete mode 100644 public/css/variables/typography.css delete mode 100644 public/css/variables/typography.md.css delete mode 100644 public/css/variables/typography.xs.css delete mode 100644 public/main.css delete mode 100644 public/normalize.css create mode 100644 scss/base/index.scss create mode 100644 scss/base/list.scss create mode 100644 scss/base/theme.scss create mode 100644 scss/base/typography.scss create mode 100644 scss/index.lg.scss create mode 100644 scss/index.md.scss create mode 100644 scss/index.scss create mode 100644 scss/index.sm.scss create mode 100644 scss/index.xl.scss create mode 100644 scss/index.xs.scss create mode 100644 scss/index.xxl.scss create mode 100644 scss/layout/grid.md.scss create mode 100644 scss/layout/grid.scss create mode 100644 scss/layout/grid.xs.scss create mode 100644 scss/layout/index.md.scss create mode 100644 scss/layout/index.scss create mode 100644 scss/layout/index.xs.scss create mode 100644 scss/layout/section-margins.scss create mode 100644 scss/modules/btn.scss create mode 100644 scss/modules/committee.md.scss create mode 100644 scss/modules/committee.scss create mode 100644 scss/modules/committee.xl.scss create mode 100644 scss/modules/footer.scss create mode 100644 scss/modules/index.lg.scss create mode 100644 scss/modules/index.md.scss create mode 100644 scss/modules/index.scss create mode 100644 scss/modules/index.xl.scss create mode 100644 scss/modules/index.xs.scss create mode 100644 scss/modules/link-gallery.scss create mode 100644 scss/modules/link-gallery.xs.scss create mode 100644 scss/modules/link.scss create mode 100644 scss/modules/nav.lg.scss create mode 100644 scss/modules/nav.md.scss create mode 100644 scss/modules/nav.scss create mode 100644 scss/modules/nav.xs.scss create mode 100644 scss/modules/news-index.scss create mode 100644 scss/modules/product.scss create mode 100644 scss/modules/schedule.md.scss create mode 100644 scss/modules/schedule.scss create mode 100644 scss/modules/skip-to-content.scss create mode 100644 scss/normalize.scss create mode 100644 scss/utils.scss create mode 100644 scss/variables/colours.scss create mode 100644 scss/variables/index.lg.scss create mode 100644 scss/variables/index.md.scss create mode 100644 scss/variables/index.scss create mode 100644 scss/variables/index.sm.scss create mode 100644 scss/variables/index.xl.scss create mode 100644 scss/variables/index.xs.scss create mode 100644 scss/variables/index.xxl.scss create mode 100644 scss/variables/palette.scss create mode 100644 scss/variables/spacing.lg.scss create mode 100644 scss/variables/spacing.md.scss create mode 100644 scss/variables/spacing.scss create mode 100644 scss/variables/spacing.sm.scss create mode 100644 scss/variables/spacing.xl.scss create mode 100644 scss/variables/spacing.xs.scss create mode 100644 scss/variables/spacing.xxl.scss create mode 100644 scss/variables/typography.md.scss create mode 100644 scss/variables/typography.scss create mode 100644 scss/variables/typography.xs.scss diff --git a/.gitignore b/.gitignore index 7f25ed9..bce8711 100644 --- a/.gitignore +++ b/.gitignore @@ -7,3 +7,5 @@ npm-debug.log* dist/ .astro/ .vercel +public/css/ +scss-build/ diff --git a/build_csso.sh b/build_csso.sh new file mode 100644 index 0000000..e0d037e --- /dev/null +++ b/build_csso.sh @@ -0,0 +1,6 @@ +mkdir public/css -p || exit; +for x in scss-build/index*.css; +do + npm run csso -- $x --output $(echo $x | sed 's/scss-build/public\/css/'); +done; + diff --git a/dev_csso.sh b/dev_csso.sh new file mode 100644 index 0000000..02d5900 --- /dev/null +++ b/dev_csso.sh @@ -0,0 +1,11 @@ +mkdir public/css -p || exit; +for x in scss-build/index*.css; +do + output=$(echo $x | sed 's/scss-build/public\/css/'); + npm run csso -- $x \ + --output $output \ + --input-source-map $x.map \ + --source-map $output.map \ + --watch; +done; + diff --git a/package-lock.json b/package-lock.json index 7f5fabc..161140c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,13 +10,16 @@ "@astrojs/sitemap": "^3.0.0", "@paypal/paypal-js": "^6.0.1", "astro": "^3.2.2", + "csso-cli": "^4.0.2", "dotenv": "^16.3.1", + "sass": "^1.69.3", "typescript": "^5.2.2", "vercel": "^32.4.0" }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^6.2.1", "@typescript-eslint/parser": "^6.2.1", + "concurrently": "^8.2.1", "eslint": "^8.46.0", "eslint-plugin-astro": "^0.28.0", "husky": "^8.0.3", @@ -443,6 +446,18 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/runtime": { + "version": "7.23.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz", + "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==", + "dev": true, + "dependencies": { + "regenerator-runtime": "^0.14.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/template": { "version": "7.22.15", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz", @@ -2308,6 +2323,14 @@ "node": ">=8" } }, + "node_modules/ansi-colors": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", + "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==", + "engines": { + "node": ">=6" + } + }, "node_modules/ansi-escapes": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-5.0.0.tgz", @@ -3005,6 +3028,18 @@ "node": ">=8" } }, + "node_modules/clap": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/clap/-/clap-3.1.1.tgz", + "integrity": "sha512-vp42956Ax06WwaaheYEqEOgXZ3VKJxgccZ0gJL0HpyiupkIS9RVJFo5eDU1BPeQAOqz+cclndZg4DCqG1sJReQ==", + "dependencies": { + "ansi-colors": "^4.1.1" + }, + "engines": { + "node": "^12.20.0 || ^14.13.0 || >=15.0.0", + "npm": ">=7.0.0" + } + }, "node_modules/cli-boxes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-3.0.0.tgz", @@ -3080,6 +3115,120 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/cliui": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", + "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", + "dev": true, + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.1", + "wrap-ansi": "^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/cliui/node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/cliui/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/cliui/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/cliui/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/cliui/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true + }, + "node_modules/cliui/node_modules/is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/cliui/node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/cliui/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/cliui/node_modules/wrap-ansi": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, "node_modules/clsx": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", @@ -3189,6 +3338,118 @@ "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" }, + "node_modules/concurrently": { + "version": "8.2.1", + "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-8.2.1.tgz", + "integrity": "sha512-nVraf3aXOpIcNud5pB9M82p1tynmZkrSGQ1p6X/VY8cJ+2LMVqAgXsJxYYefACSHbTYlm92O1xuhdGTjwoEvbQ==", + "dev": true, + "dependencies": { + "chalk": "^4.1.2", + "date-fns": "^2.30.0", + "lodash": "^4.17.21", + "rxjs": "^7.8.1", + "shell-quote": "^1.8.1", + "spawn-command": "0.0.2", + "supports-color": "^8.1.1", + "tree-kill": "^1.2.2", + "yargs": "^17.7.2" + }, + "bin": { + "conc": "dist/bin/concurrently.js", + "concurrently": "dist/bin/concurrently.js" + }, + "engines": { + "node": "^14.13.0 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/open-cli-tools/concurrently?sponsor=1" + } + }, + "node_modules/concurrently/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/concurrently/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/concurrently/node_modules/chalk/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/concurrently/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/concurrently/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/concurrently/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/concurrently/node_modules/supports-color": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", + "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/supports-color?sponsor=1" + } + }, "node_modules/console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", @@ -3241,6 +3502,19 @@ "node": ">= 8" } }, + "node_modules/css-tree": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz", + "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", + "dependencies": { + "mdn-data": "2.0.28", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", + "npm": ">=7.0.0" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -3253,6 +3527,51 @@ "node": ">=4" } }, + "node_modules/csso": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz", + "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", + "dependencies": { + "css-tree": "~2.2.0" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", + "npm": ">=7.0.0" + } + }, + "node_modules/csso-cli": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/csso-cli/-/csso-cli-4.0.2.tgz", + "integrity": "sha512-p/VipA45w8EmS8Lv6wGtE+UdsbFlqUBGhL9FCTGKxd5dC07mtg3BbZaMzMh0X+oIl2JUGR/mPx5YzuNnTM2a3w==", + "dependencies": { + "chokidar": "^3.5.3", + "clap": "^3.1.1", + "csso": "^5.0.4", + "source-map-js": "^1.0.2" + }, + "bin": { + "csso": "bin/csso" + }, + "engines": { + "node": ">=12.20.0" + } + }, + "node_modules/date-fns": { + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", + "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.21.0" + }, + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -4673,6 +4992,15 @@ "node": ">=6.9.0" } }, + "node_modules/get-caller-file": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", + "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", + "dev": true, + "engines": { + "node": "6.* || 8.* || >= 10.*" + } + }, "node_modules/get-stream": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz", @@ -5071,6 +5399,11 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz", + "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -5678,6 +6011,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "dev": true + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -6255,6 +6594,11 @@ "@types/unist": "^2" } }, + "node_modules/mdn-data": { + "version": "2.0.28", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz", + "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==" + }, "node_modules/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -8093,6 +8437,12 @@ "node": ">=8.10.0" } }, + "node_modules/regenerator-runtime": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz", + "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==", + "dev": true + }, "node_modules/rehype": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/rehype/-/rehype-12.0.1.tgz", @@ -8245,6 +8595,15 @@ "node": "^12.20.0 || ^14.13.1 || >=16.0.0" } }, + "node_modules/require-directory": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", + "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/require-from-string": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", @@ -8567,6 +8926,15 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/rxjs": { + "version": "7.8.1", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz", + "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==", + "dev": true, + "dependencies": { + "tslib": "^2.1.0" + } + }, "node_modules/s.color": { "version": "0.0.15", "resolved": "https://registry.npmjs.org/s.color/-/s.color-0.0.15.tgz", @@ -8608,6 +8976,22 @@ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, + "node_modules/sass": { + "version": "1.69.3", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.3.tgz", + "integrity": "sha512-X99+a2iGdXkdWn1akFPs0ZmelUzyAQfvqYc2P/MPTrJRuIRoTffGzT9W9nFqG00S+c8hXzVmgxhUuHFdrwxkhQ==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/sass-formatter": { "version": "0.7.8", "resolved": "https://registry.npmjs.org/sass-formatter/-/sass-formatter-0.7.8.tgz", @@ -8721,6 +9105,15 @@ "node": ">=8" } }, + "node_modules/shell-quote": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz", + "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/shiki": { "version": "0.14.4", "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.4.tgz", @@ -8882,6 +9275,12 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/spawn-command": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2.tgz", + "integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==", + "dev": true + }, "node_modules/sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", @@ -10479,6 +10878,15 @@ "node": ">= 6.0" } }, + "node_modules/y18n": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", + "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", + "dev": true, + "engines": { + "node": ">=10" + } + }, "node_modules/yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", @@ -10493,6 +10901,24 @@ "node": ">= 14" } }, + "node_modules/yargs": { + "version": "17.7.2", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", + "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==", + "dev": true, + "dependencies": { + "cliui": "^8.0.1", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.3", + "y18n": "^5.0.5", + "yargs-parser": "^21.1.1" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/yargs-parser": { "version": "21.1.1", "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", @@ -10501,6 +10927,56 @@ "node": ">=12" } }, + "node_modules/yargs/node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/yargs/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true + }, + "node_modules/yargs/node_modules/is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/yargs/node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/yargs/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/yauzl": { "version": "2.10.0", "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz", diff --git a/package.json b/package.json index 03dfdcd..c482c23 100644 --- a/package.json +++ b/package.json @@ -2,11 +2,18 @@ "type": "module", "private": "true", "scripts": { - "dev": "astro dev", - "start": "astro dev", - "build": "astro build", + "start": "concurrently \"npm run astro dev\" \"npm run dev-css\"", + "dev": "concurrently \"npm run astro dev\" \"npm run dev-css\"", + "dev-css": "sass scss:scss-build && concurrently \"npm run dev-sass\" \"npm run dev-csso\"", + "dev-sass": "sass --watch scss:scss-build", + "dev-csso": "sh dev_csso.sh", + "build": "npm run build-css && astro build", + "build-css": "npm run build-sass && npm run build-csso", + "build-sass": "sass scss:scss-build --no-source-map --style compressed", + "build-csso": "sh build_csso.sh", "preview": "astro preview", "astro": "astro", + "csso": "csso", "lint": "eslint .", "format": "prettier ./**/* --check", "format--write": "prettier ./**/* --write", @@ -18,13 +25,16 @@ "@astrojs/sitemap": "^3.0.0", "@paypal/paypal-js": "^6.0.1", "astro": "^3.2.2", + "csso-cli": "^4.0.2", "dotenv": "^16.3.1", + "sass": "^1.69.3", "typescript": "^5.2.2", "vercel": "^32.4.0" }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^6.2.1", "@typescript-eslint/parser": "^6.2.1", + "concurrently": "^8.2.1", "eslint": "^8.46.0", "eslint-plugin-astro": "^0.28.0", "husky": "^8.0.3", diff --git a/public/css/base/index.css b/public/css/base/index.css deleted file mode 100644 index a8e9f15..0000000 --- a/public/css/base/index.css +++ /dev/null @@ -1,3 +0,0 @@ -@import './typography.css'; -@import './theme.css'; -@import './list.css'; \ No newline at end of file diff --git a/public/css/base/list.css b/public/css/base/list.css deleted file mode 100644 index 2fd402b..0000000 --- a/public/css/base/list.css +++ /dev/null @@ -1,4 +0,0 @@ -ol li { - list-style-type: decimal; - margin-inline-start: --spacing-inline-md; -} \ No newline at end of file diff --git a/public/css/base/theme.css b/public/css/base/theme.css deleted file mode 100644 index f5d178c..0000000 --- a/public/css/base/theme.css +++ /dev/null @@ -1,13 +0,0 @@ -:root { - color: var(--text-color); - background-color: var(--background-color); -} - -:is(main, article) { - color: var(--text-color); - background-color: var(--background-color); -} - -:is(main, article) > section:not(:is(section, header) :is(section, header)) { - background-color: var(--background-color); -} \ No newline at end of file diff --git a/public/css/base/typography.css b/public/css/base/typography.css deleted file mode 100644 index fb2ac17..0000000 --- a/public/css/base/typography.css +++ /dev/null @@ -1,68 +0,0 @@ -body { - font-family: var(--font-sans-serif); - font-size: var(--font-size-1); - font-weight: 400; - letter-spacing: 0.03rem; - line-height: 1.5; - word-wrap: break-word; -} - -h1 { - font-size: var(--font-size-5); -} - -h1:not(:first-child) { - margin-block-start: var(--margin-block-lg); -} - -h2 { - font-size: var(--font-size-4); -} - -h2:not(:first-child) { - margin-block-start: var(--margin-block-lg); -} - -h3 { - font-size: var(--font-size-3); -} - -h3:not(:first-child) { - margin-block-start: var(--margin-block-md); -} - -h4 { - font-size: var(--font-size-2); -} - -h4:not(:first-child) { - margin-block-start: var(--margin-block-sm); -} - -h1, -h2, -h3, -h4 { - font-family: var(--font-serif); - font-weight: 700; -} - -.title { - font-family: var(--font-serif); - font-size: var(--font-size-6); - font-weight: 700; - margin-block-start: var(--margin-block-sm); -} - -.title--small { - font-size: var(--font-size-2); - margin-block-start: 0; -} - -p:not(:first-child) { - margin-block-start: var(--margin-block-sm); -} - -:is(p, h1, h2, h3, h4) { - max-width: var(--width-prose); -} diff --git a/public/css/layout/grid.css b/public/css/layout/grid.css deleted file mode 100644 index 25cdd95..0000000 --- a/public/css/layout/grid.css +++ /dev/null @@ -1,30 +0,0 @@ -:is( - header, - footer, - nav, - :is(main, article) > section:not(:is(section, header) :is(section, header)) -):not(.section--full-width) { - padding-inline: calc(var(--grid-padding) + 0.5 * (100vw - var(--grid-total-width))); -} - -.grid-span-1 { - width: var(--grid-column-width); -} - -/* On screens narrower than 16rem, there is only one column. */ - -.grid-span-2 { - width: var(--grid-column-width); -} - -.grid-span-3 { - width: var(--grid-column-width); -} - -.width-prose { - width: var(--prose-width); -} - -.grid-span-full { - width: var(--grid-total-width); -} diff --git a/public/css/layout/grid.md.css b/public/css/layout/grid.md.css deleted file mode 100644 index f0c8478..0000000 --- a/public/css/layout/grid.md.css +++ /dev/null @@ -1,8 +0,0 @@ -:is( - header, - footer, - nav, - :is(main, article) > section:not(:is(section, header) :is(section, header)) -) { - padding-inline: var(--grid-padding); -} \ No newline at end of file diff --git a/public/css/layout/grid.xs.css b/public/css/layout/grid.xs.css deleted file mode 100644 index e7c6d1a..0000000 --- a/public/css/layout/grid.xs.css +++ /dev/null @@ -1,55 +0,0 @@ -.grid-span-2 { - width: calc(var(--grid-column-width) * 2 + var(--grid-gutter-width)); -} - -.grid-span-3 { - width: calc(var(--grid-column-width) * 3 + var(--grid-gutter-width) * 2); -} - -.grid-span-1.grid-end { - margin-inline-start: calc( - var(--grid-column-width) * (var(--grid-column-count) - 1) + - var(--grid-gutter-width) * (var(--grid-column-count) - 1) - ); - margin-inline-end: 0; -} - -.grid-span-2.grid-end { - margin-inline-start: calc( - var(--grid-column-width) * (var(--grid-column-count) - 2) + - var(--grid-gutter-width) * (var(--grid-column-count) - 2) - ); - margin-inline-end: 0; -} - -.grid-span-3.grid-end { - margin-inline-start: calc( - var(--grid-column-width) * (var(--grid-column-count) - 3) + - var(--grid-gutter-width) * (var(--grid-column-count) - 3) - ); - margin-inline-end: 0; -} - -.grid-span-1.grid-prose-end { - margin-inline-start: calc( - var(--grid-column-width) * (var(--grid-prose-column-count) - 1) + - var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1) - ); - margin-inline-end: 0; -} - -.grid-span-2.grid-prose-end { - margin-inline-start: calc( - var(--grid-column-width) * (var(--grid-prose-column-count) - 2) + - var(--grid-gutter-width) * (var(--grid-prose-column-count) - 2) - ); - margin-inline-end: 0; -} - -.grid-span-3.grid-prose-end { - margin-inline-start: calc( - var(--grid-column-width) * (var(--grid-prose-column-count) - 3) + - var(--grid-gutter-width) * (var(--grid-prose-column-count) - 3) - ); - margin-inline-end: 0; -} \ No newline at end of file diff --git a/public/css/layout/index.css b/public/css/layout/index.css deleted file mode 100644 index 0bede83..0000000 --- a/public/css/layout/index.css +++ /dev/null @@ -1,4 +0,0 @@ -@import './grid.css'; -@import './grid.xs.css' (min-width: 16rem); -@import './grid.md.css' (min-width: 48rem); -@import './section-margins.css'; \ No newline at end of file diff --git a/public/css/layout/section-margins.css b/public/css/layout/section-margins.css deleted file mode 100644 index a11073f..0000000 --- a/public/css/layout/section-margins.css +++ /dev/null @@ -1,14 +0,0 @@ -:is(main, article) > :is(section, header):not(:is(section, header) :is(section, header)) { - padding-block-start: var(--margin-block-lg); - padding-block-end: var(--margin-block-md); -} - -footer { - padding-block-start: var(--margin-block-md); - padding-block-end: var(--margin-block-lg); -} - -nav { - padding-block-start: var(--margin-block-sm); - padding-block-end: var(--margin-block-md); -} \ No newline at end of file diff --git a/public/css/modules/btn.css b/public/css/modules/btn.css deleted file mode 100644 index 142463c..0000000 --- a/public/css/modules/btn.css +++ /dev/null @@ -1,38 +0,0 @@ -.btn { - display: block; - box-sizing: border-box; - color: var(--text-color); - border: solid var(--relative-eighth-rem) var(--text-color); - font-weight: 500; - text-align: center; - margin-block-start: var(--margin-block-sm); - padding-inline: var(--padding-inline-md); - padding-block: var(--padding-block-sm); - background-color: transparent; - transition: - background-color 100ms, - font-weight 100ms, - transform 100ms; -} - -.btn:is(:hover, :focus, :focus-visible, :focus-within, :active) { - box-shadow: none; - outline: none; - color: var(--text-highlight-color); - border-color: var(--background-highlight-color); - background-color: var(--background-highlight-color); - font-weight: 700; - transition: - background-color 300ms, - font-weight 300ms, - transform 300ms; -} - -.btn:is(:focus, :focus-visible, :focus-within) { - border-color: var(--special-text-highlight-color); - border-style: dotted; -} - -.btn:active { - transform: scale(1.1, 1.1); -} \ No newline at end of file diff --git a/public/css/modules/committee.css b/public/css/modules/committee.css deleted file mode 100644 index 8817fc1..0000000 --- a/public/css/modules/committee.css +++ /dev/null @@ -1,9 +0,0 @@ -.committee__member { - margin-block-start: var(--margin-block-sm); -} - -.committee__member__img { - margin-inline: calc(var(--grid-column-width) + var(--grid-gutter-width)); - width: calc(var(--grid-gutter-width) + 2 * var(--grid-column-width)); - border-radius: 50%; -} \ No newline at end of file diff --git a/public/css/modules/committee.md.css b/public/css/modules/committee.md.css deleted file mode 100644 index 83ca252..0000000 --- a/public/css/modules/committee.md.css +++ /dev/null @@ -1,16 +0,0 @@ -.committee__member { - display: grid; - grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); - grid-template-rows: 1fr; - column-gap: var(--grid-gutter-width); -} - -.committee__member__img { - grid-column: 1 / 3; - margin-block: auto; - margin-inline: 0; -} - -.committee__member__text { - grid-column: 3 / calc(3 + var(--grid-prose-column-count) - 2); -} \ No newline at end of file diff --git a/public/css/modules/committee.xl.css b/public/css/modules/committee.xl.css deleted file mode 100644 index 94d8429..0000000 --- a/public/css/modules/committee.xl.css +++ /dev/null @@ -1,15 +0,0 @@ -.committee__member { - display: grid; - grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); - grid-template-rows: 1fr; - column-gap: var(--grid-gutter-width); -} - -.committee__member__img { - grid-column: 1 / 3; - margin-block: auto; -} - -.committee__member__text { - grid-column: 3 / min(11, calc(var(--grid-column-count) + 1)); -} \ No newline at end of file diff --git a/public/css/modules/footer.css b/public/css/modules/footer.css deleted file mode 100644 index 0d1a896..0000000 --- a/public/css/modules/footer.css +++ /dev/null @@ -1,28 +0,0 @@ -footer { - display: grid; - grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); - gap: var(--grid-gutter-width); - align-items: baseline; -} - -.footer__rss-button__label { - /* Hides the label from non-screen-readers */ - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; -} - -.footer__rss-button__img { - min-width: 44px; - width: calc(8 * var(--relative-eighth-rem)); -} - -.footer__back-to-top { - grid-column: calc(var(--grid-column-count) - 2) / calc(var(--grid-column-count) + 1); -} \ No newline at end of file diff --git a/public/css/modules/index.css b/public/css/modules/index.css deleted file mode 100644 index d33754f..0000000 --- a/public/css/modules/index.css +++ /dev/null @@ -1,16 +0,0 @@ -@import './btn.css'; -@import './link.css'; -@import './news-index.css'; -@import './product.css'; -@import './schedule.css'; -@import './schedule.md.css' (min-width: 48rem); -@import './link-gallery.css'; -@import './link-gallery.xs.css' (min-width: 16rem); -@import './nav.css'; -@import './nav.xs.css' (min-width: 16rem); -@import './nav.md.css' (min-width: 48rem); -@import './nav.lg.css' (min-width: 64rem); -@import './skip-to-content.css'; -@import './committee.css'; -@import './committee.md.css' (min-width: 48rem); -@import './footer.css'; diff --git a/public/css/modules/link-gallery.css b/public/css/modules/link-gallery.css deleted file mode 100644 index d9f9514..0000000 --- a/public/css/modules/link-gallery.css +++ /dev/null @@ -1,41 +0,0 @@ -.link-gallery { - display: grid; - grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); - gap: var(--grid-gutter-width); - padding-block: var(--margin-block-md); - --gallery-item-column-span: 1; - --gallery-row-image-height: 12rem; - --gallery-row-title-height: fit-content; - text-align: center; -} - -.link-gallery li { - grid-column: span var(--gallery-item-column-span); -} - -.link-gallery__container { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: var(--gallery-row-image-height) var(--gallery-row-title-height); - row-gap: var(--margin-block-sm); -} - -.link-gallery--furthsettins img { - box-sizing: border-box; - border-radius: 50%; - border: solid calc(2 * var(--relative-eighth-rem)) var(--text-color); -} - -.link-gallery img { - max-width: 100%; - max-height: 100%; - margin: auto; - height: auto; -} - -.link-gallery__title { - width: 100%; - height: min-content; - text-align: center; - margin-inline: var(--spacing-inline-xs); -} diff --git a/public/css/modules/link-gallery.xs.css b/public/css/modules/link-gallery.xs.css deleted file mode 100644 index b2bf86c..0000000 --- a/public/css/modules/link-gallery.xs.css +++ /dev/null @@ -1,21 +0,0 @@ -.link-gallery { - grid-auto-rows: calc( - var(--gallery-row-image-height) + - var(--margin-block-sm) + - var(--gallery-row-title-height) - ); - --gallery-item-column-span: 2; - --gallery-row-title-height: 11ex; - text-align: center; -} - -.link-gallery__title { - width: 100%; - height: 9.9ex; - height: 3lh; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} diff --git a/public/css/modules/link.css b/public/css/modules/link.css deleted file mode 100644 index d225e9d..0000000 --- a/public/css/modules/link.css +++ /dev/null @@ -1,42 +0,0 @@ -.link { - color: var(--special-text-color); - text-decoration-line: underline; - text-decoration-color: var(--special-text-color); - text-decoration-thickness: var(--relative-eighth-rem); - text-underline-offset: var(--relative-eighth-rem); - border: dotted transparent var(--relative-eighth-rem); - border-radius: calc(3 * var(--relative-eighth-rem)); - transition: - color 100ms, - text-decoration-color 100ms, - text-decoration-thickness 100ms, - text-underline-offset 100ms, - border-color 100ms, - text-shadow 100ms; -} - -.link:is(:hover, :focus, :focus-visible, :focus-within), -.group-hover:is(:hover, :focus, :focus-visible, :focus-within) .link { - text-decoration-color: currentColor; - text-decoration-thickness: calc(4 * var(--relative-eighth-rem)); - text-underline-offset: calc(3 * var(--relative-eighth-rem)); - text-shadow: - 0 1px 0 currentColor, - 1px 0 0 currentColor, - 1px 0 0 currentColor, - 0 1px 0 currentColor; - transition: - color 300ms, - text-decoration-color 300ms, - text-decoration-thickness 300ms, - text-underline-offset 300ms, - border-color 300ms, - text-shadow 300ms; -} - -.link:focus, .link:focus-visible { - box-shadow: none; - outline: none; - border-color: var(--special-text-color); -} - diff --git a/public/css/modules/nav.css b/public/css/modules/nav.css deleted file mode 100644 index 44ec5c6..0000000 --- a/public/css/modules/nav.css +++ /dev/null @@ -1,77 +0,0 @@ -.nav > :not(:last-child) { - margin-block-end: var(--margin-block-sm); -} - -.nav__bottom-row { - display: flex; - flex-direction: column; -} - -.nav__nav-links { - display: grid; - grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); - column-gap: var(--grid-gutter-width); -} - -.nav__nav-links li { - margin: 0; -} - -.nav__logo { - font-family: var(--font-serif); - font-size: var(--font-size-5); - font-weight: 700; - - /* This gradient is based on * - * --color-primary-60 -> --color-secondary-60 * - * using Josh W Comeau's gradient generator */ - width: fit-content; - background-image: linear-gradient( - 45deg, - hsl(248deg 100% 75%) 0%, - hsl(227deg 100% 70%) 24%, - hsl(211deg 100% 58%) 40%, - hsl(205deg 100% 50%) 51%, - hsl(202deg 100% 49%) 60%, - hsl(200deg 100% 47%) 66%, - hsl(197deg 100% 44%) 70%, - hsl(194deg 100% 41%) 73%, - hsl(190deg 100% 38%) 76%, - hsl(186deg 100% 35%) 79%, - hsl(181deg 100% 33%) 84%, - hsl(177deg 100% 32%) 100% - ); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - -.nav__logo a { - text-decoration: none; - border: var(--relative-eighth-rem) dotted transparent; - transition: border-color 100ms; -} - -.nav__logo a:is(:focus, :focus-visible, :focus-within) { - box-shadow: none; - outline: none; - border-color: var(--special-text-color); - transition: border-color 300ms; -} - -.nav__breadcrumbs { - display: flex; - flex-wrap: wrap; -} - -.nav__breadcrumbs li { - list-style-type: none; - min-width: max-content; -} - -.nav__breadcrumbs li::before { - content: '/' -} - -.nav__switch-language-link { - text-align: right; -} diff --git a/public/css/modules/nav.lg.css b/public/css/modules/nav.lg.css deleted file mode 100644 index c47a685..0000000 --- a/public/css/modules/nav.lg.css +++ /dev/null @@ -1,15 +0,0 @@ -.nav__bottom-row { - flex-direction: row; - justify-content: space-between; - align-items: baseline; - padding-inline: max(10%, calc((100% - var(--max-width-all-content)) / 2)); - gap: var(--spacing-inline-xs); -} - -.nav__nav-links li:nth-child(4) { - grid-column: 8 / 10; -} - -.nav__nav-links li:nth-child(5) { - grid-column: 10 / 12; -} diff --git a/public/css/modules/nav.md.css b/public/css/modules/nav.md.css deleted file mode 100644 index c3f4a18..0000000 --- a/public/css/modules/nav.md.css +++ /dev/null @@ -1,11 +0,0 @@ -.nav__nav-links li:nth-child(3) { - grid-column: 5 / 8; -} - -.nav__nav-links li:nth-child(4) { - grid-column: 1 / 3; -} - -.nav__nav-links li:nth-child(5) { - grid-column: 3 / 5; -} \ No newline at end of file diff --git a/public/css/modules/nav.xs.css b/public/css/modules/nav.xs.css deleted file mode 100644 index 708652c..0000000 --- a/public/css/modules/nav.xs.css +++ /dev/null @@ -1,19 +0,0 @@ -.nav__nav-links li:nth-child(1) { - grid-column: 1 / 3; -} - -.nav__nav-links li:nth-child(2) { - grid-column: 3 / 5; -} - -.nav__nav-links li:nth-child(3) { - grid-column: 1 / 4; -} - -.nav__nav-links li:nth-child(4) { - grid-column: 1 / 3; -} - -.nav__nav-links li:nth-child(5) { - grid-column: 3 / 5; -} diff --git a/public/css/modules/news-index.css b/public/css/modules/news-index.css deleted file mode 100644 index 0050f70..0000000 --- a/public/css/modules/news-index.css +++ /dev/null @@ -1,31 +0,0 @@ -.news-index__item { - display: block; - box-sizing: border-box; - border: var(--relative-eighth-rem) solid var(--text-color); - transition: background 100ms; - padding-block: var(--margin-block-md); - padding-inline: var(--padding-inline-sm); - width: var(--width-prose); -} - -.news-index__item:not(:first-child) { - border-top-width: 0; -} - -.news-index__item:is(:hover, :focus, :focus-visible, :focus-within) { - outline: none; - box-shadow: none; - color: var(--text-highlight-color); - border-color: var(--background-highlight-color); - background: var(--background-highlight-color); - transition-duration: 300ms; -} - -.news-index__item:is(:hover, :focus, :focus-visible, :focus-within) .link { - color: var(--special-text-highlight-color); -} - -.news-index__item:is(:focus, :focus-visible, :focus-within) { - border-color: var(--special-text-highlight-color); - border-style: dotted; -} \ No newline at end of file diff --git a/public/css/modules/product.css b/public/css/modules/product.css deleted file mode 100644 index 32fa37f..0000000 --- a/public/css/modules/product.css +++ /dev/null @@ -1,20 +0,0 @@ -.product__header-block { - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - gap: var(--spacing-inline-sm); -} - -.product__action-block { - display: flex; - flex-direction: column; - margin-inline: auto; - width: fit-content; - gap: var(--margin-block-sm); -} - -.product__action-block img { - max-width: 12rem; - width: 100%; - height: auto; -} diff --git a/public/css/modules/schedule.css b/public/css/modules/schedule.css deleted file mode 100644 index 140767c..0000000 --- a/public/css/modules/schedule.css +++ /dev/null @@ -1,13 +0,0 @@ -.schedule:not(:first-child) { - margin-block-start: var(--margin-block-sm); -} - -.schedule dt { - font-weight: 700; - margin-block-start: var(--margin-block-sm); - text-align: center; -} - -.schedule dd { - text-align: center; -} diff --git a/public/css/modules/schedule.md.css b/public/css/modules/schedule.md.css deleted file mode 100644 index 9ccfb0b..0000000 --- a/public/css/modules/schedule.md.css +++ /dev/null @@ -1,16 +0,0 @@ -.schedule { - display: grid; - grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); - column-gap: var(--grid-gutter-width); -} - -.schedule dt { - grid-column: 1 / 3; - margin: 0; - text-align: end; -} - -.schedule dd { - grid-column: 3 / calc(1 + var(--grid-prose-column-count)); - text-align: start; -} diff --git a/public/css/modules/skip-to-content.css b/public/css/modules/skip-to-content.css deleted file mode 100644 index a752b29..0000000 --- a/public/css/modules/skip-to-content.css +++ /dev/null @@ -1,13 +0,0 @@ -.skip-to-content { - position: absolute; - left: var(--grid-padding); - top: -10rem; - opacity: 0; - transition: top 300ms, opacity 300ms; -} - -.skip-to-content:is(:focus, :focus-visible, :focus-within) { - top: var(--margin-block-md); - opacity: 1; - transition: top 100ms; -} \ No newline at end of file diff --git a/public/css/utils.css b/public/css/utils.css deleted file mode 100644 index a05a216..0000000 --- a/public/css/utils.css +++ /dev/null @@ -1,7 +0,0 @@ -.italic { - font-style: italic; -} - -.font-weight-lighter { - font-weight: lighter; -} diff --git a/public/css/variables/colours.css b/public/css/variables/colours.css deleted file mode 100644 index 5c34e42..0000000 --- a/public/css/variables/colours.css +++ /dev/null @@ -1,23 +0,0 @@ -@import 'palette.css'; - -:root { - --text-color: var(--color-primary-98); - --text-highlight-color: var(--color-primary-10); - --background-color: var(--color-primary-10); - --background-highlight-color: var(--color-primary-90); - --special-text-color: var(--color-secondary-90); - --special-text-highlight-color: var(--color-secondary-10); -} - -:is(main, article) { - --text-color: var(--color-primary-10); - --text-highlight-color: var(--color-primary-90); - --background-color: var(--color-primary-98); - --background-highlight-color: var(--color-primary-10); - --special-text-color: var(--color-secondary-40); - --special-text-highlight-color: var(--color-secondary-90); -} - -:is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)) { - --background-color: var(--color-primary-95); -} \ No newline at end of file diff --git a/public/css/variables/index.css b/public/css/variables/index.css deleted file mode 100644 index 844ddba..0000000 --- a/public/css/variables/index.css +++ /dev/null @@ -1,11 +0,0 @@ -@import 'colours.css'; -@import 'spacing.css'; -@import 'spacing.xs.css' (min-width: 16rem); -@import 'spacing.sm.css' (min-width: 30rem); -@import 'spacing.md.css' (min-width: 48rem); -@import 'spacing.lg.css' (min-width: 64rem); -@import 'spacing.xl.css' (min-width: 96rem); -@import 'spacing.xxl.css' (min-width: 120rem); -@import 'typography.css'; -@import 'typography.xs.css' (min-width: 16rem); -@import 'typography.md.css' (min-width: 48rem); diff --git a/public/css/variables/palette.css b/public/css/variables/palette.css deleted file mode 100644 index f40bb89..0000000 --- a/public/css/variables/palette.css +++ /dev/null @@ -1,35 +0,0 @@ -:root { - --color-primary-0: #000000; - --color-primary-10: #190064; - --color-primary-20: #2d009d; - --color-primary-25: #381aa8; - --color-primary-30: #442bb3; - --color-primary-35: #503abf; - --color-primary-40: #5c48cc; - --color-primary-50: #7663e7; - --color-primary-60: #907eff; - --color-primary-70: #ac9fff; - --color-primary-80: #c8bfff; - --color-primary-90: #e5deff; - --color-primary-95: #f4eeff; - --color-primary-98: #fdf8ff; - --color-primary-99: #fffbff; - --color-primary-100: #ffffff; - - --color-secondary-0: #000000; - --color-secondary-10: #00201e; - --color-secondary-20: #003733; - --color-secondary-25: #00433f; - --color-secondary-30: #00504b; - --color-secondary-35: #005d57; - --color-secondary-40: #006a64; - --color-secondary-50: #00867e; - --color-secondary-60: #00a299; - --color-secondary-70: #26bfb4; - --color-secondary-80: #50dbcf; - --color-secondary-90: #71f7ec; - --color-secondary-95: #b2fff6; - --color-secondary-98: #e4fffb; - --color-secondary-99: #f2fffc; - --color-secondary-100: #ffffff; -} \ No newline at end of file diff --git a/public/css/variables/spacing.css b/public/css/variables/spacing.css deleted file mode 100644 index a4d1d91..0000000 --- a/public/css/variables/spacing.css +++ /dev/null @@ -1,47 +0,0 @@ -:root { - --margin-inline-md: calc(2 * var(--relative-eighth-rem)); - --margin-block-lg: calc(16 * var(--relative-eighth-rem)); - --margin-block-md: calc(10 * var(--relative-eighth-rem)); - --margin-block-sm: calc(5 * var(--relative-eighth-rem)); - - --padding-inline-lg: calc(4 * var(--relative-eighth-rem)); - --padding-inline-md: calc(2 * var(--relative-eighth-rem)); - --padding-inline-sm: calc(1 * var(--relative-eighth-rem)); - --padding-block-lg: calc(12 * var(--relative-eighth-rem)); - --padding-block-md: calc(8 * var(--relative-eighth-rem)); - --padding-block-sm: calc(5 * var(--relative-eighth-rem)); - - --grid-padding: calc(var(--grid-padding-relative-eighth-rem) * var(--relative-eighth-rem)); - --grid-column-width: calc(var(--grid-column-width-relative-eighth-rem) * var(--relative-eighth-rem)); - --grid-gutter-width: calc(var(--grid-gutter-width-relative-eighth-rem) * var(--relative-eighth-rem)); - - --grid-total-relative-eighth-rem-width: calc( - var(--grid-padding-relative-eighth-rem) * 2 + - var(--grid-column-width-relative-eighth-rem) * var(--grid-column-count) + - var(--grid-gutter-width-relative-eighth-rem) * (var(--grid-column-count) - 1) - ); - --relative-eighth-rem: calc( - var(--grid-total-width) / var(--grid-total-relative-eighth-rem-width) - ); - --width-prose: calc( - var(--grid-column-width) * var(--grid-prose-column-count) + - var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1) - ); - - --grid-column-width-relative-eighth-rem: 32; - --grid-gutter-width-relative-eighth-rem: 4; - - /*********************************************************** - * Generally, we will use columns to keep things laid out * - * nicely. However, on screens narrower than xs, this gets * - * pretty much impossible. So for those screens, we use a * - * single-column layout taking up 100vw. In effect, this * - * is just default CSS layout plus a wee bit padding. From * - * xs widewards, we use multiple columns on a fixed width. * - ***********************************************************/ - - --grid-total-width: 100vw; - --grid-padding-relative-eighth-rem: 8; - --grid-column-count: 1; - --grid-prose-column-count: 1; -} diff --git a/public/css/variables/spacing.lg.css b/public/css/variables/spacing.lg.css deleted file mode 100644 index bc18bfd..0000000 --- a/public/css/variables/spacing.lg.css +++ /dev/null @@ -1,6 +0,0 @@ -:root { - --grid-total-width: 64rem; - --grid-padding-relative-eighth-rem: 20; - --grid-column-count: 12; - --grid-prose-column-count: 8; -} \ No newline at end of file diff --git a/public/css/variables/spacing.md.css b/public/css/variables/spacing.md.css deleted file mode 100644 index 0028e8a..0000000 --- a/public/css/variables/spacing.md.css +++ /dev/null @@ -1,6 +0,0 @@ -:root { - --grid-total-width: 48rem; - --grid-padding-relative-eighth-rem: 16; - --grid-column-count: 8; - --grid-prose-column-count: 8; -} \ No newline at end of file diff --git a/public/css/variables/spacing.sm.css b/public/css/variables/spacing.sm.css deleted file mode 100644 index 7cdf26f..0000000 --- a/public/css/variables/spacing.sm.css +++ /dev/null @@ -1,4 +0,0 @@ -:root { - --grid-total-width: 30rem; - --grid-padding-relative-eighth-rem: 12; -} diff --git a/public/css/variables/spacing.xl.css b/public/css/variables/spacing.xl.css deleted file mode 100644 index fc8b1f3..0000000 --- a/public/css/variables/spacing.xl.css +++ /dev/null @@ -1,10 +0,0 @@ -:root { - --grid-total-width: 80rem; - --grid-padding-relative-eighth-rem: 26; - --grid-column-count: 12; - --grid-prose-column-count: 8; - --width-prose: calc( - var(--grid-column-width) * min(8, var(--grid-column-count)) + - var(--grid-gutter-width) * min(7, (var(--grid-column-count) - 1)) - ); -} \ No newline at end of file diff --git a/public/css/variables/spacing.xs.css b/public/css/variables/spacing.xs.css deleted file mode 100644 index fb7c01a..0000000 --- a/public/css/variables/spacing.xs.css +++ /dev/null @@ -1,6 +0,0 @@ -:root { - --grid-total-width: 15rem; - --grid-padding-relative-eighth-rem: 8; - --grid-column-count: 4; - --grid-prose-column-count: 4; -} diff --git a/public/css/variables/spacing.xxl.css b/public/css/variables/spacing.xxl.css deleted file mode 100644 index 17d2f66..0000000 --- a/public/css/variables/spacing.xxl.css +++ /dev/null @@ -1,6 +0,0 @@ -:root { - --grid-total-width: 100rem; - --grid-padding-relative-eighth-rem: 32; - --grid-column-count: 12; - --grid-prose-column-count: 8; -} \ No newline at end of file diff --git a/public/css/variables/typography.css b/public/css/variables/typography.css deleted file mode 100644 index f8515fd..0000000 --- a/public/css/variables/typography.css +++ /dev/null @@ -1,42 +0,0 @@ -:root { - --font-size-0: calc(8 * var(--relative-eighth-rem)); - --font-size-1: calc(8 * var(--relative-eighth-rem)); - --font-size-2: calc(8 * var(--relative-eighth-rem)); - --font-size-3: calc(8 * var(--relative-eighth-rem)); - --font-size-4: calc(8 * var(--relative-eighth-rem)); - --font-size-5: calc(8 * var(--relative-eighth-rem)); - --font-size-6: calc(8 * var(--relative-eighth-rem)); - - --font-serif: - Alegreya, - -apple-system-ui-serif, - Iowan Old Style, - Apple Garamond, - Baskerville, - Sitka, "Sitka Display", "Sitka Heading", "Sitka Text", - Times New Roman, - Droid Serif, - Times, - Source Serif Pro, - serif, - Apple Color Emoji, - Segoe UI Emoji, - Segoe UI Symbol; - - --font-sans-serif: - 'Alegreya Sans', - Lato, - -apple-system, - BlinkMacSystemFont, - avenir next, - avenir, - segoe ui, - helvetica neue, - helvetica, - Cantarell, - Ubuntu, - roboto, - noto, - arial, - sans-serif -} \ No newline at end of file diff --git a/public/css/variables/typography.md.css b/public/css/variables/typography.md.css deleted file mode 100644 index 2c36d1d..0000000 --- a/public/css/variables/typography.md.css +++ /dev/null @@ -1,9 +0,0 @@ -:root { - --font-size-0: calc(7 * var(--relative-eighth-rem)); - --font-size-1: calc(9 * var(--relative-eighth-rem)); - --font-size-2: calc(12 * var(--relative-eighth-rem)); - --font-size-3: calc(16 * var(--relative-eighth-rem)); - --font-size-4: calc(20 * var(--relative-eighth-rem)); - --font-size-5: calc(26 * var(--relative-eighth-rem)); - --font-size-6: calc(32 * var(--relative-eighth-rem)); -} \ No newline at end of file diff --git a/public/css/variables/typography.xs.css b/public/css/variables/typography.xs.css deleted file mode 100644 index 6375aad..0000000 --- a/public/css/variables/typography.xs.css +++ /dev/null @@ -1,9 +0,0 @@ -:root { - --font-size-0: calc(6 * var(--relative-eighth-rem)); - --font-size-1: calc(8 * var(--relative-eighth-rem)); - --font-size-2: calc(11 * var(--relative-eighth-rem)); - --font-size-3: calc(14 * var(--relative-eighth-rem)); - --font-size-4: calc(18 * var(--relative-eighth-rem)); - --font-size-5: calc(23 * var(--relative-eighth-rem)); - --font-size-6: calc(28 * var(--relative-eighth-rem)); -} \ No newline at end of file diff --git a/public/main.css b/public/main.css deleted file mode 100644 index 7992dc3..0000000 --- a/public/main.css +++ /dev/null @@ -1,9 +0,0 @@ -@import 'css/variables/index.css'; -@import 'css/base/index.css'; -@import 'css/layout/index.css'; -@import 'css/modules/index.css'; -@import 'css/utils.css'; - -:root { - scroll-behavior: smooth; -} diff --git a/public/normalize.css b/public/normalize.css deleted file mode 100644 index 0130a0b..0000000 --- a/public/normalize.css +++ /dev/null @@ -1,116 +0,0 @@ -:root, -html, -body, -main, -article, -section, -header, -footer, -button, -ol, -ul, -li, -dl, -dt, -dd, -p, -h1, -h2, -h3, -h4 { - margin: 0; - padding: 0; -} - -html { - -webkit-text-size-adjust: 100%; -} - -main { - display: block; -} - -hr { - box-sizing: content-box; - height: 0; - overflow: visible; -} - -pre { - font-family: monospace, monospace; - font-size: 1em; -} - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -b, -strong { - font-weight: bolder; -} - -small { - font-size: 80%; -} - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -img { - border-style: none; -} - -button, [type='button'], [type='reset'], [type='submit'] { - font-family: inherit; - font-size: 100%; - line-height: 1.15; - text-transform: none; - overflow: visible; -} - -:is(button, [type='button'], [type='reset'], [type='submit'])::-moz-focus-inner { - border-style: none; - padding: 0; -} - -:is(button, [type='button'], [type='reset'], [type='submit']):-moz-focusring { - outline: 1px dotted ButtonText; -} - -details { - display: block; -} - -summary { - display: list-item; -} - -[hidden] { - display: none; -} - -a, :link, :visited { - background-color: transparent; - color: currentColor; - text-decoration: none; -} - -li { - list-style: none; -} diff --git a/scss/base/index.scss b/scss/base/index.scss new file mode 100644 index 0000000..da4f59e --- /dev/null +++ b/scss/base/index.scss @@ -0,0 +1,4 @@ +@use 'typography'; +@use 'theme'; +@use 'list'; + diff --git a/scss/base/list.scss b/scss/base/list.scss new file mode 100644 index 0000000..2fd402b --- /dev/null +++ b/scss/base/list.scss @@ -0,0 +1,4 @@ +ol li { + list-style-type: decimal; + margin-inline-start: --spacing-inline-md; +} \ No newline at end of file diff --git a/scss/base/theme.scss b/scss/base/theme.scss new file mode 100644 index 0000000..f5d178c --- /dev/null +++ b/scss/base/theme.scss @@ -0,0 +1,13 @@ +:root { + color: var(--text-color); + background-color: var(--background-color); +} + +:is(main, article) { + color: var(--text-color); + background-color: var(--background-color); +} + +:is(main, article) > section:not(:is(section, header) :is(section, header)) { + background-color: var(--background-color); +} \ No newline at end of file diff --git a/scss/base/typography.scss b/scss/base/typography.scss new file mode 100644 index 0000000..fb2ac17 --- /dev/null +++ b/scss/base/typography.scss @@ -0,0 +1,68 @@ +body { + font-family: var(--font-sans-serif); + font-size: var(--font-size-1); + font-weight: 400; + letter-spacing: 0.03rem; + line-height: 1.5; + word-wrap: break-word; +} + +h1 { + font-size: var(--font-size-5); +} + +h1:not(:first-child) { + margin-block-start: var(--margin-block-lg); +} + +h2 { + font-size: var(--font-size-4); +} + +h2:not(:first-child) { + margin-block-start: var(--margin-block-lg); +} + +h3 { + font-size: var(--font-size-3); +} + +h3:not(:first-child) { + margin-block-start: var(--margin-block-md); +} + +h4 { + font-size: var(--font-size-2); +} + +h4:not(:first-child) { + margin-block-start: var(--margin-block-sm); +} + +h1, +h2, +h3, +h4 { + font-family: var(--font-serif); + font-weight: 700; +} + +.title { + font-family: var(--font-serif); + font-size: var(--font-size-6); + font-weight: 700; + margin-block-start: var(--margin-block-sm); +} + +.title--small { + font-size: var(--font-size-2); + margin-block-start: 0; +} + +p:not(:first-child) { + margin-block-start: var(--margin-block-sm); +} + +:is(p, h1, h2, h3, h4) { + max-width: var(--width-prose); +} diff --git a/scss/index.lg.scss b/scss/index.lg.scss new file mode 100644 index 0000000..4060f14 --- /dev/null +++ b/scss/index.lg.scss @@ -0,0 +1,3 @@ +@use 'modules/index.lg' as *; +@use 'variables/index.lg' as *; + diff --git a/scss/index.md.scss b/scss/index.md.scss new file mode 100644 index 0000000..a49e979 --- /dev/null +++ b/scss/index.md.scss @@ -0,0 +1,4 @@ +@use 'layout/index.md' as *; +@use 'modules/index.md' as *; +@use 'variables/index.md' as *; + diff --git a/scss/index.scss b/scss/index.scss new file mode 100644 index 0000000..485e64c --- /dev/null +++ b/scss/index.scss @@ -0,0 +1,7 @@ +@use 'normalize' as *; +@use 'base/index' as *; +@use 'layout/index' as *; +@use 'modules/index' as *; +@use 'variables/index' as *; +@use 'utils' as *; + diff --git a/scss/index.sm.scss b/scss/index.sm.scss new file mode 100644 index 0000000..37c6ec7 --- /dev/null +++ b/scss/index.sm.scss @@ -0,0 +1,2 @@ +@use 'variables/index.sm' as *; + diff --git a/scss/index.xl.scss b/scss/index.xl.scss new file mode 100644 index 0000000..7848b38 --- /dev/null +++ b/scss/index.xl.scss @@ -0,0 +1,3 @@ +@use 'modules/index.xl' as *; +@use 'variables/index.xl' as *; + diff --git a/scss/index.xs.scss b/scss/index.xs.scss new file mode 100644 index 0000000..6aee8e5 --- /dev/null +++ b/scss/index.xs.scss @@ -0,0 +1,4 @@ +@use 'layout/index.xs' as *; +@use 'modules/index.xs' as *; +@use 'variables/index.xs' as *; + diff --git a/scss/index.xxl.scss b/scss/index.xxl.scss new file mode 100644 index 0000000..067147c --- /dev/null +++ b/scss/index.xxl.scss @@ -0,0 +1,2 @@ +@use 'variables/index.xxl' as *; + diff --git a/scss/layout/grid.md.scss b/scss/layout/grid.md.scss new file mode 100644 index 0000000..f0c8478 --- /dev/null +++ b/scss/layout/grid.md.scss @@ -0,0 +1,8 @@ +:is( + header, + footer, + nav, + :is(main, article) > section:not(:is(section, header) :is(section, header)) +) { + padding-inline: var(--grid-padding); +} \ No newline at end of file diff --git a/scss/layout/grid.scss b/scss/layout/grid.scss new file mode 100644 index 0000000..25cdd95 --- /dev/null +++ b/scss/layout/grid.scss @@ -0,0 +1,30 @@ +:is( + header, + footer, + nav, + :is(main, article) > section:not(:is(section, header) :is(section, header)) +):not(.section--full-width) { + padding-inline: calc(var(--grid-padding) + 0.5 * (100vw - var(--grid-total-width))); +} + +.grid-span-1 { + width: var(--grid-column-width); +} + +/* On screens narrower than 16rem, there is only one column. */ + +.grid-span-2 { + width: var(--grid-column-width); +} + +.grid-span-3 { + width: var(--grid-column-width); +} + +.width-prose { + width: var(--prose-width); +} + +.grid-span-full { + width: var(--grid-total-width); +} diff --git a/scss/layout/grid.xs.scss b/scss/layout/grid.xs.scss new file mode 100644 index 0000000..e7c6d1a --- /dev/null +++ b/scss/layout/grid.xs.scss @@ -0,0 +1,55 @@ +.grid-span-2 { + width: calc(var(--grid-column-width) * 2 + var(--grid-gutter-width)); +} + +.grid-span-3 { + width: calc(var(--grid-column-width) * 3 + var(--grid-gutter-width) * 2); +} + +.grid-span-1.grid-end { + margin-inline-start: calc( + var(--grid-column-width) * (var(--grid-column-count) - 1) + + var(--grid-gutter-width) * (var(--grid-column-count) - 1) + ); + margin-inline-end: 0; +} + +.grid-span-2.grid-end { + margin-inline-start: calc( + var(--grid-column-width) * (var(--grid-column-count) - 2) + + var(--grid-gutter-width) * (var(--grid-column-count) - 2) + ); + margin-inline-end: 0; +} + +.grid-span-3.grid-end { + margin-inline-start: calc( + var(--grid-column-width) * (var(--grid-column-count) - 3) + + var(--grid-gutter-width) * (var(--grid-column-count) - 3) + ); + margin-inline-end: 0; +} + +.grid-span-1.grid-prose-end { + margin-inline-start: calc( + var(--grid-column-width) * (var(--grid-prose-column-count) - 1) + + var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1) + ); + margin-inline-end: 0; +} + +.grid-span-2.grid-prose-end { + margin-inline-start: calc( + var(--grid-column-width) * (var(--grid-prose-column-count) - 2) + + var(--grid-gutter-width) * (var(--grid-prose-column-count) - 2) + ); + margin-inline-end: 0; +} + +.grid-span-3.grid-prose-end { + margin-inline-start: calc( + var(--grid-column-width) * (var(--grid-prose-column-count) - 3) + + var(--grid-gutter-width) * (var(--grid-prose-column-count) - 3) + ); + margin-inline-end: 0; +} \ No newline at end of file diff --git a/scss/layout/index.md.scss b/scss/layout/index.md.scss new file mode 100644 index 0000000..c3bd183 --- /dev/null +++ b/scss/layout/index.md.scss @@ -0,0 +1,2 @@ +@use 'grid.md'; + diff --git a/scss/layout/index.scss b/scss/layout/index.scss new file mode 100644 index 0000000..776613a --- /dev/null +++ b/scss/layout/index.scss @@ -0,0 +1,3 @@ +@use 'grid'; +@use 'section-margins'; + diff --git a/scss/layout/index.xs.scss b/scss/layout/index.xs.scss new file mode 100644 index 0000000..6e239b4 --- /dev/null +++ b/scss/layout/index.xs.scss @@ -0,0 +1,2 @@ +@use 'grid.xs'; + diff --git a/scss/layout/section-margins.scss b/scss/layout/section-margins.scss new file mode 100644 index 0000000..a11073f --- /dev/null +++ b/scss/layout/section-margins.scss @@ -0,0 +1,14 @@ +:is(main, article) > :is(section, header):not(:is(section, header) :is(section, header)) { + padding-block-start: var(--margin-block-lg); + padding-block-end: var(--margin-block-md); +} + +footer { + padding-block-start: var(--margin-block-md); + padding-block-end: var(--margin-block-lg); +} + +nav { + padding-block-start: var(--margin-block-sm); + padding-block-end: var(--margin-block-md); +} \ No newline at end of file diff --git a/scss/modules/btn.scss b/scss/modules/btn.scss new file mode 100644 index 0000000..142463c --- /dev/null +++ b/scss/modules/btn.scss @@ -0,0 +1,38 @@ +.btn { + display: block; + box-sizing: border-box; + color: var(--text-color); + border: solid var(--relative-eighth-rem) var(--text-color); + font-weight: 500; + text-align: center; + margin-block-start: var(--margin-block-sm); + padding-inline: var(--padding-inline-md); + padding-block: var(--padding-block-sm); + background-color: transparent; + transition: + background-color 100ms, + font-weight 100ms, + transform 100ms; +} + +.btn:is(:hover, :focus, :focus-visible, :focus-within, :active) { + box-shadow: none; + outline: none; + color: var(--text-highlight-color); + border-color: var(--background-highlight-color); + background-color: var(--background-highlight-color); + font-weight: 700; + transition: + background-color 300ms, + font-weight 300ms, + transform 300ms; +} + +.btn:is(:focus, :focus-visible, :focus-within) { + border-color: var(--special-text-highlight-color); + border-style: dotted; +} + +.btn:active { + transform: scale(1.1, 1.1); +} \ No newline at end of file diff --git a/scss/modules/committee.md.scss b/scss/modules/committee.md.scss new file mode 100644 index 0000000..83ca252 --- /dev/null +++ b/scss/modules/committee.md.scss @@ -0,0 +1,16 @@ +.committee__member { + display: grid; + grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); + grid-template-rows: 1fr; + column-gap: var(--grid-gutter-width); +} + +.committee__member__img { + grid-column: 1 / 3; + margin-block: auto; + margin-inline: 0; +} + +.committee__member__text { + grid-column: 3 / calc(3 + var(--grid-prose-column-count) - 2); +} \ No newline at end of file diff --git a/scss/modules/committee.scss b/scss/modules/committee.scss new file mode 100644 index 0000000..8817fc1 --- /dev/null +++ b/scss/modules/committee.scss @@ -0,0 +1,9 @@ +.committee__member { + margin-block-start: var(--margin-block-sm); +} + +.committee__member__img { + margin-inline: calc(var(--grid-column-width) + var(--grid-gutter-width)); + width: calc(var(--grid-gutter-width) + 2 * var(--grid-column-width)); + border-radius: 50%; +} \ No newline at end of file diff --git a/scss/modules/committee.xl.scss b/scss/modules/committee.xl.scss new file mode 100644 index 0000000..94d8429 --- /dev/null +++ b/scss/modules/committee.xl.scss @@ -0,0 +1,15 @@ +.committee__member { + display: grid; + grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); + grid-template-rows: 1fr; + column-gap: var(--grid-gutter-width); +} + +.committee__member__img { + grid-column: 1 / 3; + margin-block: auto; +} + +.committee__member__text { + grid-column: 3 / min(11, calc(var(--grid-column-count) + 1)); +} \ No newline at end of file diff --git a/scss/modules/footer.scss b/scss/modules/footer.scss new file mode 100644 index 0000000..0d1a896 --- /dev/null +++ b/scss/modules/footer.scss @@ -0,0 +1,28 @@ +footer { + display: grid; + grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); + gap: var(--grid-gutter-width); + align-items: baseline; +} + +.footer__rss-button__label { + /* Hides the label from non-screen-readers */ + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.footer__rss-button__img { + min-width: 44px; + width: calc(8 * var(--relative-eighth-rem)); +} + +.footer__back-to-top { + grid-column: calc(var(--grid-column-count) - 2) / calc(var(--grid-column-count) + 1); +} \ No newline at end of file diff --git a/scss/modules/index.lg.scss b/scss/modules/index.lg.scss new file mode 100644 index 0000000..56a6dd8 --- /dev/null +++ b/scss/modules/index.lg.scss @@ -0,0 +1,2 @@ +@use 'nav.lg' as *; + diff --git a/scss/modules/index.md.scss b/scss/modules/index.md.scss new file mode 100644 index 0000000..b426b71 --- /dev/null +++ b/scss/modules/index.md.scss @@ -0,0 +1,4 @@ +@use 'committee.md' as *; +@use 'nav.md' as *; +@use 'schedule.md' as *; + diff --git a/scss/modules/index.scss b/scss/modules/index.scss new file mode 100644 index 0000000..6e67241 --- /dev/null +++ b/scss/modules/index.scss @@ -0,0 +1,11 @@ +@use 'btn' as *; +@use 'committee' as *; +@use 'footer' as *; +@use 'link' as *; +@use 'link-gallery' as *; +@use 'nav' as *; +@use 'news-index' as *; +@use 'product' as *; +@use 'schedule' as *; +@use 'skip-to-content' as *; + diff --git a/scss/modules/index.xl.scss b/scss/modules/index.xl.scss new file mode 100644 index 0000000..17e1d8c --- /dev/null +++ b/scss/modules/index.xl.scss @@ -0,0 +1,2 @@ +@use 'committee.xl' as *; + diff --git a/scss/modules/index.xs.scss b/scss/modules/index.xs.scss new file mode 100644 index 0000000..9dd43c5 --- /dev/null +++ b/scss/modules/index.xs.scss @@ -0,0 +1,3 @@ +@use 'link-gallery.xs' as *; +@use 'nav.xs' as *; + diff --git a/scss/modules/link-gallery.scss b/scss/modules/link-gallery.scss new file mode 100644 index 0000000..d9f9514 --- /dev/null +++ b/scss/modules/link-gallery.scss @@ -0,0 +1,41 @@ +.link-gallery { + display: grid; + grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); + gap: var(--grid-gutter-width); + padding-block: var(--margin-block-md); + --gallery-item-column-span: 1; + --gallery-row-image-height: 12rem; + --gallery-row-title-height: fit-content; + text-align: center; +} + +.link-gallery li { + grid-column: span var(--gallery-item-column-span); +} + +.link-gallery__container { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: var(--gallery-row-image-height) var(--gallery-row-title-height); + row-gap: var(--margin-block-sm); +} + +.link-gallery--furthsettins img { + box-sizing: border-box; + border-radius: 50%; + border: solid calc(2 * var(--relative-eighth-rem)) var(--text-color); +} + +.link-gallery img { + max-width: 100%; + max-height: 100%; + margin: auto; + height: auto; +} + +.link-gallery__title { + width: 100%; + height: min-content; + text-align: center; + margin-inline: var(--spacing-inline-xs); +} diff --git a/scss/modules/link-gallery.xs.scss b/scss/modules/link-gallery.xs.scss new file mode 100644 index 0000000..b2bf86c --- /dev/null +++ b/scss/modules/link-gallery.xs.scss @@ -0,0 +1,21 @@ +.link-gallery { + grid-auto-rows: calc( + var(--gallery-row-image-height) + + var(--margin-block-sm) + + var(--gallery-row-title-height) + ); + --gallery-item-column-span: 2; + --gallery-row-title-height: 11ex; + text-align: center; +} + +.link-gallery__title { + width: 100%; + height: 9.9ex; + height: 3lh; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} diff --git a/scss/modules/link.scss b/scss/modules/link.scss new file mode 100644 index 0000000..d225e9d --- /dev/null +++ b/scss/modules/link.scss @@ -0,0 +1,42 @@ +.link { + color: var(--special-text-color); + text-decoration-line: underline; + text-decoration-color: var(--special-text-color); + text-decoration-thickness: var(--relative-eighth-rem); + text-underline-offset: var(--relative-eighth-rem); + border: dotted transparent var(--relative-eighth-rem); + border-radius: calc(3 * var(--relative-eighth-rem)); + transition: + color 100ms, + text-decoration-color 100ms, + text-decoration-thickness 100ms, + text-underline-offset 100ms, + border-color 100ms, + text-shadow 100ms; +} + +.link:is(:hover, :focus, :focus-visible, :focus-within), +.group-hover:is(:hover, :focus, :focus-visible, :focus-within) .link { + text-decoration-color: currentColor; + text-decoration-thickness: calc(4 * var(--relative-eighth-rem)); + text-underline-offset: calc(3 * var(--relative-eighth-rem)); + text-shadow: + 0 1px 0 currentColor, + 1px 0 0 currentColor, + 1px 0 0 currentColor, + 0 1px 0 currentColor; + transition: + color 300ms, + text-decoration-color 300ms, + text-decoration-thickness 300ms, + text-underline-offset 300ms, + border-color 300ms, + text-shadow 300ms; +} + +.link:focus, .link:focus-visible { + box-shadow: none; + outline: none; + border-color: var(--special-text-color); +} + diff --git a/scss/modules/nav.lg.scss b/scss/modules/nav.lg.scss new file mode 100644 index 0000000..c47a685 --- /dev/null +++ b/scss/modules/nav.lg.scss @@ -0,0 +1,15 @@ +.nav__bottom-row { + flex-direction: row; + justify-content: space-between; + align-items: baseline; + padding-inline: max(10%, calc((100% - var(--max-width-all-content)) / 2)); + gap: var(--spacing-inline-xs); +} + +.nav__nav-links li:nth-child(4) { + grid-column: 8 / 10; +} + +.nav__nav-links li:nth-child(5) { + grid-column: 10 / 12; +} diff --git a/scss/modules/nav.md.scss b/scss/modules/nav.md.scss new file mode 100644 index 0000000..c3f4a18 --- /dev/null +++ b/scss/modules/nav.md.scss @@ -0,0 +1,11 @@ +.nav__nav-links li:nth-child(3) { + grid-column: 5 / 8; +} + +.nav__nav-links li:nth-child(4) { + grid-column: 1 / 3; +} + +.nav__nav-links li:nth-child(5) { + grid-column: 3 / 5; +} \ No newline at end of file diff --git a/scss/modules/nav.scss b/scss/modules/nav.scss new file mode 100644 index 0000000..44ec5c6 --- /dev/null +++ b/scss/modules/nav.scss @@ -0,0 +1,77 @@ +.nav > :not(:last-child) { + margin-block-end: var(--margin-block-sm); +} + +.nav__bottom-row { + display: flex; + flex-direction: column; +} + +.nav__nav-links { + display: grid; + grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); + column-gap: var(--grid-gutter-width); +} + +.nav__nav-links li { + margin: 0; +} + +.nav__logo { + font-family: var(--font-serif); + font-size: var(--font-size-5); + font-weight: 700; + + /* This gradient is based on * + * --color-primary-60 -> --color-secondary-60 * + * using Josh W Comeau's gradient generator */ + width: fit-content; + background-image: linear-gradient( + 45deg, + hsl(248deg 100% 75%) 0%, + hsl(227deg 100% 70%) 24%, + hsl(211deg 100% 58%) 40%, + hsl(205deg 100% 50%) 51%, + hsl(202deg 100% 49%) 60%, + hsl(200deg 100% 47%) 66%, + hsl(197deg 100% 44%) 70%, + hsl(194deg 100% 41%) 73%, + hsl(190deg 100% 38%) 76%, + hsl(186deg 100% 35%) 79%, + hsl(181deg 100% 33%) 84%, + hsl(177deg 100% 32%) 100% + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.nav__logo a { + text-decoration: none; + border: var(--relative-eighth-rem) dotted transparent; + transition: border-color 100ms; +} + +.nav__logo a:is(:focus, :focus-visible, :focus-within) { + box-shadow: none; + outline: none; + border-color: var(--special-text-color); + transition: border-color 300ms; +} + +.nav__breadcrumbs { + display: flex; + flex-wrap: wrap; +} + +.nav__breadcrumbs li { + list-style-type: none; + min-width: max-content; +} + +.nav__breadcrumbs li::before { + content: '/' +} + +.nav__switch-language-link { + text-align: right; +} diff --git a/scss/modules/nav.xs.scss b/scss/modules/nav.xs.scss new file mode 100644 index 0000000..708652c --- /dev/null +++ b/scss/modules/nav.xs.scss @@ -0,0 +1,19 @@ +.nav__nav-links li:nth-child(1) { + grid-column: 1 / 3; +} + +.nav__nav-links li:nth-child(2) { + grid-column: 3 / 5; +} + +.nav__nav-links li:nth-child(3) { + grid-column: 1 / 4; +} + +.nav__nav-links li:nth-child(4) { + grid-column: 1 / 3; +} + +.nav__nav-links li:nth-child(5) { + grid-column: 3 / 5; +} diff --git a/scss/modules/news-index.scss b/scss/modules/news-index.scss new file mode 100644 index 0000000..0050f70 --- /dev/null +++ b/scss/modules/news-index.scss @@ -0,0 +1,31 @@ +.news-index__item { + display: block; + box-sizing: border-box; + border: var(--relative-eighth-rem) solid var(--text-color); + transition: background 100ms; + padding-block: var(--margin-block-md); + padding-inline: var(--padding-inline-sm); + width: var(--width-prose); +} + +.news-index__item:not(:first-child) { + border-top-width: 0; +} + +.news-index__item:is(:hover, :focus, :focus-visible, :focus-within) { + outline: none; + box-shadow: none; + color: var(--text-highlight-color); + border-color: var(--background-highlight-color); + background: var(--background-highlight-color); + transition-duration: 300ms; +} + +.news-index__item:is(:hover, :focus, :focus-visible, :focus-within) .link { + color: var(--special-text-highlight-color); +} + +.news-index__item:is(:focus, :focus-visible, :focus-within) { + border-color: var(--special-text-highlight-color); + border-style: dotted; +} \ No newline at end of file diff --git a/scss/modules/product.scss b/scss/modules/product.scss new file mode 100644 index 0000000..32fa37f --- /dev/null +++ b/scss/modules/product.scss @@ -0,0 +1,20 @@ +.product__header-block { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + gap: var(--spacing-inline-sm); +} + +.product__action-block { + display: flex; + flex-direction: column; + margin-inline: auto; + width: fit-content; + gap: var(--margin-block-sm); +} + +.product__action-block img { + max-width: 12rem; + width: 100%; + height: auto; +} diff --git a/scss/modules/schedule.md.scss b/scss/modules/schedule.md.scss new file mode 100644 index 0000000..9ccfb0b --- /dev/null +++ b/scss/modules/schedule.md.scss @@ -0,0 +1,16 @@ +.schedule { + display: grid; + grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); + column-gap: var(--grid-gutter-width); +} + +.schedule dt { + grid-column: 1 / 3; + margin: 0; + text-align: end; +} + +.schedule dd { + grid-column: 3 / calc(1 + var(--grid-prose-column-count)); + text-align: start; +} diff --git a/scss/modules/schedule.scss b/scss/modules/schedule.scss new file mode 100644 index 0000000..140767c --- /dev/null +++ b/scss/modules/schedule.scss @@ -0,0 +1,13 @@ +.schedule:not(:first-child) { + margin-block-start: var(--margin-block-sm); +} + +.schedule dt { + font-weight: 700; + margin-block-start: var(--margin-block-sm); + text-align: center; +} + +.schedule dd { + text-align: center; +} diff --git a/scss/modules/skip-to-content.scss b/scss/modules/skip-to-content.scss new file mode 100644 index 0000000..a752b29 --- /dev/null +++ b/scss/modules/skip-to-content.scss @@ -0,0 +1,13 @@ +.skip-to-content { + position: absolute; + left: var(--grid-padding); + top: -10rem; + opacity: 0; + transition: top 300ms, opacity 300ms; +} + +.skip-to-content:is(:focus, :focus-visible, :focus-within) { + top: var(--margin-block-md); + opacity: 1; + transition: top 100ms; +} \ No newline at end of file diff --git a/scss/normalize.scss b/scss/normalize.scss new file mode 100644 index 0000000..0130a0b --- /dev/null +++ b/scss/normalize.scss @@ -0,0 +1,116 @@ +:root, +html, +body, +main, +article, +section, +header, +footer, +button, +ol, +ul, +li, +dl, +dt, +dd, +p, +h1, +h2, +h3, +h4 { + margin: 0; + padding: 0; +} + +html { + -webkit-text-size-adjust: 100%; +} + +main { + display: block; +} + +hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} + +pre { + font-family: monospace, monospace; + font-size: 1em; +} + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +b, +strong { + font-weight: bolder; +} + +small { + font-size: 80%; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +img { + border-style: none; +} + +button, [type='button'], [type='reset'], [type='submit'] { + font-family: inherit; + font-size: 100%; + line-height: 1.15; + text-transform: none; + overflow: visible; +} + +:is(button, [type='button'], [type='reset'], [type='submit'])::-moz-focus-inner { + border-style: none; + padding: 0; +} + +:is(button, [type='button'], [type='reset'], [type='submit']):-moz-focusring { + outline: 1px dotted ButtonText; +} + +details { + display: block; +} + +summary { + display: list-item; +} + +[hidden] { + display: none; +} + +a, :link, :visited { + background-color: transparent; + color: currentColor; + text-decoration: none; +} + +li { + list-style: none; +} diff --git a/scss/utils.scss b/scss/utils.scss new file mode 100644 index 0000000..a05a216 --- /dev/null +++ b/scss/utils.scss @@ -0,0 +1,7 @@ +.italic { + font-style: italic; +} + +.font-weight-lighter { + font-weight: lighter; +} diff --git a/scss/variables/colours.scss b/scss/variables/colours.scss new file mode 100644 index 0000000..65dd421 --- /dev/null +++ b/scss/variables/colours.scss @@ -0,0 +1,21 @@ +:root { + --text-color: var(--color-primary-98); + --text-highlight-color: var(--color-primary-10); + --background-color: var(--color-primary-10); + --background-highlight-color: var(--color-primary-90); + --special-text-color: var(--color-secondary-90); + --special-text-highlight-color: var(--color-secondary-10); +} + +:is(main, article) { + --text-color: var(--color-primary-10); + --text-highlight-color: var(--color-primary-90); + --background-color: var(--color-primary-98); + --background-highlight-color: var(--color-primary-10); + --special-text-color: var(--color-secondary-40); + --special-text-highlight-color: var(--color-secondary-90); +} + +:is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)) { + --background-color: var(--color-primary-95); +} diff --git a/scss/variables/index.lg.scss b/scss/variables/index.lg.scss new file mode 100644 index 0000000..598c04f --- /dev/null +++ b/scss/variables/index.lg.scss @@ -0,0 +1,2 @@ +@use 'spacing.lg' as *; + diff --git a/scss/variables/index.md.scss b/scss/variables/index.md.scss new file mode 100644 index 0000000..b2bf6ac --- /dev/null +++ b/scss/variables/index.md.scss @@ -0,0 +1,3 @@ +@use 'spacing.md' as *; +@use 'typography.md' as *; + diff --git a/scss/variables/index.scss b/scss/variables/index.scss new file mode 100644 index 0000000..57403d6 --- /dev/null +++ b/scss/variables/index.scss @@ -0,0 +1,5 @@ +@use 'colours' as *; +@use 'palette' as *; +@use 'spacing' as *; +@use 'typography' as *; + diff --git a/scss/variables/index.sm.scss b/scss/variables/index.sm.scss new file mode 100644 index 0000000..1ed077f --- /dev/null +++ b/scss/variables/index.sm.scss @@ -0,0 +1,2 @@ +@use 'spacing.sm' as *; + diff --git a/scss/variables/index.xl.scss b/scss/variables/index.xl.scss new file mode 100644 index 0000000..6e082d1 --- /dev/null +++ b/scss/variables/index.xl.scss @@ -0,0 +1,2 @@ +@use 'spacing.xl' as *; + diff --git a/scss/variables/index.xs.scss b/scss/variables/index.xs.scss new file mode 100644 index 0000000..fd7abc2 --- /dev/null +++ b/scss/variables/index.xs.scss @@ -0,0 +1,3 @@ +@use 'spacing.xs' as *; +@use 'typography.xs' as *; + diff --git a/scss/variables/index.xxl.scss b/scss/variables/index.xxl.scss new file mode 100644 index 0000000..8d40b0c --- /dev/null +++ b/scss/variables/index.xxl.scss @@ -0,0 +1,2 @@ +@use 'spacing.xxl' as *; + diff --git a/scss/variables/palette.scss b/scss/variables/palette.scss new file mode 100644 index 0000000..f40bb89 --- /dev/null +++ b/scss/variables/palette.scss @@ -0,0 +1,35 @@ +:root { + --color-primary-0: #000000; + --color-primary-10: #190064; + --color-primary-20: #2d009d; + --color-primary-25: #381aa8; + --color-primary-30: #442bb3; + --color-primary-35: #503abf; + --color-primary-40: #5c48cc; + --color-primary-50: #7663e7; + --color-primary-60: #907eff; + --color-primary-70: #ac9fff; + --color-primary-80: #c8bfff; + --color-primary-90: #e5deff; + --color-primary-95: #f4eeff; + --color-primary-98: #fdf8ff; + --color-primary-99: #fffbff; + --color-primary-100: #ffffff; + + --color-secondary-0: #000000; + --color-secondary-10: #00201e; + --color-secondary-20: #003733; + --color-secondary-25: #00433f; + --color-secondary-30: #00504b; + --color-secondary-35: #005d57; + --color-secondary-40: #006a64; + --color-secondary-50: #00867e; + --color-secondary-60: #00a299; + --color-secondary-70: #26bfb4; + --color-secondary-80: #50dbcf; + --color-secondary-90: #71f7ec; + --color-secondary-95: #b2fff6; + --color-secondary-98: #e4fffb; + --color-secondary-99: #f2fffc; + --color-secondary-100: #ffffff; +} \ No newline at end of file diff --git a/scss/variables/spacing.lg.scss b/scss/variables/spacing.lg.scss new file mode 100644 index 0000000..bc18bfd --- /dev/null +++ b/scss/variables/spacing.lg.scss @@ -0,0 +1,6 @@ +:root { + --grid-total-width: 64rem; + --grid-padding-relative-eighth-rem: 20; + --grid-column-count: 12; + --grid-prose-column-count: 8; +} \ No newline at end of file diff --git a/scss/variables/spacing.md.scss b/scss/variables/spacing.md.scss new file mode 100644 index 0000000..0028e8a --- /dev/null +++ b/scss/variables/spacing.md.scss @@ -0,0 +1,6 @@ +:root { + --grid-total-width: 48rem; + --grid-padding-relative-eighth-rem: 16; + --grid-column-count: 8; + --grid-prose-column-count: 8; +} \ No newline at end of file diff --git a/scss/variables/spacing.scss b/scss/variables/spacing.scss new file mode 100644 index 0000000..a4d1d91 --- /dev/null +++ b/scss/variables/spacing.scss @@ -0,0 +1,47 @@ +:root { + --margin-inline-md: calc(2 * var(--relative-eighth-rem)); + --margin-block-lg: calc(16 * var(--relative-eighth-rem)); + --margin-block-md: calc(10 * var(--relative-eighth-rem)); + --margin-block-sm: calc(5 * var(--relative-eighth-rem)); + + --padding-inline-lg: calc(4 * var(--relative-eighth-rem)); + --padding-inline-md: calc(2 * var(--relative-eighth-rem)); + --padding-inline-sm: calc(1 * var(--relative-eighth-rem)); + --padding-block-lg: calc(12 * var(--relative-eighth-rem)); + --padding-block-md: calc(8 * var(--relative-eighth-rem)); + --padding-block-sm: calc(5 * var(--relative-eighth-rem)); + + --grid-padding: calc(var(--grid-padding-relative-eighth-rem) * var(--relative-eighth-rem)); + --grid-column-width: calc(var(--grid-column-width-relative-eighth-rem) * var(--relative-eighth-rem)); + --grid-gutter-width: calc(var(--grid-gutter-width-relative-eighth-rem) * var(--relative-eighth-rem)); + + --grid-total-relative-eighth-rem-width: calc( + var(--grid-padding-relative-eighth-rem) * 2 + + var(--grid-column-width-relative-eighth-rem) * var(--grid-column-count) + + var(--grid-gutter-width-relative-eighth-rem) * (var(--grid-column-count) - 1) + ); + --relative-eighth-rem: calc( + var(--grid-total-width) / var(--grid-total-relative-eighth-rem-width) + ); + --width-prose: calc( + var(--grid-column-width) * var(--grid-prose-column-count) + + var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1) + ); + + --grid-column-width-relative-eighth-rem: 32; + --grid-gutter-width-relative-eighth-rem: 4; + + /*********************************************************** + * Generally, we will use columns to keep things laid out * + * nicely. However, on screens narrower than xs, this gets * + * pretty much impossible. So for those screens, we use a * + * single-column layout taking up 100vw. In effect, this * + * is just default CSS layout plus a wee bit padding. From * + * xs widewards, we use multiple columns on a fixed width. * + ***********************************************************/ + + --grid-total-width: 100vw; + --grid-padding-relative-eighth-rem: 8; + --grid-column-count: 1; + --grid-prose-column-count: 1; +} diff --git a/scss/variables/spacing.sm.scss b/scss/variables/spacing.sm.scss new file mode 100644 index 0000000..7cdf26f --- /dev/null +++ b/scss/variables/spacing.sm.scss @@ -0,0 +1,4 @@ +:root { + --grid-total-width: 30rem; + --grid-padding-relative-eighth-rem: 12; +} diff --git a/scss/variables/spacing.xl.scss b/scss/variables/spacing.xl.scss new file mode 100644 index 0000000..fc8b1f3 --- /dev/null +++ b/scss/variables/spacing.xl.scss @@ -0,0 +1,10 @@ +:root { + --grid-total-width: 80rem; + --grid-padding-relative-eighth-rem: 26; + --grid-column-count: 12; + --grid-prose-column-count: 8; + --width-prose: calc( + var(--grid-column-width) * min(8, var(--grid-column-count)) + + var(--grid-gutter-width) * min(7, (var(--grid-column-count) - 1)) + ); +} \ No newline at end of file diff --git a/scss/variables/spacing.xs.scss b/scss/variables/spacing.xs.scss new file mode 100644 index 0000000..fb7c01a --- /dev/null +++ b/scss/variables/spacing.xs.scss @@ -0,0 +1,6 @@ +:root { + --grid-total-width: 15rem; + --grid-padding-relative-eighth-rem: 8; + --grid-column-count: 4; + --grid-prose-column-count: 4; +} diff --git a/scss/variables/spacing.xxl.scss b/scss/variables/spacing.xxl.scss new file mode 100644 index 0000000..17d2f66 --- /dev/null +++ b/scss/variables/spacing.xxl.scss @@ -0,0 +1,6 @@ +:root { + --grid-total-width: 100rem; + --grid-padding-relative-eighth-rem: 32; + --grid-column-count: 12; + --grid-prose-column-count: 8; +} \ No newline at end of file diff --git a/scss/variables/typography.md.scss b/scss/variables/typography.md.scss new file mode 100644 index 0000000..2c36d1d --- /dev/null +++ b/scss/variables/typography.md.scss @@ -0,0 +1,9 @@ +:root { + --font-size-0: calc(7 * var(--relative-eighth-rem)); + --font-size-1: calc(9 * var(--relative-eighth-rem)); + --font-size-2: calc(12 * var(--relative-eighth-rem)); + --font-size-3: calc(16 * var(--relative-eighth-rem)); + --font-size-4: calc(20 * var(--relative-eighth-rem)); + --font-size-5: calc(26 * var(--relative-eighth-rem)); + --font-size-6: calc(32 * var(--relative-eighth-rem)); +} \ No newline at end of file diff --git a/scss/variables/typography.scss b/scss/variables/typography.scss new file mode 100644 index 0000000..f8515fd --- /dev/null +++ b/scss/variables/typography.scss @@ -0,0 +1,42 @@ +:root { + --font-size-0: calc(8 * var(--relative-eighth-rem)); + --font-size-1: calc(8 * var(--relative-eighth-rem)); + --font-size-2: calc(8 * var(--relative-eighth-rem)); + --font-size-3: calc(8 * var(--relative-eighth-rem)); + --font-size-4: calc(8 * var(--relative-eighth-rem)); + --font-size-5: calc(8 * var(--relative-eighth-rem)); + --font-size-6: calc(8 * var(--relative-eighth-rem)); + + --font-serif: + Alegreya, + -apple-system-ui-serif, + Iowan Old Style, + Apple Garamond, + Baskerville, + Sitka, "Sitka Display", "Sitka Heading", "Sitka Text", + Times New Roman, + Droid Serif, + Times, + Source Serif Pro, + serif, + Apple Color Emoji, + Segoe UI Emoji, + Segoe UI Symbol; + + --font-sans-serif: + 'Alegreya Sans', + Lato, + -apple-system, + BlinkMacSystemFont, + avenir next, + avenir, + segoe ui, + helvetica neue, + helvetica, + Cantarell, + Ubuntu, + roboto, + noto, + arial, + sans-serif +} \ No newline at end of file diff --git a/scss/variables/typography.xs.scss b/scss/variables/typography.xs.scss new file mode 100644 index 0000000..6375aad --- /dev/null +++ b/scss/variables/typography.xs.scss @@ -0,0 +1,9 @@ +:root { + --font-size-0: calc(6 * var(--relative-eighth-rem)); + --font-size-1: calc(8 * var(--relative-eighth-rem)); + --font-size-2: calc(11 * var(--relative-eighth-rem)); + --font-size-3: calc(14 * var(--relative-eighth-rem)); + --font-size-4: calc(18 * var(--relative-eighth-rem)); + --font-size-5: calc(23 * var(--relative-eighth-rem)); + --font-size-6: calc(28 * var(--relative-eighth-rem)); +} \ No newline at end of file diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 24d0198..a5315be 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -31,8 +31,13 @@ function qualifiedLocalisedPath(newLocale: Locale) { - - + + + + + + +