Jelajahi Sumber

Coutoire: Fix padding issues in menu on mobile screens.

Allan Cole 5 tahun lalu
induk
melakukan
525e266c6b
4 mengubah file dengan 143 tambahan dan 160 penghapusan
  1. 5 10
      coutoire/sass/_extra-child-theme.scss
  2. 48 38
      coutoire/style-editor.css
  3. 45 56
      coutoire/style-rtl.css
  4. 45 56
      coutoire/style.css

+ 5 - 10
coutoire/sass/_extra-child-theme.scss

@@ -64,16 +64,11 @@ a {
 	}
 }
 
-.main-navigation > div > ul > li:first-of-type,
-.social-navigation > div > ul > li:first-of-type,
-.footer-navigation .footer-menu > li:first-of-type {
-	margin-left: 0;
-}
-
-.main-navigation > div > ul > li:last-of-type,
-.social-navigation > div > ul > li:last-of-type,
-.footer-navigation .footer-menu > li:last-of-type {
-	margin-right: 0;
+.main-navigation > div > ul > li > a,
+.social-navigation > div > ul > li > a,
+.footer-navigation .footer-menu > li > a {
+	padding-left: 0;
+	padding-right: 0;
 }
 
 .main-navigation {

+ 48 - 38
coutoire/style-editor.css

@@ -429,6 +429,45 @@ object {
 	padding-left: 0;
 }
 
+.wp-block-latest-posts > li > a {
+	font-family: "EB Garamond", serif;
+	font-size: 1.728rem;
+	font-weight: 200;
+	line-height: 1;
+}
+
+.wp-block-latest-posts:not(.is-grid) > li {
+	/* Vertical margins logic */
+	margin-top: 32px;
+	margin-bottom: 32px;
+}
+
+.wp-block-latest-posts:not(.is-grid) > li:first-child {
+	margin-top: 0;
+}
+
+.wp-block-latest-posts:not(.is-grid) > li:last-child {
+	margin-bottom: 0;
+}
+
+.wp-block-latest-posts .wp-block-latest-posts__post-date {
+	color: #767676;
+	font-size: 0.83333rem;
+	line-height: 1.78;
+}
+
+[class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date,
+.has-background .wp-block-latest-posts .wp-block-latest-posts__post-date {
+	color: currentColor;
+}
+
+.wp-block-latest-posts .wp-block-latest-posts__post-excerpt,
+.wp-block-latest-posts .wp-block-latest-posts__post-full-content {
+	font-size: 0.83333rem;
+	line-height: 1.78;
+	margin: 0;
+}
+
 .wp-block-media-text .block-editor-inner-blocks {
 	padding-right: 16px;
 	padding-left: 16px;
@@ -637,14 +676,20 @@ table th,
 	color: white !important;
 }
 
+.has-background:not(.has-background-background-color) a,
+.has-background p, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6,
+.has-background .wp-block-quote__citation {
+	color: currentColor;
+}
+
 .has-primary-background-color[class] {
 	background-color: black !important;
 	color: white;
 }
 
-.has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6,
-.has-primary-background-color[class] .wp-block-quote__citation {
-	color: currentColor;
+.has-primary-background-color[class] {
+	background-color: black !important;
+	color: white;
 }
 
 .has-secondary-background-color[class] {
@@ -652,71 +697,36 @@ table th,
 	color: white;
 }
 
-.has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6,
-.has-secondary-background-color[class] .wp-block-quote__citation {
-	color: currentColor;
-}
-
 .has-foreground-background-color[class] {
 	background-color: #444444 !important;
 	color: white;
 }
 
-.has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6,
-.has-foreground-background-color[class] .wp-block-quote__citation {
-	color: currentColor;
-}
-
 .has-foreground-light-background-color[class] {
 	background-color: #767676 !important;
 	color: white;
 }
 
-.has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6,
-.has-foreground-light-background-color[class] .wp-block-quote__citation {
-	color: currentColor;
-}
-
 .has-foreground-dark-background-color[class] {
 	background-color: #111111 !important;
 	color: white;
 }
 
-.has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6,
-.has-foreground-dark-background-color[class] .wp-block-quote__citation {
-	color: currentColor;
-}
-
 .has-background-light-background-color[class] {
 	background-color: #FAFAFA !important;
 	color: #444444;
 }
 
-.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6,
-.has-background-light-background-color[class] .wp-block-quote__citation {
-	color: currentColor;
-}
-
 .has-background-dark-background-color[class] {
 	background-color: #DDDDDD !important;
 	color: #444444;
 }
 
-.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6,
-.has-background-dark-background-color[class] .wp-block-quote__citation {
-	color: currentColor;
-}
-
 .has-background-background-color[class] {
 	background-color: white !important;
 	color: #444444;
 }
 
-.has-background-background-color[class] p, .has-background-background-color[class] h1, .has-background-background-color[class] h2, .has-background-background-color[class] h3, .has-background-background-color[class] h4, .has-background-background-color[class] h5, .has-background-background-color[class] h6,
-.has-background-background-color[class] .wp-block-quote__citation {
-	color: currentColor;
-}
-
 .is-small-text,
 .has-small-font-size {
 	font-size: 0.83333em;

+ 45 - 56
coutoire/style-rtl.css

@@ -1530,12 +1530,29 @@ img {
 	line-height: 1.78;
 }
 
-.wp-block-latest-posts .wp-block-latest-posts__post-excerpt {
+.entry-content [class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date,
+.entry-content .has-background .wp-block-latest-posts .wp-block-latest-posts__post-date {
+	color: currentColor;
+}
+
+.wp-block-latest-posts .wp-block-latest-posts__post-excerpt,
+.wp-block-latest-posts .wp-block-latest-posts__post-full-content {
 	font-size: 0.83333rem;
 	line-height: 1.78;
 	margin: 0;
 }
 
+.wp-block-latest-posts.alignfull {
+	padding-right: 16px;
+	padding-left: 16px;
+}
+
+.entry-content [class*="inner-container"] .wp-block-latest-posts.alignfull,
+.entry-content .has-background .wp-block-latest-posts.alignfull {
+	padding-right: 0;
+	padding-left: 0;
+}
+
 .gallery-item {
 	display: inline-block;
 	text-align: center;
@@ -1658,10 +1675,6 @@ p.has-background {
 	padding: 16px 16px;
 }
 
-p.has-background:not(.has-background-background-color) a {
-	color: currentColor;
-}
-
 .a8c-posts-list__listing {
 	list-style: none;
 	margin: 0;
@@ -2062,78 +2075,52 @@ table th,
 	color: white !important;
 }
 
+.has-background:not(.has-background-background-color) a,
+.has-background p, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6,
+.has-background .wp-block-quote__citation {
+	color: currentColor;
+}
+
 .has-primary-background-color[class] {
 	background-color: black !important;
 	color: white;
 }
 
-.has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6 {
-	color: currentColor;
-}
-
 .has-secondary-background-color[class] {
 	background-color: #FF7A5C !important;
 	color: white;
 }
 
-.has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6 {
-	color: currentColor;
-}
-
 .has-foreground-background-color[class] {
 	background-color: #444444 !important;
 	color: white;
 }
 
-.has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6 {
-	color: currentColor;
-}
-
 .has-foreground-light-background-color[class] {
 	background-color: #767676 !important;
 	color: white;
 }
 
-.has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6 {
-	color: currentColor;
-}
-
 .has-foreground-dark-background-color[class] {
 	background-color: #111111 !important;
 	color: white;
 }
 
-.has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6 {
-	color: currentColor;
-}
-
 .has-background-light-background-color[class] {
 	background-color: #FAFAFA !important;
 	color: #444444;
 }
 
-.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6 {
-	color: currentColor;
-}
-
 .has-background-dark-background-color[class] {
 	background-color: #DDDDDD !important;
 	color: #444444;
 }
 
-.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6 {
-	color: currentColor;
-}
-
 .has-background-background-color[class] {
 	background-color: white !important;
 	color: #444444;
 }
 
-.has-background-background-color[class] p, .has-background-background-color[class] h1, .has-background-background-color[class] h2, .has-background-background-color[class] h3, .has-background-background-color[class] h4, .has-background-background-color[class] h5, .has-background-background-color[class] h6 {
-	color: currentColor;
-}
-
 .is-small-text,
 .has-small-font-size {
 	font-size: 0.83333rem;
@@ -2429,14 +2416,6 @@ 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;
 }
@@ -2456,6 +2435,15 @@ table th,
 	margin-top: -0.11em;
 }
 
+@media only screen and (min-width: 560px) {
+	.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 {
 	margin: 0;
 	position: relative;
@@ -2485,7 +2473,13 @@ table th,
 	font-family: "Work Sans", sans-serif;
 	font-size: 0.83333rem;
 	font-weight: 600;
-	padding: 10px;
+	padding: 10px 0;
+}
+
+@media only screen and (min-width: 560px) {
+	.main-navigation a {
+		padding: 10px;
+	}
 }
 
 .main-navigation a:link, .main-navigation a:visited {
@@ -3468,16 +3462,11 @@ a:hover, a:focus {
 	text-decoration: none;
 }
 
-.main-navigation > div > ul > li:first-of-type,
-.social-navigation > div > ul > li:first-of-type,
-.footer-navigation .footer-menu > li:first-of-type {
-	margin-right: 0;
-}
-
-.main-navigation > div > ul > li:last-of-type,
-.social-navigation > div > ul > li:last-of-type,
-.footer-navigation .footer-menu > li:last-of-type {
-	margin-left: 0;
+.main-navigation > div > ul > li > a,
+.social-navigation > div > ul > li > a,
+.footer-navigation .footer-menu > li > a {
+	padding-right: 0;
+	padding-left: 0;
 }
 
 .main-navigation {

+ 45 - 56
coutoire/style.css

@@ -1530,12 +1530,29 @@ img {
 	line-height: 1.78;
 }
 
-.wp-block-latest-posts .wp-block-latest-posts__post-excerpt {
+.entry-content [class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date,
+.entry-content .has-background .wp-block-latest-posts .wp-block-latest-posts__post-date {
+	color: currentColor;
+}
+
+.wp-block-latest-posts .wp-block-latest-posts__post-excerpt,
+.wp-block-latest-posts .wp-block-latest-posts__post-full-content {
 	font-size: 0.83333rem;
 	line-height: 1.78;
 	margin: 0;
 }
 
+.wp-block-latest-posts.alignfull {
+	padding-left: 16px;
+	padding-right: 16px;
+}
+
+.entry-content [class*="inner-container"] .wp-block-latest-posts.alignfull,
+.entry-content .has-background .wp-block-latest-posts.alignfull {
+	padding-left: 0;
+	padding-right: 0;
+}
+
 .gallery-item {
 	display: inline-block;
 	text-align: center;
@@ -1658,10 +1675,6 @@ p.has-background {
 	padding: 16px 16px;
 }
 
-p.has-background:not(.has-background-background-color) a {
-	color: currentColor;
-}
-
 .a8c-posts-list__listing {
 	list-style: none;
 	margin: 0;
@@ -2067,78 +2080,52 @@ table th,
 	color: white !important;
 }
 
+.has-background:not(.has-background-background-color) a,
+.has-background p, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6,
+.has-background .wp-block-quote__citation {
+	color: currentColor;
+}
+
 .has-primary-background-color[class] {
 	background-color: black !important;
 	color: white;
 }
 
-.has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6 {
-	color: currentColor;
-}
-
 .has-secondary-background-color[class] {
 	background-color: #FF7A5C !important;
 	color: white;
 }
 
-.has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6 {
-	color: currentColor;
-}
-
 .has-foreground-background-color[class] {
 	background-color: #444444 !important;
 	color: white;
 }
 
-.has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6 {
-	color: currentColor;
-}
-
 .has-foreground-light-background-color[class] {
 	background-color: #767676 !important;
 	color: white;
 }
 
-.has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6 {
-	color: currentColor;
-}
-
 .has-foreground-dark-background-color[class] {
 	background-color: #111111 !important;
 	color: white;
 }
 
-.has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6 {
-	color: currentColor;
-}
-
 .has-background-light-background-color[class] {
 	background-color: #FAFAFA !important;
 	color: #444444;
 }
 
-.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6 {
-	color: currentColor;
-}
-
 .has-background-dark-background-color[class] {
 	background-color: #DDDDDD !important;
 	color: #444444;
 }
 
-.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6 {
-	color: currentColor;
-}
-
 .has-background-background-color[class] {
 	background-color: white !important;
 	color: #444444;
 }
 
-.has-background-background-color[class] p, .has-background-background-color[class] h1, .has-background-background-color[class] h2, .has-background-background-color[class] h3, .has-background-background-color[class] h4, .has-background-background-color[class] h5, .has-background-background-color[class] h6 {
-	color: currentColor;
-}
-
 .is-small-text,
 .has-small-font-size {
 	font-size: 0.83333rem;
@@ -2434,14 +2421,6 @@ 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;
 }
@@ -2461,6 +2440,15 @@ table th,
 	margin-top: -0.11em;
 }
 
+@media only screen and (min-width: 560px) {
+	.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 {
 	margin: 0;
 	position: relative;
@@ -2490,7 +2478,13 @@ table th,
 	font-family: "Work Sans", sans-serif;
 	font-size: 0.83333rem;
 	font-weight: 600;
-	padding: 10px;
+	padding: 10px 0;
+}
+
+@media only screen and (min-width: 560px) {
+	.main-navigation a {
+		padding: 10px;
+	}
 }
 
 .main-navigation a:link, .main-navigation a:visited {
@@ -3485,16 +3479,11 @@ a:hover, a:focus {
 	text-decoration: none;
 }
 
-.main-navigation > div > ul > li:first-of-type,
-.social-navigation > div > ul > li:first-of-type,
-.footer-navigation .footer-menu > li:first-of-type {
-	margin-left: 0;
-}
-
-.main-navigation > div > ul > li:last-of-type,
-.social-navigation > div > ul > li:last-of-type,
-.footer-navigation .footer-menu > li:last-of-type {
-	margin-right: 0;
+.main-navigation > div > ul > li > a,
+.social-navigation > div > ul > li > a,
+.footer-navigation .footer-menu > li > a {
+	padding-left: 0;
+	padding-right: 0;
 }
 
 .main-navigation {