SebinNyshkim/viktor-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add new css variables

Browse source
This commit is contained in:
Sebin Nyshkim 2022-09-29 02:41:35 +02:00
parent 41f9bbd968
commit b7167f30e7
1 changed files with 66 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

76
src/scss/base.scss
View file

@ -1,3 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Arvo&family=Secular+One&&display=swap");
/* theme colors */ /* theme colors */
:root { :root {
--theme-c-desert-sand: #e7c7b1; --theme-c-desert-sand: #e7c7b1;
@ -31,8 +33,8 @@
/* general purpose variables */ /* general purpose variables */
:root { :root {
--font-family-copy: sans-serif; --font-family-copy: "Arvo", sans-serif;
--font-family-headings: serif; --font-family-headings: "Secular One", serif;
--font-size: 18px; --font-size: 18px;
--text-line-height: 1.5em; --text-line-height: 1.5em;
@ -40,7 +42,7 @@
--paragraph-margin: 1rem; --paragraph-margin: 1rem;
--textblock-max-width: 36rem; --textblock-max-width: 36rem;
--refimage-max-width: 36rem; --refimage-max-width: 50rem;
--container-spacing-top-safe: max(1rem, env(safe-area-inset-top)); --container-spacing-top-safe: max(1rem, env(safe-area-inset-top));
--container-spacing-right-safe: max(1rem, env(safe-area-inset-right)); --container-spacing-right-safe: max(1rem, env(safe-area-inset-right));
@ -50,9 +52,35 @@
--textblock-padding: 0 var(--container-spacing-right-safe) 0 --textblock-padding: 0 var(--container-spacing-right-safe) 0
var(--container-spacing-left-safe); var(--container-spacing-left-safe);
--navigation-item-font-size: 1.5rem; --navigation-flow: row nowrap;
--navigation-item-line-height: 3.25rem; --navigation-justify: space-evenly;
--navigation-width: 100vw; --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-link-display-hover: 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);
--timeline-max-width: calc(var(--timeline-circle-size) * 15); --timeline-max-width: calc(var(--timeline-circle-size) * 15);
--timeline-circle-size: 4rem; --timeline-circle-size: 4rem;
@ -75,6 +103,7 @@
--table-border-radius: 1rem; --table-border-radius: 1rem;
--table-outer-spacing: 0 var(--container-spacing-right-safe) 0 --table-outer-spacing: 0 var(--container-spacing-right-safe) 0
var(--container-spacing-left-safe); var(--container-spacing-left-safe);
--table-cell-padding: 0.375rem 0.375rem;
} }
/* semantic color variables for this project */ /* semantic color variables for this project */
@ -90,7 +119,7 @@
--color-link-text-underline: var(--theme-c-text-light); --color-link-text-underline: var(--theme-c-text-light);
--color-header-bar: var(--theme-c-deep-oak-translucent); --color-header-bar: var(--theme-c-deep-oak-translucent);
--color-header-bar-title: var(--theme-c-white); --color-header-bar-title: var(--theme-c-text-dark);
--color-navigation-toggle: var(--theme-c-antique-white); --color-navigation-toggle: var(--theme-c-antique-white);
--color-navigation-background: var(--theme-c-walnut-brown); --color-navigation-background: var(--theme-c-walnut-brown);
@ -138,10 +167,37 @@
@media (min-width: 50em) { @media (min-width: 50em) {
:root { :root {
--font-size: 20px; --font-size: 20px;
--navigation-width: 20rem;
--color-table-color-cell-width: 10rem; --color-table-color-cell-width: 10rem;
--textblock-padding: auto; --textblock-padding: 0 var(--container-spacing-right-safe) 0
--table-outer-spacing: 0; var(--container-spacing-left-safe);
--navigation-cutout: 0 0 0
calc(var(--navigation-size) + env(safe-area-inset-left));
--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: calc(
var(--navigation-size) * 3.75 + env(safe-area-inset-left)
);
--navigation-link-display-hover: 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);
--table-cell-padding: 0.5rem 1rem;
} }
} }