Add the state of the word page (#352)

WordPress · Nov 15, 2023 · 0704e5b · 0704e5b
1 parent dbd5a22
commit 0704e5b
Show file tree

Hide file tree

Showing 6 changed files with 292 additions and 0 deletions.
diff --git a/env/page-manifest.json b/env/page-manifest.json
@@ -129,5 +129,9 @@
 	{
 		"slug": "search",
 		"template": "page-search.html"
+	},
+	{
+		"slug": "state-of-the-word",
+		"template": "page-sotw.html"
 	}
 ]
diff --git a/source/wp-content/themes/wporg-main-2022/images/sotw/heading-splash.png b/source/wp-content/themes/wporg-main-2022/images/sotw/heading-splash.png
diff --git a/source/wp-content/themes/wporg-main-2022/images/sotw/quote.png b/source/wp-content/themes/wporg-main-2022/images/sotw/quote.png
diff --git a/source/wp-content/themes/wporg-main-2022/patterns/state-of-the-word.php b/source/wp-content/themes/wporg-main-2022/patterns/state-of-the-word.php
diff --git a/source/wp-content/themes/wporg-main-2022/src/style/style.scss b/source/wp-content/themes/wporg-main-2022/src/style/style.scss
@@ -555,6 +555,67 @@ $wporg-about-breakpoint-max: 1920px;
 	}
 }
 
+
+// Styles for the State of the Word page.
+.page-template-page-sotw a {
+	color: #ff2b2b;
+}
+
+@media (max-width: 419px) {
+	.page-template-page-sotw h2 {
+		font-size: 60px !important;
+	}
+}
+
+.page-template-page-sotw .sotw-event-details-social a {
+	text-decoration: none;
+}
+
+.page-template-page-sotw .sotw-quote {
+	position: relative;
+	z-index: 1;
+}
+
+.page-template-page-sotw .sotw-quote > p::before {
+	content: "";
+	position: absolute;
+	top: -50px;
+	left: -40px;
+	width: 100px;
+	height: 75px;
+	background-image: url(../../images/sotw/quote.png);
+	background-size: contain;
+	background-repeat: no-repeat;
+	z-index: -1;
+}
+
+@media (min-width: 960px) {
+	.page-template-page-sotw .sotw-quote > p::before {
+		top: -100px;
+		left: -140px;
+		width: 200px;
+		height: 150px;
+	}
+}
+
+.page-template-page-sotw .sotw-heading-splash {
+	position: relative;
+}
+
+.page-template-page-sotw .sotw-heading-splash::before {
+	content: "";
+	position: absolute;
+	top: -80px;
+	left: -160px;
+	width: 420px;
+	height: 430px;
+	background-image: url(../../images/sotw/heading-splash.png);
+	background-size: contain;
+	background-repeat: no-repeat;
+	z-index: -1;
+}
+
+
 /*
  * Workaround for Gutenberg CSS4 selectors on older browsers.
  *

diff --git a/source/wp-content/themes/wporg-main-2022/templates/page-sotw.html b/source/wp-content/themes/wporg-main-2022/templates/page-sotw.html
@@ -0,0 +1,9 @@
+<!-- wp:wporg/global-header {"backgroundColor":"black"} /-->
+
+<!-- wp:group {"tagName":"main","layout":{"inherit":true},"className":"entry-content","style":{"spacing":{"blockGap":"0px"}}} -->
+<main class="wp-block-group entry-content">
+	<!-- wp:pattern {"slug":"wporg-main-2022/state-of-the-word"} /-->
+</main>
+<!-- /wp:group -->
+
+<!-- wp:wporg/global-footer {"backgroundColor":"black"} /-->