Merge 7312fbfe50 into 466c9a8f82

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

@@ -0,0 +1,122 @@
+<?php
+/**
+ * Home - CNCF About
+ *
+ * A small block that can be used when there is a hero takeover.
+ *
+ * @package WordPress
+ * @subpackage cncf-theme
+ * @since 1.0.0
+ */
+
+$metrics = LF_Utils::get_homepage_metrics();
+
+?>
+
+<style>
+@media (max-width: 767px) {
+	.home-cncf-about {
+		text-align: center;
+	}
+
+	.home-cncf-about__metric-wrapper {
+		justify-content: center;
+	}
+}
+
+.home-cncf-about__metric-wrapper {
+	flex-wrap: wrap;
+	row-gap: 30px;
+	column-gap: 30px;
+}
+
+@media (min-width: 1000px) {
+	.home-cncf-about__metric-wrapper {
+		column-gap: 90px;
+	}
+}
+
+.home-cncf-about__blob {
+	display: none;
+}
+
+@media (min-width: 1200px) {
+	.home-cncf-about__metric-wrapper {
+		column-gap: 70px;
+	}
+
+	.home-cncf-about__columns {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.home-cncf-about__blob {
+		display: block;
+		max-width: 350px;
+	}
+}
+</style>
+
+<section class="home-cncf-about wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow
+	is-vertically-aligned-center has-gray-200-background-color has-background
+	">
+	<div class="wp-block-group is-style-no-padding">
+
+		<div aria-hidden="true" class="wp-block-spacer is-style-40-80"></div>
+
+		<div class="home-cncf-about__columns">
+			<div>
+			<h2 class="has-extra-extra-large-font-size">Make cloud native
+				ubiquitous
+			</h2>
+
+			<div aria-hidden="true" class="wp-block-spacer"
+				style="height:20px;">
+			</div>
+
+			<p class="is-style-max-width-700">CNCF is the open source,
+							vendor-neutral
+							hub of <strong>cloud native computing</strong>, hosting
+							projects like Kubernetes and Prometheus to make cloud native
+							universal and sustainable.</p>
+
+			<ul
+				class="home-hero__metric_wrapper home-cncf-about__metric-wrapper">
+				<li style="margin-left: 0; margin-right: 0;">
+					<?php echo esc_html( $metrics['projects'] ); ?>
+					<span>Projects</span>
+				</li>
+				<li style="margin-left: 0; margin-right: 0;">
+					<?php echo esc_html( round( $metrics['contributors'] / 1000 ) ); ?>K
+					<span>Contributors</span>
+				</li>
+				<li style="margin-left: 0; margin-right: 0;">
+					<?php echo esc_html( round( $metrics['contributions'] / 1000000, 1 ) ); ?>M
+					<span>Contributions</span>
+				</li>
+				<li style="margin-left: 0; margin-right: 0;"
+					class="show-over-600">
+					<?php echo esc_html( $metrics['countries'] ); ?>
+					<span>Countries</span>
+				</li>
+				<li style="margin-left: 0; margin-right: 0;">
+					<div class="wp-block-button"><a href="/about/who-we-are/"
+							class="wp-block-button__link has-black-background-color has-background wp-element-button"
+							title="Learn more about CNCF">About CNCF</a></div>
+				</li>
+			</ul>
+			</div>
+			<div class="home-cncf-about__blob">
+				<!-- wp:image {"align":"left","id":65023,"sizeSlug":"large","linkDestination":"none","className":"is-style-blob"} -->
+				<div class="wp-block-image is-style-blob">
+					<figure class="size-large">
+					<?php LF_Utils::display_responsive_images( 109366, 'large', '350px', null, 'lazy', 'Developers at a conference' ); ?>
+						</figure>
+				</div>
+				<!-- /wp:image -->
+			</div>
+		</div>
+		<div aria-hidden="true" class="wp-block-spacer" style="height: 1px;">
+		</div>
+	</div>
+</section>

web/wp-content/themes/cncf-twenty-two/front-page.php

@@ -16,6 +16,8 @@ get_template_part( 'components/home-hero-takeover' ); // phpcs:ignore.
 ?>
 <article class="container wrap">
 	<?php
+	get_template_part( 'components/home-cncf-about' );
+
 	get_template_part( 'components/home-projects' );
 
 	if ( have_posts() ) :

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

@@ -91,6 +91,7 @@
 		}
 	}
 	&__metric_wrapper {
+		list-style: none;
 		margin-top: min(8%, 30px);
 		@media (min-width: 600px) {
 			margin-top: min(8%, 36px);
@@ -344,9 +345,9 @@
 }
 
 .home-intro-box {
-    background: $white;
-    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.08);
-    border-radius: 10px;
+	background: $white;
+	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.08);
+	border-radius: 10px;
 	border: 1px solid $gray-300;
 	letter-spacing: 0.02em;
 	line-height: 150%;