Procházet zdrojové kódy

Loudness: Add home template to the theme. (#6698)

* Add home template with content from design and refine patterns used in home template.

* Escape text.

* Add alt text and escape text.

* Compress headshots.

Co-authored-by: Jeff Ong <jonger4@gmail.com>
Jason Crist před 2 roky
rodič
revize
27178f1d98

binární
loudness/assets/images/guest-1.jpg


binární
loudness/assets/images/guest-2.jpg


+ 21 - 21
loudness/patterns/guest-performers.php

@@ -9,30 +9,30 @@
 <h2><?php echo esc_html__( 'Guest Performers', 'loudness' ); ?></h2>
 <!-- /wp:heading -->
 
-<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"}} -->
 <div class="wp-block-group">
-	
-<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group">
-	<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-	<figure class="wp-block-image size-large">
-		<img src="<?php echo esc_url( get_stylesheet_directory_uri() ) . '/assets/images/guest-1.jpg'; ?>" alt="" />
-		<figcaption class="wp-element-caption">Spicy Little Wings</figcaption>
-	</figure>
-	<!-- /wp:image -->
+
+<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large">
+	<img src="<?php echo esc_url( get_stylesheet_directory_uri() ) . '/assets/images/guest-1.jpg'; ?>" alt="<?php echo esc_attr__( 'Headshot of woman wearing a green top and sunglasses, looking in the distance.', 'loudness' ); ?>"/>
+	<figcaption class="wp-element-caption"><?php echo esc_html__( 'Spicy Little Wings', 'loudness' ); ?></figcaption></figure>
+<!-- /wp:image --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large">
+	<img src="<?php echo esc_url( get_stylesheet_directory_uri() ) . '/assets/images/guest-2.jpg'; ?>" alt="<?php echo esc_attr__( 'Headshot of man wearing black sunglasses looking into the camera.', 'loudness' ); ?>"/>
+	<figcaption class="wp-element-caption"><?php echo esc_html__( 'DJ Vert', 'loudness' ); ?></figcaption></figure>
+<!-- /wp:image -->
+
 </div>
-<!-- /wp:group -->
+<!-- /wp:column -->
 
-<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group">
-	<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-	<figure class="wp-block-image size-large">
-		<img src="<?php echo esc_url( get_stylesheet_directory_uri() ) . '/assets/images/guest-2.jpg'; ?>" alt="" />
-		<figcaption class="wp-element-caption">DJ Vert</figcaption>
-	</figure>
-	<!-- /wp:image -->
 </div>
-<!-- /wp:group -->
+<!-- /wp:columns -->
 
 </div>
-<!-- /wp:group -->
+<!-- /wp:group -->

+ 2 - 2
loudness/patterns/illustration-1.php

@@ -5,8 +5,8 @@
  * Categories: illustrations
  */
 ?>
-<!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
-<figure class="wp-block-image size-full">
+<!-- wp:image {"align":"full","sizeSlug":"full","linkDestination":"none"} -->
+<figure class="wp-block-image alignfull size-full">
 	<img src="<?php echo esc_url( get_stylesheet_directory_uri() ) . '/assets/illustrations/illustration-1.svg'; ?>" />
 </figure>
 <!-- /wp:image -->

+ 4 - 2
loudness/patterns/pricing.php

@@ -6,8 +6,10 @@
  */
 ?>
 
-<!-- wp:cover {"url":"<?php echo esc_url( get_stylesheet_directory_uri() ) . '/assets/illustrations/texture.png'; ?>","dimRatio":0,"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","right":"var:preset|spacing|70","bottom":"var:preset|spacing|70","left":"var:preset|spacing|70"}}}} -->
-<div class="wp-block-cover alignfull" style="padding-top:var(--wp--preset--spacing--70);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70)"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="<?php echo esc_url( get_stylesheet_directory_uri() ) . '/assets/illustrations/texture.png'; ?>" data-object-fit="cover"/><div class="wp-block-cover__inner-container">
+
+<!-- wp:cover {"url":"<?php echo esc_url( get_stylesheet_directory_uri() ) . '/assets/illustrations/texture.png'; ?>","dimRatio":0,"align":"full","style":{"spacing":{"padding":{"right":"var:style|root|padding-right","left":"var:style|root|padding-left"}}}} -->
+
+<div class="wp-block-cover alignfull" style="padding-right:var(--wp--style--root--padding-right);padding-left:var(--wp--style--root--padding-left)"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="<?php echo esc_url( get_stylesheet_directory_uri() ) . '/assets/illustrations/texture.png'; ?>" data-object-fit="cover"/><div class="wp-block-cover__inner-container">
 
 <!-- wp:spacer {"height":"0px","style":{"spacing":{"margin":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}}} -->
 <div style="margin-top:var(--wp--preset--spacing--70);margin-bottom:var(--wp--preset--spacing--70);height:0px" aria-hidden="true" class="wp-block-spacer"></div>

