Bläddra i källkod

Merge pull request #1588 from Automattic/fix/maywood-issue-1515

Maywood: Unset measuere variable default
Takashi Irie 5 år sedan
förälder
incheckning
5be64d4ac9
3 ändrade filer med 99 tillägg och 37 borttagningar
  1. 1 1
      maywood/sass/_config-child-theme-deep.scss
  2. 49 18
      maywood/style-rtl.css
  3. 49 18
      maywood/style.css

+ 1 - 1
maywood/sass/_config-child-theme-deep.scss

@@ -100,7 +100,7 @@ $config-global: (
 	/* Spacing */
 	/* Spacing */
 	"spacing": (
 	"spacing": (
 		"unit": (2 * $baseline-unit), // 16px
 		"unit": (2 * $baseline-unit), // 16px
-		"measure": inherit, // Use ch units here. ie: 60ch = 60 character max-width
+		"measure": unset, // Use ch units here. ie: 60ch = 60 character max-width
 		"horizontal": (2 * $baseline-unit), // 16px
 		"horizontal": (2 * $baseline-unit), // 16px
 		"vertical": (4 * $baseline-unit), // 32px matches default spacing in the editor.
 		"vertical": (4 * $baseline-unit), // 32px matches default spacing in the editor.
 	),
 	),

+ 49 - 18
maywood/style-rtl.css

@@ -11,7 +11,7 @@ License: GNU General Public License v2 or later
 License URI: LICENSE
 License URI: LICENSE
 Template: varia
 Template: varia
 Text Domain: maywood
 Text Domain: maywood
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, full-site-editing, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, full-site-editing, jetpack-global-styles
 
 
 This theme, like WordPress, is licensed under the GPL.
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -684,9 +684,7 @@ a {
 .site-header:after,
 .site-header:after,
 .site-content:after,
 .site-content:after,
 .site-footer:after {
 .site-footer:after {
-	content: "";
-	display: table;
-	table-layout: fixed;
+	clear: both;
 }
 }
 
 
 /**
 /**
@@ -696,7 +694,7 @@ a {
 header *,
 header *,
 main *,
 main *,
 footer * {
 footer * {
-	max-width: inherit;
+	max-width: unset;
 }
 }
 
 
 html,
 html,
@@ -1967,6 +1965,10 @@ hr.wp-block-separator {
 		 */
 		 */
 }
 }
 
 
+hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
+	max-width: 96px;
+}
+
 hr.wp-block-separator.is-style-dots:before {
 hr.wp-block-separator.is-style-dots:before {
 	color: #CCCCCC;
 	color: #CCCCCC;
 	font-size: 1.728rem;
 	font-size: 1.728rem;
@@ -2056,7 +2058,10 @@ table th,
  */
  */
 .aligncenter {
 .aligncenter {
 	clear: both;
 	clear: both;
+	display: block;
 	float: none;
 	float: none;
+	margin-left: auto;
+	margin-right: auto;
 	text-align: center;
 	text-align: center;
 }
 }
 
 
@@ -3002,36 +3007,43 @@ body:not(.fse-enabled) .footer-menu a {
 	margin-left: calc( $avatar-size + (0.5 * 16px));
 	margin-left: calc( $avatar-size + (0.5 * 16px));
 }
 }
 
 
-@media only screen and (min-width: 560px) {
-	.comment-meta {
-		margin-left: inherit;
-	}
+.comment-meta .comment-author {
+	line-height: 1.125;
+	margin-bottom: 4px;
+	padding-left: 40px;
+	max-width: calc(100% - 48px);
 }
 }
 
 
 @media only screen and (min-width: 560px) {
 @media only screen and (min-width: 560px) {
 	.comment-meta .comment-author {
 	.comment-meta .comment-author {
 		display: flex;
 		display: flex;
 		align-items: center;
 		align-items: center;
+		margin-bottom: 0;
+		padding-left: 0;
 	}
 	}
 }
 }
 
 
+.comment-meta .comment-author .fn {
+	word-wrap: break-word;
+	word-break: break-word;
+	hyphens: auto;
+}
+
 .comment-meta .comment-author .avatar {
 .comment-meta .comment-author .avatar {
 	display: block;
 	display: block;
 	position: absolute;
 	position: absolute;
 	left: 0;
 	left: 0;
 }
 }
 
 
-@media only screen and (min-width: 560px) {
-	.comment-meta .comment-author .avatar {
-		margin-left: 16px;
-		display: inherit;
-		position: inherit;
-		left: inherit;
-	}
-}
-
 .comment-meta .comment-metadata {
 .comment-meta .comment-metadata {
 	color: #181818;
 	color: #181818;
+	padding-left: 40px;
+}
+
+@media only screen and (min-width: 560px) {
+	.comment-meta .comment-metadata {
+		padding-left: 0;
+	}
 }
 }
 
 
 .comment-meta .comment-metadata a {
 .comment-meta .comment-metadata a {
@@ -3044,10 +3056,29 @@ body:not(.fse-enabled) .footer-menu a {
 
 
 @media only screen and (min-width: 560px) {
 @media only screen and (min-width: 560px) {
 	.comment-meta {
 	.comment-meta {
+		margin-left: inherit;
 		align-items: center;
 		align-items: center;
 		display: flex;
 		display: flex;
 		justify-content: space-between;
 		justify-content: space-between;
 	}
 	}
+	.comment-meta .comment-author {
+		display: flex;
+		align-items: center;
+		max-width: inherit;
+		flex: 0 1 auto;
+	}
+	.comment-meta .comment-author .fn {
+		padding-left: 16px;
+	}
+	.comment-meta .comment-author .avatar {
+		margin-left: 16px;
+		display: inherit;
+		position: inherit;
+		left: inherit;
+	}
+	.comment-meta .comment-metadata {
+		flex: 0 1 auto;
+	}
 }
 }
 
 
 .comment-metadata,
 .comment-metadata,

+ 49 - 18
maywood/style.css

@@ -11,7 +11,7 @@ License: GNU General Public License v2 or later
 License URI: LICENSE
 License URI: LICENSE
 Template: varia
 Template: varia
 Text Domain: maywood
 Text Domain: maywood
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, full-site-editing, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, full-site-editing, jetpack-global-styles
 
 
 This theme, like WordPress, is licensed under the GPL.
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -684,9 +684,7 @@ a {
 .site-header:after,
 .site-header:after,
 .site-content:after,
 .site-content:after,
 .site-footer:after {
 .site-footer:after {
-	content: "";
-	display: table;
-	table-layout: fixed;
+	clear: both;
 }
 }
 
 
 /**
 /**
@@ -696,7 +694,7 @@ a {
 header *,
 header *,
 main *,
 main *,
 footer * {
 footer * {
-	max-width: inherit;
+	max-width: unset;
 }
 }
 
 
 html,
 html,
@@ -1967,6 +1965,10 @@ hr.wp-block-separator {
 		 */
 		 */
 }
 }
 
 
+hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
+	max-width: 96px;
+}
+
 hr.wp-block-separator.is-style-dots:before {
 hr.wp-block-separator.is-style-dots:before {
 	color: #CCCCCC;
 	color: #CCCCCC;
 	font-size: 1.728rem;
 	font-size: 1.728rem;
@@ -2059,7 +2061,10 @@ table th,
  */
  */
 .aligncenter {
 .aligncenter {
 	clear: both;
 	clear: both;
+	display: block;
 	float: none;
 	float: none;
+	margin-right: auto;
+	margin-left: auto;
 	text-align: center;
 	text-align: center;
 }
 }
 
 
@@ -3019,36 +3024,43 @@ body:not(.fse-enabled) .footer-menu a {
 	margin-right: calc( $avatar-size + (0.5 * 16px));
 	margin-right: calc( $avatar-size + (0.5 * 16px));
 }
 }
 
 
-@media only screen and (min-width: 560px) {
-	.comment-meta {
-		margin-right: inherit;
-	}
+.comment-meta .comment-author {
+	line-height: 1.125;
+	margin-bottom: 4px;
+	padding-right: 40px;
+	max-width: calc(100% - 48px);
 }
 }
 
 
 @media only screen and (min-width: 560px) {
 @media only screen and (min-width: 560px) {
 	.comment-meta .comment-author {
 	.comment-meta .comment-author {
 		display: flex;
 		display: flex;
 		align-items: center;
 		align-items: center;
+		margin-bottom: 0;
+		padding-right: 0;
 	}
 	}
 }
 }
 
 
+.comment-meta .comment-author .fn {
+	word-wrap: break-word;
+	word-break: break-word;
+	hyphens: auto;
+}
+
 .comment-meta .comment-author .avatar {
 .comment-meta .comment-author .avatar {
 	display: block;
 	display: block;
 	position: absolute;
 	position: absolute;
 	right: 0;
 	right: 0;
 }
 }
 
 
-@media only screen and (min-width: 560px) {
-	.comment-meta .comment-author .avatar {
-		margin-right: 16px;
-		display: inherit;
-		position: inherit;
-		right: inherit;
-	}
-}
-
 .comment-meta .comment-metadata {
 .comment-meta .comment-metadata {
 	color: #181818;
 	color: #181818;
+	padding-right: 40px;
+}
+
+@media only screen and (min-width: 560px) {
+	.comment-meta .comment-metadata {
+		padding-right: 0;
+	}
 }
 }
 
 
 .comment-meta .comment-metadata a {
 .comment-meta .comment-metadata a {
@@ -3061,10 +3073,29 @@ body:not(.fse-enabled) .footer-menu a {
 
 
 @media only screen and (min-width: 560px) {
 @media only screen and (min-width: 560px) {
 	.comment-meta {
 	.comment-meta {
+		margin-right: inherit;
 		align-items: center;
 		align-items: center;
 		display: flex;
 		display: flex;
 		justify-content: space-between;
 		justify-content: space-between;
 	}
 	}
+	.comment-meta .comment-author {
+		display: flex;
+		align-items: center;
+		max-width: inherit;
+		flex: 0 1 auto;
+	}
+	.comment-meta .comment-author .fn {
+		padding-right: 16px;
+	}
+	.comment-meta .comment-author .avatar {
+		margin-right: 16px;
+		display: inherit;
+		position: inherit;
+		right: inherit;
+	}
+	.comment-meta .comment-metadata {
+		flex: 0 1 auto;
+	}
 }
 }
 
 
 .comment-metadata,
 .comment-metadata,