浏览代码

Update the aside caption block style so it doesn't rely on a strong tag

Ben Dwyer 4 年之前
父节点
当前提交
29a9c7bffc
共有 2 个文件被更改,包括 40 次插入25 次删除
  1. 18 10
      skatepark/assets/theme.css
  2. 22 15
      skatepark/sass/block-styles/_image-caption.scss

+ 18 - 10
skatepark/assets/theme.css

@@ -177,22 +177,30 @@
 	--wp--custom--button--spacing--padding--bottom: 0.5em;
 }
 
-.is-style-skatepark-aside-caption figcaption {
+.is-style-skatepark-aside-caption {
+	align-items: center;
 	display: flex;
-	justify-content: flex-end;
-	margin: 20px auto 0;
-	padding-left: var(--wp--custom--post-content--padding--left);
-	padding-right: var(--wp--custom--post-content--padding--right);
-	max-width: calc( var(--wp--custom--layout--wide-size) + var(--wp--custom--post-content--padding--left) + var(--wp--custom--post-content--padding--right));
+	flex-direction: column;
+}
+
+.is-style-skatepark-aside-caption img {
+	justify-self: center;
 }
 
-.is-style-skatepark-aside-caption figcaption strong {
+.is-style-skatepark-aside-caption figcaption {
+	align-self: flex-end;
+	border-top: 3px solid var(--wp--preset--color--primary);
+	font-size: var(--wp--preset--font-size--small);
+	margin-bottom: 0;
+	margin-top: 20px;
 	padding-top: 20px;
 	max-width: 455px;
 	text-align: left;
-	border-top: 3px solid var(--wp--preset--color--primary);
-	font-size: var(--wp--preset--font-size--small);
-	font-weight: normal;
+}
+
+.is-style-skatepark-aside-caption.alignfull figcaption {
+	margin-left: var(--wp--custom--post-content--padding--left);
+	margin-right: var(--wp--custom--post-content--padding--right);
 }
 
 h1.is-style-skatepark-heading-border, h2.is-style-skatepark-heading-border, h3.is-style-skatepark-heading-border, h4.is-style-skatepark-heading-border, h5.is-style-skatepark-heading-border, h6.is-style-skatepark-heading-border {

+ 22 - 15
skatepark/sass/block-styles/_image-caption.scss

@@ -1,18 +1,25 @@
 .is-style-skatepark-aside-caption {
+	align-items: center;
+	display: flex;
+	flex-direction: column;
+
+	img {
+		justify-self: center;
+	}
+
 	figcaption {
-		display: flex;
-		justify-content: flex-end;
-		margin: 20px auto 0;
-		padding-left: var(--wp--custom--post-content--padding--left);
-		padding-right: var(--wp--custom--post-content--padding--right);
-		max-width: calc( var(--wp--custom--layout--wide-size) + var(--wp--custom--post-content--padding--left) + var(--wp--custom--post-content--padding--right));
-		strong {
-			padding-top: 20px;
-			max-width: 455px;
-			text-align: left;
-			border-top: 3px solid var(--wp--preset--color--primary);
-			font-size: var(--wp--preset--font-size--small);
-			font-weight: normal;
-		}
+		align-self: flex-end;
+		border-top: 3px solid var(--wp--preset--color--primary);
+		font-size: var(--wp--preset--font-size--small);
+		margin-bottom: 0;
+		margin-top: 20px;
+		padding-top: 20px;
+		max-width: 455px;
+		text-align: left;
+	}
+
+	&.alignfull figcaption {
+		margin-left: var(--wp--custom--post-content--padding--left);
+		margin-right: var(--wp--custom--post-content--padding--right);
 	}
-}
+}