From 79805bbd5639de065a67a536eaf9c7398491bd49 Mon Sep 17 00:00:00 2001
From: Arnaud Levy <contact@arnaudlevy.com>
Date: Thu, 15 Feb 2024 12:39:42 +0100
Subject: [PATCH] Fix timeline
---
assets/sass/_theme/blocks/timeline.sass | 19 ++++++++++---------
1 file changed, 10 insertions(+), 9 deletions(-)
diff --git a/assets/sass/_theme/blocks/timeline.sass b/assets/sass/_theme/blocks/timeline.sass
index 66b1c887..6d6d6b90 100644
--- a/assets/sass/_theme/blocks/timeline.sass
+++ b/assets/sass/_theme/blocks/timeline.sass
@@ -11,7 +11,7 @@
border-radius: 50%
content: ""
height: 9px
- left: half(var(--grid-gutter-negative))
+ left: -$spacing-3
margin-top: 0.5em
position: absolute
width: 9px
@@ -20,7 +20,7 @@
background: $color-text
bottom: -0.5em
content: ""
- left: half(var(--grid-gutter-negative))
+ left: -$spacing-3
position: absolute
top: 0.5em
width: 1px
@@ -35,7 +35,7 @@
@include media-breakpoint-down(desktop)
.timeline-event
- padding-left: half(var(--grid-gutter))
+ padding-left: $spacing-3
&::after, &::before
left: 0
@@ -46,7 +46,7 @@
display: flex
&::before, &::after
left: columns(3)
- margin-left: half(var(--grid-gutter))
+ margin-left: calc(var(--grid-gutter) / 2)
&::before
transform: translateX(-4px)
.title
@@ -77,7 +77,7 @@
.timeline-arrows
display: flex
- padding-left: half(var(--grid-gutter))
+ padding-left: calc(var(--grid-gutter) / 2)
> button
@include button-reset
background: none
@@ -93,8 +93,8 @@
cursor: default
opacity: 0.3
.timeline-events
- margin-left: half(var(--grid-gutter-negative))
- margin-right: half(var(--grid-gutter-negative))
+ margin-left: calc(var(--grid-gutter-negative) / 2)
+ margin-right: calc(var(--grid-gutter-negative) / 2)
// TODO : fixer le px gap en desktop entre chaque event
ol
display: flex
@@ -106,7 +106,7 @@
width: 100%
.timeline-event
flex: none
- padding: 0 half(var(--grid-gutter))
+ padding: 0 calc(var(--grid-gutter) / 2)
scroll-snap-align: start
transition: 0.3s opacity
width: 50%
@@ -123,13 +123,14 @@
margin-bottom: $spacing-3
opacity: 1
overflow: visible
- width: calc(100% + #{half(var(--grid-gutter))})
+ width: calc(100% + #{var(--grid-gutter) / 2})
&::before
background: $block-timeline-horizontal-color
border-radius: 50%
content: ""
display: block
height: 9px
+ margin-left: -4px
position: relative
top: -4px
width: 9px
--
GitLab