hamburger menu and mobile changes

.github/_includes/collection-banner.html

@@ -1,29 +1,219 @@
-{% if page.layout == "home-infographic" and site.data.theme.featured-image %}
+{% if page.layout == "home-infographic" %}
+
+{%- comment -%}
+Carousel Banner: rotates through random collection items
+Always shows starlacoll033 first, then shuffles other items
+{%- endcomment -%}
+
+{%- assign carousel_items = "" | split: "" -%}
+
+{%- comment -%} Get specific items in order {%- endcomment -%}
+{%- assign wanted_ids = "starlacoll033,garycoll009,garycoll005,starlacoll019,starlacoll008,tishacoll006" | split: "," -%}
+
+{%- for wanted_id in wanted_ids -%}
+  {%- for item in site.data[site.metadata] -%}
+    {%- if item.objectid == wanted_id -%}
+      {%- assign carousel_items = carousel_items | push: item -%}
+      {%- break -%}
+    {%- endif -%}
+  {%- endfor -%}
+{%- endfor -%}
+
 <style>
-#home-banner {
+#home-banner-carousel {
-    background-image: url('{{ site.data.featured_item.src | relative_url }}');
+  position: relative;
-    background-size: cover;
+  min-height: 380px;
-    background-repeat: no-repeat;
+  max-height: 580px;
-    background-position: {{ site.data.theme.home-banner-image-position | default: 'center' }};
+  background-color: #000;
+  overflow: hidden;
 }
+
+.carousel-slide {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 800ms ease-in-out;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.carousel-slide.active {
+  opacity: 1;
+  z-index: 1;
+}
+
 #home-title-box {
+  position: relative;
+  z-index: 2;
   padding-top: {{ site.data.theme.home-title-y-padding | default: '5em' }};
   padding-bottom: {{ site.data.theme.home-title-y-padding | default: '5em' }};
 }
+
 @media screen and (max-width: 576px) {
   #home-title-box {
     padding-top: min({{ site.data.theme.home-title-y-padding | default: '5em' }}, 32vh);
     padding-bottom: min({{ site.data.theme.home-title-y-padding | default: '5em' }}, 32vh);
   }
 }
+
+.carousel-controls {
+  position: absolute;
+  top: 1rem;
+  left: 1.25rem;
+  z-index: 10;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.carousel-btn {
+  background: rgba(0, 0, 0, 0.45);
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  color: rgba(255, 255, 255, 0.85);
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 200ms ease;
+  font-size: 0.7rem;
+  font-weight: 600;
+}
+
+.carousel-btn:hover {
+  color: #ffffff;
+  border-color: rgba(255, 255, 255, 0.75);
+}
+
+.carousel-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+.carousel-dots {
+  display: flex;
+  gap: 0.35rem;
+  padding: 0.35rem 0.6rem;
+  background: rgba(0, 0, 0, 0.45);
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  border-radius: 4px;
+}
+
+.carousel-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.4);
+  cursor: pointer;
+  transition: all 200ms ease;
+}
+
+.carousel-dot:hover {
+  background: rgba(255, 255, 255, 0.65);
+}
+
+.carousel-dot.active {
+  background: #ffffff;
+  width: 18px;
+  border-radius: 3px;
+}
+
+@media (max-width: 575px) {
+  .carousel-controls {
+    top: auto;
+    bottom: 0.75rem;
+    left: 0.75rem;
+    gap: 0.35rem;
+  }
+  
+  .carousel-btn {
+    width: 26px;
+    height: 26px;
+  }
+  
+  .carousel-btn svg {
+    width: 11px;
+    height: 11px;
+  }
+  
+  .carousel-dots {
+    padding: 0.25rem 0.45rem;
+  }
+  
+  .carousel-dot {
+    width: 5px;
+    height: 5px;
+  }
+  
+  .carousel-dot.active {
+    width: 15px;
+  }
+}
+
+.featured-image-label {
+  position: absolute;
+  bottom: 1rem;
+  right: 1.25rem;
+  z-index: 10;
+  padding: 0.35rem 0.6rem;
+  background: rgba(0, 0, 0, 0.45);
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  border-radius: 4px;
+  transition: all 200ms ease;
+}
+
+.featured-image-label:hover {
+  border-color: rgba(255, 255, 255, 0.75);
+}
+
+.featured-image-label a {
+  font-size: 0.7rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.85) !important;
+  text-decoration: none;
+  display: block;
+}
+
+.featured-image-label:hover a {
+  color: #ffffff !important;
+}
+
+@media (max-width: 575px) {
+  .featured-image-label {
+    bottom: 0.75rem;
+    right: 0.75rem;
+    padding: 0.3rem 0.5rem;
+  }
+  
+  .featured-image-label a {
+    font-size: 0.65rem;
+  }
+}
 </style>
 
-<div id="home-banner" class="container-fluid mb-0 p-0">
+<div id="home-banner-carousel" class="container-fluid mb-0 p-0">
   <a class="portfolio-site-link"
      href="https://1800nasi.net/category/bqkc/"
      title="Main domain to view exhibitions, programs and media features of {B/qKC}">
     VIEW THE ARCHIVE IN PRACTICE →
