Browse Source

Merge pull request #1593 from Automattic/fix/shawburn-issue-1515

Shawburn: Unset measuere variable default
Takashi Irie 5 years ago
parent
commit
0fdced782a
3 changed files with 91 additions and 37 deletions
  1. 1 1
      shawburn/sass/_config-child-theme-deep.scss
  2. 45 18
      shawburn/style-rtl.css
  3. 45 18
      shawburn/style.css

+ 1 - 1
shawburn/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.
 	),
 	),

+ 45 - 18
shawburn/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: shawburn
 Text Domain: shawburn
-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, 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, 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,
@@ -2060,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;
 }
 }
 
 
@@ -3005,36 +3006,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: #444444;
 	color: #444444;
+	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 {
@@ -3047,10 +3055,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,

+ 45 - 18
shawburn/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: shawburn
 Text Domain: shawburn
-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, 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, 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,
@@ -2063,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;
 }
 }
 
 
@@ -3022,36 +3023,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: #444444;
 	color: #444444;
+	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 {
@@ -3064,10 +3072,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,