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

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

@ -10,24 +10,12 @@
@extend %content-gutter; @extend %content-gutter;
display: flex; display: flex;
flex-direction: column;
align-items: center;
> .stamp { @media screen and (min-width: layout.$breakpoint) {
display: inline-block; flex-direction: row;
flex-shrink: 0; align-items: flex-start;
width: $stampSize;
height: $stampSize;
z-index: 10; // To lift it above the line.
border: $lineWeight solid colors.$gray-300;
border-radius: 100%;
line-height: #{$stampSize - 2 * $lineWeight};
text-align: center;
background-color: colors.$gray-50;
transition: border-color motion.$subtle, background-color motion.$subtle, color motion.$subtle;
&.small {
background-color: colors.$gray-300;
}
}
> .content { > .content {
position: relative; position: relative;
@ -65,6 +53,32 @@
} }
} }
} }
}
> .stamp {
display: inline-block;
flex-shrink: 0;
width: $stampSize;
height: $stampSize;
z-index: 10; // To lift it above the line.
border: $lineWeight solid colors.$gray-300;
border-radius: 100%;
line-height: #{$stampSize - 2 * $lineWeight};
text-align: center;
background-color: colors.$gray-50;
transition: border-color motion.$subtle, background-color motion.$subtle, color motion.$subtle;
&.small {
background-color: colors.$gray-300;
}
}
> .content {
> p {
margin-left: 0;
margin-right: 0;
}
}
&:hover { &:hover {
> .stamp { > .stamp {

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

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