more styling & layout improvements

assets/css/_basic-additions.scss

@@ -0,0 +1,79 @@
+/* general additional text style */
+.font-family-handbrush {
+  font-family: $font-family-handbrush;
+}
+.text-gray-100 {
+  color: $gray-100 !important;
+}
+.text-gray-200 {
+  color: $gray-200 !important;
+}
+.text-gray-300 {
+  color: $gray-300 !important;
+}
+.text-gray-400 {
+  color: $gray-400 !important;
+}
+.text-gray-500 {
+  color: $gray-500 !important;
+}
+.text-gray-600 {
+  color: $gray-600 !important;
+}
+.text-gray-700 {
+  color: $gray-700 !important;
+}
+.fs-larger {
+  font-size: larger;
+}
+.fs-smaller {
+  font-size: smaller;
+}
+
+/* general additional spacing style */
+.mb-two-rem {
+  margin-bottom: 2rem !important;
+}
+
+/* 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-800 {
+    border-bottom-color: $gray-800 !important;
+  }
+  &.border-spaceblue-300 {
+    border-bottom-color: $spaceblue-300 !important;
+  }
+  &.border-spaceblue-400 {
+    border-bottom-color: $spaceblue-400 !important;
+  }
+  &.border-spaceblue-500 {
+    border-bottom-color: $spaceblue-500 !important;
+  }
+  &.border-spaceblue-600 {
+    border-bottom-color: $spaceblue-600 !important;
+  }
+  &.border-spaceblue-700 {
+    border-bottom-color: $spaceblue-700 !important;
+  }
+  &.border-spaceblue-800 {
+    border-bottom-color: $spaceblue-800 !important;
+  }
+}

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

@@ -25,7 +25,7 @@
 /*
  * main section layout
  */
