Merge pull request #9 from KirbyPaint/searchBarStyling

update styling on the search bar
KirbyPaint · Jun 3, 2024 · f183f13 · f183f13
2 parents db3672b + 43eebde
commit f183f13
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 57 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -12,6 +12,7 @@
 		"Rher",
 		"Sisu",
 		"spellcasting",
+		"topnav",
 		"Trapcraft",
 		"Vinushka",
 		"Weaponcraft"

diff --git a/appendix-a.html b/appendix-a.html
@@ -21,8 +21,10 @@
 	</head>
 
 	<body>
-		<div class="topnav">
-			<input type="text" id="searchBar" placeholder="Search..." function="search()">
+		<div class="topnavContainer">
+			<div class="topnav">
+				<input type="text" id="searchBar" placeholder="Search..." function="search()">
+			</div>
 		</div>
 		<h1>Appendix A: Other Rules</h1>
 		<div class="section">

diff --git a/appendix-b.html b/appendix-b.html
@@ -21,8 +21,10 @@
 	</head>
 
 	<body>
-		<div class="topnav">
-			<input type="text" id="searchBar" placeholder="Search..." function="search()">
+		<div class="topnavContainer">
+			<div class="topnav">
+				<input type="text" id="searchBar" placeholder="Search..." function="search()">
+			</div>
 		</div>
 		<h1>Appendix B: Old Gods Powers and Spells</h1>
 		<div class="section">

diff --git a/appendix-c.html b/appendix-c.html
@@ -21,8 +21,10 @@
 	</head>
 
 	<body>
-		<div class="topnav">
-			<input type="text" id="searchBar" placeholder="Search..." function="search()">
+		<div class="topnavContainer">
+			<div class="topnav">
+				<input type="text" id="searchBar" placeholder="Search..." function="search()">
+			</div>
 		</div>
 		<h1>Appendix C: Abilities</h1>
 		<div class="section">

diff --git a/basic-moves.html b/basic-moves.html
@@ -21,8 +21,10 @@
 	</head>
 
 	<body>
-		<div class="topnav">
-			<input type="text" id="searchBar" placeholder="Search..." function="search()">
+		<div class="topnavContainer">
+			<div class="topnav">
+				<input type="text" id="searchBar" placeholder="Search..." function="search()">
+			</div>
 		</div>
 		<h1>Basic Moves</h1>
 		<div class="section">

diff --git a/character-sheet.html b/character-sheet.html
@@ -21,8 +21,10 @@
 	</head>
 
 	<body>
-		<div class="topnav">
-			<input type="text" id="searchBar" placeholder="Search..." function="search()">
+		<div class="topnavContainer">
+			<div class="topnav">
+				<input type="text" id="searchBar" placeholder="Search..." function="search()">
+			</div>
 		</div>
 		<h1>Character Sheet</h1>
 		<div class="section">

diff --git a/downtime.html b/downtime.html
@@ -21,8 +21,10 @@
 	</head>
 
 	<body>
-		<div class="topnav">
-			<input type="text" id="searchBar" placeholder="Search..." function="search()">
+		<div class="topnavContainer">
+			<div class="topnav">
+				<input type="text" id="searchBar" placeholder="Search..." function="search()">
+			</div>
 		</div>
 		<div class="section">
 			<h1>Downtime</h1>

diff --git a/mechanics.html b/mechanics.html
@@ -21,8 +21,10 @@
 	</head>
 
 	<body>
-		<div class="topnav">
-			<input type="text" id="searchBar" placeholder="Search..." function="search()">
+		<div class="topnavContainer">
+			<div class="topnav">
+				<input type="text" id="searchBar" placeholder="Search..." function="search()">
+			</div>
 		</div>
 		<h1>Mechanics</h1>
 		<div class="section">

diff --git a/styling.css b/styling.css
@@ -67,69 +67,49 @@ ul {
 	padding: 1rem;
 }
 
-/* Add a black background color to the top navigation bar */
-/* .topnav {
-	overflow: hidden;
+.topnavContainer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	align-content: stretch;
 	background-color: #e9e9e9;
-} */
-
-/* Style the links inside the navigation bar */
-/* .topnav a {
-	float: left;
-	display: block;
-	color: black;
-	text-align: center;
-	padding: 14px 16px;
-	text-decoration: none;
-	font-size: 17px;
-} */
-
-/* Change the color of links on hover */
-/* .topnav a:hover {
-	background-color: #ddd;
-	color: black;
-} */
-
-/* Style the "active" element to highlight the current page */
-/* .topnav a.active {
-	background-color: #2196F3;
-	color: white;
-} */
-
-/* Style the search box inside the navigation bar */
-/* .topnav input[type=text] {
-	float: right;
-	padding: 6px;
-	border: none;
-	margin-top: 8px;
-	margin-right: 16px;
-	font-size: 17px;
-} */
+	margin: 0.5rem;
+	height: 2.5rem;
+}
 
 /* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
 @media screen and (min-width: 600px) {
 	.topnav {
 		display: none;
 	}
+	.topnavContainer {
+		display: none;
+	}
 }
 
 @media screen and (max-width: 600px) {
 	.topnav {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		align-content: stretch;
 		box-sizing: border-box;
-		max-width: 100%;
 		position: -webkit-sticky;
 		/* Safari */
 		position: sticky;
 		top: 0;
+		width: 100%;
+		height: 100%;
 	}
 
 	.topnav input[type=text] {
-		width: 100%;
-		/* display: block; */
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		box-sizing: border-box;
+		display: block;
 		text-align: left;
-		width: 100%;
-		margin: 0;
-		padding: 14px;
 		border: 1px solid #ccc;
+		width: 100%;
+		height: 100%;
 	}
 }