#1313 CSS で対応するパターン

inc2734 · Feb 17, 2023 · 9bf884b · 9bf884b
1 parent 4b3d8f0
commit 9bf884b
Show file tree

Hide file tree

Showing 12 changed files with 71 additions and 55 deletions.
diff --git a/src/css/app/layout/_body/_app.scss b/src/css/app/layout/_body/_app.scss
@@ -5,44 +5,29 @@
 
 // Blank / One column full
 [data-is-full-template="true"] {
-	.#{ $_prefix }c-entry__content {
-		&:not([data-home-page-container="true"]) {
-			--wp--style--global--content-size: none;
-			--wp--style--global--wide-size: none;
-		}
+	.#{ $_prefix }c-entry {
+		--wp--style--global--content-size: none;
+		--wp--style--global--wide-size: none;
 	}
 }
 
 // One column slim / Blank slim
 [data-has-sidebar="false"][data-is-slim-width="true"] {
-	// --wp--custom--content-max-width: var(--wp--custom--slim-width);
-	--wp--style--global--content-size: var(--wp--custom--slim-width);
-
-	.#{ $_prefix }c-entry > :not(.#{ $_prefix }c-entry__body) {
-		margin-inline: auto;
-		max-width: var(--wp--custom--slim-width);
-	}
-}
-
-// One column
-[data-has-sidebar="false"]:not([data-header-layout="left"]) {
-	.#{ $_prefix }c-entry__content {
-		margin-right: calc(50% - 50vw + var(--scrollbar-width) / 2);
-		margin-left: calc(50% - 50vw + var(--scrollbar-width)/ 2);
+	.#{ $_prefix }l-contents__inner {
+		--wp--style--global--content-size: min(100% - var(--_global--container-margin) * 2 - env(safe-area-inset-right) - env(safe-area-inset-left), var(--wp--custom--slim-width));
 	}
 }
 
 // Right/Left sidebar
 [data-has-sidebar="true"] {
-	.#{ $_prefix }c-entry__content {
-		--wp--style--global--content-size: none;
-	}
-}
+	.#{ $_prefix }l-contents__container {
+		box-sizing: content-box;
+		margin-inline: auto;
+		padding-inline: var(--_global--container-margin);
+		max-width: var(--wp--style--global--content-size);
 
-// Left header, One column slim / One column
-[data-header-layout="left"][data-has-sidebar="false"][data-is-full-template="false"] {
-	.#{ $_prefix }c-entry__content {
-		margin-right: calc(var(--_container-margin) * -1);
-		margin-left: calc(var(--_container-margin) * -1);
+		> * {
+			--wp--style--global--content-size: none;
+		}
 	}
 }
diff --git a/src/css/app/layout/_contents/_app.scss b/src/css/app/layout/_contents/_app.scss
@@ -1,3 +1,13 @@
+:where(.#{ $_prefix }l-contents__container > *) {
+	margin-inline: auto;
+	max-width: var(--wp--style--global--content-size);
+}
+
+:where(.#{ $_prefix }l-contents__main > *) {
+	margin-inline: auto;
+	max-width: var(--wp--style--global--content-size);
+}
+
 .#{ $_prefix }l-contents {
 	--contents--gap: var(--_margin2);
 
@@ -7,6 +17,16 @@
 		overflow: visible;
 	}
 
+	&__container {
+		> .#{ $_prefix }u-slim-width {
+			max-width: unquote('min(100% - var(--_global--container-margin) * 2 - env(safe-area-inset-right) - env(safe-area-inset-left), var(--wp--custom--slim-width))') !important;
+		}
+	}
+
+	&__inner {
+		max-width: 100%;
+	}
+
 	&__sidebar {
 		@include _set-content-level(1);
 	}
@@ -126,11 +146,6 @@
 		[data-is-content-widget-area="true"]:last-child {
 			margin-bottom: calc(-1 * var(--contents--gap));
 		}
-
-		[data-is-content-widget-area="true"] {
-			margin-right: calc(50% - 50vw + var(--scrollbar-width) / 2);
-			margin-left: calc(50% - 50vw + var(--scrollbar-width) / 2);
-		}
 	}
 }
 
@@ -145,14 +160,6 @@
 	}
 }
 
-[data-has-sidebar="false"][data-header-layout="left"] {
-	.#{ $_prefix }l-contents {
-		&__container {
-			max-width: 100%;
-		}
-	}
-}
-
 /**
  * Attachment
  */

diff --git a/src/css/app/layout/_header/_app.scss b/src/css/app/layout/_header/_app.scss
@@ -332,6 +332,7 @@
 		left: 0;
 		width: var(--body-margin-left);
 		padding-top: var(--_padding1);
+		overflow: hidden auto;
 
 		.admin-bar & {
 			top: 32px;
@@ -340,6 +341,7 @@
 		.#{ $_prefix }c-container {
 			padding-right: 0;
 			padding-left: 0;
+			max-width: none;
 		}
 
 		.#{ $_prefix }c-site-branding {

