diff --git a/assets/sass/_theme/blocks/definitions.sass b/assets/sass/_theme/blocks/definitions.sass
index f8a48ff4fcf702518593c9a1defa00032ec2b3be..91ea486ced1b128ccf602b58d030de774338e85b 100644
--- a/assets/sass/_theme/blocks/definitions.sass
+++ b/assets/sass/_theme/blocks/definitions.sass
@@ -1,44 +1,17 @@
-// TODO : gérer les spacing
.block-definitions
details
&:not([open]):hover
&::after
border-bottom-color: $definition-border-color-hovered
- summary::after
- transform: translateY(5px)
- summary, p
- // font-size: px2rem(20)
- // line-height: px2rem(30)
+ summary,
+ p
+ font-size: px2rem(20)
+ line-height: px2rem(30)
&::after
- content: ''
+ content: ""
border-bottom: 1px solid $definition-border-color
display: block
transition: border-color 0.5s
-
- summary
- // padding-bottom: px2rem(15)
- // padding-top: px2rem(20)
- position: relative
- display: flex
- justify-content: space-between
- align-items: baseline
- @include icon("caret", after)
- &::after
- font-size: px2rem(5)
- line-height: px2rem(22)
- transition: transform 0.25s
- &::marker
- content: none
- &::-webkit-details-marker
- display: none
- details[open]
- summary
- @include icon("caret-top", after)
- &:hover
- summary::after
- transform: translateY(-5px)
-
-
@include in-page-without-aside
.definitions
- @include grid(2, md)
\ No newline at end of file
+ @include grid(2, md)
diff --git a/assets/sass/_theme/blocks/video.sass b/assets/sass/_theme/blocks/video.sass
index 3681d9d500ae4b79ee2d5d7bf56bf4fc434d00b9..c05b1e94560ed82fb8ff05af556ee8a77b7ca57e 100644
--- a/assets/sass/_theme/blocks/video.sass
+++ b/assets/sass/_theme/blocks/video.sass
@@ -3,8 +3,6 @@
.block-video
.video
@include aspect-ratio(16, 9, 'iframe')
- .transcription
- margin-top: $spacing1
// @include media-breakpoint-up(md)
// @include in-page-without-aside
diff --git a/assets/sass/_theme/design-system/a11y.sass b/assets/sass/_theme/design-system/a11y.sass
index 0ce6576526745401209d2d0b15eed8eecfe5e7f9..5de0eded2ee5f7f1790d2408ac131880851be4e4 100644
--- a/assets/sass/_theme/design-system/a11y.sass
+++ b/assets/sass/_theme/design-system/a11y.sass
@@ -12,9 +12,6 @@
transform: translateY(0)
.transcription
- button
- @include icon("caret-bottom", after)
- @include button-reset
- &::after
- font-size: px2rem(5)
- line-height: px2rem(22)
+ summary
+ text-align: right
+
diff --git a/assets/sass/_theme/design-system/hero.sass b/assets/sass/_theme/design-system/hero.sass
index eb1d75ed30de1476295efb4c680db2a9626a6642..54c74ce47a290448462787142ff9de67da8ca70e 100644
--- a/assets/sass/_theme/design-system/hero.sass
+++ b/assets/sass/_theme/design-system/hero.sass
@@ -3,7 +3,6 @@
background-color: $hero-background-color
color: $hero-color
display: flex
- margin-bottom: 3rem
min-height: $hero-height
overflow: hidden
padding-bottom: 2rem
diff --git a/assets/sass/_theme/design-system/image.sass b/assets/sass/_theme/design-system/image.sass
new file mode 100644
index 0000000000000000000000000000000000000000..196975849e3191138ad5c3202e62cef61671d8c3
--- /dev/null
+++ b/assets/sass/_theme/design-system/image.sass
@@ -0,0 +1,20 @@
+figure
+ margin: 0
+
+img
+ max-width: 100%
+ height: auto
+ &::selection
+ background: transparent
+
+.featured-image
+ margin-bottom: 3rem
+ img
+ height: auto
+ width: 100%
+ figcaption
+ margin-top: px2rem(10)
+ text-align: right
+ &,
+ p
+ @extend .small
diff --git a/assets/sass/_theme/design-system/layout.sass b/assets/sass/_theme/design-system/layout.sass
index 1191a9bbac067fb7817a6582caf228e52bdbece3..2e23dcc9b6d4bfb1f11b302587e6ac5f856aeb89 100644
--- a/assets/sass/_theme/design-system/layout.sass
+++ b/assets/sass/_theme/design-system/layout.sass
@@ -22,23 +22,35 @@ main
@include media-breakpoint-down(md)
padding-top: var(--header-height)
-figure
- margin: 0
-img
- max-width: 100%
- height: auto
- &::selection
- background: transparent
-
.container
@include container
ul
padding-left: px2rem(15)
-main
- padding-bottom: $spacing3
-
.blocks
> *
margin-top: $spacing3
+
+details
+ &:not([open]):hover
+ summary::after
+ transform: translateY(5px)
+ summary
+ padding-bottom: $spacing1
+ padding-top: $spacing1
+ position: relative
+ @include icon(caret, after, px2rem(5))
+ margin-left: px2rem(10)
+ line-height: px2rem(22)
+ transition: transform 0.25s
+ &::marker
+ content: none
+ &::-webkit-details-marker
+ display: none
+ &[open]
+ summary
+ @include icon(caret-top, after, px2rem(5))
+ &:hover
+ summary::after
+ transform: translateY(-5px)
\ No newline at end of file
diff --git a/assets/sass/_theme/hugo-osuny.sass b/assets/sass/_theme/hugo-osuny.sass
index 5a0478d2b70d242ffa897f7bcb4c2fc44d2f97df..7e5d7364e7880c3db0cbc9705d478f0e5f3e8437 100644
--- a/assets/sass/_theme/hugo-osuny.sass
+++ b/assets/sass/_theme/hugo-osuny.sass
@@ -20,6 +20,7 @@
@import "design-system/grid"
@import "design-system/header"
@import "design-system/hero"
+@import "design-system/image"
@import "design-system/pagination"
@import "design-system/nav"
@import "design-system/table"
diff --git a/layouts/partials/commons/transcription.html b/layouts/partials/commons/transcription.html
index c05e5d379fee1d6ac4aa9e2a318b6d5b063cd83c..fb2908e6a1871ff1a32d711941837b34d1a332d1 100644
--- a/layouts/partials/commons/transcription.html
+++ b/layouts/partials/commons/transcription.html
@@ -1,21 +1,11 @@
{{ if (partial "GetTextFromHTML" .transcription) }}
<div class="transcription">
- <div class="top">
- <button
- type="button"
- data-bs-toggle="collapse"
- data-bs-target="#transcription-{{ .position }}"
- aria-expanded="false"
- aria-controls="transcription-{{ .position }}"
- aria-label="{{ i18n "commons.accessibility.transcription" }}">
- {{ i18n "commons.accessibility.transcription" }}
- </button>
- </div>
- <div class="transcription-content collapse" id="transcription-{{ .position }}">
+ <details>
+ <summary>{{ i18n "commons.accessibility.transcription" }}</summary>
<p>
{{- $transcription := partial "PrepareHTML" .transcription -}}
{{ safeHTML (replace $transcription "\n" "<br/>") }}
</p>
- </div>
+ </details>
</div>
{{ end }}