-main.rdnyc-single-outer {
+main.rdnyc-index-outer {
   @extend .container-lg;
   @extend .mt-4;
   @extend .mb-3;

assets/css/app.scss

@@ -7,6 +7,9 @@
 /*SVG ICON SYSTEM*/
 @import "svg-icons";
 
+/* Basic style additions */
+@import "basic-additions";
+
 /* Navbar toggler icon override */
 @import "nav-burger";
 
@@ -22,10 +25,11 @@ body {
 }
 
 /* links */
-a {
+a,
-  // @extend .text-decoration-none;
+#tsml a {
+  @extend .text-decoration-underline;
   color: $gray-200;
-  &:hover {
+  &:hover, &:focus {
     // @extend .text-decoration-underline;
     color: $primary;
     text-decoration-color: $gray-200 !important;
@@ -33,85 +37,6 @@ a {
 }
 
 
-/* general additional text style */
-.font-family-handbrush {
-  font-family: $font-family-handbrush;
-}
-.text-gray-100 {
-  color: $gray-100 !important;
-}
-.text-gray-200 {
-  color: $gray-200 !important;
-}
-.text-gray-300 {
-  color: $gray-300 !important;
-}
-.text-gray-400 {
-  color: $gray-400 !important;
-}
-.text-gray-500 {
-  color: $gray-500 !important;
-}
-.text-gray-600 {
-  color: $gray-600 !important;
-}
-.text-gray-700 {
-  color: $gray-700 !important;
-}
-.fs-larger {
-  font-size: larger;
-}
-.fs-smaller {
-  font-size: smaller;
-}
-
-/* general additional spacing style */
-.mb-two-rem {
-  margin-bottom: 2rem !important;
-}
-
-/* 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-800 {
-    border-bottom-color: $gray-800 !important;
-  }
-  &.border-spaceblue-300 {
-    border-bottom-color: $spaceblue-300 !important;
-  }
-  &.border-spaceblue-400 {
-    border-bottom-color: $spaceblue-400 !important;
-  }
-  &.border-spaceblue-500 {
-    border-bottom-color: $spaceblue-500 !important;
-  }
-  &.border-spaceblue-600 {
-    border-bottom-color: $spaceblue-600 !important;
-  }
-  &.border-spaceblue-700 {
-    border-bottom-color: $spaceblue-700 !important;
-  }
-  &.border-spaceblue-800 {
-    border-bottom-color: $spaceblue-800 !important;
-  }
-}
 
 /* post styling */
 article.post.sticky {
@@ -136,12 +61,17 @@ article.post.sticky {
     }
   }
 }
-.post-header {
+header.post-header {
-  .post-title, .post-title a {
+  h1, h2, h1 a, h2 a {
     -ms-word-wrap: break-word;
     word-wrap: break-word;
   }
 }
+.article.post-body {
+  h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
+    padding-top: 0.5rem;
+  }
+}
 
 .more-link-outer {
   @extend .text-end;
@@ -315,83 +245,71 @@ table,
 
 
 
-/* search form */
+/* forms and search */
-.form-control {
-  color: $gray-200;
-  background-color: $spaceblue-900 !important;
-  border-color: $spaceblue-600;
-}
-.form-control:focus {
-  border-color: $input-focus-border-color;
-}
-.form-control::-ms-clear,
-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:    $spaceblue-700    !important;
-}
-.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-  color:    $spaceblue-700    !important;
-  opacity:  1;
-}
-.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
-  color:    $spaceblue-700    !important;
-  opacity:  1;
-}
-.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
-  color:    $spaceblue-700    !important;
-}
-.form-control::-ms-input-placeholder { /* Microsoft Edge */
-  color:    $spaceblue-700    !important;
-}
-.form-control::placeholder { /* Most modern browsers support this now. */
-  color:    $spaceblue-700    !important;
-}
-
-
 label {
   @extend .form-label;
 }
-input,
+
-.wp-block-search .wp-block-search__input,
+.form-control,
-form input {
+input.form-control {
-  @extend .form-control;
+  color: $gray-200;
+  background-color: $spaceblue-900 !important;
+  border-color: $spaceblue-600;
   &:focus {
     border-color: $input-focus-border-color;
+    color: $gray-200;
   }
-  &::-ms-clear
+  &::-ms-clear,
   &::-ms-reveal { display: none; }
-  &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+  &::-webkit-input-placeholder, /* WebKit, Blink, Edge */
+  &:-ms-input-placeholder, /* Internet Explorer 10-11 */
+  &::-ms-input-placeholder, /* Microsoft Edge */
+  &::placeholder /* Most modern browsers support this now. */
+  { 
     color:    $spaceblue-700    !important;
   }
-  &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+  &:-moz-placeholder, /* Mozilla Firefox 4 to 18 */
-    color:    $spaceblue-700    !important;
-    opacity:  1;
-  }
   &::-moz-placeholder { /* Mozilla Firefox 19+ */
     color:    $spaceblue-700    !important;
     opacity:  1;
   }
-  &:-ms-input-placeholder { /* Internet Explorer 10-11 */
+}
+
+input,
+.wp-block-search .wp-block-search__input,
+form input {
+  @extend .form-control;
+  color: $gray-200;
+  &:focus {
+    border-color: $input-focus-border-color;
+    color: $gray-200;
+  }
+  &::-ms-clear,
+  &::-ms-reveal { display: none; }
+  &::-webkit-input-placeholder, /* WebKit, Blink, Edge */
+  &:-ms-input-placeholder, /* Internet Explorer 10-11 */
+  &::-ms-input-placeholder, /* Microsoft Edge */
+  &::placeholder /* Most modern browsers support this now. */
+  { 
     color:    $spaceblue-700    !important;
   }
-  &::-ms-input-placeholder { /* Microsoft Edge */
+  &:-moz-placeholder, /* Mozilla Firefox 4 to 18 */
-    color:    $spaceblue-700    !important;
+  &::-moz-placeholder { /* Mozilla Firefox 19+ */
-  }
-  &::placeholder { /* Most modern browsers support this now. */
     color:    $spaceblue-700    !important;
+    opacity:  1;
   }
 }
+
 button,
 .wp-block-search .wp-block-search__button,
 form button {
   @extend .btn;
   @extend .btn-primary;
 }
-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;
 }
+
+select {
+  @extend .form-select;
+}

assets/js/main.js

@@ -5,8 +5,9 @@ import '../css/app.scss'
 import '../raw/rdnyc-logo.svg'; // rdnyc logo
 // other:
 import '../../node_modules/bootstrap-icons/icons/chevron-down.svg';
+import '../../node_modules/bootstrap-icons/icons/chevron-left.svg';
+import '../../node_modules/bootstrap-icons/icons/chevron-right.svg';
 import '../../node_modules/bootstrap-icons/icons/search.svg';
-// import '../../node_modules/bootstrap-icons/icons/person.svg';
 
 // Import Bootstrap JS
 import 'bootstrap/js/dist/collapse';

content-templates/content-article.php

@@ -8,43 +8,44 @@
 
 namespace WP_RDNYC;
 
+// for singular page, no extra bottom margin...
+$post_class = is_singular() ? '' : ' mb-two-rem ';
+$post_class .= 'post border-bottom border-spaceblue-700 pb-4';
+$post_class = esc_attr( implode( ' ', get_post_class( $post_class ) ) );
+
 ?>
-<article
+
-  <?php
+<article id="post-<?php the_ID(); ?>" class="<?php echo $post_class; ?>" itemscope itemtype="https://schema.org/CreativeWork">
-    $extra_post_class = is_singular() ? '' : ' mb-two-rem';
-    echo post_class( 'post border-bottom border-spaceblue-700 pb-4' . $extra_post_class );
-  ?>
-  itemscope itemtype="https://schema.org/CreativeWork">
 
   <header class="post-header">
     <?php
-      echo (is_page() ? '<h1 class="post-title fw-light text-gray-300 mb-4 border-bottom border-dashed border-spaceblue-600">'
+      // post/page header inner content (title, with link for query/index listings)
-        : '<h2 class="post-title fs-2 fw-600 mb-2">');
+      $h_inner = ( is_archive() || is_search() || is_home() ) ?
+        '<a href="' . esc_url( get_the_permalink() ) . '" rel="bookmark">'
+        . esc_html( get_the_title() ) . '</a>' :
+          esc_html( get_the_title() );
 
-      if ( is_archive() || is_search() || is_home() ) :
+      // For pages we want a larger heading like an index/query listing
-        printf( '<a href="%s" rel="bookmark">%s</a>',
+      // otherwise, a regular article/post header
-          esc_url( get_the_permalink() ),
+      echo (is_page() ? get_page_multi_heading( $h_inner ) : get_post_single_heading( $h_inner ));
-          esc_html( get_the_title() )
-        );
-      else : echo esc_html( get_the_title() );
-      endif;
-
-      echo (is_page() ? '</h1>' : '</h2>');
     ?>
 
-    <?php if (!is_page()) : ?>
+    <?php // when not a page, we also output the published date
-    <div class="post-date text-gray-400 mb-3" style="margin-top: -.33rem;">
+      if (!is_page()) : ?>
-      <!-- inline_svg( 'bsi-clock', array( 'div_class' => 'icon baseline me-2' ) ) .  -->
+      <div class="post-date text-gray-400 mb-3" style="margin-top: -.33rem;">
-      <?php
+        <?php
-        if (get_the_title() === '') {
+          if (get_the_title() === '') :
-          echo '<a href="' . esc_url( get_the_permalink() ) . '" rel="bookmark">';
+            printf( '<a href="%s" rel="bookmark">%s</a>',
-        }
+              esc_url( get_the_permalink() ),
-        echo get_the_date('F j, Y');
+              get_the_date('F j, Y')
-        if (get_the_title() === '') {
+            );
-          echo '</a>';
+
-        }
+          else :
-      ?>
+            echo get_the_date('F j, Y');
-    </div>
+          
+          endif;
+        ?>
+      </div>
     <?php endif; ?>
 
   </header>

custom-functions.php

@@ -1,5 +1,19 @@
 <?php
 
+/**
+ * standard "page/multi-post index/listing" & "single-blog-post" header styles
+ */
+function get_page_multi_heading( $content_str = '' ) {
+  $class = 'fw-light text-gray-400 mb-4 border-bottom border-dashed border-spaceblue-600';
+  return '<h1 class="' . $class . '">' . $content_str . '</h1>';
+}
+function get_post_single_heading( $content_str = '' ) {
+  $class = 'fs-2 fw-600 mb-2';
+  return '<h2 class="' . $class . '">' . $content_str . '</h2>';
+}
+
+
+
 /**
  * example inline SVG function atts array supported keys
  */

index.php

@@ -9,38 +9,53 @@
 namespace WP_RDNYC;
 
 get_header(); ?>
-<main class="rdnyc-single-outer">
 
+<main class="rdnyc-index-outer">
   <div class="content">
-    <?php if (!is_singular()) : ?>
-      <h1 class="fw-light text-gray-300 mb-4 border-bottom border-dashed border-spaceblue-600">
-      <?php if (is_archive()) : get_the_archive_title();
-          else : single_post_title();
-          endif;
-        ?>
-      </h1>
-    <?php endif; ?>
 
     <?php
+      // grab search query if there is one
+      $search_query_str = is_search() ? esc_html( get_search_query() ) : false;
+
+      // output super heading if not singular
+      if (!is_singular()) {
+        $title = is_archive() ? get_the_archive_title() : single_post_title( '', false );
+        $title = $search_query_str ? "Search results for: &#8220;$search_query_str&#8221;" : $title;
+        echo get_page_multi_heading( $title );
+      }
+
+      // begin the "if have_posts" section
       if ( have_posts() ) :
         while ( have_posts() ) :
           the_post();
           echo get_template_part( 'content-templates/content', 'article' );
         endwhile;
-    ?>
 
-      <?php if (!is_singular()) : ?>
+        // output listing pagination if not singular
-        <nav class="d-flex justify-content-between" aria-label="Page navigation">
+        if (!is_singular()) : ?>
-          <div class="nav-previous alignleft"><?php next_posts_link( '&larr; Older' ); ?></div>
+          <nav class="d-flex justify-content-between" aria-label="Page navigation">
-          <div class="nav-next alignright"><?php previous_posts_link( 'Newer &rarr;' ); ?></div>
+            <div class="nav-previous alignleft">
-        </nav>
+              <?php echo inline_svg( 'bsi-chevron-left', array( 'div_class' => 'icon baseline' ) ); ?>
-      <?php endif; ?>
+              <?php next_posts_link( 'Older' ); ?>
+            </div>
+            <div class="nav-next alignright">
+              <?php previous_posts_link( 'Newer' ); ?>
+              <?php echo inline_svg( 'bsi-chevron-right', array( 'div_class' => 'icon baseline' ) ); ?>
+            </div>
+          </nav>
+        <?php endif;
 
-    <?php
+      // if not have_posts, then handle if this is a search page
+      else :
+        if ($search_query_str) { echo "Search results for: &#8220;$search_query_str&#8221;"; }
+
+      // finally, end the "if have_posts" section
       endif;
-    ?>
-  </div>
 
+    ?>
+
+  </div>
 </main>
+
 <?php
 get_footer('', array('frontpage'=>false));

search.php

@@ -1,45 +0,0 @@
-<?php
-/**
- * The template for displaying search results pages.
- *
- * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#search-result
- *
- * @package WPRDNYC
- */
-
-get_header(); ?>
-
-<main class="container d-flex justify-content-center">
-  <div class="col-12 col-md-10 col-lg-9 col-xl-8 col-xxl-7 pb-2 mb-4 mt-3">
-
-    <?php if (have_posts()) : ?>
-    <h1 class="text-gray-300 fst-italic mb-4 tek-border-bottom-gray-dashed">
-      Search results for: <?php echo esc_html( get_search_query() ); ?></h1>
-
-    <?php
-        while ( have_posts() ) :
-          the_post();
-          echo get_template_part( 'content-templates/content', 'article' );
-        endwhile;
-    ?>
-
-      <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
-      else :
-
-        echo '<h1 class="text-gray-300 fst-italic mb-4 tek-border-bottom-gray-dashed">Search: nothing found</h1>';
-
-        printf( 'Sorry, no results for %s',
-          esc_html( get_search_query() )
-        );
-      endif;
-    ?>
-
-  </div>
-</main>
-<?php
-get_footer('', array('frontpage'=>false));