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;
display: flex;
flex-direction: column;
align-items: center;
> .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;
}
}
@media screen and (min-width: layout.$breakpoint) {
flex-direction: row;
align-items: flex-start;
> .content {
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 {
> .stamp {

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

@ -27,8 +27,13 @@ $wide-content-width: 80rem;
}
%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;
}
}
%wide-content {