global-navbar fixes (#105)

leaningtech · Aug 1, 2024 · dc14385 · dc14385
1 parent 6c81378
commit dc14385
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 33 deletions.
diff --git a/packages/global-navbar/src/Nav.svelte b/packages/global-navbar/src/Nav.svelte
@@ -123,39 +123,6 @@
 		gap: 1rem;
 
 		position: relative; /* for .select */
-
-		/* TODO: make this more modular */
-		& > li {
-			height: 1.5rem;
-
-			&:empty {
-				flex: 1;
-			}
-
-			& > a,
-			& > button {
-				display: flex;
-				align-items: center;
-				height: 100%;
-
-				color: rgb(168 162 158);
-				background: none;
-				border: 0;
-				font: inherit;
-				text-decoration: none;
-				font-weight: 600;
-
-				cursor: pointer;
-
-				& svg {
-					height: 100%;
-
-					&.global-navbar-social-icon {
-						height: 1rem;
-					}
-				}
-			}
-		}
 	}
 
 	#global-navbar-technology,

diff --git a/packages/global-navbar/src/SelectMenu.svelte b/packages/global-navbar/src/SelectMenu.svelte
@@ -18,6 +18,7 @@
 </script>
 
 <select on:change={change}>
+	<option selected disabled>Leaning Technologies</option>
 	{#each Object.entries(menu) as [label, items]}
 		<optgroup {label}>
 			{#each items as { title }}

diff --git a/packages/global-navbar/src/items/Dropdown.svelte b/packages/global-navbar/src/items/Dropdown.svelte
@@ -24,3 +24,24 @@
 		</svg>
 	</button>
 </Item>
+
+<style>
+	button {
+		display: flex;
+		align-items: center;
+		height: 100%;
+
+		color: rgb(168 162 158);
+		background: none;
+		border: 0;
+		font: inherit;
+		text-decoration: none;
+		font-weight: 600;
+
+		cursor: pointer;
+	}
+
+	svg {
+		height: 100%;
+	}
+</style>
diff --git a/packages/global-navbar/src/items/Item.svelte b/packages/global-navbar/src/items/Item.svelte
@@ -5,5 +5,6 @@
 <style>
 	li {
 		height: 1.5rem;
+		margin: 0; /* required to override style on cheerpj.com */
 	}
 </style>
diff --git a/packages/global-navbar/src/items/Logotype.svelte b/packages/global-navbar/src/items/Logotype.svelte
@@ -15,6 +15,20 @@
 		display: flex;
 		align-items: center;
 		gap: 0.75rem;
+		height: 100%;
+
+		color: rgb(168 162 158);
+		background: none;
+		border: 0;
+		font: inherit;
+		text-decoration: none;
+		font-weight: 600;
+
+		cursor: pointer;
+
+		& :global(svg) {
+			height: 100%;
+		}
 	}
 
 	.company-name {

diff --git a/packages/global-navbar/src/items/SocialIcon.svelte b/packages/global-navbar/src/items/SocialIcon.svelte
@@ -27,3 +27,10 @@
 		{/if}
 	</a>
 </li>
+
+<style>
+	svg {
+		color: rgb(168 162 158);
+		height: 1rem;
+	}
+</style>
diff --git a/packages/global-navbar/src/popover/BigIcon.svelte b/packages/global-navbar/src/popover/BigIcon.svelte
@@ -11,3 +11,35 @@
 		<span>{description}</span>
 	</a>
 </li>
+
+<style>
+	li {
+		margin: 0; /* required to override style on cheerpj.com */
+	}
+
+	a {
+		color: white;
+		text-decoration: none;
+
+		padding: 1rem;
+		border-radius: 8px;
+
+		&:global(:has(svg)) { /* <slot /> */
+			display: grid;
+			grid-template-rows: 1fr 1fr;
+			grid-template-columns: 3rem 1fr;
+			align-items: center;
+			gap: 0.5rem;
+
+			& :global(svg) {
+				grid-row: span 2;
+				width: 80%;
+				height: 100%;
+			}
+		}
+	}
+
+	span {
+		color: rgb(168 162 158);
+	}
+</style>