add team styling, updates to custom block, general css polishing, updates to navigation

assets/js/custom.js

@@ -6,7 +6,7 @@ jQuery(function ($) {
 
     let links;
 
-    links = document.querySelectorAll("#one, #two, #three")
+    links = document.querySelectorAll("#one, #two, #three, #four, #fivenav_menu-7")
 
     let url = window.location.href;
 
@@ -20,7 +20,7 @@ jQuery(function ($) {
     console.log(innerContent)
 
     let menu;
-    menu = document.getElementById("menu-test-scroll-spy");
+    menu = document.getElementById("menu-scroll-spy");
 
     menu.innerHTML = innerContent
 
@@ -29,10 +29,43 @@ jQuery(function ($) {
     $('.entry-content').scrollspy({
       target: '#nav_menu-4'
     });
+
+    $('.entry-content').scrollspy({
+      target: '#nav_menu-7'
+    });
   
     // Refresh Scrollspy
     $('[data-spy="scroll"]').each(function () {
       $(this).scrollspy("refresh");
     });
   
+
+  });
+
+
+
+  document.addEventListener("DOMContentLoaded", function(event) {
+    var elements = document.querySelectorAll('.view-team-member-button');
+  
+  
+    elements.forEach(function(element) {
+      element.addEventListener('click', function() {
+  
+        for (elem of document.getElementsByClassName("view-team-member-bio")) {
+            elem.classList.remove("view-team-member-bio");
+        }
+        
+        this.closest(".team-member-wrapper").classList.add('view-team-member-bio');
+        this.parentNode.classList.remove('visible');
+      })
+    });
+  });
+  
+  document.addEventListener("DOMContentLoaded", function(event) {
+    var elements = document.querySelectorAll('.hide-team-member-button');
+    elements.forEach(function(element) {
+      element.addEventListener('click', function() {
+        this.parentNode.parentNode.classList.remove('view-team-member-bio');
+      })
+    });
   });

assets/scss/_bootscore-custom.scss

@@ -13,8 +13,11 @@
         width: 1320px;
     }
     .nav-link {
-        text-transform: uppercase;
+        // text-transform: uppercase;
         font-size: 13px;
+        &.active {
+            font-weight: bold;
+        }
     }
 }
 
@@ -157,7 +160,7 @@
         font-weight: bold;
         content: counter(item);
         counter-increment: item;
-        color: red;
+        color: $primary;
     }
 }
 
@@ -174,24 +177,218 @@
 #secondary {
     display: none;
 }
+
 #sidebar {
-    padding-left: 8rem;
-    padding-right: 2rem;
+    // padding-left: 8rem;
+    // padding-right: 2rem;
     font-size: 24px;
     position: sticky;
     a:not(.active) {
         color: black;
     }
     li {
+        border-top: 1px dotted #000;
+        // border-bottom:
         padding: 0.5rem 0;
+        &:last-of-type {
+            border-bottom: 1px dotted #000;
+        }
+        a {
+            text-decoration: none;
+        }
     }
 }
 
 
 /* CUSTOM BLOCK MOBILE SUPPORT */
-@include media-breakpoint-up(lg) {
+@include media-breakpoint-up(xl) {
     #secondary {
         display: block;
 	}
 
 }
