Various UX improvements to index and dropdowns

content/_index.md

@@ -7,10 +7,10 @@ hero_alt: "Exit to Community concept illustration"
 
 <div class="hero-section">
   <div class="hero-content">
-    <img src="/img/Frame_1_(6).png" alt="Exit to Community concept illustration" class="hero-image" />
     <div class="hero-text">
       <h1>Stories and strategies for community ownership</h1>
     </div>
+    <img src="/img/Frame_1_(6).png" alt="Exit to Community concept illustration" class="hero-image" />
   </div>
 </div>
 

layouts/_default/baseof.html

@@ -8,6 +8,20 @@
     <link rel="icon" type="image/x-icon" href="/favicon.ico">
     <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
     
+    <!-- Open Graph / Social Media Meta Tags -->
+    <meta property="og:title" content="{{ if and .Title (ne .Title .Site.Title) }}{{ .Title }} - {{ end }}{{ .Site.Title }}">
+    <meta property="og:description" content="{{ .Description | default .Site.Params.description }}">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="{{ .Permalink }}">
+    {{ if .Params.image }}<meta property="og:image" content="{{ .Site.BaseURL }}{{ .Params.image }}">{{ end }}
+    {{ if .Params.banner }}<meta property="og:image" content="{{ .Site.BaseURL }}{{ .Params.banner }}">{{ end }}
+    
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="{{ if and .Title (ne .Title .Site.Title) }}{{ .Title }} - {{ end }}{{ .Site.Title }}">
+    <meta name="twitter:description" content="{{ .Description | default .Site.Params.description }}">
+    {{ if .Params.image }}<meta name="twitter:image" content="{{ .Site.BaseURL }}{{ .Params.image }}">{{ end }}
+    {{ if .Params.banner }}<meta name="twitter:image" content="{{ .Site.BaseURL }}{{ .Params.banner }}">{{ end }}
+    
     <link rel="stylesheet" href="/css/main.css">
 
     <!-- Matomo -->
@@ -83,9 +97,10 @@
                 </div>
                 <div class="footer-section">
                     <div class="footer-links">
-                        <p>&copy; {{ now.Year }} <a href="/contact">E2C Collective</a><br />
+                        <p>&copy; {{ now.Year }} E2C Collective<br />
                         In collaboration with <a href="https://www.colorado.edu/lab/medlab/exit-to-community">MEDLab at CU Boulder</a><br />
                         This work is licensed under a Creative Commons Attribution 4.0 License</p>
+                        <p><a href="/contact">Connect with us</a></p>
                     </div>
                 </div>
             </div>

layouts/_default/list.html

@@ -9,14 +9,37 @@
 {{ if .Pages }}
 <div class="filter-controls">
     <div class="filter-row">
-        <input type="text" id="searchInput" placeholder="Search titles and descriptions..." class="search-input">
-        <select id="tagFilter" class="tag-filter">
-            <option value="">All tags</option>
-        </select>
-        <select id="sortBy" class="sort-select">
-            <option value="title">Sort by Title</option>
-            <option value="date">Sort by Date</option>
-        </select>
+        <input type="text" id="searchInput" placeholder="Search full text..." class="search-input">
+        <div class="tag-filter-container">
+            <div id="tagDropdown" class="tag-dropdown">
+                <div class="tag-dropdown-trigger">
+                    <span class="dropdown-label">Select tags</span>
+                    <div class="selected-tags" id="selectedTags"></div>
+                    <svg class="dropdown-arrow" width="12" height="8" viewBox="0 0 12 8" fill="none">
+                        <path d="M1 1.5L6 6.5L11 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </div>
+                <div class="tag-dropdown-menu" id="tagDropdownMenu">
+                    <div class="tag-options" id="tagOptions">
+                        <!-- Tags will be populated here -->
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="sort-container">
+            <div id="sortDropdown" class="sort-dropdown">
+                <div class="sort-dropdown-trigger">
+                    <span class="sort-label">Sort by Title</span>
+                    <svg class="dropdown-arrow" width="12" height="8" viewBox="0 0 12 8" fill="none">
+                        <path d="M1 1.5L6 6.5L11 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </div>
+                <div class="sort-dropdown-menu" id="sortDropdownMenu">
+                    <div class="sort-option" data-value="title">Sort by Title</div>
+                    <div class="sort-option" data-value="date">Sort by Date</div>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 <div class="grid" id="cardGrid">
@@ -24,6 +47,7 @@
     <div class="card" 
          data-title="{{ .Title }}"
          data-description="{{ if .Description }}{{ .Description }}{{ else if .Summary }}{{ .Summary | plainify | replaceRE "^### \\*\\*Summary\\*\\*\\s*" "" | truncate 200 }}{{ else }}{{ .Content | plainify | replaceRE "^### \\*\\*Summary\\*\\*\\s*" "" | truncate 200 }}{{ end }}"
