improved top nav bar look as well as the resouce lists icons

script.js

@@ -623,24 +623,22 @@ 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=64`;
-        faviconUrl = `https://www.google.com/s2/favicons?domain=${url.hostname}&sz=32`;
     } catch (e) {
         console.warn('Invalid URL:', resource.link);
     }
     
     card.innerHTML = `
         <div class="resource-header">
+            ${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">
-                    ${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>
@@ -648,12 +646,14 @@ function createResourceCard(resource) {
                             <meta itemprop="ratingCount" content="${resource.stars}">
                         </div>
                     ` : ''}
-        </div>
+                </h3>
                 ${resource.description ? `
                     <div class="resource-description" itemprop="description">
                         ${resource.description}
                     </div>
                 ` : ''}
+            </div>
+        </div>
     `;
 
     return card;

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 {
+.resource-description {
-    color: var(--hover-color);
+    margin: 4px 0 0 0;
+    color: var(--text-color);
+    opacity: 0.7;
+    font-size: 0.95em;
+    line-height: 1.4;
 }
 
-/* Dark theme adjustment */
+.resource-stars {
-[data-theme="dark"] .resource-title a {
+    color: var(--star-color);
-    color: #a48ec7; /* A lighter shade of purple for dark mode */
+    font-size: 0.9em;
-}
+    display: flex;
-
+    align-items: center;
-[data-theme="dark"] .resource-title a:hover {
+    gap: 4px;
-    color: #b9a8d7; /* Even lighter shade for hover in dark mode */
 }
 
 .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: 0.5rem 0 0 0;
-        margin-top: 0.5rem;
-        margin-bottom: 0.5rem;
     }
 
     .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 {
+    .search-box {
-        max-width: 100px;
+        grid-area: search;
-        font-size: 0.8rem;
+        width: 100%;
-        padding: 0.3rem;
+        margin: 0.5rem 0 0 0;
-    }
-
-    .theme-toggle {
-        padding: 0.3rem;
-        font-size: 1rem;
     }
 }
 
 /* Extra small screens */
 @media (max-width: 480px) {
     .nav-content {
-        flex-wrap: wrap;
+        gap: 0.3rem;
-        gap: 0.5rem;
+        padding: 0.3rem 1rem;
-        padding: 0 3rem;
     }
 
     .logo-container {
-        order: 1;
         height: 28px;
-        width: 100px;
+        max-width: 120px;
-    }
-
-    .search-box {
-        order: 3;
-        width: 100%;
-        max-width: none;
-        margin-top: 0.3rem;
-    }
-
-    .theme-controls {
-        order: 2;
     }
 
     .theme-select {
         max-width: 90px;
-    }
+        font-size: 0.75rem;
-
-    .main-content {
-        padding-top: 120px; /* Further increase padding-top for very small screens */
     }
 }