From 4710fb1c87d5926f630716f003e736e019b3fcf5 Mon Sep 17 00:00:00 2001 From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com> Date: Thu, 14 Dec 2023 21:28:31 +0000 Subject: Eiks 31 (#41) * Eiks 31 * Prettier dl's * Prettier headings --------- Co-authored-by: Joe Carstairs --- scss/modules/schedule.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'scss/modules') diff --git a/scss/modules/schedule.scss b/scss/modules/schedule.scss index 140767c..40a9fee 100644 --- a/scss/modules/schedule.scss +++ b/scss/modules/schedule.scss @@ -6,6 +6,7 @@ font-weight: 700; margin-block-start: var(--margin-block-sm); text-align: center; + text-decoration: none; } .schedule dd { -- cgit v1.2.3 From 91e3b90179ca4b75dbbb1c06c8188dca0bdecf67 Mon Sep 17 00:00:00 2001 From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com> Date: Sat, 16 Dec 2023 11:49:48 +0000 Subject: Eiks 31 fixes (#43) * Eiks 31 fixes * Improves list styling --- scss/modules/committee.scss | 3 ++- scss/modules/link-gallery.scss | 1 + scss/modules/nav.scss | 9 +++++---- scss/modules/product.scss | 11 +++++++++++ 4 files changed, 19 insertions(+), 5 deletions(-) (limited to 'scss/modules') diff --git a/scss/modules/committee.scss b/scss/modules/committee.scss index 8817fc1..2badf57 100644 --- a/scss/modules/committee.scss +++ b/scss/modules/committee.scss @@ -1,4 +1,5 @@ .committee__member { + list-style-type: none; margin-block-start: var(--margin-block-sm); } @@ -6,4 +7,4 @@ 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/link-gallery.scss b/scss/modules/link-gallery.scss index c3788dc..56949e2 100644 --- a/scss/modules/link-gallery.scss +++ b/scss/modules/link-gallery.scss @@ -9,6 +9,7 @@ text-align: center; li { + list-style-type: none; grid-column: span var(--gallery-item-column-span); } diff --git a/scss/modules/nav.scss b/scss/modules/nav.scss index 44ec5c6..aebcbcf 100644 --- a/scss/modules/nav.scss +++ b/scss/modules/nav.scss @@ -1,5 +1,5 @@ .nav > :not(:last-child) { - margin-block-end: var(--margin-block-sm); + margin-block: 0 var(--margin-block-sm); } .nav__bottom-row { @@ -11,10 +11,11 @@ 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; + li { + list-style-type: none; + margin: 0; + } } .nav__logo { diff --git a/scss/modules/product.scss b/scss/modules/product.scss index 32fa37f..bc05dfd 100644 --- a/scss/modules/product.scss +++ b/scss/modules/product.scss @@ -18,3 +18,14 @@ 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; + } +} -- cgit v1.2.3 From 5d5e2f8aa5c4030c33bf06f2cb817b9d770cc884 Mon Sep 17 00:00:00 2001 From: Joe Carstairs <118172583+jcarstairs-scottlogic@users.noreply.github.com> Date: Thu, 21 Dec 2023 21:21:30 +0000 Subject: Improve CSS reset (#51) * Font size inflation * Removes main adjustment for IE * Documents hr corrections * Documents pre corrections * Documents abbr[title] corrections * Documents b, strong corrections * Squishes pre rule with code,kbd,samp * Documents sub,sub line-height fix * Removes IE fix for img borders * Documents form control resets * Documents details display:block * Documents summary correction * Removes [hidden] fix for IE * Adds border-box sizing rules * Refactors links --- scss/modules/btn.scss | 9 +++++++-- scss/modules/link.scss | 33 +++++++++++++++---------------- scss/modules/nav.scss | 46 ++++++++++++++++++++++++-------------------- scss/modules/news-index.scss | 7 ++++++- 4 files changed, 54 insertions(+), 41 deletions(-) (limited to 'scss/modules') diff --git a/scss/modules/btn.scss b/scss/modules/btn.scss index 1d52b9c..e9db392 100644 --- a/scss/modules/btn.scss +++ b/scss/modules/btn.scss @@ -1,7 +1,5 @@ .btn { display: block; - box-sizing: border-box; - color: var(--text-color); border: solid var(--relative-eighth-rem) var(--text-color); font-weight: 600; text-align: center; @@ -33,3 +31,10 @@ .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/link.scss b/scss/modules/link.scss index dfcabcf..83206d4 100644 --- a/scss/modules/link.scss +++ b/scss/modules/link.scss @@ -1,32 +1,31 @@ -.link { +a, .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, border-color 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(3 * var(--relative-eighth-rem)); - transition: - color 300ms, - text-decoration-color 300ms, - text-decoration-thickness 300ms, - border-color 300ms; -} + &:is(:hover, :focus, :focus-visible, :focus-within), + .group-hover:is(:hover, :focus, :focus-visible, :focus-within) & { + text-decoration-color: currentColor; + text-decoration-thickness: calc(3 * var(--relative-eighth-rem)); + transition: + color 300ms, + text-decoration-color 300ms, + text-decoration-thickness 300ms, + border-color 300ms; + } -.link:focus, .link:focus-visible { - box-shadow: none; - outline: none; - border-color: var(--special-text-color); + &:is(:focus, :focus-visible, :focus-within) { + box-shadow: none; + outline: none; + border-color: var(--special-text-color); + } } diff --git a/scss/modules/nav.scss b/scss/modules/nav.scss index aebcbcf..765c44f 100644 --- a/scss/modules/nav.scss +++ b/scss/modules/nav.scss @@ -1,5 +1,11 @@ -.nav > :not(:last-child) { - margin-block: 0 var(--margin-block-sm); +.nav { + & > :not(:last-child) { + margin-block: 0 var(--margin-block-sm); + } + + li { + list-style-type: none; + } } .nav__bottom-row { @@ -44,33 +50,31 @@ ); -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; -} + 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; + &: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: '/' + li { + min-width: max-content; + &::before { + content: '/' + } + } } .nav__switch-language-link { diff --git a/scss/modules/news-index.scss b/scss/modules/news-index.scss index 0050f70..5d9bab2 100644 --- a/scss/modules/news-index.scss +++ b/scss/modules/news-index.scss @@ -8,6 +8,11 @@ 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; } @@ -28,4 +33,4 @@ .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 +} -- cgit v1.2.3 From 0b2fbe3f5b9e2fcf0da2b320af504d5cca759045 Mon Sep 17 00:00:00 2001 From: Joe Carstairs <118172583+jcarstairs-scottlogic@users.noreply.github.com> Date: Fri, 19 Jan 2024 07:32:30 +0000 Subject: Layout and typography improvements (#63) * Adds soft hyphens to homepage * auto-hyphenates! * Tighter line-height in logo * Fixes spacing and typography below xs breakpoint * Fixes xs-sm spacing and typography * Fixes border widths * Link hover uses wavy underline instead of fat underline * Fixes committee img layout on scss/custom-properties * Pulls out colours SCSS variables * Merges margins and padding values * Moves variables/colours -> values/colours * Starts migrating spacing values to SCSS * Pulls out typography logic to SCSS variables/functions * Removes unneeded --er custom property * Calculates grid-total-width-absolute in SCSS * Forwards constants with @forward * Removes TODOs and unnecessary assignment to --width-prose --- scss/modules/btn.scss | 8 ++++---- scss/modules/committee.scss | 33 ++++++++++++++++++++++++++++++--- scss/modules/committee.sm.scss | 5 +++++ scss/modules/committee.xs.scss | 5 +++++ scss/modules/footer.scss | 14 +++++++------- scss/modules/footer.xs.scss | 7 +++++++ scss/modules/index.sm.scss | 3 +++ scss/modules/index.xs.scss | 2 ++ scss/modules/link-gallery.scss | 6 +++--- scss/modules/link.scss | 8 ++------ scss/modules/nav.md.scss | 29 ++++++++++++++++++++++------- scss/modules/nav.scss | 14 +++++--------- scss/modules/nav.sm.scss | 38 ++++++++++++++++++++++++++++++++++++++ scss/modules/news-index.scss | 6 +++--- 14 files changed, 136 insertions(+), 42 deletions(-) create mode 100644 scss/modules/committee.sm.scss create mode 100644 scss/modules/committee.xs.scss create mode 100644 scss/modules/footer.xs.scss create mode 100644 scss/modules/index.sm.scss create mode 100644 scss/modules/nav.sm.scss (limited to 'scss/modules') diff --git a/scss/modules/btn.scss b/scss/modules/btn.scss index e9db392..6b5e543 100644 --- a/scss/modules/btn.scss +++ b/scss/modules/btn.scss @@ -1,11 +1,11 @@ .btn { display: block; - border: solid var(--relative-eighth-rem) var(--text-color); + border: solid var(--border-width) var(--text-color); font-weight: 600; text-align: center; - margin-block-start: var(--margin-block-sm); - padding-inline: var(--padding-inline-md); - padding-block: var(--padding-block-sm); + 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, diff --git a/scss/modules/committee.scss b/scss/modules/committee.scss index 2badf57..f6528a3 100644 --- a/scss/modules/committee.scss +++ b/scss/modules/committee.scss @@ -1,10 +1,37 @@ .committee__member { list-style-type: none; - margin-block-start: var(--margin-block-sm); + 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: calc(var(--grid-column-width) + var(--grid-gutter-width)); - width: calc(var(--grid-gutter-width) + 2 * var(--grid-column-width)); + 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.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 index 0d1a896..9210044 100644 --- a/scss/modules/footer.scss +++ b/scss/modules/footer.scss @@ -1,8 +1,8 @@ footer { - display: grid; - grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); - gap: var(--grid-gutter-width); - align-items: baseline; + display: flex; + flex-direction: column; + gap: var(--spacing-block-sm); + align-items: center; } .footer__rss-button__label { @@ -19,10 +19,10 @@ footer { } .footer__rss-button__img { - min-width: 44px; - width: calc(8 * var(--relative-eighth-rem)); + display: block; } .footer__back-to-top { grid-column: calc(var(--grid-column-count) - 2) / calc(var(--grid-column-count) + 1); -} \ No newline at end of file + 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.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.xs.scss b/scss/modules/index.xs.scss index 9dd43c5..ef77c6d 100644 --- a/scss/modules/index.xs.scss +++ b/scss/modules/index.xs.scss @@ -1,3 +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 index 56949e2..d321419 100644 --- a/scss/modules/link-gallery.scss +++ b/scss/modules/link-gallery.scss @@ -2,7 +2,7 @@ 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); + padding-block: var(--spacing-block-md); --gallery-item-column-span: 1; --gallery-row-image-height: 12rem; --gallery-row-title-height: fit-content; @@ -25,13 +25,13 @@ 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); + row-gap: var(--spacing-block-sm); } .link-gallery--furthsettins img { box-sizing: border-box; border-radius: 50%; - border: solid calc(2 * var(--relative-eighth-rem)) var(--text-color); + border: solid var(--border-width) var(--text-color); } .link-gallery__title { diff --git a/scss/modules/link.scss b/scss/modules/link.scss index 83206d4..2f827c4 100644 --- a/scss/modules/link.scss +++ b/scss/modules/link.scss @@ -2,23 +2,19 @@ a, .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: dotted transparent var(--border-width); transition: color 100ms, text-decoration-color 100ms, - text-decoration-thickness 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-thickness: calc(3 * var(--relative-eighth-rem)); + text-decoration-style: wavy; transition: color 300ms, text-decoration-color 300ms, - text-decoration-thickness 300ms, border-color 300ms; } diff --git a/scss/modules/nav.md.scss b/scss/modules/nav.md.scss index c3f4a18..7f0f784 100644 --- a/scss/modules/nav.md.scss +++ b/scss/modules/nav.md.scss @@ -1,11 +1,26 @@ -.nav__nav-links li:nth-child(3) { - grid-column: 5 / 8; +.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__nav-links li:nth-child(4) { - grid-column: 1 / 3; +.nav__switch-language-link { + margin-inline-end: calc(var(--grid-column-width) + var(--grid-gutter-width)); } -.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 index 765c44f..f2f32a9 100644 --- a/scss/modules/nav.scss +++ b/scss/modules/nav.scss @@ -28,9 +28,10 @@ font-family: var(--font-serif); font-size: var(--font-size-5); font-weight: 700; + line-height: 1.15; /* This gradient is based on * - * --color-primary-60 -> --color-secondary-60 * + * colours.$primary-60 -> colours.$secondary-60 * * using Josh W Comeau's gradient generator */ width: fit-content; background-image: linear-gradient( @@ -53,7 +54,7 @@ a { text-decoration: none; - border: var(--relative-eighth-rem) dotted transparent; + border: var(--border-width) dotted transparent; transition: border-color 100ms; &:is(:focus, :focus-visible, :focus-within) { @@ -66,14 +67,9 @@ } .nav__breadcrumbs { - display: flex; - flex-wrap: wrap; - li { - min-width: max-content; - &::before { - content: '/' - } + list-style: '▸'; + list-style-position: inside; } } 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/news-index.scss b/scss/modules/news-index.scss index 5d9bab2..b235edd 100644 --- a/scss/modules/news-index.scss +++ b/scss/modules/news-index.scss @@ -1,10 +1,10 @@ .news-index__item { display: block; box-sizing: border-box; - border: var(--relative-eighth-rem) solid var(--text-color); + border: var(--border-width) solid var(--text-color); transition: background 100ms; - padding-block: var(--margin-block-md); - padding-inline: var(--padding-inline-sm); + padding-block: var(--spacing-block-md); + padding-inline: var(--spacing-inline-sm); width: var(--width-prose); } -- cgit v1.2.3 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/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 ------- 54 files changed, 556 insertions(+), 556 deletions(-) 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 (limited to 'scss/modules') 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