florian.richer/portfolio_leptos
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Timeline: Add mobile first

Browse source
This commit is contained in:
Florian RICHER 2023-06-03 13:38:49 +02:00
parent fb58e56dad
commit cd942c3e8a
1 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/timeline/Timeline.scss
View file

@ -8,7 +8,7 @@
@apply mb-12 relative flex;
& > details {
@apply w-2/5 rounded-xl overflow-hidden relative bg-[#f5f5f5];
@apply w-4/5 md:max-2xl:w-2/5 left-[10%] md:max-2xl:left-0 rounded-xl overflow-hidden relative bg-[#f5f5f5];
box-shadow: 3px 3px 12px #dee1e4, -3px -3px 12px #fff;
& > summary {
@ -34,18 +34,18 @@
// Place point in center line
&:before {
@apply content-[""] w-6 h-6 rounded-[50%] absolute top-5 left-1/2 bg-[#f8f8f8] -ml-2 z-50;
@apply content-[""] w-6 h-6 rounded-[50%] absolute top-5 left-0 md:max-2xl:left-1/2 bg-[#f8f8f8] -ml-2 z-50;
box-shadow: 2px 2px 5px #dee1e4, -2px -2px 5px #fff;
}
&:nth-child(even) {
justify-content: flex-end;
@apply md:max-2xl:justify-end;
}
}
// Draw center line
&:before {
@apply top-0 bottom-0 left-1/2 absolute content-[""] w-2 bg-[#f5f5f5];
@apply top-0 bottom-0 left-0 md:max-2xl:left-1/2 absolute content-[""] w-2 bg-[#f5f5f5];
box-shadow: 1px 1px 5px #dee1e4, -1px -1px 5px #fff;
}
}