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">
.figure {
max-width: var(--container-width-images);
max-width: var(--refimage-max-width);
margin: 0 auto;
&__image {

5
src/components/TextBlock.vue
View file

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

14
src/components/TimelineItem.vue
View file

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

69
src/scss/base.scss
View file

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

2
src/scss/main.scss
View file

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