General asset cleanup and nav style fixes

.gitignore

@@ -4,3 +4,5 @@ _site/
 .jekyll-cache
 Gemfile.lock
 .DS_Store
+deps/
+vendor/

.tool-versions

@@ -1 +1 @@
-ruby 2.6.9
+ruby 4.0.1

_config.yml

@@ -28,6 +28,17 @@ social:
 # Build settings
 markdown: kramdown
 permalink: pretty
+exclude:
+  - deps/
+  - node_modules/
+  - .git/
+  - .github/
+  - Gemfile
+  - Gemfile.lock
+  - README.md
+  - Makefile
+  - bin/
+  - vendor/
 
 collections:
   participants:

_includes/gallery-grid.html

@@ -3,11 +3,19 @@
   <h3 class="title">{{ site.data.settings.homepage_settings.gallery.title }}</h3>
   <hr />
   {% endif %}
-  <div class="gallery-grid my-3">
+  <div class="gallery-grid my-3" data-lightbox-gallery>
      {% for image in site.data.gallery_images %}
-    <a data-fslightbox="gallery" class="gallery-item" href="{{ image.src }}">
+    <a class="gallery-item" href="{{ image.src }}" data-lightbox>
       <img src="{{ image.src }}" alt="{{ image.alt }}">
     </a>
     {% endfor %}
   </div>
+</div>
+
+<!-- Lightbox overlay -->
+<div class="lightbox-overlay" id="lightbox">
+  <button class="lightbox-close" aria-label="Close">&times;</button>
+  <button class="lightbox-prev" aria-label="Previous">&lsaquo;</button>
+  <button class="lightbox-next" aria-label="Next">&rsaquo;</button>
+  <img class="lightbox-image" src="" alt="">
 </div>

_includes/imports/head.html

@@ -42,10 +42,6 @@
     })(window, document, "script", "dataLayer", "GTM-KRSPKJ3");
   </script>
   <!-- End Google Tag Manager -->
-{% if site.data.settings.homepage_settings.testimonials.show %}
-  <link rel="stylesheet" href="{{"/assets/css/owl.carousel.min.css" | prepend: site.baseurl }}">
-  <link rel="stylesheet" href="{{"/assets/css/owl.theme.default.min.css" | prepend: site.baseurl }}">
-{% endif %}
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.32/moment-timezone-with-data.min.js"></script>
 
@@ -63,33 +59,8 @@
         <link rel="stylesheet" href="{{
           "/assets/font-awesome/css/solid.min.css" | prepend: site.baseurl }}">
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700"
+      href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700&display=swap"
       rel="stylesheet"
-      type="text/css"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Kaushan+Script"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Karla:400,400i,700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400i,700i"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700"
-      rel="stylesheet"
-      type="text/css"
     />
 
     <!-- WEBSITE ICON IN BROWSER -->

_includes/imports/js.html

@@ -1,29 +1,3 @@
-<!-- jQuery Version 1.11.0 -->
-<script src="{{ "/assets/js/jquery-1.11.0.js" | prepend: site.baseurl }}"></script>
-
-<!-- Bootstrap Core JavaScript -->
-<script src="{{ "/assets/js/bootstrap.min.js" | prepend: site.baseurl }}"></script>
-
-<!-- Plugin JavaScript -->
-<script src="{{ "/assets/js/jquery.easing.min.js" | prepend: site.baseurl }}"></script>
-<script src="{{ "/assets/js/classie.js" | prepend: site.baseurl }}"></script>
-<script src="{{ "/assets/js/cbpAnimatedHeader.js" | prepend: site.baseurl }}"></script>
-
-<!-- Custom Theme JavaScript -->
-<script src="{{ "/assets/js/agency.js" | prepend: site.baseurl }}"></script>
-
-<!-- Owl Carousel -->
-<script src="{{ site.baseurl }}/assets/js/owl.carousel.min.js" charset="utf-8"></script>
-
-<!-- Parallaxing & SmoothScroll -->
-<script src="{{ site.baseurl }}/assets/js/scrollax.min.js" charset="utf-8"></script>
-
-{% if site.smooth-scroll %}
-    <script src="{{ site.baseurl }}/assets/js/smoothscroll.js" charset="utf-8"></script>
-{% endif %}
-{% if  site.data.settings.homepage_settings.gallery.show %}
-<script src="{{ site.baseurl }}/assets/js/fslightbox.js" charset="utf-8"></script>
-{% endif %}
 <!-- Main JS -->
 <script src="{{ site.baseurl }}/assets/js/main.js" charset="utf-8"></script>
 <script type="text/javascript">

