diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index 5f6d13b4ea1aa0b90941ddd9fe2d2895d88742f9..a05621189c41592d9d370f8efc78e7404738e5d0 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -10,13 +10,15 @@ $body-color: $color-text !default
$body-background-color: $color-background !default
$link-color: $color-text !default
-// Grid
-$grid-gutter: px2rem(64) !default
-$grid-max-width: px2rem(1980) !default
-$grid-gutter-sm: px2rem(44) !default
+// Grid System
+$grid-gutter: pxToRem(24) !default
+$grid-gutter-lg: pxToRem(48) !default
+$grid-gutter-xxl: pxToRem(64) !default
+$grid-max-width: pxToRem(1980) !default
// Spacing
$space-unit: 4 !default
+
$spacing0: space(3) !default
$spacing1: space(6) !default
$spacing2: space(12) !default
@@ -24,6 +26,7 @@ $spacing3: space(16) !default
$spacing4: space(32) !default
$spacing5: space(64) !default
+
// TYPOGRAPHY
// Fonts family
@@ -35,61 +38,61 @@ $heading-font-weight: normal !default
// h1
$h1-font-family: $heading-font-family !default
-$h1-size-desktop: px2rem(60) !default
-$h1-size: px2rem(30) !default
+$h1-size-desktop: pxToRem(60) !default
+$h1-size: pxToRem(30) !default
$h1-line-height: 120% !default
$h1-weight: bold !default
$h1-text-transform: none !default
// h2
$h2-font-family: $heading-font-family !default
-$h2-size-desktop: px2rem(40) !default
-$h2-size: px2rem(24) !default
+$h2-size-desktop: pxToRem(40) !default
+$h2-size: pxToRem(24) !default
$h2-line-height: 120% !default
$h2-weight: $heading-font-weight !default
$h2-text-transform: none !default
// h3
$h3-font-family: $heading-font-family !default
-$h3-size-desktop: px2rem(28) !default
-$h3-size: px2rem(20) !default
+$h3-size-desktop: pxToRem(28) !default
+$h3-size: pxToRem(20) !default
$h3-line-height: 130% !default
$h3-weight: bold !default
$h3-text-transform: none !default
// h4
$h4-font-family: $heading-font-family !default
-$h4-size-desktop: px2rem(22) !default
-$h4-size: px2rem(16) !default
+$h4-size-desktop: pxToRem(22) !default
+$h4-size: pxToRem(16) !default
$h4-line-height: 130% !default
$h4-weight: bold !default
$h4-text-transform: none !default
// h5 or Section
$h5-font-family: $heading-font-family !default
-$h5-size-desktop: px2rem(24) !default
-$h5-size: px2rem(20) !default
+$h5-size-desktop: pxToRem(24) !default
+$h5-size: pxToRem(20) !default
$h5-line-height: 130% !default
$h5-weight: $heading-font-weight !default
$h5-text-transform: uppercase !default
// h6 or Tab
$h6-font-family: $heading-font-family !default
-$h6-size-desktop: px2rem(20) !default
-$h6-size: px2rem(14) !default
+$h6-size-desktop: pxToRem(20) !default
+$h6-size: pxToRem(14) !default
$h6-line-height: 130% !default
$h6-weight: $heading-font-weight !default
$h6-text-transform: uppercase !default
// Lead
$lead-font-family: $heading-font-family !default
-$lead-size-desktop: px2rem(60) !default
-$lead-size: px2rem(24) !default
+$lead-size-desktop: pxToRem(60) !default
+$lead-size: pxToRem(24) !default
$lead-line-height: 120% !default
$lead-weight: $heading-font-weight !default
$lead-sidebar-font-family: $lead-font-family !default
-$lead-sidebar-size-desktop: px2rem(32) !default
+$lead-sidebar-size-desktop: pxToRem(32) !default
$lead-sidebar-line-height: $lead-line-height !default
$lead-sidebar-weight: $lead-weight !default
@@ -100,37 +103,37 @@ $lead-hero-line-height: $lead-sidebar-line-height !default
$lead-hero-weight: $lead-sidebar-weight !default
// Body
-$body-size-desktop: px2rem(22) !default
-$body-size: px2rem(18) !default
+$body-size-desktop: pxToRem(22) !default
+$body-size: pxToRem(18) !default
$body-line-height: 160% !default
$body-weight: normal !default
// Small
$small-font-family: $body-font-family !default
-$small-size-desktop: px2rem(18) !default
-$small-size: px2rem(14) !default
+$small-size-desktop: pxToRem(18) !default
+$small-size: pxToRem(14) !default
$small-line-height: 130% !default
$small-weight: normal !default
// Signature
$signature-font-family: $heading-font-family !default
-$signature-size-desktop: px2rem(22) !default
-$signature-size: px2rem(18) !default
+$signature-size-desktop: pxToRem(22) !default
+$signature-size: pxToRem(18) !default
$signature-line-height: 130% !default
$signature-weight: $heading-font-weight !default
// Meta
$meta-font-family: $heading-font-family !default
-$meta-size-desktop: px2rem(16) !default
-$meta-size: px2rem(14) !default
+$meta-size-desktop: pxToRem(16) !default
+$meta-size: pxToRem(14) !default
$meta-line-height: 150% !default
$meta-weight: $heading-font-weight !default
// Quotes
$quote-font-family: $body-font-family !default
-$quote-size-desktop-short: px2rem(60) !default
-$quote-size-desktop-long: px2rem(40) !default
-$quote-size: px2rem(24) !default
+$quote-size-desktop-short: pxToRem(60) !default
+$quote-size-desktop-long: pxToRem(40) !default
+$quote-size: pxToRem(24) !default
$quote-line-height: 120% !default
$quote-weight: normal !default
$quote-style: italic !default
@@ -142,13 +145,13 @@ $link-transition: text-decoration-color .3s ease !default
$link-unhover-decoration-color-alpha: 0.3 !default
// Buttons
-$btn-font-size-desktop: px2rem(18) !default // TODO
-$btn-font-size: px2rem(14) !default
+$btn-font-size-desktop: pxToRem(18) !default // TODO
+$btn-font-size: pxToRem(14) !default
$btn-padding-x-desktop: $spacing1 !default
-$btn-padding-y-desktop: px2rem(15) !default
+$btn-padding-y-desktop: pxToRem(15) !default
$btn-padding-x: $spacing1 !default
$btn-padding-y: $spacing0 !default
-$btn-border-radius: px2rem(4) !default
+$btn-border-radius: pxToRem(4) !default
$btn-border: 1px solid $color-text !default
$btn-hover-background: $color-background-alt !default
@@ -189,8 +192,8 @@ $header-sticky-background: $color-background !default
$header-sticky-dropdown-background: $header-sticky-background !default
$header-sticky-color: $header-color !default
$header-sticky-transition: $header-transition !default
-$header-nav-padding-y: px2rem(20) !default
-$header-nav-padding-y-desktop: px2rem(30) !default
+$header-nav-padding-y: pxToRem(20) !default
+$header-nav-padding-y-desktop: pxToRem(30) !default
$header-logo-height: 32px !default
$header-logo-height-desktop: $header-logo-height !default
$header-height: 87px !default
@@ -207,7 +210,7 @@ $footer-background-color: $color-background-alt !default
$footer-logo-height: $header-logo-height !default
$footer-logo-height-desktop: $footer-logo-height !default
$footer-icons-enabled: true !default
-$footer-icons-size: px2rem(32) !default
+$footer-icons-size: pxToRem(32) !default
$footer-text-hidden: false !default
$dropdown-i18n-background-color: $color-background !default
$dropdown-i18n-color: $color-text !default
@@ -366,20 +369,20 @@ $block-key_figures-number-font-family: $heading-font-family !default
$block-key_figures-unit-font-weight: normal !default
$block-key_figures-number-font-weight: bold !default
-$block-key_figures-font-size: px2rem(16) !default
-$block-key_figures-number-font-size: px2rem(32) !default
+$block-key_figures-font-size: pxToRem(16) !default
+$block-key_figures-number-font-size: pxToRem(32) !default
-$block-key_figures-font-size-desktop: px2rem(18) !default
-$block-key_figures-number-font-size-desktop: px2rem(40) !default
+$block-key_figures-font-size-desktop: pxToRem(18) !default
+$block-key_figures-number-font-size-desktop: pxToRem(40) !default
-$block-key_figures-font-size-lg: px2rem(20) !default
-$block-key_figures-number-font-size-lg: px2rem(50) !default
+$block-key_figures-font-size-lg: pxToRem(20) !default
+$block-key_figures-number-font-size-lg: pxToRem(50) !default
$block-key_figures-font-size-xl: $block-key_figures-font-size-lg !default
-$block-key_figures-number-font-size-xl: px2rem(60) !default
+$block-key_figures-number-font-size-xl: pxToRem(60) !default
$block-key_figures-font-size-xxl: $block-key_figures-font-size-xl !default
-$block-key_figures-number-font-size-xxl: px2rem(80) !default
+$block-key_figures-number-font-size-xxl: pxToRem(80) !default
// Block gallery
$block-gallery-carousel-background: $color-background-alt !default
@@ -393,11 +396,8 @@ $block-image-max-height-without-sidebar: none !default
$block-video-background: $color-background-alt !default
// Sections
-$article-media-background: color-contrast($color-background, 3%) !default
$article-media-aspect-ratio: 2 !default
-$post-media-background: $article-media-background !default
-$post-categories-color: color-contrast($color-text, 20%) !default
$post-time-color: $color-text-alt !default
// Si layout posts grid (ne concerne pas les blocks posts)
$posts-grid-columns: $block-posts-grid-columns !default
@@ -423,4 +423,4 @@ $icon-burger-margin-right: -12px
$icon-close-margin-right: -12px
$icon-toc-margin-right: -14px
$icon-arrow-previous-margin-left: -22px // cf. testimonial
-$icon-social-margin-right: -14px
\ No newline at end of file
+$icon-social-margin-right: -14px
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index 0e9fd77345bf757f181cbf8f230ad8f80780306c..0cc7245e2b45e7b22df87f7b716b13b557cf16a0 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -1,474 +1,10 @@
-@function pxToRem($size)
- $remSize: $size / 16
- @return #{$remSize}rem
-
-@function px2rem($size)
- @return pxToRem($size)
-
-$space-unit: 4 !default
-@function space($spaces: 1)
- @return #{$spaces * $space-unit / 16}rem
-
-@mixin in-page-with-sidebar
- @include media-breakpoint-up(desktop)
- body:not(.full-width) &
- @content
-
-@mixin in-page-without-sidebar
- @include media-breakpoint-up(desktop)
- main > .blocks &,
- body.full-width &,
- @content
-
-// Use this mixin to override with-aside or without-aside rules
-@mixin in-page-with-or-without-sidebar
- @include media-breakpoint-up(desktop)
- body:not(.full-width) &,
- main > .blocks &,
- body.full-width &,
- @content
-
-// Aliases
-@mixin full-page
- @include in-page-without-sidebar
- @content
-
-@mixin not-full-page
- @include in-page-with-sidebar
- @content
-
-@mixin in-page-program
- .programs__section &
- @content
-
-@function half($size)
- @return calc(#{$size} / 2)
-
-@mixin link($color: $link-color, $unhover_decorated: true)
- color: $color
- text-decoration-line: underline
- text-decoration-thickness: $link-underline-thickness
- text-underline-offset: $link-underline-offset
- transition: $link-transition
- @if $unhover_decorated
- text-decoration-color: rgba($color, $link-unhover-decoration-color-alpha)
- @else
- text-decoration-color: transparent
- &:hover
- text-decoration-color: rgba($color, 1)
- text-decoration-thickness: $link-underline-thickness
-
-@mixin link-hovered-underline-only
- &:not(:hover)
- text-decoration: transparent
-
-@mixin hover-translate-icon($pseudo: after, $distance: 10)
- &::#{$pseudo}
- display: inline-block
- transition: transform 0.55s $arrow-ease-transition
- transform: translateX(0)
- &:hover
- &::#{$pseudo}
- transform: translateX(#{px2rem($distance)})
-
-@mixin sticky($offset-y: 0)
- position: sticky
- top: $offset-y
- @if $header-sticky-enabled
- transition: top $header-sticky-transition
- html:not(.is-scrolling-down) &
- top: calc(var(--header-height) + #{$offset-y})
-
-// NEW UTILS
-@mixin icon($icon-name: '', $pseudo-element: before, $non-breaking: false)
- &::#{$pseudo-element}
- content: map-get($icons, $icon-name)
- display: inline-block
- font-family: 'Icon'
- font-style: normal
- font-variant: normal
- font-weight: normal
- line-height: 1
- speak: never
- text-transform: none
- vertical-align: middle
- @if $non-breaking
- content: "Â #{map-get($icons, $icon-name)}"
- display: inline
- @content // TODO : important de documenter ça
-
-@mixin icon-block($icon-name: '', $pseudo-element: before, $non-breaking: false)
- @include icon($icon-name, $pseudo-element, $non-breaking)
- font-size: 44px
- display: inline
- @content
-
-@mixin container
- margin-left: auto
- margin-right: auto
- max-width: $grid-max-width
- padding-left: half($grid-gutter-sm)
- padding-right: half($grid-gutter-sm)
- width: 100%
- @include media-breakpoint-up(desktop)
- padding-left: $grid-gutter
- padding-right: $grid-gutter
-
-@mixin grid($cols: 12, $breakpoint: false, $gap-y: $grid-gutter, $gap-x: $grid-gutter)
- word-break: break-word
- @if $breakpoint
- @include media-breakpoint-up($breakpoint)
- display: grid
- grid-gap: $gap-y $gap-x
- grid-template-columns: repeat($cols, 1fr)
- @else
- display: grid
- grid-gap: $gap-y $gap-x
- grid-template-columns: repeat($cols, 1fr)
- @include media-breakpoint-down(desktop)
- grid-gap: $grid-gutter-sm
-
-// This must be used for content inside columns
-@function col($quantity, $base: 12)
- $quantity-on-base: $quantity / $base * 12
- $width: calc( (100% + #{$grid-gutter}) / 12 * #{$quantity-on-base} - #{$grid-gutter} )
- @return #{$width}
-
-// This must be used for offset, outside columns
-@function offset($quantity, $base: 12)
- $quantity-on-base: $quantity / $base * 12
- $width: calc( (100% + #{$grid-gutter}) / 12 * #{$quantity-on-base} )
- @return #{$width}
-
-// This must be used for offset, inside columns
-@function col-offset($quantity, $base: 12)
- $quantity-on-base: $quantity / $base * 12
- $width: calc( (100% + #{$grid-gutter}) / 12 * #{$quantity-on-base} + #{$grid-gutter})
- @return #{$width}
-
-@function col-outside-container($quantity, $base: 12)
- $responsive-grid-width: Min(100vw, (#{$grid-max-width}))
- @return calc((#{$responsive-grid-width} + #{$grid-gutter} * 2) / #{$base} * #{$quantity} - #{$grid-gutter} * 2)
-
-@function container-margin-x
- @return Max(#{$grid-gutter}, calc(50vw - #{$grid-max-width} / 2 + #{$grid-gutter}))
-
-@mixin container-margin-left
- margin-left: container-margin-x()
-
-@mixin container-margin-right
- margin-right: container-margin-x()
-
-@mixin stretched-link($pseudo-element: after)
- &::#{$pseudo-element}
- bottom: 0
- content: ''
- left: 0
- position: absolute
- right: 0
- top: 0
- z-index: $zindex-stretched-link
-
-@mixin aspect-ratio($ratio, $selector: 'iframe', $background: false)
- @if $background
- aspect-ratio: #{$ratio}
- background: $background
- #{$selector}
- aspect-ratio: #{$ratio}
- display: block
- width: 100%
-
-@mixin handle-svg-fit
- picture.is-svg
- img
- object-fit: contain
-
-@mixin article($background: null)
- position: relative
- display: flex
- flex-direction: column
- .media
- @include handle-svg-fit
- margin-bottom: $spacing1
- order: -1
- overflow: hidden
- img
- display: block
- object-fit: cover
- @if $article-media-aspect-ratio
- aspect-ratio: $article-media-aspect-ratio
- h2, h3, [itemprop=headline]
- @include h3
- a
- display: block
- @include stretched-link
- text-decoration: none
- p + time
- margin-top: $spacing0
- time
- @include meta
- color: $color-text-alt
- display: block
-
-@mixin post-time-author-flex
- .post-meta
- display: flex
- flex-wrap: wrap
- .post-author p::before
- content: ' • '
-
-
-@mixin list-section
- @include list-reset
- > li
- border-bottom: 1px solid $color-border
- padding-bottom: $spacing1
- padding-top: $spacing1
- position: relative
- > .title
- @include h2
- transition: color 0.55s
- @include media-breakpoint-down(desktop)
- @include icon(arrow-right, after, true)
- bottom: $spacing0
- position: absolute
- right: 0
- @include media-breakpoint-up(desktop)
- @include arrow-right-hover
- display: block
- &::after
- transform: translateX(0)
- position: relative
- &:hover
- &::after
- transform: translateX($spacing0)
- a
- text-decoration: none
- &:hover
- color: $color-accent
-
- @include media-breakpoint-down(desktop)
- a:nth-child(2)
- margin-top: calc(#{$spacing0} / 2)
- a, p
- display: block
- @include media-breakpoint-up(desktop)
- align-items: baseline
- display: flex
- justify-content: space-between
-
-
-@mixin visually-hidden
- clip: rect(0,0,0,0) !important
- border: 0 !important
- height: 1px !important
- margin: -1px !important
- overflow: hidden !important
- padding: 0 !important
- position: absolute !important
- white-space: nowrap !important
- width: 1px !important
-
-@mixin button-reset
- appearance: none
- background: transparent
- border: none
- border-radius: 0
- cursor: pointer
- user-select: none
- &:active,
- &:focus
- box-shadow: inset 0 0 0 0.25rem rgba($color-text, 0.25)
- // TODO : vérifier si l'outline 0 est vraiment nécessaire
- // outline: 0
-
-@mixin list-reset
- list-style: none
- padding-left: 0
- margin-bottom: 0
- margin-top: 0
-
-@mixin inset($top: 0, $right: $top, $bottom: $top, $left: $top)
- inset: $top $right $bottom $left
- // polyfill for inset
- @supports not (inset: $top)
- bottom: $bottom
- left: $left
- right: $right
- top: $top
-
-@function color-contrast($color, $amount)
- @if lightness($color) > 50%
- $amount: $amount * -1
- @return scale-color($color, $lightness: $amount)
-
-@mixin button-icon($icon: false)
- @include button-reset
- line-height: $body-line-height
- border: 1px solid $hero-color
- padding: half($spacing0) $spacing1
- white-space: nowrap
- @if $icon
- @include icon-block($icon, after)
-
-@mixin text-underline
- text-decoration-color: $color-border
- text-decoration-line: underline
- text-decoration-thickness: 1px
- text-underline-offset: 3px
- text-decoration-line: underline
-
-@mixin arrow-right-hover
- position: relative
- display: flex
- justify-content: space-between
- align-items: center
- @include icon(arrow, after)
- opacity: 0
- transform: translateX(-20px)
- transition: 0.55s $arrow-ease-transition
- position: absolute
- right: 0
- &:hover
- &:after
- opacity: 1
- transform: translateX(0)
-
-@mixin top-flex
- @include in-page-without-sidebar
- align-items: baseline
- display: flex
- .block-title
- width: col(4)
- &:not(.hidden) + .description
- margin-left: $grid-gutter
- .description
- margin-top: 0
- width: col(8)
-
-@mixin collapsed-figcaption
- figcaption
- @include meta
- color: $color-text-alt
- position: absolute
- display: block
- left: 0
- right: 0
- text-align: right
- z-index: 10
- &::before
- @include meta
- content: '©'
- position: absolute
- right: 0
- top: 0
- background: $hero-background-color
- text-align: center
- padding: half($spacing0)
- display: block
- .credit-content
- @include meta
- background: $hero-background-color
- display: none
- padding: half($spacing0)
- padding-right: $spacing1
- a
- color: inherit
- text-decoration-color: inherit
- &:focus
- .credit-content
- display: block
- @include media-breakpoint-up(desktop)
- &:before
- padding-right: 0
- @include media-breakpoint-down(desktop)
- position: relative
- background: $color-background
- &::before
- background: transparent
- .credit-content
- display: block
- background: transparent
- position: relative
-
- &:hover
- figcaption .credit-content
- display: block
-
-@mixin dropdown-i18n
- position: relative
- .dropdown-menu
- margin-top: $header-nav-padding-y
- padding-left: $spacing1
- padding-bottom: $spacing0
- padding-top: $spacing0
- padding-right: $spacing1
- right: 0
- li a
- padding-bottom: half($spacing0)
- padding-top: half($spacing0)
- display: block
- &.is-checked
- display: flex
- justify-content: space-between
- align-items: center
- gap: $spacing2
- text-decoration: none !important
- @include icon(caret, after)
- transform: rotate(-14deg) skewX(-30deg)
-
-// https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6
-@function str-replace($string, $search, $replace: "")
- $index: str-index($string, $search)
- @if $index
- @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
- @return $string
-
-@mixin font-face($name, $path, $weight: 400, $style: normal, $exts: (eot woff2 woff ttf svg))
- $src: null
-
- $extmods: (eot:"?", svg:"#" + str-replace($name," ","_"))
- $formats: (otf: "opentype", ttf: "truetype")
-
- @each $ext in $exts
- $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext)
- $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext)
- $src: append($src, url(quote("/assets/fonts/" + $path + "." + $extmod)) format(quote($format)), comma,)
-
- @font-face
- font-family: quote($name)
- font-style: $style
- font-weight: $weight
- font-display: swap
- src: $src
-
-@mixin sidebar($side: start)
- @include media-breakpoint-down(desktop)
- padding: 0 half($grid-gutter-sm)
- margin-bottom: $spacing3
- @include media-breakpoint-up(desktop)
- @if $side == start
- @include container-margin-left
- left: 0
- @else
- @include container-margin-right
- right: 0
- margin-top: 0
- top: 0
- height: 100%
- position: absolute
- width: col-outside-container(4)
- & > div
- @include sticky($spacing1)
- .toc-container
- border-top: 1px solid $color-border
- padding-top: $spacing1
- position: static
- margin-left: 0
-
-// Old browsers support
-
-@mixin browser-under-safari-16
- @media not all and (min-resolution:.001dpcm)
- @supports (-webkit-appearance:none) and (display:flow-root)
- @content
\ No newline at end of file
+@import utils/fonts
+@import utils/grid
+@import utils/icons
+@import utils/links
+@import utils/media
+@import utils/normalize
+@import utils/sidebar
+@import utils/sizes
+
+@import utils/shame
diff --git a/assets/sass/_theme/_variables.sass b/assets/sass/_theme/_variables.sass
new file mode 100644
index 0000000000000000000000000000000000000000..ac0f8878e8d57e67a89d214f0415943124eb414e
--- /dev/null
+++ b/assets/sass/_theme/_variables.sass
@@ -0,0 +1,24 @@
+\:root
+ // Largeur maximum de la grille définie dans _configuration.sass
+ --grid-max-width: #{$grid-max-width}
+
+ // Largeur de la grille
+ // Elle inclut les gouttières extérieures
+ // Si la largeur de l'écran est inférieure à 1980px, on prend la largeur totale.
+ // La grille n'est jamais plus grande que 1980px
+ --grid-width: Min(var(--grid-max-width), 100vw)
+
+ // Largeur d'une colonne
+ // On soustrait à la largeur de la grille les 13 gouttières (les 2 extérieures et les 11 intérieures), puis on divise par 12
+ --column-width: calc( (var(--grid-width) - var(--grid-gutter) * 13) / 12)
+
+ // Taille de la gouttière
+ // Les largeurs des gouttières en fonction des breakpoints sont définies dans _configuration.sass
+ --grid-gutter: #{$grid-gutter}
+ --grid-gutter-negative: #{-$grid-gutter}
+ @include media-breakpoint-up(lg)
+ --grid-gutter: #{$grid-gutter-lg}
+ --grid-gutter-negative: #{-$grid-gutter-lg}
+ @include media-breakpoint-up(xxl)
+ --grid-gutter: #{$grid-gutter-xxl}
+ --grid-gutter-negative: #{-$grid-gutter-xxl}
diff --git a/assets/sass/_theme/blocks/base.sass b/assets/sass/_theme/blocks/base.sass
index 0adf48cef3fa0d87d9645aeae2ab83934847f5d5..a72a85a8bd6d6e21c4126a0688a95da7b0445b18 100644
--- a/assets/sass/_theme/blocks/base.sass
+++ b/assets/sass/_theme/blocks/base.sass
@@ -17,7 +17,7 @@
margin-top: $spacing4
@include in-page-without-sidebar
h2
- width: col(8)
+ width: columns(8)
// Specific
$backgrounded_blocks: ".block-call_to_action, .block-chapter--accent_background, .block-chapter--alt_background, .block-timeline--horizontal, .block-pages--cards"
diff --git a/assets/sass/_theme/blocks/call_to_action.sass b/assets/sass/_theme/blocks/call_to_action.sass
index 2d7fab7c6992e13a1166ae233a9bb2089889cd68..7e87b19fd439b89c0ef44edd04e598aed670f9ad 100644
--- a/assets/sass/_theme/blocks/call_to_action.sass
+++ b/assets/sass/_theme/blocks/call_to_action.sass
@@ -62,7 +62,7 @@
&:last-child
margin-bottom: 0
.call_to_action--with-image
- padding-top: half($grid-gutter-sm)
+ padding-top: var(--grid-gutter)
display: flex
flex-direction: column
> *
@@ -80,7 +80,7 @@
> div
// TODO : simplifier l'application d'une couleur de fond sur le CTA avec sidebar et sans sidebar
background-color: var(--cta-background-color)
- padding: $grid-gutter col(1, 8)
+ padding: var(--grid-gutter) columns(1)
width: 100%
position: relative
&::after
@@ -91,27 +91,28 @@
top: 0
bottom: 0
left: 100%
- width: Max(#{$grid-gutter}, calc(50vw - #{half($grid-max-width)} + #{$grid-gutter}))
+ // Calcul de la largeur nécessaire pour remplir l'espace droit entre le container et le bord droit de la fenêtre
+ width: grid-external-space()
&--with-image
picture
order: 1
- padding-left: col(1, 8)
- padding-right: offset(4, 8)
+ padding-left: columns(1)
+ padding-right: offset(4)
position: relative
z-index: 2
img
- margin-bottom: calc(-#{$grid-gutter} + -#{$spacing1})
+ margin-bottom: calc(var(--grid-gutter-negative) + -#{$spacing1})
> div
- padding-top: calc(#{$grid-gutter} + #{$spacing3})
+ padding-top: calc(var(--grid-gutter) * 2 + #{$spacing1})
@include in-page-without-sidebar
background-color: var(--cta-background-color)
padding-top: 0
padding-bottom: 0
.block-content
- padding: $spacing4 $grid-gutter
- margin-left: -$grid-gutter
- margin-right: -$grid-gutter
+ padding: $spacing4 var(--grid-gutter)
+ margin-left: var(--grid-gutter-negative)
+ margin-right: var(--grid-gutter-negative)
.call_to_action--with-image
@include grid
> div
diff --git a/assets/sass/_theme/blocks/chapter.sass b/assets/sass/_theme/blocks/chapter.sass
index e5c0f3a3767e84344f5eba3195c3b20e0548bf38..991e0134ad935cf45e5b399beef029557869922b 100644
--- a/assets/sass/_theme/blocks/chapter.sass
+++ b/assets/sass/_theme/blocks/chapter.sass
@@ -31,56 +31,57 @@
a
@include link($block-chapter-layout-accent-color)
- &--alt_background, &--accent_background
+ &--alt_background,
+ &--accent_background
margin-bottom: 0
- + .block-chapter--alt_background, + .block-chapter--accent_background
+ + .block-chapter--alt_background,
+ + .block-chapter--accent_background
margin-top: 0
@include media-breakpoint-down(desktop)
- &--alt_background, &--accent_background
- padding-top: $grid-gutter
- padding-bottom: $grid-gutter
-
- &--with-image
- &.block-chapter--alt_background, &.block-chapter--accent_background
- padding-top: half($grid-gutter-sm)
+ &--alt_background,
+ &--accent_background
+ padding-top: var(--grid-gutter)
+ padding-bottom: var(--grid-gutter)
@include in-page-with-sidebar
figure
- max-width: col(6, 8)
+ max-width: columns(6)
&.image-portrait,
&.image-square
- max-width: col(4, 8)
- &--alt_background, &--accent_background
+ max-width: columns(4)
+ &--alt_background,
+ &--accent_background
background: none
padding-bottom: 0
padding-top: 0
.chapter .text
- padding: $grid-gutter
+ padding: var(--grid-gutter)
figure
margin-bottom: 0
figcaption
- padding-left: $grid-gutter
-
+ padding-left: var(--grid-gutter)
&--alt_background
.chapter
background: $block-chapter-layout-alt-background
&--accent_background
.chapter
background: $block-chapter-layout-accent-background
+
@include in-page-without-sidebar
- &--alt_background, &--accent_background
- padding-top: $grid-gutter
- padding-bottom: $grid-gutter
+ &--alt_background,
+ &--accent_background
+ padding-top: var(--grid-gutter)
+ padding-bottom: var(--grid-gutter)
margin-bottom: 0
.chapter
flex-direction: row
+ justify-content: space-between
.text
order: 0
- width: col(7)
+ width: columns(7)
figure
- width: col(4)
- margin-left: col-offset(1)
+ width: columns(4)
margin-bottom: 0
text-align: right
img
diff --git a/assets/sass/_theme/blocks/contact.sass b/assets/sass/_theme/blocks/contact.sass
index be14a1d894192873ea9c494d5fc8827fec3a18fc..5c66c9c44768da4e0396d60f9486f9bf9d0d3118 100644
--- a/assets/sass/_theme/blocks/contact.sass
+++ b/assets/sass/_theme/blocks/contact.sass
@@ -47,7 +47,7 @@
time + time
@include icon(arrow-right, before)
display: inline-block
- padding: 0 px2rem(7) 0 px2rem(3)
+ padding: 0 pxToRem(7) 0 pxToRem(3)
@include in-page-without-sidebar
.top
@@ -56,9 +56,9 @@
display: flex
margin-top: 0
address
- width: col(4)
+ width: columns(4)
margin-top: 0
ul
margin-top: 0
- width: col(8)
- margin-left: $grid-gutter
\ No newline at end of file
+ width: columns(8)
+ margin-left: var(--grid-gutter)
\ No newline at end of file
diff --git a/assets/sass/_theme/blocks/datatable.sass b/assets/sass/_theme/blocks/datatable.sass
index e3eb5c243aa22ac9c4cc5aa6daa7c52244ca8cb2..f78c8467cdd427330534b032389d4cf066efc8fa 100644
--- a/assets/sass/_theme/blocks/datatable.sass
+++ b/assets/sass/_theme/blocks/datatable.sass
@@ -6,4 +6,4 @@
@include media-breakpoint-up(desktop)
.top
p
- width: col(8)
+ width: columns(8)
diff --git a/assets/sass/_theme/blocks/definitions.sass b/assets/sass/_theme/blocks/definitions.sass
index ff72015af4391988e8d0e72ea05d975246255ca2..c223c229634674574071af2882ad337d83e11ea9 100644
--- a/assets/sass/_theme/blocks/definitions.sass
+++ b/assets/sass/_theme/blocks/definitions.sass
@@ -36,6 +36,6 @@
.definitions
details
p
- padding-left: col(4)
- margin-left: $grid-gutter
+ padding-left: columns(4)
+ margin-left: var(--grid-gutter)
diff --git a/assets/sass/_theme/blocks/features.sass b/assets/sass/_theme/blocks/features.sass
index b225b1b586cafe45a591b72154af8ab8fba7924d..52b9a2dc838308e339102931e60f37a64c09a706 100644
--- a/assets/sass/_theme/blocks/features.sass
+++ b/assets/sass/_theme/blocks/features.sass
@@ -22,13 +22,13 @@
li
flex-direction: row
figure
- width: calc(#{col(2, 8)} + #{half($grid-gutter)})
+ width: calc(#{columns(2)} + #{half(var(--grid-gutter))})
flex-shrink: 0
- margin-right: half($grid-gutter)
+ margin-right: half(var(--grid-gutter))
@include in-page-without-sidebar
.top
- width: col(8)
+ width: columns(8)
ul
@include list-reset
@include grid(3, desktop)
diff --git a/assets/sass/_theme/blocks/files.sass b/assets/sass/_theme/blocks/files.sass
index f890850fd3f325ead5e1f66abe9cdb3f12002193..0e67ef0082fd027e6608f43bb039151b98de7504 100644
--- a/assets/sass/_theme/blocks/files.sass
+++ b/assets/sass/_theme/blocks/files.sass
@@ -13,11 +13,11 @@
border: 1px solid $color-border
display: flex
flex-shrink: 0
- height: px2rem(60)
+ height: pxToRem(60)
justify-content: center
margin-right: $spacing0
transition: background 0.3s ease, border 0.3s ease
- width: px2rem(60)
+ width: pxToRem(60)
&:hover
&::before
background-color: $color-text
@@ -41,8 +41,8 @@
@include in-page-with-sidebar
.files
- @include grid(2, desktop, half($grid-gutter))
+ @include grid(2, desktop, half(var(--grid-gutter)))
@include in-page-without-sidebar
.files
- @include grid(3, desktop, half($grid-gutter))
+ @include grid(3, desktop, half(var(--grid-gutter)))
diff --git a/assets/sass/_theme/blocks/gallery.sass b/assets/sass/_theme/blocks/gallery.sass
index 609e87c3552240b2c451940e187cc179d2b39877..fcfe8f48c6d14853e12d20c9de0045e888f46575 100644
--- a/assets/sass/_theme/blocks/gallery.sass
+++ b/assets/sass/_theme/blocks/gallery.sass
@@ -30,40 +30,30 @@
&--grid
.gallery
- align-items: baseline
@include in-page-with-sidebar
- @include grid(3, desktop, half($grid-gutter), half($grid-gutter))
+ @include flexbox-grid(2)
@include in-page-without-sidebar
- @include grid(4, desktop)
+ @include flexbox-grid(4)
@include media-breakpoint-down(desktop)
- @include grid(2)
- grid-gap: half($grid-gutter-sm) !important
+ @include flexbox-grid(2)
&--with-text
@include in-page-without-sidebar
- @include grid(4, desktop, $spacing0)
+ @include flexbox-grid(4)
figure
- display: grid
- grid-template-columns: subgrid
+ display: flex
+ flex-direction: column
gap: space(3)
- figcaption
- &::after
- content: 'Â '
&--carousel
overflow: hidden
position: relative
z-index: 0
@include in-page-without-sidebar
background: $block-gallery-carousel-background
- padding-bottom: $grid-gutter
- padding-top: $grid-gutter
+ padding-bottom: var(--grid-gutter)
+ padding-top: var(--grid-gutter)
.block-gallery + &,
.block-pages--cards + &
margin-top: 0
- .container
- .top
- padding-right: half($grid-gutter-sm)
- @include media-breakpoint-up(desktop)
- padding-right: half($grid-gutter)
.splide
display: flex
flex-direction: column
@@ -73,7 +63,7 @@
opacity: 0.1
&__track
overflow: visible
- margin-right: half(-$grid-gutter-sm)
+ margin-right: half(var(--grid-gutter-negative))
@include in-page-with-sidebar
.splide__slide
transition: opacity .3s ease
@@ -83,13 +73,13 @@
&.is-active
opacity: 1
@include media-breakpoint-up(desktop)
- margin-right: half(-$grid-gutter)
+ margin-right: half(var(--grid-gutter-negative))
&__slide
flex-shrink: initial
&:last-child
padding-right: 20%
figure
- margin-right: half($grid-gutter)
+ margin-right: half(var(--grid-gutter))
@include media-breakpoint-down(desktop)
display: flex
flex-direction: column
@@ -100,7 +90,7 @@
max-height: $block-gallery-carousel-max-height
width: auto
height: auto
- max-width: calc(100vw - #{$grid-gutter-sm} * 2)
+ max-width: calc(100vw - #{var(--grid-gutter)} * 2)
@include media-breakpoint-up(desktop)
height: $block-gallery-carousel-max-height
width: auto
@@ -111,7 +101,7 @@
margin-top: space(2)
&__arrows
- margin-left: px2rem(-18)
+ margin-left: pxToRem(-18)
order: 2
@media (min-height: 800px)
padding-top: space(10)
@@ -132,10 +122,10 @@
@include in-page-without-sidebar
.splide
figure
- margin-left: $grid-gutter
- margin-right: half(-$grid-gutter)
+ margin-left: var(--grid-gutter)
+ margin-right: half(var(--grid-gutter-negative))
&__slide
&:first-child
- margin-left: $grid-gutter
+ margin-left: var(--grid-gutter)
&__track
- margin-left: -$grid-gutter
\ No newline at end of file
+ margin-left: var(--grid-gutter-negative)
\ No newline at end of file
diff --git a/assets/sass/_theme/blocks/image.sass b/assets/sass/_theme/blocks/image.sass
index 926546d7722e4d1c75efd20b72747fd535d9e3ce..9990ec4281e2b829888feea7e3c30a7f2295a19a 100644
--- a/assets/sass/_theme/blocks/image.sass
+++ b/assets/sass/_theme/blocks/image.sass
@@ -15,13 +15,13 @@
@include meta
picture
display: block
- margin-left: half(-$grid-gutter-sm)
- margin-right: half(-$grid-gutter-sm)
+ margin-left: var(--grid-gutter-negative)
+ margin-right: var(--grid-gutter-negative)
@include in-page-with-sidebar
picture
margin-left: 0
- margin-right: -$grid-gutter
+ margin-right: var(--grid-gutter-negative)
img
max-height: $block-image-max-height-with-sidebar
width: auto
@@ -38,27 +38,27 @@
position: relative
.top
position: absolute
- width: col(5)
+ width: columns(5)
figure
display: flex
align-items: flex-end
> a
- width: col(7)
- margin-left: half($grid-gutter)
+ width: columns(7)
+ margin-left: half(var(--grid-gutter))
display: block
order: 2
picture
margin-left: 0
- margin-right: -$grid-gutter
+ margin-right: var(--grid-gutter-negative)
figcaption
- width: calc(#{col(5)} + #{$grid-gutter} / 2)
+ width: calc(#{columns(5)} + var(--grid-gutter) / 2)
order: 1
display: block
text-align: right
&.image-landscape
picture
- margin-left: -$grid-gutter
- margin-right: -$grid-gutter
+ margin-left: var(--grid-gutter-negative)
+ margin-right: var(--grid-gutter-negative)
@media screen and (min-width: $grid-max-width)
margin-left: 0
margin-right: 0
@@ -67,7 +67,7 @@
justify-content: space-between
align-items: baseline
p
- max-width: col(8)
+ max-width: columns(8)
*
flex: 1 1
.credit
diff --git a/assets/sass/_theme/blocks/organizations.sass b/assets/sass/_theme/blocks/organizations.sass
index 65dec22e92c5078680cd5d1b8a3c1160c86493ad..2622200e6fae885450393397c2936885b50d989a 100644
--- a/assets/sass/_theme/blocks/organizations.sass
+++ b/assets/sass/_theme/blocks/organizations.sass
@@ -38,11 +38,11 @@
@include grid(2, md)
@include grid(3, lg)
@include grid(4, xl)
- grid-column-gap: half($grid-gutter)
+ grid-column-gap: half(var(--grid-gutter))
@include in-page-without-sidebar
.top .description
- max-width: col(8)
+ max-width: columns(8)
.map
- margin-left: -$grid-gutter
- margin-right: -$grid-gutter
+ margin-left: var(--grid-gutter-negative)
+ margin-right: var(--grid-gutter-negative)
diff --git a/assets/sass/_theme/blocks/pages.sass b/assets/sass/_theme/blocks/pages.sass
index 74ec85e673490317a52fe47b3521bfc13d7811db..aab5a5fb0348f4c93e1080d0ef459f422abc21bd 100644
--- a/assets/sass/_theme/blocks/pages.sass
+++ b/assets/sass/_theme/blocks/pages.sass
@@ -58,14 +58,14 @@
.grid
@include grid(2, desktop)
@include in-page-with-sidebar
- grid-column-gap: half($grid-gutter) !important
+ grid-column-gap: half(var(--grid-gutter)) !important
@include in-page-without-sidebar
@include grid(3, desktop)
&--cards
background-color: $block-pages-card-background
- padding-bottom: $grid-gutter
- padding-top: $grid-gutter
+ padding-bottom: var(--grid-gutter)
+ padding-top: var(--grid-gutter)
*:not(.heading) + &
margin-top: 0
.blocks &:last-of-type
@@ -75,7 +75,7 @@
.cards
@include grid(2, desktop)
@include in-page-with-sidebar
- grid-gap: half($grid-gutter) !important
+ grid-gap: half(var(--grid-gutter)) !important
@include in-page-without-sidebar
@include grid(3, desktop)
// TODO: move this //
@@ -156,9 +156,9 @@
@include media-breakpoint-up(desktop)
ul:not(.title-only)
li + li
- margin-top: $grid-gutter
+ margin-top: var(--grid-gutter)
article
- gap: $grid-gutter
+ gap: var(--grid-gutter)
flex-direction: row
.media
flex-shrink: 0
@@ -172,17 +172,17 @@
ul.title-only
@include grid(2, desktop)
grid-row-gap: $spacing0 !important
- grid-column-gap: half($grid-gutter) !important
+ grid-column-gap: half(var(--grid-gutter)) !important
li
margin-top: 0
a
@include meta
article
- gap: half($grid-gutter)
+ gap: half(var(--grid-gutter))
.media
- width: calc(#{col(2, 8)} + #{half($grid-gutter)})
+ width: calc(#{columns(2)} + #{half(var(--grid-gutter))})
.page-content
- width: col(6, 8)
+ width: columns(6)
@include in-page-without-sidebar
.block-title
@@ -194,9 +194,9 @@
@include h2
article
.media
- width: col(4)
+ width: columns(2)
.page-content
- width: col(8)
+ width: columns(4)
&:not(.with-description)
ul.title-only
@include grid(4, desktop, space(2))
@@ -210,7 +210,7 @@
&.with-description
.block-content
@include grid(12, desktop, $spacing2)
- row-gap: half($grid-gutter)
+ row-gap: half(var(--grid-gutter))
.top
align-items: initial
grid-column: 1 / 8
@@ -247,7 +247,7 @@
aspect-ratio: unset
@include media-breakpoint-up(desktop)
article
- width: col(4, 8)
+ width: columns(4)
&:not(:first-child)
margin-top: -5%
&:nth-child(even)
@@ -263,11 +263,11 @@
.description
@include body-text
.grid
- width: col(10)
+ width: columns(10)
margin-left: auto
margin-right: auto
article
- width: col(4, 10)
+ width: columns(4)
&--large
.top
@include top-flex
@@ -279,7 +279,7 @@
@include icon(arrow, after, true)
@include hover-translate-icon(after)
&:hover .more:after
- transform: translateX(#{px2rem(10)})
+ transform: translateX(#{pxToRem(10)})
&-title a
@include stretched-link
.media
@@ -288,7 +288,7 @@
@include media-breakpoint-up(desktop)
.page
flex-direction: row
- gap: $grid-gutter
+ gap: var(--grid-gutter)
@include in-page-with-sidebar
.page
@@ -309,6 +309,6 @@
@include lead
margin-bottom: space(4)
&-content
- width: col(5)
+ width: columns(5)
.media
- width: col(6)
+ width: columns(6)
diff --git a/assets/sass/_theme/blocks/persons.sass b/assets/sass/_theme/blocks/persons.sass
index f207f5f00be30093d58fd6eb360cfdd9df247895..16a79536ee9c2b8ee74eeacc738186c9ba3f4933 100644
--- a/assets/sass/_theme/blocks/persons.sass
+++ b/assets/sass/_theme/blocks/persons.sass
@@ -4,7 +4,7 @@
gap: $spacing1
.avatar
margin-right: 0
- width: col(4)
+ width: columns(4)
.description
margin-top: $spacing1
text-align: left
@@ -21,7 +21,7 @@
@include grid(2)
article
.avatar
- width: col(1.5, 4)
+ width: columns(1.5)
.description
margin-top: $spacing0
article
@@ -29,10 +29,10 @@
gap: $spacing1
@include media-breakpoint-up(md)
.avatar
- width: col(2, 8)
+ width: columns(2)
@include in-page-without-sidebar
.top .description
- max-width: col(8)
+ max-width: columns(8)
&.block-with-long-text
.persons
@include grid(2)
diff --git a/assets/sass/_theme/blocks/posts.sass b/assets/sass/_theme/blocks/posts.sass
index b8446feb0a92620c17d581cc84bfecc9cdb3a797..5b2d959cf486b548dcad6abc47944bdc3819c4ee 100644
--- a/assets/sass/_theme/blocks/posts.sass
+++ b/assets/sass/_theme/blocks/posts.sass
@@ -26,7 +26,7 @@
margin-top: $spacing3
@include in-page-with-sidebar
.grid
- @include grid(2, desktop, $grid-gutter, half($grid-gutter))
+ @include grid(2, desktop, var(--grid-gutter), half(var(--grid-gutter)))
@include in-page-without-sidebar
.grid
@include grid($block-posts-grid-columns)
@@ -60,7 +60,7 @@
.large
.post
flex-direction: row
- gap: half($grid-gutter)
+ gap: half(var(--grid-gutter))
+ .post
margin-top: $spacing2
p[itemprop="articleBody"]
@@ -100,15 +100,15 @@
@include media-breakpoint-up(xl)
.media,
.post-content
- width: calc(#{col(4, 8)} + #{half($grid-gutter)})
+ width: calc(#{columns(4)} + #{half(var(--grid-gutter))})
@include in-page-without-sidebar
.large
.post
- gap: $grid-gutter
+ gap: var(--grid-gutter)
.media
- width: col(6)
+ width: columns(6)
.post-content
- width: col(5)
+ width: columns(5)
p[itemprop="articleBody"]
margin-top: calc(#{$spacing1} + #{$spacing0})
&--list
@@ -151,21 +151,21 @@
+ article
margin-top: $spacing1
.media
- width: calc(#{col(2, 8)} + #{half($grid-gutter)})
+ width: calc(#{columns(2)} + #{half(var(--grid-gutter))})
.post-content
- width: col(6, 8)
- margin-left: half($grid-gutter)
+ width: columns(6)
+ margin-left: half(var(--grid-gutter))
@include in-page-without-sidebar
article
border-bottom: 1px solid $color-border
- gap: $grid-gutter
+ gap: var(--grid-gutter)
padding-bottom: $spacing3
position: relative
.media
- width: col(3)
+ width: columns(3)
.post-content
- width: col(6)
+ width: columns(6)
+ article
margin-top: $spacing3
.post-meta
@@ -215,11 +215,11 @@
.post
flex-direction: row
.media
- width: calc(#{col(3, 8)} + #{half($grid-gutter)})
+ width: calc(#{columns(3)} + #{half(var(--grid-gutter))})
margin-bottom: 0
.post-content
- width: col(5, 8)
- margin-left: half($grid-gutter)
+ width: columns(5)
+ margin-left: half(var(--grid-gutter))
.list
article
@include grid(8, desktop, 0, 0)
@@ -277,14 +277,14 @@
@include in-page-with-sidebar
.post
- width: col(4,8)
+ width: columns(4)
@include in-page-without-sidebar
- width: col(10)
+ width: columns(10)
margin-left: auto
margin-right: auto
.post
- width: col(4, 10)
+ width: columns(4)
// Move this part to blocks/categories when categories block is ready
.block-posts
diff --git a/assets/sass/_theme/blocks/testimonials.sass b/assets/sass/_theme/blocks/testimonials.sass
index 338da01140524b2eae8277d0e7fa6c5559f939cf..738dfff3af7f61ed79e63f81ad0759a9e98b22b0 100644
--- a/assets/sass/_theme/blocks/testimonials.sass
+++ b/assets/sass/_theme/blocks/testimonials.sass
@@ -8,7 +8,7 @@
font-style: $block-testimonials-style
color: $block-testimonials-color
@include media-breakpoint-up(desktop)
- font-size: px2rem(30) // TODO : on peut peut-être la sortir avec du RFS ?
+ font-size: pxToRem(30) // TODO : on peut peut-être la sortir avec du RFS ?
@include media-breakpoint-up(xl)
font-size: $block-testimonials-xl-font-size
line-height: $block-testimonials-xl-line-height
@@ -28,12 +28,10 @@
display: block
.avatar
flex-shrink: 0
- width: calc(#{col(1, 8)} + #{$grid-gutter} / 2)
- min-width: px2rem(80)
+ width: col(1)
+ min-width: pxToRem(80)
margin-right: $spacing0
margin-bottom: 0
- @include media-breakpoint-up(desktop)
- margin-right: calc(#{$grid-gutter} / 2)
.splide
.splide__slider
@@ -97,8 +95,7 @@
margin-right: offset(1)
figure
padding-right: offset(3)
- // TODO: explain this, add min height equal with 2 cols width to avoid overflow on square picture
- min-height: calc(#{col-outside-container(2)} + #{half($grid-gutter)})
+ min-height: columns(2)
&.with-picture
padding-right: offset(1)
padding-left: offset(3)
@@ -108,16 +105,7 @@
margin-top: $spacing0
.avatar
position: absolute
- left: col(1)
+ left: columns(1)
top: 0
- margin-left: $grid-gutter
- width: col(2)
-
- // TODO : en discuter en créa
- // figure
- // display: flex
- // figcaption
- // order: -1
- // display: block
- // .avatar
- // margin-bottom: $spacing1
\ No newline at end of file
+ margin-left: var(--grid-gutter)
+ width: columns(2)
diff --git a/assets/sass/_theme/blocks/timeline.sass b/assets/sass/_theme/blocks/timeline.sass
index 0c527962608f6bc0773634cca4986fda06e248cd..377b4ced5b0990181db03efdaa98bfe551a2d7eb 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(-$grid-gutter)
+ left: half(var(--grid-gutter-negative))
margin-top: 0.5em
position: absolute
width: 9px
@@ -20,7 +20,7 @@
background: $color-text
bottom: -0.5em
content: ""
- left: half(-$grid-gutter)
+ left: half(var(--grid-gutter-negative))
position: absolute
top: 0.5em
width: 1px
@@ -35,7 +35,7 @@
@include media-breakpoint-down(desktop)
.timeline-event
- padding-left: half($grid-gutter-sm)
+ padding-left: half(var(--grid-gutter))
&::after, &::before
left: 0
@@ -45,28 +45,28 @@
.timeline-event
display: flex
&::before, &::after
- left: col(3)
- margin-left: half($grid-gutter)
+ left: columns(3)
+ margin-left: half(var(--grid-gutter))
&::before
transform: translateX(-4px)
.title
- width: col(3)
+ width: columns(3)
text-align: right
+ p
margin-top: 0
p
- padding-left: $grid-gutter
- width: col(7)
+ padding-left: var(--grid-gutter)
+ width: columns(7)
&:first-child
- margin-left: col(3)
+ margin-left: columns(3)
&--horizontal
--min-title-height: 0px
background: $block-timeline-horizontal-background
color: $block-timeline-horizontal-color
overflow: hidden
- padding-bottom: $grid-gutter
- padding-top: $grid-gutter
+ padding-bottom: var(--grid-gutter)
+ padding-top: var(--grid-gutter)
&::before
display: none
.timeline
@@ -77,7 +77,7 @@
.timeline-arrows
display: flex
- padding-left: half($grid-gutter)
+ padding-left: half(var(--grid-gutter))
> button
@include button-reset
background: none
@@ -93,8 +93,8 @@
cursor: default
opacity: 0.3
.timeline-events
- margin-left: half(-$grid-gutter)
- margin-right: half(-$grid-gutter)
+ margin-left: half(var(--grid-gutter-negative))
+ margin-right: half(var(--grid-gutter-negative))
// 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($grid-gutter)
+ padding: 0 half(var(--grid-gutter))
scroll-snap-align: start
transition: 0.3s opacity
width: 50%
@@ -123,7 +123,7 @@
margin-bottom: $spacing1
opacity: 1
overflow: visible
- width: calc(100% + #{half($grid-gutter)})
+ width: calc(100% + #{half(var(--grid-gutter))})
&::before
background: $block-timeline-horizontal-color
border-radius: 50%
@@ -143,7 +143,7 @@
@include media-breakpoint-up(desktop)
.timeline-event
.line
- width: calc(100% + #{$grid-gutter})
+ width: calc(100% + var(--grid-gutter))
@include media-breakpoint-down(desktop)
.timeline-events
diff --git a/assets/sass/_theme/blocks/video.sass b/assets/sass/_theme/blocks/video.sass
index c946610acb2e3829ce1d81b3781c6e69e04a2d15..c8ab19c98de9a1ca5a14d90aef6e8c30a1c8c115 100644
--- a/assets/sass/_theme/blocks/video.sass
+++ b/assets/sass/_theme/blocks/video.sass
@@ -42,10 +42,10 @@
width: $spacing4
z-index: 3
&::before
- font-size: px2rem(100)
+ font-size: pxToRem(100)
transition: color .3s ease
vertical-align: middle
- padding-left: px2rem(5)
+ padding-left: pxToRem(5)
&:hover
background-color: white
&::before
@@ -54,8 +54,8 @@
height: $spacing3
width: $spacing3
&::before
- font-size: px2rem(40)
- padding-left: px2rem(3)
+ font-size: pxToRem(40)
+ padding-left: pxToRem(3)
iframe
background: black
+ p
@@ -63,8 +63,8 @@
@include media-breakpoint-down(desktop)
.video
- margin-left: half(-$grid-gutter-sm)
- margin-right: half(-$grid-gutter-sm)
+ margin-left: var(--grid-gutter-negative)
+ margin-right: var(--grid-gutter-negative)
@include in-page-without-sidebar
background: $block-video-background
diff --git a/assets/sass/_theme/design-system/a11y.sass b/assets/sass/_theme/design-system/a11y.sass
index 9fbce2042a73076d5f2a81bd005b4de4fb9546e5..e2409cd80672cab76e5d54567c94f640a121cae7 100644
--- a/assets/sass/_theme/design-system/a11y.sass
+++ b/assets/sass/_theme/design-system/a11y.sass
@@ -9,7 +9,7 @@
@include list-reset
li
display: inline-block
- margin-right: px2rem(5)
+ margin-right: pxToRem(5)
&:focus-within
background: white
transform: translateY(0)
diff --git a/assets/sass/_theme/design-system/button.sass b/assets/sass/_theme/design-system/button.sass
index 60adbd146ac638d4dc53465255c6a469611d198c..6e07e46c8b27430640b1a2c9c90b4503ebff1999 100644
--- a/assets/sass/_theme/design-system/button.sass
+++ b/assets/sass/_theme/design-system/button.sass
@@ -6,7 +6,7 @@
display: flex
padding: 0
@include media-breakpoint-up(desktop)
- width: col(2,1)
+ width: columns(2)
&:first-child
margin-bottom: $spacing0
&::before
diff --git a/assets/sass/_theme/design-system/footer.sass b/assets/sass/_theme/design-system/footer.sass
index 15836bae5b05bca34395f543eb3dc3b7d11712b3..2ff15b9de6951beac4989e2f0ef0c8787c26a688 100644
--- a/assets/sass/_theme/design-system/footer.sass
+++ b/assets/sass/_theme/design-system/footer.sass
@@ -64,7 +64,7 @@ footer#document-footer
margin-left: $spacing0
button[aria-expanded="true"],
.dropdown-menu
- outline: px2rem(10) solid $dropdown-i18n-background-color
+ outline: pxToRem(10) solid $dropdown-i18n-background-color
min-width: $spacing4
.dropdown-menu
@include meta
@@ -73,7 +73,7 @@ footer#document-footer
color: $dropdown-i18n-color
@include media-breakpoint-up(desktop)
left: 0
- margin-top: px2rem(17)
+ margin-top: pxToRem(17)
max-height: calc(100vh - var(--header-height))
padding: 0
position: absolute
diff --git a/assets/sass/_theme/design-system/hero.sass b/assets/sass/_theme/design-system/hero.sass
index 1cd7c5d3eaa3bf4b370051c5a0f06692cdf60586..bd42c27964806e8fbbd2de460d92d73d6d2e9a11 100644
--- a/assets/sass/_theme/design-system/hero.sass
+++ b/assets/sass/_theme/design-system/hero.sass
@@ -42,10 +42,10 @@
margin-top: $spacing3
@include media-breakpoint-down(desktop)
.breadcrumb-nav
- margin-left: half(-$grid-gutter-sm)
- margin-right: half(-$grid-gutter-sm)
+ margin-left: half(var(--grid-gutter-negative))
+ margin-right: half(var(--grid-gutter-negative))
> ol
- padding: 0 half($grid-gutter-sm)
+ padding: 0 half(var(--grid-gutter))
&--with-image
padding-bottom: 0
.content
@@ -54,8 +54,8 @@
&--image-landscape
.content
figure
- margin-left: half(-$grid-gutter-sm)
- margin-right: half(-$grid-gutter-sm)
+ margin-left: half(var(--grid-gutter-negative))
+ margin-right: half(var(--grid-gutter-negative))
&--image-portrait, &--image-square
.container
display: flex
@@ -67,28 +67,28 @@
@include media-breakpoint-up(desktop)
.content
> h1, > hgroup
- width: col(9)
+ width: columns(9)
&--with-image
.content
display: flex
justify-content: space-between
> h1, > hgroup
- width: col(7)
+ width: columns(7)
figure
- width: col(5)
+ width: columns(5)
&--image-portrait, &--image-square
.breadcrumb-nav
- width: calc(#{col(9)} + #{half($grid-gutter)})
+ width: calc(#{columns(9)} + #{half(var(--grid-gutter))})
-webkit-mask-image: linear-gradient(to right, black 0%, black 90%, transparent 100%)
mask-image: linear-gradient(to right, black 0%, black 90%, transparent 100%)
.breadcrumb
padding-right: 50px
.content
> h1, > hgroup
- width: col(8)
+ width: columns(8)
figure
- width: col(3)
+ width: columns(3)
+ .breadcrumb-container
margin-top: 0
diff --git a/assets/sass/_theme/design-system/image.sass b/assets/sass/_theme/design-system/image.sass
index 0c2124cab50981e0552697c70b34243ee3db0557..f510bb241e3ba862ade8702d4ba44926d03a2e8a 100644
--- a/assets/sass/_theme/design-system/image.sass
+++ b/assets/sass/_theme/design-system/image.sass
@@ -13,7 +13,7 @@ img
height: auto
width: 100%
figcaption
- margin-top: px2rem(10)
+ margin-top: pxToRem(10)
text-align: right
&,
p
diff --git a/assets/sass/_theme/design-system/layout.sass b/assets/sass/_theme/design-system/layout.sass
index 722758b5ebd320c54d5acb33b0f57e69f6d2628a..11c1213c6542e01078270879520275b4b9a8ffa8 100644
--- a/assets/sass/_theme/design-system/layout.sass
+++ b/assets/sass/_theme/design-system/layout.sass
@@ -10,8 +10,6 @@
--spacing3: #{$spacing3}
--spacing4: #{$spacing4}
--spacing5: #{$spacing5}
- --grid-gutter: #{$grid-gutter}
- --grid-gutter-sm: #{$grid-gutter-sm}
--grid-max-width: #{$grid-max-width}
--header-height: #{$header-height}
--header-menu-max-height: calc(100vh - var(--header-height) - #{$spacing4})
@@ -78,8 +76,8 @@ details
position: relative
cursor: pointer
@include icon(caret, after)
- margin-left: px2rem(10)
- line-height: px2rem(22)
+ margin-left: pxToRem(10)
+ line-height: pxToRem(22)
transition: transform 0.25s
&::marker
content: none
@@ -114,7 +112,7 @@ details
overflow-y: auto
@include media-breakpoint-up(desktop)
padding: $spacing3
- width: col(8)
+ width: columns(8)
.modal-header
margin-bottom: $spacing0
button
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index 5abd9de7ead9e47a04770d020c990ea56bfbcf53..d452a23f26590744be84f3dc1d80dadfe6159a28 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -34,7 +34,7 @@
// text-decoration-color: transparent
&[aria-expanded]
@include icon(caret, after)
- margin-left: px2rem(5)
+ margin-left: pxToRem(5)
transition: transform 0.15s
&[aria-expanded="true"]
&::after
@@ -120,11 +120,11 @@
.container
align-items: baseline
display: flex
- gap: $grid-gutter
+ gap: var(--grid-gutter)
.dropdown-menu-title
- width: col(5)
+ width: columns(5)
.nav-level-2
- width: col(7)
+ width: columns(7)
li
margin-bottom: $spacing0
@else
@@ -216,7 +216,7 @@
a
text-decoration: none
padding: $spacing0
- font-size: px2rem(24)
+ font-size: pxToRem(24)
&:hover
opacity: 0.7
&::after
diff --git a/assets/sass/_theme/design-system/pagination.sass b/assets/sass/_theme/design-system/pagination.sass
index 1c00405cb47904fdf4987318c33ba690e2fcda45..0ba8584ca2e8ed182d19ed618abc168bf84f3fb7 100644
--- a/assets/sass/_theme/design-system/pagination.sass
+++ b/assets/sass/_theme/design-system/pagination.sass
@@ -67,12 +67,12 @@
.previous
span
@include icon(arrow-left, before)
- margin-right: px2rem(5)
+ margin-right: pxToRem(5)
.next
text-align: right
span
@include icon(arrow-right, after)
- margin-left: px2rem(5)
+ margin-left: pxToRem(5)
@include media-breakpoint-up(desktop)
ul
diff --git a/assets/sass/_theme/design-system/search.sass b/assets/sass/_theme/design-system/search.sass
index 8560a31ddb04fba2f7ac6e64ab354528406a01bb..79ad5577ae4bb400b16f396e2c3044e8970f9f39 100644
--- a/assets/sass/_theme/design-system/search.sass
+++ b/assets/sass/_theme/design-system/search.sass
@@ -24,7 +24,7 @@
&.toggle-icon::after
font-size: $h3-size
@include media-breakpoint-up(desktop)
- margin-top: px2rem(5)
+ margin-top: pxToRem(5)
span,
&::after
display: inline
@@ -45,7 +45,7 @@
display: inline-flex
justify-content: center
margin-left: $spacing0
- width: px2rem(15)
+ width: pxToRem(15)
@include media-breakpoint-down(desktop)
right: $spacing1
top: half($spacing0)
@@ -87,7 +87,7 @@
@include icon(search-inline, after)
&::after
color: transparentize($color-text-alt, .4)
- padding-right: px2rem(2)
+ padding-right: pxToRem(2)
position: fixed
pointer-events: none
transform: translate(-6px,20%)
@@ -153,13 +153,13 @@
@include media-breakpoint-up(desktop)
&__form
position: relative
- width: col(8)
+ width: columns(8)
&::after
- left: calc(#{col(8)} - #{space(8)})
+ left: calc(#{columns(8)} - #{space(8)})
top: space(9)
&__search-input,
&__message
- width: calc(#{col(8,12)} - #{space(21.5)})
+ width: calc(#{columns(8)} - #{space(21.5)})
&__results-area
padding-top: space(26)
@include media-breakpoint-down(desktop)
@@ -173,7 +173,7 @@
.menu .nav-level-1 > li .pagefind-ui__toggle:not(.toggle-icon)::after
margin-left: 0
- margin-top: px2rem(2)
+ margin-top: pxToRem(2)
.pagefind-fixed
align-items: center
@@ -193,8 +193,8 @@
padding-right: 0
justify-content: center
&.toggle-icon
- min-height: px2rem(37)
- width: px2rem(50)
+ min-height: pxToRem(37)
+ width: pxToRem(50)
&:hover,
&:focus
width: calc(#{$spacing3} * 3)
@@ -206,7 +206,7 @@
&.in-page-with-toc
background: $color-background
border-top: 1px solid #eee
- bottom: px2rem(44)
+ bottom: pxToRem(44)
footer#document-footer .footer-search
.pagefind-footer
@@ -215,7 +215,7 @@ footer#document-footer .footer-search
&.toggle-icon
transform: translateX(-35%)
&::after
- margin-top: px2rem(3)
+ margin-top: pxToRem(3)
#search
margin-top: 0
a
diff --git a/assets/sass/_theme/design-system/table.sass b/assets/sass/_theme/design-system/table.sass
index f4fdd19732c0a98188b0b53709510ea65eb9a777..b5c22e4b53ec892361228abaaaffd8f9dc51f887 100644
--- a/assets/sass/_theme/design-system/table.sass
+++ b/assets/sass/_theme/design-system/table.sass
@@ -38,12 +38,12 @@ table
.table-responsive
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)
+ margin-left: half(var(--grid-gutter-negative))
+ margin-right: half(var(--grid-gutter-negative))
+ padding-left: half(var(--grid-gutter))
+ padding-right: half(var(--grid-gutter))
@include media-breakpoint-up(desktop)
- 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
+ margin-left: half(var(--grid-gutter-negative))
+ margin-right: half(var(--grid-gutter-negative))
+ padding-left: half(var(--grid-gutter))
+ padding-right: half(var(--grid-gutter))
\ No newline at end of file
diff --git a/assets/sass/_theme/design-system/table_of_contents.sass b/assets/sass/_theme/design-system/table_of_contents.sass
index 0e7d1746f0da1b9d126bbdf61f39efd66dd8bb08..d45816a3849f90ef404e38065c87c35439cb4fe2 100644
--- a/assets/sass/_theme/design-system/table_of_contents.sass
+++ b/assets/sass/_theme/design-system/table_of_contents.sass
@@ -7,11 +7,11 @@
bottom: 0
margin-top: 0
z-index: $zindex-toc
- width: calc(#{col-outside-container(4)} + #{$grid-gutter} * 2)
+ width: calc(#{columns(4)} + var(--grid-gutter) * 2)
transform: translateX(100%)
transition: var(--toc-transition-duration) transform ease-in-out
@include media-breakpoint-down(desktop)
- width: calc(100% - #{$grid-gutter})
+ width: calc(100% - var(--grid-gutter))
&.is-opened
transform: translateX(0)
&[aria-hidden="true"]
@@ -26,8 +26,8 @@
padding: $spacing0 $spacing1
@include media-breakpoint-up(desktop)
font-size: $toc-title-font-size-desktop
- padding: $header-nav-padding-y $grid-gutter calc(#{$header-nav-padding-y} + 1px)
- padding: calc((var(--header-height)) / 2 - #{$body-size}) $grid-gutter
+ padding: $header-nav-padding-y var(--grid-gutter) calc(#{$header-nav-padding-y} + 1px)
+ padding: calc((var(--header-height)) / 2 - #{$body-size}) var(--grid-gutter)
padding-top: 0
padding-bottom: 0
line-height: calc(var(--header-height) - 1px)
@@ -41,7 +41,7 @@
flex: 1
padding: $spacing1
@include media-breakpoint-up(desktop)
- padding: $spacing1 $grid-gutter
+ padding: $spacing1 var(--grid-gutter)
> li:first-child
margin-top: 0
button
@@ -62,7 +62,7 @@
padding-top: 0
padding-bottom: 0
line-height: var(--header-height)
- right: $grid-gutter
+ right: var(--grid-gutter)
&::after
margin-left: $spacing0
@@ -92,7 +92,7 @@
background: $toc-background-color
left: 0
width: 100%
- padding: 0 half($grid-gutter-sm)
+ padding: 0 var(--grid-gutter)
z-index: $zindex-toc-cta
button
@include button-icon(toc)
@@ -123,14 +123,14 @@
// Only desktop and in page with sidebar
@include in-page-with-sidebar
- @include container-margin-left
+ margin-left: grid-external-space()
pointer-events: none
top: 0
left: 0
margin-top: 0
height: 100%
position: absolute
- width: col-outside-container(4)
+ width: columns(4)
.toc-content
overflow-y: auto
max-height: calc(100vh - var(--header-height))
diff --git a/assets/sass/_theme/design-system/top.sass b/assets/sass/_theme/design-system/top.sass
index 574e1cc322c663e41f3b9500fa430d617a03cfc0..d1605f7c4b7a051336cdf6295100450d6475d31a 100644
--- a/assets/sass/_theme/design-system/top.sass
+++ b/assets/sass/_theme/design-system/top.sass
@@ -12,10 +12,10 @@
// a
// @include stretched-link
// div
- // margin-top: px2rem(5)
+ // margin-top: pxToRem(5)
// p
// @include media-breakpoint-up(lg)
- // width: col(8)
+ // width: columns(8)
.link
@extend .link-more
diff --git a/assets/sass/_theme/design-system/typography.sass b/assets/sass/_theme/design-system/typography.sass
index b17ab94d5ff712e724ce143ec28460cbebc2f062..4006b7a6bc7ec6905af377663687fe3b0d8e824d 100644
--- a/assets/sass/_theme/design-system/typography.sass
+++ b/assets/sass/_theme/design-system/typography.sass
@@ -204,7 +204,7 @@ small, .small
@include media-breakpoint-up(desktop)
font-size: $quote-size-desktop-long
cite
- font-size: px2rem(18)
+ font-size: pxToRem(18)
font-style: normal
blockquote, .blockquote
@@ -286,8 +286,8 @@ a,
@include link
@include icon(arrow, before)
&::before
- font-size: px2rem(10)
- margin-right: px2rem(5)
+ font-size: pxToRem(10)
+ margin-right: pxToRem(5)
dd
margin-bottom: 0.5rem
@@ -305,7 +305,7 @@ abbr, abbr[title]
sub,
sup
font-size: 60%
- margin-left: px2rem(2)
+ margin-left: pxToRem(2)
[data-click-to-copy]
cursor: pointer
@@ -342,5 +342,5 @@ sup
.btn-#{$name}
@include icon($name)
&::before
- margin-inline-end: px2rem(5)
+ margin-inline-end: pxToRem(5)
diff --git a/assets/sass/_theme/hugo-osuny.sass b/assets/sass/_theme/hugo-osuny.sass
index 216dc1a36961d8272f38687b9b0b7dc3b4df5d6a..0126f13d8e07dc0b163eda8622545927abce05b0 100644
--- a/assets/sass/_theme/hugo-osuny.sass
+++ b/assets/sass/_theme/hugo-osuny.sass
@@ -6,6 +6,8 @@
@import "dependencies/normalize"
@import "dependencies/bootstrap-breakpoints"
+@import "variables"
+
// Keep on top
@import "design-system/typography"
diff --git a/assets/sass/_theme/sections/diplomas.sass b/assets/sass/_theme/sections/diplomas.sass
index 67b54c24234bc8aa2bbce2dfe42e097f5550707a..b7acf19005bf4a84e58575612fc2f0c2f2e5f4c5 100644
--- a/assets/sass/_theme/sections/diplomas.sass
+++ b/assets/sass/_theme/sections/diplomas.sass
@@ -68,7 +68,7 @@ ul.diplomas
@include media-breakpoint-up(desktop)
display: flex
> p
- width: col(6)
+ width: columns(6)
.title
@include h4
@@ -87,8 +87,8 @@ ul.diplomas
position: absolute
z-index: 2
@include media-breakpoint-down(desktop)
- right: half(-$grid-gutter-sm)
- left: half(-$grid-gutter-sm)
+ right: var(--grid-gutter-negative)
+ left: var(--grid-gutter-negative)
&,
a
color: black
@@ -116,7 +116,7 @@ ul.diplomas
.container
@include media-breakpoint-down(sm)
.buttons > *
- width: col(8)
+ width: columns(8)
@include media-breakpoint-down(md)
.buttons
display: flex
@@ -124,7 +124,7 @@ ul.diplomas
flex-wrap: wrap
> *
min-width: 150px
- width: col(7)
+ width: columns(7)
@include media-breakpoint-up(md)
@include grid(2, md)
align-items: flex-end
@@ -136,7 +136,7 @@ ul.diplomas
justify-content: flex-end
> *
min-width: 200px
- width: col(2, 6)
+ width: columns(2)
.essential
color: $header-color
diff --git a/assets/sass/_theme/sections/events.sass b/assets/sass/_theme/sections/events.sass
index c9031b2575d14e8486eeac12d061c7950c1e8168..befe67ec91a6a27ed8199205cad2d24d687e2907 100644
--- a/assets/sass/_theme/sections/events.sass
+++ b/assets/sass/_theme/sections/events.sass
@@ -124,10 +124,10 @@
flex-direction: row
gap: $spacing1
.media
- width: col(4)
+ width: columns(4)
&-content
order: 1
- width: col(8)
+ width: columns(8)
@include media-breakpoint-down(md)
.media
max-width: 33%
@@ -139,15 +139,15 @@
grid-column: 10 / 13
@include media-breakpoint-up(desktop)
flex-direction: row
- gap: $grid-gutter
+ gap: var(--grid-gutter)
align-items: start
&-content
- width: col(10)
+ width: columns(10)
> hgroup, > .event-title
margin-bottom: $spacing0
.media
order: 2
- width: col(2)
+ width: columns(2)
@include in-page-without-sidebar
&-dates
margin-top: 0
@@ -219,9 +219,9 @@
display: flex
flex-direction: row
position: relative
- grid-gap: $grid-gutter
+ grid-gap: var(--grid-gutter)
+ .event
- margin-top: $grid-gutter
+ margin-top: var(--grid-gutter)
&-content
a
@include stretched-link
@@ -245,7 +245,7 @@
width: 100%
@include media-breakpoint-up(desktop)
.media
- width: col(4, 8)
+ width: columns(4)
&-dates
@include h3
margin-bottom: $spacing2
@@ -257,8 +257,8 @@
flex-direction: column
grid-gap: 0
.media
- margin-left: calc(-#{$grid-gutter-sm} /2)
- margin-right: calc(-#{$grid-gutter-sm} /2)
+ margin-left: var(--grid-gutter-negative)
+ margin-right: var(--grid-gutter-negative)
aspect-ratio: 1
img
margin-bottom: $spacing0
@@ -267,5 +267,5 @@
&-dates
@include h3
&:not(.event--with-image)
- width: col(5)
+ width: columns(5)
margin-left: offset(4)
diff --git a/assets/sass/_theme/sections/organizations.sass b/assets/sass/_theme/sections/organizations.sass
index 0254ddae6be16b2eb3dec191ec167507c36b7d03..00e17d08d7a62571a44f1aee3d194547bf51bd91 100644
--- a/assets/sass/_theme/sections/organizations.sass
+++ b/assets/sass/_theme/sections/organizations.sass
@@ -86,8 +86,8 @@
> .container
display: flex
justify-content: space-between
- gap: $grid-gutter
+ gap: var(--grid-gutter)
[itemprop="articleBody"]
- width: col(8)
+ width: columns(8)
.logo
- width: col(3)
+ width: columns(3)
diff --git a/assets/sass/_theme/sections/papers.sass b/assets/sass/_theme/sections/papers.sass
index 9cbed0822fb597044d65044c06b3127522c2a7bc..d1b26a8d658032f68678dc4938155833b996bacb 100644
--- a/assets/sass/_theme/sections/papers.sass
+++ b/assets/sass/_theme/sections/papers.sass
@@ -66,7 +66,7 @@
height: unset
@include sticky(-1px)
.media
- width: col(2, 4)
+ width: columns(2)
.document-content
min-height: 100vh
.content
diff --git a/assets/sass/_theme/sections/persons.sass b/assets/sass/_theme/sections/persons.sass
index 2548a808aefbc1b64dffb45156713f68325d6413..aa44dfa887f886215eb06da84ec884474c17c74e 100644
--- a/assets/sass/_theme/sections/persons.sass
+++ b/assets/sass/_theme/sections/persons.sass
@@ -10,7 +10,7 @@
transform: translateX($spacing0)
// TODO : voir comment gérer les marges comme pour les blocs (pb footer)
section
- padding-bottom: $grid-gutter
+ padding-bottom: var(--grid-gutter)
ol.programs
li
justify-content: flex-start
@@ -110,10 +110,10 @@ ol.persons--list
align-items: baseline
display: flex
[itemprop="name"]
- width: col(5)
+ width: columns(5)
[itemprop="jobTitle"]
- width: col(6)
- margin-left: $grid-gutter
+ width: columns(6)
+ margin-left: var(--grid-gutter)
@include media-breakpoint-down(desktop)
&::after
position: absolute
@@ -170,7 +170,7 @@ ol.persons--list
padding-bottom: 0
margin-bottom: $spacing4
.avatar
- width: col(6)
+ width: columns(6)
margin-top: $spacing1
margin-left: auto
transform: translateY(100px)
@@ -188,10 +188,10 @@ ol.persons--list
margin-top: 0
h1
margin-bottom: 0
- width: col(8)
+ width: columns(8)
.avatar
margin-bottom: 0
- width: col(3)
+ width: columns(3)
.roles
a
@include small
diff --git a/assets/sass/_theme/sections/posts.sass b/assets/sass/_theme/sections/posts.sass
index f355c79af5cdb92d0fe489d8299a564425aee078..1f7813586eae4b6a6fbb0647b716e92cbb917df0 100644
--- a/assets/sass/_theme/sections/posts.sass
+++ b/assets/sass/_theme/sections/posts.sass
@@ -1,5 +1,5 @@
.post
- @include article($post-media-background)
+ @include article
time
color: $post-time-color
display: inline-block
@@ -66,7 +66,7 @@
.post-content
[itemprop=headline],
> p
- max-width: col(6, 9)
+ max-width: columns(6)
.posts--grid
@include grid(1)
@include grid(2, desktop)
diff --git a/assets/sass/_theme/sections/programs.sass b/assets/sass/_theme/sections/programs.sass
index 392ce211fd2e3be0f19a24b9b03ac8e0fc2f6136..bd30567a4a6930cef3894e1ef1709c8c4b2a5aa1 100644
--- a/assets/sass/_theme/sections/programs.sass
+++ b/assets/sass/_theme/sections/programs.sass
@@ -57,7 +57,7 @@ ol.programs
font-size: $program-share-font-size-desktop
.dropdown-menu
background: $hero-color
- border-radius: px2rem(4)
+ border-radius: pxToRem(4)
bottom: 0
padding: 0
position: absolute
@@ -81,7 +81,7 @@ ol.programs
align-items: center
justify-content: space-between
width: 100%
- border-radius: px2rem(4)
+ border-radius: pxToRem(4)
a[download]
@include button-icon(download)
text-decoration: none
@@ -109,8 +109,8 @@ ol.programs
@include h3
@include media-breakpoint-down(desktop)
padding-top: $spacing3
- margin-left: half(-$grid-gutter-sm)
- margin-right: half(-$grid-gutter-sm)
+ margin-left: var(--grid-gutter-negative)
+ margin-right: var(--grid-gutter-negative)
@include media-breakpoint-up(desktop)
.container
diff --git a/assets/sass/_theme/sections/publications.sass b/assets/sass/_theme/sections/publications.sass
index 71d210d52e18688d94cb81f918afa0f5193dc1fc..4ed9c74dbb5942a8c902cce82d267da2261cd5a9 100644
--- a/assets/sass/_theme/sections/publications.sass
+++ b/assets/sass/_theme/sections/publications.sass
@@ -52,7 +52,7 @@
a + p
margin-top: $spacing1
a::before
- margin-top: px2rem(-6)
+ margin-top: pxToRem(-6)
.publication-title
@include h4
.publication-authors
@@ -98,7 +98,7 @@
@include grid(2, desktop)
@include grid(4, xxl)
@include media-breakpoint-up(xxl)
- grid-gap: $spacing0 $grid-gutter
+ grid-gap: $spacing0 var(--grid-gutter)
@include media-breakpoint-down(xxl)
grid-gap: $spacing0
> a
diff --git a/assets/sass/_theme/sections/volumes.sass b/assets/sass/_theme/sections/volumes.sass
index 7aac22fbbff105b8a8197b167872cc18c12d693d..a3c9c6aeda692dec13166ce448308c9bb8671962 100644
--- a/assets/sass/_theme/sections/volumes.sass
+++ b/assets/sass/_theme/sections/volumes.sass
@@ -48,7 +48,7 @@
.paper-volume
padding-left: $spacing1
.paper-actions
- gap: $grid-gutter
+ gap: var(--grid-gutter)
margin-top: $spacing0
a, button
width: unset
\ No newline at end of file
diff --git a/assets/sass/_theme/utils/fonts.sass b/assets/sass/_theme/utils/fonts.sass
new file mode 100644
index 0000000000000000000000000000000000000000..e6d6815e19878e41ddee6ea273bf9771da250378
--- /dev/null
+++ b/assets/sass/_theme/utils/fonts.sass
@@ -0,0 +1,23 @@
+// https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6
+@function str-replace($string, $search, $replace: "")
+ $index: str-index($string, $search)
+ @if $index
+ @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+ @return $string
+
+@mixin font-face($name, $path, $weight: 400, $style: normal, $exts: (eot woff2 woff ttf svg))
+ $src: null
+ $extmods: (eot:"?", svg:"#" + str-replace($name," ","_"))
+ $formats: (otf: "opentype", ttf: "truetype")
+
+ @each $ext in $exts
+ $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext)
+ $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext)
+ $src: append($src, url(quote("/assets/fonts/" + $path + "." + $extmod)) format(quote($format)), comma,)
+
+ @font-face
+ font-family: quote($name)
+ font-style: $style
+ font-weight: $weight
+ font-display: swap
+ src: $src
diff --git a/assets/sass/_theme/utils/grid.sass b/assets/sass/_theme/utils/grid.sass
new file mode 100644
index 0000000000000000000000000000000000000000..3461e11d20cc14b03444b01591cc735de2badfc6
--- /dev/null
+++ b/assets/sass/_theme/utils/grid.sass
@@ -0,0 +1,39 @@
+@mixin container
+ margin-left: auto
+ margin-right: auto
+ padding-left: var(--grid-gutter)
+ padding-right: var(--grid-gutter)
+ width: var(--grid-width)
+
+// This must be used for content inside columns
+@function columns($quantity)
+ $width: calc( (var(--column-width) * #{$quantity}) + var(--grid-gutter) * ( #{$quantity} - 1 ))
+ @return #{$width}
+
+@mixin grid($cols: 12, $breakpoint: false, $gap-y: var(--grid-gutter), $gap-x: var(--grid-gutter))
+ word-break: break-word
+ @if $breakpoint
+ @include media-breakpoint-up($breakpoint)
+ display: grid
+ grid-gap: $gap-y $gap-x
+ grid-template-columns: repeat($cols, 1fr)
+ @else
+ display: grid
+ grid-gap: $gap-y $gap-x
+ grid-template-columns: repeat($cols, 1fr)
+
+@mixin flexbox-grid($cols: 12, $gap-y: var(--grid-gutter), $gap-x: $gap-y)
+ display: flex
+ flex-wrap: wrap
+ gap: $gap-y $gap-x
+ > *
+ flex: 0 0 calc(#{100 / $cols}% - #{$gap-x} * #{($cols - 1) / $cols} )
+
+// This must be used for offset, outside columns
+@function offset($quantity)
+ $width: calc( #{columns($quantity)} + var(--grid-gutter) )
+ @return #{$width}
+
+// Cette fonction calcule l'espace disponible entre la grille et le bord de l'écran
+@function grid-external-space
+ @return Max(var(--grid-gutter), calc((100vw - var(--grid-width)) / 2 + var(--grid-gutter)))
diff --git a/assets/sass/_theme/utils/icons.sass b/assets/sass/_theme/utils/icons.sass
new file mode 100644
index 0000000000000000000000000000000000000000..15cf5f4f7739199c0b78fdff9c0bee4f81643860
--- /dev/null
+++ b/assets/sass/_theme/utils/icons.sass
@@ -0,0 +1,58 @@
+
+@mixin hover-translate-icon($pseudo: after, $distance: 10)
+ &::#{$pseudo}
+ display: inline-block
+ transition: transform 0.55s $arrow-ease-transition
+ transform: translateX(0)
+ &:hover
+ &::#{$pseudo}
+ transform: translateX(#{pxToRem($distance)})
+
+@mixin icon($icon-name: '', $pseudo-element: before, $non-breaking: false)
+ &::#{$pseudo-element}
+ content: map-get($icons, $icon-name)
+ display: inline-block
+ font-family: 'Icon'
+ font-style: normal
+ font-variant: normal
+ font-weight: normal
+ line-height: 1
+ speak: never
+ text-transform: none
+ vertical-align: middle
+ @if $non-breaking
+ content: "Â #{map-get($icons, $icon-name)}"
+ display: inline
+ @content // TODO : important de documenter ça
+
+@mixin icon-block($icon-name: '', $pseudo-element: before, $non-breaking: false)
+ @include icon($icon-name, $pseudo-element, $non-breaking)
+ font-size: 44px
+ display: inline
+ @content
+
+@mixin button-icon($icon: false)
+ @include button-reset
+ line-height: $body-line-height
+ border: 1px solid $hero-color
+ padding: half($spacing0) $spacing1
+ white-space: nowrap
+ @if $icon
+ @include icon-block($icon, after)
+
+
+@mixin arrow-right-hover
+ position: relative
+ display: flex
+ justify-content: space-between
+ align-items: center
+ @include icon(arrow, after)
+ opacity: 0
+ transform: translateX(-20px)
+ transition: 0.55s $arrow-ease-transition
+ position: absolute
+ right: 0
+ &:hover
+ &:after
+ opacity: 1
+ transform: translateX(0)
\ No newline at end of file
diff --git a/assets/sass/_theme/utils/links.sass b/assets/sass/_theme/utils/links.sass
new file mode 100644
index 0000000000000000000000000000000000000000..7866e937f8a5f5299e2b5c041a0adcf72464e60f
--- /dev/null
+++ b/assets/sass/_theme/utils/links.sass
@@ -0,0 +1,27 @@
+@mixin link($color: $link-color, $unhover_decorated: true)
+ color: $color
+ text-decoration-line: underline
+ text-decoration-thickness: $link-underline-thickness
+ text-underline-offset: $link-underline-offset
+ transition: $link-transition
+ @if $unhover_decorated
+ text-decoration-color: rgba($color, $link-unhover-decoration-color-alpha)
+ @else
+ text-decoration-color: transparent
+ &:hover
+ text-decoration-color: rgba($color, 1)
+ text-decoration-thickness: $link-underline-thickness
+
+@mixin link-hovered-underline-only
+ &:not(:hover)
+ text-decoration: transparent
+
+@mixin stretched-link($pseudo-element: after)
+ &::#{$pseudo-element}
+ bottom: 0
+ content: ''
+ left: 0
+ position: absolute
+ right: 0
+ top: 0
+ z-index: $zindex-stretched-link
\ No newline at end of file
diff --git a/assets/sass/_theme/utils/media.sass b/assets/sass/_theme/utils/media.sass
new file mode 100644
index 0000000000000000000000000000000000000000..8be361e9b59617051600a66be23c64fa98bae133
--- /dev/null
+++ b/assets/sass/_theme/utils/media.sass
@@ -0,0 +1,14 @@
+
+@mixin aspect-ratio($ratio, $selector: 'iframe', $background: false)
+ @if $background
+ aspect-ratio: #{$ratio}
+ background: $background
+ #{$selector}
+ aspect-ratio: #{$ratio}
+ display: block
+ width: 100%
+
+@mixin handle-svg-fit
+ picture.is-svg
+ img
+ object-fit: contain
\ No newline at end of file
diff --git a/assets/sass/_theme/utils/normalize.sass b/assets/sass/_theme/utils/normalize.sass
new file mode 100644
index 0000000000000000000000000000000000000000..89263f3c7feb2d559f9f2908510e98ab7ec12deb
--- /dev/null
+++ b/assets/sass/_theme/utils/normalize.sass
@@ -0,0 +1,32 @@
+@mixin button-reset
+ appearance: none
+ background: transparent
+ border: none
+ border-radius: 0
+ cursor: pointer
+ user-select: none
+ &:active,
+ &:focus
+ box-shadow: inset 0 0 0 0.25rem rgba($color-text, 0.25)
+ // TODO : vérifier si l'outline 0 est vraiment nécessaire
+ // outline: 0
+
+@mixin list-reset
+ list-style: none
+ padding-left: 0
+ margin-bottom: 0
+ margin-top: 0
+
+@mixin inset($top: 0, $right: $top, $bottom: $top, $left: $top)
+ inset: $top $right $bottom $left
+ // polyfill for inset
+ @supports not (inset: $top)
+ bottom: $bottom
+ left: $left
+ right: $right
+ top: $top
+
+@mixin browser-under-safari-16
+ @media not all and (min-resolution:.001dpcm)
+ @supports (-webkit-appearance:none) and (display:flow-root)
+ @content
\ No newline at end of file
diff --git a/assets/sass/_theme/utils/shame.sass b/assets/sass/_theme/utils/shame.sass
new file mode 100644
index 0000000000000000000000000000000000000000..000cae154e53ffeab89f4896d5afa8cd6ecbc6d5
--- /dev/null
+++ b/assets/sass/_theme/utils/shame.sass
@@ -0,0 +1,175 @@
+
+@mixin visually-hidden
+ clip: rect(0,0,0,0) !important
+ border: 0 !important
+ height: 1px !important
+ margin: -1px !important
+ overflow: hidden !important
+ padding: 0 !important
+ position: absolute !important
+ white-space: nowrap !important
+ width: 1px !important
+
+@mixin post-time-author-flex
+ .post-meta
+ display: flex
+ flex-wrap: wrap
+ .post-author p::before
+ content: ' • '
+
+// TODO: transformer en class %article
+@mixin article
+ position: relative
+ display: flex
+ flex-direction: column
+ .media
+ @include handle-svg-fit
+ margin-bottom: $spacing1
+ order: -1
+ overflow: hidden
+ img
+ display: block
+ object-fit: cover
+ @if $article-media-aspect-ratio
+ aspect-ratio: $article-media-aspect-ratio
+ h2, h3, [itemprop=headline]
+ @include h3
+ a
+ display: block
+ @include stretched-link
+ text-decoration: none
+ p + time
+ margin-top: $spacing0
+ time
+ @include meta
+ color: $color-text-alt
+ display: block
+
+@mixin list-section
+ @include list-reset
+ > li
+ border-bottom: 1px solid $color-border
+ padding-bottom: $spacing1
+ padding-top: $spacing1
+ position: relative
+ > .title
+ @include h2
+ transition: color 0.55s
+ @include media-breakpoint-down(desktop)
+ @include icon(arrow-right, after, true)
+ bottom: $spacing0
+ position: absolute
+ right: 0
+ @include media-breakpoint-up(desktop)
+ @include arrow-right-hover
+ display: block
+ &::after
+ transform: translateX(0)
+ position: relative
+ &:hover
+ &::after
+ transform: translateX($spacing0)
+ a
+ text-decoration: none
+ &:hover
+ color: $color-accent
+
+ @include media-breakpoint-down(desktop)
+ a:nth-child(2)
+ margin-top: calc(#{$spacing0} / 2)
+ a, p
+ display: block
+ @include media-breakpoint-up(desktop)
+ align-items: baseline
+ display: flex
+ justify-content: space-between
+
+@mixin text-underline
+ text-decoration-color: $color-border
+ text-decoration-line: underline
+ text-decoration-thickness: 1px
+ text-underline-offset: 3px
+ text-decoration-line: underline
+
+
+@mixin top-flex
+ @include in-page-without-sidebar
+ align-items: baseline
+ display: flex
+ .block-title
+ width: columns(4)
+ &:not(.hidden) + .description
+ margin-left: var(--grid-gutter)
+ .description
+ margin-top: 0
+ width: columns(8)
+
+@mixin collapsed-figcaption
+ figcaption
+ @include meta
+ color: $color-text-alt
+ position: absolute
+ display: block
+ left: 0
+ right: 0
+ text-align: right
+ z-index: 10
+ &::before
+ @include meta
+ content: '©'
+ position: absolute
+ right: 0
+ top: 0
+ background: $hero-background-color
+ text-align: center
+ padding: half($spacing0)
+ display: block
+ .credit-content
+ @include meta
+ background: $hero-background-color
+ display: none
+ padding: half($spacing0)
+ padding-right: $spacing1
+ a
+ color: inherit
+ text-decoration-color: inherit
+ &:focus
+ .credit-content
+ display: block
+ @include media-breakpoint-up(desktop)
+ &:before
+ padding-right: 0
+ @include media-breakpoint-down(desktop)
+ position: relative
+ background: $color-background
+ &::before
+ background: transparent
+ .credit-content
+ display: block
+ background: transparent
+ position: relative
+ &:hover
+ figcaption .credit-content
+ display: block
+
+@mixin dropdown-i18n
+ position: relative
+ .dropdown-menu
+ margin-top: $header-nav-padding-y
+ padding-left: $spacing1
+ padding-bottom: $spacing0
+ padding-top: $spacing0
+ padding-right: $spacing1
+ right: 0
+ li a
+ padding-bottom: half($spacing0)
+ padding-top: half($spacing0)
+ display: block
+ &.is-checked
+ display: flex
+ justify-content: space-between
+ align-items: center
+ gap: $spacing2
+ text-decoration: none !important
+ @include icon(caret, after)
+ transform: rotate(-14deg) skewX(-30deg)
\ No newline at end of file
diff --git a/assets/sass/_theme/utils/sidebar.sass b/assets/sass/_theme/utils/sidebar.sass
new file mode 100644
index 0000000000000000000000000000000000000000..0c1e3178b3345b8ab0fdbe2751c0e7409bde7e1a
--- /dev/null
+++ b/assets/sass/_theme/utils/sidebar.sass
@@ -0,0 +1,65 @@
+@mixin in-page-with-sidebar
+ @include media-breakpoint-up(desktop)
+ body:not(.full-width) &
+ @content
+
+@mixin in-page-without-sidebar
+ @include media-breakpoint-up(desktop)
+ main > .blocks &,
+ body.full-width &,
+ @content
+
+// Use this mixin to override with-aside or without-aside rules
+@mixin in-page-with-or-without-sidebar
+ @include media-breakpoint-up(desktop)
+ body:not(.full-width) &,
+ main > .blocks &,
+ body.full-width &,
+ @content
+
+// Aliases
+@mixin full-page
+ @include in-page-without-sidebar
+ @content
+
+@mixin not-full-page
+ @include in-page-with-sidebar
+ @content
+
+// Section Program
+@mixin in-page-program
+ .programs__section &
+ @content
+
+@mixin sticky($offset-y: 0)
+ position: sticky
+ top: $offset-y
+ @if $header-sticky-enabled
+ transition: top $header-sticky-transition
+ html:not(.is-scrolling-down) &
+ top: calc(var(--header-height) + #{$offset-y})
+
+
+@mixin sidebar($side: start)
+ @include media-breakpoint-down(desktop)
+ padding: 0 half(var(--grid-gutter))
+ margin-bottom: $spacing3
+ @include media-breakpoint-up(desktop)
+ @if $side == start
+ margin-left: grid-external-space()
+ left: 0
+ @else
+ margin-right: grid-external-space()
+ right: 0
+ margin-top: 0
+ top: 0
+ height: 100%
+ position: absolute
+ width: columns(4)
+ & > div
+ @include sticky($spacing1)
+ .toc-container
+ border-top: 1px solid $color-border
+ padding-top: $spacing1
+ position: static
+ margin-left: 0
diff --git a/assets/sass/_theme/utils/sizes.sass b/assets/sass/_theme/utils/sizes.sass
new file mode 100644
index 0000000000000000000000000000000000000000..5669f7a7b63054dba144157367a081ebdd1ef7f0
--- /dev/null
+++ b/assets/sass/_theme/utils/sizes.sass
@@ -0,0 +1,10 @@
+$space-unit: 4 !default
+@function space($spaces: 1)
+ @return #{$spaces * $space-unit / 16}rem
+
+@function pxToRem($size)
+ $remSize: $size / 16
+ @return #{$remSize}rem
+
+@function half($size)
+ @return calc(#{$size} / 2)
\ No newline at end of file
diff --git a/layouts/partials/blocks/templates/gallery/grid.html b/layouts/partials/blocks/templates/gallery/grid.html
index 999cb8cd75e9bb1060b6ca1ff6158e7866e2e962..07c7d1a2a1d16a96891d4560985a905b8c5bd1f2 100644
--- a/layouts/partials/blocks/templates/gallery/grid.html
+++ b/layouts/partials/blocks/templates/gallery/grid.html
@@ -13,13 +13,13 @@
{{ if not site.Params.image_sizes.design_system.lightbox.disabled }}
{{ $lightbox_text := false }}
{{ if and .text .credit }}
- {{ $lightbox_text = delimit (slice .text .credit) " / " }}
- {{ else }}
+ {{ $lightbox_text = delimit (slice .text .credit) " | " }}
+ {{ else if or .text .credit }}
{{ $lightbox_text = or .text .credit }}
{{ end }}
<a class="glightbox"
role="button"
- data-glightbox="type: image;{{ if $lightbox_text }}description: {{ partial "PrepareHTML" $lightbox_text }}{{ end }}"
+ data-glightbox="type: image; {{ if $lightbox_text }}description: {{ partial "PrepareText" $lightbox_text }}{{ end }}"
href="{{ partial "GetLightboxUrl" (dict "id" .id) }}"
title="{{- i18n "commons.lightbox.link.title" -}}"
aria-label="{{- i18n "commons.lightbox.link.title" -}}">
diff --git a/layouts/partials/footer/debug.html b/layouts/partials/footer/debug.html
index fb2fa584fa76cbd6ef6d3f389a1d8cf826751aa5..e5a77b291f027180d4f8864f6d00d833217d68aa 100644
--- a/layouts/partials/footer/debug.html
+++ b/layouts/partials/footer/debug.html
@@ -190,6 +190,9 @@
if (e.ctrlKey && e.key === 'i') {
showImageDimension();
}
+ if (e.ctrlKey && e.key === 'p') {
+ openInProd();
+ }
});
window.addEventListener('pointermove', e => {
@@ -264,4 +267,9 @@
return (widthRatio + heightRatio) / 2;
}
+
+ function openInProd() {
+ console.log('{{ .Site.BaseURL }}')
+ }
+
</script>
\ No newline at end of file
diff --git a/layouts/partials/papers/document-nav.html b/layouts/partials/papers/document-nav.html
index 49b04d431ee141a35109827d2a0609dcd6fb99eb..1b9f6d5693fee74d700b593d0303e628433bfc90 100644
--- a/layouts/partials/papers/document-nav.html
+++ b/layouts/partials/papers/document-nav.html
@@ -16,7 +16,7 @@
"desktop" "408x485"
) -}}
{{- else if site.Params.default_image.url -}}
- {{- partial "commons/image-default.html" (dict "class" "img-fluid") -}}
+ {{- partial "commons/image-default.html" -}}
{{- end -}}
</div>
</a>
diff --git a/layouts/partials/papers/sidebar.html b/layouts/partials/papers/sidebar.html
index c00aa0a4b33d633968cddeabdb6f28f52ce8dc4d..0c17ae332d1be1df0693db637bfd208484d4c17f 100644
--- a/layouts/partials/papers/sidebar.html
+++ b/layouts/partials/papers/sidebar.html
@@ -18,7 +18,7 @@
"desktop" "408x485"
) -}}
{{- else if site.Params.default_image.url -}}
- {{- partial "commons/image-default.html" (dict "class" "img-fluid") -}}
+ {{- partial "commons/image-default.html" -}}
{{- end -}}
</div>
</a>
diff --git a/layouts/partials/persons/hero-single.html b/layouts/partials/persons/hero-single.html
index 928702e8ea481a7391e49d791dc7f3feff260616..36f55307da4b0b3f4f9aee8f62402b909ef4066a 100644
--- a/layouts/partials/persons/hero-single.html
+++ b/layouts/partials/persons/hero-single.html
@@ -25,7 +25,6 @@
{{ partial "commons/image.html"
(dict
"image" .Params.image
- "class" "img-fluid"
"sizes" site.Params.image_sizes.sections.persons.hero_single
)}}
</div>
diff --git a/layouts/partials/volumes/volume.html b/layouts/partials/volumes/volume.html
index d6a49058743ad40ca2f50c958cdeea92bd14ef4c..285f8e63d390d830230255db949f9053f644e80f 100644
--- a/layouts/partials/volumes/volume.html
+++ b/layouts/partials/volumes/volume.html
@@ -12,7 +12,7 @@
"sizes" site.Params.image_sizes.sections.volumes.item
) -}}
{{- else if site.Params.default_image.url -}}
- {{- partial "commons/image-default.html" (dict "class" "img-fluid") -}}
+ {{- partial "commons/image-default.html" -}}
{{- end -}}
</div>
</article>