Mirror/awesome-nostr
1
0
Fork 0
mirror of https://github.com/aljazceru/awesome-nostr.git synced 2025-02-23 07:09:00 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

repositioned serach bar to top nav

Browse Source
This commit is contained in:
Yeghro 2025-01-24 23:33:09 -08:00
parent 3d44f538ae
commit 1512364426
2 changed files with 31 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -29,6 +29,10 @@
<nav class="top-nav"> <nav class="top-nav">
<div class="nav-content"> <div class="nav-content">
<h1>Awesome Nostr.net</h1> <h1>Awesome Nostr.net</h1>
<div class="search-box">
<input type="text" id="search" placeholder="Search resources...">
<i class="fas fa-search"></i>
</div>
<button id="darkModeToggle" class="theme-toggle" aria-label="Toggle dark mode"> <button id="darkModeToggle" class="theme-toggle" aria-label="Toggle dark mode">
<i class="fas fa-moon"></i> <i class="fas fa-moon"></i>
</button> </button>
@ -44,10 +48,6 @@
</button> </button>
</header> </header>
<div class="sidebar-content"> <div class="sidebar-content">
<div class="search-box">
<input type="text" id="search" placeholder="Search resources...">
<i class="fas fa-search"></i>
</div>
<ul class="nav-links"> <ul class="nav-links">
<!-- Categories will be dynamically populated here --> <!-- Categories will be dynamically populated here -->
</ul> </ul>

35
styles.css
View File

@ -62,16 +62,21 @@ body {
.search-box { .search-box {
position: relative; position: relative;
margin-bottom: 1.5rem; flex-grow: 1;
max-width: 400px;
} }
.search-box input { .search-box input {
width: 100%; width: 100%;
padding: 0.5rem 2rem 0.5rem 1rem; padding: 0.5rem 2rem 0.5rem 1rem;
border: 1px solid #ddd; border: none;
border-radius: 4px; border-radius: 4px;
background-color: var(--background-color); background-color: rgba(255, 255, 255, 0.1);
color: var(--text-color); color: white;
}
.search-box input::placeholder {
color: rgba(255, 255, 255, 0.7);
} }
.search-box i { .search-box i {
@ -79,7 +84,7 @@ body {
right: 10px; right: 10px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
color: #666; color: rgba(255, 255, 255, 0.7);
} }
.nav-links { .nav-links {
@ -261,8 +266,22 @@ body {
padding: 0.75rem; padding: 0.75rem;
} }
.top-nav h1 { .nav-content {
flex-wrap: wrap;
gap: 0.5rem;
}
.nav-content h1 {
font-size: 1.25rem; font-size: 1.25rem;
width: 100%;
text-align: center;
}
.search-box {
order: 3;
width: 100%;
max-width: none;
margin-top: 0.5rem;
} }
} }
@ -498,14 +517,14 @@ button:focus {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 1rem;
} }
.nav-content h1 { .nav-content h1 {
margin: 0; margin: 0;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 600; font-weight: 600;
flex-grow: 1; white-space: nowrap;
text-align: center;
} }
.theme-toggle { .theme-toggle {