Page updates

Improve h1 spacing and fix SVG icons on /latest page
WordPress · Oct 15, 2024 · caa4c9c · caa4c9c
1 parent 5014d97
commit caa4c9c
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 5 deletions.
diff --git a/source/wp-content/themes/wporg-make-2024/src/style/style.scss b/source/wp-content/themes/wporg-make-2024/src/style/style.scss
@@ -9,6 +9,16 @@
 	--wp-components-color-accent-darker-10: var(--wp--preset--color--deep-blueberry);
 }
 
+%make-openverse-icon {
+	/* stylelint-disable-next-line function-url-quotes */
+	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M14.2044 9.30232C15.8203 9.30232 17.1303 7.98102 17.1303 6.35112C17.1303 4.72132 15.8203 3.40002 14.2044 3.40002C12.5885 3.40002 11.2785 4.72132 11.2785 6.35112C11.2785 7.98102 12.5885 9.30232 14.2044 9.30232ZM2.79999 6.35112C2.79999 7.97512 4.09939 9.30232 5.70739 9.30232V3.40002C4.09939 3.40002 2.79999 4.71902 2.79999 6.35112ZM7.03919 6.35112C7.03919 7.97512 8.33859 9.30232 9.94659 9.30232V3.40002C8.34679 3.40002 7.03919 4.71902 7.03919 6.35112ZM14.2044 16.5975C15.8203 16.5975 17.1303 15.2762 17.1303 13.6463C17.1303 12.0165 15.8203 10.6952 14.2044 10.6952C12.5885 10.6952 11.2785 12.0165 11.2785 13.6463C11.2785 15.2762 12.5885 16.5975 14.2044 16.5975ZM7.03919 13.6414C7.03919 15.2671 8.33859 16.5958 9.94659 16.5958V10.6952C8.34669 10.6952 7.03919 12.0156 7.03919 13.6414ZM2.79999 13.6414C2.79999 15.2754 4.09939 16.5958 5.70739 16.5958V10.6952C4.09939 10.6952 2.79999 12.0156 2.79999 13.6414Z' fill='%233858E9'/%3E%3C/svg%3E");
+}
+
+%make-performance-icon {
+	/* stylelint-disable-next-line function-url-quotes */
+	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M8.34251 4.43616H5.85528C5.56166 4.43616 5.32336 4.67446 5.32336 4.96807V7.45531C5.32336 7.74892 5.56166 7.98722 5.85528 7.98722H8.34251C8.63613 7.98722 8.87443 7.74892 8.87443 7.45531V4.96807C8.87443 4.67446 8.63613 4.43616 8.34251 4.43616Z' fill='%233858E9'/%3E%3Cpath d='M8.87443 12.5447V15.0319C8.87443 15.1723 8.81911 15.3085 8.71911 15.4085C8.61911 15.5085 8.48294 15.5638 8.34251 15.5638H5.85528C5.71485 15.5638 5.57868 15.5085 5.47868 15.4085C5.37868 15.3085 5.32336 15.1723 5.32336 15.0319V10.4851C5.32336 10.4 5.34464 10.317 5.38294 10.2425C5.38932 10.2298 5.39783 10.217 5.40422 10.2042C5.4489 10.134 5.50847 10.0745 5.58081 10.0298L8.06379 8.5319C8.15741 8.47445 8.26592 8.44892 8.37656 8.4553C8.48507 8.46169 8.58932 8.50424 8.67443 8.57232C8.72975 8.61701 8.77443 8.6702 8.80847 8.7319C8.84251 8.7936 8.86379 8.86169 8.87017 8.9319C8.87443 8.9553 8.87443 8.97871 8.87443 9.00424V10.1489C8.87443 10.1489 8.87443 10.1638 8.87443 10.1723V12.5298C8.87443 12.5298 8.87443 12.5383 8.87443 12.5447Z' fill='%233858E9'/%3E%3Cpath d='M14.6766 6.4319V10.0149C14.6766 10.0851 14.6638 10.1532 14.6362 10.2191C14.6085 10.283 14.5702 10.3425 14.5213 10.3915L13.0575 11.8553C13.0085 11.9042 12.9489 11.9447 12.8851 11.9702C12.8213 11.9979 12.7511 12.0106 12.6809 12.0106H9.88299C9.74256 12.0106 9.60639 11.9553 9.50639 11.8553C9.40639 11.7553 9.35107 11.6191 9.35107 11.4787V8.99148C9.35107 8.85105 9.40639 8.71488 9.50639 8.61488C9.60639 8.51488 9.74256 8.45956 9.88299 8.45956H12.666C12.666 8.45956 12.9021 8.45956 12.9021 8.22339C12.9021 7.98722 12.666 7.98722 12.666 7.98722H9.88299C9.74256 7.98722 9.60639 7.9319 9.50639 7.8319C9.40639 7.7319 9.35107 7.59573 9.35107 7.45531V4.96807C9.35107 4.82765 9.40639 4.69148 9.50639 4.59148C9.60639 4.49148 9.74256 4.43616 9.88299 4.43616H12.6809C12.7511 4.43616 12.8192 4.44892 12.8851 4.47658C12.9489 4.50424 13.0085 4.54254 13.0575 4.59148L14.5213 6.05531C14.5702 6.10424 14.6106 6.16382 14.6362 6.22765C14.6638 6.29148 14.6766 6.36169 14.6766 6.4319Z' fill='%233858E9'/%3E%3C/svg%3E");
+}
+
 .wporg-make-team-grid {
 	.make_site-placeholder {
 		display: none;
@@ -160,13 +170,13 @@
 		}
 
 		&.make-openverse .wp-block-post-title a::after {
-			/* stylelint-disable-next-line function-url-quotes */
-			mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M14.2044 9.30232C15.8203 9.30232 17.1303 7.98102 17.1303 6.35112C17.1303 4.72132 15.8203 3.40002 14.2044 3.40002C12.5885 3.40002 11.2785 4.72132 11.2785 6.35112C11.2785 7.98102 12.5885 9.30232 14.2044 9.30232ZM2.79999 6.35112C2.79999 7.97512 4.09939 9.30232 5.70739 9.30232V3.40002C4.09939 3.40002 2.79999 4.71902 2.79999 6.35112ZM7.03919 6.35112C7.03919 7.97512 8.33859 9.30232 9.94659 9.30232V3.40002C8.34679 3.40002 7.03919 4.71902 7.03919 6.35112ZM14.2044 16.5975C15.8203 16.5975 17.1303 15.2762 17.1303 13.6463C17.1303 12.0165 15.8203 10.6952 14.2044 10.6952C12.5885 10.6952 11.2785 12.0165 11.2785 13.6463C11.2785 15.2762 12.5885 16.5975 14.2044 16.5975ZM7.03919 13.6414C7.03919 15.2671 8.33859 16.5958 9.94659 16.5958V10.6952C8.34669 10.6952 7.03919 12.0156 7.03919 13.6414ZM2.79999 13.6414C2.79999 15.2754 4.09939 16.5958 5.70739 16.5958V10.6952C4.09939 10.6952 2.79999 12.0156 2.79999 13.6414Z' fill='%233858E9'/%3E%3C/svg%3E");
+
+			@extend %make-openverse-icon;
 		}
 
 		&.make-performance .wp-block-post-title a::after {
-			/* stylelint-disable-next-line function-url-quotes */
-			mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M8.34251 4.43616H5.85528C5.56166 4.43616 5.32336 4.67446 5.32336 4.96807V7.45531C5.32336 7.74892 5.56166 7.98722 5.85528 7.98722H8.34251C8.63613 7.98722 8.87443 7.74892 8.87443 7.45531V4.96807C8.87443 4.67446 8.63613 4.43616 8.34251 4.43616Z' fill='%233858E9'/%3E%3Cpath d='M8.87443 12.5447V15.0319C8.87443 15.1723 8.81911 15.3085 8.71911 15.4085C8.61911 15.5085 8.48294 15.5638 8.34251 15.5638H5.85528C5.71485 15.5638 5.57868 15.5085 5.47868 15.4085C5.37868 15.3085 5.32336 15.1723 5.32336 15.0319V10.4851C5.32336 10.4 5.34464 10.317 5.38294 10.2425C5.38932 10.2298 5.39783 10.217 5.40422 10.2042C5.4489 10.134 5.50847 10.0745 5.58081 10.0298L8.06379 8.5319C8.15741 8.47445 8.26592 8.44892 8.37656 8.4553C8.48507 8.46169 8.58932 8.50424 8.67443 8.57232C8.72975 8.61701 8.77443 8.6702 8.80847 8.7319C8.84251 8.7936 8.86379 8.86169 8.87017 8.9319C8.87443 8.9553 8.87443 8.97871 8.87443 9.00424V10.1489C8.87443 10.1489 8.87443 10.1638 8.87443 10.1723V12.5298C8.87443 12.5298 8.87443 12.5383 8.87443 12.5447Z' fill='%233858E9'/%3E%3Cpath d='M14.6766 6.4319V10.0149C14.6766 10.0851 14.6638 10.1532 14.6362 10.2191C14.6085 10.283 14.5702 10.3425 14.5213 10.3915L13.0575 11.8553C13.0085 11.9042 12.9489 11.9447 12.8851 11.9702C12.8213 11.9979 12.7511 12.0106 12.6809 12.0106H9.88299C9.74256 12.0106 9.60639 11.9553 9.50639 11.8553C9.40639 11.7553 9.35107 11.6191 9.35107 11.4787V8.99148C9.35107 8.85105 9.40639 8.71488 9.50639 8.61488C9.60639 8.51488 9.74256 8.45956 9.88299 8.45956H12.666C12.666 8.45956 12.9021 8.45956 12.9021 8.22339C12.9021 7.98722 12.666 7.98722 12.666 7.98722H9.88299C9.74256 7.98722 9.60639 7.9319 9.50639 7.8319C9.40639 7.7319 9.35107 7.59573 9.35107 7.45531V4.96807C9.35107 4.82765 9.40639 4.69148 9.50639 4.59148C9.60639 4.49148 9.74256 4.43616 9.88299 4.43616H12.6809C12.7511 4.43616 12.8192 4.44892 12.8851 4.47658C12.9489 4.50424 13.0085 4.54254 13.0575 4.59148L14.5213 6.05531C14.5702 6.10424 14.6106 6.16382 14.6362 6.22765C14.6638 6.29148 14.6766 6.36169 14.6766 6.4319Z' fill='%233858E9'/%3E%3C/svg%3E");
+
+			@extend %make-performance-icon;
 		}
 	}
 }
@@ -189,3 +199,30 @@
 	padding-right: unset !important;
 	margin-top: unset !important;
 }
+
+// /latest page
+.page {
+	#openverse,
+	#performance {
+		> .wp-block-group > p::before {
+			content: "";
+			width: 24px;
+			height: 24px;
+			mask-repeat: no-repeat;
+			mask-position: bottom;
+			mask-size: 24px;
+			display: block;
+			background-color: currentColor;
+		}
+	}
+
+	#openverse > .wp-block-group > p::before {
+
+		@extend %make-openverse-icon;
+	}
+
+	#performance > .wp-block-group > p::before {
+
+		@extend %make-performance-icon;
+	}
+}
diff --git a/source/wp-content/themes/wporg-make-2024/templates/page.html b/source/wp-content/themes/wporg-make-2024/templates/page.html
@@ -6,7 +6,7 @@
 	<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space","top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
 	<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--60)">
 
-		<!-- wp:post-title {"level":1,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}}} /-->
+		<!-- wp:post-title {"level":1,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|50"}}}} /-->
 
 		<!-- wp:post-content {"layout":{"inherit":true}} /-->