mobile styling next iteration

assets/js/custom.js

@@ -2,37 +2,67 @@ jQuery(function ($) {
 
     // Getting links from a page and turning them into a scroll-spy bespoke menu
 
-    // FIXME when page loads with #... in url, the scroll spy gets messed up. 
 
-    let links;
-
-    links = document.querySelectorAll("#one, #two, #three")
+    let sections;
+    sections = document.querySelectorAll(".add-to-sidebar")
 
     let url = window.location.href;
 
+    // Create the correct menu
     let innerContent = "";
-
-    links.forEach(link => {
-        let fullUrl = url + "#" + link.id;
-        innerContent += "<li><a href=\"" + fullUrl + " \" class=''>" + link.attributes.name.value + "</a></li>"
+    sections.forEach(link => {
+        let itemTitle = link.querySelector("h2:first-of-type, h3:first-of-type, h4:first-of-type, h5:first-of-type, h6:first-of-type");
+        if (itemTitle) {
+          link.setAttribute("id", itemTitle.innerText.replace(/\W/g,'_'))
+          let fullUrl = url.split("#")[0] + "#" + itemTitle.innerText.replace(/\W/g,'_');
+          innerContent += "<li><a href=\"" + fullUrl + " \" class=''>" + itemTitle.innerText + "</a></li>"
+        }
     });
 
-    console.log(innerContent)
-
+    // Update existing menu with the created one 
     let menu;
-    menu = document.getElementById("menu-test-scroll-spy");
-
+    menu = document.getElementById("menu-scroll-spy");
     menu.innerHTML = innerContent
 
 
     // Activate Scrollspy
-    $('.entry-content').scrollspy({
+    $('body').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,16 +13,39 @@
         width: 1320px;
     }
     .nav-link {
-        text-transform: uppercase;
+        // text-transform: uppercase;
         font-size: 13px;
+        &.active {
+            font-weight: bold;
+        }
     }
 }
 
+
 /* Is required to show the svg logo */
 .navbar-brand {
     width: 150px;
 }
 
+.offcanvas-body #bootscore-navbar {
+    li {
+        border-top: 1px dotted #fff;
+        padding: 0.5rem 0;
+        &:last-of-type {
+            border-bottom: 1px dotted #fff;
+        }
+    }
+}
+
+
+@include media-breakpoint-up(lg) { 
+    .offcanvas-body #bootscore-navbar {
+        li, 
+        li:last-of-type {
+            border-color: transparent;
+        }
+    }
+}
 
 /* CUSTOM BLOCK MOBILE SUPPORT */
 @include media-breakpoint-up(md) {
@@ -88,6 +111,20 @@
     }
 }
 
+.is-home-featured-image {
+    height: 600px;
+}
+  
+.is-home-featured-image img {
+    background-repeat: no-repeat !important;
+    width: auto !important;
+    height: 600px !important;
+    display: flex !important;
+    justify-content: end !important;
+    align-items: center !important;
+}
+          
+
 /* Footer */
 
 #footer {
@@ -157,7 +194,7 @@
         font-weight: bold;
         content: counter(item);
         counter-increment: item;
-        color: red;
+        color: $primary;
     }
 }
 
@@ -174,24 +211,406 @@
 #secondary {
     display: none;
 }
+
 #sidebar {
