Merge pull request #3 from wpengine/RossoMaguire/TITAN-282

[TITAN-182] - Re-create About page in WordPress
wpengine · Mar 31, 2023 · cd4e241 · cd4e241
2 parents 088897b + 7d2b4c3
commit cd4e241
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 138 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@ node_modules
 
 # JavaScript dependencies
 package-lock.json
+.next
diff --git a/components/ContentWrapper/ContentWrapper.module.scss b/components/ContentWrapper/ContentWrapper.module.scss
@@ -1,134 +1,144 @@
 .component {
-	max-width: var(--wpe--content--max-width);
-	margin: 0 auto;
-	line-height: 1.6875;
-
-	:global {
-		// Scope WordPress block styles within ContentWrapper.
-		@import 'styles/blocks';
-
-		* {
-			max-width: 100%;
-		}
-
-		figure {
-			margin-left: 0;
-			margin-right: 0;
-		}
-
-		h1,
-		h2,
-		h3,
-		h4,
-		h5,
-		h6 {
-			margin: 4.8rem 0;
-		}
-
-		strong {
-			font-weight: 700;
-		}
-
-		a {
-			color: var(--wpe--link--color);
-			text-decoration: underline;
-
-			&:hover,
-			&:focus {
-				color: var(--wpe--link--color);
-				text-decoration: none;
-			}
-		}
-
-		li {
-			font-size: 1.6rem;
-		}
-
-		img {
-			display: block;
-			height: auto;
-			max-width: 100%;
-		}
-
-		.alignleft {
-			display: inline;
-			float: left;
-			margin-right: 1.5em;
-		}
-
-		.alignright {
-			display: inline;
-			float: right;
-			margin-left: 1.5em;
-		}
-
-		.aligncenter {
-			clear: both;
-			display: block;
-			margin-left: auto;
-			margin-right: auto;
-		}
-
-		code,
-		pre {
-			color: var(--color-white);
-			background: var(--color-black);
-		}
-
-		code {
-			padding: 0.25rem 0.5rem;
-		}
-
-		pre {
-			max-width: 100%;
-			overflow: auto;
-			padding: 1rem;
-		}
-
-		blockquote {
-			border-top: 1px solid var(--color-black);
-			border-bottom: 1px solid var(--color-black);
-			font-style: italic;
-			margin-top: 0;
-			margin-left: 0;
-			margin-right: 0;
-			padding: 4rem 1rem 4rem;
-			text-align: center;
-
-			&::before {
-				content: '”';
-				display: block;
-				font-size: 6rem;
-				line-height: 0;
-				margin: 2rem 0;
-			}
-
-			> *:last-child {
-				margin-bottom: 0;
-			}
-		}
-
-		table {
-			border-collapse: collapse;
-			width: 100%;
-		}
-
-		thead th {
-			border-bottom: 1px solid var(--wpe--color--border);
-			padding-bottom: 0.5em;
-		}
-
-		th {
-			padding: 0.4rem 0;
-			text-align: left;
-		}
-
-		tr {
-			border-bottom: 1px solid var(--wpe--color--border);
-		}
-
-		td {
-			padding: 0.4em;
-		}
-	}
+  margin: 0 auto;
+  line-height: 1.6875;
+
+  :global {
+    // Scope WordPress block styles within ContentWrapper.
+    @import 'styles/blocks';
+
+    // custom class set in blocks properties in Gutenberg sidebar
+    .inner-blueprint-content,
+    .outer-blueprint-block .wp-block-columns {
+      width: 60% !important;
+      margin: 0 auto !important;
+    }
+
+    .has-white-color {
+      color: white !important;
+    }
+
+    * {
+      max-width: 100%;
+    }
+
+    figure {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin: 4.8rem 0;
+    }
+
+    strong {
+      font-weight: 700;
+    }
+
+    a {
+      color: var(--wpe--link--color);
+      text-decoration: underline;
+
+      &:hover,
+      &:focus {
+        color: var(--wpe--link--color);
+        text-decoration: none;
+      }
+    }
+
+    li {
+      font-size: 1.6rem;
+    }
+
+    img {
+      display: block;
+      height: auto;
+      max-width: 100%;
+    }
+
+    .alignleft {
+      display: inline;
+      float: left;
+      margin-right: 1.5em;
+    }
+
+    .alignright {
+      display: inline;
+      float: right;
+      margin-left: 1.5em;
+    }
+
+    .aligncenter {
+      clear: both;
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    code,
+    pre {
+      color: var(--color-white);
+      background: var(--color-black);
+    }
+
+    code {
+      padding: 0.25rem 0.5rem;
+    }
+
+    pre {
+      max-width: 100%;
+      overflow: auto;
+      padding: 1rem;
+    }
+
+    blockquote {
+      border-top: 1px solid var(--color-black);
+      border-bottom: 1px solid var(--color-black);
+      font-style: italic;
+      margin-top: 0;
+      margin-left: 0;
+      margin-right: 0;
+      padding: 4rem 1rem 4rem;
+      text-align: center;
+
+      &::before {
+        content: '”';
+        display: block;
+        font-size: 6rem;
+        line-height: 0;
+        margin: 2rem 0;
+      }
+
+      > *:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    table {
+      border-collapse: collapse;
+      width: 100%;
+    }
+
+    thead th {
+      border-bottom: 1px solid var(--wpe--color--border);
+      padding-bottom: 0.5em;
+    }
+
+    th {
+      padding: 0.4rem 0;
+      text-align: left;
+    }
+
+    tr {
+      border-bottom: 1px solid var(--wpe--color--border);
+    }
+
+    td {
+      padding: 0.4em;
+    }
+  }
 }
diff --git a/wp-templates/page.js b/wp-templates/page.js
@@ -38,12 +38,7 @@ export default function Component(props) {
         menuItems={primaryMenu}
       />
       <Main>
-        <>
-          <EntryHeader title={title} image={featuredImage?.node} />
-          <Container>
-            <ContentWrapper content={content} />
-          </Container>
-        </>
+        <ContentWrapper content={content} />
       </Main>
       <Footer title={siteTitle} menuItems={footerMenu} />
     </>