Adjust responsive layout of handbooks

- Reduce width of chapter list and ToC - Retain column layout for chapter list and content on tablet
WordPress · Oct 30, 2023 · 4dfa5f0 · 4dfa5f0
1 parent 54b2977
commit 4dfa5f0
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 17 deletions.
diff --git a/source/wp-content/themes/wporg-developer-2023/src/style/style.scss b/source/wp-content/themes/wporg-developer-2023/src/style/style.scss
@@ -51,32 +51,36 @@ body[class] {
 	}
 }
 
-@media (min-width: 1320px) {
-	.has-three-columns {
-		--wp--style--global--wide-size: 1760px;
 
-		--local--block-start-sidebar--width: 300px;
+.has-three-columns {
+	--local--sidebar--width: 232px;
+	--local--column-gap: 40px;
+
+	@media (min-width: 768px) {
+		--wp--style--global--wide-size: 1760px;
 
 		display: grid;
-		grid-template-columns: var(--local--block-start-sidebar--width) 1fr;
+		grid-template-columns: var(--local--sidebar--width) 1fr;
 		grid-template-rows: auto auto;
-		column-gap: 40px;
+		column-gap: var(--local--column-gap);
 
 		.wp-block-wporg-sidebar-container {
-			--local--block-end-sidebar--width: 300px;
-		}
-
-		article {
-			--wp--style--global--content-size: 1080px;
-
-			width: clamp(30rem, -52.5rem + 100vw, 67.5rem);
+			--local--block-end-sidebar--width: var(--local--sidebar--width);
 		}
 
 		.has-three-columns__pagination {
 			grid-row-start: 2;
 			grid-column-start: 2;
 		}
 	}
+
+	@media (min-width: 1200px) {
+		article {
+			// Width must be caluclated to fit absolute positioned ToC.
+			// Scales between 496px at 1200px wide and 1216px at 1920px wide, based on sidebar and gap dimensions above.
+			width: clamp(31rem, -44rem + 100vw, 76rem);
+		}
+	}
 }
 
 .is-toc-heading a::after {

diff --git a/source/wp-content/themes/wporg-developer-2023/templates/single-handbook-github.html b/source/wp-content/themes/wporg-developer-2023/templates/single-handbook-github.html
@@ -5,7 +5,7 @@
 
 	<!-- wp:pattern {"slug":"wporg-developer-2023/search-field"} /-->
 
-	<!-- wp:group {"className":"has-three-columns","layout":{"type":"constrained","justifyContent":"left"},"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}}} -->
+	<!-- wp:group {"className":"has-three-columns","align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}}} -->
 	<div class="wp-block-group alignwide has-three-columns" style="margin-top:var(--wp--preset--spacing--40)">
 
 		<!-- wp:wporg/chapter-list {"style":{"spacing":{"margin":{"bottom":"80px"}}}} /-->
@@ -16,7 +16,7 @@
 
 			<!-- wp:pattern {"slug":"wporg-developer-2023/article-sidebar"} /-->
 
-			<!-- wp:post-content {"layout":{"inherit":true}} /-->
+			<!-- wp:post-content /-->
 
 			<!-- wp:pattern {"slug":"wporg-developer-2023/article-meta-github"} /-->
 		</article>

diff --git a/source/wp-content/themes/wporg-developer-2023/templates/single-handbook.html b/source/wp-content/themes/wporg-developer-2023/templates/single-handbook.html
@@ -5,7 +5,7 @@
 
 	<!-- wp:pattern {"slug":"wporg-developer-2023/search-field"} /-->
 
-	<!-- wp:group {"className":"has-three-columns","layout":{"type":"constrained","justifyContent":"left"},"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}}} -->
+	<!-- wp:group {"className":"has-three-columns","align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}}} -->
 	<div class="wp-block-group alignwide has-three-columns" style="margin-top:var(--wp--preset--spacing--40)">
 
 		<!-- wp:wporg/chapter-list {"style":{"spacing":{"margin":{"bottom":"80px"}}}} /-->
@@ -16,7 +16,7 @@
 
 			<!-- wp:pattern {"slug":"wporg-developer-2023/article-sidebar"} /-->
 
-			<!-- wp:post-content {"layout":{"inherit":true}} /-->
+			<!-- wp:post-content /-->
 
 			<!-- wp:pattern {"slug":"wporg-developer-2023/article-meta"} /-->
 		</article>