diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index b2dc585165f20e8c8f9197e97babacfff08132f0..0ea7656acb353deaea77d74553fdf810bc6b2ab3 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -16,48 +16,79 @@ $link-color: $main-color !default
// TYPOGRAPHY
// Fonts family
-// TODO: choisir typo system par défaut
$body-font-family: "Georgia", "Times", serif !default
$heading-font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
-// $font-size-base: 1rem
-$line-height-base: 1.4 !default
+// Base
+$font-size-base: 16px !default
+$line-height-base: 140% !default
-// Fonts sizes
-$body-font-size: px2rem(20) !default
-$body-font-size-md: $body-font-size !default
-$small-font-size: px2rem(14) !default
+// Headings
+$heading-font-weight: normal !default
+// h1
$h1-size-md: px2rem(60) !default
-$h2-size-md: px2rem(45) !default
-$h3-size-md: px2rem(30) !default
-$h4-size-md: px2rem(22) !default
-$h5-size-md: px2rem(20) !default
-$h6-size-md: px2rem(18) !default
-
$h1-size: px2rem(30) !default
-$h2-size: px2rem(24) !default
-$h3-size: px2rem(20) !default
-$h4-size: px2rem(18) !default
-$h5-size: px2rem(18) !default
-$h6-size: px2rem(16) !default
-
-// Line-height
$h1-line-height: 120% !default
-$h2-line-height: 110% !default
-$h3-line-height: 110% !default
-$h4-line-height: 130% !default
-
-// Font weight
-$heading-font-weight: normal !default
-
$h1-weight: $heading-font-weight !default
+
+// h2
+$h2-size-md: px2rem(45) !default
+$h2-size: px2rem(24) !default
+$h2-line-height: 110% !default
$h2-weight: $heading-font-weight !default
+
+// h3
+$h3-size-md: px2rem(30) !default
+$h3-size: px2rem(20) !default
+$h3-line-height: 110% !default
$h3-weight: $heading-font-weight !default
+
+// h4
+$h4-size-md: px2rem(22) !default
+$h4-size: px2rem(18) !default
+$h4-line-height: 130% !default
$h4-weight: $heading-font-weight !default
+
+// h5 or Section
+$h5-size-md: px2rem(20) !default
+$h5-size: px2rem(18) !default
$h5-weight: $heading-font-weight !default
+
+// h6 or Tab
+$h6-size-md: px2rem(18) !default
+$h6-size: px2rem(16) !default
$h6-weight: $heading-font-weight !default
+// Body
+$body-font-size: px2rem(20) !default
+$body-font-size-md: $body-font-size !default
+
+// Small
+$small-font-size: px2rem(14) !default
+
+// Lead
+$lead-font-family: $heading-font-family !default
+$lead-size-md: px2rem(60) !default
+$lead-size: px2rem(24) !default
+$lead-line-height: 120% !default
+$lead-weight: $heading-font-weight !default
+
+// Signature
+$signature-font-family: $heading-font-family !default
+$signature-size-md: px2rem(22)
+$signature-size: px2rem(18)
+$signature-line-height: 130% !default
+$signature-weight: $heading-font-weight !default
+
+// Meta
+$meta-font-family: $heading-font-family !default
+$meta-size-md: px2rem(18)
+$meta-size: px2rem(14)
+$meta-line-height: 150% !default
+$meta-weight: $heading-font-weight !default
+
+// Buttons
$btn-font-size: px2rem(18) !default
$btn-padding-x: px2rem(12) !default
$btn-padding-y: px2rem(6) !default
@@ -225,6 +256,9 @@ $block-key_figures-number-font-size-xl: px2rem(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 gallery
+$block-gallery-carousel-background: $main-light-color
+
// Sections
$article-title-size: $h4-size !default
$article-title-size-md: $h4-size-md !default
diff --git a/assets/sass/_theme/blocks/gallery.sass b/assets/sass/_theme/blocks/gallery.sass
index 341bb5837d922a2e56808512bf0e92d075e89a6b..bc9e70608da7a789d07d671a8df570cea10dc672 100644
--- a/assets/sass/_theme/blocks/gallery.sass
+++ b/assets/sass/_theme/blocks/gallery.sass
@@ -1,10 +1,8 @@
.block-gallery
- .top
- @include grid(2, md)
- align-items: center
- .description
- width: col(7)
-
+ @include in-page-without-sidebar
+ .top
+ @include grid(2, md)
+ align-items: baseline
figure
display: block
margin-bottom: 0
@@ -12,6 +10,7 @@
img,
picture
display: block
+ margin-bottom: $spacing0
> a
transition: opacity .3s ease
&:hover
@@ -34,49 +33,64 @@
&--grid
.gallery
- @include grid(3, md)
+ align-items: baseline
+ @include in-page-with-sidebar
+ @include grid(3, md, calc(#{$grid-gutter} / 2), calc(#{$grid-gutter} / 2))
@include in-page-without-sidebar
- @include grid(5, md)
+ @include grid(4, md)
+ @include media-breakpoint-down(md)
+ @include grid(2)
+ grid-gap: calc(#{$grid-gutter-sm} / 2) !important
+ figure
+ &:after
+ content: 'Â ' // This is used to allow align baseline without figcaption
&--carousel
+ background: $block-gallery-carousel-background
+ padding-bottom: $grid-gutter
+ padding-top: $grid-gutter
+ .block-gallery + &,
+ .block-pages--cards + &
+ margin-top: 0
.container
padding-right: 0
+ .top
+ padding-right: calc(#{$grid-gutter-sm} / 2)
+ @include media-breakpoint-up(md)
+ padding-right: calc(#{$grid-gutter} / 2)
+
.splide
display: flex
flex-direction: column
&__slide
flex-shrink: initial
-
- figure // TODO : affichage écrasé
- max-width: 80%
- min-width: 80% // to check
- @include in-page-without-sidebar
- min-width: 50%
- // &:last-of-type
- // max-width: 100%
- // padding-right: 20%
+ &:last-child
+ min-width: 100%
+ padding-right: 20%
+ img
+ width: 100%
+ figure
+ margin-right: $grid-gutter
picture
- height: 50vh
- overflow: hidden // solution provisoire : j'ai créé un masque avec le picture
- width: 100%
- @media (min-height: 800px)
- height: 680px
- max-height: 100%
img
+ max-height: 70vh
+ width: auto
height: auto
- width: 100%
- @media (min-height: 800px)
- height: 100%
- max-width: unset
+ max-width: calc(100vw - #{$grid-gutter-sm} * 2)
+ @include media-breakpoint-up(md)
+ picture
+ img
+ max-height: 70vh
width: auto
- // @include media-breakpoint-up(md)
- // height: 100%
- // max-height: 45vh
- // min-height: 45vh
-
- p
- @media (min-height: 800px)
- font-size: px2rem(16)
+ height: auto
+ max-width: 50vw
+ @include in-page-without-sidebar
+ height: 70vh
+ max-width: none
+ figcaption
+ display: flex
+ justify-content: space-between
+
&__arrows
margin-left: -13px
order: 2
@@ -95,3 +109,10 @@
display: none
&--next
@include icon("arrow-right", before)
+ @include in-page-without-sidebar
+ .splide
+ &__slide
+ &:first-child
+ margin-left: $grid-gutter
+ &__track
+ margin-left: -$grid-gutter
\ No newline at end of file
diff --git a/assets/sass/_theme/design-system/typography.sass b/assets/sass/_theme/design-system/typography.sass
index 5d650a3c8c3e1d102cbe8d7a5ab82fef2ef5f602..0a1675d251ac709314f878a47f4be48dd190a7c6 100644
--- a/assets/sass/_theme/design-system/typography.sass
+++ b/assets/sass/_theme/design-system/typography.sass
@@ -10,7 +10,7 @@ h1, .h1
@include media-breakpoint-up(md)
font-size: $h1-size-md
-h2, .h2, .lead
+h2, .h2
@extend %heading
font-size: $h2-size
font-weight: $h2-weight
@@ -51,6 +51,15 @@ h2, .h2
&:hover
text-decoration-thickness: 1px
+.lead
+ margin-top: 0
+ font-family: $lead-font-family
+ font-size: $lead-size
+ font-weight: $lead-weight
+ line-height: $lead-line-height
+ @include media-breakpoint-up(md)
+ font-size: $lead-size-md
+
[itemprop="articleBody"]
h1, h2, h3, h4, h5, h6
margin-block-start: 2em
@@ -73,6 +82,10 @@ li, .li
small, .small
font-size: $small-font-size
+p
+ margin-top: 0
+ margin-bottom: 0
+
blockquote, .blockquote
margin: 0
cite
diff --git a/layouts/partials/blocks/templates/gallery/layout-carousel.html b/layouts/partials/blocks/templates/gallery/layout-carousel.html
index 9a750e13ba39fbd13fdfd6fe1b37456d1093e459..5b480ddf3042209c0713236c1779c0887fb6887e 100644
--- a/layouts/partials/blocks/templates/gallery/layout-carousel.html
+++ b/layouts/partials/blocks/templates/gallery/layout-carousel.html
@@ -4,7 +4,7 @@
{{ end }}
{{- if $is_carousel }}
-<div class="splide" role="group" data-splide='{"arrows":true,"gap":"24px","pagination":false,"autoWidth":true,"autoplay":false}'>
+<div class="splide" role="group" data-splide='{"arrows":true,"pagination":false,"autoWidth":true,"autoplay":false}'>
<div class="splide__track">
<div class="splide__list">
{{ end -}}
@@ -21,7 +21,7 @@
{{- $lightbox_sizes := "1280x2560" -}}
<figure{{ if $is_carousel }} class="splide__slide"{{ end }}>
<a class="glightbox"
- data-glightbox="type: image;"
+ data-glightbox="type: image;{{ if .credit }}description: {{ partial "PrepareHTML" .credit }}{{ end }}"
href="{{ partial "GetImageUrl" (dict "url" $url "size" $lightbox_sizes ) }}">
{{ partial "commons/image.html"
(dict
@@ -32,20 +32,23 @@
"desktop" "967x679"
)}}
</a>
- <figcaption>
- {{ if .text }}
- <p>{{ partial "PrepareHTML" .text }}</p>
- {{ end }}
- {{ if .credit }}
- <p class="credit">{{ partial "PrepareHTML" .credit }}</p>
- {{ end }}
- </figcaption>
+ {{ if or .text .credit }}
+ <figcaption>
+ {{ if .text }}
+ <div>{{ partial "PrepareHTML" .text }}</div>
+ {{ end }}
+ {{ if .credit }}
+ <div class="credit">{{ partial "PrepareHTML" .credit }}</div>
+ {{ end }}
+ </figcaption>
+ {{ end }}
</figure>
{{- end -}}
{{ end }}
{{ end }}
{{- if $is_carousel }}
+ </div>
</div>
</div>
{{ end -}}
diff --git a/layouts/partials/blocks/templates/gallery/layout-grid.html b/layouts/partials/blocks/templates/gallery/layout-grid.html
index 577e6a301f79c51237fa6fbddc203a203bbe7059..492af5b808e8b272205028432ae3c2ba986a113a 100644
--- a/layouts/partials/blocks/templates/gallery/layout-grid.html
+++ b/layouts/partials/blocks/templates/gallery/layout-grid.html
@@ -22,11 +22,11 @@
"desktop" "416"
)}}
</a>
- <figcaption>
- {{ if .text }}
- <p>{{ partial "PrepareHTML" .text }}</p>
- {{ end }}
- </figcaption>
+ {{ if .text }}
+ <figcaption>
+ {{- partial "PrepareHTML" .text -}}
+ </figcaption>
+ {{ end }}
</figure>
{{- end -}}
{{ end }}
diff --git a/layouts/partials/footer/debug.html b/layouts/partials/footer/debug.html
index 9eeaeea30355fbd733ca1c95f1a1187ddac3230e..cb0f3ea2d6d08aef5b32ea6f2138823d2b8951e7 100644
--- a/layouts/partials/footer/debug.html
+++ b/layouts/partials/footer/debug.html
@@ -108,5 +108,8 @@
document.querySelector('.d-grid').classList.toggle('is-visible');
document.querySelector('.d-spacing').classList.toggle('is-visible');
}
+ if (e.ctrlKey && e.key === 'w') {
+ document.body.classList.toggle('full-width');
+ }
});
</script>
\ No newline at end of file