andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Make line curved at the ends

Browse source
This commit is contained in:
Andras Schmelczer 2022-09-26 16:02:45 +02:00
parent a91e5322b0
commit eb16cda173
No known key found for this signature in database
GPG key ID: 0EA1BC97D0AB076E
2 changed files with 19 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/page/timeline-element/timeline-element.html.ts
View file

@ -8,7 +8,7 @@ export const generate = (
{ date, title, description, more, links }: TimelineElementParameters, { date, title, description, more, links }: TimelineElementParameters,
showMore: string showMore: string
): html => ` ): html => `
<section id="${titleToFragment(title).replace('#', '')}" class="timeline-element"> <article id="${titleToFragment(title).replace('#', '')}" class="timeline-element">
<div class="line-container"> <div class="line-container">
<div class="line"></div> <div class="line"></div>
<p class="date">${date}</p> <p class="date">${date}</p>
@ -44,5 +44,5 @@ export const generate = (
</div> </div>
</div> </div>
</div> </div>
</section> </article>
`; `;

21
src/page/timeline-element/timeline-element.scss
View file

@ -7,10 +7,12 @@
&:before { &:before {
height: calc(100% - #{$q} - var(--icon-size) / 2); height: calc(100% - #{$q} - var(--icon-size) / 2);
} }
&:after { &:after {
top: calc(#{$q} - var(--icon-size) / 2); top: calc(#{$q} - var(--icon-size) / 2);
} }
} }
.date { .date {
top: calc(#{$q} - 0.5ch); top: calc(#{$q} - 0.5ch);
} }
@ -21,12 +23,16 @@
width: var(--body-width); width: var(--body-width);
margin: auto; margin: auto;
.line-container { > .line-container {
position: relative; position: relative;
@include q-dependent-line-container(33%); @include q-dependent-line-container(33%);
.line { > .line {
border-left: var(--line-width) solid var(--accent-color); &,
&:before {
background: var(--accent-color);
width: var(--line-width);
}
&:before, &:before,
&:after { &:after {
@ -37,7 +43,6 @@
&:before { &:before {
left: 0; left: 0;
bottom: 0; bottom: 0;
border-left: var(--line-width) solid var(--accent-color);
} }
&:after { &:after {
@ -60,6 +65,14 @@
} }
@include on-large-screen { @include on-large-screen {
&:first-of-type > .line-container > .line {
border-radius: 100px 100px 0 0;
}
&:last-of-type > .line-container > .line:before {
border-radius: 0 0 100px 100px;
}
.line-container { .line-container {
min-width: 160px; min-width: 160px;
} }