diff options
Diffstat (limited to 'scss')
61 files changed, 1018 insertions, 0 deletions
diff --git a/scss/base/index.scss b/scss/base/index.scss new file mode 100644 index 0000000..da4f59e --- /dev/null +++ b/scss/base/index.scss @@ -0,0 +1,4 @@ +@use 'typography'; +@use 'theme'; +@use 'list'; + diff --git a/scss/base/list.scss b/scss/base/list.scss new file mode 100644 index 0000000..2fd402b --- /dev/null +++ b/scss/base/list.scss @@ -0,0 +1,4 @@ +ol li { + list-style-type: decimal; + margin-inline-start: --spacing-inline-md; +}
\ No newline at end of file diff --git a/scss/base/theme.scss b/scss/base/theme.scss new file mode 100644 index 0000000..f5d178c --- /dev/null +++ b/scss/base/theme.scss @@ -0,0 +1,13 @@ +:root { + color: var(--text-color); + background-color: var(--background-color); +} + +:is(main, article) { + color: var(--text-color); + background-color: var(--background-color); +} + +:is(main, article) > section:not(:is(section, header) :is(section, header)) { + background-color: var(--background-color); +}
\ No newline at end of file diff --git a/scss/base/typography.scss b/scss/base/typography.scss new file mode 100644 index 0000000..fb2ac17 --- /dev/null +++ b/scss/base/typography.scss @@ -0,0 +1,68 @@ +body { + font-family: var(--font-sans-serif); + font-size: var(--font-size-1); + font-weight: 400; + letter-spacing: 0.03rem; + line-height: 1.5; + word-wrap: break-word; +} + +h1 { + font-size: var(--font-size-5); +} + +h1:not(:first-child) { + margin-block-start: var(--margin-block-lg); +} + +h2 { + font-size: var(--font-size-4); +} + +h2:not(:first-child) { + margin-block-start: var(--margin-block-lg); +} + +h3 { + font-size: var(--font-size-3); +} + +h3:not(:first-child) { + margin-block-start: var(--margin-block-md); +} + +h4 { + font-size: var(--font-size-2); +} + +h4:not(:first-child) { + margin-block-start: var(--margin-block-sm); +} + +h1, +h2, +h3, +h4 { + font-family: var(--font-serif); + font-weight: 700; +} + +.title { + font-family: var(--font-serif); + font-size: var(--font-size-6); + font-weight: 700; + margin-block-start: var(--margin-block-sm); +} + +.title--small { + font-size: var(--font-size-2); + margin-block-start: 0; +} + +p:not(:first-child) { + margin-block-start: var(--margin-block-sm); +} + +:is(p, h1, h2, h3, h4) { + max-width: var(--width-prose); +} diff --git a/scss/index.lg.scss b/scss/index.lg.scss new file mode 100644 index 0000000..4060f14 --- /dev/null +++ b/scss/index.lg.scss @@ -0,0 +1,3 @@ +@use 'modules/index.lg' as *; +@use 'variables/index.lg' as *; + diff --git a/scss/index.md.scss b/scss/index.md.scss new file mode 100644 index 0000000..a49e979 --- /dev/null +++ b/scss/index.md.scss @@ -0,0 +1,4 @@ +@use 'layout/index.md' as *; +@use 'modules/index.md' as *; +@use 'variables/index.md' as *; + diff --git a/scss/index.scss b/scss/index.scss new file mode 100644 index 0000000..485e64c --- /dev/null +++ b/scss/index.scss @@ -0,0 +1,7 @@ +@use 'normalize' as *; +@use 'base/index' as *; +@use 'layout/index' as *; +@use 'modules/index' as *; +@use 'variables/index' as *; +@use 'utils' as *; + diff --git a/scss/index.sm.scss b/scss/index.sm.scss new file mode 100644 index 0000000..37c6ec7 --- /dev/null +++ b/scss/index.sm.scss @@ -0,0 +1,2 @@ +@use 'variables/index.sm' as *; + diff --git a/scss/index.xl.scss b/scss/index.xl.scss new file mode 100644 index 0000000..7848b38 --- /dev/null +++ b/scss/index.xl.scss @@ -0,0 +1,3 @@ +@use 'modules/index.xl' as *; +@use 'variables/index.xl' as *; + diff --git a/scss/index.xs.scss b/scss/index.xs.scss new file mode 100644 index 0000000..6aee8e5 --- /dev/null +++ b/scss/index.xs.scss @@ -0,0 +1,4 @@ +@use 'layout/index.xs' as *; +@use 'modules/index.xs' as *; +@use 'variables/index.xs' as *; + diff --git a/scss/index.xxl.scss b/scss/index.xxl.scss new file mode 100644 index 0000000..067147c --- /dev/null +++ b/scss/index.xxl.scss @@ -0,0 +1,2 @@ +@use 'variables/index.xxl' as *; + diff --git a/scss/layout/grid.md.scss b/scss/layout/grid.md.scss new file mode 100644 index 0000000..f0c8478 --- /dev/null +++ b/scss/layout/grid.md.scss @@ -0,0 +1,8 @@ +:is( + header, + footer, + nav, + :is(main, article) > section:not(:is(section, header) :is(section, header)) +) { + padding-inline: var(--grid-padding); +}
\ No newline at end of file diff --git a/scss/layout/grid.scss b/scss/layout/grid.scss new file mode 100644 index 0000000..25cdd95 --- /dev/null +++ b/scss/layout/grid.scss @@ -0,0 +1,30 @@ +:is( + header, + footer, + nav, + :is(main, article) > section:not(:is(section, header) :is(section, header)) +):not(.section--full-width) { + padding-inline: calc(var(--grid-padding) + 0.5 * (100vw - var(--grid-total-width))); +} + +.grid-span-1 { + width: var(--grid-column-width); +} + +/* On screens narrower than 16rem, there is only one column. */ + +.grid-span-2 { + width: var(--grid-column-width); +} + +.grid-span-3 { + width: var(--grid-column-width); +} + +.width-prose { + width: var(--prose-width); +} + +.grid-span-full { + width: var(--grid-total-width); +} diff --git a/scss/layout/grid.xs.scss b/scss/layout/grid.xs.scss new file mode 100644 index 0000000..e7c6d1a --- /dev/null +++ b/scss/layout/grid.xs.scss @@ -0,0 +1,55 @@ +.grid-span-2 { + width: calc(var(--grid-column-width) * 2 + var(--grid-gutter-width)); +} + +.grid-span-3 { + width: calc(var(--grid-column-width) * 3 + var(--grid-gutter-width) * 2); +} + +.grid-span-1.grid-end { + margin-inline-start: calc( + var(--grid-column-width) * (var(--grid-column-count) - 1) + + var(--grid-gutter-width) * (var(--grid-column-count) - 1) + ); + margin-inline-end: 0; +} + +.grid-span-2.grid-end { + margin-inline-start: calc( + var(--grid-column-width) * (var(--grid-column-count) - 2) + + var(--grid-gutter-width) * (var(--grid-column-count) - 2) + ); + margin-inline-end: 0; +} + +.grid-span-3.grid-end { + margin-inline-start: calc( + var(--grid-column-width) * (var(--grid-column-count) - 3) + + var(--grid-gutter-width) * (var(--grid-column-count) - 3) + ); + margin-inline-end: 0; +} + +.grid-span-1.grid-prose-end { + margin-inline-start: calc( + var(--grid-column-width) * (var(--grid-prose-column-count) - 1) + + var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1) + ); + margin-inline-end: 0; +} + +.grid-span-2.grid-prose-end { + margin-inline-start: calc( + var(--grid-column-width) * (var(--grid-prose-column-count) - 2) + + var(--grid-gutter-width) * (var(--grid-prose-column-count) - 2) + ); + margin-inline-end: 0; +} + +.grid-span-3.grid-prose-end { + margin-inline-start: calc( + var(--grid-column-width) * (var(--grid-prose-column-count) - 3) + + var(--grid-gutter-width) * (var(--grid-prose-column-count) - 3) + ); + margin-inline-end: 0; +}
\ No newline at end of file diff --git a/scss/layout/index.md.scss b/scss/layout/index.md.scss new file mode 100644 index 0000000..c3bd183 --- /dev/null +++ b/scss/layout/index.md.scss @@ -0,0 +1,2 @@ +@use 'grid.md'; + diff --git a/scss/layout/index.scss b/scss/layout/index.scss new file mode 100644 index 0000000..776613a --- /dev/null +++ b/scss/layout/index.scss @@ -0,0 +1,3 @@ +@use 'grid'; +@use 'section-margins'; + diff --git a/scss/layout/index.xs.scss b/scss/layout/index.xs.scss new file mode 100644 index 0000000..6e239b4 --- /dev/null +++ b/scss/layout/index.xs.scss @@ -0,0 +1,2 @@ +@use 'grid.xs'; + diff --git a/scss/layout/section-margins.scss b/scss/layout/section-margins.scss new file mode 100644 index 0000000..a11073f --- /dev/null +++ b/scss/layout/section-margins.scss @@ -0,0 +1,14 @@ +:is(main, article) > :is(section, header):not(:is(section, header) :is(section, header)) { + padding-block-start: var(--margin-block-lg); + padding-block-end: var(--margin-block-md); +} + +footer { + padding-block-start: var(--margin-block-md); + padding-block-end: var(--margin-block-lg); +} + +nav { + padding-block-start: var(--margin-block-sm); + padding-block-end: var(--margin-block-md); +}
\ No newline at end of file diff --git a/scss/modules/btn.scss b/scss/modules/btn.scss new file mode 100644 index 0000000..142463c --- /dev/null +++ b/scss/modules/btn.scss @@ -0,0 +1,38 @@ +.btn { + display: block; + box-sizing: border-box; + color: var(--text-color); + border: solid var(--relative-eighth-rem) var(--text-color); + font-weight: 500; + text-align: center; + margin-block-start: var(--margin-block-sm); + padding-inline: var(--padding-inline-md); + padding-block: var(--padding-block-sm); + background-color: transparent; + transition: + background-color 100ms, + font-weight 100ms, + transform 100ms; +} + +.btn:is(:hover, :focus, :focus-visible, :focus-within, :active) { + box-shadow: none; + outline: none; + color: var(--text-highlight-color); + border-color: var(--background-highlight-color); + background-color: var(--background-highlight-color); + font-weight: 700; + transition: + background-color 300ms, + font-weight 300ms, + transform 300ms; +} + +.btn:is(:focus, :focus-visible, :focus-within) { + border-color: var(--special-text-highlight-color); + border-style: dotted; +} + +.btn:active { + transform: scale(1.1, 1.1); +}
\ No newline at end of file diff --git a/scss/modules/committee.md.scss b/scss/modules/committee.md.scss new file mode 100644 index 0000000..83ca252 --- /dev/null +++ b/scss/modules/committee.md.scss @@ -0,0 +1,16 @@ +.committee__member { + display: grid; + grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); + grid-template-rows: 1fr; + column-gap: var(--grid-gutter-width); +} + +.committee__member__img { + grid-column: 1 / 3; + margin-block: auto; + margin-inline: 0; +} + +.committee__member__text { + grid-column: 3 / calc(3 + var(--grid-prose-column-count) - 2); +}
\ No newline at end of file diff --git a/scss/modules/committee.scss b/scss/modules/committee.scss new file mode 100644 index 0000000..8817fc1 --- /dev/null +++ b/scss/modules/committee.scss @@ -0,0 +1,9 @@ +.committee__member { + margin-block-start: var(--margin-block-sm); +} + +.committee__member__img { + margin-inline: calc(var(--grid-column-width) + var(--grid-gutter-width)); + width: calc(var(--grid-gutter-width) + 2 * var(--grid-column-width)); + border-radius: 50%; +}
\ No newline at end of file diff --git a/scss/modules/committee.xl.scss b/scss/modules/committee.xl.scss new file mode 100644 index 0000000..94d8429 --- /dev/null +++ b/scss/modules/committee.xl.scss @@ -0,0 +1,15 @@ +.committee__member { + display: grid; + grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); + grid-template-rows: 1fr; + column-gap: var(--grid-gutter-width); +} + +.committee__member__img { + grid-column: 1 / 3; + margin-block: auto; +} + +.committee__member__text { + grid-column: 3 / min(11, calc(var(--grid-column-count) + 1)); +}
\ No newline at end of file diff --git a/scss/modules/footer.scss b/scss/modules/footer.scss new file mode 100644 index 0000000..0d1a896 --- /dev/null +++ b/scss/modules/footer.scss @@ -0,0 +1,28 @@ +footer { + display: grid; + grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); + gap: var(--grid-gutter-width); + align-items: baseline; +} + +.footer__rss-button__label { + /* Hides the label from non-screen-readers */ + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.footer__rss-button__img { + min-width: 44px; + width: calc(8 * var(--relative-eighth-rem)); +} + +.footer__back-to-top { + grid-column: calc(var(--grid-column-count) - 2) / calc(var(--grid-column-count) + 1); +}
\ No newline at end of file diff --git a/scss/modules/index.lg.scss b/scss/modules/index.lg.scss new file mode 100644 index 0000000..56a6dd8 --- /dev/null +++ b/scss/modules/index.lg.scss @@ -0,0 +1,2 @@ +@use 'nav.lg' as *; + diff --git a/scss/modules/index.md.scss b/scss/modules/index.md.scss new file mode 100644 index 0000000..b426b71 --- /dev/null +++ b/scss/modules/index.md.scss @@ -0,0 +1,4 @@ +@use 'committee.md' as *; +@use 'nav.md' as *; +@use 'schedule.md' as *; + diff --git a/scss/modules/index.scss b/scss/modules/index.scss new file mode 100644 index 0000000..6e67241 --- /dev/null +++ b/scss/modules/index.scss @@ -0,0 +1,11 @@ +@use 'btn' as *; +@use 'committee' as *; +@use 'footer' as *; +@use 'link' as *; +@use 'link-gallery' as *; +@use 'nav' as *; +@use 'news-index' as *; +@use 'product' as *; +@use 'schedule' as *; +@use 'skip-to-content' as *; + diff --git a/scss/modules/index.xl.scss b/scss/modules/index.xl.scss new file mode 100644 index 0000000..17e1d8c --- /dev/null +++ b/scss/modules/index.xl.scss @@ -0,0 +1,2 @@ +@use 'committee.xl' as *; + diff --git a/scss/modules/index.xs.scss b/scss/modules/index.xs.scss new file mode 100644 index 0000000..9dd43c5 --- /dev/null +++ b/scss/modules/index.xs.scss @@ -0,0 +1,3 @@ +@use 'link-gallery.xs' as *; +@use 'nav.xs' as *; + diff --git a/scss/modules/link-gallery.scss b/scss/modules/link-gallery.scss new file mode 100644 index 0000000..c3788dc --- /dev/null +++ b/scss/modules/link-gallery.scss @@ -0,0 +1,41 @@ +.link-gallery { + display: grid; + grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); + gap: var(--grid-gutter-width); + padding-block: var(--margin-block-md); + --gallery-item-column-span: 1; + --gallery-row-image-height: 12rem; + --gallery-row-title-height: fit-content; + text-align: center; + + li { + 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(--margin-block-sm); +} + +.link-gallery--furthsettins img { + box-sizing: border-box; + border-radius: 50%; + border: solid calc(2 * var(--relative-eighth-rem)) var(--text-color); +} + +.link-gallery__title { + width: 100%; + height: min-content; + text-align: center; + margin-inline: var(--spacing-inline-xs); +} diff --git a/scss/modules/link-gallery.xs.scss b/scss/modules/link-gallery.xs.scss new file mode 100644 index 0000000..b2bf86c --- /dev/null +++ b/scss/modules/link-gallery.xs.scss @@ -0,0 +1,21 @@ +.link-gallery { + grid-auto-rows: calc( + var(--gallery-row-image-height) + + var(--margin-block-sm) + + var(--gallery-row-title-height) + ); + --gallery-item-column-span: 2; + --gallery-row-title-height: 11ex; + text-align: center; +} + +.link-gallery__title { + width: 100%; + height: 9.9ex; + height: 3lh; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} diff --git a/scss/modules/link.scss b/scss/modules/link.scss new file mode 100644 index 0000000..d225e9d --- /dev/null +++ b/scss/modules/link.scss @@ -0,0 +1,42 @@ +.link { + color: var(--special-text-color); + text-decoration-line: underline; + text-decoration-color: var(--special-text-color); + text-decoration-thickness: var(--relative-eighth-rem); + text-underline-offset: var(--relative-eighth-rem); + border: dotted transparent var(--relative-eighth-rem); + border-radius: calc(3 * var(--relative-eighth-rem)); + transition: + color 100ms, + text-decoration-color 100ms, + text-decoration-thickness 100ms, + text-underline-offset 100ms, + border-color 100ms, + text-shadow 100ms; +} + +.link:is(:hover, :focus, :focus-visible, :focus-within), +.group-hover:is(:hover, :focus, :focus-visible, :focus-within) .link { + text-decoration-color: currentColor; + text-decoration-thickness: calc(4 * var(--relative-eighth-rem)); + text-underline-offset: calc(3 * var(--relative-eighth-rem)); + text-shadow: + 0 1px 0 currentColor, + 1px 0 0 currentColor, + 1px 0 0 currentColor, + 0 1px 0 currentColor; + transition: + color 300ms, + text-decoration-color 300ms, + text-decoration-thickness 300ms, + text-underline-offset 300ms, + border-color 300ms, + text-shadow 300ms; +} + +.link:focus, .link:focus-visible { + box-shadow: none; + outline: none; + border-color: var(--special-text-color); +} + diff --git a/scss/modules/nav.lg.scss b/scss/modules/nav.lg.scss new file mode 100644 index 0000000..c47a685 --- /dev/null +++ b/scss/modules/nav.lg.scss @@ -0,0 +1,15 @@ +.nav__bottom-row { + flex-direction: row; + justify-content: space-between; + align-items: baseline; + padding-inline: max(10%, calc((100% - var(--max-width-all-content)) / 2)); + gap: var(--spacing-inline-xs); +} + +.nav__nav-links li:nth-child(4) { + grid-column: 8 / 10; +} + +.nav__nav-links li:nth-child(5) { + grid-column: 10 / 12; +} diff --git a/scss/modules/nav.md.scss b/scss/modules/nav.md.scss new file mode 100644 index 0000000..c3f4a18 --- /dev/null +++ b/scss/modules/nav.md.scss @@ -0,0 +1,11 @@ +.nav__nav-links li:nth-child(3) { + grid-column: 5 / 8; +} + +.nav__nav-links li:nth-child(4) { + grid-column: 1 / 3; +} + +.nav__nav-links li:nth-child(5) { + grid-column: 3 / 5; +}
\ No newline at end of file diff --git a/scss/modules/nav.scss b/scss/modules/nav.scss new file mode 100644 index 0000000..44ec5c6 --- /dev/null +++ b/scss/modules/nav.scss @@ -0,0 +1,77 @@ +.nav > :not(:last-child) { + margin-block-end: var(--margin-block-sm); +} + +.nav__bottom-row { + display: flex; + flex-direction: column; +} + +.nav__nav-links { + display: grid; + grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); + column-gap: var(--grid-gutter-width); +} + +.nav__nav-links li { + margin: 0; +} + +.nav__logo { + font-family: var(--font-serif); + font-size: var(--font-size-5); + font-weight: 700; + + /* This gradient is based on * + * --color-primary-60 -> --color-secondary-60 * + * using Josh W Comeau's gradient generator */ + width: fit-content; + background-image: linear-gradient( + 45deg, + hsl(248deg 100% 75%) 0%, + hsl(227deg 100% 70%) 24%, + hsl(211deg 100% 58%) 40%, + hsl(205deg 100% 50%) 51%, + hsl(202deg 100% 49%) 60%, + hsl(200deg 100% 47%) 66%, + hsl(197deg 100% 44%) 70%, + hsl(194deg 100% 41%) 73%, + hsl(190deg 100% 38%) 76%, + hsl(186deg 100% 35%) 79%, + hsl(181deg 100% 33%) 84%, + hsl(177deg 100% 32%) 100% + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.nav__logo a { + text-decoration: none; + border: var(--relative-eighth-rem) dotted transparent; + transition: border-color 100ms; +} + +.nav__logo a:is(:focus, :focus-visible, :focus-within) { + box-shadow: none; + outline: none; + border-color: var(--special-text-color); + transition: border-color 300ms; +} + +.nav__breadcrumbs { + display: flex; + flex-wrap: wrap; +} + +.nav__breadcrumbs li { + list-style-type: none; + min-width: max-content; +} + +.nav__breadcrumbs li::before { + content: '/' +} + +.nav__switch-language-link { + text-align: right; +} diff --git a/scss/modules/nav.xs.scss b/scss/modules/nav.xs.scss new file mode 100644 index 0000000..708652c --- /dev/null +++ b/scss/modules/nav.xs.scss @@ -0,0 +1,19 @@ +.nav__nav-links li:nth-child(1) { + grid-column: 1 / 3; +} + +.nav__nav-links li:nth-child(2) { + grid-column: 3 / 5; +} + +.nav__nav-links li:nth-child(3) { + grid-column: 1 / 4; +} + +.nav__nav-links li:nth-child(4) { + grid-column: 1 / 3; +} + +.nav__nav-links li:nth-child(5) { + grid-column: 3 / 5; +} diff --git a/scss/modules/news-index.scss b/scss/modules/news-index.scss new file mode 100644 index 0000000..0050f70 --- /dev/null +++ b/scss/modules/news-index.scss @@ -0,0 +1,31 @@ +.news-index__item { + display: block; + box-sizing: border-box; + border: var(--relative-eighth-rem) solid var(--text-color); + transition: background 100ms; + padding-block: var(--margin-block-md); + padding-inline: var(--padding-inline-sm); + width: var(--width-prose); +} + +.news-index__item:not(:first-child) { + border-top-width: 0; +} + +.news-index__item:is(:hover, :focus, :focus-visible, :focus-within) { + outline: none; + box-shadow: none; + color: var(--text-highlight-color); + border-color: var(--background-highlight-color); + background: var(--background-highlight-color); + transition-duration: 300ms; +} + +.news-index__item:is(:hover, :focus, :focus-visible, :focus-within) .link { + color: var(--special-text-highlight-color); +} + +.news-index__item:is(:focus, :focus-visible, :focus-within) { + border-color: var(--special-text-highlight-color); + border-style: dotted; +}
\ No newline at end of file diff --git a/scss/modules/product.scss b/scss/modules/product.scss new file mode 100644 index 0000000..32fa37f --- /dev/null +++ b/scss/modules/product.scss @@ -0,0 +1,20 @@ +.product__header-block { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + gap: var(--spacing-inline-sm); +} + +.product__action-block { + display: flex; + flex-direction: column; + margin-inline: auto; + width: fit-content; + gap: var(--margin-block-sm); +} + +.product__action-block img { + max-width: 12rem; + width: 100%; + height: auto; +} diff --git a/scss/modules/schedule.md.scss b/scss/modules/schedule.md.scss new file mode 100644 index 0000000..9ccfb0b --- /dev/null +++ b/scss/modules/schedule.md.scss @@ -0,0 +1,16 @@ +.schedule { + display: grid; + grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); + column-gap: var(--grid-gutter-width); +} + +.schedule dt { + grid-column: 1 / 3; + margin: 0; + text-align: end; +} + +.schedule dd { + grid-column: 3 / calc(1 + var(--grid-prose-column-count)); + text-align: start; +} diff --git a/scss/modules/schedule.scss b/scss/modules/schedule.scss new file mode 100644 index 0000000..140767c --- /dev/null +++ b/scss/modules/schedule.scss @@ -0,0 +1,13 @@ +.schedule:not(:first-child) { + margin-block-start: var(--margin-block-sm); +} + +.schedule dt { + font-weight: 700; + margin-block-start: var(--margin-block-sm); + text-align: center; +} + +.schedule dd { + text-align: center; +} diff --git a/scss/modules/skip-to-content.scss b/scss/modules/skip-to-content.scss new file mode 100644 index 0000000..a752b29 --- /dev/null +++ b/scss/modules/skip-to-content.scss @@ -0,0 +1,13 @@ +.skip-to-content { + position: absolute; + left: var(--grid-padding); + top: -10rem; + opacity: 0; + transition: top 300ms, opacity 300ms; +} + +.skip-to-content:is(:focus, :focus-visible, :focus-within) { + top: var(--margin-block-md); + opacity: 1; + transition: top 100ms; +}
\ No newline at end of file diff --git a/scss/normalize.scss b/scss/normalize.scss new file mode 100644 index 0000000..0130a0b --- /dev/null +++ b/scss/normalize.scss @@ -0,0 +1,116 @@ +:root, +html, +body, +main, +article, +section, +header, +footer, +button, +ol, +ul, +li, +dl, +dt, +dd, +p, +h1, +h2, +h3, +h4 { + margin: 0; + padding: 0; +} + +html { + -webkit-text-size-adjust: 100%; +} + +main { + display: block; +} + +hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} + +pre { + font-family: monospace, monospace; + font-size: 1em; +} + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +b, +strong { + font-weight: bolder; +} + +small { + font-size: 80%; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +img { + border-style: none; +} + +button, [type='button'], [type='reset'], [type='submit'] { + font-family: inherit; + font-size: 100%; + line-height: 1.15; + text-transform: none; + overflow: visible; +} + +:is(button, [type='button'], [type='reset'], [type='submit'])::-moz-focus-inner { + border-style: none; + padding: 0; +} + +:is(button, [type='button'], [type='reset'], [type='submit']):-moz-focusring { + outline: 1px dotted ButtonText; +} + +details { + display: block; +} + +summary { + display: list-item; +} + +[hidden] { + display: none; +} + +a, :link, :visited { + background-color: transparent; + color: currentColor; + text-decoration: none; +} + +li { + list-style: none; +} diff --git a/scss/utils.scss b/scss/utils.scss new file mode 100644 index 0000000..a05a216 --- /dev/null +++ b/scss/utils.scss @@ -0,0 +1,7 @@ +.italic { + font-style: italic; +} + +.font-weight-lighter { + font-weight: lighter; +} diff --git a/scss/variables/colours.scss b/scss/variables/colours.scss new file mode 100644 index 0000000..65dd421 --- /dev/null +++ b/scss/variables/colours.scss @@ -0,0 +1,21 @@ +:root { + --text-color: var(--color-primary-98); + --text-highlight-color: var(--color-primary-10); + --background-color: var(--color-primary-10); + --background-highlight-color: var(--color-primary-90); + --special-text-color: var(--color-secondary-90); + --special-text-highlight-color: var(--color-secondary-10); +} + +:is(main, article) { + --text-color: var(--color-primary-10); + --text-highlight-color: var(--color-primary-90); + --background-color: var(--color-primary-98); + --background-highlight-color: var(--color-primary-10); + --special-text-color: var(--color-secondary-40); + --special-text-highlight-color: var(--color-secondary-90); +} + +:is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)) { + --background-color: var(--color-primary-95); +} diff --git a/scss/variables/index.lg.scss b/scss/variables/index.lg.scss new file mode 100644 index 0000000..598c04f --- /dev/null +++ b/scss/variables/index.lg.scss @@ -0,0 +1,2 @@ +@use 'spacing.lg' as *; + diff --git a/scss/variables/index.md.scss b/scss/variables/index.md.scss new file mode 100644 index 0000000..b2bf6ac --- /dev/null +++ b/scss/variables/index.md.scss @@ -0,0 +1,3 @@ +@use 'spacing.md' as *; +@use 'typography.md' as *; + diff --git a/scss/variables/index.scss b/scss/variables/index.scss new file mode 100644 index 0000000..57403d6 --- /dev/null +++ b/scss/variables/index.scss @@ -0,0 +1,5 @@ +@use 'colours' as *; +@use 'palette' as *; +@use 'spacing' as *; +@use 'typography' as *; + diff --git a/scss/variables/index.sm.scss b/scss/variables/index.sm.scss new file mode 100644 index 0000000..1ed077f --- /dev/null +++ b/scss/variables/index.sm.scss @@ -0,0 +1,2 @@ +@use 'spacing.sm' as *; + diff --git a/scss/variables/index.xl.scss b/scss/variables/index.xl.scss new file mode 100644 index 0000000..6e082d1 --- /dev/null +++ b/scss/variables/index.xl.scss @@ -0,0 +1,2 @@ +@use 'spacing.xl' as *; + diff --git a/scss/variables/index.xs.scss b/scss/variables/index.xs.scss new file mode 100644 index 0000000..fd7abc2 --- /dev/null +++ b/scss/variables/index.xs.scss @@ -0,0 +1,3 @@ +@use 'spacing.xs' as *; +@use 'typography.xs' as *; + diff --git a/scss/variables/index.xxl.scss b/scss/variables/index.xxl.scss new file mode 100644 index 0000000..8d40b0c --- /dev/null +++ b/scss/variables/index.xxl.scss @@ -0,0 +1,2 @@ +@use 'spacing.xxl' as *; + diff --git a/scss/variables/palette.scss b/scss/variables/palette.scss new file mode 100644 index 0000000..f40bb89 --- /dev/null +++ b/scss/variables/palette.scss @@ -0,0 +1,35 @@ +:root { + --color-primary-0: #000000; + --color-primary-10: #190064; + --color-primary-20: #2d009d; + --color-primary-25: #381aa8; + --color-primary-30: #442bb3; + --color-primary-35: #503abf; + --color-primary-40: #5c48cc; + --color-primary-50: #7663e7; + --color-primary-60: #907eff; + --color-primary-70: #ac9fff; + --color-primary-80: #c8bfff; + --color-primary-90: #e5deff; + --color-primary-95: #f4eeff; + --color-primary-98: #fdf8ff; + --color-primary-99: #fffbff; + --color-primary-100: #ffffff; + + --color-secondary-0: #000000; + --color-secondary-10: #00201e; + --color-secondary-20: #003733; + --color-secondary-25: #00433f; + --color-secondary-30: #00504b; + --color-secondary-35: #005d57; + --color-secondary-40: #006a64; + --color-secondary-50: #00867e; + --color-secondary-60: #00a299; + --color-secondary-70: #26bfb4; + --color-secondary-80: #50dbcf; + --color-secondary-90: #71f7ec; + --color-secondary-95: #b2fff6; + --color-secondary-98: #e4fffb; + --color-secondary-99: #f2fffc; + --color-secondary-100: #ffffff; +}
\ No newline at end of file diff --git a/scss/variables/spacing.lg.scss b/scss/variables/spacing.lg.scss new file mode 100644 index 0000000..bc18bfd --- /dev/null +++ b/scss/variables/spacing.lg.scss @@ -0,0 +1,6 @@ +:root { + --grid-total-width: 64rem; + --grid-padding-relative-eighth-rem: 20; + --grid-column-count: 12; + --grid-prose-column-count: 8; +}
\ No newline at end of file diff --git a/scss/variables/spacing.md.scss b/scss/variables/spacing.md.scss new file mode 100644 index 0000000..0028e8a --- /dev/null +++ b/scss/variables/spacing.md.scss @@ -0,0 +1,6 @@ +:root { + --grid-total-width: 48rem; + --grid-padding-relative-eighth-rem: 16; + --grid-column-count: 8; + --grid-prose-column-count: 8; +}
\ No newline at end of file diff --git a/scss/variables/spacing.scss b/scss/variables/spacing.scss new file mode 100644 index 0000000..a4d1d91 --- /dev/null +++ b/scss/variables/spacing.scss @@ -0,0 +1,47 @@ +:root { + --margin-inline-md: calc(2 * var(--relative-eighth-rem)); + --margin-block-lg: calc(16 * var(--relative-eighth-rem)); + --margin-block-md: calc(10 * var(--relative-eighth-rem)); + --margin-block-sm: calc(5 * var(--relative-eighth-rem)); + + --padding-inline-lg: calc(4 * var(--relative-eighth-rem)); + --padding-inline-md: calc(2 * var(--relative-eighth-rem)); + --padding-inline-sm: calc(1 * var(--relative-eighth-rem)); + --padding-block-lg: calc(12 * var(--relative-eighth-rem)); + --padding-block-md: calc(8 * var(--relative-eighth-rem)); + --padding-block-sm: calc(5 * var(--relative-eighth-rem)); + + --grid-padding: calc(var(--grid-padding-relative-eighth-rem) * var(--relative-eighth-rem)); + --grid-column-width: calc(var(--grid-column-width-relative-eighth-rem) * var(--relative-eighth-rem)); + --grid-gutter-width: calc(var(--grid-gutter-width-relative-eighth-rem) * var(--relative-eighth-rem)); + + --grid-total-relative-eighth-rem-width: calc( + var(--grid-padding-relative-eighth-rem) * 2 + + var(--grid-column-width-relative-eighth-rem) * var(--grid-column-count) + + var(--grid-gutter-width-relative-eighth-rem) * (var(--grid-column-count) - 1) + ); + --relative-eighth-rem: calc( + var(--grid-total-width) / var(--grid-total-relative-eighth-rem-width) + ); + --width-prose: calc( + var(--grid-column-width) * var(--grid-prose-column-count) + + var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1) + ); + + --grid-column-width-relative-eighth-rem: 32; + --grid-gutter-width-relative-eighth-rem: 4; + + /*********************************************************** + * Generally, we will use columns to keep things laid out * + * nicely. However, on screens narrower than xs, this gets * + * pretty much impossible. So for those screens, we use a * + * single-column layout taking up 100vw. In effect, this * + * is just default CSS layout plus a wee bit padding. From * + * xs widewards, we use multiple columns on a fixed width. * + ***********************************************************/ + + --grid-total-width: 100vw; + --grid-padding-relative-eighth-rem: 8; + --grid-column-count: 1; + --grid-prose-column-count: 1; +} diff --git a/scss/variables/spacing.sm.scss b/scss/variables/spacing.sm.scss new file mode 100644 index 0000000..7cdf26f --- /dev/null +++ b/scss/variables/spacing.sm.scss @@ -0,0 +1,4 @@ +:root { + --grid-total-width: 30rem; + --grid-padding-relative-eighth-rem: 12; +} diff --git a/scss/variables/spacing.xl.scss b/scss/variables/spacing.xl.scss new file mode 100644 index 0000000..fc8b1f3 --- /dev/null +++ b/scss/variables/spacing.xl.scss @@ -0,0 +1,10 @@ +:root { + --grid-total-width: 80rem; + --grid-padding-relative-eighth-rem: 26; + --grid-column-count: 12; + --grid-prose-column-count: 8; + --width-prose: calc( + var(--grid-column-width) * min(8, var(--grid-column-count)) + + var(--grid-gutter-width) * min(7, (var(--grid-column-count) - 1)) + ); +}
\ No newline at end of file diff --git a/scss/variables/spacing.xs.scss b/scss/variables/spacing.xs.scss new file mode 100644 index 0000000..fb7c01a --- /dev/null +++ b/scss/variables/spacing.xs.scss @@ -0,0 +1,6 @@ +:root { + --grid-total-width: 15rem; + --grid-padding-relative-eighth-rem: 8; + --grid-column-count: 4; + --grid-prose-column-count: 4; +} diff --git a/scss/variables/spacing.xxl.scss b/scss/variables/spacing.xxl.scss new file mode 100644 index 0000000..17d2f66 --- /dev/null +++ b/scss/variables/spacing.xxl.scss @@ -0,0 +1,6 @@ +:root { + --grid-total-width: 100rem; + --grid-padding-relative-eighth-rem: 32; + --grid-column-count: 12; + --grid-prose-column-count: 8; +}
\ No newline at end of file diff --git a/scss/variables/typography.md.scss b/scss/variables/typography.md.scss new file mode 100644 index 0000000..2c36d1d --- /dev/null +++ b/scss/variables/typography.md.scss @@ -0,0 +1,9 @@ +:root { + --font-size-0: calc(7 * var(--relative-eighth-rem)); + --font-size-1: calc(9 * var(--relative-eighth-rem)); + --font-size-2: calc(12 * var(--relative-eighth-rem)); + --font-size-3: calc(16 * var(--relative-eighth-rem)); + --font-size-4: calc(20 * var(--relative-eighth-rem)); + --font-size-5: calc(26 * var(--relative-eighth-rem)); + --font-size-6: calc(32 * var(--relative-eighth-rem)); +}
\ No newline at end of file diff --git a/scss/variables/typography.scss b/scss/variables/typography.scss new file mode 100644 index 0000000..f8515fd --- /dev/null +++ b/scss/variables/typography.scss @@ -0,0 +1,42 @@ +:root { + --font-size-0: calc(8 * var(--relative-eighth-rem)); + --font-size-1: calc(8 * var(--relative-eighth-rem)); + --font-size-2: calc(8 * var(--relative-eighth-rem)); + --font-size-3: calc(8 * var(--relative-eighth-rem)); + --font-size-4: calc(8 * var(--relative-eighth-rem)); + --font-size-5: calc(8 * var(--relative-eighth-rem)); + --font-size-6: calc(8 * var(--relative-eighth-rem)); + + --font-serif: + Alegreya, + -apple-system-ui-serif, + Iowan Old Style, + Apple Garamond, + Baskerville, + Sitka, "Sitka Display", "Sitka Heading", "Sitka Text", + Times New Roman, + Droid Serif, + Times, + Source Serif Pro, + serif, + Apple Color Emoji, + Segoe UI Emoji, + Segoe UI Symbol; + + --font-sans-serif: + 'Alegreya Sans', + Lato, + -apple-system, + BlinkMacSystemFont, + avenir next, + avenir, + segoe ui, + helvetica neue, + helvetica, + Cantarell, + Ubuntu, + roboto, + noto, + arial, + sans-serif +}
\ No newline at end of file diff --git a/scss/variables/typography.xs.scss b/scss/variables/typography.xs.scss new file mode 100644 index 0000000..6375aad --- /dev/null +++ b/scss/variables/typography.xs.scss @@ -0,0 +1,9 @@ +:root { + --font-size-0: calc(6 * var(--relative-eighth-rem)); + --font-size-1: calc(8 * var(--relative-eighth-rem)); + --font-size-2: calc(11 * var(--relative-eighth-rem)); + --font-size-3: calc(14 * var(--relative-eighth-rem)); + --font-size-4: calc(18 * var(--relative-eighth-rem)); + --font-size-5: calc(23 * var(--relative-eighth-rem)); + --font-size-6: calc(28 * var(--relative-eighth-rem)); +}
\ No newline at end of file |