瀏覽代碼

Skatepark: Adjust spacing for paragraph with quote

Sarah Norris 3 年之前
父節點
當前提交
646356a8a0

+ 14 - 1
skatepark/assets/theme.css

@@ -322,7 +322,7 @@
 	/* Needs .wp-block-quote class to override editor styles */
 	border: 0;
 	box-shadow: inset 0px 3px 0px 0px var(--wp--custom--color--primary);
-	margin: calc( var(--wp--custom--margin--vertical) * 1.11) 0;
+	margin: calc( var(--wp--custom--margin--vertical) * 1.5) 0;
 	padding: calc( var(--wp--custom--margin--baseline) * 1.35) 0 0 0;
 }
 
@@ -334,6 +334,7 @@
 
 .wp-block-quote.is-style-side-quote p, .wp-block-quote.is-style-side-quote div.block-editor-rich-text__editable {
 	font-size: var(--wp--preset--font-size--large);
+	line-height: 1.4em;
 	margin-bottom: calc( var(--wp--custom--margin--baseline) * 0.68);
 }
 
@@ -351,6 +352,18 @@
 	--wp--custom--button--spacing--padding--bottom: 0.5em;
 }
 
+.paragraph-with-quote .paragraph-column h4 {
+	margin: 0 0 calc( var(--wp--custom--margin--vertical) * 0.89) 0;
+}
+
+.paragraph-with-quote .paragraph-column > p:first-of-type {
+	text-indent: 9.15em;
+}
+
+.paragraph-with-quote .paragraph-column p {
+	margin: calc( var(--wp--custom--margin--baseline) * 1.55) 0 0 0;
+}
+
 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 {
 	display: inline-block;
 	border-top: 2px solid var(--wp--custom--color--primary);

+ 2 - 2
skatepark/inc/patterns/paragraph-with-quote.php

@@ -8,12 +8,12 @@
 return array(
 	'title'      => __( 'Paragraph with quote', 'skatepark' ),
 	'categories' => array( 'skatepark' ),
-	'content'    => '<!-- wp:columns {"align":"wide"} -->
+	'content'    => '<!-- wp:columns {"align":"wide","className":"paragraph-with-quote"} -->
 	<div class="wp-block-columns"><!-- wp:column {"width":"25%"} -->
 	<div class="wp-block-column" style="flex-basis:25%"></div>
 	<!-- /wp:column -->
 	
-	<!-- wp:column {"width":"50%"} -->
+	<!-- wp:column {"width":"50%","className":"paragraph-column"} -->
 	<div class="wp-block-column" style="flex-basis:50%"><!-- wp:heading {"level":4} -->
 	<h4>' . esc_html__( 'Another Heading', 'skatepark' ) . '</h4>
 	<!-- /wp:heading -->

+ 15 - 0
skatepark/sass/block-patterns/_paragraph-with-quote.scss

@@ -0,0 +1,15 @@
+.paragraph-with-quote {
+    .paragraph-column {
+        h4 {
+            margin: 0 0 calc( var(--wp--custom--margin--vertical) * 0.89 ) 0;
+        }
+
+        > p:first-of-type {
+            text-indent: 9.15em;
+        }
+
+        p {
+            margin: calc( var(--wp--custom--margin--baseline) * 1.55 ) 0 0 0;
+        }
+    }
+}

+ 2 - 1
skatepark/sass/block-styles/_side-quote.scss

@@ -1,7 +1,7 @@
 .wp-block-quote.is-style-side-quote { /* Needs .wp-block-quote class to override editor styles */
 	border: 0;
 	box-shadow: inset 0px 3px 0px 0px var(--wp--custom--color--primary);
-	margin: calc( var(--wp--custom--margin--vertical) * 1.11) 0;
+	margin: calc( var(--wp--custom--margin--vertical) * 1.5) 0;
 	padding: calc( var(--wp--custom--margin--baseline) * 1.35) 0 0 0;
 
 	cite {
@@ -12,6 +12,7 @@
 
 	p, div.block-editor-rich-text__editable {
 		font-size: var(--wp--preset--font-size--large);
+		line-height: 1.4em;
 		margin-bottom: calc( var(--wp--custom--margin--baseline) * 0.68);
 	}
 }

+ 1 - 0
skatepark/sass/theme.scss

@@ -12,6 +12,7 @@
 @import "block-styles/indented-paragraph";
 @import "block-styles/side-quote";
 @import "block-patterns/pre-footer";
+@import "block-patterns/paragraph-with-quote";
 @import "elements/headings";
 @import "elements/links";
 @import "templates/header";