From 8e73c9c441751bcc176aa8e0d2439878abd4b479 Mon Sep 17 00:00:00 2001
From: alexisben <alex@noesya.coop>
Date: Tue, 27 Dec 2022 12:38:11 +0100
Subject: [PATCH] refacto figcaption collapsed

---
 assets/sass/_theme/_utils.sass             | 36 +++++++++++++++++++++
 assets/sass/_theme/design-system/hero.sass | 37 ++--------------------
 2 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index bcbe4110..083b6dce 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -325,6 +325,42 @@
                 width: col(8)
                 margin-left: $grid-gutter
 
+@mixin collapsed-figcaption
+    figcaption
+        @include meta
+        color: $color-text-alt
+        position: absolute
+        display: block
+        left: 0
+        right: 0
+        z-index: 10
+        a
+            color: inherit
+        p
+            @include meta
+        &::before
+            @include meta
+            content: '©'
+            position: absolute
+            right: 0
+            top: 0
+            background: $color-background-alt
+            text-align: center
+            line-height: px2rem(30)
+            width: px2rem(30)
+            height: px2rem(30)
+            display: block
+        p
+            background: $color-background-alt
+            display: none
+            padding: half($spacing0)
+            padding-right: $spacing2
+        &:focus
+            p
+                display: block
+    &:hover
+        figcaption p
+            display: block
 // https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6
 @function str-replace($string, $search, $replace: "")
 	$index: str-index($string, $search)
diff --git a/assets/sass/_theme/design-system/hero.sass b/assets/sass/_theme/design-system/hero.sass
index ea71f085..57ef6ef5 100644
--- a/assets/sass/_theme/design-system/hero.sass
+++ b/assets/sass/_theme/design-system/hero.sass
@@ -25,41 +25,8 @@
             position: relative
             &, img, picture
                 display: block
-            figcaption
-                @include meta
-                position: absolute
-                display: block
-                left: 0
-                right: 0
-                z-index: 10
-                color: $color-text-alt
-                a
-                    color: inherit
-                p
-                    @include meta
-                &::before
-                    @include meta
-                    content: '©'
-                    position: absolute
-                    right: 0
-                    top: 0
-                    background: $color-background-alt
-                    text-align: center
-                    line-height: px2rem(30)
-                    width: px2rem(30)
-                    height: px2rem(30)
-                    display: block
-                p
-                    background: $color-background-alt
-                    display: none
-                    padding: half($spacing0)
-                    padding-right: $spacing2
-                &:focus
-                    p
-                        display: block
-            &:hover
-                figcaption p
-                    display: block
+            @include collapsed-figcaption
+
     nav + .content
         > h1, > hgroup
             padding-top: 0
-- 
GitLab