[#12] styling header navigation with logout button

[#12] updating header part [#12] adding site default logo function [#12] setting up default logo [#12] adding logo copy function [#12] update site logo
Good-Bids · Dec 18, 2023 · 48030ca · 48030ca
1 parent 6e9a12c
commit 48030ca
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 7 deletions.
diff --git a/themes/goodbids-nonprofit/assets/css/theme.css b/themes/goodbids-nonprofit/assets/css/theme.css
@@ -8,3 +8,35 @@
 	background-color: var(--wp--preset--color--contrast);
 	color: var(--wp--preset--color--contrast-4);
 }
+
+/*TODO move this all to Tailwind once we set that up*/
+.wp-button-custom > a {
+	background-color: var(--wp--preset--color--contrast);
+	color: var(--wp--preset--color--base-2);
+	font-size: var(--wp--preset--font-size--x-small);
+	font-weight: 500;
+	text-decoration: none;
+    border-color: var(--wp--preset--color--contrast);
+    border-radius: 100px;
+    border-width: 0;
+	padding-top: 0.8rem;
+    padding-right: 1.5rem;
+	padding-left: 1.5rem;
+	padding-bottom: 0.8rem;
+
+	&:hover {
+		background-color: var(--wp--preset--color--contrast-4);
+		border-color: var(--wp--preset--color--contrast);
+		color: var(--wp--preset--color--contrast);
+	}
+
+	&:focus {
+		background-color: var(--wp--preset--color--contrast-4);
+		border-color: var(--wp--preset--color--contrast);
+		color: var(--wp--preset--color--contrast);
+		outline-color: var(--wp--preset--color--contrast);
+		outline-offset: 2px;
+		outline-style: dotted;
+		outline-width: 1px;
+	}
+}
diff --git a/themes/goodbids-nonprofit/parts/header.html b/themes/goodbids-nonprofit/parts/header.html
@@ -3,21 +3,36 @@
 	style="padding-top:20px;padding-bottom:20px">
 	<!-- wp:group {"align":"wide","layout":{"type":"flex","justifyContent":"space-between","flexWrap":"wrap"}} -->
 	<div class="wp-block-group alignwide">
-		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"},"layout":{"selfStretch":"fit","flexSize":null}},"layout":{"type":"flex"}} -->
+		<!-- wp:group {"style":{"spacing":{"blockGap":"0.2rem"},"layout":{"selfStretch":"fit","flexSize":null}},"layout":{"type":"flex"}} -->
 		<div class="wp-block-group">
-			<!-- wp:site-logo {"width":60 } /-->
+
+			<!-- wp:site-logo {"width":160,"shouldSyncIcon":true,"style":{"spacing":{"margin":{"top":"0","bottom":"0","left":"0","right":"0.5rem"}}}} /-->
+
+			<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
+			<div class="wp-block-group">
+				<!-- wp:paragraph {"style":{"layout":{"selfStretch":"fixed","flexSize":"25px"}},"fontSize":"x-small"} -->
+					<p class="has-x-small-font-size">for</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:group -->
 
 			<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
 			<div class="wp-block-group">
-				<!-- wp:site-title {"level":0} /-->
+				<!-- wp:site-title {"level":0,"fontSize":"x-small"} /-->
 			</div>
 			<!-- /wp:group -->
 		</div>
 		<!-- /wp:group -->
 
-		<!-- wp:navigation {"layout":{"type":"flex","justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"var:preset|spacing|20"},"layout":{"selfStretch":"fit","flexSize":null}}} /-->
+		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
+		<div class="wp-block-group">
+			<!-- wp:navigation {"ref":13,"layout":{"type":"flex","justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"var:preset|spacing|20"},"layout":{"selfStretch":"fit","flexSize":null}},"fontSize":"x-small"} /-->
+			<!-- wp:loginout {"className":"wp-button-custom","style":{"spacing":{"margin":{"top":"0"},"blockGap":"var:preset|spacing|20"},"layout":{"selfStretch":"fit","flexSize":null}},"textColor":"base-2","fontSize":"x-small"} /-->
+		</div>
+		<!-- /wp:group -->
+
+	</div>
 
-		<!-- wp:loginout /--></div>
 	<!-- /wp:group -->
 </div>
 <!-- /wp:group -->
diff --git a/themes/goodbids-nonprofit/style.css b/themes/goodbids-nonprofit/style.css
@@ -4,7 +4,7 @@ Theme URI: https://goodbids.org
 Author: Viget
 Author URI: https://viget.com
 Description: Twenty Twenty-Four child theme for GoodBids Nonprofit sites.
-Version: 1.0
+Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: goodbids-nonprofit

diff --git a/themes/goodbids-nonprofit/templates/front-page.html b/themes/goodbids-nonprofit/templates/front-page.html
@@ -1,3 +1,3 @@
 <!-- wp:template-part {"slug":"header","area":"header","tagName":"header"} /-->
-	<!-- wp:pattern {"slug":"goodbids-nonprofit/template-home-nonprofit"} /-->
+	<!-- wp:pattern {"slug":"goodbids-np/template-home-nonprofit"} /-->
 <!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->
diff --git a/themes/goodbids-nonprofit/theme.json b/themes/goodbids-nonprofit/theme.json
@@ -51,6 +51,12 @@
 		"typography": {
 			"lineHeight": false,
 			"fontSizes": [
+				{
+					"fluid": false,
+					"name": "X Small",
+					"size": "0.9rem",
+					"slug": "x-small"
+				},
 				{
 					"fluid": false,
 					"name": "Small",