Pixel: revise single template (#6513)

* add quote pattern.

* Revise single template layout and meta styles.

* Escape citation and update letter spacing.

* Rework layout to account for full width content.

pixel/parts/post-meta.html

@@ -1,4 +1,4 @@
-<!-- wp:group {"layout":{"type":"constrained"}} -->
+<!-- wp:group -->
 <div class="wp-block-group"><!-- wp:group {"layout":{"type":"flex"}} -->
 <div class="wp-block-group"><!-- wp:post-terms {"term":"category","style":{"typography":{"fontSize":"14px"}}} /--></div>
 <!-- /wp:group -->
@@ -6,4 +6,4 @@
 <!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
 <div class="wp-block-group"><!-- wp:post-terms {"term":"post_tag","style":{"typography":{"fontSize":"14px","textTransform":"lowercase"}}} /--></div>
 <!-- /wp:group --></div>
-<!-- /wp:group -->
+<!-- /wp:group -->

pixel/patterns/quote.php

@@ -0,0 +1,12 @@
+<?php
+/**
+ * Title: A Pixel Quote
+ * Slug: pixel/quote
+ * Categories: featured, text
+ */
+
+?>
+
+<!-- wp:pullquote {"style":{"border":{"width":"2px"},"typography":{"fontStyle":"normal","fontWeight":"400","lineHeight":"1.4","letterSpacing":"-0.02em","fontSize":"1.25rem"}},"borderColor":"primary","className":"pixel-shadow"} -->
+<figure class="wp-block-pullquote pixel-shadow has-border-color has-primary-border-color" style="border-width:2px;font-size:1.25rem;font-style:normal;font-weight:400;letter-spacing:-0.02em;line-height:1.4"><blockquote><p><?php echo esc_html__( '"The pain itself is love, the main storage system. Aenean dapibus nisi quis dolor scelerisque egestas. Members of the mass need to feel comfortable and easy. It is important that the lion should invest."', 'pixel' ) ?></p><cite><?php echo esc_html__( 'Unknown', 'pixel' ) ?></cite></blockquote></figure>
+<!-- /wp:pullquote -->

pixel/style.css

@@ -69,3 +69,19 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature
     color: var(--wp--preset--color--foreground);
     border-color: var(--wp--preset--color--primary);
 }
+
+/* Categories */
+.taxonomy-category > a {
+	text-decoration: none;
+}
+
+.taxonomy-category > a:hover {
+	text-decoration: underline;
+}
+
+.wp-block-pullquote cite {
+	font-size: 0.75rem;
+	font-style: normal;
+	font-weight: 300;
+	line-height: 1.6;
+}

pixel/templates/single.html

@@ -1,28 +1,17 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
-<div class="wp-block-group">
-<!-- wp:post-title /-->
-</div>
-<!-- /wp:group -->
-
 <!-- wp:group {"tagName":"main","lock":{"move":false,"remove":true}} -->
-<main class="wp-block-group">
-<!-- wp:post-featured-image {"align":"full"} /-->
-
-<!-- wp:post-content {"layout":{"inherit":true},"lock":{"move":false,"remove":true}} /-->
-
-<!-- wp:template-part {"slug":"post-meta"} /-->
-</main>
-<!-- /wp:group -->
-
-<!-- wp:group {"layout":{"inherit":true}} -->
-<div class="wp-block-group">
-    <!-- wp:spacer {"height":60} -->
-    <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<main class="wp-block-group"><!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:post-featured-image {"style":{"border":{"width":"2px"}},"borderColor":"primary","className":"pixel-shadow"} /-->
+<!-- wp:post-title /--></div><!-- /wp:group -->
+<!-- wp:post-content {"layout":{"type":"constrained"},"lock":{"move":false,"remove":true}} /-->
+<!-- wp:group {"layout":{"type":"constrained"}} --><div class="wp-block-group">
+    <!-- wp:template-part {"slug":"post-meta"} /-->
+    <!-- wp:spacer {"height":"3rem"} -->
+    <div style="height:3rem" aria-hidden="true" class="wp-block-spacer"></div>
     <!-- /wp:spacer -->
-    <!-- wp:pattern {"slug":"pixel/comments"} /-->
-</div>
+    <!-- wp:pattern {"slug":"pixel/comments"} /--></div>
+<!-- /wp:group --></main>
 <!-- /wp:group -->
 
 <!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->