From c5f5850b98f93d7147b1981ac70d4079873507b7 Mon Sep 17 00:00:00 2001
From: Utkarsh Patel <itismeutkarsh@gmail.com>
Date: Thu, 3 Feb 2022 15:55:39 +0530
Subject: [PATCH] Update post template and add width

---
 theme/assets/css/src/base/fse-layout.css      | 19 --------
 theme/assets/css/src/base/index.css           |  1 -
 .../assets/css/src/components/core-block.css  | 48 +++++++++++++++++++
 theme/assets/css/src/conf/media.css           |  1 +
 theme/block-templates/single.html             |  8 ++--
 theme/theme.json                              |  4 ++
 6 files changed, 57 insertions(+), 24 deletions(-)
 delete mode 100644 theme/assets/css/src/base/fse-layout.css

diff --git a/theme/assets/css/src/base/fse-layout.css b/theme/assets/css/src/base/fse-layout.css
deleted file mode 100644
index 01f3f9435..000000000
--- a/theme/assets/css/src/base/fse-layout.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- * Copyright 2022 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *       http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-header.wp-block-template-part + * {
-	margin-top: 12rem;
-}
diff --git a/theme/assets/css/src/base/index.css b/theme/assets/css/src/base/index.css
index aee89a0d3..f1dbcdc99 100644
--- a/theme/assets/css/src/base/index.css
+++ b/theme/assets/css/src/base/index.css
@@ -18,4 +18,3 @@
 @import "./masonry-grid.css";
 @import "./typography.css";
 @import "./wordpress.css";
-@import "./fse-layout.css";
diff --git a/theme/assets/css/src/components/core-block.css b/theme/assets/css/src/components/core-block.css
index 34192a8bb..e27ab05fc 100644
--- a/theme/assets/css/src/components/core-block.css
+++ b/theme/assets/css/src/components/core-block.css
@@ -45,3 +45,51 @@
 .wp-block-post-comments .comments-area {
 	width: 100%;
 }
+
+/** is-root-container is editor */
+.wp-site-blocks,
+body > .is-root-container,
+.edit-post-visual-editor__post-title-wrapper,
+.wp-block-group.alignfull,
+.wp-block-group.has-background,
+.wp-block-cover.alignfull,
+.is-root-container .wp-block[data-align="full"] > .wp-block-group,
+.is-root-container .wp-block[data-align="full"] > .wp-block-cover {
+
+	@media (--medium-large-viewport-max) {
+		margin-right: 1rem;
+		margin-left: 1rem;
+	}
+}
+
+.entry-content,
+header.wp-block-template-part,
+footer.wp-block-template-part,
+.wp-site-blocks .alignfull,
+.wp-site-blocks > .wp-block-group.has-background,
+.wp-site-blocks > .wp-block-cover,
+.wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
+.wp-site-blocks > .wp-block-template-part > .wp-block-cover,
+body > .is-root-container > .wp-block-group.has-background,
+body > .is-root-container > .wp-block-cover,
+body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
+body > .is-root-container > .wp-block-template-part > .wp-block-cover,
+.is-root-container .wp-block[data-align="full"] {
+
+	@media (--medium-large-viewport-max) {
+		margin-left: calc(-1 * 1rem) !important;
+		margin-right: calc(-1 * 1rem) !important;
+		width: unset;
+	}
+}
+
+/* Blocks inside columns don't have negative margins. */
+.wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
+.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
+	/* We also want to avoid stacking negative margins. */
+.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
+.is-root-container .wp-block[data-align="full"] > *:not(.wp-block-group) .wp-block[data-align="full"] {
+	margin-left: auto !important;
+	margin-right: auto !important;
+	width: inherit;
+}
diff --git a/theme/assets/css/src/conf/media.css b/theme/assets/css/src/conf/media.css
index 9134ed7c2..edfe12376 100644
--- a/theme/assets/css/src/conf/media.css
+++ b/theme/assets/css/src/conf/media.css
@@ -17,4 +17,5 @@
 @custom-media --small-viewport-max  (max-width: 840px);
 @custom-media --medium-viewport  (min-width: 840px);
 @custom-media --medium-large-viewport  (min-width: 1024px);
+@custom-media --medium-large-viewport-max  (max-width: 1024px);
 @custom-media --large-viewport  (min-width: 1440px);
diff --git a/theme/block-templates/single.html b/theme/block-templates/single.html
index 83598a779..6fe3cf9e8 100644
--- a/theme/block-templates/single.html
+++ b/theme/block-templates/single.html
@@ -26,8 +26,8 @@
 <main class="wp-block-group" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:post-content {"layout":{"inherit":true}} /--></main>
 <!-- /wp:group -->
 
-<!-- wp:group {"tagName":"footer","style":{"spacing":{"padding":{"top":"3rem","right":"0rem","bottom":"1.5rem","left":"1rem"}}},"layout":{"contentSize":"840px","wideSize":"100vw"}} -->
-<footer class="wp-block-group" style="padding-top:3rem;padding-right:0rem;padding-bottom:1.5rem;padding-left:1rem"><!-- wp:group {"className":"tags-links","layout":{"type":"flex","allowOrientation":false}} -->
+<!-- wp:group {"tagName":"footer","style":{"spacing":{"padding":{"top":"3rem","right":"0rem","bottom":"1.5rem","left":"0rem"}}},"layout":{"contentSize":"840px","wideSize":"100vw"}} -->
+<footer class="wp-block-group" style="padding-top:3rem;padding-right:0rem;padding-bottom:1.5rem;padding-left:0rem"><!-- wp:group {"className":"tags-links","layout":{"type":"flex","allowOrientation":false}} -->
 	<div class="wp-block-group tags-links"><!-- wp:paragraph {"style":{"typography":{"fontSize":"24px"}}} -->
 		<p style="font-size:24px"><span class="material-icons">label</span></p>
 		<!-- /wp:paragraph -->
@@ -37,8 +37,8 @@
 <!-- /wp:group -->
 
 <!-- wp:group {"tagName":"footer","layout":{"contentSize":"840px","wideSize":"100vw"}} -->
-<footer class="wp-block-group"><!-- wp:columns {"style":{"spacing":{"margin":{"top":"0em","bottom":"1.5em"}}},"className":"next-prev-links post-navigation section-inner"} -->
-	<div class="wp-block-columns next-prev-links post-navigation section-inner" style="margin-top:0em;margin-bottom:1.5em"><!-- wp:column -->
+<footer class="wp-block-group"><!-- wp:columns {"style":{"spacing":{"margin":{"top":"0em","bottom":"1.5em"}}}} -->
+	<div class="wp-block-columns" style="margin-top:0em;margin-bottom:1.5em"><!-- wp:column -->
 		<div class="wp-block-column"><!-- wp:post-navigation-link {"type":"previous","label":"←","showTitle":true,"linkLabel":true} /--></div>
 		<!-- /wp:column -->
 
diff --git a/theme/theme.json b/theme/theme.json
index 49d5b50a0..9549a0d7f 100644
--- a/theme/theme.json
+++ b/theme/theme.json
@@ -122,6 +122,10 @@
         "vh",
         "vw"
       ]
+    },
+    "layout": {
+      "contentSize": "840px",
+      "wideSize": "100vw"
     }
   }
 }