improved responsive layout & other styling

assets/css/_bs-load.scss

@@ -19,12 +19,12 @@
 @import "../../node_modules/bootstrap/scss/images";
 @import "../../node_modules/bootstrap/scss/containers";
 @import "../../node_modules/bootstrap/scss/grid";
-// @import "../../node_modules/bootstrap/scss/tables";
+@import "../../node_modules/bootstrap/scss/tables";
 @import "../../node_modules/bootstrap/scss/forms";
 @import "../../node_modules/bootstrap/scss/buttons";
 @import "../../node_modules/bootstrap/scss/transitions";
 @import "../../node_modules/bootstrap/scss/dropdown";
-// @import "../../node_modules/bootstrap/scss/button-group";
+@import "../../node_modules/bootstrap/scss/button-group";
 // @import "../../node_modules/bootstrap/scss/nav";
 // @import "../../node_modules/bootstrap/scss/navbar";
 @import "../../node_modules/bootstrap/scss/card";

assets/css/_layout-top-navbar-main.scss

@@ -1,14 +1,71 @@
+/* continaer-fluid modifications */
+.container-fluid {
+  padding-right: var(--bs-gutter-x, 1rem);
+  padding-left: var(--bs-gutter-x, 1rem);
+  @include media-breakpoint-up(md) {
+    padding-right: var(--bs-gutter-x, 2.75rem);
+    padding-left: var(--bs-gutter-x, 2.75rem);
+  }
+  &:not(.container-lg) {
+    @include media-breakpoint-up(xl) {
+      padding-right: var(--bs-gutter-x, 4rem);
+      padding-left: var(--bs-gutter-x, 4rem);
+    }
+    @include media-breakpoint-up(xxl) {
+      max-width: 1400px;
+    }
+  }
+}
+.container-lg {
+  @include media-breakpoint-up(xl) {
+    max-width: 960px;
+  }
+}
+
+/*
+ * main section layout
+ */
+main.rdnyc-single-outer {
+  @extend .container-lg;
+  @extend .mt-4;
+  @extend .mb-3;
+  @extend .mt-md-4;
+  @extend .d-flex;
+  @extend .justify-content-center;
+}
+
 /*
  * top navbar css grid layout
  */
 nav#top-navbar-grid-outer {
   @extend .container-fluid;
-  @extend .mt-4;
+  @include media-breakpoint-down(md) {
+    margin-top: 1.25rem !important;
+  }
   @extend .mt-md-5;
   @extend .mb-4;
-  @extend .px-3;
+  @include media-breakpoint-up(sm) {
-  @extend .px-sm-4;
+    margin-bottom: 2rem !important;
-  @extend .px-md-5;
+  }
+  @include media-breakpoint-up(lg) {
+    margin-bottom: 2.5rem !important;
+  }
+  @include media-breakpoint-up(xl) {
+    margin-bottom: 3rem !important;
+  }
+  @include media-breakpoint-up(xxl) {
+    margin-bottom: 4rem !important;
+  }
+  // @include media-breakpoint-up(xxl) {
+  //   margin-bottom: 5rem !important;
+  // }
+  // @include media-breakpoint-up(md) {
+  //   padding-right: var(--bs-gutter-x, 1.25rem);
+  //   padding-left: var(--bs-gutter-x, 1.25rem);
+  // }
+  // @extend .px-3;
+  // @extend .px-sm-4;
+  // @extend .px-md-5;
   @extend .d-grid;
   grid-template-columns: auto minmax(0, 1fr);
   grid-template-rows: calc(4.3rem / 2) calc(4.3rem / 2) auto;

assets/css/_nav-burger.scss

@@ -17,6 +17,17 @@ $hamburger-layer-color: $primary !default;
 /* import hamburgers sass */
 @import "../../node_modules/hamburgers/_sass/hamburgers/hamburgers.scss";
 
+/* fix button styling from bootstrap */
+button#top-navbar-grid-toggle-button {
+  -webkit-appearance: inherit;
+  &:hover, &:active, &:focus {
+    color: inherit;
+    background-color: inherit;
+    border-color: inherit;
+    box-shadow: inherit;
+  }
+}
+
 // /* correct colors to match bootstrap defaults */
 // .navbar-light {
 //   .hamburger {

assets/css/app.scss

