Turn T14's top right dropdown into a popover

README.md

@@ -24,7 +24,7 @@ No. | Name | Status | Last Updated | Previews | Install | On Tumblr
 11 | [Archive Of Your Own](https://wovenstarlight.github.io/tumblr-themes/theme11) | Complete | 8 Dec 2022 | [Index](https://starlightpreviews.tumblr.com/theme11), [permalink](https://starlightpreviews.tumblr.com/theme11/permalink) | [Code](https://raw.githubusercontent.com/wovenstarlight/tumblr-themes/main/theme11/theme11.html) | [Reblog](https://starlightthemes.tumblr.com/post/699336450345435136)
 12 | [Subzero](https://wovenstarlight.github.io/tumblr-themes/theme12) | Complete | 25 Dec 2022 | [Live preview](https://subzerotheme.tumblr.com) | [Code](https://raw.githubusercontent.com/wovenstarlight/tumblr-themes/main/theme12/theme12.html) | [Reblog](https://starlightthemes.tumblr.com/post/701753684245266432)
 13 | [Document](https://wovenstarlight.github.io/tumblr-themes/theme13) | Complete | 9 September 2024 | N/A | [Code](https://raw.githubusercontent.com/wovenstarlight/tumblr-themes/main/theme13/theme13.html) | N/A
-14 | [Rhythmic](https://wovenstarlight.github.io/tumblr-themes/theme14) | Complete | 13 November 2024 | N/A | [Code](https://raw.githubusercontent.com/wovenstarlight/tumblr-themes/main/theme14/theme14.html) | N/A
+14 | [Rhythmic](https://wovenstarlight.github.io/tumblr-themes/theme14) | Complete | 14 November 2024 | N/A | [Code](https://raw.githubusercontent.com/wovenstarlight/tumblr-themes/main/theme14/theme14.html) | N/A
 
 ## List of pages
 No. | Name | Status | Last Updated | Associated Theme | Preview | Install | On Tumblr

theme14/theme14.css

@@ -23,6 +23,8 @@
 	--red:					#f54034;
 	--darkred:				#98110c;
 	--green:				#13dd67;
+	/* Header sizing */
+	--header-height: 4em;
 	/* Footer sizing */
 	--footer-height: 8.5em;
 }
@@ -233,7 +235,6 @@ button[disabled] { cursor: initial }
 
 /* #region HEADER */
 #phead {
-	--header-height: 4em;
 	height: var(--header-height);
 	background-color: var(--darkblue);
 	display: flex;
@@ -501,44 +502,46 @@ button[disabled] { cursor: initial }
 }
 
 #moreinfo {
-	display: contents;
-
-	summary {
-		width: 5.75vw;
-		min-width: 3.5em;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		--spacing: 0.5em;
-		gap: var(--spacing);
-		background-color: var(--darkblue-variant);
-		cursor: pointer;
+	border: 0;
+	padding: 0;
+	margin: 0;
+	width: 5.75vw;
+	min-width: 3.5em;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	--spacing: 0.5em;
+	gap: var(--spacing);
+	background-color: var(--darkblue-variant);
+	cursor: pointer;
 
-		&:hover, &:focus { background-color: var(--darkblue-hover) }
-		&:active { background-color: var(--darkblue-active) }
+	&:hover, &:focus { background-color: var(--darkblue-hover) }
+	&:active { background-color: var(--darkblue-active) }
 
-		&::before {
-			box-sizing: content-box;
-			border-block: medium solid;
-			height: var(--spacing);
-		}
-		&::after { border-block-end: medium solid }
-		&::before, &::after {
-			content: "";
-			display: block;
-			width: 2em;
-			border-color: var(--darkgrayblue);
-		}
+	&::before {
+		box-sizing: content-box;
+		border-block: medium solid;
+		height: var(--spacing);
 	}
-
-	.contents {
-		position: fixed;
-		z-index: 101;
-		top: var(--header-height);
-		right: 0;
+	&::after { border-block-end: medium solid }
+	&::before, &::after {
+		content: "";
+		display: block;
+		width: 2em;
+		border-color: var(--darkgrayblue);
 	}
+}
 
+#moreinfopopover {
+	border: none;
+	padding: 0;
+	margin: 0;
+	margin-inline-start: auto;
+	z-index: 101;
+	top: var(--header-height);
+	right: 0;
+
 	.contentitem {
 		display: block;
 		background-color: var(--darkblue);
@@ -547,13 +550,13 @@ button[disabled] { cursor: initial }
 		padding: 0.75em 1em;
 		font-size: 1.1em;
 		text-align: center;
-
+	
 		i { display: none }
 	}
-
+	
 	a.contentitem:hover, a.contentitem:focus { background-color: var(--darkblue-hover) }
 	a.contentitem:active { background-color: var(--darkblue-active) }
-
+	
 	a.contentitem.current-page::before {
 		/* Content */
 		content: "\eba6";	/* check */

theme14/theme14.html

@@ -7,7 +7,7 @@
 		Phosphor Icons: https://phosphoricons.com/
 		Expanded Tumblr localization by codematurgy: https://github.com/boscoxvi/expandedtumblrlocalization
 
-	Last updated 13 Nov 2024.
+	Last updated 14 Nov 2024.
 -->
 
 <!DOCTYPE html>
@@ -245,15 +245,13 @@ <h3>{block:IfPlaylistTitle}{text:Playlist title}{/block:IfPlaylistTitle}{block:I
 		</nav>
 
 		<!-- SETTINGS DROPDOWN: Blog info and theme credit -->
-		<details id="moreinfo">
-			<summary><span class="visuallyhidden">More information</span></summary>
-			<div class="contents">
-				<span class="contentitem">{Name} © {CopyrightYears}</span>
-				<!-- DO NOT REMOVE CREDIT. LEAVE THIS INTACT. -->
-				<a class="contentitem" href="https://starlightthemes.tumblr.com/theme14">{lang:Install this theme}</a>
-				<!-- DO NOT REMOVE CREDIT. LEAVE THIS INTACT. -->
-			</div>
-		</details>
+		<button id="moreinfo" popovertarget="moreinfopopover"><span class="visuallyhidden">More information</span></button>
+		<div id="moreinfopopover" popover>
+			<span class="contentitem">{Name} © {CopyrightYears}</span>
+			<!-- DO NOT REMOVE CREDIT. LEAVE THIS INTACT. -->
+			<a class="contentitem" href="https://starlightthemes.tumblr.com/theme14">{lang:Install this theme}</a>
+			<!-- DO NOT REMOVE CREDIT. LEAVE THIS INTACT. -->
+		</div>
 	</header>
 
 	<main id="main">
@@ -1086,13 +1084,6 @@ <h2 id="searchtitle" class="modaltitle">POST INFORMATION</h2>
 	// Check top nav's ideal placement upon initial page load.
 	moveTopNav();
 }
-
-document.addEventListener("click", e => {
-	const moreinfo = document.getElementById("moreinfo");
-	if (moreinfo.getAttribute("open") !== null && e.target.closest("#moreinfo") == null) {
-		moreinfo.removeAttribute("open");
-	}
-})
 // #endregion
 
 // #region Modals open/close functionality