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

refactor: adjust timeline sizings for mobile, cleanup component styling

Browse source
This commit is contained in:
Sebin Nyshkim 2023-03-23 13:26:08 +01:00
parent 35d5232575
commit f7ae855221
3 changed files with 47 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/components/TimelineItem.vue
View file

@ -28,14 +28,12 @@
&:not(:last-child):before {
content: "";
position: absolute;
top: var(--timeline-stroke-position-top);
left: var(--timeline-stroke-position-horizontal);
inset: var(--timeline-stroke-position-odd);
height: var(--timeline-stroke-length);
border-left: var(--timeline-stroke-thickness) solid
var(--timeline-stroke-color);
}
@media (min-width: 64em) {
&:nth-child(odd) {
margin: var(--timeline-item-margin-odd);
}
@ -44,18 +42,7 @@
margin: var(--timeline-item-margin-even);
&:before {
left: auto;
right: var(--timeline-stroke-position-horizontal);
}
.timeline-item__icon {
order: 1;
}
.timeline-item__content {
text-align: right;
margin: 0 1rem 0 0;
}
inset: var(--timeline-stroke-position-even);
}
}
@ -82,9 +69,19 @@
}
}
&:nth-child(even) &__icon {
order: var(--timeline-item-flex-order);
}
&__content {
flex: 1 0 0;
margin: 0 0 0 1rem;
margin: 0;
padding: var(--timeline-item-content-padding-odd);
}
&:nth-child(even) &__content {
text-align: var(--timeline-item-text-align-even);
padding: var(--timeline-item-content-padding-even);
}
&__headline {

2
src/components/TimelineList.vue
View file

@ -6,7 +6,7 @@
<style lang="scss">
.timeline {
max-width: calc(var(--timeline-circle-size) * 15);
max-width: var(--timeline-max-width);
position: relative;
margin: 0 auto;

31
src/scss/base.scss
View file

@ -96,8 +96,8 @@
var(--color-router-link);
--navigation-link-last-child-margin: 0;
--timeline-max-width: calc(var(--timeline-circle-size) * 15);
--timeline-circle-size: 4rem;
--timeline-max-width: calc(var(--timeline-circle-size) * 10);
--timeline-circle-size: 3rem;
--timeline-circle-font-size: calc(var(--timeline-circle-size) * 0.2);
--timeline-circle-background-color: var(--theme-c-woody-brown);
--timeline-circle-padding: calc(var(--timeline-circle-font-size));
@ -109,9 +109,18 @@
var(--timeline-circle-size) / 2 - var(--timeline-stroke-thickness) / 2
);
--timeline-stroke-position-odd: var(--timeline-stroke-position-top) auto auto
var(--timeline-stroke-position-horizontal);
--timeline-stroke-position-even: var(--timeline-stroke-position-odd);
--timeline-item-margin: 1.5rem 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-margin-odd: var(--timeline-item-margin);
--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
);
--table-border-radius: 1rem;
--table-outer-spacing: 0 var(--container-spacing-right-safe) 0
@ -194,6 +203,7 @@
:root {
--table-cell-padding: 0.5rem 1rem;
--font-size: 20px;
--timeline-circle-size: 4rem;
}
}
@ -248,7 +258,20 @@
@media (min-width: 64em) {
:root {
--timeline-max-width: calc(var(--timeline-circle-size) * 15);
--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-flex-order: 1;
--timeline-item-content-margin-odd: 0 0 0 1rem;
--timeline-item-content-margin-even: 0 1rem 0 0;
--timeline-item-text-align-even: right;
--timeline-item-content-padding-odd: var(--textblock-padding);
--timeline-item-content-padding-even: var(--textblock-padding);
}
}