diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index ead4eafc289ea9fb0d095b2e8f2f11e246543de1..b4b19cd51531f7e0b0503a6cd345deeaccb8ffeb 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -40,6 +40,9 @@
.programs__section &
@content
+@function half($size)
+ @return calc(#{$size} / 2)
+
@mixin link($color: $link-color)
color: $color
text-decoration-color: rgba($color, 0.3)
@@ -87,8 +90,8 @@
margin-left: auto
margin-right: auto
max-width: $grid-max-width
- padding-left: calc(#{$grid-gutter-sm} / 2)
- padding-right: calc(#{$grid-gutter-sm} / 2)
+ padding-left: half($grid-gutter-sm)
+ padding-right: half($grid-gutter-sm)
width: 100%
@include media-breakpoint-up(md)
padding-left: $grid-gutter
diff --git a/assets/sass/_theme/blocks/call_to_action.sass b/assets/sass/_theme/blocks/call_to_action.sass
index c5695a2b0a5d640f642985aac41f8dce37f31406..efb433a5909c2a4c5ea9504dbebf582f865b83bd 100644
--- a/assets/sass/_theme/blocks/call_to_action.sass
+++ b/assets/sass/_theme/blocks/call_to_action.sass
@@ -41,7 +41,7 @@
&:last-child
margin-bottom: 0
.call_to_action--with-image
- padding-top: calc(#{$grid-gutter-sm} / 2)
+ padding-top: half($grid-gutter-sm)
display: flex
flex-direction: column
> *
diff --git a/assets/sass/_theme/blocks/gallery.sass b/assets/sass/_theme/blocks/gallery.sass
index c79569d6879967bf0c7befb008b3a4057876ada6..972f5e285391b83e79f84cfa9d8f4ac5c8996062 100644
--- a/assets/sass/_theme/blocks/gallery.sass
+++ b/assets/sass/_theme/blocks/gallery.sass
@@ -33,12 +33,12 @@
.gallery
align-items: baseline
@include in-page-with-sidebar
- @include grid(3, md, calc(#{$grid-gutter} / 2), calc(#{$grid-gutter} / 2))
+ @include grid(3, md, half($grid-gutter), half($grid-gutter))
@include in-page-without-sidebar
@include grid(4, md)
@include media-breakpoint-down(md)
@include grid(2)
- grid-gap: calc(#{$grid-gutter-sm} / 2) !important
+ grid-gap: half($grid-gutter-sm) !important
figure
&:after
content: 'Â ' // This is used to allow align baseline without figcaption
@@ -54,15 +54,15 @@
margin-top: 0
.container
.top
- padding-right: calc(#{$grid-gutter-sm} / 2)
+ padding-right: half($grid-gutter-sm)
@include media-breakpoint-up(md)
- padding-right: calc(#{$grid-gutter} / 2)
+ padding-right: half($grid-gutter)
.splide
display: flex
flex-direction: column
&__track
overflow: visible
- margin-right: -calc(#{$grid-gutter-sm} / 2)
+ margin-right: half(-$grid-gutter-sm)
.splide__slide
transition: opacity .3s ease
opacity: 0.1
@@ -71,7 +71,7 @@
&.is-active
opacity: 1
@include media-breakpoint-up(md)
- margin-right: -calc(#{$grid-gutter} / 2)
+ margin-right: half(-$grid-gutter)
&__slide
flex-shrink: initial
&:last-child
@@ -80,7 +80,7 @@
img
max-width: 100%
figure
- margin-right: calc(#{$grid-gutter} / 2)
+ margin-right: half($grid-gutter)
picture
img
// FIXME Arnaud: I would like images at constant height, can't manage to get it right.
diff --git a/assets/sass/_theme/blocks/image.sass b/assets/sass/_theme/blocks/image.sass
index 4282437115fa3942a3cb36df79eec186a4e39488..31df833888fbbea5c094d6147e7db716318d7a63 100644
--- a/assets/sass/_theme/blocks/image.sass
+++ b/assets/sass/_theme/blocks/image.sass
@@ -15,8 +15,8 @@
@extend .meta
picture
display: block
- margin-left: calc(-#{$grid-gutter-sm} / 2)
- margin-right: calc(-#{$grid-gutter-sm} / 2)
+ margin-left: half(-$grid-gutter-sm)
+ margin-right: half(-$grid-gutter-sm)
@include in-page-with-sidebar
@include media-breakpoint-up(md)
@@ -38,7 +38,7 @@
align-items: flex-end
> a
width: col(7)
- margin-left: calc(#{$grid-gutter} / 2)
+ margin-left: half($grid-gutter)
display: block
order: 2
picture
diff --git a/assets/sass/_theme/blocks/pages.sass b/assets/sass/_theme/blocks/pages.sass
index aa9520756cca5ef0d9e4b2a092346a0b00a9593a..5a249f7643d690011ad045466dc5a3de28e6ba9a 100644
--- a/assets/sass/_theme/blocks/pages.sass
+++ b/assets/sass/_theme/blocks/pages.sass
@@ -28,7 +28,7 @@
@extend .h3
p
@extend .small
- margin-top: calc(#{$spacing1} / 2)
+ margin-top: half($spacing1)
@include in-page-without-sidebar
.pages
@include grid(3, xl)
@@ -55,7 +55,7 @@
margin-top: calc(#{$spacing2}
.page
.title
- margin-top: calc(#{$spacing1} / 2)
+ margin-top: half($spacing1)
a
@extend .meta
@include hover-translate-icon(before, 3)
diff --git a/assets/sass/_theme/blocks/timeline.sass b/assets/sass/_theme/blocks/timeline.sass
index aa0be3eabdbdb26590694a1a2c558ddd0031b074..bcba81f5df305cf8097a45b6541b66bc272df07e 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: calc(-#{$grid-gutter} / 2)
+ left: half(-$grid-gutter)
margin-top: 0.5em
position: absolute
width: 9px
@@ -20,7 +20,7 @@
background: $color-text
bottom: -0.5em
content: ""
- left: calc(-#{$grid-gutter} / 2)
+ left: half(-$grid-gutter)
position: absolute
top: 0.5em
width: 1px
@@ -33,7 +33,7 @@
margin-bottom: $spacing0
@include media-breakpoint-down(md)
.event
- padding-left: calc(#{$grid-gutter-sm} / 2)
+ padding-left: half($grid-gutter-sm)
&::after, &::before
left: 0
@include media-breakpoint-up(md)
@@ -44,7 +44,7 @@
display: flex
&::before, &::after
left: col(3)
- margin-left: calc(#{$grid-gutter} / 2)
+ margin-left: half($grid-gutter)
&::before
transform: translateX(-4px)
p:first-child
@@ -79,7 +79,7 @@
color: $block-timeline-horizontal-color
cursor: pointer
font-size: 1rem
- padding: calc(#{$grid-gutter} / 2)
+ padding: half($grid-gutter)
&:first-child
@include icon(arrow-left, before)
&:last-child
@@ -101,7 +101,7 @@
width: 100%
.event
flex: none
- padding: 0 calc(#{$grid-gutter} / 2)
+ padding: 0 half($grid-gutter)
scroll-snap-align: start
transition: 0.3s opacity
width: 50%
@@ -114,7 +114,7 @@
margin-bottom: $spacing1
opacity: 1
overflow: visible
- width: calc(100% + #{$grid-gutter} / 2)
+ width: calc(100% + half($grid-gutter))
&::before
background: $block-timeline-horizontal-color
border-radius: 50%
diff --git a/assets/sass/_theme/blocks/video.sass b/assets/sass/_theme/blocks/video.sass
index eedab63e61434dbe3b73653bf177394b908af653..f0c2c5f9647b9a5cfa7da3fd346b6acba9c7deec 100644
--- a/assets/sass/_theme/blocks/video.sass
+++ b/assets/sass/_theme/blocks/video.sass
@@ -9,7 +9,7 @@
margin-left: auto
@include media-breakpoint-down(md)
.video
- margin-left: calc(-#{$grid-gutter-sm} / 2)
- margin-right: calc(-#{$grid-gutter-sm} / 2)
+ margin-left: half(-$grid-gutter-sm)
+ margin-right: half(-$grid-gutter-sm)
.video + p
margin-top: $spacing0
\ No newline at end of file
diff --git a/assets/sass/_theme/design-system/footer.sass b/assets/sass/_theme/design-system/footer.sass
index 2ac1b548a090068b736c7fb7a0f9ee06cfdc24d9..f69f464f2a735eaba9ff8ba60725d55302cecadf 100644
--- a/assets/sass/_theme/design-system/footer.sass
+++ b/assets/sass/_theme/design-system/footer.sass
@@ -46,9 +46,9 @@ footer[role="contentinfo"]
// TODO : add padding on every link in typography ?
[class^="nav-"]
- margin-left: calc(#{$spacing0} / -2)
+ margin-left: half(-$spacing0)
a
- padding: calc(#{$spacing0} / 2)
+ padding: half($spacing0)
// END TODO
diff --git a/assets/sass/_theme/design-system/table.sass b/assets/sass/_theme/design-system/table.sass
index 1853badcc45d99c4f7650e8bfb8d47db439a7727..49e6adb4a3e6440c2342d1f93e14073ef418126a 100644
--- a/assets/sass/_theme/design-system/table.sass
+++ b/assets/sass/_theme/design-system/table.sass
@@ -37,4 +37,13 @@ table
border-top: 1px solid $color-border
.table-responsive
- overflow-x: auto
\ No newline at end of file
+ overflow-x: auto
+ margin-left: half(-$grid-gutter-sm)
+ margin-right: half(-$grid-gutter-sm)
+ padding-left: half($grid-gutter-sm)
+ padding-right: half($grid-gutter-sm)
+ @include media-breakpoint-up(md)
+ margin-left: half(-$grid-gutter)
+ margin-right: half(-$grid-gutter)
+ padding-left: half($grid-gutter)
+ padding-right: half($grid-gutter)
\ No newline at end of file