shitty mobile mode

2 files changed, 105 insertions, 1 deletions

diff --git a/styles/layout.css b/styles/layout.css
index 6715681..b4e2a76 100644
--- a/styles/layout.css
+++ b/styles/layout.css
@@ -20,7 +20,10 @@
 	grid-column: 2;
 	grid-row: 1;
 }
-.titleWrapper > * { margin: 0; }
+.titleWrapper > * {
+	margin: 0;
+	word-break: break-word;
+}
 
 .navAreaWrapper {
 	grid-column: 1;
@@ -64,3 +67,60 @@
 	grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
 }
 
+.mobileNav {
+	display: none;
+}
+
+@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;
+		padding: 0 12px;
+	}
+
+	.navAreaWrapper {
+		position: fixed;
+		inset: 0px 0px 0px 0px;
+
+		z-index: 2;
+		
+		transition-property: opacity;
+		transition-duration: .1s;
+
+		opacity: 0;
+		pointer-events: none;
+		backdrop-filter: blur(50px);
+		background-color: #161B3300;
+	}
+	
+	.navAreaWrapper.navVisible {
+		pointer-events: initial;
+		opacity: 1;
+	}
+
+	.navAreaWrapper .globalLinks {
+		display: none;
+	}
+
+	.navAreaWrapper > .sticky {
+		position: absolute;
+		inset: 0px 0px 0px 0px;
+
+		padding: 24px;
+		overflow-y: scroll;
+	}
+
+	.mobileNav {
+		display: inline-block;
+		position: fixed;
+		bottom: 24px;
+		right: 24px;
+		z-index: 5;
+	}
+}
+
diff --git a/styles/navbar.css b/styles/navbar.css
index 607c3d7..c73c829 100644
--- a/styles/navbar.css
+++ b/styles/navbar.css
@@ -101,3 +101,47 @@
 		color: var(--oxford-blue)
 	}
 }
+
+.mobileNav {
+	width: 48px;
+	text-align: center;
+	line-height: 0;
+}
+
+.mobileNav .button:last-child {
+	margin-bottom: 0;
+}
+
+.mobileNav .button {
+	padding: 12px;
+	background-color: var(--fire-opal);
+	display: inline-block !important;
+	min-width: 0;
+	border-radius: 24px;
+	margin: 0;
+	box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 25%);
+
+	width: 24px;
+	height: 24px;
+	position: relative;
+}
+
+.mobileNav .button > svg {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.mobileNav .button.small {
+	padding: 6px;
+	background-color: var(--purple-navy);
+	margin-bottom: 12px;
+
+	opacity: 0;
+	transition: opacity .3s;
+}
+
+.mobileNav.open .button.small {
+	opacity: 1;
+}