-    padding-left: 8rem;
-    padding-right: 2rem;
+    // padding-left: 8rem;
+    // padding-right: 2rem;
+    top: 30px;
     font-size: 24px;
     position: sticky;
     a:not(.active) {
         color: black;
     }
     li {
+        border-top: 1px dotted #000;
         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;
+        position: relative;
+
+        // 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 {
+            cursor: pointer;
+            .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;
+            padding: 0;
+        }
+    
+    }
+
+    .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;
+            }
+        }
+    }
+}
+
+.add-to-sidebar {
+    position: relative;
+    height: 100%;
+}
+
+
+
+@include media-breakpoint-down(md) {
+
+    .row > * {
+        padding-left: var(--wp--preset--spacing--30);
+        padding-right: var(--wp--preset--spacing--30);
+    }
+    .home .container {
+        padding: 0;
+        .wp-block-columns {
+            padding: var(--wp--preset--spacing--60)  var(--wp--preset--spacing--30);
+        }
+    }
+    .wp-block-heading {
+        margin-bottom: 0 !important;
+    }
+    #nav-main {
+        padding-left:  var(--wp--preset--spacing--30);
+        padding-right:  var(--wp--preset--spacing--30);
+    }
+    .wp-block-columns, 
+    .wp-block-cover {
+        padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
+        gap: 10px;
+    }
+    .entry-content .wp-block-columns {
+        padding: 0;
+    }
+    .has-text-align-right {
+        // text-align: center;
+    }
+    .wp-block-columns > .wp-block-column {
+        padding-top: var(--wp--preset--spacing--30) !important;
+        padding-right: 0 !important;
+        padding-bottom: var(--wp--preset--spacing--30) !important;
+        padding-left: 0 !important;
+    }
+    
+    .is-style-fixed-height-272,
+    .is-style-fixed-height-400 {
+        height: auto;
+    }
+    .is-style-fixed-height-400 {
+        min-height: 400px;
+    }
+    /* Footer */
+    .bootscore-footer-columns,
+    .bootscore-footer-info {
+        padding: var(--wp--preset--spacing--30);
+    }
+    #footer .container {
+        padding: 0;
+    }
+    
+}
+
+
+@media only screen and (max-width: 768px) and (min-width: 388px) {
+    .is-home-featured-image {
+        .wp-block-cover__inner-container  {
+            width: 360px;
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            //padding-right: var(--wp--preset--spacing--40);
+            padding-bottom: var(--wp--preset--spacing--40);
+            span {
+                display: block;
+                font-size: 45px !important;
+            }
+        }
+    }
+}
+
+
+@media only screen and (max-width: 991px) and (min-width: 769px) {
+    .is-home-featured-image {
+        .wp-block-cover__inner-container  {
+            width: 360px;
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            //padding-right: var(--wp--preset--spacing--40);
+            padding-bottom: var(--wp--preset--spacing--40);
+            span {
+                display: block;
+                font-size: 45px !important;
+            }
+        }
+    }
+}
+
+
+@media only screen and (max-width: 1201px) and (min-width: 992px) {
+    .is-home-featured-image {
+        .wp-block-cover__inner-container  {
+            // width: 360px;
+            // position: absolute;
+            // left: 0;
+            // bottom: 0;
+            //padding-right: var(--wp--preset--spacing--40);
+            padding-bottom: var(--wp--preset--spacing--40);
+            span {
+                display: block;
+                font-size: 45px !important;
+            }
+        }
+    }
+}
+
+
+@media only screen and (max-width: 1400px) and (min-width: 1202px) {
+    .is-home-featured-image {
+        .wp-block-cover__inner-container  {
+        //     width: 360px;
+        //     position: absolute;
+        //     left: 0;
+        //     bottom: 0;
+            //padding-right: var(--wp--preset--spacing--40);
+            padding-bottom: var(--wp--preset--spacing--40);
+            span {
+                // display: block;
+                font-size: 50px !important;
+            }
+        }
+    }
+    .footer-crane .wp-block-cover__image-background {
+        background-position: 163% 14% !important;
+    }
+}
+
+
+/* Crane Image */
+@media only screen and (max-width: 387px) {
+    .is-home-featured-image {
+        .wp-block-cover__inner-container  {
+            position: absolute;
+            bottom: 0;
+            padding-right: var(--wp--preset--spacing--40);
+            padding-bottom: var(--wp--preset--spacing--40);
+            span {
+                display: block;
+                font-size: 45px !important;
+            }
+           
+        }
+    }
+  
+}
+
+@media only screen and (max-width: 452px) {
+    .footer-crane {
+        .wp-block-cover__image-background {
+            background-position: 50% 300px !important;
+            background-size: cover;
+        }
+        .wp-block-cover__inner-container {
+            padding-bottom: 200px;
+        }
+    }
+}
+
+@media only screen and (max-width: 768px) and (min-width: 453px) {
+    .footer-crane {
+        .wp-block-cover__image-background {
+            background-position: 50% 200px !important;
+            background-size: cover;
+        }
+        .wp-block-cover__inner-container {
+            padding-bottom: 200px;
+        }
+    }
+}
+
+@media only screen and (max-width: 1200px) and (min-width: 769px) {
+    .footer-crane {
+        .wp-block-cover__image-background {
+            background-position: -330px 10% !important;
+            background-size: inherit;
+        }
+    }
+}

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;
@@ -23,3 +66,8 @@ $container-max-widths: (
   xxl: 1400px
 );
 
