Move navbar to use the popover api rather then hacky CSS targets

DeclanChidlow · Oct 21, 2024 · b52778f · b52778f
1 parent 8d6419f
commit b52778f
Show file tree

Hide file tree

Showing 32 changed files with 492 additions and 296 deletions.
diff --git a/docs/404.html b/docs/404.html
@@ -24,16 +24,24 @@
 <body>
 <header id="navbar">
 	<a class="skip-link" href="#main">Skip to content</a>
-	<nav id="menu">
+	<nav>
 		<a href="/" id="navlanding">Vale</a>
+
 		<ul class="menu-items">
 			<li><a href="/posts">Posts</a></li>
 			<li><a href="/portfolio">Portfolio</a></li>
-			<li class="menu-only"><a href="/services">Services</a></li>
-			<li class="menu-only"><a href="/contact">Contact</a></li>
-			<li class="icons close-menu"><a href="#">close</a></li>
 		</ul>
-		<a href="#menu" class="icons open-menu">menu</a>
+
+		<button popovertarget="popover-menu" class="popover-button icons">menu</button>
+		<div id="popover-menu" popover>
+			<button popovertarget="popover-menu" class="icons">close</button>
+			<ul>
+				<li><a href="/posts">Posts</a></li>
+				<li><a href="/portfolio">Portfolio</a></li>
+				<li><a href="/services">Services</a></li>
+				<li><a href="/contact">Contact</a></li>
+			</ul>
+		</div>
 	</nav>
 </header>
 

diff --git a/docs/contact.html b/docs/contact.html
@@ -27,16 +27,24 @@
 <body>
 <header id="navbar">
 	<a class="skip-link" href="#main">Skip to content</a>
-	<nav id="menu">
+	<nav>
 		<a href="/" id="navlanding">Vale</a>
+
 		<ul class="menu-items">
 			<li><a href="/posts">Posts</a></li>
 			<li><a href="/portfolio">Portfolio</a></li>
-			<li class="menu-only"><a href="/services">Services</a></li>
-			<li class="menu-only"><a href="/contact">Contact</a></li>
-			<li class="icons close-menu"><a href="#">close</a></li>
 		</ul>
-		<a href="#menu" class="icons open-menu">menu</a>
+
+		<button popovertarget="popover-menu" class="popover-button icons">menu</button>
+		<div id="popover-menu" popover>
+			<button popovertarget="popover-menu" class="icons">close</button>
+			<ul>
+				<li><a href="/posts">Posts</a></li>
+				<li><a href="/portfolio">Portfolio</a></li>
+				<li><a href="/services">Services</a></li>
+				<li><a href="/contact">Contact</a></li>
+			</ul>
+		</div>
 	</nav>
 </header>
 

diff --git a/docs/index.html b/docs/index.html
@@ -27,16 +27,24 @@
 <body>
 <header id="navbar">
 	<a class="skip-link" href="#main">Skip to content</a>
-	<nav id="menu">
+	<nav>
 		<a href="/" id="navlanding">Vale</a>
+
 		<ul class="menu-items">
 			<li><a href="/posts">Posts</a></li>
 			<li><a href="/portfolio">Portfolio</a></li>
-			<li class="menu-only"><a href="/services">Services</a></li>
-			<li class="menu-only"><a href="/contact">Contact</a></li>
-			<li class="icons close-menu"><a href="#">close</a></li>
 		</ul>
-		<a href="#menu" class="icons open-menu">menu</a>
+
+		<button popovertarget="popover-menu" class="popover-button icons">menu</button>
+		<div id="popover-menu" popover>
+			<button popovertarget="popover-menu" class="icons">close</button>
+			<ul>
+				<li><a href="/posts">Posts</a></li>
+				<li><a href="/portfolio">Portfolio</a></li>
+				<li><a href="/services">Services</a></li>
+				<li><a href="/contact">Contact</a></li>
+			</ul>
+		</div>
 	</nav>
 </header>
 

diff --git a/docs/portfolio.html b/docs/portfolio.html
@@ -27,16 +27,24 @@
 <body>
 <header id="navbar">
 	<a class="skip-link" href="#main">Skip to content</a>
