UX adjustments to the contact buttons on main page

Small UX tweaks
Added E2CC support link to footer
2025-08-03 23:12:35 -06:00 · 2025-07-31 16:35:53 -06:00 · 2025-07-28 20:37:55 +00:00 · 2025-07-21 21:25:24 -06:00 · 2025-07-21 00:05:06 +00:00 · 2025-07-20 23:43:46 +00:00
8 changed files with 543 additions and 143 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -8,7 +8,7 @@ variables:
  # Tells GitLab Runner to initialize and update submodules recursively
  GIT_SUBMODULE_STRATEGY: recursive
  # TODO: the Surfer server base url (ex: "https://www.example.com/")
-  SURFER_SERVER: "https://e2c.medlab.host/"
+  SURFER_SERVER: "https://e2c.how/"

 stages:
  - build # Added build stage
--- a/content/_index.md
+++ b/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>

@@ -40,26 +40,6 @@ Exit to Community is a search for another way—a path where organizations can m
  </div>
 </div>

-<div class="main-sections">
-  <h2>Explore E2C</h2>
-  <div class="primary-cards">
-    <div class="primary-card">
-      <h3>Case Studies</h3>
-      <p>Real examples of companies that have attempted or achieved community ownership transitions</p>
-      <a href="/case-studies/" class="btn">Explore Cases</a>
-    </div>
-    <div class="primary-card">
-      <h3>Legal Snippets</h3>
-      <p>Legal documents and frameworks for implementing community ownership structures</p>
-      <a href="/legal-snippets/" class="btn">View Legal Resources</a>
-    </div>
-    <div class="primary-card">
-      <h3>Resources</h3>
-      <p>Educational materials, primers, and guides for Exit to Community transitions</p>
-      <a href="/resources/" class="btn">Access Resources</a>
-    </div>
-  </div>
-</div>


 <div style="text-align: center; margin: 3rem 0;">
@@ -69,16 +49,16 @@ Exit to Community is a search for another way—a path where organizations can m
 <div class="secondary-actions">
  <h3>Get Involved</h3>
  <div class="secondary-cards">
+    <div class="secondary-card">
+      <h4>Plan Your E2C</h4>
+      <p>Connect with our team to discuss your organization's future</p>
+      <a href="/contact/" class="secondary-button">Get in Touch</a>
+    </div>
    <div class="secondary-card">
      <h4>Share Your Story</h4>
      <p>Help others learn by contributing your organization's E2C experience</p>
      <a href="/add-your-story/" class="secondary-button">Add Your Story</a>
    </div>
-    <div class="secondary-card">
-      <h4>Get in Touch</h4>
-      <p>Connect with the Exit to Community project team</p>
-      <a href="/contact/" class="secondary-button">Contact Us</a>
-    </div>
  </div>
 </div>

--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -8,7 +8,38 @@
    <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 -->
+    <script>
+    var _paq = window._paq = window._paq || [];
+    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+    _paq.push(['trackPageView']);
+    _paq.push(['enableLinkTracking']);
+    (function() {
+        var u="https://analytics.medlab.host/";
+        _paq.push(['setTrackerUrl', u+'matomo.php']);
+        _paq.push(['setSiteId', '6']);
+        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+    })();
+    </script>
+    <!-- End Matomo Code -->
+
 </head>
 <body>
    <header class="site-header">
@@ -66,9 +97,11 @@
                </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 />
+                        <a href="https://opencollective.com/e2c-c">Learn more and support us &#128151;</a><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>
--- a/layouts/_default/list.html
+++ b/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
-    Array.from(allTags).sort().forEach(tag => {
-        const option = document.createElement('option');
-        option.value = tag;
-        option.textContent = tag;
-        if (preSelectedTag && tag === preSelectedTag) {
-            option.selected = true;
+    // Populate tag dropdown
+    function populateTagOptions() {
+        tagOptions.innerHTML = '';
+        Array.from(allTags).sort().forEach(tag => {
+            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);
+                }
+                updateSelectedTagsDisplay();
+                filterAndSort();
+                updateURL();
+            });
+            
+            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');
        }
-        tagFilter.appendChild(option);
+    }
+    
+    // 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');
    });
    
-    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()));
-                }
-            }
-        });
-        
-        // 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);
-        });
+    // 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');
+        }
+    });
+    
+    // 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>
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -22,6 +22,11 @@
        <p><small>Last updated: {{ .Date.Format "January 2, 2006" }}</small></p>
        {{ end }}
        <div class="tags-and-button">
+            {{ if .Params.external_url }}
+            <div class="article-external-button"><a href="{{ .Params.external_url }}" target="_blank" class="btn">Website</a></div>
+            {{ else if .Params.url_external }}
+            <div class="article-external-button"><a href="{{ .Params.url_external }}" target="_blank" class="btn">Website</a></div>
+            {{ end }}
            {{ if .Params.tags }}
            <div class="tags">
                {{ range .Params.tags }}
@@ -29,11 +34,6 @@
                {{ end }}
            </div>
            {{ end }}
