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

style: run formatter

Browse source
This commit is contained in:
Sebin Nyshkim 2023-09-04 20:06:56 +02:00
parent b5eae39f89
commit 35f5343149
20 changed files with 207 additions and 264 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/scss/base.scss
View file

@ -1,4 +1,4 @@
@import "fontfaces";
@import 'fontfaces';
/* theme colors */
:root {
@ -33,8 +33,8 @@
/* general purpose variables */
:root {
--font-family-copy: "Arvo", sans-serif;
--font-family-headings: "Secular One", serif;
--font-family-copy: 'Arvo', sans-serif;
--font-family-headings: 'Secular One', serif;
--font-size: 18px;
--text-line-height: 1.5;
@ -54,8 +54,7 @@
--container-spacing-bottom-safe: max(1rem, env(safe-area-inset-bottom));
--container-spacing-left-safe: max(1rem, env(safe-area-inset-left));
--textblock-padding: 0 var(--container-spacing-right-safe) 0
var(--container-spacing-left-safe);
--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);
@ -75,19 +74,14 @@
--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-cutout-page-background: calc(
var(--navigation-size) + env(safe-area-inset-bottom)
);
--navigation-cutout: 0 0 calc(var(--navigation-size) + env(safe-area-inset-bottom)) 0;
--navigation-cutout-page-background: calc(var(--navigation-size) + env(safe-area-inset-bottom));
--navigation-cutout-main: 0;
--navigation-link-display: 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-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);
@ -118,13 +112,10 @@
--timeline-item-margin-even: var(--timeline-item-margin);
--timeline-item-text-align-even: left;
--timeline-item-content-padding-odd: 0 0 0 var(--container-spacing-left-safe);
--timeline-item-content-padding-even: var(
--timeline-item-content-padding-odd
);
--timeline-item-content-padding-even: var(--timeline-item-content-padding-odd);
--table-border-radius: 1rem;
--table-outer-spacing: 0 var(--container-spacing-right-safe) 0
var(--container-spacing-left-safe);
--table-outer-spacing: 0 var(--container-spacing-right-safe) 0 var(--container-spacing-left-safe);
--table-cell-padding: 0.25rem 0.5rem;
}
@ -225,11 +216,9 @@
--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);
--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: 0 0 0 calc(var(--navigation-size) + env(safe-area-inset-left));
--navigation-cutout-page-background: 0;
--navigation-cutout-main: var(--navigation-cutout);
@ -238,9 +227,7 @@
--navigation-align: stretch;
--navigation-position: 0 auto 0 0;
--navigation-width: calc(
var(--navigation-size) + env(safe-area-inset-left)
);
--navigation-width: calc(var(--navigation-size) + env(safe-area-inset-left));
--navigation-width-expanded: var(--navigation-width);
--navigation-link-display: block;
@ -271,10 +258,8 @@
--timeline-stroke-length: calc(100% - var(--timeline-circle-size));
--timeline-stroke-position-even: var(--timeline-stroke-position-top)
var(--timeline-stroke-position-horizontal) auto auto;
--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;
--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;
--timeline-item-flex-order: 1;
--timeline-item-content-margin-odd: 0 0 0 1rem;
--timeline-item-content-margin-even: 0 1rem 0 0;
@ -298,8 +283,6 @@
@media (hover: hover) and (min-width: 50em) {
:root {
--navigation-width-expanded: calc(
var(--navigation-size) * 3.75 + env(safe-area-inset-left)
);
--navigation-width-expanded: calc(var(--navigation-size) * 3.75 + env(safe-area-inset-left));
}
}

4
src/scss/fontfaces.scss
View file

@ -1,2 +1,2 @@
@import "@/assets/fonts/arvo/arvo";
@import "@/assets/fonts/secular-one/secular-one";
@import '@/assets/fonts/arvo/arvo';
@import '@/assets/fonts/secular-one/secular-one';

11
src/scss/main.scss
View file

@ -1,4 +1,4 @@
@import "@/scss/base";
@import '@/scss/base';
:root {
font-family: var(--font-family-copy);
@ -19,7 +19,9 @@ body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background-body);
transition: color 0.5s, background-color 0.5s;
transition:
color 0.5s,
background-color 0.5s;
line-height: var(--text-line-height);
text-rendering: optimizeLegibility;
@ -41,7 +43,7 @@ main {
&:after {
display: block;
content: "";
content: '';
position: sticky;
inset: auto 0 var(--navigation-cutout-page-background) 0;
@ -95,8 +97,7 @@ a {
&:hover {
color: var(--color-link-text-hover);
box-shadow: inset 0 calc(var(--link-inset-box-shadow) * -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);
}
}