Various improvements to directories and design

layouts/_default/baseof.html

@@ -541,8 +541,8 @@
 
         /* Case study logo styling */
         .case-logo {
-            width: 64px;
-            height: 64px;
+            width: 72px;
+            height: 72px;
             object-fit: contain;
             border-radius: 8px;
             margin-bottom: 16px;

layouts/_default/list.html

@@ -29,7 +29,7 @@
         {{ if .Params.image }}
         <img src="{{ .Params.image }}" alt="{{ .Title }} logo" class="case-logo" />
         {{ end }}
-        <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
+        <h3><a href="{{ .RelPermalink }}" class="card-title-link">{{ .Title }}</a></h3>
         {{ if .Description }}
         <p>{{ .Description }}</p>
         {{ else if .Summary }}
@@ -40,11 +40,10 @@
         {{ if .Params.tags }}
         <div class="tags">
             {{ range .Params.tags }}
-            <span class="tag">{{ . }}</span>
+            <a href="?tag={{ . | urlize }}" class="tag">{{ . }}</a>
             {{ end }}
         </div>
         {{ end }}
-        <a href="{{ .RelPermalink }}" class="btn">Read More</a>
     </div>
     {{ end }}
 </div>
@@ -120,6 +119,36 @@
     margin: 0.25rem 0.25rem 0 0;
     border-radius: 0.25rem;
     font-size: 0.875rem;
+    text-decoration: none;
+    transition: all 0.2s ease;
+}
+
+.tag:hover {
+    background: var(--e2c-yellow);
+    color: var(--text-primary);
+    transform: translateY(-1px);
+}
+
+.card-title-link {
+    display: inline-block;
+    padding: 8px 16px;
+    background: var(--e2c-yellow);
+    color: var(--text-primary) !important;
+    text-decoration: none !important;
+    border-radius: 12px;
+    margin: 8px 0;
+    font-weight: 600;
+    font-size: 1.25rem;
+    transition: all 0.2s ease;
+    border: 2px solid var(--e2c-yellow);
+}
+
+.card-title-link:hover {
+    background: var(--e2c-dark-yellow);
+    border-color: var(--e2c-dark-yellow);
+    color: var(--text-primary) !important;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 .card {
@@ -159,6 +188,10 @@ document.addEventListener('DOMContentLoaded', function() {
     const cardGrid = document.getElementById('cardGrid');
     const cards = Array.from(cardGrid.querySelectorAll('.card'));
     
+    // Check for URL parameter to pre-filter by tag
+    const urlParams = new URLSearchParams(window.location.search);
+    const preSelectedTag = urlParams.get('tag');
+    
     // Collect all unique tags
     const allTags = new Set();
     cards.forEach(card => {
@@ -173,10 +206,16 @@ document.addEventListener('DOMContentLoaded', function() {
         const option = document.createElement('option');
         option.value = tag;
         option.textContent = tag;
+        if (preSelectedTag && tag === preSelectedTag) {
+            option.selected = true;
+        }
         tagFilter.appendChild(option);
     });
     
     function updateTagFilter() {
+        // Store currently selected value
+        const currentSelection = tagFilter.value;
+        
         // Clear existing options except "All tags"
         tagFilter.innerHTML = '<option value="">All tags</option>';
         
@@ -196,6 +235,10 @@ document.addEventListener('DOMContentLoaded', function() {
             const option = document.createElement('option');
             option.value = tag;
             option.textContent = tag;
+            // Maintain selection if this tag was previously selected
+            if (tag === currentSelection) {
+                option.selected = true;
+            }
             tagFilter.appendChild(option);
         });
     }
@@ -250,7 +293,18 @@ document.addEventListener('DOMContentLoaded', function() {
     
     // Event listeners
     searchInput.addEventListener('input', filterAndSort);
-    tagFilter.addEventListener('change', filterAndSort);
+    tagFilter.addEventListener('change', function() {
+        // Update URL when tag filter changes
+        const selectedTag = tagFilter.value;
+        const url = new URL(window.location);
+        if (selectedTag) {
+            url.searchParams.set('tag', selectedTag);
+        } else {
+            url.searchParams.delete('tag');
+        }
+        window.history.replaceState({}, '', url);
+        filterAndSort();
+    });
     sortBy.addEventListener('change', filterAndSort);
     
     // Initial sort by title

layouts/_default/single.html

@@ -17,7 +17,7 @@
         {{ if .Params.tags }}
         <div class="tags">
             {{ range .Params.tags }}
-            <span class="tag">{{ . }}</span>
+            <a href="/{{ $.Section }}/?tag={{ . | urlize }}" class="tag">{{ . }}</a>
             {{ end }}
         </div>
         {{ end }}
@@ -91,6 +91,14 @@
     margin: 0.25rem 0.25rem 0 0;
     border-radius: 0.25rem;
     font-size: 0.875rem;
+    text-decoration: none;
+    transition: all 0.2s ease;
+}
+
+.tag:hover {
+    background: var(--e2c-yellow);
+    color: var(--text-primary);
+    transform: translateY(-1px);
 }
 </style>
 {{ end }}