-            {{ if .Params.external_url }}
-            <div class="article-external-button"><a href="{{ .Params.external_url }}" target="_blank" class="btn">Project Website</a></div>
-            {{ else if .Params.url_external }}
-            <div class="article-external-button"><a href="{{ .Params.url_external }}" target="_blank" class="btn">Project Website</a></div>
-            {{ end }}
        </div>
    </header>
    
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,6 +1,8 @@
 {{ define "main" }}
 {{ .Content }}

+{{ partial "explore-e2c.html" . }}
+
 <style>
 .featured-cases-section {
    margin: 4rem 0;
--- a/layouts/partials/explore-e2c.html
+++ b/layouts/partials/explore-e2c.html
@@ -9,12 +9,12 @@
    <div class="primary-card">
      <h3>Legal Snippets</h3>
      <p>Legal documents and frameworks for implementing community ownership structures</p>
-      <a href="/legal-snippets/" class="btn">View Legal Resources</a>
+      <a href="/legal-snippets/" class="btn">Explore Legal Snippets</a>
    </div>
    <div class="primary-card">
      <h3>Resources</h3>
      <p>Educational materials, primers, and guides for Exit to Community transitions</p>
-      <a href="/resources/" class="btn">Access Resources</a>
+      <a href="/resources/" class="btn">Explore Resources</a>
    </div>
  </div>
-</div>
+</div>
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -299,14 +299,14 @@ a:hover {

 .btn {
    display: inline-block;
-    padding: 12px 24px;
+    padding: 4px 12px;
    background: var(--e2c-yellow);
    color: var(--text-primary);
    text-decoration: none;
-    border-radius: 24px;
-    margin: 8px 0;
+    border-radius: 12px;
+    margin: 4px 0;
    font-weight: 500;
-    font-size: 15px;
+    font-size: 14px;
    transition: all 0.2s ease;
    border: 2px solid var(--e2c-yellow);
 }
@@ -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 {
@@ -539,12 +546,12 @@ a:hover {
 .secondary-cards {
    display: grid;
    gap: 24px;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
 }

 .secondary-card {
    background: var(--card-background);
-    border: 1px solid var(--border);
+    border: 3px solid var(--text-primary);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
@@ -558,8 +565,12 @@ a:hover {

 .secondary-card h4 {
    font-size: 1.1rem;
-    color: var(--text-primary);
+    color: var(--text-primary) !important;
    margin-bottom: 0.5rem;
+    font-weight: 600;
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
 }

 .secondary-card p {
@@ -574,7 +585,7 @@ a:hover {
    background: transparent;
    color: var(--text-primary);
    text-decoration: none;
-    border: 1px solid var(--border);
+    border: 2px solid var(--text-primary);
    border-radius: 16px;
    font-weight: 500;
    font-size: 14px;
@@ -718,24 +729,26 @@ a:hover {
 /* Tags and button layout for content pages */
 .tags-and-button {
    display: flex;
-    justify-content: space-between;
    align-items: flex-start;
    margin: 0.5rem 0;
    gap: 1rem;
+    flex-wrap: wrap;
 }

 .tags {
-    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
 }

 .tag {
    display: inline-block;
    background: #e9ecef;
    color: #495057;
-    padding: 0.25rem 0.5rem;
+    padding: 6px 10px;
    margin: 0.25rem 0.25rem 0 0;
-    border-radius: 0.25rem;
-    font-size: 0.875rem;
+    border-radius: 8px;
+    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
 }
@@ -752,13 +765,8 @@ a:hover {

@media (max-width: 768px) {
    .tags-and-button {
-        flex-direction: column;
        gap: 0.5rem;
    }
-    
-    .article-external-button {
-        align-self: flex-start;
-    }
 }

@media (max-width: 768px) {
@@ -855,6 +863,32 @@ a:hover {
        grid-template-columns: 1fr;
    }
    
+    .secondary-cards {
+        grid-template-columns: 1fr;
+        gap: 24px;
+    }
+    
+    .secondary-actions {
+        margin: 3rem 0;
+        padding: 2rem;
+    }
+    
+    .secondary-actions h3 {
+        font-size: 2.5rem;
+    }
+    
+    .secondary-card {
+        padding: 24px;
+    }
+    
+    .secondary-card h4 {
+        font-size: 1.5rem;
+    }
+    
+    .secondary-card p {
+        font-size: 1.1rem;
+    }
+    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 32px;
Author	SHA1	Message	Date
Nathan Schneider	0bc9d26ad0	UX adjustments to the contact buttons on main page	2025-08-03 23:12:35 -06:00
Nathan Schneider	d7d68f874a	Small UX tweaks	2025-07-31 16:35:53 -06:00
Nathan Schneider	1d964277b2	Added E2CC support link to footer	2025-07-28 20:37:55 +00:00
Nathan Schneider	49e8196fe8	Various UX improvements to index and dropdowns	2025-07-21 21:25:24 -06:00
Nathan Schneider	afee96c7a2	Added Matomo tracking code	2025-07-21 00:05:06 +00:00
Nathan Schneider	4ce406d3de	Moved domain to e2c.how	2025-07-20 23:43:46 +00:00