progress on styling news/blog listing & content

assets/css/_bs-colors.scss

@@ -32,7 +32,9 @@ $spaceblue-400: #5d79ac;
 $spaceblue-500: #4c6594;
 $spaceblue-600: #3e5379;
 $spaceblue-700: #31415e;
+$spaceblue-750: #2a3751;
 $spaceblue-800: #212c40;
+$spaceblue-850: #1c2536;
 $spaceblue-900: #151c28;
 
 $light: $spaceblue-200;

assets/css/_bs-custom.scss

@@ -6,11 +6,10 @@ $line-height-base:            1.35;
 $line-height-sm:              1.15;
 $line-height-lg:              1.75;
 
-
 // 'native font stack' for sans via https://getbootstrap.com/docs/5.0/content/reboot/#native-font-stack
 $font-family-sans-serif:
   // custom theme font
-  Overpass,
+  "Open Sans",
   // Cross-platform generic font family (default user interface font)
   system-ui,
   // Safari for macOS and iOS (San Francisco)
@@ -30,10 +29,11 @@ $font-family-sans-serif:
   // Emoji fonts
   "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
 
-$font-family-base: $font-family-sans-serif;
+// handbrush / handwriting / special / emphasis font stack
+$font-family-handbrush: "Permanent Marker", Caveat, Besom, Fjord, "Goudy Old Style", "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
 
-// handbrush / special / emphasis / impact font stack
+// base bootstrap font
-$font-family-handbrush: "Permanent Marker", Besom, Fjord, Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
+$font-family-base: $font-family-sans-serif;
 
 // Features
 $enable-shadows: true;

assets/css/_fonts.scss

@@ -1,21 +1,23 @@
+/* font-family-sans-serif : Fontsource Open Sans */
+// @import "../../node_modules/@fontsource/open-sans/100.css";        /* Thin (Hairline) | normal */
+// @import "../../node_modules/@fontsource/open-sans/100-italic.css"; /* Thin (Hairline) | italic */
+// @import "../../node_modules/@fontsource/open-sans/200.css";        /* Extra Light (Ultra Light) | normal */
+// @import "../../node_modules/@fontsource/open-sans/200-italic.css"; /* Extra Light (Ultra Light) | italic */
+@import "../../node_modules/@fontsource/open-sans/300.css";        /* Light | normal */
+@import "../../node_modules/@fontsource/open-sans/300-italic.css"; /* Light | italic */
+@import "../../node_modules/@fontsource/open-sans/400.css";        /* Normal (Regular) | normal */
+@import "../../node_modules/@fontsource/open-sans/400-italic.css"; /* Normal (Regular) | italic */
+// @import "../../node_modules/@fontsource/open-sans/500.css";        /* Medium | normal */
+// @import "../../node_modules/@fontsource/open-sans/500-italic.css"; /* Medium | italic */
+@import "../../node_modules/@fontsource/open-sans/600.css";        /* Semi Bold (Demi Bold) | normal */
+@import "../../node_modules/@fontsource/open-sans/600-italic.css"; /* Semi Bold (Demi Bold) | italic */
+@import "../../node_modules/@fontsource/open-sans/700.css";        /* Bold | normal */
+@import "../../node_modules/@fontsource/open-sans/700-italic.css"; /* Bold | italic */
+@import "../../node_modules/@fontsource/open-sans/800.css";        /* Extra Bold (Ultra Bold) | normal */
+@import "../../node_modules/@fontsource/open-sans/800-italic.css"; /* Extra Bold (Ultra Bold) | italic */
+// @import "../../node_modules/@fontsource/open-sans/900.css";        /* Black (Heavy) | normal */
+// @import "../../node_modules/@fontsource/open-sans/900-italic.css"; /* Black (Heavy) | italic */
+
+
 /* emphasis/special : Fontsource Permanent Marker */
 @import "../../node_modules/@fontsource/permanent-marker/400.css";       /* Normal (Regular) | normal */
