diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index 9a2e0a7d31ee23648622d53b6f77877ed04109f3..0a5043efa9b81d49656bd169a37bb0e46ccbbc5f 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -1,526 +1,9 @@
-// MAIN COLORS
-$color-accent: #0038FF !default
-$color-text: #000000 !default
-$color-text-alt: #454545 !default
-$color-background: #FFFFFF !default
-$color-background-alt: #F2F2F2 !default
-$color-border: rgba(0, 0, 0, 0.30) !default
-$color-selection: $color-background !default
-$color-selection-background: rgba($color-text, .7) !default
-
-// Scheme Dark colors (enable dark mode in your hugo configuration file)
-$has-dark-mode: false !default
-$color-dark-accent: rgb(120, 208, 255) !default
-$color-dark-text: #ffffff !default
-$color-dark-text-alt: #cbcbcb !default
-$color-dark-background: #000000 !default
-$color-dark-background-alt: #181919 !default
-$color-dark-border: rgba(255, 255, 255, 0.3) !default
-$color-dark-selection: $color-dark-background !default
-$color-dark-selection-background: rgba($color-dark-text, .7) !default
-
-$body-color: var(--color-text) !default
-$body-background-color: var(--color-background) !default
-$link-color: var(--color-text) !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
-$spacing-1: space(2) // 8px
-$spacing-2: space(3) // 12px
-$spacing-3: space(6) // 24px
-$spacing-4: space(12) // 48px
-$spacing-5: space(16) // 64px
-$spacing-6: space(32) // 128px
-$spacing-7: space(64) // 256px
-
-// Deprecated variables
-// $spacing0: space(3) --> $spacing-2
-// $spacing1: space(6) --> $spacing-3
-// $spacing2: space(12) --> $spacing-4
-// $spacing3: space(16) --> $spacing-5
-// $spacing4: space(32) --> $spacing-6
-// $spacing5: space(64) --> $spacing-7
-
-$minimum-accessible-size: 44px
-
-// TYPOGRAPHY
-
-// Fonts family
-$body-font-family: "Baskerville", "Times New Roman", "Times", serif !default
-$heading-font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
-
-// Headings
-$heading-font-weight: normal !default
-
-// h1
-$h1-font-family: $heading-font-family !default
-$h1-size-desktop: pxToRem(60) !default
-$h1-size: pxToRem(30) !default
-$h1-line-height: 120% !default
-$h1-line-height-desktop: $h1-line-height !default
-$h1-weight: bold !default
-$h1-text-transform: none !default
-
-// h2
-$h2-font-family: $heading-font-family !default
-$h2-size-desktop: pxToRem(40) !default
-$h2-size: pxToRem(24) !default
-$h2-line-height: 120% !default
-$h2-line-height-desktop: $h2-line-height !default
-$h2-weight: $heading-font-weight !default
-$h2-text-transform: none !default
-
-// h3
-$h3-font-family: $heading-font-family !default
-$h3-size-desktop: pxToRem(28) !default
-$h3-size: pxToRem(20) !default
-$h3-line-height: 130% !default
-$h3-line-height-desktop: $h3-line-height !default
-$h3-weight: bold !default
-$h3-text-transform: none !default
-
-// h4
-$h4-font-family: $heading-font-family !default
-$h4-size-desktop: pxToRem(22) !default
-$h4-size: pxToRem(16) !default
-$h4-line-height: 130% !default
-$h4-line-height-desktop: $h4-line-height !default
-$h4-weight: bold !default
-$h4-text-transform: none !default
-
-// h5 or Section
-$h5-font-family: $heading-font-family !default
-$h5-size-desktop: pxToRem(24) !default
-$h5-size: pxToRem(20) !default
-$h5-line-height: 130% !default
-$h5-line-height-desktop: $h5-line-height !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: pxToRem(20) !default
-$h6-size: pxToRem(14) !default
-$h6-line-height: 130% !default
-$h6-line-height-desktop: $h6-line-height !default
-$h6-weight: $heading-font-weight !default
-$h6-text-transform: uppercase !default
-
-// Lead
-$lead-font-family: $heading-font-family !default
-$lead-size-desktop: pxToRem(60) !default
-$lead-size: pxToRem(24) !default
-$lead-line-height: 120% !default
-$lead-line-height-desktop: $lead-line-height !default
-$lead-weight: $heading-font-weight !default
-
-$lead-sidebar-font-family: $lead-font-family !default
-$lead-sidebar-size-desktop: pxToRem(32) !default
-$lead-sidebar-size: $lead-size !default
-$lead-sidebar-line-height: $lead-line-height !default
-$lead-sidebar-line-height-desktop: $lead-sidebar-line-height !default
-$lead-sidebar-weight: $lead-weight !default
-
-$lead-hero-font-family: $lead-sidebar-font-family !default
-$lead-hero-size: $lead-size !default
-$lead-hero-size-desktop: $lead-sidebar-size-desktop !default
-$lead-hero-line-height: $lead-sidebar-line-height !default
-$lead-hero-line-height-desktop: $lead-hero-line-height !default
-$lead-hero-weight: $lead-sidebar-weight !default
-
-// Body
-$body-size-desktop: pxToRem(22) !default
-$body-size: pxToRem(18) !default
-$body-line-height: 160% !default
-$body-line-height-desktop: $body-line-height !default
-$body-weight: normal !default
-
-// Small
-$small-font-family: $body-font-family !default
-$small-size-desktop: pxToRem(18) !default
-$small-size: pxToRem(14) !default
-$small-line-height: 130% !default
-$small-line-height-desktop: $small-line-height !default
-$small-weight: normal !default
-
-// Signature
-$signature-font-family: $heading-font-family !default
-$signature-size-desktop: pxToRem(22) !default
-$signature-size: pxToRem(18) !default
-$signature-line-height: 130% !default
-$signature-line-height-desktop: $signature-line-height !default
-$signature-weight: $heading-font-weight !default
-
-// Meta
-$meta-font-family: $heading-font-family !default
-$meta-size-desktop: pxToRem(16) !default
-$meta-size: pxToRem(14) !default
-$meta-line-height: 150% !default
-$meta-line-height-desktop: $meta-line-height !default
-$meta-weight: $heading-font-weight !default
-
-// Quotes
-$quote-font-family: $body-font-family !default
-$quote-size-desktop-short: pxToRem(60) !default
-$quote-size-desktop-long: pxToRem(40) !default
-$quote-size-desktop: pxToRem(40) !default
-$quote-size: pxToRem(24) !default
-$quote-line-height: 120% !default
-$quote-line-height-desktop: $quote-line-height !default
-$quote-weight: normal !default
-$quote-style: italic !default
-
-// Link
-$link-underline-offset: 0.2em !default
-$link-underline-thickness: 1px !default
-$link-transition: text-decoration-color .3s ease !default
-$link-unhover-decoration-color-alpha: 0.3 !default
-
-// Button
-$btn-font-family: $heading-font-family !default
-$btn-font-size: $meta-size !default
-$btn-font-size-desktop: $meta-size-desktop !default
-$btn-font-weight: normal !default
-$btn-text-transform: none !default
-$btn-color: var(--color-text) !default
-$btn-hover-color: var(--color-text) !default
-$btn-background: transparent !default
-$btn-hover-background: var(--color-background) !default
-$btn-border: pxToRem(1) solid var(--color-border) !default
-$btn-border-desktop: $btn-border !default
-$btn-border-radius: pxToRem(4) !default
-$btn-border-radius-desktop: $btn-border-radius !default
-$btn-padding: pxToRem(12) pxToRem(10) !default
-$btn-padding-desktop: pxToRem(18) pxToRem(16) !default
-$btn-min-width: pxToRem(100) !default
-$btn-min-width-desktop: pxToRem(190) !default
-
-// Chip
-$chip-background: var(--color-background) !default
-$chip-background-hover: var(--color-background-alt) !default
-$chip-border: 1px solid var(--color-border) !default
-$chip-border-radius: $btn-border-radius !default
-$chip-color: var(--color-text) !default
-
-// Form
-$form-btn-color: var(--color-background) !default
-$form-btn-background-color: var(--color-accent) !default
-$form-input-border-radius: 4px !default
-
-// Z-index
-$zindex-nav-accessibility: 1010 !default
-$zindex-stretched-link: 2 !default
-$zindex-header: 52 !default
-$zindex-body-overlay: 51 !default
-$zindex-toc: 60 !default
-$zindex-toc-cta: 49 !default
-$zindex-modal: 72 !default
-$zindex-aside: 48 !default
-$zindex-footer: 50 !default
-
-// Header
-$header-color: var(--color-text) !default
-$header-hover-color: var(--color-accent) !default // TODO : Réflechir à plus élégant / générique
-$header-background: var(--color-background-alt) !default
-$header-transition: 0.3s !default
-$header-dropdown-full: false !default
-$header-dropdown-background: $header-background !default
-$header-dropdown-color: $header-color !default
-$header-dropdown-transition: $header-transition !default
-$header-sticky-enabled: true !default
-$header-sticky-background: var(--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: 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
-$header-height-desktop: 96px !default
-$header-sticky-invert-logo: false !default
-$header-border-bottom-width: 1px !default
-
-// Navs
-$body-overlay-color: rgba(0, 0, 0, 0.3) !default
-
-// Footer
-$footer-color: var(--color-text) !default
-$footer-background-color: var(--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: pxToRem(32) !default
-$footer-text-hidden: false !default
-$dropdown-i18n-background-color: var(--color-background) !default
-$dropdown-i18n-color: var(--color-text) !default
-
-// Hero
-$hero-height: 300px !default
-$hero-height-desktop: 500px !default
-$hero-color: var(--color-text) !default
-$hero-background-color: var(--color-background-alt) !default
-$hero-credit-color: var(--color-text-alt) !default
-
-// Breadcrumb
-$breadcrumb-color: $hero-color !default
-$breadcrumb-color-active: $hero-color !default
-$breadcrumb-icon: "caret-right" !default
-$breadcrumb-icon-color: var(--color-text-alt) !default
-
-// Icons
-$icons: ()
-$icons: map-merge($icons, ("arrow": "\ff01"))
-$icons: map-merge($icons, ("arrow-raw": "\e93a"))
-$icons: map-merge($icons, ("arrow-first": "\e906"))
-$icons: map-merge($icons, ("arrow-last": "\e907"))
-$icons: map-merge($icons, ("arrow-left": "\ff02"))
-$icons: map-merge($icons, ("arrow-left-raw": "\e938"))
-$icons: map-merge($icons, ("arrow-next": "\e909"))
-$icons: map-merge($icons, ("arrow-previous": "\e908"))
-$icons: map-merge($icons, ("arrow-right": "\ff00"))
-$icons: map-merge($icons, ("arrow-right-raw": "\e939"))
-$icons: map-merge($icons, ("arrow-alt": "\e931"))
-$icons: map-merge($icons, ("arrow-alt-raw": "\e936"))
-$icons: map-merge($icons, ("burger": "\e902"))
-$icons: map-merge($icons, ("burger-close": "\e905"))
-$icons: map-merge($icons, ("caret": "\e904"))
-$icons: map-merge($icons, ("caret-raw": "\e940"))
-$icons: map-merge($icons, ("caret-bottom": "\e911"))
-$icons: map-merge($icons, ("caret-bottom-raw": "\e944"))
-$icons: map-merge($icons, ("caret-left": "\e912"))
-$icons: map-merge($icons, ("caret-left-raw": "\e942"))
-$icons: map-merge($icons, ("caret-top": "\e914"))
-$icons: map-merge($icons, ("caret-top-raw": "\e941"))
-$icons: map-merge($icons, ("caret-right": "\e913"))
-$icons: map-merge($icons, ("caret-right-raw": "\e943"))
-$icons: map-merge($icons, ("check": "\ff06"))
-$icons: map-merge($icons, ("check-inline": "\ff07"))
-$icons: map-merge($icons, ("check-inline-raw": "\e945"))
-$icons: map-merge($icons, ("close": "\e90e"))
-$icons: map-merge($icons, ("copy": "\ff03"))
-$icons: map-merge($icons, ("copy-raw": "\e946"))
-$icons: map-merge($icons, ("copy-inline": "\ff04"))
-$icons: map-merge($icons, ("download": "\e900"))
-$icons: map-merge($icons, ("download-inline": "\e92f"))
-$icons: map-merge($icons, ("download-raw": "\e937"))
-$icons: map-merge($icons, ("eye": "\e901"))
-$icons: map-merge($icons, ("facebook": "\e90b"))
-$icons: map-merge($icons, ("facebook-raw": "\e93e"))
-$icons: map-merge($icons, ("globe": "\ff10"))
-$icons: map-merge($icons, ("globe-raw": "\e934"))
-$icons: map-merge($icons, ("instagram": "\e90a"))
-$icons: map-merge($icons, ("instagram-raw": "\e93b"))
-$icons: map-merge($icons, ("link-blank": "\e903"))
-$icons: map-merge($icons, ("link-blank-block": "\ff05"))
-$icons: map-merge($icons, ("link-blank-raw": "\e932"))
-$icons: map-merge($icons, ("linkedin": "\e90c"))
-$icons: map-merge($icons, ("linkedin-raw": "\e93c"))
-$icons: map-merge($icons, ("list-hyphen": "\e917"))
-$icons: map-merge($icons, ("list-hyphen-raw": "\e93f"))
-$icons: map-merge($icons, ("pause": "\e90f"))
-$icons: map-merge($icons, ("play": "\e910"))
-$icons: map-merge($icons, ("search": "\e916"))
-$icons: map-merge($icons, ("search-inline": "\ee13"))
-$icons: map-merge($icons, ("search-raw": "\e933"))
-$icons: map-merge($icons, ("social": "\e915"))
-$icons: map-merge($icons, ("social-raw": "\e935"))
-$icons: map-merge($icons, ("social-inline": "\e92e"))
-$icons: map-merge($icons, ("social-facebook": "\ee01"))
-$icons: map-merge($icons, ("social-instagram": "\ee02"))
-$icons: map-merge($icons, ("social-linkedin": "\ee03"))
-$icons: map-merge($icons, ("social-mastodon": "\ee04"))
-$icons: map-merge($icons, ("social-peertube": "\ee05"))
-$icons: map-merge($icons, ("social-rss": "\ee06"))
-$icons: map-merge($icons, ("social-tiktok": "\ee07"))
-$icons: map-merge($icons, ("social-vimeo": "\ee08"))
-$icons: map-merge($icons, ("social-x": "\ee09"))
-$icons: map-merge($icons, ("social-youtube": "\ee0a"))
-$icons: map-merge($icons, ("social-github": "\ee10"))
-$icons: map-merge($icons, ("social-email": "\ee11"))
-$icons: map-merge($icons, ("toc": "\e918"))
-$icons: map-merge($icons, ("twitter": "\e90d"))
-$icons: map-merge($icons, ("twitter-raw": "\e90d"))
-$icons: map-merge($icons, ("whatsapp": "\e919"))
-$icons: map-merge($icons, ("email": "\e920"))
-$icons: map-merge($icons, ("telegram": "\e921"))
-
-// Breakpoints
-// TODO: réécrire en sass les mixins bootstrap
-$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, desktop: 992px, lg: 992px, xl: 1200px, xxl: 1440px) !default
-
-// System
-
-// Lightbox
-$lightbox-overlay-color: rgba(0, 0, 0, 0.90) !default
-$lightbox-backdrop: blur(16px) !default
-
-// Table of content
-$toc-color: var(--color-text) !default
-$toc-active-color: var(--color-accent) !default // TODO : checker ce que ça fait
-$toc-background-color: var(--color-background-alt) !default
-$toc-font-family: $body-font-family !default
-$toc-font-size: $body-size !default
-$toc-font-size-desktop: $body-size-desktop !default
-$toc-line-height: $body-line-height !default
-$toc-title-font-family: $meta-font-family !default
-$toc-title-font-size: $meta-size !default
-$toc-title-font-size-desktop: $meta-size-desktop !default
-$toc-sticky-transition: 0.4s
-$toc-overlay-color: $body-overlay-color !default
-
-// Table
-$table-head-font-size: $h4-size !default
-$table-head-font-size-desktop: $h4-size-desktop !default
-$table-body-size: $body-size !default
-$table-body-size-desktop: $body-size-desktop !default
-
-// HEADING
-
-// Under desktop breakpoint
-$heading-margin-top: $spacing-4 !default
-$heading-margin-bottom: 0 !default
-// Upper desktop breakpoint without sidebar
-$heading-margin-top-desktop: $spacing-6 !default
-$heading-margin-bottom-desktop: $heading-margin-bottom !default
-// Upper desktop breakpoint with sidebar
-$heading-margin-top-with-sidebar: $spacing-5 !default
-$heading-margin-bottom-with-sidebar: $heading-margin-bottom !default
-
-// BLOCKS
-// Base
-
-// Under desktop breakpoint
-$block-space-y: $spacing-4 !default
-// Upper desktop breakpoint without sidebar
-$block-space-y-desktop: $spacing-5 !default
-// Upper desktop breakpoint with sidebar
-$block-space-y-with-sidebar: $spacing-5 !default
-
-// Block call to action
-$block-call-to-action-background: var(--color-accent) !default
-$block-call-to-action-color: var(--color-background) !default
-$block-call-to-action-button-background: var(--color-background) !default
-$block-call-to-action-button-color: var(--color-text) !default
-$block-call-to-action-button-hover-background: var(--color-text-alt) !default
-$block-call-to-action-button-hover-color: var(--color-background) !default
-
-// Block chapter
-$block-chapter-layout-accent-background: var(--color-accent) !default
-$block-chapter-layout-accent-color: var(--color-background) !default
-$block-chapter-layout-alt-background: var(--color-background-alt) !default
-$block-chapter-layout-alt-color: var(--color-text) !default
-
-// Block definitions
-$block-definition-border-color: var(--color-border) !default
-$block-definition-border-color-hovered: var(--color-accent) !default
-$block-definition-color-hovered: var(--color-accent) !default
-$block-definition-font-size: $body-size !default
-$block-definition-font-size-desktop: $body-size-desktop !default
-
-// Block pages
-$block-pages-card-background: var(--color-background-alt) !default
-$block-pages-card-page-background: var(--color-background) !default
-$block-pages-card-page-color: var(--color-text) !default
-$block-pages-card-page-background-hover: var(--color-accent) !default
-$block-pages-card-page-color-hover: var(--color-background) !default
-
-// Block posts
-$block-posts-grid-columns: 3 !default
-
-// Block programs
-$block-programs-aspect-ratio: 16/9 !default
-
-// Block timeline
-$block-timeline-horizontal-background: var(--color-background-alt) !default
-$block-timeline-horizontal-color: var(--color-text) !default
-
-// Block testimonials
-$block-testimonials-xl-font-size: $quote-size-desktop-short !default
-$block-testimonials-xl-line-height: $quote-line-height !default
-$block-testimonials-xl-font-size-long-text: $quote-size-desktop-long !default
-$block-testimonials-xl-line-height-long-text: $quote-line-height !default
-$block-testimonials-color: var(--color-accent) !default
-$block-testimonials-font-family: $quote-font-family !default
-$block-testimonials-font-size: $quote-size !default
-$block-testimonials-line-height: $quote-line-height !default
-$block-testimonials-style: $quote-style !default
-$block-testimonials-pagination-background: var(--color-border) !default
-$block-testimonials-pagination-progress-background: var(--color-accent) !default
-
-// Block key_figures
-
-// TODO : overkill ?
-$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-image-max-width: $spacing-6 !default
-
-$block-key_figures-font-size: pxToRem(16) !default
-$block-key_figures-number-font-size: pxToRem(32) !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: 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: pxToRem(60) !default
-
-$block-key_figures-font-size-xxl: $block-key_figures-font-size-xl !default
-$block-key_figures-number-font-size-xxl: pxToRem(80) !default
-
-// Block gallery
-$block-gallery-carousel-background: var(--color-background-alt) !default
-$block-gallery-carousel-max-height: 70vh !default
-
-// Block image
-$block-image-max-height-with-sidebar: calc(100vh - var(--header-height)) !default
-$block-image-max-height-without-sidebar: none !default
-
-// Block video
-$block-video-background: var(--color-background-alt) !default
-
-// Sections
-$article-media-aspect-ratio: 2 !default
-
-$post-time-color: var(--color-text-alt) !default
-// Si layout posts grid (ne concerne pas les blocks posts)
-$posts-grid-columns: $block-posts-grid-columns !default
-
-// Person
-$persons-avatar-background-color: var(--color-background-alt) !default
-
-// Organization
-$organization-background-color: $color-background-alt !default // Use sass variable color-background To avoid dark logo on darkmode background-alt color
-
-// Project
-$project-infos-border-color: $color-border !default
-$project-infos-color-text: $color-text !default
-$project-infos-color-text-alt: $color-text-alt !default
-$project-infos-color-accent: $color-accent !default
-
-// Program
-$program-essential-font-size: $meta-size !default
-$program-essential-font-size-desktop: $meta-size-desktop !default
-$program-zindex-toc: $zindex-toc !default
-
-// MISC
-
-// Animations
-$arrow-ease-transition: cubic-bezier(0, 0.65, 0.4, 1.2) !default
-$arrow-ease-transition-2: cubic-bezier(0, 0.65, 0.4, 1) !default
-
-// Icons
-$icon-burger-margin-right: -12px
-$icon-close-margin-right: -12px
-$icon-toc-margin-right: -14px
-$icon-arrow-previous-margin-left: -18px // cf. testimonial
-$icon-social-margin-right: -14px
+// L'ordre d'appel des fichiers est important
+@import configuration/spacings
+@import configuration/colors
+@import configuration/typography
+@import configuration/icons
+@import configuration/animations
+@import configuration/components
+@import configuration/blocks
+@import configuration/sections
diff --git a/assets/sass/_theme/_variables.sass b/assets/sass/_theme/_variables.sass
index 1a4c90200b9dea2559ff02faf67ba37b2ebac69f..c085e5cddb9fa23153df24ff420fe0532de42fab 100644
--- a/assets/sass/_theme/_variables.sass
+++ b/assets/sass/_theme/_variables.sass
@@ -158,4 +158,19 @@
--grid-gutter-negative: #{-$grid-gutter-lg}
@include media-breakpoint-up(xxl)
--grid-gutter: #{$grid-gutter-xxl}
- --grid-gutter-negative: #{-$grid-gutter-xxl}
\ No newline at end of file
+ --grid-gutter-negative: #{-$grid-gutter-xxl}
+
+ // -------------- //
+ // HEADING //
+ // ---------------//
+
+ --heading-margin-top: #{$heading-margin-top}
+ --heading-margin-bottom: #{$heading-margin-bottom}
+ // In page without sidebar
+ @include media-breakpoint-up(desktop)
+ body:not(.full-width)
+ --heading-margin-top: #{ $heading-margin-top-with-sidebar}
+ --heading-margin-bottom: #{$heading-margin-bottom-with-sidebar}
+ main > .blocks, body.full-width
+ --heading-margin-top: #{ $heading-margin-top-desktop}
+ --heading-margin-bottom: #{$heading-margin-bottom-desktop}
diff --git a/assets/sass/_theme/blocks/base.sass b/assets/sass/_theme/blocks/base.sass
index 1c231475e64557e3718fc1936f1c724f770b96e2..fa3a7009f10f6c1c6ae3ffb3bc34823f89b7fd8a 100644
--- a/assets/sass/_theme/blocks/base.sass
+++ b/assets/sass/_theme/blocks/base.sass
@@ -16,21 +16,16 @@
--block-space-y: #{$block-space-y-with-sidebar}
.heading
- --heading-margin-top: #{$heading-margin-top}
- --heading-margin-bottom: #{$heading-margin-bottom}
margin-bottom: var(--heading-margin-bottom)
&:not(:first-child)
margin-top: var(--heading-margin-top)
- @include in-page-with-sidebar
- --heading-margin-top: #{ $heading-margin-top-with-sidebar}
- --heading-margin-bottom: #{$heading-margin-bottom-with-sidebar}
- @include in-page-without-sidebar
- --heading-margin-top: #{ $heading-margin-top-desktop}
- --heading-margin-bottom: #{$heading-margin-bottom-desktop}
@include in-page-without-sidebar
h2
width: columns(8)
+.heading + .block
+ margin-top: var(--heading-margin-bottom)
+
// Specific
$backgrounded_blocks: ".block-call_to_action, .block-chapter--accent_background, .block-chapter--alt_background, .block-timeline--horizontal, .block-pages--cards"
.blocks
@@ -42,10 +37,6 @@ $backgrounded_blocks: ".block-call_to_action, .block-chapter--accent_background,
&:is(#{$backgrounded_blocks})
margin-bottom: 0
-// Heading + chapter
-.heading + .block-chapter
- margin-top: $spacing-3
-
// Following chapters
.block-chapter
&--alt_background, &--accent_background
diff --git a/assets/sass/_theme/blocks/gallery.sass b/assets/sass/_theme/blocks/gallery.sass
index f75ddd42a15ed6fae94ec58b6f296d95c1cb0b66..e2a21dc715102730b4a08a72c19544a12033acb5 100644
--- a/assets/sass/_theme/blocks/gallery.sass
+++ b/assets/sass/_theme/blocks/gallery.sass
@@ -14,7 +14,10 @@
width: 100%
figcaption
@include small
+ margin-top: $spacing-2
position: relative
+ > * + *
+ margin-top: $spacing-1
p
margin-bottom: 0
.credit
@@ -37,10 +40,33 @@
&--with-text
@include in-page-without-sidebar
@include flexbox-grid(4)
- figure
- display: flex
- flex-direction: column
- gap: $spacing-2
+
+ &--large
+ figure
+ margin-bottom: $spacing-5
+ @include media-breakpoint-down(desktop)
+ picture
+ margin-left: var(--grid-gutter-negative)
+ margin-right: var(--grid-gutter-negative)
+ @include in-page-without-sidebar
+ &.image-portrait,
+ &.image-square
+ picture
+ width: columns(8)
+ margin-left: offset(2)
+ @include in-page-without-sidebar
+ figcaption
+ display: flex
+ justify-content: space-between
+ align-items: baseline
+ p
+ max-width: columns(8)
+ *
+ flex: 1 1
+ .credit
+ margin-top: 0
+ text-align: right
+
&--carousel
overflow: hidden
position: relative
@@ -91,10 +117,6 @@
height: $block-gallery-carousel-max-height
width: auto
max-width: none
- figcaption
- margin-top: $spacing-2
- > * + *
- margin-top: $spacing-1
&__arrows
margin-left: pxToRem(-18)
diff --git a/assets/sass/_theme/configuration/animations.sass b/assets/sass/_theme/configuration/animations.sass
new file mode 100644
index 0000000000000000000000000000000000000000..1ad05c74953e36bd2f191988464d0b309f3246f2
--- /dev/null
+++ b/assets/sass/_theme/configuration/animations.sass
@@ -0,0 +1,3 @@
+// Animations
+$arrow-ease-transition: cubic-bezier(0, 0.65, 0.4, 1.2) !default
+$arrow-ease-transition-2: cubic-bezier(0, 0.65, 0.4, 1) !default
diff --git a/assets/sass/_theme/configuration/blocks.sass b/assets/sass/_theme/configuration/blocks.sass
new file mode 100644
index 0000000000000000000000000000000000000000..25331466971a38677f679488fd381897570e1bb0
--- /dev/null
+++ b/assets/sass/_theme/configuration/blocks.sass
@@ -0,0 +1,105 @@
+// HEADING
+// Under desktop breakpoint
+$heading-margin-top: $spacing-4 !default
+$heading-margin-bottom: $spacing-2 !default
+// Upper desktop breakpoint without sidebar
+$heading-margin-top-desktop: $spacing-6 !default
+$heading-margin-bottom-desktop: $spacing-3 !default
+// Upper desktop breakpoint with sidebar
+$heading-margin-top-with-sidebar: $spacing-6 !default
+$heading-margin-bottom-with-sidebar: $spacing-3 !default
+
+// BLOCKS
+// Base
+
+// Under desktop breakpoint
+$block-space-y: $spacing-4 !default
+// Upper desktop breakpoint without sidebar
+$block-space-y-desktop: $spacing-5 !default
+// Upper desktop breakpoint with sidebar
+$block-space-y-with-sidebar: $spacing-5 !default
+
+// Block call to action
+$block-call-to-action-background: var(--color-accent) !default
+$block-call-to-action-color: var(--color-background) !default
+$block-call-to-action-button-background: var(--color-background) !default
+$block-call-to-action-button-color: var(--color-text) !default
+$block-call-to-action-button-hover-background: var(--color-text-alt) !default
+$block-call-to-action-button-hover-color: var(--color-background) !default
+
+// Block chapter
+$block-chapter-layout-accent-background: var(--color-accent) !default
+$block-chapter-layout-accent-color: var(--color-background) !default
+$block-chapter-layout-alt-background: var(--color-background-alt) !default
+$block-chapter-layout-alt-color: var(--color-text) !default
+
+// Block definitions
+$block-definition-border-color: var(--color-border) !default
+$block-definition-border-color-hovered: var(--color-accent) !default
+$block-definition-color-hovered: var(--color-accent) !default
+$block-definition-font-size: $body-size !default
+$block-definition-font-size-desktop: $body-size-desktop !default
+
+// Block pages
+$block-pages-card-background: var(--color-background-alt) !default
+$block-pages-card-page-background: var(--color-background) !default
+$block-pages-card-page-color: var(--color-text) !default
+$block-pages-card-page-background-hover: var(--color-accent) !default
+$block-pages-card-page-color-hover: var(--color-background) !default
+
+// Block posts
+$block-posts-grid-columns: 3 !default
+
+// Block programs
+$block-programs-aspect-ratio: 16/9 !default
+
+// Block timeline
+$block-timeline-horizontal-background: var(--color-background-alt) !default
+$block-timeline-horizontal-color: var(--color-text) !default
+
+// Block testimonials
+$block-testimonials-xl-font-size: $quote-size-desktop-short !default
+$block-testimonials-xl-line-height: $quote-line-height !default
+$block-testimonials-xl-font-size-long-text: $quote-size-desktop-long !default
+$block-testimonials-xl-line-height-long-text: $quote-line-height !default
+$block-testimonials-color: var(--color-accent) !default
+$block-testimonials-font-family: $quote-font-family !default
+$block-testimonials-font-size: $quote-size !default
+$block-testimonials-line-height: $quote-line-height !default
+$block-testimonials-style: $quote-style !default
+$block-testimonials-pagination-background: var(--color-border) !default
+$block-testimonials-pagination-progress-background: var(--color-accent) !default
+
+// Block key_figures
+
+// TODO : overkill ?
+$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-image-max-width: $spacing-6 !default
+
+$block-key_figures-font-size: pxToRem(16) !default
+$block-key_figures-number-font-size: pxToRem(32) !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: 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: pxToRem(60) !default
+
+$block-key_figures-font-size-xxl: $block-key_figures-font-size-xl !default
+$block-key_figures-number-font-size-xxl: pxToRem(80) !default
+
+// Block gallery
+$block-gallery-carousel-background: var(--color-background-alt) !default
+$block-gallery-carousel-max-height: 70vh !default
+
+// Block image
+$block-image-max-height-with-sidebar: calc(100vh - var(--header-height)) !default
+$block-image-max-height-without-sidebar: none !default
+
+// Block video
+$block-video-background: var(--color-background-alt) !default
diff --git a/assets/sass/_theme/configuration/colors.sass b/assets/sass/_theme/configuration/colors.sass
new file mode 100644
index 0000000000000000000000000000000000000000..156a5fc3c3c1d06a2e35807a9527399c15677bfb
--- /dev/null
+++ b/assets/sass/_theme/configuration/colors.sass
@@ -0,0 +1,24 @@
+// MAIN COLORS
+$color-accent: #0038FF !default
+$color-text: #000000 !default
+$color-text-alt: #454545 !default
+$color-background: #FFFFFF !default
+$color-background-alt: #F2F2F2 !default
+$color-border: rgba(0, 0, 0, 0.30) !default
+$color-selection: $color-background !default
+$color-selection-background: rgba($color-text, .7) !default
+
+// Scheme Dark colors (enable dark mode in your hugo configuration file)
+$has-dark-mode: false !default
+$color-dark-accent: rgb(120, 208, 255) !default
+$color-dark-text: #ffffff !default
+$color-dark-text-alt: #cbcbcb !default
+$color-dark-background: #000000 !default
+$color-dark-background-alt: #181919 !default
+$color-dark-border: rgba(255, 255, 255, 0.3) !default
+$color-dark-selection: $color-dark-background !default
+$color-dark-selection-background: rgba($color-dark-text, .7) !default
+
+$body-color: var(--color-text) !default
+$body-background-color: var(--color-background) !default
+$link-color: var(--color-text) !default
\ No newline at end of file
diff --git a/assets/sass/_theme/configuration/components.sass b/assets/sass/_theme/configuration/components.sass
new file mode 100644
index 0000000000000000000000000000000000000000..4d77d7bc8c63bae4c07d7d19f5b7a1fe6379be7a
--- /dev/null
+++ b/assets/sass/_theme/configuration/components.sass
@@ -0,0 +1,106 @@
+// Button
+$btn-font-family: $heading-font-family !default
+$btn-font-size: $meta-size !default
+$btn-font-size-desktop: $meta-size-desktop !default
+$btn-font-weight: normal !default
+$btn-text-transform: none !default
+$btn-color: var(--color-text) !default
+$btn-hover-color: var(--color-text) !default
+$btn-background: transparent !default
+$btn-hover-background: var(--color-background) !default
+$btn-border: pxToRem(1) solid var(--color-border) !default
+$btn-border-desktop: $btn-border !default
+$btn-border-radius: pxToRem(4) !default
+$btn-border-radius-desktop: $btn-border-radius !default
+$btn-padding: pxToRem(12) pxToRem(10) !default
+$btn-padding-desktop: pxToRem(18) pxToRem(16) !default
+$btn-min-width: pxToRem(100) !default
+$btn-min-width-desktop: pxToRem(190) !default
+
+// Chip
+$chip-background: var(--color-background) !default
+$chip-background-hover: var(--color-background-alt) !default
+$chip-border: 1px solid var(--color-border) !default
+$chip-border-radius: $btn-border-radius !default
+$chip-color: var(--color-text) !default
+
+// Form
+$form-btn-color: var(--color-background) !default
+$form-btn-background-color: var(--color-accent) !default
+$form-input-border-radius: 4px !default
+
+// Header
+$header-color: var(--color-text) !default
+$header-hover-color: var(--color-accent) !default // TODO : Réflechir à plus élégant / générique
+$header-background: var(--color-background-alt) !default
+$header-transition: 0.3s !default
+$header-dropdown-full: false !default
+$header-dropdown-background: $header-background !default
+$header-dropdown-color: $header-color !default
+$header-dropdown-transition: $header-transition !default
+$header-sticky-enabled: true !default
+$header-sticky-background: var(--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: 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
+$header-height-desktop: 96px !default
+$header-sticky-invert-logo: false !default
+$header-border-bottom-width: 1px !default
+
+// Navs
+$body-overlay-color: rgba(0, 0, 0, 0.3) !default
+
+// Footer
+$footer-color: var(--color-text) !default
+$footer-background-color: var(--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: pxToRem(32) !default
+$footer-text-hidden: false !default
+$dropdown-i18n-background-color: var(--color-background) !default
+$dropdown-i18n-color: var(--color-text) !default
+
+// Hero
+$hero-height: 300px !default
+$hero-height-desktop: 500px !default
+$hero-color: var(--color-text) !default
+$hero-background-color: var(--color-background-alt) !default
+$hero-credit-color: var(--color-text-alt) !default
+
+// Breadcrumb
+$breadcrumb-color: $hero-color !default
+$breadcrumb-color-active: $hero-color !default
+$breadcrumb-icon: "caret-right" !default
+$breadcrumb-icon-color: var(--color-text-alt) !default
+
+// System
+
+// Lightbox
+$lightbox-overlay-color: rgba(0, 0, 0, 0.90) !default
+$lightbox-backdrop: blur(16px) !default
+
+// Table of content
+$toc-color: var(--color-text) !default
+$toc-active-color: var(--color-accent) !default // TODO : checker ce que ça fait
+$toc-background-color: var(--color-background-alt) !default
+$toc-font-family: $body-font-family !default
+$toc-font-size: $body-size !default
+$toc-font-size-desktop: $body-size-desktop !default
+$toc-line-height: $body-line-height !default
+$toc-title-font-family: $meta-font-family !default
+$toc-title-font-size: $meta-size !default
+$toc-title-font-size-desktop: $meta-size-desktop !default
+$toc-sticky-transition: 0.4s
+$toc-overlay-color: $body-overlay-color !default
+
+// Table
+$table-head-font-size: $h4-size !default
+$table-head-font-size-desktop: $h4-size-desktop !default
+$table-body-size: $body-size !default
+$table-body-size-desktop: $body-size-desktop !default
\ No newline at end of file
diff --git a/assets/sass/_theme/configuration/icons.sass b/assets/sass/_theme/configuration/icons.sass
new file mode 100644
index 0000000000000000000000000000000000000000..0a0f0fc871b84e281a63f2b1c110f469f47b25f3
--- /dev/null
+++ b/assets/sass/_theme/configuration/icons.sass
@@ -0,0 +1,83 @@
+// Icons
+$icons: ()
+$icons: map-merge($icons, ("arrow": "\ff01"))
+$icons: map-merge($icons, ("arrow-raw": "\e93a"))
+$icons: map-merge($icons, ("arrow-first": "\e906"))
+$icons: map-merge($icons, ("arrow-last": "\e907"))
+$icons: map-merge($icons, ("arrow-left": "\ff02"))
+$icons: map-merge($icons, ("arrow-left-raw": "\e938"))
+$icons: map-merge($icons, ("arrow-next": "\e909"))
+$icons: map-merge($icons, ("arrow-previous": "\e908"))
+$icons: map-merge($icons, ("arrow-right": "\ff00"))
+$icons: map-merge($icons, ("arrow-right-raw": "\e939"))
+$icons: map-merge($icons, ("arrow-alt": "\e931"))
+$icons: map-merge($icons, ("arrow-alt-raw": "\e936"))
+$icons: map-merge($icons, ("burger": "\e902"))
+$icons: map-merge($icons, ("burger-close": "\e905"))
+$icons: map-merge($icons, ("caret": "\e904"))
+$icons: map-merge($icons, ("caret-raw": "\e940"))
+$icons: map-merge($icons, ("caret-bottom": "\e911"))
+$icons: map-merge($icons, ("caret-bottom-raw": "\e944"))
+$icons: map-merge($icons, ("caret-left": "\e912"))
+$icons: map-merge($icons, ("caret-left-raw": "\e942"))
+$icons: map-merge($icons, ("caret-top": "\e914"))
+$icons: map-merge($icons, ("caret-top-raw": "\e941"))
+$icons: map-merge($icons, ("caret-right": "\e913"))
+$icons: map-merge($icons, ("caret-right-raw": "\e943"))
+$icons: map-merge($icons, ("check": "\ff06"))
+$icons: map-merge($icons, ("check-inline": "\ff07"))
+$icons: map-merge($icons, ("check-inline-raw": "\e945"))
+$icons: map-merge($icons, ("close": "\e90e"))
+$icons: map-merge($icons, ("copy": "\ff03"))
+$icons: map-merge($icons, ("copy-raw": "\e946"))
+$icons: map-merge($icons, ("copy-inline": "\ff04"))
+$icons: map-merge($icons, ("download": "\e900"))
+$icons: map-merge($icons, ("download-inline": "\e92f"))
+$icons: map-merge($icons, ("download-raw": "\e937"))
+$icons: map-merge($icons, ("eye": "\e901"))
+$icons: map-merge($icons, ("facebook": "\e90b"))
+$icons: map-merge($icons, ("facebook-raw": "\e93e"))
+$icons: map-merge($icons, ("globe": "\ff10"))
+$icons: map-merge($icons, ("globe-raw": "\e934"))
+$icons: map-merge($icons, ("instagram": "\e90a"))
+$icons: map-merge($icons, ("instagram-raw": "\e93b"))
+$icons: map-merge($icons, ("link-blank": "\e903"))
+$icons: map-merge($icons, ("link-blank-block": "\ff05"))
+$icons: map-merge($icons, ("link-blank-raw": "\e932"))
+$icons: map-merge($icons, ("linkedin": "\e90c"))
+$icons: map-merge($icons, ("linkedin-raw": "\e93c"))
+$icons: map-merge($icons, ("list-hyphen": "\e917"))
+$icons: map-merge($icons, ("list-hyphen-raw": "\e93f"))
+$icons: map-merge($icons, ("pause": "\e90f"))
+$icons: map-merge($icons, ("play": "\e910"))
+$icons: map-merge($icons, ("search": "\e916"))
+$icons: map-merge($icons, ("search-inline": "\ee13"))
+$icons: map-merge($icons, ("search-raw": "\e933"))
+$icons: map-merge($icons, ("social": "\e915"))
+$icons: map-merge($icons, ("social-raw": "\e935"))
+$icons: map-merge($icons, ("social-inline": "\e92e"))
+$icons: map-merge($icons, ("social-facebook": "\ee01"))
+$icons: map-merge($icons, ("social-instagram": "\ee02"))
+$icons: map-merge($icons, ("social-linkedin": "\ee03"))
+$icons: map-merge($icons, ("social-mastodon": "\ee04"))
+$icons: map-merge($icons, ("social-peertube": "\ee05"))
+$icons: map-merge($icons, ("social-rss": "\ee06"))
+$icons: map-merge($icons, ("social-tiktok": "\ee07"))
+$icons: map-merge($icons, ("social-vimeo": "\ee08"))
+$icons: map-merge($icons, ("social-x": "\ee09"))
+$icons: map-merge($icons, ("social-youtube": "\ee0a"))
+$icons: map-merge($icons, ("social-github": "\ee10"))
+$icons: map-merge($icons, ("social-email": "\ee11"))
+$icons: map-merge($icons, ("toc": "\e918"))
+$icons: map-merge($icons, ("twitter": "\e90d"))
+$icons: map-merge($icons, ("twitter-raw": "\e90d"))
+$icons: map-merge($icons, ("whatsapp": "\e919"))
+$icons: map-merge($icons, ("email": "\e920"))
+$icons: map-merge($icons, ("telegram": "\e921"))
+
+// Icons
+$icon-burger-margin-right: -12px
+$icon-close-margin-right: -12px
+$icon-toc-margin-right: -14px
+$icon-arrow-previous-margin-left: -18px // cf. testimonial
+$icon-social-margin-right: -14px
\ No newline at end of file
diff --git a/assets/sass/_theme/configuration/sections.sass b/assets/sass/_theme/configuration/sections.sass
new file mode 100644
index 0000000000000000000000000000000000000000..8d85e5a47f8f93f5d40132cb32e8043a49e86a23
--- /dev/null
+++ b/assets/sass/_theme/configuration/sections.sass
@@ -0,0 +1,22 @@
+// Sections
+$article-media-aspect-ratio: 2 !default
+
+$post-time-color: var(--color-text-alt) !default
+// Si layout posts grid (ne concerne pas les blocks posts)
+$posts-grid-columns: $block-posts-grid-columns !default
+
+// Person
+$persons-avatar-background-color: var(--color-background-alt) !default
+
+// Organization
+$organization-background-color: $color-background-alt !default // Use sass variable color-background To avoid dark logo on darkmode background-alt color
+
+// Project
+$project-infos-border-color: $color-border !default
+$project-infos-color-text: $color-text !default
+$project-infos-color-text-alt: $color-text-alt !default
+$project-infos-color-accent: $color-accent !default
+
+// Program
+$program-essential-font-size: $meta-size !default
+$program-essential-font-size-desktop: $meta-size-desktop !default
diff --git a/assets/sass/_theme/configuration/spacings.sass b/assets/sass/_theme/configuration/spacings.sass
new file mode 100644
index 0000000000000000000000000000000000000000..9358d34c229e7c7107002f8624d5c8648bde9d1d
--- /dev/null
+++ b/assets/sass/_theme/configuration/spacings.sass
@@ -0,0 +1,33 @@
+// Breakpoints
+// TODO: réécrire en sass les mixins bootstrap
+$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, desktop: 992px, lg: 992px, xl: 1200px, xxl: 1440px) !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
+$spacing-1: space(2) // 8px
+$spacing-2: space(3) // 12px
+$spacing-3: space(6) // 24px
+$spacing-4: space(12) // 48px
+$spacing-5: space(16) // 64px
+$spacing-6: space(32) // 128px
+$spacing-7: space(64) // 256px
+
+$minimum-accessible-size: pxToRem(44) !default
+
+// Z-index
+$zindex-nav-accessibility: 1010 !default
+$zindex-stretched-link: 2 !default
+$zindex-header: 52 !default
+$zindex-body-overlay: 51 !default
+$zindex-toc-offcanvas: 60 !default
+$zindex-toc: 50 !default
+$zindex-toc-cta: 49 !default
+$zindex-modal: 72 !default
+$zindex-aside: 48 !default
+$zindex-footer: 50 !default
\ No newline at end of file
diff --git a/assets/sass/_theme/configuration/typography.sass b/assets/sass/_theme/configuration/typography.sass
new file mode 100644
index 0000000000000000000000000000000000000000..c43edc029d52b8f811d2462e440e2f0fad35a095
--- /dev/null
+++ b/assets/sass/_theme/configuration/typography.sass
@@ -0,0 +1,131 @@
+// TYPOGRAPHY
+// Fonts family
+$body-font-family: "Baskerville", "Times New Roman", "Times", serif !default
+$heading-font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
+
+// Headings
+$heading-font-weight: normal !default
+
+// h1
+$h1-font-family: $heading-font-family !default
+$h1-size-desktop: pxToRem(60) !default
+$h1-size: pxToRem(30) !default
+$h1-line-height: 120% !default
+$h1-line-height-desktop: $h1-line-height !default
+$h1-weight: bold !default
+$h1-text-transform: none !default
+
+// h2
+$h2-font-family: $heading-font-family !default
+$h2-size-desktop: pxToRem(40) !default
+$h2-size: pxToRem(24) !default
+$h2-line-height: 120% !default
+$h2-line-height-desktop: $h2-line-height !default
+$h2-weight: $heading-font-weight !default
+$h2-text-transform: none !default
+
+// h3
+$h3-font-family: $heading-font-family !default
+$h3-size-desktop: pxToRem(28) !default
+$h3-size: pxToRem(20) !default
+$h3-line-height: 130% !default
+$h3-line-height-desktop: $h3-line-height !default
+$h3-weight: bold !default
+$h3-text-transform: none !default
+
+// h4
+$h4-font-family: $heading-font-family !default
+$h4-size-desktop: pxToRem(22) !default
+$h4-size: pxToRem(16) !default
+$h4-line-height: 130% !default
+$h4-line-height-desktop: $h4-line-height !default
+$h4-weight: bold !default
+$h4-text-transform: none !default
+
+// h5 or Section
+$h5-font-family: $heading-font-family !default
+$h5-size-desktop: pxToRem(24) !default
+$h5-size: pxToRem(20) !default
+$h5-line-height: 130% !default
+$h5-line-height-desktop: $h5-line-height !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: pxToRem(20) !default
+$h6-size: pxToRem(14) !default
+$h6-line-height: 130% !default
+$h6-line-height-desktop: $h6-line-height !default
+$h6-weight: $heading-font-weight !default
+$h6-text-transform: uppercase !default
+
+// Lead
+$lead-font-family: $heading-font-family !default
+$lead-size-desktop: pxToRem(60) !default
+$lead-size: pxToRem(24) !default
+$lead-line-height: 120% !default
+$lead-line-height-desktop: $lead-line-height !default
+$lead-weight: $heading-font-weight !default
+
+$lead-sidebar-font-family: $lead-font-family !default
+$lead-sidebar-size-desktop: pxToRem(32) !default
+$lead-sidebar-size: $lead-size !default
+$lead-sidebar-line-height: $lead-line-height !default
+$lead-sidebar-line-height-desktop: $lead-sidebar-line-height !default
+$lead-sidebar-weight: $lead-weight !default
+
+$lead-hero-font-family: $lead-sidebar-font-family !default
+$lead-hero-size: $lead-size !default
+$lead-hero-size-desktop: $lead-sidebar-size-desktop !default
+$lead-hero-line-height: $lead-sidebar-line-height !default
+$lead-hero-line-height-desktop: $lead-hero-line-height !default
+$lead-hero-weight: $lead-sidebar-weight !default
+
+// Body
+$body-size-desktop: pxToRem(22) !default
+$body-size: pxToRem(18) !default
+$body-line-height: 160% !default
+$body-line-height-desktop: $body-line-height !default
+$body-weight: normal !default
+
+// Small
+$small-font-family: $body-font-family !default
+$small-size-desktop: pxToRem(18) !default
+$small-size: pxToRem(14) !default
+$small-line-height: 130% !default
+$small-line-height-desktop: $small-line-height !default
+$small-weight: normal !default
+
+// Signature
+$signature-font-family: $heading-font-family !default
+$signature-size-desktop: pxToRem(22) !default
+$signature-size: pxToRem(18) !default
+$signature-line-height: 130% !default
+$signature-line-height-desktop: $signature-line-height !default
+$signature-weight: $heading-font-weight !default
+
+// Meta
+$meta-font-family: $heading-font-family !default
+$meta-size-desktop: pxToRem(16) !default
+$meta-size: pxToRem(14) !default
+$meta-line-height: 150% !default
+$meta-line-height-desktop: $meta-line-height !default
+$meta-weight: $heading-font-weight !default
+
+// Quotes
+$quote-font-family: $body-font-family !default
+$quote-size-desktop-short: pxToRem(60) !default
+$quote-size-desktop-long: pxToRem(40) !default
+$quote-size-desktop: pxToRem(40) !default
+$quote-size: pxToRem(24) !default
+$quote-line-height: 120% !default
+$quote-line-height-desktop: $quote-line-height !default
+$quote-weight: normal !default
+$quote-style: italic !default
+
+// Link
+$link-underline-offset: 0.2em !default
+$link-underline-thickness: 1px !default
+$link-transition: text-decoration-color .3s ease !default
+$link-unhover-decoration-color-alpha: 0.3 !default
diff --git a/assets/sass/_theme/design-system/table_of_contents.sass b/assets/sass/_theme/design-system/table_of_contents.sass
index 0c13d9c54c25b597b850820e75111632e0c2b21d..3082a0a96e1c2818a738c1aa12abb942b005738d 100644
--- a/assets/sass/_theme/design-system/table_of_contents.sass
+++ b/assets/sass/_theme/design-system/table_of_contents.sass
@@ -6,7 +6,7 @@
right: 0
bottom: 0
margin-top: 0
- z-index: $zindex-toc
+ z-index: $zindex-toc-offcanvas
width: calc(#{columns(4)} + var(--grid-gutter) * 2)
transform: translateX(100%)
transition: var(--toc-transition-duration) transform ease-in-out
@@ -131,6 +131,7 @@
height: 100%
position: absolute
width: columns(4)
+ z-index: $zindex-toc
.toc-content
overflow-y: auto
max-height: calc(100vh - var(--header-height))
diff --git a/assets/sass/_theme/sections/events.sass b/assets/sass/_theme/sections/events.sass
index 37842f429c0803c21086bbb9e10d67104fbdb7e2..b1fd27dbe2815431ba7001b12f4aea9f62108d75 100644
--- a/assets/sass/_theme/sections/events.sass
+++ b/assets/sass/_theme/sections/events.sass
@@ -220,7 +220,7 @@
display: flex
flex-direction: row
position: relative
- grid-gap: var(--grid-gutter)
+ gap: var(--grid-gutter)
+ .event
margin-top: var(--grid-gutter)
&-content
@@ -256,13 +256,9 @@
@include h2
@include media-breakpoint-down(desktop)
flex-direction: column
- grid-gap: 0
.media
margin-left: var(--grid-gutter-negative)
margin-right: var(--grid-gutter-negative)
- aspect-ratio: 1
- img
- margin-bottom: $spacing-2
@include in-page-without-sidebar
align-items: center
&-dates
diff --git a/config.yaml b/config.yaml
index bb7e4ba5d4b336e5adfb5b3b394f2570860b0b4e..f15d1716ba48326e3347f9123a913bc3217155ee 100644
--- a/config.yaml
+++ b/config.yaml
@@ -195,6 +195,10 @@ params:
mobile: 170
tablet: 350
desktop: 415
+ large:
+ mobile: 400
+ tablet: 800
+ desktop: 1920
programs:
mobile: 400
tablet: 800
diff --git a/layouts/partials/blocks/templates/definitions.html b/layouts/partials/blocks/templates/definitions.html
index 64a79a9fc914fd145ad62fea0563e178eaaa8d5e..d61c4ac01e40d80819a2eb1c6eae620bc502bd22 100644
--- a/layouts/partials/blocks/templates/definitions.html
+++ b/layouts/partials/blocks/templates/definitions.html
@@ -8,6 +8,7 @@
{{ partial "blocks/top.html" (dict
"title" $block.title
"heading_level" $block.ranks.self
+ "description" .description
)}}
<div class="definitions">
{{- range .elements }}
diff --git a/layouts/partials/blocks/templates/gallery.html b/layouts/partials/blocks/templates/gallery.html
index c9777aaafc0c754c0dc7cea8587c938c294a5cec..c740d848bb53ceaf2d24840787b4850df71f3d4d 100644
--- a/layouts/partials/blocks/templates/gallery.html
+++ b/layouts/partials/blocks/templates/gallery.html
@@ -14,6 +14,8 @@
{{- if eq $layout "carousel" -}}
{{ partial "blocks/templates/gallery/carousel" . }}
+ {{- else if eq $layout "large" -}}
+ {{ partial "blocks/templates/gallery/large" . }}
{{- else -}}
{{ partial "blocks/templates/gallery/grid" . }}
{{- end -}}
diff --git a/layouts/partials/blocks/templates/gallery/large.html b/layouts/partials/blocks/templates/gallery/large.html
new file mode 100644
index 0000000000000000000000000000000000000000..742b6f5a945554aaa321f075f1d043e08c93e32a
--- /dev/null
+++ b/layouts/partials/blocks/templates/gallery/large.html
@@ -0,0 +1,44 @@
+<div class="gallery">
+ {{ range .images }}
+ {{ if .id }}
+ {{- $image := partial "GetMedia" .id -}}
+ {{- $image_class := printf "image-%s" (partial "GetImageDirection" .) -}}
+ {{- if $image -}}
+ <figure class="{{ $image_class }}">
+ {{ partial "commons/image.html"
+ (dict
+ "image" .file
+ "alt" .alt
+ "sizes" site.Params.image_sizes.blocks.gallery.large
+ )}}
+ {{ if not site.Params.image_sizes.design_system.lightbox.disabled }}
+ {{ $lightbox_text := false }}
+ {{ if and .text .credit }}
+ {{ $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; {{ with $lightbox_text }}description: {{ . | safeHTML }}{{ end }}"
+ href="{{ partial "GetLightboxUrl" (dict "id" .id) }}"
+ title="{{- i18n "commons.lightbox.link.title" -}}"
+ aria-label="{{- i18n "commons.lightbox.link.title" -}}">
+ </a>
+ {{ end }}
+ {{ if or .text .credit }}
+ <figcaption>
+ {{ with .text }}
+ <p>{{ . | safeHTML }}</p>
+ {{ end }}
+ {{ with .credit }}
+ <div class="credit">{{ . | safeHTML }}</div>
+ {{ end }}
+ </figcaption>
+ {{ end }}
+ </figure>
+ {{- end -}}
+ {{ end }}
+ {{ end }}
+</div>