final beta edits

_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
 

_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">

_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 %}

_layouts/browse.html

@@ -1,14 +1,33 @@
 ---
-# 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;">
@@ -21,11 +40,13 @@ custom-foot: js/browse-js.html
                             {% 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>
+                        <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 %}
                             <option value="" disabled>─────────────</option>
-                    <option value="advanced">Advanced Search...</option>{% endif %}
+                            <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">
@@ -41,18 +62,17 @@ custom-foot: js/browse-js.html
                                 {% 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">Content Type</button>
+                            <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>{% endif %}
+                    </div>
+                {% endif %}
                 <input type="text" class="form-control" id="filterTextBox" placeholder="Filter ..." aria-label="Search"> 
-                <!-- Update the date range inputs section -->
                 <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>
@@ -60,9 +80,6 @@ custom-foot: js/browse-js.html
                 <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">
@@ -77,11 +94,12 @@ custom-foot: js/browse-js.html
                     <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>
+</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>

_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;
+}
+
 
 
 

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>
 ---

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>
+<div style="text-align: center; margin: 2rem 0;">
-<iframe src="https://app.thefield.org/home/donation/general/650187/0" width="500" height="600"></iframe>
+  {% include feature/button.html 
+     text="Donate to us" 
+     link="https://app.thefield.org/home/donation/general/650187/0"
+     color="success" %}
+</div>
 
 ---
 ## Our donors