From 0cb6960f0c65c0d791ccdee2f5bc2e2b910cfb76 Mon Sep 17 00:00:00 2001 From: Joe Carstairs <118172583+jcarstairs-scottlogic@users.noreply.github.com> Date: Fri, 19 Jan 2024 09:16:42 +0000 Subject: Uses SCSS partials (#64) --- scss/base/_dl.scss | 5 ++ scss/base/_index.scss | 4 ++ scss/base/_list.scss | 4 ++ scss/base/_theme.scss | 13 +++++ scss/base/_typography.scss | 72 +++++++++++++++++++++++ scss/base/dl.scss | 5 -- scss/base/index.scss | 4 -- scss/base/list.scss | 4 -- scss/base/theme.scss | 13 ----- scss/base/typography.scss | 72 ----------------------- scss/custom-properties/_colours.scss | 23 ++++++++ scss/custom-properties/_index.lg.scss | 3 + scss/custom-properties/_index.md.scss | 3 + scss/custom-properties/_index.scss | 3 + scss/custom-properties/_index.sm.scss | 3 + scss/custom-properties/_index.xl.scss | 3 + scss/custom-properties/_index.xs.scss | 3 + scss/custom-properties/_index.xxl.scss | 3 + scss/custom-properties/colours.scss | 23 -------- scss/custom-properties/index.lg.scss | 3 - scss/custom-properties/index.md.scss | 3 - scss/custom-properties/index.scss | 3 - scss/custom-properties/index.sm.scss | 3 - scss/custom-properties/index.xl.scss | 3 - scss/custom-properties/index.xs.scss | 3 - scss/custom-properties/index.xxl.scss | 3 - scss/custom-properties/spacing/_initial.scss | 14 +++++ scss/custom-properties/spacing/_lg.scss | 7 +++ scss/custom-properties/spacing/_md.scss | 7 +++ scss/custom-properties/spacing/_sm.scss | 7 +++ scss/custom-properties/spacing/_xl.scss | 7 +++ scss/custom-properties/spacing/_xs.scss | 7 +++ scss/custom-properties/spacing/_xxl.scss | 7 +++ scss/custom-properties/spacing/initial.scss | 14 ----- scss/custom-properties/spacing/lg.scss | 7 --- scss/custom-properties/spacing/md.scss | 7 --- scss/custom-properties/spacing/sm.scss | 7 --- scss/custom-properties/spacing/xl.scss | 7 --- scss/custom-properties/spacing/xs.scss | 7 --- scss/custom-properties/spacing/xxl.scss | 7 --- scss/custom-properties/typography/_initial.scss | 41 +++++++++++++ scss/custom-properties/typography/_lg.scss | 9 +++ scss/custom-properties/typography/_md.scss | 9 +++ scss/custom-properties/typography/_sm.scss | 9 +++ scss/custom-properties/typography/_xl.scss | 9 +++ scss/custom-properties/typography/_xs.scss | 9 +++ scss/custom-properties/typography/_xxl.scss | 9 +++ scss/custom-properties/typography/initial.scss | 41 ------------- scss/custom-properties/typography/lg.scss | 9 --- scss/custom-properties/typography/md.scss | 9 --- scss/custom-properties/typography/sm.scss | 9 --- scss/custom-properties/typography/xl.scss | 9 --- scss/custom-properties/typography/xs.scss | 9 --- scss/custom-properties/typography/xxl.scss | 9 --- 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 | 13 +++++ 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 | 13 ----- scss/modules/_btn.scss | 40 +++++++++++++ scss/modules/_committee.md.scss | 16 +++++ scss/modules/_committee.scss | 37 ++++++++++++ scss/modules/_committee.sm.scss | 5 ++ scss/modules/_committee.xl.scss | 15 +++++ scss/modules/_committee.xs.scss | 5 ++ scss/modules/_footer.scss | 28 +++++++++ scss/modules/_footer.xs.scss | 7 +++ scss/modules/_index.lg.scss | 2 + scss/modules/_index.md.scss | 4 ++ scss/modules/_index.scss | 11 ++++ scss/modules/_index.sm.scss | 3 + scss/modules/_index.xl.scss | 2 + scss/modules/_index.xs.scss | 5 ++ scss/modules/_link-gallery.scss | 42 +++++++++++++ scss/modules/_link-gallery.xs.scss | 21 +++++++ scss/modules/_link.scss | 27 +++++++++ scss/modules/_nav.lg.scss | 15 +++++ scss/modules/_nav.md.scss | 26 +++++++++ scss/modules/_nav.scss | 78 +++++++++++++++++++++++++ scss/modules/_nav.sm.scss | 38 ++++++++++++ scss/modules/_nav.xs.scss | 19 ++++++ scss/modules/_news-index.scss | 36 ++++++++++++ scss/modules/_product.scss | 31 ++++++++++ scss/modules/_schedule.md.scss | 16 +++++ scss/modules/_schedule.scss | 14 +++++ scss/modules/_skip-to-content.scss | 13 +++++ scss/modules/btn.scss | 40 ------------- scss/modules/committee.md.scss | 16 ----- scss/modules/committee.scss | 37 ------------ scss/modules/committee.sm.scss | 5 -- scss/modules/committee.xl.scss | 15 ----- scss/modules/committee.xs.scss | 5 -- scss/modules/footer.scss | 28 --------- scss/modules/footer.xs.scss | 7 --- scss/modules/index.lg.scss | 2 - scss/modules/index.md.scss | 4 -- scss/modules/index.scss | 11 ---- scss/modules/index.sm.scss | 3 - scss/modules/index.xl.scss | 2 - scss/modules/index.xs.scss | 5 -- scss/modules/link-gallery.scss | 42 ------------- scss/modules/link-gallery.xs.scss | 21 ------- scss/modules/link.scss | 27 --------- scss/modules/nav.lg.scss | 15 ----- scss/modules/nav.md.scss | 26 --------- scss/modules/nav.scss | 78 ------------------------- scss/modules/nav.sm.scss | 38 ------------ scss/modules/nav.xs.scss | 19 ------ scss/modules/news-index.scss | 36 ------------ scss/modules/product.scss | 31 ---------- scss/modules/schedule.md.scss | 16 ----- scss/modules/schedule.scss | 14 ----- scss/modules/skip-to-content.scss | 13 ----- 122 files changed, 962 insertions(+), 962 deletions(-) create mode 100644 scss/base/_dl.scss 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 delete mode 100644 scss/base/dl.scss delete mode 100644 scss/base/index.scss delete mode 100644 scss/base/list.scss delete mode 100644 scss/base/theme.scss delete mode 100644 scss/base/typography.scss create mode 100644 scss/custom-properties/_colours.scss create mode 100644 scss/custom-properties/_index.lg.scss create mode 100644 scss/custom-properties/_index.md.scss create mode 100644 scss/custom-properties/_index.scss create mode 100644 scss/custom-properties/_index.sm.scss create mode 100644 scss/custom-properties/_index.xl.scss create mode 100644 scss/custom-properties/_index.xs.scss create mode 100644 scss/custom-properties/_index.xxl.scss delete mode 100644 scss/custom-properties/colours.scss delete mode 100644 scss/custom-properties/index.lg.scss delete mode 100644 scss/custom-properties/index.md.scss delete mode 100644 scss/custom-properties/index.scss delete mode 100644 scss/custom-properties/index.sm.scss delete mode 100644 scss/custom-properties/index.xl.scss delete mode 100644 scss/custom-properties/index.xs.scss delete mode 100644 scss/custom-properties/index.xxl.scss create mode 100644 scss/custom-properties/spacing/_initial.scss create mode 100644 scss/custom-properties/spacing/_lg.scss create mode 100644 scss/custom-properties/spacing/_md.scss create mode 100644 scss/custom-properties/spacing/_sm.scss create mode 100644 scss/custom-properties/spacing/_xl.scss create mode 100644 scss/custom-properties/spacing/_xs.scss create mode 100644 scss/custom-properties/spacing/_xxl.scss delete mode 100644 scss/custom-properties/spacing/initial.scss delete mode 100644 scss/custom-properties/spacing/lg.scss delete mode 100644 scss/custom-properties/spacing/md.scss delete mode 100644 scss/custom-properties/spacing/sm.scss delete mode 100644 scss/custom-properties/spacing/xl.scss delete mode 100644 scss/custom-properties/spacing/xs.scss delete mode 100644 scss/custom-properties/spacing/xxl.scss create mode 100644 scss/custom-properties/typography/_initial.scss create mode 100644 scss/custom-properties/typography/_lg.scss create mode 100644 scss/custom-properties/typography/_md.scss create mode 100644 scss/custom-properties/typography/_sm.scss create mode 100644 scss/custom-properties/typography/_xl.scss create mode 100644 scss/custom-properties/typography/_xs.scss create mode 100644 scss/custom-properties/typography/_xxl.scss delete mode 100644 scss/custom-properties/typography/initial.scss delete mode 100644 scss/custom-properties/typography/lg.scss delete mode 100644 scss/custom-properties/typography/md.scss delete mode 100644 scss/custom-properties/typography/sm.scss delete mode 100644 scss/custom-properties/typography/xl.scss delete mode 100644 scss/custom-properties/typography/xs.scss delete mode 100644 scss/custom-properties/typography/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 delete mode 100644 scss/layout/grid.md.scss delete mode 100644 scss/layout/grid.scss delete mode 100644 scss/layout/grid.xs.scss delete mode 100644 scss/layout/index.md.scss delete mode 100644 scss/layout/index.scss delete mode 100644 scss/layout/index.xs.scss delete 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.sm.scss create mode 100644 scss/modules/_committee.xl.scss create mode 100644 scss/modules/_committee.xs.scss create mode 100644 scss/modules/_footer.scss create mode 100644 scss/modules/_footer.xs.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.sm.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.sm.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 delete mode 100644 scss/modules/btn.scss delete mode 100644 scss/modules/committee.md.scss delete mode 100644 scss/modules/committee.scss delete mode 100644 scss/modules/committee.sm.scss delete mode 100644 scss/modules/committee.xl.scss delete mode 100644 scss/modules/committee.xs.scss delete mode 100644 scss/modules/footer.scss delete mode 100644 scss/modules/footer.xs.scss delete mode 100644 scss/modules/index.lg.scss delete mode 100644 scss/modules/index.md.scss delete mode 100644 scss/modules/index.scss delete mode 100644 scss/modules/index.sm.scss delete mode 100644 scss/modules/index.xl.scss delete mode 100644 scss/modules/index.xs.scss delete mode 100644 scss/modules/link-gallery.scss delete mode 100644 scss/modules/link-gallery.xs.scss delete mode 100644 scss/modules/link.scss delete mode 100644 scss/modules/nav.lg.scss delete mode 100644 scss/modules/nav.md.scss delete mode 100644 scss/modules/nav.scss delete mode 100644 scss/modules/nav.sm.scss delete mode 100644 scss/modules/nav.xs.scss delete mode 100644 scss/modules/news-index.scss delete mode 100644 scss/modules/product.scss delete mode 100644 scss/modules/schedule.md.scss delete mode 100644 scss/modules/schedule.scss delete mode 100644 scss/modules/skip-to-content.scss diff --git a/scss/base/_dl.scss b/scss/base/_dl.scss new file mode 100644 index 0000000..95cc836 --- /dev/null +++ b/scss/base/_dl.scss @@ -0,0 +1,5 @@ +dt { + font-weight: 700; + text-decoration: underline; + margin-top: 1rem; +} \ No newline at end of file diff --git a/scss/base/_index.scss b/scss/base/_index.scss new file mode 100644 index 0000000..f338772 --- /dev/null +++ b/scss/base/_index.scss @@ -0,0 +1,4 @@ +@use 'dl'; +@use 'list'; +@use 'theme'; +@use 'typography'; 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..4dd0afb --- /dev/null +++ b/scss/base/_typography.scss @@ -0,0 +1,72 @@ +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; + hyphens: auto; +} + +h1 { + font-size: var(--font-size-5); +} + +h1:not(:first-child) { + margin-block-start: var(--spacing-block-lg); +} + +h2 { + font-size: var(--font-size-4); +} + +h2:not(:first-child) { + margin-block-start: var(--spacing-block-lg); +} + +h3 { + font-size: var(--font-size-3); +} + +h3:not(:first-child) { + margin-block-start: var(--spacing-block-md); +} + +h4 { + font-size: var(--font-size-2); +} + +h4:not(:first-child) { + margin-block-start: var(--spacing-block-sm); +} + +h1, +h2, +h3, +h4 { + font-family: var(--font-serif); + font-weight: 700; + line-height: 1.15; + text-wrap: balance; +} + +.title { + font-family: var(--font-serif); + font-size: var(--font-size-6); + font-weight: 700; + margin-block-start: var(--spacing-block-sm); + text-wrap: balance; +} + +.title--small { + font-size: var(--font-size-2); + margin-block-start: 0; +} + +:is(p, ol, ul):not(:first-child) { + margin-block-start: var(--spacing-block-sm); +} + +:is(p, h1, h2, h3, h4) { + max-width: var(--width-prose); +} diff --git a/scss/base/dl.scss b/scss/base/dl.scss deleted file mode 100644 index 95cc836..0000000 --- a/scss/base/dl.scss +++ /dev/null @@ -1,5 +0,0 @@ -dt { - font-weight: 700; - text-decoration: underline; - margin-top: 1rem; -} \ No newline at end of file diff --git a/scss/base/index.scss b/scss/base/index.scss deleted file mode 100644 index f338772..0000000 --- a/scss/base/index.scss +++ /dev/null @@ -1,4 +0,0 @@ -@use 'dl'; -@use 'list'; -@use 'theme'; -@use 'typography'; diff --git a/scss/base/list.scss b/scss/base/list.scss deleted file mode 100644 index 2fd402b..0000000 --- a/scss/base/list.scss +++ /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/scss/base/theme.scss b/scss/base/theme.scss deleted file mode 100644 index f5d178c..0000000 --- a/scss/base/theme.scss +++ /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/scss/base/typography.scss b/scss/base/typography.scss deleted file mode 100644 index 4dd0afb..0000000 --- a/scss/base/typography.scss +++ /dev/null @@ -1,72 +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; - hyphens: auto; -} - -h1 { - font-size: var(--font-size-5); -} - -h1:not(:first-child) { - margin-block-start: var(--spacing-block-lg); -} - -h2 { - font-size: var(--font-size-4); -} - -h2:not(:first-child) { - margin-block-start: var(--spacing-block-lg); -} - -h3 { - font-size: var(--font-size-3); -} - -h3:not(:first-child) { - margin-block-start: var(--spacing-block-md); -} - -h4 { - font-size: var(--font-size-2); -} - -h4:not(:first-child) { - margin-block-start: var(--spacing-block-sm); -} - -h1, -h2, -h3, -h4 { - font-family: var(--font-serif); - font-weight: 700; - line-height: 1.15; - text-wrap: balance; -} - -.title { - font-family: var(--font-serif); - font-size: var(--font-size-6); - font-weight: 700; - margin-block-start: var(--spacing-block-sm); - text-wrap: balance; -} - -.title--small { - font-size: var(--font-size-2); - margin-block-start: 0; -} - -:is(p, ol, ul):not(:first-child) { - margin-block-start: var(--spacing-block-sm); -} - -:is(p, h1, h2, h3, h4) { - max-width: var(--width-prose); -} diff --git a/scss/custom-properties/_colours.scss b/scss/custom-properties/_colours.scss new file mode 100644 index 0000000..dadb50e --- /dev/null +++ b/scss/custom-properties/_colours.scss @@ -0,0 +1,23 @@ +@use '../values/colours' as colours; + +:root { + --text-color: #{colours.$primary-98}; + --text-highlight-color: #{colours.$primary-10}; + --background-color: #{colours.$primary-10}; + --background-highlight-color: #{colours.$primary-90}; + --special-text-color: #{colours.$secondary-90}; + --special-text-highlight-color: #{colours.$secondary-10}; +} + +:is(main, article) { + --text-color: #{colours.$primary-10}; + --text-highlight-color: #{colours.$primary-90}; + --background-color: #{colours.$primary-98}; + --background-highlight-color: #{colours.$primary-10}; + --special-text-color: #{colours.$secondary-40}; + --special-text-highlight-color: #{colours.$secondary-90}; +} + +:is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)) { + --background-color: #{colours.$primary-95}; +} diff --git a/scss/custom-properties/_index.lg.scss b/scss/custom-properties/_index.lg.scss new file mode 100644 index 0000000..2a36586 --- /dev/null +++ b/scss/custom-properties/_index.lg.scss @@ -0,0 +1,3 @@ +@use 'spacing/lg' as *; +@use 'typography/lg' as *; + diff --git a/scss/custom-properties/_index.md.scss b/scss/custom-properties/_index.md.scss new file mode 100644 index 0000000..2367952 --- /dev/null +++ b/scss/custom-properties/_index.md.scss @@ -0,0 +1,3 @@ +@use 'spacing/md' as *; +@use 'typography/md' as *; + diff --git a/scss/custom-properties/_index.scss b/scss/custom-properties/_index.scss new file mode 100644 index 0000000..e7279b6 --- /dev/null +++ b/scss/custom-properties/_index.scss @@ -0,0 +1,3 @@ +@use 'colours' as *; +@use 'spacing/initial' as *; +@use 'typography/initial' as *; diff --git a/scss/custom-properties/_index.sm.scss b/scss/custom-properties/_index.sm.scss new file mode 100644 index 0000000..c1ddffe --- /dev/null +++ b/scss/custom-properties/_index.sm.scss @@ -0,0 +1,3 @@ +@use 'spacing/sm' as *; +@use 'typography/sm' as *; + diff --git a/scss/custom-properties/_index.xl.scss b/scss/custom-properties/_index.xl.scss new file mode 100644 index 0000000..14c55cf --- /dev/null +++ b/scss/custom-properties/_index.xl.scss @@ -0,0 +1,3 @@ +@use 'spacing/xl' as *; +@use 'typography/xl' as *; + diff --git a/scss/custom-properties/_index.xs.scss b/scss/custom-properties/_index.xs.scss new file mode 100644 index 0000000..32eb377 --- /dev/null +++ b/scss/custom-properties/_index.xs.scss @@ -0,0 +1,3 @@ +@use 'spacing/xs' as *; +@use 'typography/xs' as *; + diff --git a/scss/custom-properties/_index.xxl.scss b/scss/custom-properties/_index.xxl.scss new file mode 100644 index 0000000..8555eee --- /dev/null +++ b/scss/custom-properties/_index.xxl.scss @@ -0,0 +1,3 @@ +@use 'spacing/xxl' as *; +@use 'typography/xxl' as *; + diff --git a/scss/custom-properties/colours.scss b/scss/custom-properties/colours.scss deleted file mode 100644 index dadb50e..0000000 --- a/scss/custom-properties/colours.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use '../values/colours' as colours; - -:root { - --text-color: #{colours.$primary-98}; - --text-highlight-color: #{colours.$primary-10}; - --background-color: #{colours.$primary-10}; - --background-highlight-color: #{colours.$primary-90}; - --special-text-color: #{colours.$secondary-90}; - --special-text-highlight-color: #{colours.$secondary-10}; -} - -:is(main, article) { - --text-color: #{colours.$primary-10}; - --text-highlight-color: #{colours.$primary-90}; - --background-color: #{colours.$primary-98}; - --background-highlight-color: #{colours.$primary-10}; - --special-text-color: #{colours.$secondary-40}; - --special-text-highlight-color: #{colours.$secondary-90}; -} - -:is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)) { - --background-color: #{colours.$primary-95}; -} diff --git a/scss/custom-properties/index.lg.scss b/scss/custom-properties/index.lg.scss deleted file mode 100644 index 2a36586..0000000 --- a/scss/custom-properties/index.lg.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use 'spacing/lg' as *; -@use 'typography/lg' as *; - diff --git a/scss/custom-properties/index.md.scss b/scss/custom-properties/index.md.scss deleted file mode 100644 index 2367952..0000000 --- a/scss/custom-properties/index.md.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use 'spacing/md' as *; -@use 'typography/md' as *; - diff --git a/scss/custom-properties/index.scss b/scss/custom-properties/index.scss deleted file mode 100644 index e7279b6..0000000 --- a/scss/custom-properties/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use 'colours' as *; -@use 'spacing/initial' as *; -@use 'typography/initial' as *; diff --git a/scss/custom-properties/index.sm.scss b/scss/custom-properties/index.sm.scss deleted file mode 100644 index c1ddffe..0000000 --- a/scss/custom-properties/index.sm.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use 'spacing/sm' as *; -@use 'typography/sm' as *; - diff --git a/scss/custom-properties/index.xl.scss b/scss/custom-properties/index.xl.scss deleted file mode 100644 index 14c55cf..0000000 --- a/scss/custom-properties/index.xl.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use 'spacing/xl' as *; -@use 'typography/xl' as *; - diff --git a/scss/custom-properties/index.xs.scss b/scss/custom-properties/index.xs.scss deleted file mode 100644 index 32eb377..0000000 --- a/scss/custom-properties/index.xs.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use 'spacing/xs' as *; -@use 'typography/xs' as *; - diff --git a/scss/custom-properties/index.xxl.scss b/scss/custom-properties/index.xxl.scss deleted file mode 100644 index 8555eee..0000000 --- a/scss/custom-properties/index.xxl.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use 'spacing/xxl' as *; -@use 'typography/xxl' as *; - diff --git a/scss/custom-properties/spacing/_initial.scss b/scss/custom-properties/spacing/_initial.scss new file mode 100644 index 0000000..a38388f --- /dev/null +++ b/scss/custom-properties/spacing/_initial.scss @@ -0,0 +1,14 @@ +@use 'sass:map'; + +@use '../../values/spacing' as spacing-values; +@use 'mixins'; + +:root { + @include mixins.spacing(); + @include mixins.grid(); + + --width-prose: calc( + var(--grid-column-width) * var(--grid-prose-column-count) + + var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1) + ); +} diff --git a/scss/custom-properties/spacing/_lg.scss b/scss/custom-properties/spacing/_lg.scss new file mode 100644 index 0000000..1e9b090 --- /dev/null +++ b/scss/custom-properties/spacing/_lg.scss @@ -0,0 +1,7 @@ +@use 'mixins'; +@use '../../values/spacing' as spacing-values; + +:root { + // No need for spacing here, since it's the same as sm. + @include mixins.grid($breakpoint: lg); +} diff --git a/scss/custom-properties/spacing/_md.scss b/scss/custom-properties/spacing/_md.scss new file mode 100644 index 0000000..99b9352 --- /dev/null +++ b/scss/custom-properties/spacing/_md.scss @@ -0,0 +1,7 @@ +@use 'mixins'; +@use '../../values/spacing' as spacing-values; + +:root { + // No need for spacing here, since it's the same as sm. + @include mixins.grid($breakpoint: md); +} diff --git a/scss/custom-properties/spacing/_sm.scss b/scss/custom-properties/spacing/_sm.scss new file mode 100644 index 0000000..0fdfcfe --- /dev/null +++ b/scss/custom-properties/spacing/_sm.scss @@ -0,0 +1,7 @@ +@use 'mixins'; +@use '../../values/spacing' as spacing-values; + +:root { + @include mixins.spacing($breakpoint: sm); + @include mixins.grid($breakpoint: sm); +} diff --git a/scss/custom-properties/spacing/_xl.scss b/scss/custom-properties/spacing/_xl.scss new file mode 100644 index 0000000..265c6e9 --- /dev/null +++ b/scss/custom-properties/spacing/_xl.scss @@ -0,0 +1,7 @@ +@use 'mixins'; +@use '../../values/spacing' as spacing-values; + +:root { + // No need for spacing here, since it's the same as sm. + @include mixins.grid($breakpoint: xl); +} diff --git a/scss/custom-properties/spacing/_xs.scss b/scss/custom-properties/spacing/_xs.scss new file mode 100644 index 0000000..13a14d6 --- /dev/null +++ b/scss/custom-properties/spacing/_xs.scss @@ -0,0 +1,7 @@ +@use 'mixins'; +@use '../../values/spacing' as spacing-values; + +:root { + @include mixins.spacing($breakpoint: xs); + @include mixins.grid($breakpoint: xs); +} diff --git a/scss/custom-properties/spacing/_xxl.scss b/scss/custom-properties/spacing/_xxl.scss new file mode 100644 index 0000000..600f74e --- /dev/null +++ b/scss/custom-properties/spacing/_xxl.scss @@ -0,0 +1,7 @@ +@use 'mixins'; +@use '../../values/spacing' as spacing-values; + +:root { + // No need for spacing here, since it's the same as sm. + @include mixins.grid($breakpoint: xxl); +} diff --git a/scss/custom-properties/spacing/initial.scss b/scss/custom-properties/spacing/initial.scss deleted file mode 100644 index a38388f..0000000 --- a/scss/custom-properties/spacing/initial.scss +++ /dev/null @@ -1,14 +0,0 @@ -@use 'sass:map'; - -@use '../../values/spacing' as spacing-values; -@use 'mixins'; - -:root { - @include mixins.spacing(); - @include mixins.grid(); - - --width-prose: calc( - var(--grid-column-width) * var(--grid-prose-column-count) + - var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1) - ); -} diff --git a/scss/custom-properties/spacing/lg.scss b/scss/custom-properties/spacing/lg.scss deleted file mode 100644 index 1e9b090..0000000 --- a/scss/custom-properties/spacing/lg.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'mixins'; -@use '../../values/spacing' as spacing-values; - -:root { - // No need for spacing here, since it's the same as sm. - @include mixins.grid($breakpoint: lg); -} diff --git a/scss/custom-properties/spacing/md.scss b/scss/custom-properties/spacing/md.scss deleted file mode 100644 index 99b9352..0000000 --- a/scss/custom-properties/spacing/md.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'mixins'; -@use '../../values/spacing' as spacing-values; - -:root { - // No need for spacing here, since it's the same as sm. - @include mixins.grid($breakpoint: md); -} diff --git a/scss/custom-properties/spacing/sm.scss b/scss/custom-properties/spacing/sm.scss deleted file mode 100644 index 0fdfcfe..0000000 --- a/scss/custom-properties/spacing/sm.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'mixins'; -@use '../../values/spacing' as spacing-values; - -:root { - @include mixins.spacing($breakpoint: sm); - @include mixins.grid($breakpoint: sm); -} diff --git a/scss/custom-properties/spacing/xl.scss b/scss/custom-properties/spacing/xl.scss deleted file mode 100644 index 265c6e9..0000000 --- a/scss/custom-properties/spacing/xl.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'mixins'; -@use '../../values/spacing' as spacing-values; - -:root { - // No need for spacing here, since it's the same as sm. - @include mixins.grid($breakpoint: xl); -} diff --git a/scss/custom-properties/spacing/xs.scss b/scss/custom-properties/spacing/xs.scss deleted file mode 100644 index 13a14d6..0000000 --- a/scss/custom-properties/spacing/xs.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'mixins'; -@use '../../values/spacing' as spacing-values; - -:root { - @include mixins.spacing($breakpoint: xs); - @include mixins.grid($breakpoint: xs); -} diff --git a/scss/custom-properties/spacing/xxl.scss b/scss/custom-properties/spacing/xxl.scss deleted file mode 100644 index 600f74e..0000000 --- a/scss/custom-properties/spacing/xxl.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'mixins'; -@use '../../values/spacing' as spacing-values; - -:root { - // No need for spacing here, since it's the same as sm. - @include mixins.grid($breakpoint: xxl); -} diff --git a/scss/custom-properties/typography/_initial.scss b/scss/custom-properties/typography/_initial.scss new file mode 100644 index 0000000..c9d95da --- /dev/null +++ b/scss/custom-properties/typography/_initial.scss @@ -0,0 +1,41 @@ +@use 'mixins'; + +@use '../../values/typography' as typography-values; + +:root { + @include mixins.font-sizes(); + --border-width: #{typography-values.border-width()}; + + --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; +} diff --git a/scss/custom-properties/typography/_lg.scss b/scss/custom-properties/typography/_lg.scss new file mode 100644 index 0000000..30a3019 --- /dev/null +++ b/scss/custom-properties/typography/_lg.scss @@ -0,0 +1,9 @@ +@use 'mixins'; + +@use '../../values/typography' as typography-values; + +:root { + @include mixins.font-sizes(lg); + --border-width: #{typography-values.border-width(lg)}; +} + diff --git a/scss/custom-properties/typography/_md.scss b/scss/custom-properties/typography/_md.scss new file mode 100644 index 0000000..df49bdd --- /dev/null +++ b/scss/custom-properties/typography/_md.scss @@ -0,0 +1,9 @@ +@use 'mixins'; + +@use '../../values/typography' as typography-values; + +:root { + @include mixins.font-sizes(md); + --border-width: #{typography-values.border-width(md)}; +} + diff --git a/scss/custom-properties/typography/_sm.scss b/scss/custom-properties/typography/_sm.scss new file mode 100644 index 0000000..e1c3585 --- /dev/null +++ b/scss/custom-properties/typography/_sm.scss @@ -0,0 +1,9 @@ +@use 'mixins'; + +@use '../../values/typography' as typography-values; + +:root { + @include mixins.font-sizes(sm); + --border-width: #{typography-values.border-width(sm)}; +} + diff --git a/scss/custom-properties/typography/_xl.scss b/scss/custom-properties/typography/_xl.scss new file mode 100644 index 0000000..0ddba99 --- /dev/null +++ b/scss/custom-properties/typography/_xl.scss @@ -0,0 +1,9 @@ +@use 'mixins'; + +@use '../../values/typography' as typography-values; + +:root { + @include mixins.font-sizes(xl); + --border-width: #{typography-values.border-width(xl)}; +} + diff --git a/scss/custom-properties/typography/_xs.scss b/scss/custom-properties/typography/_xs.scss new file mode 100644 index 0000000..44d8bbb --- /dev/null +++ b/scss/custom-properties/typography/_xs.scss @@ -0,0 +1,9 @@ +@use 'mixins'; + +@use '../../values/typography' as typography-values; + +:root { + @include mixins.font-sizes(xs); + --border-width: #{typography-values.border-width(xs)}; +} + diff --git a/scss/custom-properties/typography/_xxl.scss b/scss/custom-properties/typography/_xxl.scss new file mode 100644 index 0000000..1a777dc --- /dev/null +++ b/scss/custom-properties/typography/_xxl.scss @@ -0,0 +1,9 @@ +@use 'mixins'; + +@use '../../values/typography' as typography-values; + +:root { + @include mixins.font-sizes(xxl); + --border-width: #{typography-values.border-width(xxl)}; +} + diff --git a/scss/custom-properties/typography/initial.scss b/scss/custom-properties/typography/initial.scss deleted file mode 100644 index c9d95da..0000000 --- a/scss/custom-properties/typography/initial.scss +++ /dev/null @@ -1,41 +0,0 @@ -@use 'mixins'; - -@use '../../values/typography' as typography-values; - -:root { - @include mixins.font-sizes(); - --border-width: #{typography-values.border-width()}; - - --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; -} diff --git a/scss/custom-properties/typography/lg.scss b/scss/custom-properties/typography/lg.scss deleted file mode 100644 index 30a3019..0000000 --- a/scss/custom-properties/typography/lg.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use 'mixins'; - -@use '../../values/typography' as typography-values; - -:root { - @include mixins.font-sizes(lg); - --border-width: #{typography-values.border-width(lg)}; -} - diff --git a/scss/custom-properties/typography/md.scss b/scss/custom-properties/typography/md.scss deleted file mode 100644 index df49bdd..0000000 --- a/scss/custom-properties/typography/md.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use 'mixins'; - -@use '../../values/typography' as typography-values; - -:root { - @include mixins.font-sizes(md); - --border-width: #{typography-values.border-width(md)}; -} - diff --git a/scss/custom-properties/typography/sm.scss b/scss/custom-properties/typography/sm.scss deleted file mode 100644 index e1c3585..0000000 --- a/scss/custom-properties/typography/sm.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use 'mixins'; - -@use '../../values/typography' as typography-values; - -:root { - @include mixins.font-sizes(sm); - --border-width: #{typography-values.border-width(sm)}; -} - diff --git a/scss/custom-properties/typography/xl.scss b/scss/custom-properties/typography/xl.scss deleted file mode 100644 index 0ddba99..0000000 --- a/scss/custom-properties/typography/xl.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use 'mixins'; - -@use '../../values/typography' as typography-values; - -:root { - @include mixins.font-sizes(xl); - --border-width: #{typography-values.border-width(xl)}; -} - diff --git a/scss/custom-properties/typography/xs.scss b/scss/custom-properties/typography/xs.scss deleted file mode 100644 index 44d8bbb..0000000 --- a/scss/custom-properties/typography/xs.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use 'mixins'; - -@use '../../values/typography' as typography-values; - -:root { - @include mixins.font-sizes(xs); - --border-width: #{typography-values.border-width(xs)}; -} - diff --git a/scss/custom-properties/typography/xxl.scss b/scss/custom-properties/typography/xxl.scss deleted file mode 100644 index 1a777dc..0000000 --- a/scss/custom-properties/typography/xxl.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use 'mixins'; - -@use '../../values/typography' as typography-values; - -:root { - @include mixins.font-sizes(xxl); - --border-width: #{typography-values.border-width(xxl)}; -} - 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..8105dcb --- /dev/null +++ b/scss/layout/_section-margins.scss @@ -0,0 +1,13 @@ +:is(main, article) > :is(section, header):not(:is(section, header) :is(section, header)) { + padding-block: var(--spacing-block-md); +} + +footer { + padding-block-start: var(--spacing-block-md); + padding-block-end: var(--spacing-block-lg); +} + +nav { + padding-block-start: var(--spacing-block-sm); + padding-block-end: var(--spacing-block-md); +} diff --git a/scss/layout/grid.md.scss b/scss/layout/grid.md.scss deleted file mode 100644 index f0c8478..0000000 --- a/scss/layout/grid.md.scss +++ /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/scss/layout/grid.scss b/scss/layout/grid.scss deleted file mode 100644 index 25cdd95..0000000 --- a/scss/layout/grid.scss +++ /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/scss/layout/grid.xs.scss b/scss/layout/grid.xs.scss deleted file mode 100644 index e7c6d1a..0000000 --- a/scss/layout/grid.xs.scss +++ /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/scss/layout/index.md.scss b/scss/layout/index.md.scss deleted file mode 100644 index c3bd183..0000000 --- a/scss/layout/index.md.scss +++ /dev/null @@ -1,2 +0,0 @@ -@use 'grid.md'; - diff --git a/scss/layout/index.scss b/scss/layout/index.scss deleted file mode 100644 index 776613a..0000000 --- a/scss/layout/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use 'grid'; -@use 'section-margins'; - diff --git a/scss/layout/index.xs.scss b/scss/layout/index.xs.scss deleted file mode 100644 index 6e239b4..0000000 --- a/scss/layout/index.xs.scss +++ /dev/null @@ -1,2 +0,0 @@ -@use 'grid.xs'; - diff --git a/scss/layout/section-margins.scss b/scss/layout/section-margins.scss deleted file mode 100644 index 8105dcb..0000000 --- a/scss/layout/section-margins.scss +++ /dev/null @@ -1,13 +0,0 @@ -:is(main, article) > :is(section, header):not(:is(section, header) :is(section, header)) { - padding-block: var(--spacing-block-md); -} - -footer { - padding-block-start: var(--spacing-block-md); - padding-block-end: var(--spacing-block-lg); -} - -nav { - padding-block-start: var(--spacing-block-sm); - padding-block-end: var(--spacing-block-md); -} diff --git a/scss/modules/_btn.scss b/scss/modules/_btn.scss new file mode 100644 index 0000000..6b5e543 --- /dev/null +++ b/scss/modules/_btn.scss @@ -0,0 +1,40 @@ +.btn { + display: block; + border: solid var(--border-width) var(--text-color); + font-weight: 600; + text-align: center; + margin-block-start: var(--spacing-block-sm); + padding-inline: var(--spacing-inline-md); + padding-block: var(--spacing-block-sm); + background-color: transparent; + transition: + background-color 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); + transition: + background-color 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); +} + +/* Override anchor styling. */ +a.btn { + color: var(--text-color); + text-decoration: none; +} + 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..f6528a3 --- /dev/null +++ b/scss/modules/_committee.scss @@ -0,0 +1,37 @@ +.committee__member { + list-style-type: none; + margin-block-start: var(--spacing-block-sm); +} + +.committee__member + .committee__member { + border-top-width: var(--border-width); + border-top-style: solid; + border-image: linear-gradient( + to right, + transparent 0%, + transparent 19.1%, + var(--text-color) 19.1%, + var(--text-color) 80.9%, + transparent 80.9%, + transparent 100% + ) 1; + margin-block-start: var(--spacing-block-md); + padding-block-start: var(--spacing-block-md); +} + +.committee__member__img { + margin-inline: 25%; + width: 50%; + border-radius: 50%; +} + +.committee__member__text { + text-align: center; + margin-block-start: var(--spacing-block-sm); +} + +.committee__member__role { + display: block; + font-weight: lighter; +} + diff --git a/scss/modules/_committee.sm.scss b/scss/modules/_committee.sm.scss new file mode 100644 index 0000000..a2b2216 --- /dev/null +++ b/scss/modules/_committee.sm.scss @@ -0,0 +1,5 @@ +.committee__member__text { + text-align: start; + margin: 0; +} + 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/_committee.xs.scss b/scss/modules/_committee.xs.scss new file mode 100644 index 0000000..5681bc7 --- /dev/null +++ b/scss/modules/_committee.xs.scss @@ -0,0 +1,5 @@ +.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)); +} + diff --git a/scss/modules/_footer.scss b/scss/modules/_footer.scss new file mode 100644 index 0000000..9210044 --- /dev/null +++ b/scss/modules/_footer.scss @@ -0,0 +1,28 @@ +footer { + display: flex; + flex-direction: column; + gap: var(--spacing-block-sm); + align-items: center; +} + +.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 { + display: block; +} + +.footer__back-to-top { + grid-column: calc(var(--grid-column-count) - 2) / calc(var(--grid-column-count) + 1); + margin: 0; +} diff --git a/scss/modules/_footer.xs.scss b/scss/modules/_footer.xs.scss new file mode 100644 index 0000000..67cab7f --- /dev/null +++ b/scss/modules/_footer.xs.scss @@ -0,0 +1,7 @@ +footer { + display: grid; + grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); + gap: var(--grid-gutter-width); + align-items: end; +} + 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.sm.scss b/scss/modules/_index.sm.scss new file mode 100644 index 0000000..a4fb988 --- /dev/null +++ b/scss/modules/_index.sm.scss @@ -0,0 +1,3 @@ +@use 'committee.sm' as *; +@use 'nav.sm' 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..ef77c6d --- /dev/null +++ b/scss/modules/_index.xs.scss @@ -0,0 +1,5 @@ +@use 'committee.xs' as *; +@use 'footer.xs' as *; +@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..d321419 --- /dev/null +++ b/scss/modules/_link-gallery.scss @@ -0,0 +1,42 @@ +.link-gallery { + display: grid; + grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); + gap: var(--grid-gutter-width); + padding-block: var(--spacing-block-md); + --gallery-item-column-span: 1; + --gallery-row-image-height: 12rem; + --gallery-row-title-height: fit-content; + text-align: center; + + li { + list-style-type: none; + grid-column: span var(--gallery-item-column-span); + } + + img { + max-width: 100%; + max-height: 100%; + margin: auto; + object-fit: contain; + } +} + +.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(--spacing-block-sm); +} + +.link-gallery--furthsettins img { + box-sizing: border-box; + border-radius: 50%; + border: solid var(--border-width) var(--text-color); +} + +.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..2f827c4 --- /dev/null +++ b/scss/modules/_link.scss @@ -0,0 +1,27 @@ +a, .link { + color: var(--special-text-color); + text-decoration-line: underline; + text-decoration-color: var(--special-text-color); + border: dotted transparent var(--border-width); + transition: + color 100ms, + text-decoration-color 100ms, + border-color 100ms; + + &:is(:hover, :focus, :focus-visible, :focus-within), + .group-hover:is(:hover, :focus, :focus-visible, :focus-within) & { + text-decoration-color: currentColor; + text-decoration-style: wavy; + transition: + color 300ms, + text-decoration-color 300ms, + border-color 300ms; + } + + &:is(:focus, :focus-visible, :focus-within) { + 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..7f0f784 --- /dev/null +++ b/scss/modules/_nav.md.scss @@ -0,0 +1,26 @@ +.nav__nav-links li { + &:nth-child(1) { + grid-column: 1 / 3; + } + + &:nth-child(2) { + grid-column: 3 / 5; + } + + &:nth-child(3) { + grid-column: 5 / 8; + } + + &:nth-child(4) { + grid-column: 1 / 3; + } + + &:nth-child(5) { + grid-column: 3 / 5; + } +} + +.nav__switch-language-link { + margin-inline-end: calc(var(--grid-column-width) + var(--grid-gutter-width)); +} + diff --git a/scss/modules/_nav.scss b/scss/modules/_nav.scss new file mode 100644 index 0000000..f2f32a9 --- /dev/null +++ b/scss/modules/_nav.scss @@ -0,0 +1,78 @@ +.nav { + & > :not(:last-child) { + margin-block: 0 var(--margin-block-sm); + } + + li { + list-style-type: none; + } +} + +.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); + + li { + list-style-type: none; + margin: 0; + } +} + +.nav__logo { + font-family: var(--font-serif); + font-size: var(--font-size-5); + font-weight: 700; + line-height: 1.15; + + /* This gradient is based on * + * colours.$primary-60 -> colours.$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; + + a { + text-decoration: none; + border: var(--border-width) dotted transparent; + transition: border-color 100ms; + + &:is(:focus, :focus-visible, :focus-within) { + box-shadow: none; + outline: none; + border-color: var(--special-text-color); + transition: border-color 300ms; + } + } +} + +.nav__breadcrumbs { + li { + list-style: '▸'; + list-style-position: inside; + } +} + +.nav__switch-language-link { + text-align: right; +} diff --git a/scss/modules/_nav.sm.scss b/scss/modules/_nav.sm.scss new file mode 100644 index 0000000..db540bd --- /dev/null +++ b/scss/modules/_nav.sm.scss @@ -0,0 +1,38 @@ +.nav__breadcrumbs { + display: flex; + flex-wrap: wrap; + list-style: none; + + li { + display: inline; + min-width: max-content; + + + li::before { + content: '/'; + margin-inline: var(--margin-inline-md); + } + } +} + +.nav__nav-links li { + &:nth-child(1) { + grid-column: 1 / 3; + } + + &:nth-child(2) { + grid-column: 3 / 6; + } + + &:nth-child(3) { + grid-column: 6 / 9; + } + + &:nth-child(4) { + grid-column: 1 / 3; + } + + &:nth-child(5) { + grid-column: 3 / 5; + } +} + 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..b235edd --- /dev/null +++ b/scss/modules/_news-index.scss @@ -0,0 +1,36 @@ +.news-index__item { + display: block; + box-sizing: border-box; + border: var(--border-width) solid var(--text-color); + transition: background 100ms; + padding-block: var(--spacing-block-md); + padding-inline: var(--spacing-inline-sm); + width: var(--width-prose); +} + +a.news-index__item { + text-decoration: none; + color: var(--text-color); +} + +.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; +} diff --git a/scss/modules/_product.scss b/scss/modules/_product.scss new file mode 100644 index 0000000..bc05dfd --- /dev/null +++ b/scss/modules/_product.scss @@ -0,0 +1,31 @@ +.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; +} + +:is(.product__contributors, .product__contributions) { + list-style-type: none; +} + +.product__contribution__title { + font-style: italic; + &:has(+ .product__contribution__author) { + margin-inline-end: 0.3em; + } +} 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..40a9fee --- /dev/null +++ b/scss/modules/_schedule.scss @@ -0,0 +1,14 @@ +.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; + text-decoration: none; +} + +.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/modules/btn.scss b/scss/modules/btn.scss deleted file mode 100644 index 6b5e543..0000000 --- a/scss/modules/btn.scss +++ /dev/null @@ -1,40 +0,0 @@ -.btn { - display: block; - border: solid var(--border-width) var(--text-color); - font-weight: 600; - text-align: center; - margin-block-start: var(--spacing-block-sm); - padding-inline: var(--spacing-inline-md); - padding-block: var(--spacing-block-sm); - background-color: transparent; - transition: - background-color 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); - transition: - background-color 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); -} - -/* Override anchor styling. */ -a.btn { - color: var(--text-color); - text-decoration: none; -} - diff --git a/scss/modules/committee.md.scss b/scss/modules/committee.md.scss deleted file mode 100644 index 83ca252..0000000 --- a/scss/modules/committee.md.scss +++ /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/scss/modules/committee.scss b/scss/modules/committee.scss deleted file mode 100644 index f6528a3..0000000 --- a/scss/modules/committee.scss +++ /dev/null @@ -1,37 +0,0 @@ -.committee__member { - list-style-type: none; - margin-block-start: var(--spacing-block-sm); -} - -.committee__member + .committee__member { - border-top-width: var(--border-width); - border-top-style: solid; - border-image: linear-gradient( - to right, - transparent 0%, - transparent 19.1%, - var(--text-color) 19.1%, - var(--text-color) 80.9%, - transparent 80.9%, - transparent 100% - ) 1; - margin-block-start: var(--spacing-block-md); - padding-block-start: var(--spacing-block-md); -} - -.committee__member__img { - margin-inline: 25%; - width: 50%; - border-radius: 50%; -} - -.committee__member__text { - text-align: center; - margin-block-start: var(--spacing-block-sm); -} - -.committee__member__role { - display: block; - font-weight: lighter; -} - diff --git a/scss/modules/committee.sm.scss b/scss/modules/committee.sm.scss deleted file mode 100644 index a2b2216..0000000 --- a/scss/modules/committee.sm.scss +++ /dev/null @@ -1,5 +0,0 @@ -.committee__member__text { - text-align: start; - margin: 0; -} - diff --git a/scss/modules/committee.xl.scss b/scss/modules/committee.xl.scss deleted file mode 100644 index 94d8429..0000000 --- a/scss/modules/committee.xl.scss +++ /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/scss/modules/committee.xs.scss b/scss/modules/committee.xs.scss deleted file mode 100644 index 5681bc7..0000000 --- a/scss/modules/committee.xs.scss +++ /dev/null @@ -1,5 +0,0 @@ -.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)); -} - diff --git a/scss/modules/footer.scss b/scss/modules/footer.scss deleted file mode 100644 index 9210044..0000000 --- a/scss/modules/footer.scss +++ /dev/null @@ -1,28 +0,0 @@ -footer { - display: flex; - flex-direction: column; - gap: var(--spacing-block-sm); - align-items: center; -} - -.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 { - display: block; -} - -.footer__back-to-top { - grid-column: calc(var(--grid-column-count) - 2) / calc(var(--grid-column-count) + 1); - margin: 0; -} diff --git a/scss/modules/footer.xs.scss b/scss/modules/footer.xs.scss deleted file mode 100644 index 67cab7f..0000000 --- a/scss/modules/footer.xs.scss +++ /dev/null @@ -1,7 +0,0 @@ -footer { - display: grid; - grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); - gap: var(--grid-gutter-width); - align-items: end; -} - diff --git a/scss/modules/index.lg.scss b/scss/modules/index.lg.scss deleted file mode 100644 index 56a6dd8..0000000 --- a/scss/modules/index.lg.scss +++ /dev/null @@ -1,2 +0,0 @@ -@use 'nav.lg' as *; - diff --git a/scss/modules/index.md.scss b/scss/modules/index.md.scss deleted file mode 100644 index b426b71..0000000 --- a/scss/modules/index.md.scss +++ /dev/null @@ -1,4 +0,0 @@ -@use 'committee.md' as *; -@use 'nav.md' as *; -@use 'schedule.md' as *; - diff --git a/scss/modules/index.scss b/scss/modules/index.scss deleted file mode 100644 index 6e67241..0000000 --- a/scss/modules/index.scss +++ /dev/null @@ -1,11 +0,0 @@ -@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.sm.scss b/scss/modules/index.sm.scss deleted file mode 100644 index a4fb988..0000000 --- a/scss/modules/index.sm.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use 'committee.sm' as *; -@use 'nav.sm' as *; - diff --git a/scss/modules/index.xl.scss b/scss/modules/index.xl.scss deleted file mode 100644 index 17e1d8c..0000000 --- a/scss/modules/index.xl.scss +++ /dev/null @@ -1,2 +0,0 @@ -@use 'committee.xl' as *; - diff --git a/scss/modules/index.xs.scss b/scss/modules/index.xs.scss deleted file mode 100644 index ef77c6d..0000000 --- a/scss/modules/index.xs.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use 'committee.xs' as *; -@use 'footer.xs' as *; -@use 'link-gallery.xs' as *; -@use 'nav.xs' as *; - diff --git a/scss/modules/link-gallery.scss b/scss/modules/link-gallery.scss deleted file mode 100644 index d321419..0000000 --- a/scss/modules/link-gallery.scss +++ /dev/null @@ -1,42 +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(--spacing-block-md); - --gallery-item-column-span: 1; - --gallery-row-image-height: 12rem; - --gallery-row-title-height: fit-content; - text-align: center; - - li { - list-style-type: none; - grid-column: span var(--gallery-item-column-span); - } - - img { - max-width: 100%; - max-height: 100%; - margin: auto; - object-fit: contain; - } -} - -.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(--spacing-block-sm); -} - -.link-gallery--furthsettins img { - box-sizing: border-box; - border-radius: 50%; - border: solid var(--border-width) var(--text-color); -} - -.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 deleted file mode 100644 index b2bf86c..0000000 --- a/scss/modules/link-gallery.xs.scss +++ /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/scss/modules/link.scss b/scss/modules/link.scss deleted file mode 100644 index 2f827c4..0000000 --- a/scss/modules/link.scss +++ /dev/null @@ -1,27 +0,0 @@ -a, .link { - color: var(--special-text-color); - text-decoration-line: underline; - text-decoration-color: var(--special-text-color); - border: dotted transparent var(--border-width); - transition: - color 100ms, - text-decoration-color 100ms, - border-color 100ms; - - &:is(:hover, :focus, :focus-visible, :focus-within), - .group-hover:is(:hover, :focus, :focus-visible, :focus-within) & { - text-decoration-color: currentColor; - text-decoration-style: wavy; - transition: - color 300ms, - text-decoration-color 300ms, - border-color 300ms; - } - - &:is(:focus, :focus-visible, :focus-within) { - 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 deleted file mode 100644 index c47a685..0000000 --- a/scss/modules/nav.lg.scss +++ /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/scss/modules/nav.md.scss b/scss/modules/nav.md.scss deleted file mode 100644 index 7f0f784..0000000 --- a/scss/modules/nav.md.scss +++ /dev/null @@ -1,26 +0,0 @@ -.nav__nav-links li { - &:nth-child(1) { - grid-column: 1 / 3; - } - - &:nth-child(2) { - grid-column: 3 / 5; - } - - &:nth-child(3) { - grid-column: 5 / 8; - } - - &:nth-child(4) { - grid-column: 1 / 3; - } - - &:nth-child(5) { - grid-column: 3 / 5; - } -} - -.nav__switch-language-link { - margin-inline-end: calc(var(--grid-column-width) + var(--grid-gutter-width)); -} - diff --git a/scss/modules/nav.scss b/scss/modules/nav.scss deleted file mode 100644 index f2f32a9..0000000 --- a/scss/modules/nav.scss +++ /dev/null @@ -1,78 +0,0 @@ -.nav { - & > :not(:last-child) { - margin-block: 0 var(--margin-block-sm); - } - - li { - list-style-type: none; - } -} - -.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); - - li { - list-style-type: none; - margin: 0; - } -} - -.nav__logo { - font-family: var(--font-serif); - font-size: var(--font-size-5); - font-weight: 700; - line-height: 1.15; - - /* This gradient is based on * - * colours.$primary-60 -> colours.$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; - - a { - text-decoration: none; - border: var(--border-width) dotted transparent; - transition: border-color 100ms; - - &:is(:focus, :focus-visible, :focus-within) { - box-shadow: none; - outline: none; - border-color: var(--special-text-color); - transition: border-color 300ms; - } - } -} - -.nav__breadcrumbs { - li { - list-style: '▸'; - list-style-position: inside; - } -} - -.nav__switch-language-link { - text-align: right; -} diff --git a/scss/modules/nav.sm.scss b/scss/modules/nav.sm.scss deleted file mode 100644 index db540bd..0000000 --- a/scss/modules/nav.sm.scss +++ /dev/null @@ -1,38 +0,0 @@ -.nav__breadcrumbs { - display: flex; - flex-wrap: wrap; - list-style: none; - - li { - display: inline; - min-width: max-content; - - + li::before { - content: '/'; - margin-inline: var(--margin-inline-md); - } - } -} - -.nav__nav-links li { - &:nth-child(1) { - grid-column: 1 / 3; - } - - &:nth-child(2) { - grid-column: 3 / 6; - } - - &:nth-child(3) { - grid-column: 6 / 9; - } - - &:nth-child(4) { - grid-column: 1 / 3; - } - - &:nth-child(5) { - grid-column: 3 / 5; - } -} - diff --git a/scss/modules/nav.xs.scss b/scss/modules/nav.xs.scss deleted file mode 100644 index 708652c..0000000 --- a/scss/modules/nav.xs.scss +++ /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/scss/modules/news-index.scss b/scss/modules/news-index.scss deleted file mode 100644 index b235edd..0000000 --- a/scss/modules/news-index.scss +++ /dev/null @@ -1,36 +0,0 @@ -.news-index__item { - display: block; - box-sizing: border-box; - border: var(--border-width) solid var(--text-color); - transition: background 100ms; - padding-block: var(--spacing-block-md); - padding-inline: var(--spacing-inline-sm); - width: var(--width-prose); -} - -a.news-index__item { - text-decoration: none; - color: var(--text-color); -} - -.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; -} diff --git a/scss/modules/product.scss b/scss/modules/product.scss deleted file mode 100644 index bc05dfd..0000000 --- a/scss/modules/product.scss +++ /dev/null @@ -1,31 +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; -} - -:is(.product__contributors, .product__contributions) { - list-style-type: none; -} - -.product__contribution__title { - font-style: italic; - &:has(+ .product__contribution__author) { - margin-inline-end: 0.3em; - } -} diff --git a/scss/modules/schedule.md.scss b/scss/modules/schedule.md.scss deleted file mode 100644 index 9ccfb0b..0000000 --- a/scss/modules/schedule.md.scss +++ /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/scss/modules/schedule.scss b/scss/modules/schedule.scss deleted file mode 100644 index 40a9fee..0000000 --- a/scss/modules/schedule.scss +++ /dev/null @@ -1,14 +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; - text-decoration: none; -} - -.schedule dd { - text-align: center; -} diff --git a/scss/modules/skip-to-content.scss b/scss/modules/skip-to-content.scss deleted file mode 100644 index a752b29..0000000 --- a/scss/modules/skip-to-content.scss +++ /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 -- cgit v1.2.3