+
+
+$offcanvas-bg-color: 				$primary;
+$offcanvas-color:                   #fff;
+

functions.php

@@ -48,6 +48,44 @@ function header_bg_class() {
 }
 add_filter('bootscore/class/header', 'header_bg_class', 10, 2);
 
+/**
+ * Change main content col
+ */
+function change_content_col_size($col_size) {
+  if (is_active_sidebar('sidebar-1')) {
+    return "col-xl-9 pe-xl-5";
+  }
+  return $col_size;
+}
+add_filter('bootscore/class/main/col', 'change_content_col_size', 11);
+
+
+/**
+ * Change sidebar col
+ */
+function change_sidebar_col_size($col_size) {
+  return "col-xl-3 ps-xl-5 order-first order-xl-2";
+}
+add_filter('bootscore/class/sidebar/col', 'change_sidebar_col_size');
+
+
+/**
+ * Change sidebar responsive offcanvas
+ */
+function change_sidebar_offcanvas($col_size) {
+  return "offcanvas-xl offcanvas-start";
+}
+add_filter('bootscore/class/sidebar/offcanvas', 'change_sidebar_offcanvas');
+
+
+/**
+ * Change sidebar toggler button breakpoint and class
+ */
+function change_sidebar_toggler($col_size) {
+  return "d-none";
+}
+add_filter('bootscore/class/sidebar/button', 'change_sidebar_toggler');
+
 
 /**
  * Footer top classes
@@ -67,6 +105,17 @@ function footer_class() {
 add_filter('bootscore/class/footer/columns', 'footer_class', 10, 2);
 
 
+
+/**
+ * Change footer column1 classes
+ */
+function footer_col__class() {
+  return "col-sm-6 col-lg-3";
+} 
+add_filter('bootscore/class/footer/col', 'footer_col__class', 10, 2);
+
+
+
 /**
  * Change footer info classes
  */
@@ -188,7 +237,19 @@ add_action( 'init', 'register_list_block_popout' );
 /**
  * Change one or more classes into my-custom-class
  */