-</a>
+  </a>
+
+  {%- comment -%} Carousel slides {%- endcomment -%}
+  {%- for item in carousel_items -%}
+    <div class="carousel-slide{% if forloop.first %} active{% endif %}"
+         data-slide="{{ forloop.index0 }}"
+         style="background-image: url('{{ item.image_small | relative_url }}');">
+    </div>
+  {%- endfor -%}
+
   <div id="home-title-box" class="position-relative">
     <div class="p-2 text-white bg-dark bg-opacity-75 d-inline-block">
       {% if site.organization-logo-nav %}
@@ -36,17 +226,134 @@
     </div>
   </div>
 
-  {% unless site.data.theme.featured-image contains '/' %}
+  {%- comment -%} Carousel controls {%- endcomment -%}
-  <div class="featured-image-label">
+  <div class="carousel-controls">
-    <a href="{{ site.data.featured_item.link | relative_url }}"
+    <button class="carousel-btn" id="carousel-prev" aria-label="Previous slide">
-       title="{{ site.data.featured_item.alt | escape }}">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-       Featured Image
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-    </a>
+      </svg>
+    </button>
+    
+    <div class="carousel-dots">
+      {%- for item in carousel_items -%}
+        <div class="carousel-dot{% if forloop.first %} active{% endif %}" data-slide="{{ forloop.index0 }}"></div>
+      {%- endfor -%}
+    </div>
+
+    <button class="carousel-btn" id="carousel-next" aria-label="Next slide">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+      </svg>
+    </button>
+  </div>
+
+  {%- comment -%} Featured image label (for current slide) {%- endcomment -%}
+  <div class="featured-image-label">
+    <a href="#" id="carousel-item-link" title="">Featured Image</a>
   </div>
-  {% endunless %}
 </div>
+
+<script>
+(function() {
+  const slides = document.querySelectorAll('.carousel-slide');
+  const dots = document.querySelectorAll('.carousel-dot');
+  const prevBtn = document.getElementById('carousel-prev');
+  const nextBtn = document.getElementById('carousel-next');
+  const itemLink = document.getElementById('carousel-item-link');
+  
+  let currentSlide = 0;
+  let autoplayInterval;
+  
+  let itemData = [
+    {%- for item in carousel_items -%}
+    {
+      objectid: "{{ item.objectid }}",
+      title: "{{ item.title | escape }}",
+      image: "{{ item.image_small | relative_url }}"
+    }{% unless forloop.last %},{% endunless %}
+    {%- endfor -%}
+  ];
+  
+  // Shuffle function
+  function shuffle(array) {
+    for (let i = array.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [array[i], array[j]] = [array[j], array[i]];
+    }
+    return array;
+  }
+  
+  // Shuffle the data on load
+  itemData = shuffle(itemData);
+  
+  // Apply shuffled images to slides
+  slides.forEach((slide, index) => {
+    if (itemData[index]) {
+      slide.style.backgroundImage = `url('${itemData[index].image}')`;
+    }
+  });
+  
+  function showSlide(index) {
+    slides.forEach(s => s.classList.remove('active'));
+    dots.forEach(d => d.classList.remove('active'));
+    
+    currentSlide = (index + slides.length) % slides.length;
+    
+    slides[currentSlide].classList.add('active');
+    dots[currentSlide].classList.add('active');
+    
+    // Update featured image link
+    const baseUrl = '{{ "/" | relative_url }}';
+    itemLink.href = baseUrl + 'items/' + itemData[currentSlide].objectid + '.html';
+    itemLink.title = itemData[currentSlide].title;
+  }
+  
+  function nextSlide() {
+    showSlide(currentSlide + 1);
+  }
+  
+  function prevSlide() {
+    showSlide(currentSlide - 1);
+  }
+  
+  function startAutoplay() {
+    autoplayInterval = setInterval(nextSlide, 5000); // 5 seconds
+  }
+  
+  function stopAutoplay() {
+    clearInterval(autoplayInterval);
+  }
+  
+  // Event listeners
+  prevBtn.addEventListener('click', () => {
+    stopAutoplay();
+    prevSlide();
+    startAutoplay();
+  });
+  
+  nextBtn.addEventListener('click', () => {
+    stopAutoplay();
+    nextSlide();
+    startAutoplay();
+  });
+  
+  dots.forEach((dot, index) => {
+    dot.addEventListener('click', () => {
+      stopAutoplay();
+      showSlide(index);
+      startAutoplay();
+    });
+  });
+  
+  // Initialize
+  showSlide(0);
+  startAutoplay();
+})();
+</script>
+
 {%- else -%}
-  <div class="container">
+{%- comment -%} Non-carousel version for other pages {%- endcomment -%}
+<div class="container">
   <div class="container position-relative">
     <a class="portfolio-site-link"
        href="https://1800nasi.net/category/bqkc/"
@@ -67,4 +374,5 @@
       {% endif %}
     </div>
   </div>
+</div>
 {%- endif -%}

