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

feat: various base style adjustments

Browse source
This commit is contained in:
Sebin Nyshkim 2023-01-19 00:40:57 +01:00
parent 54c39cc9b4
commit de992d86b2
2 changed files with 51 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/scss/base.scss
View file

@ -37,11 +37,12 @@
--font-family-headings: "Secular One", serif;
--font-size: 18px;
--text-line-height: 1.5em;
--text-line-height: 1.5;
--link-inset-box-shadow: 1.5rem;
--paragraph-margin: 1rem;
--textblock-max-width: 36rem;
--textblock-max-width: 34rem;
--refimage-max-width: 50rem;
--container-spacing-top-safe: max(1rem, env(safe-area-inset-top));
@ -68,6 +69,9 @@
--navigation-cutout: 0 0
calc(var(--navigation-size) + env(safe-area-inset-bottom)) 0;
--navigation-cutout-bottom: calc(
var(--navigation-size) + env(safe-area-inset-bottom)
);
--navigation-link-display-hover: none;
--navigation-link-flex: 1 0 var(--navigation-size);
@ -100,15 +104,15 @@
--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-max-width: 36rem;
--table-border-radius: 1rem;
--table-outer-spacing: 0 var(--container-spacing-right-safe) 0
var(--container-spacing-left-safe);
--table-cell-padding: 0.375rem 0.375rem;
--table-cell-padding: 0.25rem 0.5rem;
}
/* semantic color variables for this project */
:root {
--page-background-image: url(@/assets/layered-waves-light.svg);
--color-background: var(--theme-c-antique-white);
--color-border: var(--theme-c-crystal-blue);
@ -119,8 +123,7 @@
--color-link-text-hover: var(--theme-c-text-dark);
--color-link-text-underline: var(--theme-c-text-light);
--color-header-bar: var(--theme-c-deep-oak-translucent);
--color-header-bar-title: var(--theme-c-text-dark);
--color-footer-background: var(--theme-c-desert-sand);
--color-navigation-toggle: var(--theme-c-antique-white);
--color-navigation-background: var(--theme-c-walnut-brown);
@ -142,6 +145,7 @@
@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);
@ -152,6 +156,8 @@
--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);
@ -165,9 +171,15 @@
}
}
@media (min-width: 35em) {
:root {
--table-cell-padding: 0.5rem 1rem;
--font-size: 20px;
}
}
@media (min-width: 50em) {
:root {
--font-size: 20px;
--color-table-color-cell-width: 10rem;
--textblock-padding: 0 var(--container-spacing-right-safe) 0
var(--container-spacing-left-safe);
@ -205,13 +217,18 @@
@media (min-width: 64em) {
:root {
--font-size: 24px;
--timeline-stroke-length: calc(100% - var(--timeline-circle-size));
}
}
@media (min-width: 125em) {
@media (min-width: 80em) {
:root {
--font-size: 24px;
}
}
@media (min-width: 120em) {
:root {
--font-size: 28px;
}
}

31
src/scss/main.scss
View file

@ -32,13 +32,31 @@ body {
}
main {
margin: var(--navigation-cutout);
transition: 0.4s;
&:after {
display: block;
content: "";
position: sticky;
right: 0;
bottom: var(--navigation-cutout-bottom);
left: 0;
height: 13rem;
background: var(--page-background-image);
background-repeat: no-repeat;
background-size: cover;
background-position: center bottom;
z-index: -1;
}
}
section {
max-width: var(--textblock-max-width);
margin: auto;
margin: 0 auto;
padding: var(--textblock-padding);
p {
@ -71,19 +89,20 @@ a {
color: var(--color-link-text);
transition: 0.4s;
box-shadow: inset 0 calc(var(--text-line-height) * -0.125) 0 0 var(--color-link-text-underline);
box-shadow: inset 0 calc(var(--link-inset-box-shadow) * -0.125) 0 0
var(--color-link-text-underline);
&:hover {
color: var(--color-link-text-hover);
box-shadow: inset 0 calc(var(--text-line-height) * -1) 0 0 var(--color-link-text-underline);
box-shadow: inset 0 calc(var(--link-inset-box-shadow) * -1) 0 0
var(--color-link-text-underline);
}
}
table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
max-width: var(--table-max-width);
max-width: 34rem;
margin: 2rem auto;
padding: var(--table-outer-spacing);