diff --git a/src/css/app/object/component/_entry/_app.scss b/src/css/app/object/component/_entry/_app.scss
@@ -1,4 +1,20 @@
+:where(.#{ $_prefix }c-entry > *) {
+	margin-inline: auto;
+	max-width: var(--wp--style--global--content-size);
+}
+
+:where(.#{ $_prefix }c-entry__body > *) {
+	margin-inline: auto;
+	max-width: var(--wp--style--global--content-size);
+}
+
+:where(.#{ $_prefix }c-entry__content > :not(.alignleft):not(.alignright):not(.alignfull)) {
+	max-width: var(--wp--style--global--content-size);
+}
+
 .#{ $_prefix }c-entry {
+	max-width: 100%;
+
 	&__header {
 		margin-bottom: var(--_margin1);
 	}
@@ -19,15 +35,17 @@
 
 	&__body {
 		@include _set-content-level(1);
+
+		max-width: 100%;
 	}
 
 	&__content {
 		@include _clearfix();
 
-		@at-root {
-			:where(#{ & } > :where(:not(.alignleft):not(.alignright):not(.alignfull))) {
-				max-width: var(--wp--style--global--content-size);
-			}
+		max-width: 100%;
+
+		&[data-home-page-container="true"] {
+			--wp--style--global--content-size: var(--wp--custom--content-width);
 		}
 	}
 

diff --git a/src/css/app/object/component/_wp-share-buttons/_app.scss b/src/css/app/object/component/_wp-share-buttons/_app.scss
@@ -1,3 +1,3 @@
 .wp-share-buttons {
-	margin: 0;
+	margin: 0 auto;
 }
diff --git a/src/css/app/object/project/_section-front-page-content/_app.scss b/src/css/app/object/project/_section-front-page-content/_app.scss
@@ -1,4 +1,6 @@
 .#{ $_prefix }p-section-front-page-content {
+	max-width: 100%;
+
 	&--no-vpadding {
 		padding-top: 0;
 		padding-bottom: 0;

diff --git a/src/css/custom-widgets/app.scss b/src/css/custom-widgets/app.scss
@@ -15,6 +15,8 @@
 
 [data-has-sidebar="false"] {
 	[data-is-content-widget-area="true"] {
+		max-width: 100%;
+
 		.alignfull > .c-container {
 			padding-right: 0;
 			padding-left: 0;

diff --git a/template-parts/content/eyecatch.php b/template-parts/content/eyecatch.php
@@ -3,7 +3,7 @@
  * @package snow-monkey
  * @author inc2734
  * @license GPL-2.0+
- * @version 5.0.0
+ * @version 19.1.5
  *
  * renamed: template-parts/eyecatch.php
  */
@@ -14,5 +14,5 @@
 ?>
 
 <div class="c-eyecatch">
-	<?php the_post_thumbnail( 'large' ); ?>
+	<?php the_post_thumbnail( 'xlarge' ); ?>
 </div>
diff --git a/templates/layout/wrapper/left-sidebar.php b/templates/layout/wrapper/left-sidebar.php
@@ -5,7 +5,7 @@
  * @package snow-monkey
  * @author inc2734
  * @license GPL-2.0+
- * @version 19.0.0-beta1
+ * @version 19.1.5
  */
 
 use Framework\Helper;
@@ -73,7 +73,7 @@
 			?>
 
 			<div class="l-contents__body">
-				<div class="l-contents__container c-container">
+				<div class="l-contents__container">
 					<?php
 					if (
 						! is_front_page()

diff --git a/templates/layout/wrapper/one-column-slim.php b/templates/layout/wrapper/one-column-slim.php
@@ -73,7 +73,7 @@
 			?>
 
 			<div class="l-contents__body">
-				<div class="l-contents__container c-container">
+				<div class="l-contents__container">
 					<?php
 					if ( ! is_front_page() && 'default' === get_theme_mod( 'breadcrumbs-position' ) ) {
 						Helper::get_template_part( 'template-parts/common/breadcrumbs' );

diff --git a/templates/layout/wrapper/one-column.php b/templates/layout/wrapper/one-column.php
@@ -5,7 +5,7 @@
  * @package snow-monkey
  * @author inc2734
  * @license GPL-2.0+
- * @version 19.0.0-beta1
+ * @version 19.1.5
  */
 
 use Framework\Helper;
@@ -73,7 +73,7 @@
 			?>
 
 			<div class="l-contents__body">
-				<div class="l-contents__container c-container">
+				<div class="l-contents__container">
 					<?php
 					if (
 						! is_front_page()

diff --git a/templates/layout/wrapper/right-sidebar.php b/templates/layout/wrapper/right-sidebar.php
@@ -5,7 +5,7 @@
  * @package snow-monkey
  * @author inc2734
  * @license GPL-2.0+
- * @version 19.0.0-beta1
+ * @version 19.1.5
  */
 
 use Framework\Helper;
@@ -73,7 +73,7 @@
 			?>
 
 			<div class="l-contents__body">
-				<div class="l-contents__container c-container">
+				<div class="l-contents__container">
 					<?php
 					if ( ! is_front_page() && in_array( get_theme_mod( 'breadcrumbs-position' ), array( 'default', 'content-width' ), true ) ) {
 						Helper::get_template_part( 'template-parts/common/breadcrumbs' );