-	<nav id="menu">
+	<nav>
 		<a href="/" id="navlanding">Vale</a>
+
 		<ul class="menu-items">
 			<li><a href="/posts">Posts</a></li>
 			<li><a href="/portfolio">Portfolio</a></li>
-			<li class="menu-only"><a href="/services">Services</a></li>
-			<li class="menu-only"><a href="/contact">Contact</a></li>
-			<li class="icons close-menu"><a href="#">close</a></li>
 		</ul>
-		<a href="#menu" class="icons open-menu">menu</a>
+
+		<button popovertarget="popover-menu" class="popover-button icons">menu</button>
+		<div id="popover-menu" popover>
+			<button popovertarget="popover-menu" class="icons">close</button>
+			<ul>
+				<li><a href="/posts">Posts</a></li>
+				<li><a href="/portfolio">Portfolio</a></li>
+				<li><a href="/services">Services</a></li>
+				<li><a href="/contact">Contact</a></li>
+			</ul>
+		</div>
 	</nav>
 </header>
 

diff --git a/docs/portfolio/adduce.html b/docs/portfolio/adduce.html
@@ -22,16 +22,24 @@
 <body>
 <header id="navbar">
 	<a class="skip-link" href="#main">Skip to content</a>
-	<nav id="menu">
+	<nav>
 		<a href="/" id="navlanding">Vale</a>
+
 		<ul class="menu-items">
 			<li><a href="/posts">Posts</a></li>
 			<li><a href="/portfolio">Portfolio</a></li>
-			<li class="menu-only"><a href="/services">Services</a></li>
-			<li class="menu-only"><a href="/contact">Contact</a></li>
-			<li class="icons close-menu"><a href="#">close</a></li>
 		</ul>
-		<a href="#menu" class="icons open-menu">menu</a>
+
+		<button popovertarget="popover-menu" class="popover-button icons">menu</button>
+		<div id="popover-menu" popover>
+			<button popovertarget="popover-menu" class="icons">close</button>
+			<ul>
+				<li><a href="/posts">Posts</a></li>
+				<li><a href="/portfolio">Portfolio</a></li>
+				<li><a href="/services">Services</a></li>
+				<li><a href="/contact">Contact</a></li>
+			</ul>
+		</div>
 	</nav>
 </header>
 

diff --git a/docs/portfolio/capchord.html b/docs/portfolio/capchord.html
@@ -22,16 +22,24 @@
 <body>
 <header id="navbar">
 	<a class="skip-link" href="#main">Skip to content</a>
-	<nav id="menu">
+	<nav>
 		<a href="/" id="navlanding">Vale</a>
+
 		<ul class="menu-items">
 			<li><a href="/posts">Posts</a></li>
 			<li><a href="/portfolio">Portfolio</a></li>
-			<li class="menu-only"><a href="/services">Services</a></li>
-			<li class="menu-only"><a href="/contact">Contact</a></li>
-			<li class="icons close-menu"><a href="#">close</a></li>
 		</ul>
-		<a href="#menu" class="icons open-menu">menu</a>
+
+		<button popovertarget="popover-menu" class="popover-button icons">menu</button>
+		<div id="popover-menu" popover>
+			<button popovertarget="popover-menu" class="icons">close</button>
+			<ul>
+				<li><a href="/posts">Posts</a></li>
+				<li><a href="/portfolio">Portfolio</a></li>
+				<li><a href="/services">Services</a></li>
+				<li><a href="/contact">Contact</a></li>
+			</ul>
+		</div>
 	</nav>
 </header>
 

diff --git a/docs/portfolio/meat-typeface.html b/docs/portfolio/meat-typeface.html
@@ -22,16 +22,24 @@
 <body>
 <header id="navbar">
 	<a class="skip-link" href="#main">Skip to content</a>
-	<nav id="menu">
+	<nav>
 		<a href="/" id="navlanding">Vale</a>
+
 		<ul class="menu-items">
 			<li><a href="/posts">Posts</a></li>
 			<li><a href="/portfolio">Portfolio</a></li>
