angestoepselt/homepage
5
0
Fork 0
mirror of https://codeberg.org/angestoepselt/homepage.git synced 2025-05-24 14:46:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add mobile view to timeline

Browse source
This commit is contained in:
Yannik Rödel 2021-12-21 19:23:11 +01:00
parent ed6c0980e4
commit 962ed0c0a4
2 changed files with 54 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
src/styles/components/_timeline.scss
View file

@ -10,6 +10,50 @@
@extend %content-gutter; @extend %content-gutter;
display: flex; display: flex;
flex-direction: column;
align-items: center;
@media screen and (min-width: layout.$breakpoint) {
flex-direction: row;
align-items: flex-start;
> .content {
position: relative;
flex-grow: 1;
margin-left: layout.$normal-gap;
margin-bottom: $itemSpacing;
&::before {
content: '';
position: absolute;
top: 0;
right: calc(100% + #{layout.$normal-gap + math.div($stampSize, 2)});
bottom: #{-1 * $itemSpacing};
width: $lineWeight;
background-color: colors.$gray-300;
transform: translateX(50%);
transition: background-color motion.$subtle;
}
> h2:first-child {
position: relative;
margin-top: 0;
margin-left: layout.$large-gap;
line-height: $stampSize;
&::after {
position: absolute;
right: calc(100% + #{layout.$small-gap});
top: 50%;
width: 4rem;
height: $lineWeight;
background-color: colors.$gray-300;
transform: translateY(-100%);
transition: background-color motion.$subtle;
}
}
}
}
> .stamp { > .stamp {
display: inline-block; display: inline-block;
@ -30,39 +74,9 @@
} }
> .content { > .content {
position: relative; > p {
flex-grow: 1; margin-left: 0;
margin-left: layout.$normal-gap; margin-right: 0;
margin-bottom: $itemSpacing;
&::before {
content: '';
position: absolute;
top: 0;
right: calc(100% + #{layout.$normal-gap + math.div($stampSize, 2)});
bottom: #{-1 * $itemSpacing};
width: $lineWeight;
background-color: colors.$gray-300;
transform: translateX(50%);
transition: background-color motion.$subtle;
}
> h2:first-child {
position: relative;
margin-top: 0;
margin-left: layout.$large-gap;
line-height: $stampSize;
&::after {
position: absolute;
right: calc(100% + #{layout.$small-gap});
top: 50%;
width: 4rem;
height: $lineWeight;
background-color: colors.$gray-300;
transform: translateY(-100%);
transition: background-color motion.$subtle;
}
} }
} }

9
src/styles/lib/_layout.scss
View file

@ -27,8 +27,13 @@ $wide-content-width: 80rem;
} }
%content-gutter { %content-gutter {
margin: $normal-gap auto; margin: $normal-gap $normal-gap;
max-width: $content-width;
@media screen and (min-width: $breakpoint) {
margin-left: auto;
margin-right: auto;
max-width: $content-width;
}
} }
%wide-content { %wide-content {