More menu layout fixes

src/components/Header.astro

@@ -2,7 +2,6 @@
 import HeaderLink from './HeaderLink.astro';
 import Blazestar from './Blazestar.astro';
 import NoteHierarchy from './NoteHierarchy.astro';
-import NotesLinks from './NotesLinks.astro';
 import NotchedBox from './NotchedBox.astro';
 ---
 
@@ -14,11 +13,11 @@ import NotchedBox from './NotchedBox.astro';
 			<HeaderLink href="/blog">Blog</HeaderLink>
 			<HeaderLink href="/about">About</HeaderLink>
       <div class="notes-menu">
-        <label for="notes-menu-checkbox">
-          <HeaderLink>Notes</HeaderLink>
+        <label for="notes-menu-checkbox" id="notes-menu-button">
+          Notes
         </label>
         <input type="checkbox" id="notes-menu-checkbox" name="notes-menu-checkbox"/>
-        <div class="notes-menu-tree" id="notes">
+        <div class="notes-menu-tree" id="notes-menu-tree">
           <NotchedBox fillNotches="left">
               <NoteHierarchy prefix="/notes" />
           </NotchedBox>
@@ -76,7 +75,6 @@ import NotchedBox from './NotchedBox.astro';
 	nav a {
 		padding: 1em 0.5em;
     color: var(--color-light-text);
-		border-bottom: 4px solid transparent;
 		text-decoration: none;
 
     &:hover {
@@ -91,12 +89,8 @@ import NotchedBox from './NotchedBox.astro';
 	.social-links a {
 		display: flex;
 	}
-	@media (max-width: 720px) {
-		.social-links {
-			display: none;
-		}
-	}
-	@media (max-width: 520px) {
+
+	@media (max-width: 800px) {
     nav {
       flex-direction: column;
     }
@@ -106,23 +100,39 @@ import NotchedBox from './NotchedBox.astro';
     display: flex;
     flex-direction: row;
     gap: 4px;
+    font-size: 120%;
   }
 
   #notes-menu-checkbox {
     display: none;
 
-    &:checked ~ #notes {
+    &:checked ~ #notes-menu-tree {
       display: flex;
     }
+    &:checked ~ #notes-menu-button {
+      color: var(--color-accent);
+    }
+  }
+
+  .notes-menu {
+    position: relative;
+    margin: 1em 0.5em; /* Matches links above */
+
+    .notes-menu-tree {
+      position: absolute;
+      top: 100%;
+      z-index: 10;
+      right: 0;
+    }
   }
 
   .notes-menu-tree {
     display: none;
-    position: fixed;
     overflow: scroll;
-    z-index: 10;
     flex-direction: column;
-    margin-top: -4px;
+    width: 15em;
+    background-color: rgba(0, 0, 0, 0.2);
+    padding: 8px;
 
     a {
       color: var(--color-light-text);

src/layouts/RootLayout.astro

@@ -33,7 +33,7 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
     </div>
 	</body>
   <style>
-    @media (max-width: 800px) {
+    @media (max-width: 900px) {
       body {
         grid-template-areas: 
           "header"
@@ -42,6 +42,9 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
         grid-template-columns: 1fr;
         margin: 1rem 0.5rem;
       }
+      main {
+        padding: 1em;
+      }
       .header {
         display: block;
       }
@@ -49,7 +52,7 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
         display: none;
       }
     }
-    @media (min-width: 800px) {
+    @media (min-width: 900px) {
       body {
         grid-template-areas: 
           "header header"

src/styles/global.css

@@ -107,6 +107,7 @@ body {
   font-size: var(--font-size-md);
   line-height: 1.7;
   background-color: var(--color-space-blue);
+  min-width: 360px;
 }
 
 main {
@@ -191,14 +192,6 @@ hr {
   border: none;
   border-top: 1px solid rgb(var(--gray-light));
 }
-@media (max-width: 720px) {
-  body {
-    font-size: 18px;
-  }
-  main {
-    padding: 1em;
-  }
-}
 
 .sr-only {
   border: 0;