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

feat: update base stylings

Browse source
This commit is contained in:
Sebin Nyshkim 2023-01-19 22:00:44 +01:00
parent 9160677be6
commit 9b11da8ad7
2 changed files with 35 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/scss/base.scss
View file

@ -40,6 +40,10 @@
--text-line-height: 1.5;
--link-inset-box-shadow: 1.5rem;
--page-background-image: url(@/assets/layered-waves-light.svg);
--page-background-image-height: 100vw;
--page-background-image-max-height: 50vh;
--paragraph-margin: 1rem;
--textblock-max-width: 34rem;
@ -53,6 +57,10 @@
--textblock-padding: 0 var(--container-spacing-right-safe) 0
var(--container-spacing-left-safe);
--welcome-padding: 2rem var(--container-spacing-right-safe) 2rem
var(--container-spacing-left-safe);
--welcome-headings-text-align: center;
--navigation-flow: row nowrap;
--navigation-justify: space-evenly;
--navigation-align: center;
@ -69,11 +77,12 @@
--navigation-cutout: 0 0
calc(var(--navigation-size) + env(safe-area-inset-bottom)) 0;
--navigation-cutout-bottom: calc(
--navigation-cutout-page-background: calc(
var(--navigation-size) + env(safe-area-inset-bottom)
);
--navigation-cutout-main: 0;
--navigation-link-display-hover: none;
--navigation-link-display: none;
--navigation-link-flex: 1 0 var(--navigation-size);
--navigation-link-justify: center;
--navigation-link-height: calc(
@ -112,8 +121,8 @@
/* semantic color variables for this project */
:root {
--page-background-image: url(@/assets/layered-waves-light.svg);
--color-background: var(--theme-c-antique-white);
--color-background-body: var(--theme-c-walnut-brown);
--color-border: var(--theme-c-crystal-blue);
@ -180,12 +189,17 @@
@media (min-width: 50em) {
:root {
--page-background-image-height: 20vw;
--page-background-image-max-height: 100vh;
--color-table-color-cell-width: 10rem;
--textblock-padding: 0 var(--container-spacing-right-safe) 0
var(--container-spacing-left-safe);
--navigation-cutout: 0 0 0
calc(var(--navigation-size) + env(safe-area-inset-left));
--navigation-cutout-page-background: 0;
--navigation-cutout-main: var(--navigation-cutout);
--navigation-flow: column nowrap;
--navigation-justify: flex-start;
@ -202,7 +216,7 @@
var(--navigation-size) * 3.75 + env(safe-area-inset-left)
);
--navigation-link-display-hover: block;
--navigation-link-display: block;
--navigation-link-flex: 0 0 --navigation-size;
--navigation-link-justify: flex-start;
--navigation-link-height: var(--navigation-size);
@ -215,6 +229,15 @@
}
}
@media (min-width: 55em) {
:root {
--welcome-padding: 2rem var(--container-spacing-right-safe) 2rem
var(--container-spacing-left-safe);
--welcome-headings-align-items: center;
--welcome-headings-text-align: left;
}
}
@media (min-width: 64em) {
:root {
--timeline-stroke-length: calc(100% - var(--timeline-circle-size));

15
src/scss/main.scss
View file

@ -18,7 +18,7 @@
body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
background: var(--color-background-body);
transition: color 0.5s, background-color 0.5s;
line-height: var(--text-line-height);
@ -32,7 +32,10 @@ body {
}
main {
background: var(--color-background);
margin: var(--navigation-cutout-main);
transition: 0.4s;
z-index: 0;
&:after {
display: block;
@ -40,10 +43,11 @@ main {
content: "";
position: sticky;
right: 0;
bottom: var(--navigation-cutout-bottom);
bottom: var(--navigation-cutout-page-background);
left: 0;
height: 13rem;
height: var(--page-background-image-height);
max-height: var(--page-background-image-max-height);
background: var(--page-background-image);
background-repeat: no-repeat;
@ -58,10 +62,6 @@ section {
max-width: var(--textblock-max-width);
margin: 0 auto;
padding: var(--textblock-padding);
p {
text-align: justify;
}
}
h1,
@ -81,6 +81,7 @@ h1 {
}
p {
text-align: justify;
margin: var(--paragraph-margin) 0;
}