transcription

assets/sass/_theme/blocks/definitions.sass

-// 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)
+            @include grid(2, md)
\ No newline at end of file

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

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
+

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

assets/sass/_theme/design-system/image.sass

+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

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

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"

layouts/partials/commons/transcription.html

 {{ 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 }}