Hamburger menu is now shown under the header

I think this looks nicer.

static/css/styles.css

@@ -315,8 +315,8 @@ blockquote {
 	--label-padding: 0.3em;
 
 	position: absolute;
-	top: calc(-1 * var(--label-padding));
+	top: calc(var(--document-margin) - var(--label-padding));
-	right: calc(-1 * var(--label-padding));
+	right: calc(var(--document-margin) - var(--label-padding));
 	display: flex;
 }
 
@@ -360,14 +360,17 @@ body {
 	background-color: lightgray;
 	background-size: cover;
 	background-position: bottom;
-	display: inline-block;
-	z-index: 1; /* this prevents images with css filters from appearing above the header when in portrait mode */
 	width: 100%;
+	/* header must be above the overlay */
+	/* this also prevents images with css filters from appearing above the header when in portrait mode */
+	z-index: 3;
+	/* z-index doesn't apply to the default 'static' position */
+	position: relative;
 }
 
 .header-content {
-	margin: var(--document-margin);
+	padding: var(--document-margin);
-	position: relative; /* so that "position:absolute" works for the menu label */
+	position: relative; /* so that "position: absolute" works for the menu label */
 }
 
 .body {
@@ -521,48 +524,58 @@ body {
 	}
 
 	.show-hide-menu-input:checked ~ .main .links {
-		visibility: visible;
+		display: inherit;
-		opacity: 1;
-		right: 0;
-		transition: all 0.3s;
 	}
 
 	.show-hide-menu-input:checked ~ .overlay {
 		visibility: visible;
 		opacity: 1;
-		transition: opacity 0.3s;
+	}
+
+	/* prevent scrolling the main body; must be on html element and not body for iOS */
+	html:has(.show-hide-menu-input:checked) {
+		overflow: hidden;
+		height: 100%;
+		/* prevent scrolling (of everything) on iOS */
+		/* any element with 'overflow-y: scroll' will allow the body to scroll for some reason */
+		/* use 'pan-zoom' to allow users to zoom if they need to, even though it makes scrolling weird */
+		touch-action: pan-zoom;
 	}
 
 	.links {
-		display: block;
+		/* vertical padding between list items */
-		visibility: hidden;
+		--entry-padding: 9pt;
-		opacity: 0;
+
-		overflow-y: scroll;
+		display: none;
-		position: fixed;
+		position: absolute;
-		top: 0;
+		left: 0;
-		bottom: 0;
+		right: 0;
-		right: -100px; /* start to the right for the transition */
+		padding-left: var(--document-margin);
-		min-width: 75%;
+		padding-right: var(--document-margin);
-		z-index: 3;
+		padding-top: calc(var(--document-margin) - var(--entry-padding));
+		padding-bottom: calc(var(--document-margin) - var(--entry-padding));
+
+		font-size: 100%;
 		background-color: rgb(247, 247, 247);
-		padding: 10pt;
+		border-top: solid 1px;
-		margin: 0;
+		border-bottom: solid 1px;
 	}
 
 	.links li {
-		margin-right: 0;
+		border-bottom: solid 1px;
-		border-bottom: solid 1px gray;
+		/* override all previously set margins */
+		margin: 0;
+	}
+
+	.links li:last-child {
+		border-bottom: none;
 	}
 
 	.links li > * {
-		box-sizing: border-box;
+		/* make the links easily clickable */
 		width: 100%;
-		padding: 13px;
+		padding-top: var(--entry-padding);
-	}
+		padding-bottom: var(--entry-padding);
-
-	.links li:first-child {
-		border-top: solid 1px gray;
-		margin-top: 0px;
 	}
 
 	.title a {

static/css/themes/dark.css

@@ -46,6 +46,10 @@ figure.color-adapting-image img {
 	background-image: url(../../images/header-bg-dark.jpg);
 }
 
+.links, .links li {
+	border-color: #383838;
+}
+
 .main {
 	background-color: rgb(14, 14, 14);
 	box-shadow: none;
@@ -107,6 +111,6 @@ figure.color-adapting-image img {
 
 @media only screen and (max-width: 400pt) {
 	.links {
-		background-color: rgb(30, 30, 30);
+		background-color: rgb(23, 23, 23);
 	}
 }

static/css/themes/light.css

@@ -39,6 +39,10 @@ blockquote {
 	background-image: url(../../images/header-bg-light.jpg);
 }
 
+.links, .links li {
+	border-color: rgb(211, 211, 211);
+}
+
 .main {
 	background-color: white;
 }