_data/config-nav.csv

@@ -1,6 +1,6 @@
 display_name,stub,dropdown_parent
 HOME,/,
-THE ARCHIVE,/browse/,
+ARCHIVE,/browse/,
 COLLECTIONS,,
 EXPLORE,,
 READ,,

_includes/collection-banner.html

@@ -2,6 +2,7 @@
 
 {%- comment -%}
 Carousel Banner: rotates through random collection items
+Always shows starlacoll033 first, then shuffles other items
 {%- endcomment -%}
 
 {%- assign carousel_items = "" | split: "" -%}
@@ -125,23 +126,33 @@ Carousel Banner: rotates through random collection items
 
 @media (max-width: 575px) {
   .carousel-controls {
-    top: 0.75rem;
+    top: auto;
+    bottom: 0.75rem;
     left: 0.75rem;
-    gap: 0.4rem;
+    gap: 0.35rem;
   }
   
   .carousel-btn {
-    width: 28px;
+    width: 26px;
-    height: 28px;
+    height: 26px;
   }
   
   .carousel-btn svg {
-    width: 12px;
+    width: 11px;
-    height: 12px;
+    height: 11px;
   }
   
   .carousel-dots {
-    padding: 0.3rem 0.5rem;
+    padding: 0.25rem 0.45rem;
+  }
+  
+  .carousel-dot {
+    width: 5px;
+    height: 5px;
+  }
+  
+  .carousel-dot.active {
+    width: 15px;
   }
 }
 
@@ -199,7 +210,7 @@ Carousel Banner: rotates through random collection items
   {%- for item in carousel_items -%}
     <div class="carousel-slide{% if forloop.first %} active{% endif %}"
          data-slide="{{ forloop.index0 }}"
-         style="background-image: url('{{ item.object_location | relative_url }}');">
+         style="background-image: url('{{ item.image_small | relative_url }}');">
     </div>
   {%- endfor -%}
 
@@ -258,7 +269,7 @@ Carousel Banner: rotates through random collection items
     {
       objectid: "{{ item.objectid }}",
       title: "{{ item.title | escape }}",
-      image: "{{ item.object_location | relative_url }}"
+      image: "{{ item.image_small | relative_url }}"
     }{% unless forloop.last %},{% endunless %}
     {%- endfor -%}
   ];

_sass/_custom.scss

@@ -1076,6 +1076,110 @@ blockquote {
    NAVIGATION
    ============================================================================ */
 
+/* Hamburger menu button */
+.navbar-toggler {
+  background-color: transparent !important;
+  border: var(--border-width) solid rgba(255, 255, 255, 0.35) !important;
+  border-radius: var(--border-radius);
+  padding: var(--space-sm) 0.65rem;
+  transition: all var(--transition-normal);
+}
+
+.navbar-toggler:hover,
+.navbar-toggler:focus {
+  border-color: rgba(255, 255, 255, 0.75) !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+.navbar-toggler:focus {
+  box-shadow: none;
+}
+
+/* Hamburger menu button */
+.navbar-toggler {
+  background-color: transparent !important;
+  border: var(--border-width) solid rgba(255, 255, 255, 0.35) !important;
+  border-radius: var(--border-radius);
+  padding: var(--space-sm) 0.65rem;
+  transition: all var(--transition-normal);
+}
+
+.navbar-toggler:hover,
+.navbar-toggler:focus {
+  border-color: rgba(255, 255, 255, 0.75) !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+.navbar-toggler:focus {
+  box-shadow: none;
+}
+
+/* Hamburger icon - custom 3 lines */
+.navbar-toggler-icon {
+  background-image: none !important;
+  width: 20px;
+  height: 14px;
+  position: relative;
+  display: inline-block;
+  background-color: transparent !important;
+}
+
+/* Top line */
+.navbar-toggler-icon::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  top: 0;
+  left: 0;
+  background-color: rgba(255, 255, 255, 0.85);
+  transition: background-color var(--transition-normal);
+}
+
+/* Bottom line */
+.navbar-toggler-icon::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(255, 255, 255, 0.85);
+  transition: background-color var(--transition-normal);
+}
+
+/* Middle line - using a span */
+.navbar-toggler-icon {
+  background: linear-gradient(
+    to bottom,
+    transparent 0%,
+    transparent 45%,
+    rgba(255, 255, 255, 0.85) 45%,
+    rgba(255, 255, 255, 0.85) 55%,
+    transparent 55%,
+    transparent 100%
+  ) !important;
+}
+
+.navbar-toggler:hover .navbar-toggler-icon::before,
+.navbar-toggler:hover .navbar-toggler-icon::after {
+  background-color: #ffffff;
+}
+
+.navbar-toggler:hover .navbar-toggler-icon {
+  background: linear-gradient(
+    to bottom,
+    transparent 0%,
+    transparent 45%,
+    #ffffff 45%,
+    #ffffff 55%,
+    transparent 55%,
+    transparent 100%
+  ) !important;
+}
+
 .dropdown-header.nav-section-label {
   font-size: var(--text-xs);
   text-transform: uppercase;