From ca8ddea7fbf28acdb91620485685abbfd6a90bad Mon Sep 17 00:00:00 2001
From: alexisben <alexiben7@gmail.com>
Date: Tue, 2 Aug 2022 15:40:35 +0200
Subject: [PATCH] transcription
---
assets/sass/_theme/blocks/definitions.sass | 39 +++-----------------
assets/sass/_theme/blocks/video.sass | 2 -
assets/sass/_theme/design-system/a11y.sass | 9 ++---
assets/sass/_theme/design-system/hero.sass | 1 -
assets/sass/_theme/design-system/image.sass | 20 ++++++++++
assets/sass/_theme/design-system/layout.sass | 34 +++++++++++------
assets/sass/_theme/hugo-osuny.sass | 1 +
layouts/partials/commons/transcription.html | 16 ++------
8 files changed, 56 insertions(+), 66 deletions(-)
create mode 100644 assets/sass/_theme/design-system/image.sass
diff --git a/assets/sass/_theme/blocks/definitions.sass b/assets/sass/_theme/blocks/definitions.sass
index f8a48ff4..91ea486c 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 3681d9d5..c05b1e94 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 0ce65765..5de0eded 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 eb1d75ed..54c74ce4 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 00000000..19697584
--- /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 1191a9bb..2e23dcc9 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 5a0478d2..7e5d7364 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 c05e5d37..fb2908e6 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 }}
--
GitLab