From eabcb6961524f20aebda3751a18777bd4e956083 Mon Sep 17 00:00:00 2001
From: Yeghro <130201060+Yeghro@users.noreply.github.com>
Date: Sat, 25 Jan 2025 17:20:41 -0800
Subject: [PATCH 1/5] improved top nav bar look as well as the resouce lists
 icons

---
 script.js  |  48 +++++++--------
 styles.css | 170 ++++++++++++++++++++---------------------------------
 2 files changed, 89 insertions(+), 129 deletions(-)

diff --git a/script.js b/script.js
index b309b32..e261c84 100644
--- a/script.js
+++ b/script.js
@@ -623,37 +623,37 @@ function createResourceCard(resource) {
     let faviconUrl = '';
     try {
         const url = new URL(resource.link);
-        // Using Google's favicon service as a fallback if the direct favicon isn't available
-        faviconUrl = `https://www.google.com/s2/favicons?domain=${url.hostname}&sz=32`;
+        faviconUrl = `https://www.google.com/s2/favicons?domain=${url.hostname}&sz=64`;
     } catch (e) {
         console.warn('Invalid URL:', resource.link);
     }
     
     card.innerHTML = `
         <div class="resource-header">
-            <h3 class="resource-title">
-                <a href="${resource.link}" 
-                   target="_blank" 
-                   rel="noopener"
-                   itemprop="name">
-                    ${faviconUrl ? `<img src="${faviconUrl}" alt="" class="resource-favicon" />` : ''}
-                    ${resource.name}
-                    <i class="fas fa-external-link-alt" aria-hidden="true"></i>
-                </a>
-            </h3>
-            ${resource.stars ? `
-                <div class="resource-stars" itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
-                    <i class="fas fa-star" aria-hidden="true"></i>
-                    <span itemprop="ratingValue">${resource.stars}</span>
-                    <meta itemprop="ratingCount" content="${resource.stars}">
-                </div>
-            ` : ''}
-        </div>
-        ${resource.description ? `
-            <div class="resource-description" itemprop="description">
-                ${resource.description}
+            ${faviconUrl ? `<img src="${faviconUrl}" alt="" class="resource-favicon" />` : ''}
+            <div class="resource-content">
+                <h3 class="resource-title">
+                    <a href="${resource.link}" 
+                       target="_blank" 
+                       rel="noopener"
+                       itemprop="name">
+                        ${resource.name}
+                    </a>
+                    ${resource.stars ? `
+                        <div class="resource-stars" itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
+                            <i class="fas fa-star" aria-hidden="true"></i>
+                            <span itemprop="ratingValue">${resource.stars}</span>
+                            <meta itemprop="ratingCount" content="${resource.stars}">
+                        </div>
+                    ` : ''}
+                </h3>
+                ${resource.description ? `
+                    <div class="resource-description" itemprop="description">
+                        ${resource.description}
+                    </div>
+                ` : ''}
             </div>
-        ` : ''}
+        </div>
     `;
 
     return card;
diff --git a/styles.css b/styles.css
index a538246..c230b1f 100644
--- a/styles.css
+++ b/styles.css
@@ -181,7 +181,7 @@ body {
 /* Resource Cards */
 .resource-card {
     background: var(--card-background);
-    border-radius: 8px;
+    border-radius: 12px;
     padding: 16px;
     margin-bottom: 16px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
@@ -190,29 +190,52 @@ body {
     overflow: visible;
 }
 
+.resource-header {
+    display: grid;
+    grid-template-columns: 64px 1fr;
+    gap: 16px;
+    align-items: start;
+}
+
+.resource-favicon {
+    width: 64px;
+    height: 64px;
+    margin: 0;
+    grid-row: span 2;
+    border-radius: 12px;
+    object-fit: cover;
+}
+
 .resource-title {
+    margin: 0;
     font-size: 1.2em;
-    margin-bottom: 8px;
     color: var(--text-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
 .resource-title a {
-    color: var(--primary-color);
+    color: var(--text-color);
     text-decoration: none;
+    font-weight: 600;
     transition: color 0.2s ease;
 }
 
-.resource-title a:hover {
-    color: var(--hover-color);
+.resource-description {
+    margin: 4px 0 0 0;
+    color: var(--text-color);
+    opacity: 0.7;
+    font-size: 0.95em;
+    line-height: 1.4;
 }
 
-/* Dark theme adjustment */
-[data-theme="dark"] .resource-title a {
-    color: #a48ec7; /* A lighter shade of purple for dark mode */
-}
-
-[data-theme="dark"] .resource-title a:hover {
-    color: #b9a8d7; /* Even lighter shade for hover in dark mode */
+.resource-stars {
+    color: var(--star-color);
+    font-size: 0.9em;
+    display: flex;
+    align-items: center;
+    gap: 4px;
 }
 
 .resource-link {
@@ -232,33 +255,10 @@ body {
     text-decoration: underline;
 }
 
-.resource-description {
-    color: var(--text-color);
-    margin: 12px 0;
-    line-height: 1.5;
-    font-size: 0.95em;
-    padding: 8px 12px;
-    background: rgba(156, 82, 139, 0.05);
-    border-radius: 4px;
-    border-left: 3px solid var(--primary-color);
-}
-
-.resource-stars {
-    color: var(--star-color);
-    font-size: 0.9em;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-}
-
 .fa-star {
     color: var(--star-color);
 }
 
-.fa-external-link-alt {
-    font-size: 0.9em;
-}
-
 /* Responsive Design */
 @media (max-width: 768px) {
     .sidebar {
@@ -289,9 +289,14 @@ body {
     }
     
     .nav-content {
-        flex-wrap: wrap;
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        grid-template-areas: 
+            "logo . controls"
+            "search search search";
         gap: 0.5rem;
-        padding: 0.5rem 3.5rem;
+        padding: 0.5rem 1rem;
+        margin-left: 2.5rem; /* Space for menu toggle */
     }
     
     .nav-content h1 {
@@ -301,11 +306,9 @@ body {
     }
     
     .search-box {
-        order: 3;
+        grid-area: search;
         width: 100%;
-        max-width: none;
-        margin-top: 0.5rem;
-        margin-bottom: 0.5rem;
+        margin: 0.5rem 0 0 0;
     }
 
     .nav-links a {
@@ -602,22 +605,6 @@ button:focus {
     display: none;
 }
 
-.resource-favicon {
-    width: 32px;
-    height: 32px;
-    margin-right: 8px;
-    vertical-align: middle;
-    display: inline-block;
-}
-
-.resource-title a {
-    display: flex;
-    align-items: center;
-    color: var(--primary-color);
-    text-decoration: none;
-    transition: color 0.2s ease;
-}
-
 .logo-container {
     height: 40px;
     width: 160px;
@@ -634,79 +621,52 @@ button:focus {
 /* Update responsive styles */
 @media (max-width: 768px) {
     .nav-content {
-        padding: 0 3.5rem; /* Make space for menu toggle */
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        grid-template-areas: 
+            "logo . controls"
+            "search search search";
+        gap: 0.5rem;
+        padding: 0.5rem 1rem;
+        margin-left: 2.5rem; /* Space for menu toggle */
     }
 
-    .menu-toggle {
-        top: 12px; /* Adjust position to align with nav */
-        left: 12px;
-    }
-
-    /* Adjust logo size for mobile */
     .logo-container {
+        grid-area: logo;
         height: 32px;
-        width: 120px;
+        width: auto;
+        max-width: 140px;
     }
 
-    /* Make search more compact on mobile */
-    .search-box {
-        max-width: 160px;
-    }
-
-    .search-box input {
-        padding: 0.4rem 1.8rem 0.4rem 0.8rem;
-        font-size: 0.9rem;
-    }
-
-    /* Adjust theme controls for mobile */
     .theme-controls {
+        grid-area: controls;
+        justify-self: end; /* Align to right */
         display: flex;
         gap: 0.5rem;
     }
 
-    .theme-select {
-        max-width: 100px;
-        font-size: 0.8rem;
-        padding: 0.3rem;
-    }
-
-    .theme-toggle {
-        padding: 0.3rem;
-        font-size: 1rem;
+    .search-box {
+        grid-area: search;
+        width: 100%;
+        margin: 0.5rem 0 0 0;
     }
 }
 
 /* Extra small screens */
 @media (max-width: 480px) {
     .nav-content {
-        flex-wrap: wrap;
-        gap: 0.5rem;
-        padding: 0 3rem;
+        gap: 0.3rem;
+        padding: 0.3rem 1rem;
     }
 
     .logo-container {
-        order: 1;
         height: 28px;
-        width: 100px;
-    }
-
-    .search-box {
-        order: 3;
-        width: 100%;
-        max-width: none;
-        margin-top: 0.3rem;
-    }
-
-    .theme-controls {
-        order: 2;
+        max-width: 120px;
     }
 
     .theme-select {
         max-width: 90px;
-    }
-
-    .main-content {
-        padding-top: 120px; /* Further increase padding-top for very small screens */
+        font-size: 0.75rem;
     }
 }
 

From 231eb742e79c52f82bebcf93dd573513854de2c7 Mon Sep 17 00:00:00 2001
From: Yeghro <130201060+Yeghro@users.noreply.github.com>
Date: Sat, 25 Jan 2025 17:29:30 -0800
Subject: [PATCH 2/5] added logo as favicon as well.  It looks good but if you
 prefer something else let me know

---
 index.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/index.html b/index.html
index b6b8b10..859662f 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,11 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Add favicon links -->
+    <link rel="icon" type="image/png" href="Logo.png">
+    <link rel="apple-touch-icon" href="Logo.png">
+    
     <meta name="description" content="A comprehensive collection of Nostr resources, tools, clients, and protocols for developers and users.">
     <meta name="keywords" content="nostr, cryptocurrency, decentralized social, protocols, tools, clients, resources">
     <meta name="author" content="Your Name">

From e456c04b533e89b814beb41349a2ddca28d0d463 Mon Sep 17 00:00:00 2001
From: Yeghro <130201060+Yeghro@users.noreply.github.com>
Date: Sat, 25 Jan 2025 17:39:38 -0800
Subject: [PATCH 3/5] resouce items will display as a grid rather than a single
 column and will responsivly scale as needed

---
 styles.css | 43 ++++++++++++++++++++++++++++++++++---------
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/styles.css b/styles.css
index c230b1f..5766c35 100644
--- a/styles.css
+++ b/styles.css
@@ -418,12 +418,39 @@ body {
 }
 
 #resources-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1rem;
     width: 100%;
     height: auto;
     min-height: 200px;
     overflow: visible;
 }
 
+/* Ensure section headers span full width */
+#resources-container > h2 {
+    grid-column: 1 / -1;
+}
+
+/* Update resource card styles for grid layout */
+.resource-card {
+    background: var(--card-background);
+    border-radius: 12px;
+    padding: 16px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    height: 100%; /* This ensures all cards in a row are the same height */
+    display: flex;
+    flex-direction: column;
+}
+
+/* Special handling for contributors card and other full-width elements */
+.resource-card.contributors-card,
+.no-results,
+.error-message,
+.markdown-content {
+    grid-column: 1 / -1;
+}
+
 /* Category label styles */
 .category-label {
     font-size: 0.8em;
@@ -465,15 +492,6 @@ body {
     color: #f1c40f;
 }
 
-/* Update resource container header styles */
-#resources-container h2 {
-    color: var(--primary-color);
-    margin-top: 1rem;    /* Add top margin to push content down */
-    padding-top: 1rem;   /* Add padding to create more space */
-    position: relative;  /* Ensure it's positioned relative to its container */
-    z-index: 1;         /* Keep it above other content but below the nav */
-}
-
 /* Main content scrollbar styles */
 .main-content::-webkit-scrollbar {
     width: 8px;
@@ -768,4 +786,11 @@ button:focus {
     .main-content {
         padding-top: 140px;  /* Even more padding for smallest screens */
     }
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+    #resources-container {
+        grid-template-columns: 1fr; /* Single column on small screens */
+    }
 }
\ No newline at end of file

From c22fdc18256f2b66f8d5bd940fbf1efb64bc42f3 Mon Sep 17 00:00:00 2001
From: Yeghro <130201060+Yeghro@users.noreply.github.com>
Date: Sat, 25 Jan 2025 17:48:16 -0800
Subject: [PATCH 4/5] lowered the sidebar header a bit

---
 styles.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/styles.css b/styles.css
index 5766c35..d3c7328 100644
--- a/styles.css
+++ b/styles.css
@@ -71,6 +71,7 @@ body {
     color: var(--text-color);
     font-size: 1.1rem;
     font-weight: 500;
+    margin-top: 2rem;
 }
 
 .search-box {

From a3614693b9f235790da821dc0ba36395f8affcbc Mon Sep 17 00:00:00 2001
From: Yeghro <130201060+Yeghro@users.noreply.github.com>
Date: Sat, 25 Jan 2025 17:52:34 -0800
Subject: [PATCH 5/5] more minor position adjustments for sidebar header mobile
 and desktop

---
 styles.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/styles.css b/styles.css
index d3c7328..242fc2c 100644
--- a/styles.css
+++ b/styles.css
@@ -63,7 +63,7 @@ body {
     justify-content: space-between;
     align-items: center;
     margin-bottom: 2rem;
-    margin-top: 3rem; /* Increased from 1rem to 2.5rem for more spacing */
+    margin-top: 2rem; /* Increased from 1rem to 2.5rem for more spacing */
 }
 
 .sidebar-header h4 {
@@ -71,7 +71,6 @@ body {
     color: var(--text-color);
     font-size: 1.1rem;
     font-weight: 500;
-    margin-top: 2rem;
 }
 
 .search-box {
@@ -276,6 +275,10 @@ body {
         box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
     }
 
+    .sidebar-header {
+        margin-top: 5em;
+    }
+
     .main-content {
         margin-left: 0;
         padding-top: 100px; /* Increase padding-top for mobile to account for wrapped nav elements */