From 02897bacd1927f7940a6cf67582e28935b149809 Mon Sep 17 00:00:00 2001 From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com> Date: Mon, 16 Oct 2023 21:43:41 +0100 Subject: Adds images for Lallans 102 --- src/images/lallans/issue102-192w.webp | Bin 0 -> 14884 bytes src/images/lallans/issue102-274w.webp | Bin 0 -> 26694 bytes src/images/lallans/issue102.webp | Bin 0 -> 132290 bytes 3 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/images/lallans/issue102-192w.webp create mode 100644 src/images/lallans/issue102-274w.webp create mode 100644 src/images/lallans/issue102.webp diff --git a/src/images/lallans/issue102-192w.webp b/src/images/lallans/issue102-192w.webp new file mode 100644 index 0000000..22e45b3 Binary files /dev/null and b/src/images/lallans/issue102-192w.webp differ diff --git a/src/images/lallans/issue102-274w.webp b/src/images/lallans/issue102-274w.webp new file mode 100644 index 0000000..a158271 Binary files /dev/null and b/src/images/lallans/issue102-274w.webp differ diff --git a/src/images/lallans/issue102.webp b/src/images/lallans/issue102.webp new file mode 100644 index 0000000..11b5861 Binary files /dev/null and b/src/images/lallans/issue102.webp differ -- cgit v1.2.3 From 8b8d1c908fe39bc1fea0c23374783803bc862c9b Mon Sep 17 00:00:00 2001 From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com> Date: Mon, 16 Oct 2023 21:54:11 +0100 Subject: Adds most 102 data... except contributors... --- src/data/lallans/issue102.ts | 20 ++++++++++++++++++++ src/types/LallansIssueNumber.d.ts | 3 ++- 2 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 src/data/lallans/issue102.ts diff --git a/src/data/lallans/issue102.ts b/src/data/lallans/issue102.ts new file mode 100644 index 0000000..208d464 --- /dev/null +++ b/src/data/lallans/issue102.ts @@ -0,0 +1,20 @@ +import img192w from '$images/lallans/issue102-192w.webp'; +import img274w from '$images/lallans/issue102-274w.webp'; +import type LallansIssue from '$types/LallansIssue'; + +const issue: LallansIssue = { + issueNumber: 102, + img: { + width192: img192w, + width274: img274w, + }, + issueName: 'Beltane/Lammas 2023', + price: '10.00', + uploadDate: '2023-10-16', + description: { + 'en-GB': 'The hundred-and-second issue of the Lallans magazine.', + sco: 'The hunner-an-saicont issue o the Lallans magazine.', + }, +}; + +export default issue; diff --git a/src/types/LallansIssueNumber.d.ts b/src/types/LallansIssueNumber.d.ts index 29f07cc..52dc35a 100644 --- a/src/types/LallansIssueNumber.d.ts +++ b/src/types/LallansIssueNumber.d.ts @@ -68,6 +68,7 @@ type LallansIssueNumber = | 98 | 99 | 100 - | 101; + | 101 + | 102; export default LallansIssueNumber; -- cgit v1.2.3 From 49bfa66818dd0f5c0f3f6c2bd6edf71025d7bfd9 Mon Sep 17 00:00:00 2001 From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com> Date: Wed, 18 Oct 2023 20:23:50 +0100 Subject: Adds contributors --- src/data/lallans/issue102.ts | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/src/data/lallans/issue102.ts b/src/data/lallans/issue102.ts index 208d464..1ae14e5 100644 --- a/src/data/lallans/issue102.ts +++ b/src/data/lallans/issue102.ts @@ -15,6 +15,44 @@ const issue: LallansIssue = { 'en-GB': 'The hundred-and-second issue of the Lallans magazine.', sco: 'The hunner-an-saicont issue o the Lallans magazine.', }, + contributors: [ + 'Finola Scott', + 'Derrick McClure', + 'Jamie Purves', + 'Lord Braxfield', + 'Frieda Morrison', + 'Irene Howat', + 'David Bleiman', + 'Marcus Keaveney', + 'WS Milne', + 'Alistair McLeish', + 'Craig Aitchison', + 'Ian Nimmo White', + 'Maggie Elliott', + 'Jim Aitken', + 'Gordon D Moodie', + 'Walter Perrie', + 'Kevin Connelly', + 'Frances Robson', + 'Jim Roddie', + 'Fred Freeman', + 'George T Watt', + 'Hamish Scott', + 'Rose MacGregor', + 'Nicole Le Marie', + 'Jacqueline Tweddle', + 'Sheena Blackhall', + 'Elaine Morton', + 'Alasdair Allan', + 'Pete Fortune', + 'Tony Beekman', + 'Ewan MacColl', + 'Odveig Klyve', + 'Jock Stein', + 'Michael Swan', + 'Marion Angus', + 'Brendan McCluskey', + ], }; export default issue; -- cgit v1.2.3 From fc192f7272fcbc13b4474705a28085aff3c8030d Mon Sep 17 00:00:00 2001 From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com> Date: Wed, 18 Oct 2023 20:24:19 +0100 Subject: Adds issue to Lallans data index --- src/data/lallans/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/data/lallans/index.ts b/src/data/lallans/index.ts index 434ff1c..db443d2 100644 --- a/src/data/lallans/index.ts +++ b/src/data/lallans/index.ts @@ -77,6 +77,7 @@ export const getLallansIssue: LallansIssueGetterTable = { 99: async () => (await import('./issue99')).default, 100: async () => (await import('./issue100')).default, 101: async () => (await import('./issue101')).default, + 102: async () => (await import('./issue102')).default, }; export type LallansIssueGetterTable = { [key in LallansIssueNumber]: () => Promise }; -- cgit v1.2.3 From 6b25d3ec7cae279996cc09f5cc31f69443919e4f Mon Sep 17 00:00:00 2001 From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com> Date: Wed, 18 Oct 2023 20:34:18 +0100 Subject: Adds instructions about adding a Lallans issue to the README --- README.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/README.md b/README.md index 8e97aa0..808e524 100644 --- a/README.md +++ b/README.md @@ -141,3 +141,17 @@ and the base branch of `dev`. Once you've done that, it's down to an owner of the upstream repository to approve your Pull Request. Once they've done that, your new news article will appear on the website. + +## Adding an issue of Lallans + +1. Add the issue number to `src/types/LallansIssueNumber.d.ts`. +2. Add the original issue cover photo as `src/images/issueXYZ.jpg`, where `XYZ` + is the issue number. Most of the examples are `.jpg`, but the file type isn't important. +3. Make copies of the cover image that are scaled to 192 and 274 pixels wide. + Name them `issueXYZ-192w.jpg` and `issueXYZ-274w.jpg` respectively. +4. Copy one of the existing Lallans issues in `src/data/lallans` and name the + copy `issueXYZ.ts`. +5. Edit the file you just made with the new issue's information, including the + locations of the correctly scaled cover images that you just made. +6. Import that data file into the Lallans data index file, `src/data/lallans/index.ts`. + -- cgit v1.2.3 From c112e0b2cbfc6756e0c93abdce8eee0e5b17373c Mon Sep 17 00:00:00 2001 From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com> Date: Wed, 18 Oct 2023 20:37:11 +0100 Subject: Adds sanity check instructions --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 808e524..fdbb2fc 100644 --- a/README.md +++ b/README.md @@ -154,4 +154,7 @@ the website. 5. Edit the file you just made with the new issue's information, including the locations of the correctly scaled cover images that you just made. 6. Import that data file into the Lallans data index file, `src/data/lallans/index.ts`. +7. Check that everything's working: the issue should appear at the top on the + Lallans page, `/furthsettins/lallans`, and the issue information should appear + at `/furthsettins/lallans/XYZ`. Check both the English and Scots versions. -- cgit v1.2.3 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) { - - + + + + + + + Date: Fri, 20 Oct 2023 13:20:16 +0100 Subject: Nests link-gallery bits and pieces --- scss/modules/link-gallery.scss | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/scss/modules/link-gallery.scss b/scss/modules/link-gallery.scss index d9f9514..2c2cdb7 100644 --- a/scss/modules/link-gallery.scss +++ b/scss/modules/link-gallery.scss @@ -7,10 +7,17 @@ --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); + li { + grid-column: span var(--gallery-item-column-span); + } + + img { + max-width: 100%; + max-height: 100%; + margin: auto; + height: auto; + } } .link-gallery__container { @@ -26,13 +33,6 @@ 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; -- cgit v1.2.3 From 644f10a3284e034ed5cd2e32f276efd7aff56723 Mon Sep 17 00:00:00 2001 From: Joe Carstairs Date: Fri, 20 Oct 2023 13:20:56 +0100 Subject: Link gallery images are object-fit:contain --- scss/modules/link-gallery.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/modules/link-gallery.scss b/scss/modules/link-gallery.scss index 2c2cdb7..c3788dc 100644 --- a/scss/modules/link-gallery.scss +++ b/scss/modules/link-gallery.scss @@ -16,7 +16,7 @@ max-width: 100%; max-height: 100%; margin: auto; - height: auto; + object-fit: contain; } } -- cgit v1.2.3