Merge pull request #364 from thec4aa/develop

fix: style captions #349
thec4aa · Jul 29, 2024 · 0f0d0bf · 0f0d0bf
2 parents e7b2e20 + 143593d
commit 0f0d0bf
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 3 deletions.
diff --git a/js/clipPaths.js b/js/clipPaths.js
@@ -68,7 +68,7 @@ function addBlockClipPaths ( selector ) {
 
 // selector for elements
 const randomRotationElements = document.querySelectorAll(
-	'article.type-people .entry-content .wp-block-advanced-columns-column__inner figure img, .u-rotate-random, .is-style-rotate-random'
+	'article.type-people .entry-content .wp-block-advanced-columns-column__inner figure img, .u-rotate-random, .is-style-rotate-random, figcaption.wp-element-caption'
   );
 
 // Apply random rotation to each element

diff --git a/src/css/_02-elements.scss b/src/css/_02-elements.scss
@@ -1050,6 +1050,33 @@ figure[class*="wp-duotone"]:not(.u-duotone-sticky) img:hover {
     transition: transform 50ms ease-out;
 }
 
+/* CAPTIONS */
+
+.wp-block-image figcaption.wp-element-caption {
+    font-size: 1rem !important;
+    font-weight: 500;
+    background: var(--color-brandBeige);
+    color: var(--color-brandGrey);
+    width: fit-content;
+    margin: auto !important;
+    top: -.8rem;
+    opacity: .95;
+    padding-left: 2.5rem !important;
+    padding-right: 3rem !important;
+  }
+
+.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
+    font-size: .9rem !important;
+    background: var(--color-brandBeige);
+    color: var(--color-brandGrey);
+    padding: .5rem 1rem .5rem 1rem !important;
+    height: fit-content;
+    opacity: .9;
+    top: 90%;
+    width: fit-content;
+    text-align: left;
+  }
+
 /**
 *
 * MISC

diff --git a/src/css/_03-generic.scss b/src/css/_03-generic.scss
@@ -298,7 +298,7 @@ header h1.entry-title {
 
 
 /*****************/
-// ? Updates: October 19, 2023
+// Menu Updates: 2023/2024
 /*****************/
 
 // No underlines on hover for menu items in general

diff --git a/src/css/_c4aa-imageFilter.scss b/src/css/_c4aa-imageFilter.scss
@@ -48,7 +48,7 @@
 
 // Force image caption to display on top of filtered images
 .wp-block-image figcaption {
-	background-color: inherit;
+	// background-color: inherit;
 	z-index: 1;
 	position: relative;
 }