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

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