refactor: give custom properties better names

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

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 {

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>

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);
}