600-900px, Place location, date, and time labels horizontally in a si…

…ngle line.
WordPress · Dec 11, 2023 · 44cf1a3 · 44cf1a3
1 parent ac425be
commit 44cf1a3
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 10 deletions.
diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss/base/breakpoints.pcss b/public_html/wp-content/themes/wporg-events-2023/postcss/base/breakpoints.pcss
@@ -22,7 +22,7 @@
  * wporg-parent-2021
  * @link https://github.com/WordPress/wporg-parent-2021/blob/trunk/source/wp-content/themes/wporg-parent-2021/sass/base/_breakpoints.scss
  */
-@custom-media --small-only (max-width: 559px);
+@custom-media --small-only (max-width: 599px);
 @custom-media --giant (min-width: 2000px);
 
 /*

diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/wporg-google-map.pcss b/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/wporg-google-map.pcss
@@ -9,7 +9,7 @@
 	list-style: none;
 	font-size: var(--wp--preset--font-size--small);
 
-	@media (--medium) {
+	@media (--large) {
 		display: grid;
 		align-items: start;
 		gap: var(--wp--preset--spacing--20);
@@ -54,23 +54,36 @@
 		text-decoration: none;
 	}
 
-	@media (--medium-small) {
-		.wporg-marker-list-item__location {
+
+	.wporg-marker-list-item__location {
+
+		@media (--medium-small) {
 			margin-top: 2px;
 			margin-bottom: -2px;
 		}
+
+		@media (--small) {
+			display: inline;
+		}
 	}
 
 	.wporg-marker-list-item__date-time {
-		@media (--medium) {
-			display: block;
-			text-align: right;
 
+		@media (--small) {
+			display: inline-flex;
+		}
+
+		@media (--medium) {
 			.wporg-google-map__date {
 				display: block;
 			}
 		}
 
+		@media (--large) {
+			display: block;
+			text-align: right;
+		}
+
 		@media (--huge) {
 			white-space: nowrap;
 
@@ -84,7 +97,8 @@
 		position: relative;
 	}
 
-	.wporg-google-map__date:after {
+	.wporg-marker-list-item__location::after,
+	.wporg-google-map__date::after {
 		content: '';
 		margin-top: -1px; /* vertical-middle doesn't subtract the size of the element */
 		margin-left: 10px;
@@ -97,8 +111,15 @@
 		vertical-align: middle;
 	}
 
-	@media (--medium) {
-		.wporg-google-map__date:after {
+	@media (--large) {
+		.wporg-marker-list-item__location::after,
+		.wporg-google-map__date::after {
+			display: none;
+		}
+	}
+
+	@media (--small-only) {
+		.wporg-marker-list-item__location::after {
 			display: none;
 		}
 	}