refacto figcaption collapsed

osunyorg · Dec 27, 2022 · 8e73c9c · 8e73c9c
1 parent 1c0dcfd
commit 8e73c9c
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 35 deletions.
diff --git 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
@@ -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