192 lines
4 KiB
SCSS
192 lines
4 KiB
SCSS
@use '../../../style/mixins' as *;
|
|
|
|
@mixin q-dependent-line-container($q) {
|
|
.line {
|
|
height: calc(#{$q} - var(--icon-size) / 2);
|
|
|
|
&:before {
|
|
height: calc(100% - #{$q} - var(--icon-size) / 2);
|
|
}
|
|
&:after {
|
|
top: calc(#{$q} - var(--icon-size) / 2);
|
|
}
|
|
}
|
|
.date {
|
|
top: calc(#{$q} - 0.5ch);
|
|
}
|
|
}
|
|
|
|
.timeline-element {
|
|
display: flex;
|
|
width: var(--body-width);
|
|
margin: auto;
|
|
|
|
.line-container {
|
|
position: relative;
|
|
@include q-dependent-line-container(33%);
|
|
|
|
.line {
|
|
border-left: var(--line-width) solid var(--accent-color);
|
|
|
|
&:before,
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
}
|
|
|
|
&:before {
|
|
left: 0;
|
|
bottom: 0;
|
|
border-left: var(--line-width) solid var(--accent-color);
|
|
}
|
|
|
|
&:after {
|
|
@include square(var(--icon-size));
|
|
border-radius: 1000px;
|
|
border: var(--line-width) solid var(--accent-color);
|
|
left: calc((var(--line-width) - var(--icon-size)) / 2);
|
|
}
|
|
}
|
|
|
|
.date {
|
|
@include special-text-font();
|
|
position: absolute;
|
|
transform-origin: left center;
|
|
transform: rotate(30deg) translateX(calc(var(--icon-size) / 2 + 6px))
|
|
translateY(-10%);
|
|
|
|
padding-right: var(--normal-margin);
|
|
}
|
|
}
|
|
|
|
@include on-large-screen {
|
|
.line-container {
|
|
min-width: 160px;
|
|
}
|
|
|
|
&:not(:first-of-type) .card {
|
|
margin-top: var(--large-margin);
|
|
}
|
|
}
|
|
|
|
@include on-small-screen {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.line-container {
|
|
@include q-dependent-line-container(50%);
|
|
height: 150px;
|
|
min-width: 64%;
|
|
|
|
.date {
|
|
transform: translateX(calc(var(--icon-size) / 2 + 12px)) translateY(-10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.card {
|
|
text-align: center;
|
|
box-shadow: var(--shadow);
|
|
border-radius: var(--border-radius);
|
|
z-index: 1;
|
|
background-color: var(--blurred-card-color);
|
|
transition: background-color var(--transition-time);
|
|
|
|
@include blurred-background();
|
|
|
|
img,
|
|
video,
|
|
iframe {
|
|
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
|
}
|
|
|
|
$border-width: 1px;
|
|
|
|
.lower {
|
|
& > * {
|
|
padding: 0 var(--normal-margin);
|
|
margin-top: var(--small-margin);
|
|
}
|
|
|
|
h2 > a {
|
|
@include sub-title-font();
|
|
text-decoration: none;
|
|
position: relative;
|
|
|
|
&:before {
|
|
content: '#';
|
|
position: absolute;
|
|
left: -0.5ch;
|
|
top: 0;
|
|
opacity: 0;
|
|
transform: translateX(-100%);
|
|
transition: opacity var(--transition-time);
|
|
}
|
|
|
|
&:hover:before {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
& > p {
|
|
text-align: center;
|
|
}
|
|
|
|
.more {
|
|
overflow: hidden;
|
|
margin: 0;
|
|
height: 0;
|
|
transition: height var(--transition-time);
|
|
|
|
.content p {
|
|
margin-top: var(--line-height);
|
|
}
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
border-top: $border-width solid var(--normal-text-color);
|
|
transition: border-color var(--transition-time);
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
margin-top: var(--small-margin);
|
|
|
|
.info-button {
|
|
@include image-button(var(--icon-size));
|
|
@include main-font();
|
|
|
|
.svgContainer {
|
|
position: relative;
|
|
margin: auto;
|
|
@include square(var(--icon-size));
|
|
|
|
svg {
|
|
stroke: var(--normal-text-color);
|
|
transition: stroke var(--transition-time);
|
|
}
|
|
}
|
|
|
|
p {
|
|
@include main-font();
|
|
padding-bottom: var(--small-margin);
|
|
font-size: 0.9rem;
|
|
font-style: italic;
|
|
padding: 0 8px 8px 8px;
|
|
}
|
|
}
|
|
|
|
& > * {
|
|
flex: 1;
|
|
|
|
padding-top: var(--small-margin);
|
|
&:not(:last-child) {
|
|
border-right: $border-width solid var(--normal-text-color);
|
|
transition: border-color var(--transition-time);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|