Merge pull request #20 from Sycamost/dev

Dev

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