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

refactor: give custom properties better names

Browse source
This commit is contained in:
Sebin Nyshkim 2022-09-28 02:16:53 +02:00
parent 2bc11a85d8
commit 0145c7f70c
5 changed files with 49 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/RefImage.vue
View file

@ -12,7 +12,7 @@
<style lang="scss"> <style lang="scss">
.figure { .figure {
max-width: var(--container-width-images); max-width: var(--refimage-max-width);
margin: 0 auto; margin: 0 auto;
&__image { &__image {

5
src/components/TextBlock.vue
View file

@ -6,7 +6,8 @@
<style lang="scss"> <style lang="scss">
.textblock { .textblock {
max-width: var(--container-width-text); max-width: var(--textblock-max-width);
margin: var(--content-spacing); margin: auto;
padding: var(--textblock-padding);
} }
</style> </style>

14
src/components/TimelineItem.vue
View file

@ -53,10 +53,11 @@ const dateLabels = computed<Record<string, string>>(() => {
&:not(:last-child):before { &:not(:last-child):before {
content: ""; content: "";
position: absolute; position: absolute;
top: var(--timeline-position-top); top: var(--timeline-stroke-position-top);
left: var(--timeline-stroke-position); left: var(--timeline-stroke-position-horizontal);
height: var(--timeline-stroke-length); height: var(--timeline-stroke-length);
border-left: var(--timeline-stroke-border); border-left: var(--timeline-stroke-thickness) solid
var(--timeline-stroke-color);
} }
@media (min-width: 64em) { @media (min-width: 64em) {
@ -69,7 +70,7 @@ const dateLabels = computed<Record<string, string>>(() => {
&:before { &:before {
left: auto; left: auto;
right: var(--timeline-stroke-position); right: var(--timeline-stroke-position-horizontal);
} }
.timeline-item__datetime { .timeline-item__datetime {
@ -88,14 +89,15 @@ const dateLabels = computed<Record<string, string>>(() => {
text-align: center; text-align: center;
line-height: 1.1; line-height: 1.1;
background-color: var(--timeline-circle-background-color); background-color: var(--timeline-circle-background);
flex: 0 0 var(--timeline-circle-size); flex: 0 0 var(--timeline-circle-size);
width: var(--timeline-circle-size); width: var(--timeline-circle-size);
height: var(--timeline-circle-size); height: var(--timeline-circle-size);
margin: 0; margin: 0;
border: var(--timeline-stroke-border); border: var(--timeline-stroke-thickness) solid
var(--timeline-stroke-color);
border-radius: 100%; border-radius: 100%;
padding: var(--timeline-circle-padding); padding: var(--timeline-circle-padding);
} }

69
src/scss/base.scss
View file

@ -37,38 +37,33 @@
--font-size: 18px; --font-size: 18px;
--text-line-height: 1.5em; --text-line-height: 1.5em;
--margin-paragraph: 1rem; --paragraph-margin: 1rem;
--container-width-text: 40rem; --textblock-max-width: 36rem;
--container-width-images: 40rem; --refimage-max-width: 36rem;
--container-width-tables: 40rem;
--container-width-timeline: calc(var(--timeline-circle-size) * 15);
--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));
--container-spacing-bottom-safe: max(1rem, env(safe-area-inset-bottom)); --container-spacing-bottom-safe: max(1rem, env(safe-area-inset-bottom));
--container-spacing-left-safe: max(1rem, env(safe-area-inset-left)); --container-spacing-left-safe: max(1rem, env(safe-area-inset-left));
--content-spacing: 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.75rem; --navigation-item-font-size: 1.5rem;
--navigation-item-line-height: 3.25rem; --navigation-item-line-height: 3.25rem;
--navigation-width: 100vw; --navigation-width: 100vw;
--timeline-max-width: calc(var(--timeline-circle-size) * 15);
--timeline-circle-size: 4rem; --timeline-circle-size: 4rem;
--timeline-circle-font-size: calc(var(--timeline-circle-size) * 0.2); --timeline-circle-font-size: calc(var(--timeline-circle-size) * 0.2);
--timeline-circle-background-color: rgba(107, 185, 219, 0.5); --timeline-circle-background-color: var(--theme-c-woody-brown);
--timeline-circle-padding: calc(var(--timeline-circle-font-size) * 0.5); --timeline-circle-padding: calc(var(--timeline-circle-font-size));
--timeline-position-top: var(--timeline-circle-size);
--timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16); --timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16);
--timeline-stroke-color: var(--theme-c-crystal-blue);
--timeline-stroke-border: var(--timeline-stroke-thickness) solid
var(--timeline-stroke-color);
--timeline-stroke-length: calc(100% - var(--timeline-circle-size) + 1.5rem); --timeline-stroke-length: calc(100% - var(--timeline-circle-size) + 1.5rem);
--timeline-stroke-position: calc( --timeline-stroke-position-top: var(--timeline-circle-size);
--timeline-stroke-position-horizontal: calc(
var(--timeline-circle-size) / 2 - var(--timeline-stroke-thickness) / 2 var(--timeline-circle-size) / 2 - var(--timeline-stroke-thickness) / 2
); );
@ -76,9 +71,9 @@
--timeline-item-margin-odd: 0 0 0 calc(50% - var(--timeline-circle-size) / 2); --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-even: 0 calc(50% - var(--timeline-circle-size) / 2) 0 0;
--color-table-border-radius: 1rem; --table-max-width: 36rem;
--color-table-color-cell-width: 10vw; --table-border-radius: 1rem;
--color-table-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);
} }
@ -103,12 +98,16 @@
--color-router-link-hover: var(--theme-c-walnut-brown); --color-router-link-hover: var(--theme-c-walnut-brown);
--color-router-link-active: var(--theme-c-crystal-blue); --color-router-link-active: var(--theme-c-crystal-blue);
--color-table-row-hover: var(--theme-c-walnut-brown); --table-row-background-hover: var(--theme-c-walnut-brown);
--color-table-heading-background: var(--theme-c-dark-grey-blue); --table-heading-background: var(--theme-c-dark-grey-blue);
--color-table-heading-text-color: var(--theme-c-text-dark); --table-heading-text-color: var(--theme-c-text-dark);
--color-table-cell-background: var(--theme-c-desert-sand); --table-cell-background: var(--theme-c-desert-sand);
--color-table-cell-text-color: var(--theme-c-text-light); --table-cell-text-color: var(--theme-c-text-light);
--color-table-cell-text-color-hover: var(--theme-c-text-dark); --table-cell-text-color-hover: var(--theme-c-text-dark);
--timeline-stroke-color: var(--theme-c-dark-grey-blue);
--timeline-circle-background: var(--theme-c-dark-grey-blue-translucent);
--timeline-icon-color: var(--theme-c-antique-white);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -123,22 +122,26 @@
--color-link-text-hover: var(--theme-c-text-light); --color-link-text-hover: var(--theme-c-text-light);
--color-link-text-underline: var(--theme-c-text-dark); --color-link-text-underline: var(--theme-c-text-dark);
--color-table-row-hover: var(--theme-c-walnut-brown); --table-row-background-hover: var(--theme-c-walnut-brown);
--color-table-heading-background: var(--theme-c-deep-oak); --table-heading-background: var(--theme-c-deep-oak);
--color-table-heading-text-color: var(--theme-c-text-dark); --table-heading-text-color: var(--theme-c-text-dark);
--color-table-cell-background: var(--theme-c-woody-brown); --table-cell-background: var(--theme-c-woody-brown);
--color-table-cell-text-color: var(--theme-c-text-dark); --table-cell-text-color: var(--theme-c-text-dark);
--color-table-cell-text-color-hover: var(--theme-c-text-dark); --table-cell-text-color-hover: var(--theme-c-text-dark);
--timeline-stroke-color: var(--theme-c-crystal-blue);
--timeline-circle-background: var(--theme-c-crystal-blue-translucent);
--timeline-icon-color: var(--theme-c-antique-white);
} }
} }
@media (min-width: 45em) { @media (min-width: 50em) {
:root { :root {
--font-size: 20px; --font-size: 20px;
--navigation-width: 20rem; --navigation-width: 20rem;
--color-table-color-cell-width: 10rem; --color-table-color-cell-width: 10rem;
--content-spacing: auto; --textblock-padding: auto;
--color-table-spacing: 0; --table-outer-spacing: 0;
} }
} }

2
src/scss/main.scss
View file

@ -44,7 +44,7 @@ h6 {
} }
p { p {
margin: var(--margin-paragraph) 0; margin: var(--paragraph-margin) 0;
} }
a { a {