263 lines
8.7 KiB
SCSS
263 lines
8.7 KiB
SCSS
@import "fontfaces";
|
|
|
|
/* theme colors */
|
|
:root {
|
|
--theme-c-desert-sand: #e7c7b1;
|
|
--theme-c-woody-brown: #493428;
|
|
--theme-c-walnut-brown: #422322;
|
|
--theme-c-deep-oak: #341c1c;
|
|
--theme-c-crystal-blue: #6bb9db;
|
|
--theme-c-antique-white: #f8ebdd;
|
|
--theme-c-jagged-ice: #a7eef1;
|
|
--theme-c-glacier-blue: #6dabd1;
|
|
--theme-c-dark-grey-blue: #2d4c5a;
|
|
|
|
--theme-c-white: #ffffff;
|
|
--theme-c-black: #000000;
|
|
|
|
--theme-c-desert-sand-translucent: #e7c7b1bf;
|
|
--theme-c-woody-brown-translucent: #493428bf;
|
|
--theme-c-walnut-brown-translucent: #422322bf;
|
|
--theme-c-deep-oak-translucent: #341c1cbf;
|
|
--theme-c-crystal-blue-translucent: #6bb9dbbf;
|
|
--theme-c-antique-white-translucent: #f8ebddbf;
|
|
--theme-c-jagged-ice-translucent: #a7eef1bf;
|
|
--theme-c-glacier-blue-translucent: #6dabd1bf;
|
|
--theme-c-dark-grey-blue-translucent: #2d4c5abf;
|
|
--theme-c-white-translucent: #ffffffbf;
|
|
--theme-c-black-translucent: #000000bf;
|
|
|
|
--theme-c-text-light: var(--theme-c-woody-brown);
|
|
--theme-c-text-dark: var(--theme-c-antique-white);
|
|
}
|
|
|
|
/* general purpose variables */
|
|
:root {
|
|
--font-family-copy: "Arvo", sans-serif;
|
|
--font-family-headings: "Secular One", serif;
|
|
|
|
--font-size: 18px;
|
|
--text-line-height: 1.5;
|
|
--link-inset-box-shadow: 1.5rem;
|
|
|
|
--page-background-image: url(@/assets/layered-waves-light.svg);
|
|
--page-background-image-height: 100vw;
|
|
--page-background-image-max-height: 50vh;
|
|
|
|
--paragraph-margin: 1rem;
|
|
|
|
--textblock-max-width: 34rem;
|
|
--refimage-max-width: 50rem;
|
|
|
|
--container-spacing-top-safe: max(1rem, env(safe-area-inset-top));
|
|
--container-spacing-right-safe: max(1rem, env(safe-area-inset-right));
|
|
--container-spacing-bottom-safe: max(1rem, env(safe-area-inset-bottom));
|
|
--container-spacing-left-safe: max(1rem, env(safe-area-inset-left));
|
|
|
|
--textblock-padding: 0 var(--container-spacing-right-safe) 0
|
|
var(--container-spacing-left-safe);
|
|
|
|
--welcome-padding: 2rem var(--container-spacing-right-safe) 2rem
|
|
var(--container-spacing-left-safe);
|
|
--welcome-headings-text-align: center;
|
|
|
|
--navigation-flow: row nowrap;
|
|
--navigation-justify: space-evenly;
|
|
--navigation-align: center;
|
|
--navigation-position-top: auto;
|
|
--navigation-position-right: 0;
|
|
--navigation-position-bottom: 0;
|
|
--navigation-position-left: 0;
|
|
|
|
--navigation-size: 4rem;
|
|
--navigation-width: 100%;
|
|
--navigation-width-expanded: auto;
|
|
--navigation-height: auto;
|
|
--navigation-padding: 0 0 0 env(safe-area-inset-left);
|
|
|
|
--navigation-cutout: 0 0
|
|
calc(var(--navigation-size) + env(safe-area-inset-bottom)) 0;
|
|
--navigation-cutout-page-background: calc(
|
|
var(--navigation-size) + env(safe-area-inset-bottom)
|
|
);
|
|
--navigation-cutout-main: 0;
|
|
|
|
--navigation-link-display: none;
|
|
--navigation-link-flex: 1 0 var(--navigation-size);
|
|
--navigation-link-justify: center;
|
|
--navigation-link-height: calc(
|
|
var(--navigation-size) + env(safe-area-inset-bottom)
|
|
);
|
|
--navigation-link-padding: 0 0 env(safe-area-inset-bottom) 0;
|
|
--navigation-link-icon-size: calc(var(--navigation-size) / 2);
|
|
--navigation-link-icon-spacing: calc(var(--navigation-size) * 0.25);
|
|
--navigation-link-text-font-size: 1.5rem;
|
|
--navigation-link-box-shadow: inset 0 calc(var(--navigation-size) * -1) 0 0
|
|
var(--color-router-link);
|
|
--navigation-link-last-child-margin: 0;
|
|
|
|
--timeline-max-width: calc(var(--timeline-circle-size) * 15);
|
|
--timeline-circle-size: 4rem;
|
|
--timeline-circle-font-size: calc(var(--timeline-circle-size) * 0.2);
|
|
--timeline-circle-background-color: var(--theme-c-woody-brown);
|
|
--timeline-circle-padding: calc(var(--timeline-circle-font-size));
|
|
|
|
--timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16);
|
|
--timeline-stroke-length: calc(100% - var(--timeline-circle-size) + 1.5rem);
|
|
--timeline-stroke-position-top: var(--timeline-circle-size);
|
|
--timeline-stroke-position-horizontal: calc(
|
|
var(--timeline-circle-size) / 2 - var(--timeline-stroke-thickness) / 2
|
|
);
|
|
|
|
--timeline-item-margin: 1.5rem 0;
|
|
--timeline-item-margin-odd: 0 0 0 calc(50% - var(--timeline-circle-size) / 2);
|
|
--timeline-item-margin-even: 0 calc(50% - var(--timeline-circle-size) / 2) 0 0;
|
|
|
|
--table-border-radius: 1rem;
|
|
--table-outer-spacing: 0 var(--container-spacing-right-safe) 0
|
|
var(--container-spacing-left-safe);
|
|
--table-cell-padding: 0.25rem 0.5rem;
|
|
}
|
|
|
|
/* semantic color variables for this project */
|
|
:root {
|
|
--color-background: var(--theme-c-antique-white);
|
|
--color-background-body: var(--theme-c-walnut-brown);
|
|
|
|
--color-border: var(--theme-c-crystal-blue);
|
|
|
|
--color-heading: var(--theme-c-text-light);
|
|
--color-text: var(--theme-c-text-light);
|
|
--color-link-text: var(--theme-c-text-light);
|
|
--color-link-text-hover: var(--theme-c-text-dark);
|
|
--color-link-text-underline: var(--theme-c-text-light);
|
|
|
|
--color-footer-background: var(--theme-c-desert-sand);
|
|
|
|
--color-navigation-toggle: var(--theme-c-antique-white);
|
|
--color-navigation-background: var(--theme-c-walnut-brown);
|
|
--color-router-link: var(--theme-c-antique-white);
|
|
--color-router-link-hover: var(--theme-c-walnut-brown);
|
|
--color-router-link-active: var(--theme-c-crystal-blue);
|
|
|
|
--table-row-background-hover: var(--theme-c-walnut-brown);
|
|
--table-heading-background: var(--theme-c-dark-grey-blue);
|
|
--table-heading-text-color: var(--theme-c-text-dark);
|
|
--table-cell-background: var(--theme-c-desert-sand);
|
|
--table-cell-text-color: var(--theme-c-text-light);
|
|
--table-cell-text-color-hover: var(--theme-c-text-dark);
|
|
|
|
--timeline-stroke-color: var(--theme-c-dark-grey-blue);
|
|
--timeline-circle-background: var(--theme-c-dark-grey-blue-translucent);
|
|
--timeline-icon-color: var(--theme-c-antique-white);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--page-background-image: url(@/assets/layered-waves-dark.svg);
|
|
--color-background: var(--theme-c-dark-grey-blue);
|
|
|
|
--color-border: var(--theme-c-desert-sand);
|
|
|
|
--color-heading: var(--theme-c-text-dark);
|
|
--color-text: var(--theme-c-text-dark);
|
|
--color-link-text: var(--theme-c-text-dark);
|
|
--color-link-text-hover: var(--theme-c-text-light);
|
|
--color-link-text-underline: var(--theme-c-text-dark);
|
|
|
|
--color-footer-background: var(--theme-c-deep-oak);
|
|
|
|
--table-row-background-hover: var(--theme-c-walnut-brown);
|
|
--table-heading-background: var(--theme-c-deep-oak);
|
|
--table-heading-text-color: var(--theme-c-text-dark);
|
|
--table-cell-background: var(--theme-c-woody-brown);
|
|
--table-cell-text-color: var(--theme-c-text-dark);
|
|
--table-cell-text-color-hover: var(--theme-c-text-dark);
|
|
|
|
--timeline-stroke-color: var(--theme-c-crystal-blue);
|
|
--timeline-circle-background: var(--theme-c-crystal-blue-translucent);
|
|
--timeline-icon-color: var(--theme-c-antique-white);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 35em) {
|
|
:root {
|
|
--table-cell-padding: 0.5rem 1rem;
|
|
--font-size: 20px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 50em) {
|
|
:root {
|
|
--page-background-image-height: 20vw;
|
|
--page-background-image-max-height: 100vh;
|
|
|
|
--color-table-color-cell-width: 10rem;
|
|
--textblock-padding: 0 var(--container-spacing-right-safe) 0
|
|
var(--container-spacing-left-safe);
|
|
|
|
--navigation-cutout: 0 0 0
|
|
calc(var(--navigation-size) + env(safe-area-inset-left));
|
|
--navigation-cutout-page-background: 0;
|
|
--navigation-cutout-main: var(--navigation-cutout);
|
|
|
|
--navigation-flow: column nowrap;
|
|
--navigation-justify: flex-start;
|
|
--navigation-align: stretch;
|
|
--navigation-position-top: 0;
|
|
--navigation-position-right: auto;
|
|
--navigation-position-bottom: 0;
|
|
--navigation-position-left: 0;
|
|
|
|
--navigation-width: calc(
|
|
var(--navigation-size) + env(safe-area-inset-left)
|
|
);
|
|
--navigation-width-expanded: var(--navigation-width);
|
|
|
|
--navigation-link-display: block;
|
|
--navigation-link-flex: 0 0 --navigation-size;
|
|
--navigation-link-justify: flex-start;
|
|
--navigation-link-height: var(--navigation-size);
|
|
--navigation-link-padding: 0 0 0 env(safe-area-inset-left);
|
|
--navigation-link-box-shadow: inset var(--navigation-width-expanded) 0 0 0
|
|
var(--color-router-link);
|
|
--navigation-link-last-child-margin: auto 0 0 0;
|
|
|
|
--table-cell-padding: 0.5rem 1rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 55em) {
|
|
:root {
|
|
--welcome-padding: 2rem var(--container-spacing-right-safe) 2rem
|
|
var(--container-spacing-left-safe);
|
|
--welcome-headings-align-items: center;
|
|
--welcome-headings-text-align: left;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 64em) {
|
|
:root {
|
|
--timeline-stroke-length: calc(100% - var(--timeline-circle-size));
|
|
}
|
|
}
|
|
|
|
@media (min-width: 80em) {
|
|
:root {
|
|
--font-size: 24px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 120em) {
|
|
:root {
|
|
--font-size: 28px;
|
|
}
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
:root {
|
|
--navigation-width-expanded: calc(
|
|
var(--navigation-size) * 3.75 + env(safe-area-inset-left)
|
|
);
|
|
}
|
|
}
|