-			<li class="menu-only"><a href="/services">Services</a></li>
-			<li class="menu-only"><a href="/contact">Contact</a></li>
-			<li class="icons close-menu"><a href="#">close</a></li>
 		</ul>
-		<a href="#menu" class="icons open-menu">menu</a>
+
+		<button popovertarget="popover-menu" class="popover-button icons">menu</button>
+		<div id="popover-menu" popover>
+			<button popovertarget="popover-menu" class="icons">close</button>
+			<ul>
+				<li><a href="/posts">Posts</a></li>
+				<li><a href="/portfolio">Portfolio</a></li>
+				<li><a href="/services">Services</a></li>
+				<li><a href="/contact">Contact</a></li>
+			</ul>
+		</div>
 	</nav>
 </header>
 

diff --git a/docs/portfolio/mutant-remix.html b/docs/portfolio/mutant-remix.html
@@ -22,16 +22,24 @@
 <body>
 <header id="navbar">
 	<a class="skip-link" href="#main">Skip to content</a>
-	<nav id="menu">
+	<nav>
 		<a href="/" id="navlanding">Vale</a>
+
 		<ul class="menu-items">
 			<li><a href="/posts">Posts</a></li>
 			<li><a href="/portfolio">Portfolio</a></li>
-			<li class="menu-only"><a href="/services">Services</a></li>
-			<li class="menu-only"><a href="/contact">Contact</a></li>
-			<li class="icons close-menu"><a href="#">close</a></li>
 		</ul>
-		<a href="#menu" class="icons open-menu">menu</a>
+
+		<button popovertarget="popover-menu" class="popover-button icons">menu</button>
+		<div id="popover-menu" popover>
+			<button popovertarget="popover-menu" class="icons">close</button>
+			<ul>
+				<li><a href="/posts">Posts</a></li>
+				<li><a href="/portfolio">Portfolio</a></li>
+				<li><a href="/services">Services</a></li>
+				<li><a href="/contact">Contact</a></li>
+			</ul>
+		</div>
 	</nav>
 </header>
 

diff --git a/docs/portfolio/pam-carters-poetry.html b/docs/portfolio/pam-carters-poetry.html
@@ -22,16 +22,24 @@
 <body>
 <header id="navbar">
 	<a class="skip-link" href="#main">Skip to content</a>
-	<nav id="menu">
+	<nav>
 		<a href="/" id="navlanding">Vale</a>
+
 		<ul class="menu-items">
 			<li><a href="/posts">Posts</a></li>
 			<li><a href="/portfolio">Portfolio</a></li>
-			<li class="menu-only"><a href="/services">Services</a></li>
-			<li class="menu-only"><a href="/contact">Contact</a></li>
-			<li class="icons close-menu"><a href="#">close</a></li>
 		</ul>
-		<a href="#menu" class="icons open-menu">menu</a>
+
+		<button popovertarget="popover-menu" class="popover-button icons">menu</button>
+		<div id="popover-menu" popover>
+			<button popovertarget="popover-menu" class="icons">close</button>
+			<ul>
+				<li><a href="/posts">Posts</a></li>
+				<li><a href="/portfolio">Portfolio</a></li>
+				<li><a href="/services">Services</a></li>
+				<li><a href="/contact">Contact</a></li>
+			</ul>
+		</div>
 	</nav>
 </header>
 

diff --git a/docs/portfolio/photography.html b/docs/portfolio/photography.html
@@ -22,16 +22,24 @@
 <body>
 <header id="navbar">
 	<a class="skip-link" href="#main">Skip to content</a>
-	<nav id="menu">
+	<nav>
 		<a href="/" id="navlanding">Vale</a>
+
 		<ul class="menu-items">
 			<li><a href="/posts">Posts</a></li>
 			<li><a href="/portfolio">Portfolio</a></li>
-			<li class="menu-only"><a href="/services">Services</a></li>
-			<li class="menu-only"><a href="/contact">Contact</a></li>
-			<li class="icons close-menu"><a href="#">close</a></li>
 		</ul>