-function my_fancy_filter_function() {
+function featured_full_width_img_classes() {
   return "featured-full-width-img bg-dark text-light mb-5";
 }
-add_filter('bootscore/class/featured-full-width-img', 'my_fancy_filter_function', 10, 2);
+add_filter('bootscore/class/featured-full-width-img', 'featured_full_width_img_classes', 10, 2);
+
+
+// /**
+//  * Change container class in a single file
+//  */
+// function change_container_in_single_file($string, $location) {
+//   if ($location == 'page-sidebar-none') {
+//     return "container-fluid";
+//   }
+//   return $string;
+// }
+// add_filter('bootscore/class/container', 'change_container_in_single_file', 10, 2);

index.php

@@ -0,0 +1,147 @@
+<?php
+
+/**
+ * The main template file
+ *
+ * This is the most generic template file in a WordPress theme
+ * and one of the two required files for a theme (the other being style.css).
+ * It is used to display a page when nothing more specific matches a query.
+ * E.g., it puts together the home page when no home.php file exists.
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
+ *
+ * @package Bootscore
+ * @version 6.1.1
+ */
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+get_header();
+?>
+  <div id="content" class="site-content">
+      <div id="primary" class="content-area">
+
+        <?php do_action('bootscore_after_primary_open', 'index'); ?>
+
+        <main id="main" class="site-main">
+
+            <!-- Header -->
+            <?php 
+            $page_for_posts = get_option( 'page_for_posts' ); 
+            $thumb = wp_get_attachment_image_src(get_post_thumbnail_id($page_for_posts), 'full'); 
+            ?>
+
+            <div class="entry-header <?= apply_filters('bootscore/class/featured-full-width-img', 'featured-full-width-img bg-dark text-light mb-5', 'page-full-width-image'); ?>" style="background-image: url('<?= $thumb['0']; ?>')">
+                <div class="<?= apply_filters('bootscore/class/container', 'container', 'page-full-width-image'); ?> <?= apply_filters('bootscore/class/featured-full-width-img/container', 'h-100 d-flex align-items-end pb-3', 'page-full-width-image'); ?>">
+                    <div class="<?= apply_filters('bootscore/class/full-width-img-title-wrapper', 'full-width-img-title-wrapper', 'page-full-width-image'); ?>">
+                    <?php do_action( 'bootscore_before_title', 'page-full-width-image' ); ?>
+                    <h1 class="entry-title"><?php echo get_the_title($page_for_posts)?></h1>
+                    <?php do_action( 'bootscore_after_title', 'page-full-width-image' ); ?>
+                    </div>
+                </div>
+            </div>
+
+          <div class="container">
+            <!-- Post List -->
+            <div class="row">
+                <div class="col">
+
+                    <?php do_action( 'bootscore_before_loop', 'index' ); ?>
+
+                    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
+
+                    <?php do_action( 'bootscore_before_loop_item', 'index' ); ?>
+
+                    <article id="post-<?php the_ID(); ?>" <?php post_class( apply_filters('bootscore/class/loop/card', 'card horizontal mb-4', 'index') ); ?>>
+
+                        <div class="<?= apply_filters('bootscore/class/loop/card/row', 'row g-0', 'index'); ?>">
+
+                        <?php if (has_post_thumbnail()) : ?>
+                            <div class="<?= apply_filters('bootscore/class/loop/card/image/col', 'col-lg-6 col-xl-5 col-xxl-4', 'index'); ?>">
+                            <a href="<?php the_permalink(); ?>">
+                                <?php the_post_thumbnail('medium', array('class' => apply_filters('bootscore/class/loop/card/image', 'card-img-lg-start', 'index'))); ?>
+                            </a>
+                            </div>
+                        <?php endif; ?>
+
+                        <div class="<?= apply_filters('bootscore/class/loop/card/content/col', 'col', 'index'); ?>">
+                            <div class="<?= apply_filters('bootscore/class/loop/card/body', 'card-body', 'index'); ?>">
+                            
+                            <div class="d-flex justify-content-between gap-3">
+
+                                <?php if (apply_filters('bootscore/loop/category', true, 'index')) : ?>
+                                <?php bootscore_category_badge(); ?>
+                                <?php endif; ?>
+
+                                <?php if (is_sticky() ) { ?>
+                                <p class="sticky-badge"><span class="badge text-bg-danger"><?= apply_filters('bootscore/icon/star', '<i class="fa-solid fa-star"></i>'); ?></span></p>
+                                <?php } ?>
+                                
+                            </div>
+                            
+                            <?php do_action('bootscore_before_loop_title', 'index'); ?>
+
+                            <a class="text-body text-decoration-none" href="<?php the_permalink(); ?>">
+                                <?php the_title('<h2 class="' . apply_filters('bootscore/class/loop/card/title', 'blog-post-title h5', 'index') . '">', '</h2>'); ?>
+                            </a>
+
+                            <?php if (apply_filters('bootscore/loop/meta', true, 'index')) : ?>
+                                <?php if ('post' === get_post_type()) : ?>
+                                <p class="meta small mb-2 text-body-secondary">
+                                    <?php
+                                    bootscore_date();
+                                    bootscore_author();
+                                    bootscore_comments();
+                                    bootscore_edit();
+                                    ?>
+                                </p>
+                                <?php endif; ?>
+                            <?php endif; ?>
+
+                            <?php if (apply_filters('bootscore/loop/excerpt', true, 'index')) : ?>
+                                <p class="<?= apply_filters('bootscore/class/loop/card-text/excerpt', 'card-text', 'index'); ?>">
+                                <a class="text-body text-decoration-none" href="<?php the_permalink(); ?>">
+                                    <?= strip_tags(get_the_excerpt()); ?>
+                                </a>
+                                </p>
+                            <?php endif; ?>
+
+                            <?php if (apply_filters('bootscore/loop/read-more', true, 'index')) : ?>
+                                <p class="<?= apply_filters('bootscore/class/loop/card-text/read-more', 'card-text', 'index'); ?>">
+                                <a class="<?= apply_filters('bootscore/class/loop/read-more', 'read-more', 'index'); ?>" href="<?php the_permalink(); ?>">
+                                    <?= apply_filters('bootscore/loop/read-more/text', __('Read more »', 'bootscore', 'index')); ?>
+                                </a>
+                                </p>
+                            <?php endif; ?>
+
+                            <?php if (apply_filters('bootscore/loop/tags', true, 'index')) : ?>
+                                <?php bootscore_tags(); ?>
+                            <?php endif; ?>
+
+                            </div>
+
+                            <?php do_action('bootscore_loop_item_after_card_body', 'index'); ?>
+
+                        </div><!-- col -->
+                        </div><!-- row -->
+                  </article><!-- article -->
+
+                  <?php do_action('bootscore_after_loop_item', 'index'); ?>
+
+                <?php endwhile; ?>
+                <?php endif; ?>
+
+                <?php do_action('bootscore_after_loop', 'index'); ?>
+
+              <div class="entry-footer">
+                <?php bootscore_pagination(); ?>
+              </div>
+            </div><!-- col -->
+          </div><!-- row -->
+          </div><!-- container -->
+      </main><!-- #main -->
+    </div><!-- #primary -->
+  </div><!-- #content -->
+<?php
+get_footer();

page-templates/page-sidebar-none.php

@@ -0,0 +1,56 @@
+<?php
+
+/**
+ * Template Name: No Sidebar
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
+ *
+ * @package Bootscore
+ * @version 6.1.0
+ */
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+get_header();
+?>
+
+  <div id="content" class="site-content">
+    <div id="primary" class="content-area">
+      
+      <?php do_action( 'bootscore_after_primary_open', 'page-full-width-image' ); ?>
+
+      <main id="main" class="site-main">
+
+        <?php $thumb = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full'); ?>
+        <div class="entry-header <?= apply_filters('bootscore/class/featured-full-width-img', 'featured-full-width-img height-75 bg-dark text-light mb-4', 'page-full-width-image'); ?>" style="background-image: url('<?= $thumb['0']; ?>')">
+          <div class="<?= apply_filters('bootscore/class/container', 'container', 'page-full-width-image'); ?> <?= apply_filters('bootscore/class/featured-full-width-img/container', 'h-100 d-flex align-items-end pb-3', 'page-full-width-image'); ?>">
+            <div class="<?= apply_filters('bootscore/class/full-width-img-title-wrapper', 'full-width-img-title-wrapper', 'page-full-width-image'); ?>">
+              <?php do_action( 'bootscore_before_title', 'page-full-width-image' ); ?>
+              <h1 class="entry-title"><?php get_the_title(get_option('page_for_posts'))?></h1>
+              <?php do_action( 'bootscore_after_title', 'page-full-width-image' ); ?>
+            </div>
+          </div>
+        </div>
+
+        <div class="<?= apply_filters('bootscore/class/container', 'container', 'page-full-width-image'); ?> <?= apply_filters('bootscore/class/content/spacer', 'pb-5', 'page-full-width-image'); ?>">
+          
+        <?php do_action( 'bootscore_after_featured_image', 'page-sidebar-none' ); ?>
+
+        <div class="entry-content">
+          <?php the_content(); ?>
+        </div>
+        
+        <?php do_action( 'bootscore_before_entry_footer', 'page-sidebar-none' ); ?>
+
+        <div class="entry-footer">
+          <?php comments_template(); ?>
+        </div>
+
+      </main>
+
+    </div>
+  </div>
+
+<?php
+get_footer();

src/blocks/featured-image-block/build/featured-image-block/block.json

@@ -6,7 +6,7 @@
   "title": "Featured Image Block",
   "category": "widgets",
   "icon": "format-image",
-  "description": "Example block scaffolded with Create Block tool.",
+  "description": "Block displaying featured image, heading and button.",
   "supports": {
     "html": false
   },

src/blocks/featured-image-block/build/featured-image-block/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-date', 'wp-deprecated', 'wp-dom-ready', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-primitives', 'wp-rich-text', 'wp-url'), 'version' => '239178da82c0d8063b17');
+<?php return array('dependencies' => array('react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-date', 'wp-deprecated', 'wp-dom-ready', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-primitives', 'wp-rich-text', 'wp-url'), 'version' => '1883412fb901aaa84d07');

src/blocks/featured-image-block/build/featured-image-block/index.js

@@ -42057,7 +42057,7 @@ function combine (array, callback) {
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"create-block/featured-image-block","version":"0.1.0","title":"Featured Image Block","category":"widgets","icon":"format-image","description":"Example block scaffolded with Create Block tool.","supports":{"html":false},"attributes":{"heading":{"type":"string"},"buttonText":{"type":"string","default":"Learn More"},"buttonLink":{"type":"string"},"backgroundImage":{"type":"integer"}},"textdomain":"double-image","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php"}');
+module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"create-block/featured-image-block","version":"0.1.0","title":"Featured Image Block","category":"widgets","icon":"format-image","description":"Block displaying featured image, heading and button.","supports":{"html":false},"attributes":{"heading":{"type":"string"},"buttonText":{"type":"string","default":"Learn More"},"buttonLink":{"type":"string"},"backgroundImage":{"type":"integer"}},"textdomain":"double-image","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php"}');
 
 /***/ }),
 
@@ -42107,7 +42107,6 @@ __webpack_require__.r(__webpack_exports__);
  * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
  */
 
-// import AttachmentImage from './AttachmentImage';
 
 /**
  * The edit function describes the structure of your block in the context of the

src/blocks/featured-image-block/build/featured-image-block/render.php

@@ -11,7 +11,7 @@
 ?>
 
 <div <?php echo get_block_wrapper_attributes(); ?> 
-	style="background-image: url(<?php echo wp_get_attachment_image_url($attributes['backgroundImage']); ?>" 
+	style="background-image: url(<?php echo wp_get_attachment_image_url($attributes['backgroundImage'], $size = "large"); ?>"
 	tabindex="0">
 	
 	<div class="call-to-action">

src/blocks/featured-image-block/src/featured-image-block/render.php

@@ -11,7 +11,7 @@
 ?>
 
 <div <?php echo get_block_wrapper_attributes(); ?> 
-	style="background-image: url(<?php echo wp_get_attachment_image_url($attributes['backgroundImage']); ?>" 
+	style="background-image: url(<?php echo wp_get_attachment_image_url($attributes['backgroundImage'], $size = "large"); ?>"
 	tabindex="0">
 	
 	<div class="call-to-action">