+ 17 - 0
loudness/patterns/sample-large-text.php

@@ -0,0 +1,17 @@
+<?php
+/**
+ * Title: Sample Large Text
+ * Slug: loudness/sample_large_text
+ * Categories: featured
+ */
+?>
+
+<!-- wp:group {"align":"full","layout":{"type":"default"}} -->
+<div class="wp-block-group alignfull">
+
+<!-- wp:paragraph {"fontSize":"x-large"} -->
+<p class="has-x-large-font-size"><?php echo esc_html__( 'On September 25th, we\'re hosting a day-long workshop for beginner musicians, existing artists transitioning into electronic music, or anyone curious about how to begin with electronic music production.', 'loudness' ); ?></p>
+<!-- /wp:paragraph -->
+
+</div>
+<!-- /wp:group -->

+ 52 - 0
loudness/templates/home.html

@@ -0,0 +1,52 @@
+<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}},"layout":{"type":"default"}} -->
+<div class="wp-block-group">
+
+	<!-- wp:group {"backgroundColor":"primary","layout":{"type":"default"}} -->
+	<div class="wp-block-group has-primary-background-color has-background">
+		<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+	</div>
+	<!-- /wp:group -->
+
+	<!-- wp:group {"align":"full","layout":{"type":"constrained"}} -->
+	<div class="wp-block-group alignfull">
+		<!-- wp:pattern {"slug":"loudness/illustration_1"} /-->
+
+		<!-- wp:spacer -->
+		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->
+
+		<!-- wp:pattern {"slug":"loudness/sample_large_text"} /-->
+
+		<!-- wp:spacer -->
+		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->
+
+		<!-- wp:group {"align":"full","layout":{"type":"default"}} -->
+		<div class="wp-block-group alignfull">
+			<!-- wp:pattern {"slug":"loudness/instructors"} /-->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:spacer -->
+		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->
+
+		<!-- wp:group {"align":"full","layout":{"type":"default"}} -->
+		<div class="wp-block-group alignfull">
+			<!-- wp:pattern {"slug":"loudness/guest-performers"} /-->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:spacer -->
+		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->
+
+		<!-- wp:pattern {"slug":"loudness/pricing-table"} /-->
+
+	</div>
+	<!-- /wp:group -->
+
+</div>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

+ 0 - 14
loudness/templates/landing-page.html

@@ -1,14 +0,0 @@
-<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}},"layout":{"type":"default"}} -->
-<div class="wp-block-group">
-
-	<!-- wp:group {"backgroundColor":"primary","layout":{"type":"default"}} -->
-	<div class="wp-block-group has-primary-background-color has-background">
-		<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
-	</div>
-	<!-- /wp:group -->
-
-	<!-- wp:post-content {"tagName":"main","layout":{"inherit":true}} /-->
-</div>
-<!-- /wp:group -->
-
-<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->