Update site data and add photos lightbox

assets/css/style.css

@@ -679,7 +679,7 @@ main {
   pointer-events: all;
 }
 
-.testimonials-modal {
+.modal {
   background: var(--eerie-black-2);
   position: relative;
   padding: 15px;
@@ -693,11 +693,31 @@ main {
   z-index: 2;
 }
 
-.modal-container.active .testimonials-modal {
+.modal-container.active .modal {
   transform: scale(1);
   opacity: 1;
 }
 
+.photos-modal {
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+  flex-direction: column;
+  gap: 25px;
+  padding: 30px;
+  border-radius: 20px;
+  height: 100%;
+  width: 100%;
+}
+
+.photos-modal .modal-img {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 100%;
+  width: 100%;
+}
+
 .modal-close-btn {
   position: absolute;
   top: 15px;
@@ -975,7 +995,10 @@ main {
   100% { transform: scale(1); }
 }
 
-.select-grid-item > a { width: 100%; }
+.select-grid-item > a, .select-grid-item > div {
+  width: 100%;
+  cursor: pointer;
+}
 
 .select-grid-item-img {
   position: relative;
@@ -998,7 +1021,7 @@ main {
   transition: var(--transition-1);
 }
 
-.select-grid-item > a:hover .select-grid-item-img::before { background: hsla(0, 0%, 0%, 0.5); }
+.select-grid-item > a:hover .select-grid-item-img::before, .select-grid-item > div:hover .select-grid-item-img::before { background: hsla(0, 0%, 0%, 0.5); }
 
 .select-grid-item-icon-box {
   --scale: 0.8;
@@ -1017,7 +1040,7 @@ main {
   transition: var(--transition-1);
 }
 
-.select-grid-item > a:hover .select-grid-item-icon-box {
+.select-grid-item > a:hover .select-grid-item-icon-box, .select-grid-item > div:hover .select-grid-item-icon-box {
   --scale: 1;
   opacity: 1;
 }
@@ -1031,7 +1054,7 @@ main {
   transition: var(--transition-1);
 }
 
-.select-grid-item > a:hover img { transform: scale(1.1); }
+.select-grid-item > a:hover img, .select-grid-item > div:hover img { transform: scale(1.1); }
 
 .select-grid-item-title,
 .select-grid-item-description { margin-left: 10px; }
@@ -1066,93 +1089,6 @@ main {
 }
 
 
-/*-----------------------------------*\
-  #BLOG
-\*-----------------------------------*/
-
-.blog-posts { margin-bottom: 10px; }
-
-.blog-posts-list {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 20px;
-}
-
-.blog-post-item > a {
-  position: relative;
-  background: var(--border-gradient-onyx);
-  height: 100%;
-  box-shadow: var(--shadow-4);
-  border-radius: 16px;
-  z-index: 1;
-}
-
-.blog-post-item > a::before {
-  content: "";
-  position: absolute;
-  inset: 1px;
-  border-radius: inherit;
-  background: var(--eerie-black-1);
-  z-index: -1;
-}
-
-.blog-banner-box {
-  width: 100%;
-  height: 200px;
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.blog-banner-box img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: var(--transition-1);
-}
-
-.blog-post-item > a:hover .blog-banner-box img { transform: scale(1.1); }
-
-.blog-content { padding: 15px; }
-
-.blog-meta {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 7px;
-  margin-bottom: 10px;
-}
-
-.blog-meta :is(.blog-category, time) {
-  color: var(--light-gray-70);
-  font-size: var(--fs-6);
-  font-weight: var(--fw-300);
-}
-
-.blog-meta .dot {
-  background: var(--light-gray-70);
-  width: 4px;
-  height: 4px;
-  border-radius: 4px;
-}
-
-.blog-item-title {
-  margin-bottom: 10px;
-  line-height: 1.3;
-  transition: var(--transition-1);
-}
-
-.blog-post-item > a:hover .blog-item-title { color: var(--secondary-color); }
-
-.blog-text {
-  color: var(--light-gray);
-  font-size: var(--fs-6);
-  font-weight: var(--fw-300);
-  line-height: 1.6;
-}
-
-
-
-
 
 /*-----------------------------------*\
   #CONTACT
@@ -1784,14 +1720,6 @@ textarea.form-input::-webkit-resizer { display: none; }
 
   .select-grid-list { grid-template-columns: repeat(3, 1fr); }
 
-
-
-  /**
-   * BLOG
-   */
-
-  .blog-banner-box { height: 230px; }
-
 }
 
 

assets/js/photos.js

@@ -23,7 +23,7 @@ function resizeMasonryItem(item){
    * Net height of the implicit row-track = T = G + R
    * S = H1 / T
    */
-  var rowSpan = Math.ceil((item.querySelector('a').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
+  var rowSpan = Math.ceil((item.querySelector('div').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
 
   /* Set the spanning as calculated above (S) */
   item.style.gridRowEnd = 'span '+rowSpan;
@@ -76,4 +76,4 @@ masonryEvents.forEach( function(event) {
 } );
 
 /* Do a resize once more when all the images finish loading */
-waitForImages();
+waitForImages();

assets/js/script.js

@@ -22,13 +22,17 @@ const modalContainer = document.querySelector("[data-modal-container]");
 const modalCloseBtn = document.querySelector("[data-modal-close-btn]");
 const overlay = document.querySelector("[data-overlay]");
 
+// lightbox variables
+const lightboxItem = document.querySelectorAll("[data-lightbox-item]");
+
 // modal variable
 const modalImg = document.querySelector("[data-modal-img]");
 const modalTitle = document.querySelector("[data-modal-title]");
 const modalText = document.querySelector("[data-modal-text]");
+const modalTag = document.querySelector("[data-modal-tag]");
 
 // modal toggle function
-const testimonialsModalFunc = function () {
+const modalFunc = function () {
   modalContainer.classList.toggle("active");
   overlay.classList.toggle("active");
 }
@@ -43,15 +47,31 @@ for (let i = 0; i < testimonialsItem.length; i++) {
     modalTitle.innerHTML = this.querySelector("[data-testimonials-title]").innerHTML;
     modalText.innerHTML = this.querySelector("[data-testimonials-text]").innerHTML;
 
-    testimonialsModalFunc();
+    modalFunc();
+
+  });
+
+}
+
+// add click event to all lightbox items
+for (let i = 0; i < lightboxItem.length; i++) {
+
+  lightboxItem[i].addEventListener("click", function () {
+    console.log("Clicked");
+
+    modalImg.style.backgroundImage = "url('" + this.querySelector("[data-lightbox-image]").src + "')";
+    modalTitle.innerHTML = this.querySelector("[data-lightbox-title]").innerHTML;
+    modalText.innerHTML = this.querySelector("[data-lightbox-tag]").innerHTML;
+
+    modalFunc();
 
   });
 
 }
 
 // add click event to modal close button
-if (modalCloseBtn) modalCloseBtn.addEventListener("click", testimonialsModalFunc);
-if (overlay) overlay.addEventListener("click", testimonialsModalFunc);
+if (modalCloseBtn) modalCloseBtn.addEventListener("click", modalFunc);
+if (overlay) overlay.addEventListener("click", modalFunc);
 
 
 
@@ -109,6 +129,10 @@ for (let i = 0; i < filterBtn.length; i++) {
     this.classList.add("active");
     lastClickedBtn = this;
 
+    if (resizeAllMasonryItems) {
+      resizeAllMasonryItems();
+      setTimeout(resizeAllMasonryItems, 250);
+    }
   });
 
 }