From 8ef34bd81dbca9e3d100cc01afcdbd5fa8ac4f57 Mon Sep 17 00:00:00 2001
From: Nasir Anthony Montalvo <nasiranthonymontalvo@gmail.com>
Date: Mon, 26 Jan 2026 00:36:55 -0600
Subject: [PATCH] final beta edits

---
 _data/theme.yml                      |   2 +-
 _includes/advanced-search-modal.html |   5 +-
 _includes/js/browse-js.html          |   9 +++
 _layouts/browse.html                 | 102 ++++++++++++++++-----------
 _sass/_custom.scss                   |  59 ++++++++++++++++
 pages/contact.md                     |   4 +-
 pages/donate.md                      |   8 ++-
 7 files changed, 140 insertions(+), 49 deletions(-)

diff --git a/_data/theme.yml b/_data/theme.yml
index 5babfa6..ff44797 100644
--- a/_data/theme.yml
+++ b/_data/theme.yml
@@ -20,7 +20,7 @@ home-banner-image-position: # Default is top
 # Browse PAGE
 #
 # see _data/browse-config.csv to define the metadata fields that will display.
-advanced-search: true # true / false, adds advanced search options to search, which are generated by clicking the advanced search button above the search box (this opens a modal in which the search can be constructed)
+advanced-search: false # true / false, adds advanced search options to search, which are generated by clicking the advanced search button above the search box (this opens a modal in which the search can be constructed)
 faceted-search: true # true / false, adds a field option to the left of the search results that allows users to filter results by metadata field
 default-sort-field: # if a value is entered here, it must match one of the field values (first column) in the browse-config.csv file. If left blank or the value doesn't match a value in config-browse.csv's first column, the default sort will be a random sort
 
diff --git a/_includes/advanced-search-modal.html b/_includes/advanced-search-modal.html
index 9485a12..7840d30 100644
--- a/_includes/advanced-search-modal.html
+++ b/_includes/advanced-search-modal.html
@@ -1,11 +1,12 @@
 <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#advancedSearchModal">
-  Advanced<span class="d-none d-md-inline"> Search</span>
+  Advanced<span class="d-none d-md-inline"> Filter</span>
 </button>
 <div class="modal fade" id="advancedSearchModal" tabindex="-1">
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
-        <h1 class="modal-title h4" id="advancedSearchModalLabel">Advanced Search</h1>
+        <h1 class="modal-title h4" id="advancedSearchModalLabel">Advanced Filter</h1>
+        <p class="small text-muted">Use these filters to refine your search results. You can combine multiple fields to get more specific results.</p>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
diff --git a/_includes/js/browse-js.html b/_includes/js/browse-js.html
index 30c327f..c408278 100644
--- a/_includes/js/browse-js.html
+++ b/_includes/js/browse-js.html
@@ -1044,5 +1044,14 @@ function setupEventHandlers() {
         });
     }
 }
