Sets up KubeWeekly single post page (#872)

* Sets up KubeWeekly single post page

Signed-off-by: Chris Abraham <[email protected]>

* tweak margin

Signed-off-by: Chris Abraham <[email protected]>

* Add event banner to bottom

Signed-off-by: Chris Abraham <[email protected]>

---------

Signed-off-by: Chris Abraham <[email protected]>

Author: cjyabraham

web/wp-content/themes/cncf-twenty-two/components/kubeweekly-single.php

@@ -0,0 +1,66 @@
+<?php
+/**
+ * Kubeweekly content - the loop
+ *
+ * @package WordPress
+ * @subpackage cncf-theme
+ * @since 1.0.0
+ */
+
+?>
+
+<main class="kubeweekly-single">
+	<article class="container wrap page-content">
+
+	<section class="hero alignfull">
+
+		<figure class="hero__figure">
+			<?php
+			$site_options = get_option( 'lf-mu' );
+			Lf_Utils::display_picture( 114723, 'hero', 'hero__image' );
+			?>
+		</figure>
+
+		<div class="container wrap hero__text-overlay title-wrapper lf-grid">
+
+		<div class="col1">
+			<span>
+			<a class="parent-link has-text-color has-white-text" href="/kubeweekly/" title="Go to KubeWeeklys">KubeWeekly</a>
+			</span>
+
+			<h1 class="is-style-case-study-title"><?php the_title(); ?></h1>
+			<div style="height:20px"
+				aria-hidden="true" class="wp-block-spacer">
+			</div>
+			<p class="is-style-spaced-uppercase has-small-font-size">Published: <?php echo get_the_date(); ?></p>
+		</div>
+		<div class="col2">
+			<img width="210" src="/wp-content/themes/cncf-twenty-two/images/projects/kubernetes-icon-color.svg" alt="Kubernetes">
+		</div>
+
+		</section>
+
+		<?php
+		while ( have_posts() ) :
+			the_post();
+			the_content();
+		endwhile;
+		?>
+		<div style="height:80px"
+			aria-hidden="true" class="wp-block-spacer is-style-60-100">
+		</div>
+		<?php
+		get_template_part( 'components/social-share' );
+		?>
+		<div style="height:80px"
+			aria-hidden="true" class="wp-block-spacer is-style-60-100">
+		</div>
+
+	</article>
+
+	<aside class="container wrap">
+		<?php
+			echo do_shortcode( '[event_banner hide_title=true]' );
+		?>
+	</aside>
+</main>

web/wp-content/themes/cncf-twenty-two/components/title.php

@@ -84,7 +84,7 @@
 		}
 		?>
 		<?php
-		if ( is_singular( 'lf_report' ) || is_singular( 'lf_human' ) || is_singular( 'lf_kubeweekly' ) ) {
+		if ( is_singular( 'lf_report' ) || is_singular( 'lf_human' ) ) {
 			?>
 <div style="height:50px" aria-hidden="true"
 	class="wp-block-spacer is-style-30-50"></div>

web/wp-content/themes/cncf-twenty-two/single.php

@@ -29,6 +29,10 @@
 elseif ( is_singular( 'lf_report' ) ) :
 	get_template_part( 'components/title' );
 	get_template_part( 'components/report-single' );
+
+elseif ( is_singular( 'lf_kubeweekly' ) ) :
+	get_template_part( 'components/kubeweekly-single' );
+
 	// Default.
 else :
 	get_template_part( 'components/title' );

web/wp-content/themes/cncf-twenty-two/source/scss/components/_kubeweeklys.scss

@@ -63,3 +63,54 @@
 		display: none;
 	}
 }
+
+.kubeweekly-single {
+	.hero {
+		overflow: hidden;
+		position: relative;
+		margin-bottom: 60px;
+
+		&__image {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			position: absolute;
+			z-index: 1;
+			top: 0;
+			left: 0;
+		}
+
+		&__text-overlay {
+			position: relative;
+			z-index: 2;
+			padding-top: 60px;
+			padding-bottom: 40px;
+		}
+
+		.parent-link {
+			color: $white;
+			margin-bottom: 20px;
+			@media (min-width: 1200px) {
+				margin-bottom: 40px;
+			}
+		}
+
+		p {
+			color: $white;
+		}
+
+		.col1 {
+			grid-column: span 12;
+			@media (min-width: 782px) {
+				grid-column: span 9;
+			}
+		}
+		.col2 {
+			grid-column: span 12;
+			@media (min-width: 782px) {
+				grid-column: span 3;
+			}
+		}
+
+	}
+}