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);