+
+
+body:not(.wp-admin) .wp-block-group.team {
+    position: relative;
+
+    // turn into 1 column on mobile
+    display: grid;
+    grid-template-columns: 1fr;
+
+    div.team-member-wrapper {
+        // Ensure each item is a square
+        aspect-ratio: 1/1;
+
+        // Resetting height/width to ensure that team member's name covers entire square  
+        .wp-block-cover, 
+        .wp-block-cover__inner-container {
+            height: 100%;
+            width: 100%;
+            padding: 0;
+        }
+        &:hover {
+            .team-member-name {
+                visibility: visible;
+                opacity: 1;
+            }
+        }
+    }
+    
+    
+    // Team member's name and bio styling
+    .team-member-name, .team-member-bio {
+        color: #fff;
+        display: none;
+        background-color: $primary;
+
+        button {
+            margin-top: 5px;
+            background: none;
+            fill: white;
+            border: 2px solid #fff;
+            border-radius: 50%;
+            width: 36px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    
+    }
+
+    .team-member-name {
+        background-color: rgba($primary, 0.5);
+        display: flex;
+        height: 100%;
+        width: 100%;
+        transition:  all .25s ease-in-out;
+        flex-direction: column;
+        align-content: center;
+        justify-content: center;
+        padding: 5px 10px;
+    }
+
+
+     // Styling for overlay block
+     .view-team-member-bio .team-member-bio {
+        display: block;
+        position: absolute;
+        z-index: 10;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: 0;
+        padding: 20px;
+        overflow: scroll;
+    }
+
+    .team-member-bio {
+        display: none;
+    }
+
+}
+
+
+
+@include media-breakpoint-up(sm) { 
+    body:not(.wp-admin) .wp-block-group.team {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+            // Handing animation 
+             // Start by hiding, then display by :hover and JS in custom.js
+            .team-member-name {
+                visibility: hidden;
+                opacity: 0;
+            }
+            .team-member-name, .team-member-bio {
+                background-color: $primary;
+        }
+        .view-team-member-bio .team-member-bio {
+            width: calc(200% + 24px);
+            height: calc(200% + 24px);
+        }
+        .view-team-member-bio:nth-of-type(odd) .team-member-bio {
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+        }
+        .view-team-member-bio:nth-of-type(even) .team-member-bio {
+            top: 0;
+            bottom: 0;
+            left: auto;
+            right: 0;
+        }
+        // Targetting 7th item
+        .team-member-wrapper:nth-of-type(7) .team-member-bio {
+            top: auto;
+            bottom: 0;
+            left: 0;
+            right: 0;
+        }
+        // Targetting 8th item
+        .team-member-wrapper:nth-of-type(8) .team-member-bio {
+            top: auto;
+            bottom: 0;
+            left: auto;
+            right: 0;
+        }
+    }
+ }
+
+ @include media-breakpoint-up(md) { 
+    body:not(.wp-admin) .wp-block-group.team {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+
+        .view-team-member-bio .team-member-bio {
+            width: calc(200% + 24px);
+            height: calc(200% + 24px);
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            margin: 0;
+            padding: 20px;
+            overflow: scroll;
+        }
+    
+        .view-team-member-bio .team-member-bio {
+            padding: 40px;
+        }
+
+        .team-member-wrapper:nth-of-type(4) {
+            .team-member-bio {
+                left: auto;
+            }
+        }
+        // Targetting first 3 items in the bottom row
+        .team-member-wrapper:nth-of-type(n+5):nth-child(-n+7) {
+            .team-member-bio {
+                top: auto;
+            }
+        }
+        // Targetting last item in the bottom row
+        .team-member-wrapper:nth-of-type(8) {
+            .team-member-bio {
+                left: auto;
+                top: auto;
+            }
+        }
+    
+    }
+ }
+
+ @include media-breakpoint-up(lg) { 
+    body:not(.wp-admin) .wp-block-group.team {
+        .team-member-name {
+            padding: 20px;
+            button {
+                margin-top: 20px;
+            }
+        }
+    }
+}
+

assets/scss/_bootscore-variables.scss

@@ -4,9 +4,52 @@ $primary: #e30613;
 $secondary: #cccccc;
 $tertiary: #f5f5f5;
 
-$font-size-base: 1.3rem;
+/* Generated by ParaType (http://www.paratype.com)*/
+/* Font DIN 2014: Copyright (c) ParaType, 2025. All rights reserved.*/
+            
+@font-face {
+	font-family: 'DIN2014WebRegular';
+	src: 
+		url('../fonts/din-2014_regular.woff2') format('woff2'),
+		url('../fonts/din-2014_regular.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+}
 
 
+/* Generated by ParaType (http://www.paratype.com)*/
+/* Font DIN 2014: Copyright (c) ParaType, 2025. All rights reserved.*/
+            
+@font-face {
+	font-family: 'DIN2014WebBold';
+	src: 
+		url('../fonts/din-2014_bold.woff2') format('woff2'),
+		url('../fonts/din-2014_bold.woff') format('woff');
+	font-weight: bold;
+}
+
+
+/* Generated by ParaType (http://www.paratype.com)*/
+/* Font DIN 2014: Copyright (c) ParaType, 2025. All rights reserved.*/
+            
+@font-face {
+	font-family: 'DIN2014WebExtraBold';
+	src: 
+		url('../fonts/din-2014_extra-bold.woff2') format('woff2'),
+		url('../fonts/din-2014_extra-bold.woff') format('woff');
+	font-weight: bolder;
+}
+
+
+$font-family-sans-serif: "DIN2014WebRegular", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
+$headings-font-family: "DIN2014WebRegular";
+
+b, strong {
+  font-family: "DIN2014WebBold";
+}
+
+$font-size-base: 1.3rem;
+
 $navbar-light-color: white;
 $navbar-light-hover-color: darken(white, 10%);
 $navbar-light-active-color: white;
@@ -22,4 +65,3 @@ $container-max-widths: (
   xl: 1140px,
   xxl: 1400px
 );
-