-
-
-/* font-family-sans-serif : Fontsource Overpass */
-@import "../../node_modules/@fontsource/overpass/100.css";        /* Thin (Hairline) | normal */
-@import "../../node_modules/@fontsource/overpass/100-italic.css"; /* Thin (Hairline) | italic */
-@import "../../node_modules/@fontsource/overpass/200.css";        /* Extra Light (Ultra Light) | normal */
-@import "../../node_modules/@fontsource/overpass/200-italic.css"; /* Extra Light (Ultra Light) | italic */
-@import "../../node_modules/@fontsource/overpass/300.css";        /* Light | normal */
-@import "../../node_modules/@fontsource/overpass/300-italic.css"; /* Light | italic */
-@import "../../node_modules/@fontsource/overpass/400.css";        /* Normal (Regular) | normal */
-@import "../../node_modules/@fontsource/overpass/400-italic.css"; /* Normal (Regular) | italic */
-@import "../../node_modules/@fontsource/overpass/600.css";        /* Semi Bold (Demi Bold) | normal */
-@import "../../node_modules/@fontsource/overpass/600-italic.css"; /* Semi Bold (Demi Bold) | italic */
-@import "../../node_modules/@fontsource/overpass/700.css";        /* Bold | normal */
-@import "../../node_modules/@fontsource/overpass/700-italic.css"; /* Bold | italic */
-@import "../../node_modules/@fontsource/overpass/800.css";        /* Extra Bold (Ultra Bold) | normal */
-@import "../../node_modules/@fontsource/overpass/800-italic.css"; /* Extra Bold (Ultra Bold) | italic */
-@import "../../node_modules/@fontsource/overpass/900.css";        /* Black (Heavy) | normal */
-@import "../../node_modules/@fontsource/overpass/900-italic.css"; /* Black (Heavy) | italic */

assets/css/_top-navbar.scss

