From 1512364426354c5a0eff3aec26a81029d77b6753 Mon Sep 17 00:00:00 2001
From: Yeghro <130201060+Yeghro@users.noreply.github.com>
Date: Fri, 24 Jan 2025 23:33:09 -0800
Subject: [PATCH] repositioned serach bar to top nav

---
 index.html |  8 ++++----
 styles.css | 35 +++++++++++++++++++++++++++--------
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index dd4212b..6a471fc 100644
--- a/index.html
+++ b/index.html
@@ -29,6 +29,10 @@
     <nav class="top-nav">
         <div class="nav-content">
             <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">
                 <i class="fas fa-moon"></i>
             </button>
@@ -44,10 +48,6 @@
                 </button>
             </header>
             <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">
                     <!-- Categories will be dynamically populated here -->
                 </ul>
diff --git a/styles.css b/styles.css
index 6092bfb..6fbd5f6 100644
--- a/styles.css
+++ b/styles.css
@@ -62,16 +62,21 @@ body {
 
 .search-box {
     position: relative;
-    margin-bottom: 1.5rem;
+    flex-grow: 1;
+    max-width: 400px;
 }
 
 .search-box input {
     width: 100%;
     padding: 0.5rem 2rem 0.5rem 1rem;
-    border: 1px solid #ddd;
+    border: none;
     border-radius: 4px;
-    background-color: var(--background-color);
-    color: var(--text-color);
+    background-color: rgba(255, 255, 255, 0.1);
+    color: white;
+}
+
+.search-box input::placeholder {
+    color: rgba(255, 255, 255, 0.7);
 }
 
 .search-box i {
@@ -79,7 +84,7 @@ body {
     right: 10px;
     top: 50%;
     transform: translateY(-50%);
-    color: #666;
+    color: rgba(255, 255, 255, 0.7);
 }
 
 .nav-links {
@@ -261,8 +266,22 @@ body {
         padding: 0.75rem;
     }
     
-    .top-nav h1 {
+    .nav-content {
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+    
+    .nav-content h1 {
         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;
     justify-content: space-between;
     align-items: center;
+    gap: 1rem;
 }
 
 .nav-content h1 {
     margin: 0;
     font-size: 1.5rem;
     font-weight: 600;
-    flex-grow: 1;
-    text-align: center;
+    white-space: nowrap;
 }
 
 .theme-toggle {