@@ -8,10 +8,10 @@
 @import "svg-icons";
 
 /* Navbar toggler icon override */
-@import "top-nav-burger";
+@import "nav-burger";
 
-/* Top Navbar styling */
+/* Navbar & Main layout styling */
-@import "top-navbar";
+@import "layout-top-navbar-main";
 
 /* main */
 html,
@@ -20,6 +20,8 @@ body {
   background-color: $spaceblue-800;
   height: 100%;
 }
+
+/* links */
 a {
   @extend .text-decoration-none;
   &:hover {
@@ -28,6 +30,7 @@ a {
   }
 }
 
+
 /* general additional text style */
 .font-family-handbrush {
   font-family: $font-family-handbrush;
@@ -62,7 +65,7 @@ a {
 
 /* general additional spacing style */
 .mb-two-rem {
-  margin-bottom: 2rem;
+  margin-bottom: 2rem !important;
 }
 
 /* general additional border style */
@@ -100,6 +103,9 @@ article.post.sticky {
   border-bottom: inherit !important;
   margin-bottom: inherit !important;
   padding-bottom: inherit !important;
+  &.mb-two-rem {
+    margin-bottom: 2rem !important;
+  }
   header.post-header {
     @extend .card-header;
     @extend .pb-0;
@@ -174,6 +180,7 @@ article.post.sticky {
 
 
 /* blockquote handling */
+blockquote,
 blockquote.wp-block-quote {
   background-color: tint-color($spaceblue-800, 5%) !important;
   @extend .border-start;
@@ -210,6 +217,10 @@ blockquote.wp-block-quote {
   }
 }
 figure.wp-block-pullquote {
+  // @extend .my-3;
+  // @extend .py-3;
+  margin: 2em !important;
+  @extend .p-5;
   &:not(.is-style-solid-color) {
     background-color: tint-color($spaceblue-800, 5%) !important;
     @extend .border-top;
@@ -217,10 +228,23 @@ figure.wp-block-pullquote {
     @extend .border-5;
     border-top-color: tint-color($spaceblue-800, 15%) !important;
     border-bottom-color: tint-color($spaceblue-800, 15%) !important;
+    & blockquote {
+      background-color: none !important;
+      border: none !important;
+    }
+  }
+  & blockquote {
+    @extend .m-0;
+    @extend .p-0;
+    background-color: inherit !important;
+    border: inherit !important;
   }
 }
 
 /* other wp styling */
+.wp-block-image.alignfull img, .wp-block-image.alignwide img, .wp-block-image img {
+  height: auto;
+}
 .btn-primary {
   color: $spaceblue-800;
 }
@@ -250,7 +274,21 @@ figure.wp-block-pullquote {
     @extend .text-end;
   }
 }
-
+table {
+  @extend .table;
+  @extend .table-dark;
+}
+.wp-block-table {
+  table {
+    @extend .table;
+    @extend .table-dark;
+  }
+  &.is-style-stripes {
+    table {
+      @extend .table-striped;
+    }
+  }
+}
 
 // &:not(.is-style-outline) {
     //   @extend .btn-primary;
@@ -387,3 +425,6 @@ form button {
 select {
   @extend .form-select;
 }
+.btn-primary, button, .wp-block-search .wp-block-search__button, form button, .wp-block-button:not(.is-style-outline) .wp-block-button__link {
+  box-shadow: inherit;
+}

content-templates/content-article.php

@@ -9,7 +9,10 @@
 namespace WP_RDNYC;
 
 ?>
-<article <?php echo post_class( 'post border-bottom border-gray-750 pb-4 mb-two-rem' ); ?> itemscope itemtype="https://schema.org/CreativeWork">
+<article <?php $extra_post_class = is_singular() ? '' : ' mb-two-rem';
+    echo post_class( 'post border-bottom border-gray-750 pb-4' . $extra_post_class ); ?>
+  itemscope itemtype="https://schema.org/CreativeWork">
+
   <header class="post-header">
     <h2 class="post-title fs-2 fw-600 mb-2">
     <?php
@@ -28,25 +31,12 @@ namespace WP_RDNYC;
       <?php echo get_the_date('F j, Y'); ?>
     </div>
 
-    <!-- < ?php
-      if (has_tag()) {
-        echo '<div class="post-tags fs-smaller mb-4">';
-        // echo inline_svg( 'bsi-tags', array( 'div_class' => 'icon baseline text-gray-300 me-1' ) );
-
-        $tag_strings = array_map(function ($tag) {
-          return '<span class="text-gray-300">#</span><a href="' . get_tag_link($tag) . '">' . $tag->name . '</a>';
-        }, get_the_tags());
-
-        echo implode(", ", $tag_strings) . '</div>';
-      }
-    ?> -->
-
   </header>
 
   <div class="article post-body">
     <?php
     if ( has_post_thumbnail() ) {
-      echo get_the_post_thumbnail( get_the_ID(), 'large', ['class' => 'rounded shadow-lg'] );
+      echo get_the_post_thumbnail( get_the_ID(), 'large', ['class' => 'rounded shadow mb-3 mw-100 h-auto'] );
     }
 
     the_content(); ?>

header.php

@@ -39,7 +39,7 @@ namespace WP_RDNYC;
 
 <body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage">
 
-  <nav id="top-navbar-grid-outer">
+  <nav id="top-navbar-grid-outer" class="container-fluid">
 
     <div id="top-navbar-grid-brand-outer">
       <h1>

index.php

@@ -9,34 +9,36 @@
 namespace WP_RDNYC;
 
 get_header(); ?>
-<main class="container d-flex justify-content-center mt-3">
+<main class="rdnyc-single-outer">
-  <div class="col-12 col-md-10 col-lg-9 col-xl-8 col-xxl-7 pb-2 mb-4 mt-3">
 
+  <?php if (!is_singular()) : ?>
     <h1 class="fw-light text-gray-300 mb-4 border-bottom border-dashed border-gray-600">
     <?php if (is_archive()) : get_the_archive_title();
         else : single_post_title();
         endif;
       ?>
     </h1>
+  <?php endif; ?>
 
-    <?php
+  <?php
-      if ( have_posts() ) :
+    if ( have_posts() ) :
-        while ( have_posts() ) :
+      while ( have_posts() ) :
-          the_post();
+        the_post();
-          echo get_template_part( 'content-templates/content', 'article' );
+        echo get_template_part( 'content-templates/content', 'article' );
-        endwhile;
+      endwhile;
-    ?>
+  ?>
 
+    <?php if (!is_singular()) : ?>
       <nav class="d-flex justify-content-between" aria-label="Page navigation">
         <div class="nav-previous alignleft"><?php next_posts_link( '&larr; Older' ); ?></div>
         <div class="nav-next alignright"><?php previous_posts_link( 'Newer &rarr;' ); ?></div>
       </nav>
+    <?php endif; ?>
 
-    <?php
+  <?php
-      endif;
+    endif;
-    ?>
+  ?>
 
-  </div>
 </main>
 <?php
 get_footer('', array('frontpage'=>false));

page.php

@@ -1,54 +0,0 @@
-<?php
-/**
- * The default single page template.
- *
- * @author Recovery Dharma NYC
- * @since 1.0.0
- */
-
-namespace WP_RDNYC;
-
-get_header(); ?>
-<main class="container-fluid d-flex">
-  <div class="col-12 col-md-10 col-lg-9 col-xl-8 col-xxl-7 border-bottom border-gray pb-4 mb-3">
-
-  <?php
-    if ( have_posts() ) {
-      while ( have_posts() ) {
-        the_post(); ?>
-
-    <article itemscope itemtype="https://schema.org/CreativeWork">
-
-      <header>
-        <h2 class="fs-2 fw-600 mb-0">
-        <?php
-          if ( is_archive() || is_home() ) {
-            printf( '<a href="%s" rel="bookmark">%s</a>',
-              esc_url( get_the_permalink() ),
-              esc_html( get_the_title() )
-            );
-          } else {
-            echo get_the_title();
-          } ?>
-        </h2>
-      </header>
-
-      <div class="article">
-        <?php
-        if ( has_post_thumbnail() ) {
-          echo get_the_post_thumbnail( get_the_ID(), 'large', ['class' => 'rounded shadow-lg'] );
-        }
-
-        the_content(); ?>
-      </div>
-
-    </article>
-
-  <?php
-      }
-    } ?>
-
-  </div>
-</main>
-<?php
-get_footer();