Positioning / color tweaks

directus · Aug 4, 2023 · 774dd3b · 774dd3b
1 parent 56b6faa
commit 774dd3b
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 9 deletions.
diff --git a/assets/css/vars.css b/assets/css/vars.css
@@ -19,7 +19,7 @@
 
 	--gray-50: #f9fafb;
 	--gray-100: #F0F4F9;
-	--gray-200: #e5e7eb;
+	--gray-200: #e2e7ee;
 	--gray-300: #d2d6dc;
 	--gray-400: #a2b5cd; /* Correct */
 	--gray-500: #888d96;

diff --git a/components/Nav/Header.vue b/components/Nav/Header.vue
@@ -156,11 +156,31 @@ a {
 	position: fixed;
 	top: 0;
 	z-index: 5;
-	background-color: rgba(255, 255, 255, 0.8);
-	backdrop-filter: blur(10px);
 	max-height: 100vh;
 	overflow: auto;
 	width: 100%;
+	backdrop-filter: saturate(180%) blur(5px);
+	background-color: color-mix(in srgb, transparent, var(--white) 80%);
+	box-shadow: inset 0 -1px 0 0 color-mix(in srgb, transparent, var(--gray-400) 20%);
+
+	@media (width > 80rem) {
+		backdrop-filter: unset;
+		background-color: unset;
+		box-shadow: unset;
+
+		&::after {
+			content: '';
+			inline-size: 100%;
+			block-size: 100%;
+			inset-block-start: 0;
+			inset-inline-start: 0;
+			position: absolute;
+			z-index: -1;
+			backdrop-filter: saturate(180%) blur(5px);
+			background-color: color-mix(in srgb, transparent, var(--white) 80%);
+			box-shadow: inset 0 -1px 0 0 color-mix(in srgb, transparent, var(--gray-400) 20%);
+		}
+	}
 }
 
 .header {
@@ -378,13 +398,18 @@ a {
 
 	.submenu {
 		position: absolute;
-		inset-block-start: calc(100% + var(--space-4));
+		inset-block-start: 100%;
 		inset-inline-start: 50%;
 		translate: -50% 0;
-		background-color: var(--white);
+		background-color: color-mix(in srgb, transparent, var(--white) 80%);
+		backdrop-filter: saturate(180%) blur(4px);
 		border-radius: var(--rounded-md);
+		border-start-start-radius: 0;
+		border-start-end-radius: 0;
+		border: 1px solid var(--gray-200);
+		border-top: 0;
 		padding: var(--space-6) var(--space-8);
-		width: 67.5rem;
+		width: 82.5rem;
 		box-shadow: var(--shadow-base);
 		grid-template-columns: repeat(3, 1fr);
 		gap: var(--space-2) var(--space-4);

diff --git a/types/schema/meta/navigation.ts b/types/schema/meta/navigation.ts
@@ -21,10 +21,8 @@ export interface NavigationItem {
 	open_in_new_tab: boolean | null;
 	page: string | Page | null;
 	url: string | null;
-	parent: string | Navigation | null;
 	description: string | null;
 	image: string | File | null;
-	/** Add this item to far right and make it huge. **Use only 1 per submenu** */
-	callout: boolean | null;
 	children: NavigationItem[];
+	parent: string | Navigation | null;
 }