wip

WordPress · Sep 22, 2021 · 36de41e · 36de41e
1 parent 10041c1
commit 36de41e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 23 deletions.
diff --git a/mu-plugins/blocks/global-header-footer/header.php b/mu-plugins/blocks/global-header-footer/header.php
@@ -29,10 +29,6 @@
 		or maybe it'll do it automatically when it sees the urls (on production) match?
 		or maybe it wont ^ b/c it's a custom link?
 
-	is there a good way to make the mobile menu modal -- say that three times fast! -- include the logo/search/get-wp/etc like the design calls for?
-		if not easy, prob not worth rabbit-holing over it
-		maybe a filter in the function that generates the `modal-612fb537ba7ce-content` ID?
-
 sticky header on desktop, not mobile
 
 todo want true button, not button link - use html block

diff --git a/mu-plugins/blocks/global-header-footer/postcss/footer.pcss b/mu-plugins/blocks/global-header-footer/postcss/footer.pcss
@@ -23,6 +23,7 @@
 	}
 
 	& [class*="wp-container-"].site-footer__logos-container {
+		position: relative;
 		display: flex;
 		flex-wrap: wrap;
 		margin-top: calc(66px - var(--site-footer-nav-block-margin-bottom));
@@ -33,6 +34,10 @@
 		}
 	}
 
+	& .wp-block-image {
+		text-align: left;
+	}
+
 	& .site-footer__wporg-logo-mark {
 		flex-basis: 65%;
 		margin-bottom: 0;
@@ -52,9 +57,18 @@
 	}
 
 	& .wp-block-social-links {
+		position: relative;
+		top: -3px; /* Align with W logo. */
 		justify-content: flex-end;
 		flex-basis: 35%;
 		min-width: 100px;
+
+		@media (--tablet) {
+			top: -11px; /* Align with W logo. */
+			justify-content: flex-end;
+			flex-basis: 33%;
+			order: 3;
+		}
 	}
 
 	& .wp-block-social-links,
@@ -66,35 +80,24 @@
 		padding-bottom: 0;
 	}
 
-	& .wp-block-social-links .wp-social-link:last-child {
-		margin-right: 0;
-	}
-
 	& .wp-block-social-links .wp-social-link svg {
+		width: 29px;
+		height: 29px;
 		fill: var(--wp--preset--color--white);
 	}
 
-	& .wp-block-social-links {
-		@media (--tablet) {
-			justify-content: flex-end;
-			flex-basis: 33%;
-			order: 3;
-		}
-	}
-
 	& .wp-block-image.site-footer__code_is_poetry {
 		flex-basis: 100%;
 		margin-top: 9px;
 		margin-bottom: 0;
 
 		@media (--tablet) {
-			flex-basis: 33%;
-			order: 2;
-			text-align: right; /* Optical illusion to make this image look more centered. */
+			position: absolute;
+			top: 0;
+			left: calc( 50% - ( 188px / 2 ) ); /* Must match width of the image. */
+			width: 188px;
+			height: 13px;
+			margin-top: 3px;
 		}
 	}
-
-	& .wp-block-image {
-		text-align: left;
-	}
 }