@@ -174,7 +174,7 @@ nav#top-navbar-grid-outer {
           li.menu-item {
             .dropdown-item.top-navbar-grid-main-menu-item-link {
               @extend .fw-normal;
-              padding: 0.25rem 1rem 0 1rem !important;
+              // padding: 0.25rem 1rem 0 1rem !important;
               text-transform: inherit !important;
               &:hover {
                 @extend .text-decoration-none;

assets/css/app.scss

@@ -8,10 +8,10 @@
 @import "svg-icons";
 
 /* Navbar toggler icon override */
-@import "nav-burger";
+@import "top-nav-burger";
 
-/* Navbar custom styling */
+/* Top Navbar styling */
-@import "nav-bar-help";
+@import "top-navbar";
 
 /* main */
 html,
@@ -20,6 +20,108 @@ body {
   background-color: $spaceblue-800;
   height: 100%;
 }
+a {
+  @extend .text-decoration-none;
+  &:hover {
+    @extend .text-decoration-underline;
+    color: $primary;
+  }
+}
+
+/* general additional text style */
+.font-family-handbrush {
+  font-family: $font-family-handbrush;
+}
+.text-gray-100 {
+  color: $gray-100;
+}
+.text-gray-200 {
+  color: $gray-200;
+}
+.text-gray-300 {
+  color: $gray-300;
+}
+.text-gray-400 {
+  color: $gray-400;
+}
+.text-gray-500 {
+  color: $gray-500;
+}
+.text-gray-600 {
+  color: $gray-600;
+}
+.text-gray-700 {
+  color: $gray-700;
+}
+.fs-larger {
+  font-size: larger;
+}
+.fs-smaller {
+  font-size: smaller;
+}
+
+/* general additional spacing style */
+.mb-two-rem {
+  margin-bottom: 2rem;
+}
+
+/* general additional border style */
+.border-bottom {
+  &.border-dashed {
+    border-bottom-style: dashed !important;
+  }
+  &.border-gray-300 {
+    border-bottom-color: $gray-300 !important;
+  }
+  &.border-gray-400 {
+    border-bottom-color: $gray-400 !important;
+  }
+  &.border-gray-500 {
+    border-bottom-color: $gray-500 !important;
+  }
+  &.border-gray-600 {
+    border-bottom-color: $gray-600 !important;
+  }
+  &.border-gray-700 {
+    border-bottom-color: $gray-700 !important;
+  }
+  &.border-gray-750 {
+    border-bottom-color: $gray-750 !important;
+  }
+  &.border-gray-800 {
+    border-bottom-color: $gray-800 !important;
+  }
+}
+
+/* post styling */
+article.post.sticky {
+  @extend .card;
+  background-color: shade-color($gray-800, 50%);
+  border-bottom: inherit !important;
+  margin-bottom: inherit !important;
+  padding-bottom: inherit !important;
+  header.post-header {
+    @extend .card-header;
+    @extend .pb-0;
+  }
+  div.post-body {
+    @extend .card-body;
+    @extend .pt-0;
+    &:last-child {
+      padding-bottom: 0 !important;
+      margin-bottom: .25rem !important;
+    }
+  }
+}
+.more-link-outer {
+  @extend .text-end;
+  @extend .mb-0;
+  .more-link {
+    @extend .text-decoration-none;
+    @extend .font-family-handbrush;
+  }
+}
+
 // a {
 //   color: rgba($white, 0.75);
 //   // border-bottom: $gray-600 2px solid;
@@ -54,18 +156,6 @@ body {
 // .border-gray-900 {
 //   border-color: $gray-900 !important;
 // }
-.text-gray-200 {
-  color: $gray-200;
-}
-.text-gray-300 {
-  color: $gray-300;
-}
-.text-gray-400 {
-  color: $gray-400;
-}
-.text-gray-500 {
-  color: $gray-500;
-}
 // .border-10 {
 //   border-width: 10px !important;
 // }
@@ -81,33 +171,32 @@ body {
 // .fw-600 {
 //   font-weight: 600;
 // }
-// .fs-larger {
-//   font-size: larger;
-// }
-// .fs-smaller {
-//   font-size: smaller;
-// }
 
 
 /* blockquote handling */
-blockquote {
+blockquote.wp-block-quote {
-  &.wp-block-quote {
+  background-color: tint-color($spaceblue-800, 5%) !important;
   @extend .border-start;
-    @extend .border-gray;
   @extend .border-5;
+  border-left-color: tint-color($spaceblue-800, 15%) !important;
   @extend .ms-0;
   @extend .my-4;
-    @extend .ps-3;
+  @extend .px-3;
   @extend .py-2;
-    background-color: $gray-750;
+  quotes: "\201C" "\201D" "\201C" "\201D";
+  position: relative;
   p {
     @extend .blockquote;
-      font-size: 1em;
     &:last-of-type {
       @extend .my-0;
       @extend .py-0;
     }
   }
+  &.is-style-large {
+    p {
+      font-size: 1.7em;
+    }
+  }
   cite {
     @extend .blockquote-footer;
     @extend .text-gray-300;
@@ -116,12 +205,59 @@ blockquote {
     font-size: 0.85em;
     font-style: normal;
   }
-    :last-child {
+  &:last-child {
     @extend .py-1;
   }
+}
+figure.wp-block-pullquote {
+  &:not(.is-style-solid-color) {
+    background-color: tint-color($spaceblue-800, 5%) !important;
+    @extend .border-top;
+    @extend .border-bottom;
+    @extend .border-5;
+    border-top-color: tint-color($spaceblue-800, 15%) !important;
+    border-bottom-color: tint-color($spaceblue-800, 15%) !important;
   }
 }
 
+/* other wp styling */
+.btn-primary {
+  color: $spaceblue-800;
+}
+.has-drop-cap:not(:focus)::first-letter {
+  font-size: 5em;
+  margin: 0.05em 0.05em 0 0;
+}
+.wp-block-button {
+  .wp-block-button__link {
+    @extend .btn;
+    @extend .text-decoration-none;
+    @extend .mb-1;
+  }
+  &:not(.is-style-outline) .wp-block-button__link {
+    @extend .btn-primary;
+  }
+  &.is-style-outline .wp-block-button__link {
+    @extend .btn-outline-primary;
+  }
+  &.alignleft {
+    @extend .text-start;
+  }
+  &.aligncenter {
+    @extend .text-center;
+  }
+  &.alignright {
+    @extend .text-end;
+  }
+}
+
+
+// &:not(.is-style-outline) {
+    //   @extend .btn-primary;
+    // }
+    // &.is-style-outline {
+    //   @extend .btn-outline-primary;
+    // }
 
 // /* blog */
 // .post-title a {
@@ -177,8 +313,8 @@ blockquote {
 /* search form */
 .search-form .form-control {
   color: $gray-100 !important;
-  background-color: $gray-800 !important;
+  background-color: $spaceblue-900 !important;
-  border-color: $gray-500;
+  border-color: $spaceblue-600;
 }
 .search-form .form-control:focus {
   border-color: $input-focus-border-color;
@@ -188,40 +324,40 @@ input.form-control::-ms-clear,
 .form-control::-ms-reveal,
 input.form-control::-ms-reveal { display: none; }
 .form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
-  color:    $gray-500    !important;
+  color:    $spaceblue-700    !important;
 }
 .form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-  color:    $gray-500    !important;
+  color:    $spaceblue-700    !important;
   opacity:  1;
 }
 .form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
-  color:    $gray-500    !important;
+  color:    $spaceblue-700    !important;
   opacity:  1;
 }
 .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
-  color:    $gray-500    !important;
+  color:    $spaceblue-700    !important;
 }
 .form-control::-ms-input-placeholder { /* Microsoft Edge */
-  color:    $gray-500    !important;
+  color:    $spaceblue-700    !important;
 }
 .form-control::placeholder { /* Most modern browsers support this now. */
-  color:    $gray-500    !important;
+  color:    $spaceblue-700    !important;
-}
-.search-form {
-  .btn {
-    padding: .25rem .75rem;
-    &.btn-outline-light {
-      color: $gray-300;
-      border-color: $gray-500;
-      &:hover {
-        color: $primary;
-        background-color: inherit;
-        border-color: $secondary;
-      }
-    }
-    .icon {
-      font-size: 1.375rem;
-      margin-top: 1px;
-    }
-  }
 }
+// .search-form {
+//   .btn {
+//     padding: .25rem .75rem;
+//     &.btn-outline-light {
+//       color: $gray-300;
+//       border-color: $spaceblue-500;
+//       &:hover {
+//         color: $primary;
+//         background-color: inherit;
+//         border-color: $secondary;
+//       }
+//     }
+//     // .icon {
+//     //   font-size: 1.375rem;
+//     //   margin-top: 1px;
+//     // }
+//   }
+// }

assets/js/main.js

@@ -6,13 +6,7 @@ import '../raw/rdnyc-logo.svg'; // rdnyc logo
 // other:
 import '../../node_modules/bootstrap-icons/icons/chevron-down.svg';
 import '../../node_modules/bootstrap-icons/icons/search.svg';
-// import "../../node_modules/@mdi/svg/svg/magnify.svg"; // search form button icon
+// import '../../node_modules/bootstrap-icons/icons/person.svg';
-// import "../../node_modules/@mdi/svg/svg/home.svg";
-// import "../../node_modules/@mdi/svg/svg/information.svg";
-// import "../../node_modules/@mdi/svg/svg/account.svg";
-// import "../../node_modules/@mdi/svg/svg/calendar-clock.svg";
-// import "../../node_modules/@mdi/svg/svg/tag-multiple.svg";
-// import "../../node_modules/@mdi/svg/svg/rss.svg";
 
 // Import Bootstrap JS
 import 'bootstrap/js/dist/collapse';

content-templates/content-article.php

@@ -9,8 +9,8 @@
 namespace WP_RDNYC;
 
 ?>
-<article class="post border-bottom border-gray pb-4 mb-3" itemscope itemtype="https://schema.org/CreativeWork">
+<article <?php echo post_class( 'post border-bottom border-gray-750 pb-4 mb-two-rem' ); ?> itemscope itemtype="https://schema.org/CreativeWork">
-  <header>
+  <header class="post-header">
     <h2 class="post-title fs-2 fw-600 mb-2">
     <?php
       if ( is_archive() || is_search() || is_home() ) {
@@ -23,17 +23,15 @@ namespace WP_RDNYC;
       } ?>
     </h2>
 
-    <div class="post-date font-monospace text-gray-300 <?php echo (has_tag() ? '' : 'mb-3'); ?>">
+    <div class="post-date text-gray-400 mb-3" style="margin-top: -.33rem;">
-      <?php 
+      <!-- inline_svg( 'bsi-clock', array( 'div_class' => 'icon baseline me-2' ) ) .  -->
-        // echo svg_icon_use("mdi-calendar-clock", "baseline me-2") . get_the_date('F j, Y');
+      <?php echo get_the_date('F j, Y'); ?>
-        // echo ' by ' . svg_icon_use("mdi-account", "baseline me-1") . get_the_author();
-      ?>
     </div>
 
-    <?php
+    <!-- < ?php
       if (has_tag()) {
         echo '<div class="post-tags fs-smaller mb-4">';
-        // echo svg_icon_use("mdi-tag-multiple", "baseline text-gray-300 me-1");
+        // 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>';
@@ -41,7 +39,7 @@ namespace WP_RDNYC;
 
         echo implode(", ", $tag_strings) . '</div>';
       }
-    ?>
+    ?> -->
 
   </header>
 

custom-functions.php

@@ -29,11 +29,8 @@ function inline_svg( $svg_name, $atts = array() ) {
   // load initial svg content
   $svg_content = file_get_contents( get_template_directory_uri() . '/dist/images/' . $svg_name . '.svg' );
 
-  // set svg class
-  $class_target = $svg_class == '' ? 'class="{{class-placeholder}}"' : '{{class-placeholder}}';
-
   // replace svg class
-  $svg_content = str_replace($class_target, $svg_class, $svg_content);
+  $svg_content = str_replace('{{class-placeholder}}', $svg_class, $svg_content);
 
   // handle if role=img
   $svg_content = $svg_role_img ? str_replace('<svg ', '<svg role="img" ', $svg_content) : $svg_content;

header.php

@@ -20,7 +20,7 @@ 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/overpass-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-400-normal.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

@@ -9,14 +9,17 @@
 namespace WP_RDNYC;
 
 get_header(); ?>
-<main class="container-fluid">
+<main class="container d-flex justify-content-center mt-3">
   <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_archive()) : ?>
+    <h1 class="fw-light text-gray-300 mb-4 border-bottom border-dashed border-gray-600">
-    <h1 class="text-gray-300 fst-italic mb-4 tek-border-bottom-gray-dashed"><?= get_the_archive_title(); ?></h1>
+    <?php if (is_archive()) : get_the_archive_title();
+        else : single_post_title();
+        endif;
+      ?>
+    </h1>
 
     <?php
-      endif;
       if ( have_posts() ) :
         while ( have_posts() ) :
           the_post();

package-lock.json

@@ -9,7 +9,7 @@
       "version": "1.0.1",
       "license": "ISC",
       "dependencies": {
-        "@fontsource/overpass": "^4.x",
+        "@fontsource/open-sans": "^4.x",
         "@fontsource/permanent-marker": "^4.x",
         "@popperjs/core": "^2.x",
         "bootstrap": "^5.x",
@@ -1576,10 +1576,10 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/@fontsource/overpass": {
+    "node_modules/@fontsource/open-sans": {
       "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/@fontsource/overpass/-/overpass-4.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-4.5.0.tgz",
-      "integrity": "sha512-UEf8emYYzXWsGXMON+Q3ovzAZDcLbRO+dYa0eS6FqEHVYvtJUiEfultXTOTKc4FauJ0zoktjZpAhKH49XI3tRg=="
+      "integrity": "sha512-49+A0IkTTv3cpS1YecrZNCqvlVTThUt/qioiAIZsXfgC3TqavgRqwXXvroXmhVeP/f0sqZw5CRDMS1Hj4aSTbQ=="
     },
     "node_modules/@fontsource/permanent-marker": {
       "version": "4.5.0",
@@ -8862,10 +8862,10 @@
       "integrity": "sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==",
       "dev": true
     },
-    "@fontsource/overpass": {
+    "@fontsource/open-sans": {
       "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/@fontsource/overpass/-/overpass-4.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-4.5.0.tgz",
-      "integrity": "sha512-UEf8emYYzXWsGXMON+Q3ovzAZDcLbRO+dYa0eS6FqEHVYvtJUiEfultXTOTKc4FauJ0zoktjZpAhKH49XI3tRg=="
+      "integrity": "sha512-49+A0IkTTv3cpS1YecrZNCqvlVTThUt/qioiAIZsXfgC3TqavgRqwXXvroXmhVeP/f0sqZw5CRDMS1Hj4aSTbQ=="
     },
     "@fontsource/permanent-marker": {
       "version": "4.5.0",

package.json

@@ -11,7 +11,7 @@
     "build": "concurrently \"npm run prod\" \"npm run dev\""
   },
   "dependencies": {
-    "@fontsource/overpass": "^4.x",
+    "@fontsource/open-sans": "^4.x",
     "@fontsource/permanent-marker": "^4.x",
     "@popperjs/core": "^2.x",
     "bootstrap": "^5.x",

searchform.php

@@ -20,7 +20,7 @@ $seventythreek_aria_label = ! empty( $args['aria_label'] ) ? 'aria-label="' . es
   <div class="d-flex flex-nowrap">
     <label id="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" for="<?php echo esc_attr( $seventythreek_unique_id ); ?>" aria-hidden class="form-label d-none"><?php _e( 'Search&hellip;', 'seventythreek' ); // phpcs:ignore: WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></label>
     <input type="search" id="<?php echo esc_attr( $seventythreek_unique_id ); ?>" class="form-control me-2 tek-search-input" value="<?php echo get_search_query(); ?>" name="s" aria-labelledby="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" placeholder="Search blog&hellip;" />
-    <button type="submit" class="btn btn-outline-light" title="Search">
+    <button type="submit" class="btn btn-primary" title="Search">
       <?php echo inline_svg( 'bsi-search', array( 'div_class' => 'icon baseline' ) ); ?>
     </button>
   </div>

src/classes.php

@@ -7,11 +7,14 @@
  */
 
 namespace WP_RDNYC;
-
 use \Walker_Nav_Menu;
 
-add_filter( 'body_class', function( $classes ) {
 
+
+/**
+ * Filter to add special body class for front page & singular posts/pages
+ */
+add_filter( 'body_class', function( $classes ) {
   if ( is_singular( ['post', 'page'] ) ) {
     $classes[] = 'singular';
   }
@@ -21,9 +24,9 @@ add_filter( 'body_class', function( $classes ) {
   }
 
   return $classes;
-
 });
 
+
 /**
  * Filter to add CSS class to navbar menu <li> items
  */
@@ -36,6 +39,7 @@ add_filter( 'nav_menu_css_class' , function( $classes, $item, $args, $depth ) {
   return $classes;
 }, 3, 4 );
 
+
 /**
  * Filter to add CSS class to navbar menu item <a> links
  */
@@ -53,6 +57,17 @@ add_filter( 'nav_menu_link_attributes' , function( $atts, $item, $args ) {
 }, 2, 3 );
 
 
+/**
+ * filter to globally alter the '(more...)' text of the post excertp "read more" link
+ */
+add_filter( 'the_content_more_link', function () {
+  return '<div class="more-link-outer"><a class="btn btn-primary btn-sm more-link" href="' . get_permalink() . '">'
+    . '<span aria-label="Continue reading ' . get_the_title() . '">Read More&hellip;</span></a></div>';
+});
+
+
+
+
 /**
  * custom walker to handle nav main menu dropdowns (one level deep, bs5 doesn't have native submenu support)
  */