From c54d4c97f8c023feb9488ace5626ec72790c78b2 Mon Sep 17 00:00:00 2001
From: Caleb Fontenot <foley2431@gmail.com>
Date: Fri, 22 Mar 2024 22:24:45 -0500
Subject: [PATCH] Center the dropdown text relative to its parent, also make
 sure that the button text stays on a single line.

---
 index.html | 16 ++++++++--------
 root.css   | 16 +++++++++++++---
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 80a3624..c6715e6 100644
--- a/index.html
+++ b/index.html
@@ -38,19 +38,19 @@
 				<div class="dropdown"/>
 				<button class="dropbtn button">Minecraft Server Dynamic Maps</button>
 					<div class="dropdown-content navborder">
-						<a class="button" href="https://survival.calebfontenot.com">Survival Server</a>
-						<a class="button" href="https://creative.calebfontenot.com">Creative Server</a>
-						<a class="button" href="https://modded.calebfontenot.com">Modded Server</a>
-						<a class="button" href="https://skyfactory.calebfontenot.com">Skyfactory Server</a>
+						<a class="button dropdownButton" href="https://survival.calebfontenot.com">Survival Server</a>
+						<a class="button dropdownButton" href="https://creative.calebfontenot.com">Creative Server</a>
+						<a class="button dropdownButton" href="https://modded.calebfontenot.com">Modded Server</a>
+						<a class="button dropdownButton" href="https://skyfactory.calebfontenot.com">Skyfactory Server</a>
 					</div>
 				</div>
 				<div class="dropdown">
 				<button class="dropbtn button">WASM Games</button>
 				<div class="dropdown-content navborder">
-					<a class="button" href="mario">Mario</a><br>
-					<a class="button" href="sonic1">Sonic 1</a><br>
-					<a class="button" href="sonic2">Sonic 2</a><br>
-					<a class="button" href="soniccd">Sonic CD</a>
+					<a class="button dropdownButton" href="mario">Mario</a><br>
+					<a class="button dropdownButton" href="sonic1">Sonic 1</a><br>
+					<a class="button dropdownButton" href="sonic2">Sonic 2</a><br>
+					<a class="button dropdownButton" href="soniccd">Sonic CD</a>
 					</div>
 				</div>
 			</div>
diff --git a/root.css b/root.css
index 8b0acee..1df7392 100644
--- a/root.css
+++ b/root.css
@@ -109,18 +109,28 @@ ul {
 	position: relative;
 	display: inline-block;
 	border-radius: 2%;
+	margin: 0 auto;
+	
 }
 .dropdown-content {
 	position: absolute;
 	display: none;
 	padding: 10px;
-	z-index: 10;
 	background-color: rgba(0,0,0,0.6);
+	margin: auto;
+	text-align:center;
+	left: 50%;
+	transform: translateX(-50%);
 	
 }
 
-.dropdown:hover .dropdown-content {display: grid;}
-	
+.dropdown:hover .dropdown-content {
+	display: grid;
+}
+
+.dropdownButton {
+	white-space: nowrap;
+}