ソースを参照

Maywood: Update mobile menu and cover block default colours

Takashi Irie 6 年 前
コミット
78995da028

+ 4 - 0
maywood/sass/_config-child-theme-deep.scss

@@ -190,6 +190,10 @@ $config-button: (
  */
 $config-cover: (
 	"height": #{15 * map-deep-get($config-global, "spacing", "vertical")},
+	"color": (
+		"foreground": #{map-deep-get($config-global, "color", "white")},
+		"background": #{map-deep-get($config-global, "color", "black")},
+	)
 );
 
 /**

+ 9 - 4
maywood/style-editor.css

@@ -327,7 +327,8 @@ object {
 
 .wp-block-cover,
 .wp-block-cover-image {
-	background-color: #181818;
+	background-color: black;
+	color: white;
 	min-height: 480px;
 	/* Treating H2 separately to account for legacy /core styles */
 }
@@ -335,18 +336,22 @@ object {
 .wp-block-cover .wp-block-cover__inner-container,
 .wp-block-cover .wp-block-cover-image-text,
 .wp-block-cover .wp-block-cover-text,
+.wp-block-cover .block-editor-block-list__block,
 .wp-block-cover-image .wp-block-cover__inner-container,
 .wp-block-cover-image .wp-block-cover-image-text,
-.wp-block-cover-image .wp-block-cover-text {
-	color: #FFFFFF;
+.wp-block-cover-image .wp-block-cover-text,
+.wp-block-cover-image .block-editor-block-list__block {
+	color: white;
 }
 
 .wp-block-cover .wp-block-cover__inner-container a,
 .wp-block-cover .wp-block-cover-image-text a,
 .wp-block-cover .wp-block-cover-text a,
+.wp-block-cover .block-editor-block-list__block a,
 .wp-block-cover-image .wp-block-cover__inner-container a,
 .wp-block-cover-image .wp-block-cover-image-text a,
-.wp-block-cover-image .wp-block-cover-text a {
+.wp-block-cover-image .wp-block-cover-text a,
+.wp-block-cover-image .block-editor-block-list__block a {
 	color: currentColor;
 }
 

+ 31 - 28
maywood/style-rtl.css

@@ -1212,7 +1212,7 @@ input.has-focus[type="submit"],
 
 .wp-block-cover,
 .wp-block-cover-image {
-	background-color: #181818;
+	background-color: black;
 	min-height: 480px;
 	margin: inherit;
 	/* Treating H2 separately to account for legacy /core styles */
@@ -1227,7 +1227,7 @@ input.has-focus[type="submit"],
 .wp-block-cover-image .wp-block-cover__inner-container,
 .wp-block-cover-image .wp-block-cover-image-text,
 .wp-block-cover-image .wp-block-cover-text {
-	color: #FFFFFF;
+	color: white;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
@@ -2413,31 +2413,28 @@ table th,
 	}
 }
 
-.main-navigation > div > ul > li:first-of-type > a {
-	padding-right: 0;
-}
-
-.main-navigation > div > ul > li:last-of-type > a {
-	padding-left: 0;
-}
-
-.main-navigation > div > ul > li > a {
-	line-height: 1;
-}
-
-.main-navigation > div > ul > li > a:before, .main-navigation > div > ul > li > a:after {
-	content: '';
-	display: block;
-	height: 0;
-	width: 0;
-}
-
-.main-navigation > div > ul > li > a:before {
-	margin-bottom: -0.12em;
-}
-
-.main-navigation > div > ul > li > a:after {
-	margin-top: -0.11em;
+@media only screen and (min-width: 560px) {
+	.main-navigation > div > ul > li > a {
+		line-height: 1;
+	}
+	.main-navigation > div > ul > li > a:before, .main-navigation > div > ul > li > a:after {
+		content: '';
+		display: block;
+		height: 0;
+		width: 0;
+	}
+	.main-navigation > div > ul > li > a:before {
+		margin-bottom: -0.12em;
+	}
+	.main-navigation > div > ul > li > a:after {
+		margin-top: -0.11em;
+	}
+	.main-navigation > div > ul > li:first-of-type > a {
+		padding-right: 0;
+	}
+	.main-navigation > div > ul > li:last-of-type > a {
+		padding-left: 0;
+	}
 }
 
 .main-navigation > div > ul > li > .sub-menu {
@@ -2469,7 +2466,13 @@ table th,
 	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 1rem;
 	font-weight: 700;
-	padding: 16px;
+	padding: 8px 0;
+}
+
+@media only screen and (min-width: 560px) {
+	.main-navigation a {
+		padding: 16px;
+	}
 }
 
 .main-navigation a:link, .main-navigation a:visited {

+ 31 - 28
maywood/style.css

@@ -1212,7 +1212,7 @@ input.has-focus[type="submit"],
 
 .wp-block-cover,
 .wp-block-cover-image {
-	background-color: #181818;
+	background-color: black;
 	min-height: 480px;
 	margin: inherit;
 	/* Treating H2 separately to account for legacy /core styles */
@@ -1227,7 +1227,7 @@ input.has-focus[type="submit"],
 .wp-block-cover-image .wp-block-cover__inner-container,
 .wp-block-cover-image .wp-block-cover-image-text,
 .wp-block-cover-image .wp-block-cover-text {
-	color: #FFFFFF;
+	color: white;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
@@ -2418,31 +2418,28 @@ table th,
 	}
 }
 
-.main-navigation > div > ul > li:first-of-type > a {
-	padding-left: 0;
-}
-
-.main-navigation > div > ul > li:last-of-type > a {
-	padding-right: 0;
-}
-
-.main-navigation > div > ul > li > a {
-	line-height: 1;
-}
-
-.main-navigation > div > ul > li > a:before, .main-navigation > div > ul > li > a:after {
-	content: '';
-	display: block;
-	height: 0;
-	width: 0;
-}
-
-.main-navigation > div > ul > li > a:before {
-	margin-bottom: -0.12em;
-}
-
-.main-navigation > div > ul > li > a:after {
-	margin-top: -0.11em;
+@media only screen and (min-width: 560px) {
+	.main-navigation > div > ul > li > a {
+		line-height: 1;
+	}
+	.main-navigation > div > ul > li > a:before, .main-navigation > div > ul > li > a:after {
+		content: '';
+		display: block;
+		height: 0;
+		width: 0;
+	}
+	.main-navigation > div > ul > li > a:before {
+		margin-bottom: -0.12em;
+	}
+	.main-navigation > div > ul > li > a:after {
+		margin-top: -0.11em;
+	}
+	.main-navigation > div > ul > li:first-of-type > a {
+		padding-left: 0;
+	}
+	.main-navigation > div > ul > li:last-of-type > a {
+		padding-right: 0;
+	}
 }
 
 .main-navigation > div > ul > li > .sub-menu {
@@ -2474,7 +2471,13 @@ table th,
 	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 1rem;
 	font-weight: 700;
-	padding: 16px;
+	padding: 8px 0;
+}
+
+@media only screen and (min-width: 560px) {
+	.main-navigation a {
+		padding: 16px;
+	}
 }
 
 .main-navigation a:link, .main-navigation a:visited {