diff options
77 files changed, 612 insertions, 268 deletions
diff --git a/scss/base/typography.scss b/scss/base/typography.scss index 9f40bcc..4dd0afb 100644 --- a/scss/base/typography.scss +++ b/scss/base/typography.scss @@ -5,6 +5,7 @@ body { letter-spacing: 0.03rem; line-height: 1.5; word-wrap: break-word; + hyphens: auto; } h1 { @@ -12,7 +13,7 @@ h1 { } h1:not(:first-child) { - margin-block-start: var(--margin-block-lg); + margin-block-start: var(--spacing-block-lg); } h2 { @@ -20,7 +21,7 @@ h2 { } h2:not(:first-child) { - margin-block-start: var(--margin-block-lg); + margin-block-start: var(--spacing-block-lg); } h3 { @@ -28,7 +29,7 @@ h3 { } h3:not(:first-child) { - margin-block-start: var(--margin-block-md); + margin-block-start: var(--spacing-block-md); } h4 { @@ -36,7 +37,7 @@ h4 { } h4:not(:first-child) { - margin-block-start: var(--margin-block-sm); + margin-block-start: var(--spacing-block-sm); } h1, @@ -53,7 +54,7 @@ h4 { font-family: var(--font-serif); font-size: var(--font-size-6); font-weight: 700; - margin-block-start: var(--margin-block-sm); + margin-block-start: var(--spacing-block-sm); text-wrap: balance; } @@ -63,7 +64,7 @@ h4 { } :is(p, ol, ul):not(:first-child) { - margin-block-start: var(--margin-block-sm); + margin-block-start: var(--spacing-block-sm); } :is(p, h1, h2, h3, h4) { 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/spacing/_mixins.scss b/scss/custom-properties/spacing/_mixins.scss new file mode 100644 index 0000000..4e35ee7 --- /dev/null +++ b/scss/custom-properties/spacing/_mixins.scss @@ -0,0 +1,21 @@ +@use 'sass:map'; + +@use '../../values/spacing' as spacing-values; + +@mixin spacing($breakpoint: initial) { + --spacing-inline-lg: #{spacing-values.spacing($direction: inline, $size: lg, $breakpoint: $breakpoint)}; + --spacing-inline-md: #{spacing-values.spacing($direction: inline, $size: md, $breakpoint: $breakpoint)}; + --spacing-inline-sm: #{spacing-values.spacing($direction: inline, $size: sm, $breakpoint: $breakpoint)}; + --spacing-block-lg: #{spacing-values.spacing($direction: block, $size: lg, $breakpoint: $breakpoint)}; + --spacing-block-md: #{spacing-values.spacing($direction: block, $size: md, $breakpoint: $breakpoint)}; + --spacing-block-sm: #{spacing-values.spacing($direction: block, $size: sm, $breakpoint: $breakpoint)}; +} + +@mixin grid($breakpoint: initial) { + --grid-padding: #{spacing-values.grid-padding($breakpoint: $breakpoint)}; + --grid-column-count: #{map.get(spacing-values.$grid-column-count, $breakpoint)}; + --grid-column-width: #{spacing-values.grid-column-width($breakpoint: $breakpoint)}; + --grid-gutter-width: #{spacing-values.grid-gutter-width($breakpoint: $breakpoint)}; + --grid-prose-column-count: #{map.get(spacing-values.$grid-prose-column-count, $breakpoint)}; + --grid-total-width: #{spacing-values.grid-total-width-absolute($breakpoint)}; +} 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/typography/_mixins.scss b/scss/custom-properties/typography/_mixins.scss new file mode 100644 index 0000000..a370356 --- /dev/null +++ b/scss/custom-properties/typography/_mixins.scss @@ -0,0 +1,12 @@ +@use '../../values/typography' as typography-values; + +@mixin font-sizes($breakpoint: initial) { + --font-size-0: #{typography-values.font-size('0', $breakpoint)}; + --font-size-1: #{typography-values.font-size('1', $breakpoint)}; + --font-size-2: #{typography-values.font-size('2', $breakpoint)}; + --font-size-3: #{typography-values.font-size('3', $breakpoint)}; + --font-size-4: #{typography-values.font-size('4', $breakpoint)}; + --font-size-5: #{typography-values.font-size('5', $breakpoint)}; + --font-size-6: #{typography-values.font-size('6', $breakpoint)}; +} + diff --git a/scss/variables/typography.scss b/scss/custom-properties/typography/initial.scss index f8515fd..c9d95da 100644 --- a/scss/variables/typography.scss +++ b/scss/custom-properties/typography/initial.scss @@ -1,11 +1,10 @@ +@use 'mixins'; + +@use '../../values/typography' as typography-values; + :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)); + @include mixins.font-sizes(); + --border-width: #{typography-values.border-width()}; --font-serif: Alegreya, @@ -38,5 +37,5 @@ roboto, noto, arial, - sans-serif -}
\ No newline at end of file + 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/index.lg.scss b/scss/index.lg.scss index 4060f14..622262f 100644 --- a/scss/index.lg.scss +++ b/scss/index.lg.scss @@ -1,3 +1,3 @@ @use 'modules/index.lg' as *; -@use 'variables/index.lg' as *; +@use 'custom-properties/index.lg' as *; diff --git a/scss/index.md.scss b/scss/index.md.scss index a49e979..e7f1fbd 100644 --- a/scss/index.md.scss +++ b/scss/index.md.scss @@ -1,4 +1,4 @@ @use 'layout/index.md' as *; @use 'modules/index.md' as *; -@use 'variables/index.md' as *; +@use 'custom-properties/index.md' as *; diff --git a/scss/index.scss b/scss/index.scss index 485e64c..b8e2334 100644 --- a/scss/index.scss +++ b/scss/index.scss @@ -2,6 +2,6 @@ @use 'base/index' as *; @use 'layout/index' as *; @use 'modules/index' as *; -@use 'variables/index' as *; +@use 'custom-properties/index' as *; @use 'utils' as *; diff --git a/scss/index.sm.scss b/scss/index.sm.scss index 37c6ec7..0ea47c9 100644 --- a/scss/index.sm.scss +++ b/scss/index.sm.scss @@ -1,2 +1,3 @@ -@use 'variables/index.sm' as *; +@use 'modules/index.sm' as *; +@use 'custom-properties/index.sm' as *; diff --git a/scss/index.xl.scss b/scss/index.xl.scss index 7848b38..e692c09 100644 --- a/scss/index.xl.scss +++ b/scss/index.xl.scss @@ -1,3 +1,3 @@ @use 'modules/index.xl' as *; -@use 'variables/index.xl' as *; +@use 'custom-properties/index.xl' as *; diff --git a/scss/index.xs.scss b/scss/index.xs.scss index 6aee8e5..78bc9bf 100644 --- a/scss/index.xs.scss +++ b/scss/index.xs.scss @@ -1,4 +1,4 @@ @use 'layout/index.xs' as *; @use 'modules/index.xs' as *; -@use 'variables/index.xs' as *; +@use 'custom-properties/index.xs' as *; diff --git a/scss/index.xxl.scss b/scss/index.xxl.scss index 067147c..67ec408 100644 --- a/scss/index.xxl.scss +++ b/scss/index.xxl.scss @@ -1,2 +1,2 @@ -@use 'variables/index.xxl' as *; +@use 'custom-properties/index.xxl' as *; diff --git a/scss/layout/section-margins.scss b/scss/layout/section-margins.scss index a11073f..8105dcb 100644 --- a/scss/layout/section-margins.scss +++ b/scss/layout/section-margins.scss @@ -1,14 +1,13 @@ :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); + padding-block: var(--spacing-block-md); } footer { - padding-block-start: var(--margin-block-md); - padding-block-end: var(--margin-block-lg); + padding-block-start: var(--spacing-block-md); + padding-block-end: var(--spacing-block-lg); } nav { - padding-block-start: var(--margin-block-sm); - padding-block-end: var(--margin-block-md); -}
\ No newline at end of file + 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 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); } diff --git a/scss/utils.scss b/scss/utils.scss index f8336eb..7cd2a58 100644 --- a/scss/utils.scss +++ b/scss/utils.scss @@ -2,10 +2,6 @@ font-style: italic; } -.font-weight-lighter { - font-weight: lighter; -} - li.list-style-none, .list-style-none li { list-style-type: none; } diff --git a/scss/values/_colours.scss b/scss/values/_colours.scss new file mode 100644 index 0000000..40db6e8 --- /dev/null +++ b/scss/values/_colours.scss @@ -0,0 +1,34 @@ +$primary-0: #000000; +$primary-10: #190064; +$primary-20: #2d009d; +$primary-25: #381aa8; +$primary-30: #442bb3; +$primary-35: #503abf; +$primary-40: #5c48cc; +$primary-50: #7663e7; +$primary-60: #907eff; +$primary-70: #ac9fff; +$primary-80: #c8bfff; +$primary-90: #e5deff; +$primary-95: #f4eeff; +$primary-98: #fdf8ff; +$primary-99: #fffbff; +$primary-100: #ffffff; + +$secondary-0: #000000; +$secondary-10: #00201e; +$secondary-20: #003733; +$secondary-25: #00433f; +$secondary-30: #00504b; +$secondary-35: #005d57; +$secondary-40: #006a64; +$secondary-50: #00867e; +$secondary-60: #00a299; +$secondary-70: #26bfb4; +$secondary-80: #50dbcf; +$secondary-90: #71f7ec; +$secondary-95: #b2fff6; +$secondary-98: #e4fffb; +$secondary-99: #f2fffc; +$secondary-100: #ffffff; + diff --git a/scss/values/spacing/_constants.scss b/scss/values/spacing/_constants.scss new file mode 100644 index 0000000..9a990b8 --- /dev/null +++ b/scss/values/spacing/_constants.scss @@ -0,0 +1,58 @@ +$grid-column-width-er: 32; +$grid-gutter-width-er: 4; + +$grid-padding-er: ( + 'xxl': 32, + 'xl': 26, + 'lg': 20, + 'md': 16, + 'sm': 12, + 'xs': 4, + 'initial': 1 +); + +$grid-column-count: ( + 'xxl': 12, + 'xl': 12, + 'lg': 12, + 'md': 8, + 'sm': 8, + 'xs': 4, + 'initial': 1 +); + +$grid-prose-column-count: ( + 'xxl': 8, + 'xl': 8, + 'lg': 8, + 'md': 8, + 'sm': 8, + 'xs': 4, + 'initial': 1 +); + +$grid-padding-er: ( + 'xxl': 32, + 'xl': 26, + 'lg': 20, + 'md': 16, + 'sm': 12, + 'xs': 4, + 'initial': 1 +); + +$spacing-factor: ( + 'inline': (lg: 4, md: 2, sm: 1), + 'block': (lg: 16, md: 10, sm: 5) +); + +$grid-min-total-width-absolute: ( + 'xxl': 100rem, + 'xl': 80rem, + 'lg': 64rem, + 'md': 48rem, + 'sm': 30rem, + 'xs': 100vw, + 'initial': 100vw +); + diff --git a/scss/values/spacing/_grid.scss b/scss/values/spacing/_grid.scss new file mode 100644 index 0000000..50d11c9 --- /dev/null +++ b/scss/values/spacing/_grid.scss @@ -0,0 +1,63 @@ +@use 'sass:list'; +@use 'sass:map'; + +@use 'constants'; + +@function padding($breakpoint: initial) { + @return er-to-absolute(map.get(constants.$grid-padding-er, $breakpoint), $breakpoint); +} + +@function column-width($breakpoint: initial) { + @return er-to-absolute(constants.$grid-column-width-er, $breakpoint); +} + +@function gutter-width($breakpoint: initial) { + @return er-to-absolute(constants.$grid-gutter-width-er, $breakpoint); +} + +@function column-count($breakpoint: initial) { + @return map.get(constants.$grid-column-count, $breakpoint); +} + +@function total-width-er($breakpoint) { + $padding-width: calc(2 * map.get(constants.$grid-padding-er, $breakpoint)); + $column-count: map.get(constants.$grid-column-count, $breakpoint); + $columns-width: calc($column-count * constants.$grid-column-width-er); + $gutters-width: calc(($column-count - 1) * constants.$grid-gutter-width-er); + @return $padding-width + $columns-width + $gutters-width; +} + +@function total-width-absolute($breakpoint: initial) { + /** + * In theory, the grid total width should be clamped between the min at this + * breakpoint and the min at the next breakpoint minus grid padding. In + * practice, the only time this makes a difference is at xs, so at every + * other breakpoint, we'll just return the min at the current breakpoint. + */ + + @if $breakpoint == xs { + $min-width-xs: map.get(constants.$grid-min-total-width-absolute, xs); + $min-width-sm: map.get(constants.$grid-min-total-width-absolute, sm); + $padding-sm: calc(2 * padding(sm)); + @return min($min-width-xs, calc($min-width-sm - $padding-sm)); + } + + @return map.get(constants.$grid-min-total-width-absolute, $breakpoint); +} + +/** + * Converts er units to absolute units. + * + * This doesn't really belong here, but I think it has to, because it depends + * on grid-total-width-absolute which depends on grid-padding which depends on + * this. It's fine here, it's just a recursion. But if it lived in a separate + * module you'd end up with a circular dependency. + */ +@function er-to-absolute($length-er, $breakpoint: initial) { + $absolute-per-er: calc( + total-width-absolute($breakpoint) + / total-width-er($breakpoint) + ); + @return calc($length-er * $absolute-per-er); +} + diff --git a/scss/values/spacing/_index.scss b/scss/values/spacing/_index.scss new file mode 100644 index 0000000..8f8a454 --- /dev/null +++ b/scss/values/spacing/_index.scss @@ -0,0 +1,24 @@ +/** + * 'er' (from 'eighth-rem') is a conceptual unit of length. It is determined + * by the total width of the grid, the relative eighth rem length of the grid + * padding, and the number of columns in the grid. This means you can just + * specify those values for each breakpoint, and the rest of the nitty-gritty + * griddy details happens by SCSS magic. + */ + +/** + * Breakpoints can be: + * - initial + * - xs + * - sm + * - md + * - lg + * - xl + * - xxl + */ + +@forward 'constants' show $grid-column-count, $grid-prose-column-count; +@forward 'grid' as grid-* hide er-to-absolute; +@forward 'grid' show er-to-absolute; +@forward 'spacing'; + diff --git a/scss/values/spacing/_spacing.scss b/scss/values/spacing/_spacing.scss new file mode 100644 index 0000000..4fd94e8 --- /dev/null +++ b/scss/values/spacing/_spacing.scss @@ -0,0 +1,32 @@ +@use 'sass:list'; +@use 'sass:map'; + +@use 'constants'; +@use 'grid'; + +/** + * - size: sm, md, lg + * - direction: inline, block + */ +@function spacing($direction, $size, $breakpoint: initial) { + $factor: map.get( + map.get(constants.$spacing-factor, $direction), + $size + ); + + @if list.index([xxl xl lg md sm], ($breakpoint)) { + @return grid.er-to-absolute($factor, $breakpoint); + } + @else if $breakpoint == xs { + @return clamp( + spacing($direction, $size, initial), + grid.er-to-absolute($factor, xs), + spacing($direction, $size, sm) + ); + } + @else if $breakpoint == initial { + @return calc($factor * 0.0625rem); + } + @error "Invalid breakpoint: #{$breakpoint}"; +} + diff --git a/scss/values/typography/_constants.scss b/scss/values/typography/_constants.scss new file mode 100644 index 0000000..4ea0117 --- /dev/null +++ b/scss/values/typography/_constants.scss @@ -0,0 +1,20 @@ +$base-font-size: ( + 'xxl': 1.5rem, + 'xl': 1.2rem, + 'lg': 1.1rem, + 'md': 1rem, + 'sm': 0.9rem, + 'xs': 0.8rem, + 'initial': 0.7rem, +); + +$font-size-factor: ( + '0': 1, + '1': 1.25, + '2': 1.5, + '3': 2, + '4': 2.5, + '5': 3, + '6': 3.5 +); + diff --git a/scss/values/typography/_index.scss b/scss/values/typography/_index.scss new file mode 100644 index 0000000..3aa4384 --- /dev/null +++ b/scss/values/typography/_index.scss @@ -0,0 +1,18 @@ +@use 'sass:map'; + +@use 'constants'; + +@function font-size($font-size-grade, $breakpoint: initial) { + @return calc( + map.get(constants.$base-font-size, $breakpoint) + * map.get(constants.$font-size-factor, $font-size-grade) + ); +} + +@function border-width($breakpoint: initial) { + @return calc( + map.get(constants.$base-font-size, $breakpoint) + / 8 + ); +} + diff --git a/scss/variables/colours.scss b/scss/variables/colours.scss deleted file mode 100644 index 65dd421..0000000 --- a/scss/variables/colours.scss +++ /dev/null @@ -1,21 +0,0 @@ -: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 deleted file mode 100644 index 598c04f..0000000 --- a/scss/variables/index.lg.scss +++ /dev/null @@ -1,2 +0,0 @@ -@use 'spacing.lg' as *; - diff --git a/scss/variables/index.md.scss b/scss/variables/index.md.scss deleted file mode 100644 index b2bf6ac..0000000 --- a/scss/variables/index.md.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use 'spacing.md' as *; -@use 'typography.md' as *; - diff --git a/scss/variables/index.scss b/scss/variables/index.scss deleted file mode 100644 index 57403d6..0000000 --- a/scss/variables/index.scss +++ /dev/null @@ -1,5 +0,0 @@ -@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 deleted file mode 100644 index 1ed077f..0000000 --- a/scss/variables/index.sm.scss +++ /dev/null @@ -1,2 +0,0 @@ -@use 'spacing.sm' as *; - diff --git a/scss/variables/index.xl.scss b/scss/variables/index.xl.scss deleted file mode 100644 index 6e082d1..0000000 --- a/scss/variables/index.xl.scss +++ /dev/null @@ -1,2 +0,0 @@ -@use 'spacing.xl' as *; - diff --git a/scss/variables/index.xs.scss b/scss/variables/index.xs.scss deleted file mode 100644 index fd7abc2..0000000 --- a/scss/variables/index.xs.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use 'spacing.xs' as *; -@use 'typography.xs' as *; - diff --git a/scss/variables/index.xxl.scss b/scss/variables/index.xxl.scss deleted file mode 100644 index 8d40b0c..0000000 --- a/scss/variables/index.xxl.scss +++ /dev/null @@ -1,2 +0,0 @@ -@use 'spacing.xxl' as *; - diff --git a/scss/variables/palette.scss b/scss/variables/palette.scss deleted file mode 100644 index f40bb89..0000000 --- a/scss/variables/palette.scss +++ /dev/null @@ -1,35 +0,0 @@ -:root { - --color-primary-0: #000000; - --color-primary-10: #190064; - --color-primary-20: #2d009d; - --color-primary-25: #381aa8; - --color-primary-30: #442bb3; - --color-primary-35: #503abf; - --color-primary-40: #5c48cc; - --color-primary-50: #7663e7; - --color-primary-60: #907eff; - --color-primary-70: #ac9fff; - --color-primary-80: #c8bfff; - --color-primary-90: #e5deff; - --color-primary-95: #f4eeff; - --color-primary-98: #fdf8ff; - --color-primary-99: #fffbff; - --color-primary-100: #ffffff; - - --color-secondary-0: #000000; - --color-secondary-10: #00201e; - --color-secondary-20: #003733; - --color-secondary-25: #00433f; - --color-secondary-30: #00504b; - --color-secondary-35: #005d57; - --color-secondary-40: #006a64; - --color-secondary-50: #00867e; - --color-secondary-60: #00a299; - --color-secondary-70: #26bfb4; - --color-secondary-80: #50dbcf; - --color-secondary-90: #71f7ec; - --color-secondary-95: #b2fff6; - --color-secondary-98: #e4fffb; - --color-secondary-99: #f2fffc; - --color-secondary-100: #ffffff; -}
\ No newline at end of file diff --git a/scss/variables/spacing.lg.scss b/scss/variables/spacing.lg.scss deleted file mode 100644 index bc18bfd..0000000 --- a/scss/variables/spacing.lg.scss +++ /dev/null @@ -1,6 +0,0 @@ -:root { - --grid-total-width: 64rem; - --grid-padding-relative-eighth-rem: 20; - --grid-column-count: 12; - --grid-prose-column-count: 8; -}
\ No newline at end of file diff --git a/scss/variables/spacing.md.scss b/scss/variables/spacing.md.scss deleted file mode 100644 index 0028e8a..0000000 --- a/scss/variables/spacing.md.scss +++ /dev/null @@ -1,6 +0,0 @@ -:root { - --grid-total-width: 48rem; - --grid-padding-relative-eighth-rem: 16; - --grid-column-count: 8; - --grid-prose-column-count: 8; -}
\ No newline at end of file diff --git a/scss/variables/spacing.scss b/scss/variables/spacing.scss deleted file mode 100644 index a4d1d91..0000000 --- a/scss/variables/spacing.scss +++ /dev/null @@ -1,47 +0,0 @@ -:root { - --margin-inline-md: calc(2 * var(--relative-eighth-rem)); - --margin-block-lg: calc(16 * var(--relative-eighth-rem)); - --margin-block-md: calc(10 * var(--relative-eighth-rem)); - --margin-block-sm: calc(5 * var(--relative-eighth-rem)); - - --padding-inline-lg: calc(4 * var(--relative-eighth-rem)); - --padding-inline-md: calc(2 * var(--relative-eighth-rem)); - --padding-inline-sm: calc(1 * var(--relative-eighth-rem)); - --padding-block-lg: calc(12 * var(--relative-eighth-rem)); - --padding-block-md: calc(8 * var(--relative-eighth-rem)); - --padding-block-sm: calc(5 * var(--relative-eighth-rem)); - - --grid-padding: calc(var(--grid-padding-relative-eighth-rem) * var(--relative-eighth-rem)); - --grid-column-width: calc(var(--grid-column-width-relative-eighth-rem) * var(--relative-eighth-rem)); - --grid-gutter-width: calc(var(--grid-gutter-width-relative-eighth-rem) * var(--relative-eighth-rem)); - - --grid-total-relative-eighth-rem-width: calc( - var(--grid-padding-relative-eighth-rem) * 2 + - var(--grid-column-width-relative-eighth-rem) * var(--grid-column-count) + - var(--grid-gutter-width-relative-eighth-rem) * (var(--grid-column-count) - 1) - ); - --relative-eighth-rem: calc( - var(--grid-total-width) / var(--grid-total-relative-eighth-rem-width) - ); - --width-prose: calc( - var(--grid-column-width) * var(--grid-prose-column-count) + - var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1) - ); - - --grid-column-width-relative-eighth-rem: 32; - --grid-gutter-width-relative-eighth-rem: 4; - - /*********************************************************** - * Generally, we will use columns to keep things laid out * - * nicely. However, on screens narrower than xs, this gets * - * pretty much impossible. So for those screens, we use a * - * single-column layout taking up 100vw. In effect, this * - * is just default CSS layout plus a wee bit padding. From * - * xs widewards, we use multiple columns on a fixed width. * - ***********************************************************/ - - --grid-total-width: 100vw; - --grid-padding-relative-eighth-rem: 8; - --grid-column-count: 1; - --grid-prose-column-count: 1; -} diff --git a/scss/variables/spacing.sm.scss b/scss/variables/spacing.sm.scss deleted file mode 100644 index 7cdf26f..0000000 --- a/scss/variables/spacing.sm.scss +++ /dev/null @@ -1,4 +0,0 @@ -: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 deleted file mode 100644 index fc8b1f3..0000000 --- a/scss/variables/spacing.xl.scss +++ /dev/null @@ -1,10 +0,0 @@ -:root { - --grid-total-width: 80rem; - --grid-padding-relative-eighth-rem: 26; - --grid-column-count: 12; - --grid-prose-column-count: 8; - --width-prose: calc( - var(--grid-column-width) * min(8, var(--grid-column-count)) + - var(--grid-gutter-width) * min(7, (var(--grid-column-count) - 1)) - ); -}
\ No newline at end of file diff --git a/scss/variables/spacing.xs.scss b/scss/variables/spacing.xs.scss deleted file mode 100644 index fb7c01a..0000000 --- a/scss/variables/spacing.xs.scss +++ /dev/null @@ -1,6 +0,0 @@ -:root { - --grid-total-width: 15rem; - --grid-padding-relative-eighth-rem: 8; - --grid-column-count: 4; - --grid-prose-column-count: 4; -} diff --git a/scss/variables/spacing.xxl.scss b/scss/variables/spacing.xxl.scss deleted file mode 100644 index 17d2f66..0000000 --- a/scss/variables/spacing.xxl.scss +++ /dev/null @@ -1,6 +0,0 @@ -:root { - --grid-total-width: 100rem; - --grid-padding-relative-eighth-rem: 32; - --grid-column-count: 12; - --grid-prose-column-count: 8; -}
\ No newline at end of file diff --git a/scss/variables/typography.md.scss b/scss/variables/typography.md.scss deleted file mode 100644 index 2c36d1d..0000000 --- a/scss/variables/typography.md.scss +++ /dev/null @@ -1,9 +0,0 @@ -:root { - --font-size-0: calc(7 * var(--relative-eighth-rem)); - --font-size-1: calc(9 * var(--relative-eighth-rem)); - --font-size-2: calc(12 * var(--relative-eighth-rem)); - --font-size-3: calc(16 * var(--relative-eighth-rem)); - --font-size-4: calc(20 * var(--relative-eighth-rem)); - --font-size-5: calc(26 * var(--relative-eighth-rem)); - --font-size-6: calc(32 * var(--relative-eighth-rem)); -}
\ No newline at end of file diff --git a/scss/variables/typography.xs.scss b/scss/variables/typography.xs.scss deleted file mode 100644 index 6375aad..0000000 --- a/scss/variables/typography.xs.scss +++ /dev/null @@ -1,9 +0,0 @@ -:root { - --font-size-0: calc(6 * var(--relative-eighth-rem)); - --font-size-1: calc(8 * var(--relative-eighth-rem)); - --font-size-2: calc(11 * var(--relative-eighth-rem)); - --font-size-3: calc(14 * var(--relative-eighth-rem)); - --font-size-4: calc(18 * var(--relative-eighth-rem)); - --font-size-5: calc(23 * var(--relative-eighth-rem)); - --font-size-6: calc(28 * var(--relative-eighth-rem)); -}
\ No newline at end of file diff --git a/src/components/CommitteeList/CommitteeListItem.astro b/src/components/CommitteeList/CommitteeListItem.astro index 9a5a55b..542d11f 100644 --- a/src/components/CommitteeList/CommitteeListItem.astro +++ b/src/components/CommitteeList/CommitteeListItem.astro @@ -43,8 +43,7 @@ const t = translate(locale); {committeeMember.name} { committeeMember.roles.length > 0 && ( - <span class="font-weight-lighter"> - |{' '} + <span class="committee__member__role"> {committeeMember.roles.map((role) => t(tRole, { key: CommitteeRole[role] })).join(', ')} </span> ) diff --git a/src/i18n/translations/pages/home.ts b/src/i18n/translations/pages/home.ts index 3a81710..b577a46 100644 --- a/src/i18n/translations/pages/home.ts +++ b/src/i18n/translations/pages/home.ts @@ -6,8 +6,8 @@ const tPage = { 'en-GB': () => 'Home', }, submit: { - sco: () => 'Sangschaw apen for submeissions', - 'en-GB': () => 'Sangschaw open for submissions', + sco: () => 'Sang\u00adschaw apen for submeissions', + 'en-GB': () => 'Sang\u00adschaw open for submissions', }, 'submit-para-1': { sco: () => ` @@ -97,13 +97,9 @@ const tPage = { sco: () => 'Meet the Commattee', 'en-GB': () => 'Meet the Committee', }, - 'mair-commattee-details-soon': { - sco: () => 'Mair details comin shuin!', - 'en-GB': () => 'More details coming soon!', - }, furthsettins: { - sco: () => 'Furthsettins', - 'en-GB': () => 'Publications', + sco: () => 'Furth\u00adsettins', + 'en-GB': () => 'Public\u00adations', }, 'furthsettins-para': { sco: () => ` diff --git a/src/i18n/translations/site.ts b/src/i18n/translations/site.ts index 59a8cd4..51e4183 100644 --- a/src/i18n/translations/site.ts +++ b/src/i18n/translations/site.ts @@ -5,8 +5,9 @@ import type { TranslationsDictionary } from '$types/TranslationsDictionary'; const tSite = { title: { - sco: () => 'Scots Leid Associe', - 'en-GB': () => 'Scots Language Society', + // On very narrow screens, use \u00ad to suggest hyphenation points + sco: () => 'Scots Leid Assoc\u00adie', + 'en-GB': () => 'Scots Lang\u00aduage Soc\u00adiety', }, description: { sco: () => 'The wabsteid o the Scots Leid Associe', @@ -21,8 +22,9 @@ const tSite = { 'en-GB': () => 'Scotsoun', }, 'scots-leid-associe': { - sco: () => 'Scots Leid Associe', - 'en-GB': () => 'Scots Language Society', + // On very narrow screens, use \u00ad to suggest hyphenation points + sco: () => 'Scots Leid Assoc\u00adie', + 'en-GB': () => 'Scots Lang\u00aduage Soc\u00adiety', }, by: { sco: () => 'bi', diff --git a/src/pages/[locale]/index.astro b/src/pages/[locale]/index.astro index b08f412..e8b9cf0 100644 --- a/src/pages/[locale]/index.astro +++ b/src/pages/[locale]/index.astro @@ -44,7 +44,6 @@ const mostRecentNewsItem = await getMostRecentNewsItem(locale); <p set:html={t(tPage, { key: 'about-us-para-2' })} /> <p set:html={t(tPage, { key: 'about-us-para-3' })} /> <h3 set:html={t(tPage, { key: 'meet-the-commattee' })} /> - <p class="italic">{t(tPage, { key: 'mair-commattee-details-soon' })}</p> <CommitteeList /> </section> |