123 lines
2.3 KiB
SCSS
123 lines
2.3 KiB
SCSS
@import "../../../style/mixins";
|
|
@import "../../../style/vars";
|
|
|
|
.timeline-element {
|
|
display: flex;
|
|
|
|
.line {
|
|
position: relative;
|
|
border-left: $line-width solid $accent-color;
|
|
|
|
&:before {
|
|
content: "";
|
|
@include square($icon-size);
|
|
position: absolute;
|
|
left: calc(-0.5 * #{$icon-size} - (1.5 * #{$line-width}));
|
|
border: $line-width solid $accent-color;
|
|
border-radius: 100%;
|
|
background: $background;
|
|
}
|
|
|
|
.date {
|
|
@include insignificant-font();
|
|
}
|
|
}
|
|
|
|
@media (min-width: $breakpoint-width) {
|
|
&:not(:first-of-type) .card {
|
|
margin-top: $large-margin;
|
|
}
|
|
|
|
.line {
|
|
&:before {
|
|
top: calc(33% - #{$icon-size} / 2);
|
|
}
|
|
|
|
.date {
|
|
position: relative;
|
|
top: calc(33% + #{$icon-size} / 2 + 1ch);
|
|
transform: rotate(30deg);
|
|
margin: 0 $normal-margin 0 calc(#{$line-width} + 1ex);
|
|
width: 100px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: $breakpoint-width) {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
&:before {
|
|
top: calc(50% - #{$icon-size} / 2);
|
|
}
|
|
|
|
.line {
|
|
@include center-children();
|
|
height: 150px;
|
|
width: 50%;
|
|
|
|
.date {
|
|
margin-left: calc(#{$icon-size} / 2 + #{$small-margin});
|
|
width: 200px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card {
|
|
@include card();
|
|
overflow: hidden;
|
|
|
|
& > *:not(:first-child) {
|
|
margin-top: $line-height;
|
|
}
|
|
|
|
h2 {
|
|
@include sub-title-font();
|
|
}
|
|
|
|
.image-container {
|
|
font-size: 0;
|
|
box-shadow: inset $shadow1, inset $shadow2;
|
|
pointer-events: none;
|
|
img {
|
|
pointer-events: all;
|
|
cursor: pointer;
|
|
position: relative;
|
|
z-index: -2;
|
|
}
|
|
}
|
|
|
|
.description {
|
|
font-style: italic;
|
|
}
|
|
|
|
.more {
|
|
overflow: hidden;
|
|
height: 0;
|
|
margin-top: 0;
|
|
transition: height $long-transition-time;
|
|
}
|
|
|
|
.buttons {
|
|
position: relative;
|
|
margin-top: $small-margin;
|
|
|
|
* {
|
|
transition: opacity $long-transition-time;
|
|
}
|
|
|
|
.show-more {
|
|
opacity: 1;
|
|
}
|
|
|
|
.show-less {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
}
|