Merge pull request #20 from Sycamost/dev

Dev

22 files changed, 447 insertions, 0 deletions

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