_includes/navigation.html

@@ -9,7 +9,8 @@
   <ul class="nav navigation-bar">
     {% for item in site.data.navigation %}
     {% if item.children %}
-    <li>
+    <!-- Desktop: show as dropdown -->
+    <li class="desktop-only">
       <div class="dropdown">
         <a class="dropbtn">{{item.name}}
           <i class="fa fa-caret-down"></i>
@@ -21,13 +22,19 @@
         </div>
       </div>
     </li>
+    <!-- Mobile: show children as flat items -->
+    {% for child in item.children %}
+    <li class="mobile-only">
+      <a class="page-scroll" href="#{{ child.link }}">{{ child.name }}</a>
+    </li>
+    {% endfor %}
     {% else %}
     <li>
       <a class="page-scroll" href="#{{ item.link }}">{{ item.name }}</a>
     </li>
     {% endif %}
     {% endfor %}
-    <li>
+    <li class="desktop-only">
       <div class="dropdown">
         <a class="dropbtn">Archives
           <i class="fa fa-caret-down"></i>
@@ -36,7 +43,6 @@
           {% for conf in site.data.archive-links %}
           <a href="{{conf.link}}" target="_blank">{{conf.name}}</a>
           {% endfor %}
-
         </div>
       </div>
     </li>

_includes/testimonials.html

@@ -1,25 +1,26 @@
 {% assign testimonials = site.testimonials %}
-{{ testimonial | json }}
-{% if testimonials != null %}
-<!-- Slider main container -->
+{% if testimonials != null and testimonials.size > 0 %}
 <div class="section section--carousel" id="testimonials">
- <h3 class="title">{{ site.data.settings.homepage_settings.testimonials.title }}</h3>
-<hr/>
-  <div id="testimonials-carousel-quotes" class="owl-carousel owl-theme">
-    {% for testimonial in site.testimonials %}
-<figure class="testimonial-item item">
-  <blockquote>
-   {{ testimonial.content | markdownify }}
-    <div class="arrow"></div>
-  </blockquote>
-    <img src="{{ testimonial.profile_pic }}" alt="{{ testimonial.name }}">
-  <div class="author">
-    <h5>{{ testimonial.name }} <span> {{ testimonial.role }}</span></h5>
-  </div>
-</figure>
-
-    {% endfor %}
-
+  <h3 class="title">{{ site.data.settings.homepage_settings.testimonials.title }}</h3>
+  <hr/>
+  <div class="testimonials-carousel" data-carousel>
+    <div class="carousel-track">
+      {% for testimonial in site.testimonials %}
+      <figure class="testimonial-item">
+        <blockquote>
+          {{ testimonial.content | markdownify }}
+        </blockquote>
+        <div class="arrow"></div>
+        <div class="testimonial-footer">
+          <img src="{{ testimonial.profile_pic }}" alt="{{ testimonial.name }}">
+          <div class="author">
+            <h5>{{ testimonial.name }}<span>{{ testimonial.role }}</span></h5>
+          </div>
+        </div>
+      </figure>
+      {% endfor %}
+    </div>
+    <div class="carousel-dots"></div>
   </div>
 </div>
 {% endif %}

_sass/gallery-grid.scss

@@ -6,6 +6,7 @@
 .gallery-item {
   flex: 0 0 calc(50% - 10px);
   box-sizing: border-box;
+  cursor: pointer;
 
   @media screen and (min-width: 768px) {
     flex: 0 0 calc(25% - 10px);
@@ -14,5 +15,68 @@
     width: 100%;
     height: auto;
     display: block;
+    transition: opacity 0.2s ease;
   }
+  &:hover img {
+    opacity: 0.8;
+  }
+}
+
+// Lightbox
+.lightbox-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.9);
+  z-index: 10000;
+  align-items: center;
+  justify-content: center;
+
+  &.active {
+    display: flex;
+  }
+}
+
+.lightbox-image {
+  max-width: 90%;
+  max-height: 90%;
+  object-fit: contain;
+}
+
+.lightbox-close,
+.lightbox-prev,
+.lightbox-next {
+  position: absolute;
+  background: none;
+  border: none;
+  color: white;
+  font-size: 3rem;
+  cursor: pointer;
+  padding: 10px;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.lightbox-close {
+  top: 20px;
+  right: 20px;
+}
+
+.lightbox-prev {
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.lightbox-next {
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
 }