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,69 +0,0 @@
|
|||
@use "sass:math";
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
&--row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&--column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&--nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
&--center {
|
||||
justify-content: center;
|
||||
|
||||
&-v {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&--end {
|
||||
justify-content: flex-end;
|
||||
|
||||
&-v {
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
> .col {
|
||||
flex: 1 0 0;
|
||||
max-width: 100%;
|
||||
|
||||
&--center {
|
||||
text-align: center;
|
||||
|
||||
&-v {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through 12 {
|
||||
&-#{$i} {
|
||||
$width: percentage(math.div($i, 12));
|
||||
flex: 0 0 $width;
|
||||
max-width: $width;
|
||||
}
|
||||
@include mq-desktop {
|
||||
&-d-#{$i} {
|
||||
$width: percentage(math.div($i, 12));
|
||||
flex: 0 0 $width;
|
||||
max-width: $width;
|
||||
}
|
||||
}
|
||||
@include mq-mobile {
|
||||
&-m-#{$i} {
|
||||
$width: percentage(math.div($i, 12));
|
||||
flex: 0 0 $width;
|
||||
max-width: $width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
@mixin mq-bigscreen() {
|
||||
@media (min-width: 125em) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mq-desktop() {
|
||||
@media (min-width: 50em) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mq-mobile() {
|
||||
@media (max-width: 35em) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin theme($theme) {
|
||||
@media (prefers-color-scheme: $theme) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin radial-background($primary, $secondary) {
|
||||
background: radial-gradient(circle at top left, $primary 5%, $secondary 100%) fixed no-repeat;
|
||||
}
|
||||
|
||||
@mixin button($btn-color, $darken: 10%) {
|
||||
box-shadow: 0 0.5em 0 0 darken($btn-color, $darken);
|
||||
background-color: $btn-color;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0.75em 0 0 darken($btn-color, $darken);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: 0 0.25em 0 0 darken($btn-color, $darken);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
$bg-color-light: #22759d;
|
||||
$bg-color-lighter: #e93f3f;
|
||||
$bg-color-dark: #33124a;
|
||||
$copy-color: #fff;
|
||||
$copy-color-darkgrey: #303030;
|
||||
|
||||
$sebin-primary: #c64c35;
|
||||
$sebin-secondary: #eda958;
|
||||
$sebin-hair-primary: #4b608f;
|
||||
$sebin-hair-secondary: #6684c0;
|
||||
$sebin-eyes: #31c215;
|
||||
$sebin-spikes: $sebin-secondary;
|
||||
$sebin-horns: #413a3a;
|
||||
$sebin-tail-spikes: #7f4539;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
4
src/scss/fontfaces.scss
Normal file
4
src/scss/fontfaces.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@import "@/assets/fonts/dosis/dosis";
|
||||
@import "@/assets/fonts/exo/exo";
|
||||
@import "@/assets/fonts/permanent-marker/permanent-marker";
|
||||
@import "@/assets/fonts/zilla-slab/zilla-slab";
|
||||
202
src/scss/main.scss
Normal file
202
src/scss/main.scss
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
@import "@/scss/base";
|
||||
|
||||
:root {
|
||||
font-family: var(--font-family-copy);
|
||||
font-size: var(--font-size);
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text);
|
||||
|
||||
line-height: var(--text-line-height);
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
transition: color 0.5s, background-color 0.5s;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
background: url(@/assets/subtle-prism.svg);
|
||||
mix-blend-mode: multiply;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: var(--page-background);
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
&.scroll-lock {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
min-height: 100vh;
|
||||
padding: 1rem 0;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
section {
|
||||
margin: auto;
|
||||
padding: 0 var(--container-spacing-right-safe) 0
|
||||
var(--container-spacing-left-safe);
|
||||
max-width: var(--section-max-width);
|
||||
|
||||
h1:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-family-headings);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--font-size-h1);
|
||||
margin: 1.625rem 0;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-h2);
|
||||
margin: 1.875rem 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-h3);
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-link-text);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
background: linear-gradient(90deg, rgba(#000, 0.5), transparent);
|
||||
margin: 0;
|
||||
border-left: 0.125rem solid var(--theme-c-indian-yellow);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 1rem 0;
|
||||
|
||||
&.col-2 {
|
||||
columns: 2 auto;
|
||||
}
|
||||
|
||||
&.col-3 {
|
||||
columns: 3 auto;
|
||||
}
|
||||
|
||||
&.col-4 {
|
||||
columns: 4 auto;
|
||||
}
|
||||
|
||||
&.social {
|
||||
display: flex;
|
||||
flex-flow: var(--social-links-flex-flow);
|
||||
justify-content: space-evenly;
|
||||
|
||||
margin: 1rem 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
flex: var(--social-links-flex);
|
||||
padding: 0.25rem;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
margin: 0 0.375rem 0 0;
|
||||
}
|
||||
|
||||
&.twitter:before {
|
||||
content: "🐦";
|
||||
}
|
||||
|
||||
&.mastodon:before {
|
||||
content: "🐘";
|
||||
}
|
||||
|
||||
&.telegram:before {
|
||||
content: "📨";
|
||||
}
|
||||
|
||||
&.furaffinity:before {
|
||||
content: "🐾";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
max-width: var(--table-max-width);
|
||||
margin: auto;
|
||||
|
||||
thead {
|
||||
border-top: var(--table-border);
|
||||
}
|
||||
|
||||
tbody {
|
||||
border-top: var(--table-border);
|
||||
border-bottom: var(--table-border);
|
||||
|
||||
tr:hover {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: var(--table-cell-padding);
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
display: block;
|
||||
margin: 0 0.5rem 0 0.25rem;
|
||||
height: 2rem;
|
||||
border: 0.125rem solid #fff;
|
||||
border-radius: 100%;
|
||||
box-shadow: var(--container-box-shadow);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue