refactor: migrate base styles
This commit is contained in:
Sebin Nyshkim
parent
5b5c027ea6
commit
b63a14d8ce
6 changed files with 456 additions and 170 deletions
|
|
@ -1,66 +1,269 @@
|
|||
@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@400;700&family=Exo:ital,wght@0,300;0,900;1,300;1,900&family=Zilla+Slab:wght@700&family=Permanent+Marker&display=swap");
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "flex";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@import "fontfaces";
|
||||
|
||||
/* theme colors */
|
||||
:root {
|
||||
font-family: "Dosis", sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
text-size-adjust: 100%;
|
||||
background-color: $bg-color-dark;
|
||||
--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-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;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
/* 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);
|
||||
--modal-background: var(--theme-b-modal-background-light);
|
||||
--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;
|
||||
}
|
||||
|
||||
body.scroll-lock {
|
||||
overflow: hidden;
|
||||
/* 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);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: "Zilla Slab", sans-serif;
|
||||
}
|
||||
@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);
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.825em;
|
||||
|
||||
@include mq-desktop {
|
||||
font-size: 2.25em;
|
||||
--color-button: var(--theme-c-deep-purple);
|
||||
--color-button-box-shadow: var(--theme-c-deep-purple-darker);
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.125em;
|
||||
/* desktop */
|
||||
@media (min-width: 35em) {
|
||||
:root {
|
||||
--font-size: 20px;
|
||||
--font-size-h2: 2.25rem;
|
||||
--font-size-h3: 1.5rem;
|
||||
--navigation-justify-content: center;
|
||||
--welcome-header-headings-flex-basis: 23rem;
|
||||
--welcome-header-headings-margin: 0;
|
||||
--welcome-header-mainline-font-size: var(--font-size-h1);
|
||||
|
||||
@include mq-desktop {
|
||||
font-size: 1.5em;
|
||||
--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;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $copy-color;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
background: linear-gradient(90deg, rgba(#000, 0.5), transparent);
|
||||
margin: 0;
|
||||
border-left: 0.125em solid $sebin-secondary;
|
||||
padding: 1em;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue