streamline and improve styling and layout. increment version.

assets/css/_basic-additions.scss

@@ -0,0 +1,49 @@
+/* general additional text style */
+.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 !important;
+}
+.fs-smaller {
+  font-size: smaller !important;
+}
+.fw-500 {
+  font-weight: 500;
+}
+.fw-600 {
+  font-weight: 600;
+}
+.font-brand {
+  font-family: $font-family-brand;
+}
+
+/* general additional spacing style */
+/* general additional border style */
+.border-gray-900 {
+  border-color: $gray-900 !important;
+}
+.border-10 {
+  border-width: 10px !important;
+}
+.border-20 {
+  border-width: 20px !important;
+}

assets/css/_bs-colors.scss

@@ -1,48 +0,0 @@
-// Colors
-// -- now defined in bs-custom --
-// $primary: #e48663;
-// $secondary: #00b0b0;
-// $success: #99c24d;
-// $info: #b489c7;
-// $warning: #f4d35e;
-
-$white: #fff;
-$gray-100: #e8e8e8;
-$gray-200: #cfcfcf;
-$gray-300: #b5b5b5;
-$gray-400: #9c9c9c;
-$gray-500: #828282;
-$gray-600: #696969;
-$gray-700: #4f4f4f;
-$gray-750: #404040;
-$gray-800: #363636;
-$gray-900: #242424;
-$black: #000;
-
-$light: $gray-200;
-$dark: $gray-800;
-
-// Create your own map
-$custom-colors: (
-  "primary": $primary,
-  "secondary": $secondary,
-  "success": $success,
-  "info": $info,
-  "warning": $warning,
-  "danger": $danger,
-  "light": $light,
-  "dark": $dark,
-  "gray": $gray-600,
-  "gray-dark": $gray-800,
-);
-
-// Merge the maps
-$theme-colors: map-merge($theme-colors, $custom-colors);
-
-// misc
-$navbar-dark-color: rgba($white, 0.75);
-$navbar-dark-hover-color: rgba($white, 0.9);
-$navbar-dark-active-color: $white;
-$navbar-dark-disabled-color: rgba($white, 0.45);
-$navbar-dark-toggler-border-color: rgba($white, 0.3);
-$component-active-bg: $primary;

assets/css/_bs-custom-post.scss

@@ -0,0 +1,8 @@
+// Merge the color maps
+$theme-colors: map-merge($theme-colors, $custom-colors);
+
+/* general styles */
+$link-color:                              rgba($white, 0.75);
+$link-decoration:                         underline;
+$link-shade-percentage:                   20%;
+$link-hover-color:                        $primary;

assets/css/_bs-custom-pre.scss

@@ -19,11 +19,3 @@ $font-family-base: $font-family-serif;
 // Features
 $enable-shadows: true;
 $enable-negative-margins: true;
-
-// init colors for some vars
-$primary: #e48663;
-$secondary: #00b0b0;
-$success: #99c24d;
-$info: #b489c7;
-$warning: #f4d35e;
-$component-active-bg: $secondary;

assets/css/_bs-load.scss

@@ -1,12 +1,17 @@
 /* Bootstrap custom variable overrides */
-@import "bs-custom";
+@import "bs-custom-pre";
 
-// Required || Configuration
+// Required || Configuration :: bootstrap functions
 @import "../../node_modules/bootstrap/scss/functions";
+
+/* Bootstrap custom variable overrides */
+@import "bs-vars-pre";
+
+// Required || Configuration :: bootstrap variables
 @import "../../node_modules/bootstrap/scss/variables";
 
 /* Bootstrap custom variable overrides */
-@import "bs-colors";
+@import "bs-custom-post";
 
 // Required || Configuration -- CONTINUED
 @import "../../node_modules/bootstrap/scss/mixins";
@@ -19,18 +24,18 @@
 @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";
 // @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/_bs-vars-pre.scss

@@ -0,0 +1,118 @@
+// Colors
+// scss-docs-start color-variables
+$blue:    #0d6efd;
+$indigo:  #6610f2;
+$purple:  #b489c7;
+$pink:    #d63384;
+$red:     #cf4a50;
+$orange:  #e48663;
+$yellow:  #f4d35e;
+$green:   #99c24d;
+$teal:    #20c997;
+$cyan:    #0dcaf0;
+// scss-docs-end color-variables
+
+// define black, white, gray
+$white: #fff;
+$black: #000;
+$gray: #828282; // 6c757d 7d756c
+
+// define gray scale
+$gray-100: tint-color($gray, 80%);
+$gray-200: tint-color($gray, 60%);
+$gray-300: tint-color($gray, 40%);
+$gray-400: tint-color($gray, 20%);
+$gray-500: $gray;
+$gray-600: shade-color($gray, 20%);
+$gray-700: shade-color($gray, 40%);
+$gray-750: shade-color($gray, 50%);
+$gray-800: shade-color($gray, 60%);
+$gray-900: shade-color($gray, 80%);
+
+
+// scss-docs-start theme-color-variables
+$primary: $orange;
+$secondary: #00b0b0;
+$success:       $green;
+$info:          $purple;
+$warning:       $yellow;
+$danger:        $red;
+$light:         $gray-200;
+$dark:          $gray-800;
+// scss-docs-end theme-color-variables
+
+
+// Create your own map
+$custom-colors: (
+  "primary": $primary,
+  "secondary": $secondary,
+  "success": $success,
+  "info": $info,
+  "warning": $warning,
+  "danger": $danger,
+  "light": $light,
+  "dark": $dark,
+  "gray":       $gray-600,
+  "gray-dark":  $gray-800
+);
+
+
+/* custom spacers */
+$spacer: 1rem !default;
+$spacers: (
+  0: 0,
+  1: $spacer * .25,
+  2: $spacer * .5,
+  3: $spacer,
+  4: $spacer * 1.5,
+  '4-2': $spacer * 2,
+  '4-25': $spacer * 2.5,
+  5: $spacer * 3,
+  6: $spacer * 3.5,
+  7: $spacer * 4,
+);
+
+
+/* body, text, components */
+$body-bg: shade-color($gray-800, 10%);
+$body-color: $gray-200;
+$text-muted: $gray-400;
+
+$component-active-color: $dark;
+$component-active-bg: $primary;
+
+$component-hover-color: tint-color($light, 5%);
+$component-hover-bg: rgba($white, .125);
+
+
+/* navbar dark modifications */
+$navbar-dark-color: rgba($white, 0.75);
+$navbar-dark-hover-color: rgba($white, 0.9);
+$navbar-dark-active-color: $white;
+$navbar-dark-disabled-color: rgba($white, 0.45);
+$navbar-dark-toggler-border-color: rgba($white, 0.3);
+
+/* tables */
+$table-bg: $dark;
+
+/* buttons */
+$btn-box-shadow: null;
+
+/* figure captions */
+$figure-caption-color: $gray-400;
+
+/* form inputs */
+$input-bg: shade-color($body-bg, 20%);
+$input-focus-bg: shade-color($body-bg, 20%);
+$input-border-color: $gray-600;
+$input-focus-color: $gray-100;
+$input-placeholder-color: shade-color($gray-600, 15%);
+
+/* pagination */
+$pagination-bg: shade-color($body-bg, 20%);
+$pagination-border-color: $gray-600;
+$pagination-hover-color: tint-color($primary, 10%);
+$pagination-hover-bg: $component-hover-bg;
+$pagination-hover-border-color: $gray-600;
+$pagination-focus-color: tint-color($primary, 10%);
+$pagination-focus-bg: shade-color($body-bg, 20%);

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";
 
