From 0145c7f70c873bcc7957bf51e1843ad6a2dfa428 Mon Sep 17 00:00:00 2001 From: Sebin Nyshkim Date: Wed, 28 Sep 2022 02:16:53 +0200 Subject: [PATCH] refactor: give custom properties better names --- src/components/RefImage.vue | 2 +- src/components/TextBlock.vue | 5 ++- src/components/TimelineItem.vue | 14 ++++--- src/scss/base.scss | 69 +++++++++++++++++---------------- src/scss/main.scss | 2 +- 5 files changed, 49 insertions(+), 43 deletions(-) diff --git a/src/components/RefImage.vue b/src/components/RefImage.vue index 26c76b6..b17824e 100644 --- a/src/components/RefImage.vue +++ b/src/components/RefImage.vue @@ -12,7 +12,7 @@ diff --git a/src/components/TimelineItem.vue b/src/components/TimelineItem.vue index b0bfae9..d1ff9b9 100644 --- a/src/components/TimelineItem.vue +++ b/src/components/TimelineItem.vue @@ -53,10 +53,11 @@ const dateLabels = computed>(() => { &: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>(() => { &:before { left: auto; - right: var(--timeline-stroke-position); + right: var(--timeline-stroke-position-horizontal); } .timeline-item__datetime { @@ -88,14 +89,15 @@ const dateLabels = computed>(() => { 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); } diff --git a/src/scss/base.scss b/src/scss/base.scss index 2478f77..343ea1b 100644 --- a/src/scss/base.scss +++ b/src/scss/base.scss @@ -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; } } diff --git a/src/scss/main.scss b/src/scss/main.scss index c808a15..9508042 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -44,7 +44,7 @@ h6 { } p { - margin: var(--margin-paragraph) 0; + margin: var(--paragraph-margin) 0; } a {