293 lines
8.1 KiB
SCSS
293 lines
8.1 KiB
SCSS
@import 'fontfaces';
|
|
|
|
/* theme colors */
|
|
:root {
|
|
--theme-c-dull-red: #c64c35;
|
|
--theme-c-indian-yellow: #eda958;
|
|
--theme-c-dusky-blue: #4b608f;
|
|
--theme-c-glaucous: #6684c0;
|
|
--theme-c-kelly-green: #31c215;
|
|
--theme-c-iridium: #413a3a;
|
|
--theme-c-ironstone: #7f4539;
|
|
|
|
--theme-c-dull-red-darker: #762d1f;
|
|
--theme-c-dull-red-darkest: #39160f;
|
|
--theme-c-indian-yellow-darker: #c97716;
|
|
--theme-c-indian-yellow-darkest: #844e0e;
|
|
|
|
--theme-c-muted-blue: #22759d;
|
|
--theme-c-amaranth: #e93f3f;
|
|
--theme-c-deep-purple: #33124a;
|
|
--theme-c-charcoal: #303030;
|
|
|
|
--theme-c-muted-blue-darker: #195673;
|
|
--theme-c-amaranth-darker: #800f0f;
|
|
--theme-c-amaranth-darkest: #690c0c;
|
|
--theme-c-deep-purple-darker: #170821;
|
|
|
|
--theme-c-white: #ffffff;
|
|
--theme-c-black: #000000;
|
|
|
|
--theme-c-love: #e00f60;
|
|
--theme-c-yes: #2faf2a;
|
|
--theme-c-maybe: #daa520;
|
|
--theme-c-no: #8b0000;
|
|
--theme-c-receive: #448dc9;
|
|
--theme-c-give: #4a7d91;
|
|
|
|
--theme-c-love-dark: #9b0a41;
|
|
--theme-c-yes-dark: #1f771c;
|
|
--theme-c-maybe-dark: #997416;
|
|
--theme-c-no-dark: #530000;
|
|
|
|
--theme-c-dull-red-translucent: #c64c35bf;
|
|
--theme-c-indian-yellow-translucent: #eda958bf;
|
|
--theme-c-dusky-blue-translucent: #4b608fbf;
|
|
--theme-c-glaucous-translucent: #6684c0bf;
|
|
--theme-c-kelly-green-translucent: #31c215bf;
|
|
--theme-c-iridium-translucent: #413a3abf;
|
|
--theme-c-ironstone-translucent: #7f4539bf;
|
|
|
|
--theme-c-muted-blue-translucent: #22759dbf;
|
|
--theme-c-amaranth-translucent: #e93f3fbf;
|
|
--theme-c-deep-purple-translucent: #33124abf;
|
|
--theme-c-charcoal-translucent: #303030bf;
|
|
|
|
--theme-b-mix-blend-mode: multiply;
|
|
|
|
--theme-b-page-background-light: radial-gradient(
|
|
circle at bottom right,
|
|
var(--theme-c-amaranth) 5%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
circle at top left,
|
|
var(--theme-c-muted-blue) 5%,
|
|
var(--theme-c-deep-purple) 100%
|
|
);
|
|
--theme-b-page-background-dark: radial-gradient(
|
|
circle at bottom right,
|
|
var(--theme-c-amaranth-darker) 5%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
circle at top left,
|
|
var(--theme-c-muted-blue-darker) 5%,
|
|
var(--theme-c-deep-purple-darker) 100%
|
|
);
|
|
|
|
--theme-b-navigation-background-light: radial-gradient(
|
|
circle at bottom right,
|
|
var(--theme-c-amaranth-darker) 20%,
|
|
transparent 80%
|
|
),
|
|
radial-gradient(
|
|
circle at top left,
|
|
var(--theme-c-indian-yellow-darker) 5%,
|
|
var(--theme-c-dull-red-darker) 100%
|
|
);
|
|
--theme-b-navigation-background-dark: radial-gradient(
|
|
circle at bottom right,
|
|
var(--theme-c-amaranth-darkest) 20%,
|
|
transparent 80%
|
|
),
|
|
radial-gradient(
|
|
circle at top left,
|
|
var(--theme-c-indian-yellow-darkest) 5%,
|
|
var(--theme-c-dull-red-darkest) 100%
|
|
);
|
|
--theme-b-modal-background-light: radial-gradient(
|
|
circle at top left,
|
|
var(--theme-c-muted-blue) 5%,
|
|
var(--theme-c-deep-purple) 100%
|
|
)
|
|
fixed no-repeat;
|
|
--theme-b-modal-background-dark: radial-gradient(
|
|
circle at top left,
|
|
var(--theme-c-muted-blue-darker) 5%,
|
|
var(--theme-c-deep-purple-darker) 100%
|
|
)
|
|
fixed no-repeat;
|
|
}
|
|
|
|
/* general purpose variables */
|
|
:root {
|
|
--font-family-copy: 'Dosis', sans-serif;
|
|
--font-family-headings: 'Zilla Slab', sans-serif;
|
|
|
|
--font-size: 18px;
|
|
--font-size-h1: 3rem;
|
|
--font-size-h2: 1.825rem;
|
|
--font-size-h3: 1.225rem;
|
|
|
|
--text-line-height: 1.5;
|
|
|
|
--paragraph-margin: 1rem;
|
|
|
|
--textblock-max-width: 36rem;
|
|
--refimage-max-width: 50rem;
|
|
|
|
--page-background-radial-gradient: var(--theme-b-radial-gradient-light);
|
|
|
|
--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));
|
|
|
|
--container-box-shadow: 0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.7);
|
|
|
|
--section-max-width: 100%;
|
|
|
|
--page-background: var(--theme-b-page-background-light);
|
|
--header-background: var(--theme-b-navigation-background-light);
|
|
--header-margin: 1rem var(--container-spacing-right-safe) 1rem var(--container-spacing-left-safe);
|
|
--navigation-justify-content: flex-start;
|
|
|
|
--quickfacts-background: var(--theme-b-page-background-light);
|
|
--quickfacts-cols-double: auto;
|
|
--quickfacts-cols-triple: auto;
|
|
--quickfacts-cols-quadruple: auto;
|
|
|
|
--modal-background: var(--theme-b-modal-background-light);
|
|
--modal-width: 100%;
|
|
|
|
--welcome-header-headings-flex-basis: 100%;
|
|
--welcome-header-headings-margin: 1.5rem 0 0 0;
|
|
--welcome-header-mainline-font-size: 2rem;
|
|
--welcome-header-subline-font-size: 1rem;
|
|
|
|
--button-group-flex: 1 0 100%;
|
|
|
|
--figure-cencor-background-color: var(--theme-c-amaranth);
|
|
--figure-cencor-width: 50vw;
|
|
--figure-cencor-height: 35vh;
|
|
|
|
--gallery-size: 1rem;
|
|
--gallery-arrow-position: 1.5rem;
|
|
--gallery-image-padding: 0 3rem;
|
|
|
|
--table-max-width: 45rem;
|
|
--table-border: 0.0625rem solid var(--theme-c-indian-yellow);
|
|
--table-cell-padding: 0.25rem 0.5rem;
|
|
|
|
--attack-list-max-width: 100%;
|
|
|
|
--attack-item-flex: 0 1 100%;
|
|
--attack-item-flex-flow: row wrap;
|
|
--attack-item-nth-child-even-text-align: left;
|
|
--attack-item-first-child-order: auto;
|
|
--attack-item-illustration-size: auto;
|
|
--attack-item-illustration-flex: 1 1 var(--attack-item-illustration-size);
|
|
--attack-item-text-padding: auto;
|
|
|
|
--social-links-flex-flow: row wrap;
|
|
--social-links-flex: 1 1 50%;
|
|
|
|
--footer-padding: var(--container-spacing-top-safe) 0 var(--container-spacing-bottom-safe) 0;
|
|
}
|
|
|
|
/* semantic color variables for this project */
|
|
:root {
|
|
--color-background: var(--theme-c-deep-purple);
|
|
--color-background-footer: var(--theme-c-deep-purple);
|
|
|
|
--color-heading: var(--theme-c-white);
|
|
--color-text: var(--theme-c-white);
|
|
--color-link-text: var();
|
|
--color-link-text-hover: var();
|
|
--color-link-text-underline: var();
|
|
|
|
--color-button: var(--theme-c-muted-blue);
|
|
--color-button-box-shadow: var(--theme-c-muted-blue-darker);
|
|
--color-toggle: var(--theme-c-dull-red);
|
|
--color-quickfacts-border: var(--theme-c-indian-yellow);
|
|
--color-modal-border: var(--theme-c-indian-yellow);
|
|
--color-figure-polaroid-text: var(--theme-c-charcoal);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--page-background: var(--theme-b-page-background-dark);
|
|
--header-background: var(--theme-b-navigation-background-dark);
|
|
--quickfacts-background: var(--theme-b-page-background-dark);
|
|
--modal-background: var(--theme-b-modal-background-dark);
|
|
|
|
--color-button: var(--theme-c-deep-purple);
|
|
--color-button-box-shadow: var(--theme-c-deep-purple-darker);
|
|
}
|
|
}
|
|
|
|
/* desktop */
|
|
@media (min-width: 35em) {
|
|
:root {
|
|
--font-size: 20px;
|
|
--font-size-h2: 2.25rem;
|
|
--font-size-h3: 1.5rem;
|
|
--navigation-justify-content: center;
|
|
|
|
--modal-width: 30rem;
|
|
|
|
--welcome-header-headings-flex-basis: 23rem;
|
|
--welcome-header-headings-margin: 0;
|
|
--welcome-header-mainline-font-size: var(--font-size-h1);
|
|
|
|
--quickfacts-cols-double: 2 auto;
|
|
--quickfacts-cols-triple: 3 auto;
|
|
--quickfacts-cols-quadruple: 4 auto;
|
|
|
|
--section-max-width: 34rem;
|
|
|
|
--button-group-flex: 0 0 auto;
|
|
|
|
--table-cell-padding: 0.5rem 1rem;
|
|
|
|
--figure-cencor-width: 20rem;
|
|
--figure-cencor-height: 20rem;
|
|
|
|
--gallery-size: 1.5rem;
|
|
--gallery-arrow-position: 2rem;
|
|
--gallery-image-padding: 0 3.5rem;
|
|
|
|
--social-links-flex-flow: row nowrap;
|
|
--social-links-flex: 1 1 auto;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 45em) {
|
|
:root {
|
|
--attack-list-max-width: 55rem;
|
|
|
|
--attack-item-flex-flow: row nowrap;
|
|
--attack-item-nth-child-even-text-align: right;
|
|
--attack-item-first-child-order: 1;
|
|
--attack-item-illustration-size: 20rem;
|
|
--attack-item-illustration-flex: 0 0 var(--attack-item-illustration-size);
|
|
--attack-item-text-padding: 0 1rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 90em) {
|
|
:root {
|
|
--header-margin: 1rem auto;
|
|
|
|
--attack-list-max-width: 80rem;
|
|
|
|
--attack-item-flex: 0 1 50%;
|
|
--attack-item-nth-child-even-text-align: left;
|
|
--attack-item-first-child-order: 0;
|
|
}
|
|
}
|
|
|
|
/* bigscreen */
|
|
@media (min-width: 120em) {
|
|
:root {
|
|
--font-size: 24px;
|
|
}
|
|
}
|
|
|
|
/* hyooj */
|
|
@media (min-width: 130em) {
|
|
:root {
|
|
--font-size: 28px;
|
|
}
|
|
}
|