-		<a href="#menu" class="icons open-menu">menu</a>
+
+		<button popovertarget="popover-menu" class="popover-button icons">menu</button>
+		<div id="popover-menu" popover>
+			<button popovertarget="popover-menu" class="icons">close</button>
+			<ul>
+				<li><a href="/posts">Posts</a></li>
+				<li><a href="/portfolio">Portfolio</a></li>
+				<li><a href="/services">Services</a></li>
+				<li><a href="/contact">Contact</a></li>
+			</ul>
+		</div>
 	</nav>
 </header>
 

diff --git a/docs/posts.html b/docs/posts.html
@@ -27,16 +27,24 @@
 <body>
 <header id="navbar">
 	<a class="skip-link" href="#main">Skip to content</a>
-	<nav id="menu">
+	<nav>
 		<a href="/" id="navlanding">Vale</a>
+
 		<ul class="menu-items">
 			<li><a href="/posts">Posts</a></li>
 			<li><a href="/portfolio">Portfolio</a></li>
-			<li class="menu-only"><a href="/services">Services</a></li>
-			<li class="menu-only"><a href="/contact">Contact</a></li>
-			<li class="icons close-menu"><a href="#">close</a></li>
 		</ul>
-		<a href="#menu" class="icons open-menu">menu</a>
+
+		<button popovertarget="popover-menu" class="popover-button icons">menu</button>
+		<div id="popover-menu" popover>
+			<button popovertarget="popover-menu" class="icons">close</button>
+			<ul>
+				<li><a href="/posts">Posts</a></li>
+				<li><a href="/portfolio">Portfolio</a></li>
+				<li><a href="/services">Services</a></li>
+				<li><a href="/contact">Contact</a></li>
+			</ul>
+		</div>
 	</nav>
 </header>
 

diff --git a/docs/posts/a-year-with-the-framework-laptop-13.html b/docs/posts/a-year-with-the-framework-laptop-13.html
@@ -42,16 +42,24 @@
 <body>
 <header id="navbar">
 	<a class="skip-link" href="#main">Skip to content</a>
-	<nav id="menu">
+	<nav>
 		<a href="/" id="navlanding">Vale</a>
+
 		<ul class="menu-items">
 			<li><a href="/posts">Posts</a></li>
 			<li><a href="/portfolio">Portfolio</a></li>
-			<li class="menu-only"><a href="/services">Services</a></li>
-			<li class="menu-only"><a href="/contact">Contact</a></li>
-			<li class="icons close-menu"><a href="#">close</a></li>
 		</ul>
-		<a href="#menu" class="icons open-menu">menu</a>
+
+		<button popovertarget="popover-menu" class="popover-button icons">menu</button>
+		<div id="popover-menu" popover>
+			<button popovertarget="popover-menu" class="icons">close</button>
+			<ul>
+				<li><a href="/posts">Posts</a></li>
+				<li><a href="/portfolio">Portfolio</a></li>
+				<li><a href="/services">Services</a></li>
+				<li><a href="/contact">Contact</a></li>
+			</ul>
+		</div>
 	</nav>
 </header>
 

diff --git a/docs/posts/building-sites-with-iframes.html b/docs/posts/building-sites-with-iframes.html
@@ -42,16 +42,24 @@
 <body>
 <header id="navbar">
 	<a class="skip-link" href="#main">Skip to content</a>
-	<nav id="menu">
+	<nav>
 		<a href="/" id="navlanding">Vale</a>
+
 		<ul class="menu-items">
 			<li><a href="/posts">Posts</a></li>
 			<li><a href="/portfolio">Portfolio</a></li>
-			<li class="menu-only"><a href="/services">Services</a></li>
-			<li class="menu-only"><a href="/contact">Contact</a></li>
-			<li class="icons close-menu"><a href="#">close</a></li>
 		</ul>
-		<a href="#menu" class="icons open-menu">menu</a>
+
+		<button popovertarget="popover-menu" class="popover-button icons">menu</button>
+		<div id="popover-menu" popover>
+			<button popovertarget="popover-menu" class="icons">close</button>
+			<ul>
+				<li><a href="/posts">Posts</a></li>
+				<li><a href="/portfolio">Portfolio</a></li>
+				<li><a href="/services">Services</a></li>
+				<li><a href="/contact">Contact</a></li>
+			</ul>
+		</div>
 	</nav>
 </header>