+         data-content="{{ .Content | plainify | replaceRE "^### \\*\\*Summary\\*\\*\\s*" "" }}"
          data-tags="{{ if .Params.tags }}{{ delimit .Params.tags "," }}{{ end }}"
          data-date="{{ .Date.Format "2006-01-02" }}">
         {{ if .Params.banner }}
@@ -83,9 +107,9 @@
     align-items: center;
 }
 
-.search-input, .tag-filter, .sort-select {
+.search-input {
     font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    font-weight: 500;
+    font-weight: 400;
     font-size: 14px;
     padding: 10px 16px;
     border: 1px solid var(--border);
@@ -94,14 +118,11 @@
     backdrop-filter: blur(8px);
     transition: all 0.2s ease;
     color: var(--text-primary);
-}
-
-.search-input {
     flex: 1;
     min-width: 280px;
 }
 
-.search-input:focus, .tag-filter:focus, .sort-select:focus {
+.search-input:focus {
     outline: none;
     border-color: var(--e2c-yellow);
     background: var(--e2c-yellow);
@@ -110,14 +131,230 @@
 }
 
 .search-input::placeholder {
-    color: var(--text-secondary);
+    color: var(--text-primary);
     font-weight: 400;
 }
 
-.tag-filter, .sort-select {
+/* Custom Multi-Select Dropdown */
+.tag-filter-container {
+    position: relative;
+    min-width: 200px;
+}
+
+.tag-dropdown {
+    position: relative;
+    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.tag-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    padding: 10px 16px;
+    border: 1px solid var(--border);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(8px);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    color: var(--text-primary);
+    font-size: 14px;
+    font-weight: 400;
+    min-height: 20px;
+}
+
+.tag-dropdown-trigger:hover, .tag-dropdown.open .tag-dropdown-trigger {
+    border-color: var(--e2c-yellow);
+    background: var(--e2c-yellow);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.dropdown-label {
+    flex: 1;
+    color: var(--text-primary);
+    font-weight: 400;
+    white-space: nowrap;
+}
+
+.tag-dropdown.has-selection .dropdown-label {
+    display: none;
+}
+
+.selected-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    flex: 1;
+    min-height: 20px;
+}
+
+.selected-tag {
+    background: var(--text-primary);
+    color: white;
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.selected-tag .remove {
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 1;
+    opacity: 0.8;
+}
+
+.selected-tag .remove:hover {
+    opacity: 1;
+}
+
+.dropdown-arrow {
+    margin-left: 8px;
+    transition: transform 0.2s ease;
+    flex-shrink: 0;
+}
+
+.tag-dropdown.open .dropdown-arrow {
+    transform: rotate(180deg);
+}
+
+.tag-dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: var(--card-background);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    box-shadow: 0 8px 24px var(--shadow);
+    z-index: 1000;
+    max-height: 200px;
+    overflow-y: auto;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-4px);
+    transition: all 0.2s ease;
+    margin-top: 4px;
+}
+
+.tag-dropdown.open .tag-dropdown-menu {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.tag-option {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    cursor: pointer;
+    font-size: 14px;
+    color: var(--text-primary);
+    transition: background-color 0.15s ease;
+}
+
+.tag-option:hover {
+    background: rgba(244, 208, 63, 0.1);
+}
+
+.tag-option input[type="checkbox"] {
+    margin-right: 8px;
+    accent-color: var(--e2c-yellow);
+}
+
+.tag-option.selected {
+    background: rgba(244, 208, 63, 0.15);
+    font-weight: 500;
+}
+
+/* Custom Sort Dropdown */
+.sort-container {
+    position: relative;
     min-width: 160px;
 }
 
+.sort-dropdown {
+    position: relative;
+    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.sort-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 16px;
+    border: 1px solid var(--border);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(8px);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    color: var(--text-primary);
+    font-size: 14px;
+    font-weight: 400;
+    min-height: 20px;
+}
+
+.sort-dropdown-trigger:hover, .sort-dropdown.open .sort-dropdown-trigger {
+    border-color: var(--e2c-yellow);
+    background: var(--e2c-yellow);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.sort-label {
+    flex: 1;
+    white-space: nowrap;
+}
+
+.sort-dropdown.open .dropdown-arrow {
+    transform: rotate(180deg);
+}
+
+.sort-dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: var(--card-background);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    box-shadow: 0 8px 24px var(--shadow);
+    z-index: 1000;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-4px);
+    transition: all 0.2s ease;
+    margin-top: 4px;
+}
+
+.sort-dropdown.open .sort-dropdown-menu {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.sort-option {
+    padding: 8px 12px;
+    cursor: pointer;
+    font-size: 14px;
+    color: var(--text-primary);
+    transition: background-color 0.15s ease;
+}
+
+.sort-option:hover {
+    background: rgba(244, 208, 63, 0.1);
+}
+
+.sort-option.selected {
+    background: rgba(244, 208, 63, 0.15);
+    font-weight: 500;
+}
+
 .tags {
     margin-top: 0.5rem;
 }
@@ -216,26 +453,64 @@
         gap: 12px;
     }
     
-    .search-input, .tag-filter, .sort-select {
+    .search-input {
         width: 100%;
         min-width: unset;
         padding: 8px 14px;
         font-size: 12px;
     }
+    
+    .tag-filter-container, .sort-container {
+        min-width: unset;
+        width: 100%;
+    }
+    
+    .sort-dropdown-trigger {
+        padding: 8px 14px;
+        font-size: 12px;
+    }
+    
+    .tag-dropdown-trigger {
+        padding: 8px 14px;
+        font-size: 12px;
+    }
+    
+    .selected-tag {
+        font-size: 11px;
+        padding: 1px 6px;
+    }
+    
+    .tag-dropdown-menu {
+        left: -4px;
+        right: -4px;
+    }
 }
 </style>
 
 <script>
 document.addEventListener('DOMContentLoaded', function() {
     const searchInput = document.getElementById('searchInput');
-    const tagFilter = document.getElementById('tagFilter');
-    const sortBy = document.getElementById('sortBy');
+    const tagDropdown = document.getElementById('tagDropdown');
+    const tagDropdownTrigger = tagDropdown.querySelector('.tag-dropdown-trigger');
+    const tagDropdownMenu = document.getElementById('tagDropdownMenu');
+    const tagOptions = document.getElementById('tagOptions');
+    const selectedTagsContainer = document.getElementById('selectedTags');
+    const sortDropdown = document.getElementById('sortDropdown');
+    const sortDropdownTrigger = sortDropdown.querySelector('.sort-dropdown-trigger');
+    const sortDropdownMenu = document.getElementById('sortDropdownMenu');
+    const sortLabel = sortDropdown.querySelector('.sort-label');
     const cardGrid = document.getElementById('cardGrid');
     const cards = Array.from(cardGrid.querySelectorAll('.card'));
     
+    let selectedTags = new Set();
+    let currentSort = 'title';
+    
     // Check for URL parameter to pre-filter by tag
     const urlParams = new URLSearchParams(window.location.search);
     const preSelectedTag = urlParams.get('tag');
+    if (preSelectedTag) {
+        selectedTags.add(preSelectedTag);
+    }
     
     // Collect all unique tags
     const allTags = new Set();
@@ -246,69 +521,154 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
     
-    // Populate tag filter dropdown
+    // Populate tag dropdown
+    function populateTagOptions() {
+        tagOptions.innerHTML = '';
         Array.from(allTags).sort().forEach(tag => {
-        const option = document.createElement('option');
-        option.value = tag;
-        option.textContent = tag;
-        if (preSelectedTag && tag === preSelectedTag) {
-            option.selected = true;
+            const option = document.createElement('div');
+            option.className = 'tag-option';
+            option.innerHTML = `
+                <input type="checkbox" ${selectedTags.has(tag) ? 'checked' : ''}>
+                <span>${tag}</span>
+            `;
+            
+            const checkbox = option.querySelector('input');
+            checkbox.addEventListener('change', function() {
+                if (checkbox.checked) {
+                    selectedTags.add(tag);
+                } else {
+                    selectedTags.delete(tag);
                 }
-        tagFilter.appendChild(option);
+                updateSelectedTagsDisplay();
+                filterAndSort();
+                updateURL();
             });
             
-    function updateTagFilter() {
-        // Store currently selected value
-        const currentSelection = tagFilter.value;
-        
-        // Clear existing options except "All tags"
-        tagFilter.innerHTML = '<option value="">All tags</option>';
-        
-        // Collect tags from currently visible cards
-        const visibleTags = new Set();
-        cards.forEach(card => {
-            if (!card.classList.contains('hidden')) {
-                const tags = card.dataset.tags;
-                if (tags) {
-                    tags.split(',').forEach(tag => visibleTags.add(tag.trim()));
+            tagOptions.appendChild(option);
+        });
     }
+    
+    // Update selected tags display
+    function updateSelectedTagsDisplay() {
+        selectedTagsContainer.innerHTML = '';
+        
+        if (selectedTags.size > 0) {
+            tagDropdown.classList.add('has-selection');
+            
+            selectedTags.forEach(tag => {
+                const tagElement = document.createElement('div');
+                tagElement.className = 'selected-tag';
+                tagElement.innerHTML = `
+                    <span>${tag}</span>
+                    <span class="remove">×</span>
+                `;
+                
+                tagElement.querySelector('.remove').addEventListener('click', function(e) {
+                    e.stopPropagation();
+                    selectedTags.delete(tag);
+                    updateSelectedTagsDisplay();
+                    updateTagOptionStates();
+                    filterAndSort();
+                    updateURL();
+                });
+                
+                selectedTagsContainer.appendChild(tagElement);
+            });
+        } else {
+            tagDropdown.classList.remove('has-selection');
+        }
+    }
+    
+    // Update checkbox states in dropdown
+    function updateTagOptionStates() {
+        const checkboxes = tagOptions.querySelectorAll('input[type="checkbox"]');
+        checkboxes.forEach((checkbox, index) => {
+            const tag = Array.from(allTags).sort()[index];
+            checkbox.checked = selectedTags.has(tag);
+            checkbox.parentElement.classList.toggle('selected', selectedTags.has(tag));
+        });
+    }
+    
+    // Toggle dropdown
+    tagDropdownTrigger.addEventListener('click', function(e) {
+        e.stopPropagation();
+        tagDropdown.classList.toggle('open');
+    });
+    
+    // Close dropdown when clicking outside
+    document.addEventListener('click', function(e) {
+        if (!tagDropdown.contains(e.target)) {
+            tagDropdown.classList.remove('open');
+        }
+        if (!sortDropdown.contains(e.target)) {
+            sortDropdown.classList.remove('open');
         }
     });
     
-        // Populate tag filter dropdown with current tags
-        Array.from(visibleTags).sort().forEach(tag => {
-            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);
+    // Sort dropdown functionality
+    sortDropdownTrigger.addEventListener('click', function(e) {
+        e.stopPropagation();
+        sortDropdown.classList.toggle('open');
+        tagDropdown.classList.remove('open'); // Close other dropdown
     });
+    
+    // Sort option selection
+    sortDropdownMenu.addEventListener('click', function(e) {
+        if (e.target.classList.contains('sort-option')) {
+            const value = e.target.dataset.value;
+            const text = e.target.textContent;
+            
+            // Update current sort
+            currentSort = value;
+            sortLabel.textContent = text;
+            
+            // Update selected state
+            sortDropdownMenu.querySelectorAll('.sort-option').forEach(option => {
+                option.classList.remove('selected');
+            });
+            e.target.classList.add('selected');
+            
+            // Close dropdown and filter
+            sortDropdown.classList.remove('open');
+            filterAndSort();
+        }
+    });
+    
+    // Update URL with selected tags
+    function updateURL() {
+        const url = new URL(window.location);
+        if (selectedTags.size > 0) {
+            url.searchParams.set('tag', Array.from(selectedTags)[0]); // For simplicity, just use first tag in URL
+        } else {
+            url.searchParams.delete('tag');
+        }
+        window.history.replaceState({}, '', url);
     }
     
     function filterAndSort() {
         const searchTerm = searchInput.value.toLowerCase();
-        const selectedTag = tagFilter.value;
-        const sortCriteria = sortBy.value;
+        const sortCriteria = currentSort;
         
         // Filter cards
         const filteredCards = cards.filter(card => {
             const title = card.dataset.title.toLowerCase();
             const description = card.dataset.description.toLowerCase();
+            const content = card.dataset.content.toLowerCase();
             const tags = card.dataset.tags;
             
-            // Text search
+            // Full text search - search in title, description, and content
             const matchesSearch = !searchTerm || 
                 title.includes(searchTerm) || 
-                description.includes(searchTerm);
+                description.includes(searchTerm) ||
+                content.includes(searchTerm);
             
-            // Tag filter
-            const matchesTag = !selectedTag || 
-                (tags && tags.split(',').map(t => t.trim()).includes(selectedTag));
+            // Tag filter - must match ALL selected tags
+            const matchesTags = selectedTags.size === 0 || 
+                (tags && Array.from(selectedTags).every(selectedTag => 
+                    tags.split(',').map(t => t.trim()).includes(selectedTag)
+                ));
             
-            return matchesSearch && matchesTag;
+            return matchesSearch && matchesTags;
         });
         
         // Sort filtered cards
@@ -331,28 +691,19 @@ document.addEventListener('DOMContentLoaded', function() {
             card.classList.remove('hidden');
             card.style.order = index;
         });
-        
-        // Update tag filter to show only current tags
-        updateTagFilter();
     }
     
     // Event listeners
     searchInput.addEventListener('input', 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
+    // Initialize
+    populateTagOptions();
+    updateSelectedTagsDisplay();
+    updateTagOptionStates();
+    
+    // Initialize sort dropdown
+    sortDropdownMenu.querySelector('[data-value="title"]').classList.add('selected');
+    
     filterAndSort();
 });
 </script>

static/css/main.css

@@ -363,16 +363,15 @@ a:hover {
 }
 
 .hero-section {
-    background: var(--e2c-yellow);
     padding: 4rem 2rem;
-    margin: 0 0 3rem 0;
-    border-radius: 24px;
+    margin: 0 auto 3rem auto;
+    max-width: 1200px;
 }
 
 .hero-content {
     display: flex;
     align-items: center;
-    gap: 3rem;
+    gap: 4rem;
     max-width: 1200px;
     margin: 0 auto;
 }
@@ -381,6 +380,12 @@ a:hover {
     width: 300px;
     height: auto;
     border-radius: 16px;
+    flex-shrink: 0;
+}
+
+.hero-text {
+    flex: 1;
+    max-width: 700px;
 }
 
 .hero-text h1 {
@@ -425,14 +430,16 @@ a:hover {
 }
 
 .intro-section ul li {
-    background: var(--text-primary);
-    color: white;
+    background: var(--card-background);
+    border: 2px solid var(--e2c-yellow);
+    color: var(--text-primary);
     padding: 24px 28px;
-    border-radius: 4px;
-    font-weight: 600;
+    border-radius: 16px;
+    font-weight: 500;
     text-align: center;
     line-height: 1.4;
     font-size: 1.1rem;
+    box-shadow: 0 4px 12px var(--shadow);
 }
 
 .cards-grid {