many styling & layout improvements

assets/css/_bs-load.scss

@@ -30,7 +30,7 @@
 @import "../../node_modules/bootstrap/scss/card";
 // @import "../../node_modules/bootstrap/scss/accordion";
 // @import "../../node_modules/bootstrap/scss/breadcrumb";
-// @import "../../node_modules/bootstrap/scss/pagination";
+@import "../../node_modules/bootstrap/scss/pagination";
 // @import "../../node_modules/bootstrap/scss/badge";
 // @import "../../node_modules/bootstrap/scss/alert";
 // @import "../../node_modules/bootstrap/scss/progress";

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

@@ -12,11 +12,15 @@
       padding-left: var(--bs-gutter-x, 4rem);
     }
     @include media-breakpoint-up(xxl) {
+      // min-width: 1400px;
       max-width: 1400px;
     }
   }
 }
 .container-lg {
+  // @include media-breakpoint-up(lg) {
+  //   min-width: 960px;
+  // }
   @include media-breakpoint-up(xl) {
     max-width: 960px;
   }
@@ -32,6 +36,9 @@ main.rdnyc-single-outer {
   @extend .mt-md-4;
   @extend .d-flex;
   @extend .justify-content-center;
+  & > div.content {
+    @extend .w-100;
+  }
 }
 
 /*

assets/css/app.scss

@@ -107,7 +107,7 @@ article.post.sticky {
     margin-bottom: 2rem !important;
   }
   header.post-header {
-    @extend .card-header;
+    @extend .card-body;
     @extend .pb-0;
   }
   div.post-body {
@@ -119,6 +119,13 @@ article.post.sticky {
     }
   }
 }
+.post-header {
+  .post-title, .post-title a {
+    -ms-word-wrap: break-word;
+    word-wrap: break-word;
+  }
+}
+
 .more-link-outer {
   @extend .text-end;
   @extend .mb-0;
@@ -289,6 +296,34 @@ table {
     }
   }
 }
+.post-page-numbers {
+  @extend .page-item;
+  &.current {
+    @extend .active;
+    & .page-link {
+      background-color: shade-color($primary, 25%) !important;
+      border-color: shade-color($primary, 25%) !important;
+      color: $gray-100;
+      &:hover {
+        background-color: shade-color($primary, 25%) !important;
+        border-color: shade-color($primary, 25%) !important;
+        color: $gray-100;
+      }
+    }
+  }
+  &:hover {
+    @extend .text-decoration-none;
+  }
+  & .page-link {
+    border: 1px solid shade-color($primary, 25%);
+    background-color: inherit !important;
+    &:hover {
+      border: 1px solid #51A39F;
+      background-color: #51A39F !important;
+      color: $spaceblue-800;
+    }
+  }
+}
 
 // &:not(.is-style-outline) {
     //   @extend .btn-primary;

content-templates/content-article.php

@@ -9,36 +9,63 @@
 namespace WP_RDNYC;
 
 ?>
-<article <?php $extra_post_class = is_singular() ? '' : ' mb-two-rem';
-    echo post_class( 'post border-bottom border-gray-750 pb-4' . $extra_post_class ); ?>
+<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
-      if ( is_archive() || is_search() || is_home() ) {
+      echo (is_page() ? '<h1 class="post-title fw-light text-gray-300 mb-4 border-bottom border-dashed border-gray-600">'
+        : '<h2 class="post-title fs-2 fw-600 mb-2">');
+
+      if ( is_archive() || is_search() || 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>
+      else : echo esc_html( get_the_title() );
+      endif;
 
+      echo (is_page() ? '</h1>' : '</h2>');
+    ?>
+
+    <?php if (!is_page()) : ?>
     <div class="post-date text-gray-400 mb-3" style="margin-top: -.33rem;">
       <!-- inline_svg( 'bsi-clock', array( 'div_class' => 'icon baseline me-2' ) ) .  -->
-      <?php echo get_the_date('F j, Y'); ?>
+      <?php
+        if (get_the_title() === '') {
+          echo '<a href="' . esc_url( get_the_permalink() ) . '" rel="bookmark">';
+        }
+        echo get_the_date('F j, Y');
+        if (get_the_title() === '') {
+          echo '</a>';
+        }
+      ?>
     </div>
+    <?php endif; ?>
 
   </header>
 
   <div class="article post-body">
     <?php
-    if ( has_post_thumbnail() ) {
-      echo get_the_post_thumbnail( get_the_ID(), 'large', ['class' => 'rounded shadow mb-3 mw-100 h-auto'] );
-    }
+      if ( has_post_thumbnail() ) {
+        echo get_the_post_thumbnail( get_the_ID(), 'large', ['class' => 'rounded shadow mb-3 mw-100 h-auto'] );
+      }
 
-    the_content(); ?>
+      the_content();
+
+      wp_link_pages(
+        array(
+          'before' => '<nav class="d-flex justify-content-center" aria-label="Page navigation for post ' . get_the_title() . '"><div class="d-flex align-items-center pe-2">Post pages:</div><div class="pagination">',
+          'after' => '</div></nav>',
+          'link_before' => '<span class="page-link">',
+          'link_after' => '</span>'
+        )
+      );
+    ?>
   </div>
+
 </article>

header.php

@@ -21,6 +21,9 @@ namespace WP_RDNYC;
   <meta name="description" content="Recovery Dharma NYC: a peer-led movement using Buddhist practices and principles to overcome addiction through meditation, personal inquiry, and community">
 
   <link rel="preload" href="<?php echo get_stylesheet_directory_uri() . '/dist/fonts/open-sans-latin-400-normal.woff2'; ?>" as="font" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" href="<?php echo get_stylesheet_directory_uri() . '/dist/fonts/open-sans-latin-300-normal.woff2'; ?>" as="font" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" href="<?php echo get_stylesheet_directory_uri() . '/dist/fonts/open-sans-latin-700-normal.woff2'; ?>" as="font" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" href="<?php echo get_stylesheet_directory_uri() . '/dist/fonts/open-sans-latin-400-italic.woff2'; ?>" as="font" type="font/woff2" crossorigin="anonymous">
   <link rel="preload" href="<?php echo get_stylesheet_directory_uri() . '/dist/fonts/permanent-marker-latin-400-normal.woff2'; ?>" as="font" type="font/woff2" crossorigin="anonymous">
 
   <link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_stylesheet_directory_uri() . '/dist/images/apple-touch-icon.png'; ?>">

index.php

@@ -11,33 +11,35 @@ namespace WP_RDNYC;
 get_header(); ?>
 <main class="rdnyc-single-outer">
 
-  <?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
-    if ( have_posts() ) :
-      while ( have_posts() ) :
-        the_post();
-        echo get_template_part( 'content-templates/content', 'article' );
-      endwhile;
-  ?>
-
+  <div class="content">
     <?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>
+      <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
-    endif;
-  ?>
+    <?php
+      if ( have_posts() ) :
+        while ( have_posts() ) :
+          the_post();
+          echo get_template_part( 'content-templates/content', 'article' );
+        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
+      endif;
+    ?>
+  </div>
 
 </main>
 <?php