1 files changed, 86 insertions, 0 deletions
diff --git a/css/sideMenu.scss b/css/sideMenu.scss
new file mode 100644
index 0000000..9f57eab
--- /dev/null
+++ b/css/sideMenu.scss
@@ -0,0 +1,86 @@
+#sideMenu {
+	backdrop-filter:         blur(1rem);
+	-webkit-backdrop-filter: blur(1rem);
+	background-color:        color-mix(in srgb, var(--backgroundColour), transparent 50%);
+	box-shadow:              $defaultShadow;
+	display:                 flex;
+	flex-direction:          column;
+	gap:                     1rem;
+	height:                  calc(100vh - var(--hamburgerWidth) - 3rem);
+	justify-content:         space-between;
+	left:                    100%;
+	overflow:                scroll;
+	padding:                 1rem;
+	position:                absolute;
+	top:                     calc(var(--hamburgerWidth) + 2rem);
+	transition:              left $slideDuration;
+	width:                   100vw;
+	z-index:                 255;
+
+	&.visible {
+		left: 0;
+	}
+
+	@media (orientation: landscape) and (pointer: fine) {
+		border-bottom-left-radius: 1rem;
+		border-top-left-radius:    1rem;
+		width:                     50vw;
+
+		&.visible {
+			left: 50%;
+		}
+	}
+
+	@media (pointer: coarse) {
+		border-style: solid;
+		border-width: $separatorWidth;
+		font-size:    2em;
+	}
+
+	div.links {
+		display: flex;
+		gap:     1rem;
+
+		@media (pointer: coarse) {
+			flex-direction: column;
+		}
+
+		section {
+			$gap: 0.25rem;
+
+			display:        flex;
+			flex-direction: column;
+			gap:            $gap;
+
+			p {
+				text-align: center;
+
+				&::after {
+					background-color: var(--textColour);
+					border-radius:    calc($separatorWidth / 2);
+					content:          "";
+					display:          block;
+					height:           $separatorWidth;
+					margin-top:       $gap;
+					width:            100%;
+				}
+
+				@media (pointer: coarse) {
+					&::before {
+						background-color: var(--textColour);
+						border-radius:    calc($separatorWidth / 2);
+						content:          "";
+						display:          block;
+						height:           $separatorWidth;
+						margin-top:       $gap;
+						width:            100%;
+					}
+				}
+			}
+		}
+	}
+
+	#themeToggler {
+		align-self: center;
+	}
+}