From 07fae466fc244fcb8cfbabe76c92f98418a1b9c2 Mon Sep 17 00:00:00 2001
From: damedotblog <hi@dame.art>
Date: Fri, 28 Feb 2025 01:30:12 -0500
Subject: [PATCH] fix navbar alignmnet

---
 src/components/Navbar/Navbar.css       | 14 ++++++++++---
 src/components/Resources/Resources.css | 27 ++++++++++++--------------
 src/components/Resources/Resources.js  | 17 ----------------
 3 files changed, 23 insertions(+), 35 deletions(-)

diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css
index 2628343..c90a8fb 100644
--- a/src/components/Navbar/Navbar.css
+++ b/src/components/Navbar/Navbar.css
@@ -283,6 +283,8 @@
   visibility: hidden;
   transform: translateY(-10px);
   transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
+  display: flex;
+  flex-direction: column; /* Ensure items are in a column */
 }
 
 .dropdown-container:hover .dropdown-menu {
@@ -307,18 +309,25 @@
   white-space: nowrap;
   width: 100%;
   box-sizing: border-box;
+  text-align: left; /* Align text to the left */
 }
 
+/* Adjust hover state for dropdown items */
 .dropdown-menu li a:hover {
   background-color: rgba(59, 154, 248, 0.1);
   color: #3B9AF8;
+  width: 100%;
 }
 
+/* Ensure that non-dropdown links don't get affected by these changes */
 .navbar-links ul li a:not(.dropdown-trigger) {
-  padding-right: 0;
   display: inline-block;
 }
 
+/* Extra rule to ensure dropdown container doesn't affect layout */
+.dropdown-container {
+  position: relative;
+}
 
 /* Dark mode adjustments for dropdown */
 .dark-mode .dropdown-menu {
@@ -388,7 +397,6 @@
     padding: 0;
     list-style: none;
     margin: 0px;
-    align-items: flex-start;
   }
   
   .navbar-links ul li {
@@ -490,7 +498,7 @@
 
 @media (max-width: 940px) {
   .dropdown-trigger {
-    padding-right: 1.5em;
+    padding-right: 0em;
   }
   
   .dropdown-trigger::after {
diff --git a/src/components/Resources/Resources.css b/src/components/Resources/Resources.css
index bc36dd6..180023e 100644
--- a/src/components/Resources/Resources.css
+++ b/src/components/Resources/Resources.css
@@ -17,10 +17,11 @@
 
 /* ======= Redesigned Header Section ======= */
 .resources-header {
-  margin-bottom: 2rem;
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 2em;
+  margin-bottom: 2rem;
+  margin-top: 1em;
 }
 
 /* Header main section with title and tagline */
@@ -85,7 +86,6 @@
   display: inline-flex;
   gap: 1rem;
   justify-content: center;
-  margin: .5rem 0;
 }
 
 /* Improved search input */
@@ -550,6 +550,10 @@
   opacity: 0.8;
 }
 
+#new-toggle:focus {
+  border-color: var(--card-border);
+}
+
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
@@ -572,8 +576,9 @@
   }
   
   .search-filters-container {
-    flex-direction: column;
     align-items: stretch;
+    flex-direction: row;
+    gap: 2.5rem;
   }
   
   .search-container {
@@ -582,7 +587,7 @@
   
   .filter-dropdowns {
     flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
     gap: 1rem;
   }
   
@@ -592,14 +597,10 @@
     width: 100%;
   }
   
-  .filter-select {
-    width: 100%;
-  }
-  
   .category-filter-dropdown,
   .quality-filter {
-    flex-direction: column;
-    align-items: flex-start;
+    flex-direction: row;
+    align-items: center;
     gap: 0.5rem;
   }
   
@@ -608,10 +609,6 @@
     justify-content: space-between;
   }
   
-  .resources-disclaimer {
-    flex-direction: column;
-  }
-  
   .resources-header h1 {
     font-size: 1.5rem;
   }
diff --git a/src/components/Resources/Resources.js b/src/components/Resources/Resources.js
index 918843b..c86c748 100644
--- a/src/components/Resources/Resources.js
+++ b/src/components/Resources/Resources.js
@@ -223,23 +223,6 @@ const Resources = () => {
               </button>
             </div>
           </div>
-
-          <div className="header-features">
-            <div className="feature-cards">
-              <div className="feature-card">
-                <span className="feature-icon">🔍</span>
-                <span className="feature-text">Discover analytics, feeds & clients</span>
-              </div>
-              <div className="feature-card">
-                <span className="feature-icon">⚡</span>
-                <span className="feature-text">Enhance your Bluesky experience</span>
-              </div>
-              <div className="feature-card">
-                <span className="feature-icon">🧩</span>
-                <span className="feature-text">Community-built solutions</span>
-              </div>
-            </div>
-          </div>
           
           <div className="resources-disclaimer">
             <div className="disclaimer-icon">⚠️</div>
-- 
2.54.0