Center navbar content at 1100px max-width aligning DiscDrop with Releases

This commit is contained in:
2026-07-03 21:41:10 +02:00
parent 135a6fa9cd
commit dc45db101c
+28 -27
View File
@@ -30,34 +30,35 @@
</script> </script>
</head> </head>
<body class="min-h-screen bg-base-100"> <body class="min-h-screen bg-base-100">
<div class="navbar bg-base-300 shadow-lg" style="padding:0 1rem;min-height:3.5rem;display:flex;align-items:center"> <div class="navbar bg-base-300 shadow-lg" style="min-height:3.5rem;display:flex;align-items:center;justify-content:center">
<div style="display:flex;align-items:center;gap:1.5rem;margin-right:auto"> <div style="display:flex;align-items:center;width:100%;max-width:1100px;padding:0 1rem;gap:2rem">
<a href="/" class="font-bold text-lg text-base-content no-underline">DiscDrop</a> <a href="/" class="font-bold text-lg text-base-content no-underline" style="flex-shrink:0">DiscDrop</a>
<div id="search-wrapper" style="width:18rem"> <div style="flex:1;display:flex;justify-content:center">
<form hx-get="/api/artists/search" <div id="search-wrapper" style="width:18rem">
hx-target="#search-results" <form hx-get="/api/artists/search"
hx-swap="innerHTML" hx-target="#search-results"
hx-trigger="keyup changed delay:300ms from:#search-input"> hx-swap="innerHTML"
<input id="search-input" type="text" placeholder="Search artists..." hx-trigger="keyup changed delay:300ms from:#search-input">
class="input input-bordered input-sm w-full" name="q" autocomplete="off"> <input id="search-input" type="text" placeholder="Search artists..."
</form> class="input input-bordered input-sm w-full" name="q" autocomplete="off">
<div id="search-results"></div> </form>
<div id="search-results"></div>
</div>
</div>
<a href="/artists" class="font-medium text-base-content no-underline {#if activeTab == 'artists'}font-bold{/if}" style="flex-shrink:0">Artists</a>
<div style="display:flex;align-items:center;gap:0.5rem;flex-shrink:0;margin-left:1rem">
<select class="select select-bordered select-sm" style="width:7rem" onchange="setTheme(this)">
<option value="dark">Dark</option>
<option value="light">Light</option>
<option value="synthwave">Synthwave</option>
<option value="retro">Retro</option>
<option value="dracula">Dracula</option>
<option value="night">Night</option>
<option value="dim">Dim</option>
<option value="nord">Nord</option>
</select>
<button class="btn btn-ghost btn-sm" onclick="settingsModal.showModal()">⚙️</button>
</div> </div>
<a href="/artists" class="font-medium text-base-content no-underline {#if activeTab == 'artists'}font-bold{/if}">Artists</a>
</div>
<div style="display:flex;align-items:center;gap:0.5rem">
<select class="select select-bordered select-sm" style="width:7rem" onchange="setTheme(this)">
<option value="dark">Dark</option>
<option value="light">Light</option>
<option value="synthwave">Synthwave</option>
<option value="retro">Retro</option>
<option value="dracula">Dracula</option>
<option value="night">Night</option>
<option value="dim">Dim</option>
<option value="nord">Nord</option>
</select>
<button class="btn btn-ghost btn-sm" onclick="settingsModal.showModal()">⚙️</button>
</div> </div>
</div> </div>