will be shown last, which means we can use the ~ and + selectors to
-// target all and the immediately following tabs and / or their corresponding
-// links.
-// The last tab in the DOM (which is shown first because of the reversed
-// flexbox) is shown by default, while the other ones are hidden. If one of the
-// tabs is targeted by the URL's hash, it is shown instead and the default tab
-// is hidden.
-.tabs-widget {
- display: flex;
- flex-direction: row-reverse;
- flex-wrap: wrap;
- justify-content: center;
- margin-top: #{-1 * layout.$large-gap};
-
- > a {
- display: block;
- margin: 0 layout.$normal-gap;
- text-decoration: none;
- color: inherit;
- }
-
- > .tab {
- flex: 100% 1;
- order: -1;
- display: none;
- margin: layout.$large-gap 0;
- padding: layout.$large-gap;
- background: colors.$gray-50;
- @include colors.card-shadow;
-
- &:last-of-type,
- &:target {
- display: block;
-
- + a {
- font-weight: typography.$emphasized-weight;
- color: colors.$blue-800;
- }
- }
-
- &:target {
- ~ .tab {
- display: none;
-
- + a {
- font-weight: inherit;
- color: inherit;
- }
- }
- }
- }
-}
diff --git a/styles/_typography.scss b/styles/_typography.scss
index 09696a9..af9f6a4 100644
--- a/styles/_typography.scss
+++ b/styles/_typography.scss
@@ -1,6 +1,7 @@
$normal-weight: 400;
$emphasized-weight: 600;
+// This is the major third type scale.
$base-size: 1rem;
$title-size: 2.44rem;
$heading-size: 1.95rem;
@@ -37,7 +38,7 @@ $comfortaa-weights: (
html {
$fallback-fonts: Roboto, Arial, sans-serif;
- font-size: 100%;
+ font-size: 125%; // Scale from 16px to 20px
font-family: Comfortaa, $fallback-fonts;
font-weight: $normal-weight;
diff --git a/styles/components/_boxes.scss b/styles/components/_boxes.scss
new file mode 100644
index 0000000..3b43a7d
--- /dev/null
+++ b/styles/components/_boxes.scss
@@ -0,0 +1,56 @@
+@use '../colors';
+@use '../layout';
+
+.boxes-module {
+ padding: layout.$large-gap;
+ background-color: colors.$teal-300;
+
+ .content,
+ .box {
+ &:not(:last-child) {
+ margin-bottom: layout.$large-gap;
+ }
+ }
+
+ .content {
+ > *:first-child {
+ margin-top: 0;
+ }
+
+ > *:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ .box {
+ margin: layout.$large-gap 0;
+ padding: layout.$large-gap;
+ background: colors.$gray-50;
+ @include colors.card-shadow;
+
+ h3 {
+ margin: 0;
+ text-transform: uppercase;
+ }
+ }
+
+ @media screen and (min-width: layout.$breakpoint) {
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+ gap: layout.$large-gap;
+
+ .content,
+ .box {
+ grid-column: span 3;
+ margin: 0;
+
+ &:not(:last-child) {
+ margin-bottom: 0;
+ }
+ }
+
+ .box:not(.first) {
+ grid-column: span 2;
+ }
+ }
+}
diff --git a/styles/components/_forms.scss b/styles/components/_forms.scss
new file mode 100644
index 0000000..00243d8
--- /dev/null
+++ b/styles/components/_forms.scss
@@ -0,0 +1,157 @@
+@use '../colors';
+@use '../layout';
+@use '../typography';
+
+.form-choices {
+ margin: layout.$huge-gap auto;
+ max-width: 50rem;
+ list-style: none;
+ text-align: center;
+
+ > li {
+ position: relative;
+
+ &:before {
+ content: '\2771';
+ display: inline-block;
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ &:not(:last-child) {
+ &:before {
+ top: calc(50% - #{layout.$large-gap / 2});
+ }
+
+ &::after {
+ content: '';
+ display: block;
+ margin: layout.$large-gap auto;
+ width: 15rem;
+ height: 1px;
+ background-color: colors.$gray-300;
+ }
+ }
+
+ > a {
+ padding: layout.$small-gap layout.$normal-gap;
+ display: inline-block;
+ line-height: 2.5;
+ text-decoration: none;
+
+ &:hover {
+ background-color: colors.$yellow-600;
+ color: inherit;
+ @include colors.card-shadow;
+ }
+
+ > em {
+ padding-block: layout.$small-gap;
+ font-style: inherit;
+ background-color: colors.$yellow-600;
+ }
+ }
+ }
+}
+
+%form-item {
+ display: flex;
+ align-items: center;
+ margin: layout.$normal-gap auto;
+ max-width: 50rem;
+}
+
+%form-label {
+ font-weight: typography.$emphasized-weight;
+ color: colors.$blue-800;
+}
+
+%base-form-input {
+ background-color: transparent;
+ border: #{2px / 16px * 1rem} solid colors.$blue-800;
+}
+
+%form-input {
+ @extend %base-form-input;
+ padding: layout.$small-gap;
+ font: inherit;
+
+ &:hover {
+ background-color: colors.$gray-300;
+ }
+
+ &:focus-visible,
+ &:active {
+ outline: none;
+ background-color: colors.$yellow-600;
+ }
+}
+
+.form-input {
+ @extend %form-item;
+
+ > span {
+ @extend %form-label;
+ flex-grow: 1;
+ text-align: right;
+ }
+
+ > input,
+ > textarea {
+ @extend %form-input;
+ flex-basis: 60%;
+ margin-left: layout.$normal-gap;
+ }
+}
+
+.form-checkbox {
+ $size: 2rem;
+ $gap: layout.$small-gap;
+
+ @extend %form-item;
+ justify-content: flex-end;
+
+ &:hover > div {
+ background-color: colors.$gray-300;
+ }
+
+ > input {
+ opacity: 0;
+
+ &:checked + div::before {
+ content: '\2713';
+ font-size: 1.8rem;
+ line-height: $size;
+ }
+
+ &:focus-visible + div {
+ background-color: colors.$yellow-600;
+ }
+ }
+
+ > div {
+ @extend %base-form-input;
+ width: $size;
+ height: $size;
+ text-align: center;
+ }
+
+ > span {
+ @extend %form-label;
+ flex-basis: calc(60% - #{$size + $gap});
+ margin-left: $gap;
+ }
+}
+
+.form-submit {
+ @extend %form-item;
+ justify-content: flex-end;
+ margin: layout.$huge-gap auto;
+
+ > input {
+ @extend %form-input;
+ flex-basis: 60%;
+ }
+}
diff --git a/styles/components/_page.scss b/styles/components/_page.scss
new file mode 100644
index 0000000..38921d2
--- /dev/null
+++ b/styles/components/_page.scss
@@ -0,0 +1,86 @@
+@use '../colors';
+@use '../layout';
+@use '../typography';
+
+// This is the wrapper element around individual .page-content blocks. The home
+// page contains a few of these sections, while normal pages only contain one.
+// Spanning the entire width, sections may have different themes.
+.page-section {
+ padding: layout.$large-gap;
+
+ &.inverse {
+ color: colors.$gray-50;
+ background-color: colors.$blue-800;
+
+ h2:after {
+ background-color: colors.$gray-50;
+ }
+ }
+
+ &.footer {
+ background-color: colors.$teal-500;
+ }
+}
+
+.page-content {
+ margin: 0 auto layout.$huge-gap auto;
+ max-width: 60rem;
+}
+
+// Banners can be put at the top of a page to draw attention. A banner has
+// two children:
+// - A .background element which contains an image to render behind the text
+// - A .content which holds the actual text.
+.page-banner {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ position: relative;
+ min-height: 60vh;
+
+ > .background {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+
+ > .content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ position: relative;
+ padding: layout.$normal-gap max(#{layout.$large-gap}, 15vw);
+
+ > div {
+ display: inline-block;
+ padding: layout.$small-gap layout.$normal-gap;
+ font-size: typography.$subheading-size;
+ background-color: colors.$yellow-600;
+
+ > p:first-child {
+ margin-top: 0;
+ }
+
+ > p:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ > .title {
+ padding: 0 layout.$normal-gap;
+ line-height: 5rem;
+ font-size: typography.$title-size;
+ font-weight: typography.$emphasized-weight;
+ background-color: colors.$teal-500;
+ }
+ }
+}
diff --git a/styles/components/_site.scss b/styles/components/_site.scss
new file mode 100644
index 0000000..4eec380
--- /dev/null
+++ b/styles/components/_site.scss
@@ -0,0 +1,124 @@
+@use '../colors';
+@use '../layout';
+@use '../typography';
+
+@mixin header-item {
+ padding: 0 layout.$normal-gap;
+ line-height: 3rem;
+}
+
+// The site logo text. More specific styles for this element are also present
+// underneath .site-header.
+.site-logo {
+ margin: 0 layout.$normal-gap;
+ text-transform: lowercase;
+}
+
+// The navigation is present twice on the site: once in the header and once in
+// the footer. The former also has some specific styles (see .site-header
+// below).
+.site-navigation {
+ &.horizontal {
+ > ul {
+ display: flex;
+ margin-bottom: 0;
+ }
+
+ a {
+ display: inline-block;
+ @include header-item;
+ }
+ }
+
+ > ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+
+ a {
+ display: block;
+ padding: layout.$small-gap;
+ font-weight: typography.$emphasized-weight;
+ text-align: center;
+ text-decoration: none;
+ text-transform: lowercase;
+ }
+}
+
+.site-mobile-navigation {
+ cursor: pointer;
+
+ > summary {
+ display: block;
+ @include header-item;
+ }
+
+ &[open] {
+ flex-basis: 100%;
+
+ > summary {
+ // The positioning requires that the header component has relative
+ // positioning.
+ position: absolute;
+ top: 0;
+ right: 0;
+ color: colors.$blue-800;
+ }
+ }
+
+ // This is the next site navigation block (the one that's visible on desktop),
+ // while...
+ + .site-navigation {
+ display: none;
+ }
+
+ // ... this here is the one inside the mobile-only
block.
+ > .site-navigation {
+ &::before {
+ content: '';
+ display: block;
+ margin: 0 auto;
+ width: calc(100% - #{2 * layout.$normal-gap});
+ height: 1px;
+ background-color: colors.$gray-300;
+ }
+ }
+
+ @media screen and (min-width: layout.$breakpoint) {
+ display: none;
+
+ + .site-navigation {
+ display: block;
+ }
+ }
+}
+
+.site-header {
+ display: flex;
+ // This container needs to wrap because when the navigation is open on small
+ // screens, we want it to overflow into its own line.
+ flex-wrap: wrap;
+ align-items: center;
+ // Relative positioning is required here so that we can fake the menu button's
+ // location on mobile.
+ position: relative;
+ z-index: 10;
+ background-color: colors.$main-background;
+ @include colors.block-shadow;
+
+ > .site-logo {
+ flex-grow: 1;
+ margin: 0;
+ font-size: typography.$subheading-size;
+ text-decoration: none;
+ @include header-item;
+ }
+}
+
+.site-footer {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ gap: layout.$normal-gap;
+}
diff --git a/styles/components/_tabs.scss b/styles/components/_tabs.scss
new file mode 100644
index 0000000..9122552
--- /dev/null
+++ b/styles/components/_tabs.scss
@@ -0,0 +1,67 @@
+@use '../colors';
+@use '../layout';
+@use '../typography';
+
+// This is an HTML/CSS-only tabs component. It expects the following markup:
+//
+//
+//
+// The key thing here is that the container is a flexbox with that flows in
+// reverse row direction. That means that the first element in the container
+// will be shown last, which means we can use the ~ and + selectors to
+// target all and the immediately following tabs and / or their corresponding
+// links.
+// The last tab in the DOM (which is shown first because of the reversed
+// flexbox) is shown by default, while the other ones are hidden. If one of the
+// tabs is targeted by the URL's hash, it is shown instead and the default tab
+// is hidden.
+.tabs-widget {
+ display: flex;
+ flex-direction: row-reverse;
+ flex-wrap: wrap;
+ justify-content: center;
+ margin-top: #{-1 * layout.$large-gap};
+
+ > a {
+ display: block;
+ margin: 0 layout.$normal-gap;
+ text-decoration: none;
+ color: inherit;
+ }
+
+ > .tab {
+ flex: 100% 1;
+ order: -1;
+ display: none;
+ margin: layout.$large-gap 0;
+ padding: layout.$large-gap;
+ background: colors.$gray-50;
+ @include colors.card-shadow;
+
+ &:last-of-type,
+ &:target {
+ display: block;
+
+ + a {
+ font-weight: typography.$emphasized-weight;
+ color: colors.$blue-800;
+ }
+ }
+
+ &:target {
+ ~ .tab {
+ display: none;
+
+ + a {
+ font-weight: inherit;
+ color: inherit;
+ }
+ }
+ }
+ }
+}
diff --git a/styles/main.scss b/styles/main.scss
index 5c0f2dc..652bcd5 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -1,3 +1,7 @@
@use 'typography';
@use 'base';
-@use 'components';
+@use 'components/site';
+@use 'components/page';
+@use 'components/boxes';
+@use 'components/tabs';
+@use 'components/forms';