mobile layout semi-fixed

2 files changed, 10 insertions, 6 deletions

diff --git a/styles/layout.css b/styles/layout.css
index dffcce3..f6f58db 100644
--- a/styles/layout.css
+++ b/styles/layout.css
@@ -36,6 +36,8 @@
 	transition-property: width;
 	transition-duration: 500ms;
 	width: var(--nav-width);
+
+	background-color: #161B33a0;
 }
 .navAreaWrapper > .sticky {
 	position: sticky;
@@ -102,14 +104,10 @@ blockquote:before {
 		color: var(--oxford-blue);
 		opacity: .8;
 	}
+	.navAreaWrapper { background-color: #dbdbe688; }
 }
 
 @media screen and (max-device-width: 550px) {
-	.navAreaWrapper {
-		grid-column: none;
-		grid-row: none;
-	}
-
 	.centeredPage {
 		grid-template-columns: 0 1fr;
 		gap: var(--page-margins) 0;
@@ -117,6 +115,11 @@ blockquote:before {
 	}
 
 	.navAreaWrapper {
+		grid-column: none;
+		grid-row: none;
+
+		width: 100vw;
+
 		position: fixed;
 		inset: 0px 0px 0px 0px;
 
@@ -128,7 +131,6 @@ blockquote:before {
 		opacity: 0;
 		pointer-events: none;
 		backdrop-filter: blur(50px);
-		background-color: #161B3300;
 	}
 	
 	.navAreaWrapper.navVisible {
diff --git a/styles/navbar.css b/styles/navbar.css
index c73c829..9c697da 100644
--- a/styles/navbar.css
+++ b/styles/navbar.css
@@ -89,6 +89,7 @@
 
 @media (prefers-color-scheme: light) {
 	.navbarItem .inner { background-color: var(--heliotrope-gray); }
+	.mobileNav .button.small { background-color: var(--cyan-process) !important; }
 
 	.navbarItem.active .inner,
 	.navbarItem.link:hover .inner {
@@ -131,6 +132,7 @@
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
+	fill: currentColor !important;
 }
 
 .mobileNav .button.small {