@@ -19,14 +22,17 @@
 /* main */
 html,
 body {
-  color: $gray-100;
-  background-color: $gray-800;
   height: 100%;
 }
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+
+
+/* links */
 a {
-  color: rgba($white, 0.75);
-  // border-bottom: $gray-600 2px solid;
-  // text-decoration: none;
   text-decoration-color: $gray-600;
   &.navbar-brand,
   &.nav-link {
@@ -35,13 +41,11 @@ a {
   &:visited {
     color: $info;
     .post-title & {
-      color: $gray-100;
+      color: $link-color;
     }
   }
   &:hover {
     color: $primary;
-    // text-decoration: none;
-    // border-bottom: $secondary 3px solid;
     text-decoration-color: $secondary;
     &.navbar-brand {
       border-bottom: none;
@@ -53,78 +57,28 @@ a {
   border-bottom: none !important;
 }
 
-/* more */
+/* other custom classes */
-.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;
-}
-.border-20 {
-  border-width: 20px !important;
-}
-.fw-500 {
-  font-weight: 500;
-}
-.fw-600 {
-  font-weight: 600;
-}
-.font-brand {
-  font-family: $font-family-brand;
-}
-.fs-larger {
-  font-size: larger;
-}
-.fs-smaller {
-  font-size: smaller;
-}
-.tek-fixed-footer {
-  @extend .bg-dark;
-  @extend .bottom-0;
-  @extend .end-0;
-  @extend .position-fixed;
-  font-size: 14px !important;
-  border-top-left-radius: 0.3rem !important;
-  padding-top: 2px;
-  padding-bottom: 2px;
-}
 .tek-subtitle {
   @extend .fs-5;
   @extend .font-monospace;
-  @extend .text-gray-300;
+  @extend .text-muted;
   @extend .mb-0;
-  // margin-top: -0.5rem;
 }
 .tek-border-bottom-gray-dashed {
-  @extend .border-bottom;
+  border-bottom: 1px $gray-500 dashed;
-  // @extend .border-gray;
-  border-bottom-color: $gray-500 !important;
-  border-bottom-style: dashed !important;
 }
 
 /* front page styles */
-#tek-front-page img.wp-post-image {
+body.front-page img.wp-post-image {
   @extend .img-fluid;
   @extend .border;
-  // @extend .border-20;
   @extend .border-gray-900;
   @extend .rounded-2;
   border-width: 18px !important;
+  max-width: 350px;
   width: 100%;
 }
-#tek-front-page h2, header h2 {
+body.front-page h2, header h2 {
   @extend .fs-2;
   @extend .fw-600;
   @extend .mb-0;
@@ -162,8 +116,8 @@ a {
   }
   .tek-employer {
     @extend .tek-border-bottom-gray-dashed;
-    @extend .text-gray-300;
+    color: $text-muted;
-    @extend .fst-italic;
+    font-style: italic;
   }
 }
 
@@ -178,48 +132,91 @@ a {
   }
 }
 
+/* sticky posts */
+article.post.sticky {
+  border-radius: .25rem !important;
+  background-color: rgba(228,134,99,.25);
+  border-bottom: inherit !important;
+  margin-bottom: inherit !important;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  padding: 1rem 1rem 0.5rem 1rem !important;
+  header.post-header {
+    flex: 1 1 auto !important;
+    padding: 1rem 1rem 0 1rem !important;
+  }
+  div.post-body {
+    flex: 1 1 auto !important;
+    padding: 0 1rem 1rem 1rem !important;
+    &:last-child {
+      padding-bottom: 0 !important;
+      margin-bottom: .25rem !important;
+    }
+  }
+}
+
+
 /* blockquote handling */
-blockquote {
+blockquote,
-  &.wp-block-quote {
+blockquote.wp-block-quote {
-    @extend .border-start;
+  border-left: 5px solid $gray;
-    @extend .border-gray;
+  margin-left: 1.5rem 0;
-    @extend .border-5;
+  padding: .5rem 1rem;
-    @extend .ms-0;
+  background-color: $gray-750;
-    @extend .my-4;
+  &.tek-bq-lg {
-    @extend .ps-3;
-    @extend .py-2;
-    background-color: $gray-750;
-    &.tek-bq-lg {
-      p {
-        font-size: 1.375rem;
-      }
-    }
     p {
-      @extend .blockquote;
+      font-size: 1.375rem;
-      font-size: 1em;
-      &:last-of-type {
-        @extend .my-0;
-        @extend .py-0;
-      }
     }
-    cite {
+  }
-      @extend .blockquote-footer;
+  p {
-      @extend .text-gray-300;
+    @extend .blockquote;
-      @extend .my-0;
+    font-size: 1em;
-      @extend .py-0;
+    &:last-of-type {
-      font-size: 0.85em;
+      margin-top: 0;
-      font-style: normal;
+      margin-bottom: 0;
+      padding-top: 0;
+      padding-bottom: 0;
     }
-    :last-child {
+  }
-      @extend .py-1;
+  cite {
+    @extend .blockquote-footer;
+    color: $text-muted;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    font-size: 0.85em;
+    font-style: normal;
+  }
+  :last-child {
+    padding-top: .25rem;
+    padding-bottom: .25rem;
+  }
+}
+figure.wp-block-pullquote {
+  margin: 2em;
+  padding: 3rem;
+  &:not(.is-style-solid-color) {
+    background-color: $gray-750;
+    border-top: 5px solid $gray !important;
+    border-bottom: 5px solid $gray !important;
+    & blockquote {
+      background-color: none !important;
+      border: none !important;
     }
   }
+  & blockquote {
+    margin: 0 !important;
+    padding: 0 !important;
+    background-color: inherit !important;
+    border: inherit !important;
+  }
 }
 
 
 /* blog */
 .post-title a {
-  color: $gray-100;
+  color: $link-color;
   text-decoration: none;
   border-bottom: none;
   &:hover {
@@ -245,7 +242,7 @@ blockquote {
 
 /* widget styling */
 #footer-widgets {
-  background-color: $gray-750;
+  background-color: shade-color($body-bg, 15%);
   border-radius: .5em;
   .widgettitle {
     @extend .fs-4;
@@ -267,38 +264,6 @@ blockquote {
 .wp-block-tag-cloud {
   @extend .mb-0;
 }
-.search-form .form-control {
-  color: $gray-100 !important;
-  background-color: $gray-800 !important;
-  border-color: $gray-500;
-}
-.search-form .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:    $gray-500    !important;
-}
-.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-  color:    $gray-500    !important;
-  opacity:  1;
-}
-.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
-  color:    $gray-500    !important;
-  opacity:  1;
-}
-.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
-  color:    $gray-500    !important;
-}
-.form-control::-ms-input-placeholder { /* Microsoft Edge */
-  color:    $gray-500    !important;
-}
-.form-control::placeholder { /* Most modern browsers support this now. */
-  color:    $gray-500    !important;
-}
 .search-form {
   .btn {
     padding: .25rem .75rem;
@@ -317,3 +282,99 @@ input.form-control::-ms-reveal { display: none; }
     }
   }
 }
+
+/* other wp styling */
+img,
+figure.wp-caption {
+  max-width: 100%;
+  height: auto;
+}
+.btn {
+  font-family: $font-family-sans-serif;
+}
+.btn-outline-secondary {
+  color: $secondary !important;
+  &:hover {
+    color: $black !important;
+  }
+}
+.wp-block-button {
+  margin-bottom: .5rem !important;
+}
+.wp-block-button__link,
+.wp-block-search .wp-block-search__button {
+  @extend .btn;
+  @extend .btn-secondary;
+}
+.is-style-outline > .wp-block-button__link {
+  @extend .btn;
+  @extend .btn-outline-secondary;
+}
+.has-drop-cap:not(:focus)::first-letter {
+  font-size: 5em;
+  margin: 0.05em 0.05em 0 0;
+}
+.wp-caption-text {
+  color: $text-muted !important;
+}
+.alignleft {
+  text-align: left !important;
+}
+.aligncenter {
+  text-align: center !important;
+}
+.alignright {
+  text-align: right !important;
+}
+
+/* tables */
+.wp-block-table table,
+.wp-block-calendar {
+  @extend .table;
+  @extend .table-dark;
+  caption {
+    color: $text-muted !important;
+  }
+}
+.wp-block-table.is-style-stripes {
+  border-bottom: none;
+  table {
+    @extend .table-striped;
+  }
+}
+.wp-block-calendar table tbody { color: $text-muted !important; }
+.wp-block-calendar table th { background-color: tint-color($dark, 5%) !important; }
+.wp-block-calendar th, .wp-block-calendar tbody td {
+  border: 1px solid $gray-600 !important;
+}
+.wp-block-calendar > .wp-calendar-nav > span > a {
+  background-color: inherit !important;
+}
+
+/* post page pagination */
+.post-page-numbers {
+  text-decoration: none !important;
+  @extend .page-item;
+  &.current {
+    @extend .page-item, .active;
+  }
+}
+
+/* forms */
+label {
+  @extend .form-label;
+}
+input, textarea {
+  @extend .form-control;
+}
+.wp-block-search .wp-block-search__input {
+  border-color: $input-border-color !important;
+}
+select {
+  @extend .form-select;
+}
+.wp-block-calendar,
+.wp-block-categories-dropdown {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}

assets/js/main.js

@@ -17,6 +17,8 @@ import "../../node_modules/@mdi/svg/svg/rss.svg";
 import "../../node_modules/@mdi/svg/svg/account-hard-hat.svg";
 import "../../node_modules/@mdi/svg/svg/open-in-new.svg";
 import "../../node_modules/@mdi/svg/svg/magnify.svg";
+import "../../node_modules/@mdi/svg/svg/chevron-left.svg";
+import "../../node_modules/@mdi/svg/svg/chevron-right.svg";
 // social
 import "../../node_modules/@mdi/svg/svg/linkedin.svg";
 import "../../node_modules/@mdi/svg/svg/github.svg";

content-templates/content-article.php

@@ -9,7 +9,14 @@
 namespace WP_73k;
 
 ?>
-<article class="post border-bottom border-gray pb-4 mb-3" itemscope itemtype="https://schema.org/CreativeWork">
+<article 
+  id="post-<?php the_ID(); ?>"
+  class="<?php 
+    $post_class = 'post border-bottom border-gray pb-4 mb-3';
+    echo esc_attr( implode( ' ', get_post_class( $post_class ) ) );
+    ?>"
+  itemscope itemtype="https://schema.org/CreativeWork"
+  >
   <header>
     <h2 class="post-title fs-2 fw-600 mb-2">
     <?php
@@ -23,7 +30,7 @@ namespace WP_73k;
       } ?>
     </h2>
 
-    <div class="post-date font-monospace text-gray-300 <?php echo (has_tag() ? '' : 'mb-3'); ?>">
+    <div class="post-date font-monospace text-muted <?php echo (has_tag() ? '' : 'mb-3'); ?>">
       <?php 
         echo inline_svg( 'mdi-calendar-clock', array( 'div_class' => 'icon baseline me-2' ) ) . get_the_date('F j, Y');
         echo ' by ' . inline_svg( 'mdi-account', array( 'div_class' => 'icon baseline me-1' ) ) . get_the_author();
@@ -33,10 +40,10 @@ namespace WP_73k;
     <?php
       if (has_tag()) {
         echo '<div class="post-tags fs-smaller mb-4">';
-        echo inline_svg( 'mdi-tag-multiple', array( 'div_class' => 'icon baseline text-gray-300 me-1' ) );
+        echo inline_svg( 'mdi-tag-multiple', array( 'div_class' => 'icon baseline text-muted me-1' ) );
 
         $tag_strings = array_map(function ($tag) {
-          return '<span class="text-gray-300">#</span><a href="' . get_tag_link($tag) . '">' . $tag->name . '</a>';
+          return '<span class="text-muted">#</span><a href="' . get_tag_link($tag) . '">' . $tag->name . '</a>';
         }, get_the_tags());
 
         echo implode(", ", $tag_strings) . '</div>';
@@ -51,6 +58,16 @@ namespace WP_73k;
       echo get_the_post_thumbnail( get_the_ID(), 'large', ['class' => 'rounded shadow-lg'] );
     }
 
-    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>