Update post template and add width

material-components · Feb 3, 2022 · c5f5850 · c5f5850
1 parent 056975a
commit c5f5850
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 24 deletions.
diff --git a/theme/assets/css/src/base/fse-layout.css b/theme/assets/css/src/base/fse-layout.css
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -122,6 +122,10 @@
         "vh",
         "vw"
       ]
+    },
+    "layout": {
+      "contentSize": "840px",
+      "wideSize": "100vw"
     }
   }
 }