+
+// Initialize tooltips for the "Content Type" dropdown
+document.addEventListener('DOMContentLoaded', function () {
+    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.forEach(function (tooltipTriggerEl) {
+        new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+});
+
 </script>
 {% endunless %}
\ No newline at end of file
diff --git a/_layouts/browse.html b/_layouts/browse.html
index e8e4cc3..5b1151b 100644
--- a/_layouts/browse.html
+++ b/_layouts/browse.html
@@ -1,68 +1,85 @@
 ---
-# collection "Browse" page
 layout: page
 custom-foot: js/browse-js.html
 ---
 {%- assign fields = site.data.config-browse -%}
 
+<!-- Welcome Header and Description -->
+{%- assign fields = site.data.config-browse -%}
+
+<!-- Show the Welcome Text only on the Browse page -->
+{% if page.url == '/browse/' %}
+<div class="row mb-4">
+    <div class="col-lg-12 text-center">
+        <h1>welcome_to_the_archive</h1>
+        <p class="lead">Browse through materials from the archive by scrolling freely, or using the search bar to filter items by keywords in our archival metadata. You can use keywords like "pageant" or "Gary" to find people, events, locations, content types, or whatever you're looking for.</p>
+        <p class="small text-muted"><a href="/read/soakies/">Learn more about the materials within this archive ></a></p>
+    </div>
+</div>
+{% endif %}
+
 <div class="row mb-2">
     <div class="col-7 col-lg-9">{{ content }}</div>
-    <div class="col-5 col-lg-3 text-end text-lg-start">{% if site.data.theme.advanced-search == true %}{% include advanced-search-modal.html %}{% endif %}</div>
+    <div class="col-5 col-lg-3 text-end text-lg-start">
+        {% if site.data.theme.advanced-search == true %}
+            {% include advanced-search-modal.html %}
+        {% endif %}
+    </div>
 </div>
+
+
 <div class="row mb-3 justify-content-center">
     <div class="col-lg-8 text-center">
         <form role="search" id="browseFilter" onsubmit="submitFilter(); return false;">
             <div class="input-group input-group-lg">
                 {% if site.data.theme.faceted-search == true %}
-                <select class="form-control form-select d-none d-lg-block" id="fieldSelect" style="max-width: 200px;" aria-label="select search field to filter">
-                    <option value="all">All Fields</option>
-                    <option value="title">Title</option>
-                    {% for f in fields %}
-                    {% assign cap-field = f.field | capitalize %}
-                    <option value="{{ f.field }}">{{ f.facet_name | default: f.display_name | default: cap-field }}</option>
-                    {% endfor %}
-                    <option value="display_template">Content Type</option>
-                    {% if site.data.theme.advanced-search == true %}
-                    <option value="" disabled>─────────────</option>
-                    <option value="advanced">Advanced Search...</option>{% endif %}
-                </select>
-                <!-- Mobile filter button - shows only on small screens -->
-                <div class="{% if site.data.theme.faceted-search == true %}dropdown d-lg-none{% else %}d-none{% endif %}">
-                    <button class="py-3 btn btn-outline-secondary" type="button" id="mobileFilterButton" data-bs-toggle="dropdown" aria-expanded="false" title="Filter options">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16">
-                            <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
-                        </svg>
-                        <span id="selectedField" class="d-none d-sm-inline ms-1">All Fields</span>
-                    </button>
-                    <div class="dropdown-menu">
-                        <button class="dropdown-item" type="button" data-field="all">All Fields</button>
-                        <button class="dropdown-item" type="button" data-field="title">Title</button>
+                    <select class="form-control form-select d-none d-lg-block" id="fieldSelect" style="max-width: 200px;" aria-label="select search field to filter">
+                        <option value="all">All Fields</option>
+                        <option value="title">Title</option>
                         {% for f in fields %}
-                        {% assign cap-field = f.field | capitalize %}
-                        <button class="dropdown-item" type="button" data-field="{{ f.field }}">{{ f.facet_name | default: f.display_name | default: cap-field }}</button>
+                            {% assign cap-field = f.field | capitalize %}
+                            <option value="{{ f.field }}">{{ f.facet_name | default: f.display_name | default: cap-field }}</option>
                         {% endfor %}
-                        <button class="dropdown-item" type="button" data-field="display_template">Content Type</button>
+                        <option value="display_template" data-bs-toggle="tooltip" title="The content type (e.g. image, video, document)">Content Type</option>
                         {% if site.data.theme.advanced-search == true %}
-                        <div class="dropdown-divider"></div>
-                        <button class="dropdown-item" type="button" data-field="advanced">Advanced Search...</button>
+                            <option value="" disabled>─────────────</option>
+                            <option value="advanced">Advanced Search...</option>
                         {% endif %}
+                    </select>
+
+                    <!-- Mobile filter button - shows only on small screens -->
+                    <div class="{% if site.data.theme.faceted-search == true %}dropdown d-lg-none{% else %}d-none{% endif %}">
+                        <button class="py-3 btn btn-outline-secondary" type="button" id="mobileFilterButton" data-bs-toggle="dropdown" aria-expanded="false" title="Filter options">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16">
+                                <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
+                            </svg>
+                            <span id="selectedField" class="d-none d-sm-inline ms-1">All Fields</span>
+                        </button>
+                        <div class="dropdown-menu">
+                            <button class="dropdown-item" type="button" data-field="all">All Fields</button>
+                            <button class="dropdown-item" type="button" data-field="title">Title</button>
+                            {% for f in fields %}
+                                {% assign cap-field = f.field | capitalize %}
+                                <button class="dropdown-item" type="button" data-field="{{ f.field }}">{{ f.facet_name | default: f.display_name | default: cap-field }}</button>
+                            {% endfor %}
+                            <button class="dropdown-item" type="button" data-field="display_template" data-bs-toggle="tooltip" title="The content type (e.g. image, video, document)">Content Type</button>
+                            {% if site.data.theme.advanced-search == true %}
+                                <div class="dropdown-divider"></div>
+                                <button class="dropdown-item" type="button" data-field="advanced">Advanced Search...</button>
+                            {% endif %}
+                        </div>
                     </div>
-                </div>{% endif %}
-                <input type="text" class="form-control" id="filterTextBox" placeholder="Filter ... " aria-label="Search"> 
-                <!-- Update the date range inputs section -->
+                {% endif %}
+                <input type="text" class="form-control" id="filterTextBox" placeholder="Filter ..." aria-label="Search"> 
                 <div id="dateRangeInputs" class="date-range-inputs">
                     <div class="date-input-group">
-                        <!-- Single text input for the date_created field -->
                         <input type="text" id="dateCreated" class="ms-2 form-control" placeholder="Enter Date (Text)">
                     </div>
                 </div>
-                <button class="btn btn-success" type="submit" title="Filter items" id="filterButton" >Search</button>
+                <button class="btn btn-success" type="submit" title="Filter items" id="filterButton">Search</button>
                 <button class="btn btn-outline-secondary filter d-none d-lg-flex" onclick="resetFilter(); return false;" data-filter="">Reset</button>
             </div>
         </form>
-        <!-- Active filter indicators -->
-        <div id="activeFilters" class="mt-2 text-start"></div>
-        <div class="h2" id="numberOf"></div>
     </div>
     <div class="col-lg-2">
         <div class="dropdown">
@@ -74,15 +91,16 @@ custom-foot: js/browse-js.html
                 <button class="dropdown-item browse-sort-item" data-filter="title">Title</button>
                 {% assign sort_options = site.data.config-browse | where_exp: 'i','i.sort_name != nil' %}
                 {% for o in sort_options %}
-                <button class="dropdown-item browse-sort-item" data-filter="{{ o.field | escape }}">{{ o.sort_name }}</button>
+                    <button class="dropdown-item browse-sort-item" data-filter="{{ o.field | escape }}">{{ o.sort_name }}</button>
                 {% endfor %}
             </div>
-            <button class="btn btn-outline-secondary filter p-1 d-lg-none float-end" onclick="resetFilter(); return false;" data-filter="">Reset</button>
         </div>
-       
     </div>
 </div>
-
+        <!-- Active filter indicators -->
+        <div id="activeFilters" class="mt-2 text-start"></div>
+        <div class="h2" id="numberOf"></div>
+       
 <div id="loadingIcon" class="text-center">
     <div class="spinner-border text-dark" role="status"><span class="visually-hidden">Loading...</span></div>
 </div>
diff --git a/_sass/_custom.scss b/_sass/_custom.scss
index c360a18..f44d9f0 100644
--- a/_sass/_custom.scss
+++ b/_sass/_custom.scss
@@ -497,6 +497,10 @@ main #title p {
   color: #000000 !important;       
 }
 
+.modal-header .small.text-muted {
+  color: #555555 !important;       
+}
+
 .modal-content .card.mb-4.text-center .btn-group .btn-outline-primary {
   background-color: transparent !important;
   color: #000000 !important;    
@@ -511,6 +515,41 @@ main #title p {
   color: #ffffff !important;       
 }
 
+.modal-body .btn.btn-outline-secondary.btn-sm {
+  background-color: transparent !important;
+  color: #000000 !important;    
+  border: 1px solid #000000 !important;
+  border-radius: 4px;
+  text-decoration: none;
+}
+
+.modal-body .btn.btn-outline-secondary.btn-sm:hover,
+.modal-body .btn.btn-outline-secondary.btn-sm:focus {
+  background-color: #000000 !important;
+  color: #ffffff !important;   
+}
+
+.modal-footer .btn.btn-secondary,
+.modal-footer .btn.btn-primary {
+  background-color: transparent !important;
+  color: #000000 !important;    
+  border: 1px solid #000000 !important;
+  border-radius: 4px;
+  text-decoration: none;
+}
+
+.modal-footer .btn.btn-secondary:hover,
+.modal-footer .btn.btn-secondary:focus {
+  background-color: #000000 !important;
+  color: #ffffff !important;       
+}
+
+.modal-footer .btn.btn-primary:hover,
+.modal-footer .btn.btn-primary:focus {
+  background-color: #000000 !important;
+  color: #ffffff !important;       
+}
+
 .modal,
 .modal * ,
 .modal-backdrop {
@@ -862,6 +901,26 @@ blockquote {
     margin-top: 0.5rem;  /* Space between the image and caption */
     text-align: center;
 }
+.suggestions-container {
+    position: absolute;
+    width: 100%;
+    max-height: 200px;
+    overflow-y: auto;
+    background-color: white;
+    border: 1px solid #ccc;
+    z-index: 100;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.suggestion-item {
+    padding: 8px;
+    cursor: pointer;
+}
+
+.suggestion-item:hover {
+    background-color: #f0f0f0;
+}
+
 
 
 
diff --git a/pages/contact.md b/pages/contact.md
index 58a89f7..b8d725f 100644
--- a/pages/contact.md
+++ b/pages/contact.md
@@ -20,14 +20,14 @@ padding: 6em
 
 # Have questions? Wanna drop a comment? Feedback? A loving note? Recognize someone?
 
-Send any and all inquiries to 1800nasi at tutamail dot com.
+Send any and all inquiries to **1800nasi at tutamail dot com**.
 
 Folks local to Kansas City, Missouri can schedule an in-person studio visit with Founder Nasir Anthony Montalvo <a href="mailto:1800nasi@tutamail.com?subject=Studio Visit, [INSERT NAME]&amp;body=Please include a selection of dates, times and your interest when reaching out for a visit. See you soon! &lt;3" target="_blank">by email appointment.</a>
 
 ---
 
 ## Subscribe to our newsletter!
-<iframe src="https://1800nasi.substack.com/embed" width="480" height="320" style="border:1px solid #EEE; background:white;" frameborder="0" scrolling="no"></iframe>
+<iframe src="https://1800nasi.substack.com/embed" width="400" height="240" style="border:1px solid #EEE; background:white;" frameborder="0" scrolling="no"></iframe>
 
 <br>
 ---
diff --git a/pages/donate.md b/pages/donate.md
index 825c5ff..4b5850a 100644
--- a/pages/donate.md
+++ b/pages/donate.md
@@ -29,8 +29,12 @@ The options below are through {B/qKC}'s fiscal sponsor, The Field. Your donation
 
 *Please contact us for more donation options.*
 
-<script src="https://app.thefield.org/home/donation/general/650187/0"></script>
-<iframe src="https://app.thefield.org/home/donation/general/650187/0" width="500" height="600"></iframe>
+<div style="text-align: center; margin: 2rem 0;">
+  {% include feature/button.html 
+     text="Donate to us" 
+     link="https://app.thefield.org/home/donation/general/650187/0"
+     color="success" %}
+</div>
 
 ---
 ## Our donors