blog listing initially working

TODO.md

@@ -13,7 +13,7 @@
 - [ ] pore through template files to update theming
   - [X] ~~*initial front-page.php*~~ [2021-07-06]
   - [X] ~~*create social-icons working for front page*~~ [2021-07-06]
-  - [ ] create About page and suitable index.php modifications for it
+  - [X] ~~*create About page and suitable page.php for it & other generic pages*~~ [2021-07-06]
   - [ ] create some blog entries
   - [ ] create Blog page and is index.php also ok for it?
   - [ ] create Resume page and decide on using general or specific template

assets/css/app.scss

@@ -13,6 +13,13 @@
 /* Navbar custom styling */
 @import "nav-bar-help";
 
+
+.font-monospace {
+  font-family: $font-family-monospace;
+  font-weight: 300;
+  font-size: 15px;
+}
+
 /* main */
 html,
 body {
@@ -91,6 +98,9 @@ a {
   padding-top: 2px;
   padding-bottom: 2px;
 }
+.mt--05r {
+  margin-top: -0.5rem;
+}
 
 /* social icons */
 #social-icons .link-light {
@@ -101,3 +111,64 @@ a {
   }
 }
 
+blockquote {
+  p {
+    margin-bottom: 0 !important;
+  }
+  &.wp-block-quote {
+    @extend .blockquote;
+    cite {
+      @extend .blockquote-footer;
+      @extend .text-gray-300;
+      font-size: 0.75em;
+      margin-top: -1rem;
+      margin-bottom: 0 !important;
+      font-style: normal;
+    }
+  }
+}
+
+/* resume separators */
+.separator {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: $gray-400;
+  font-family: $font-family-monospace;
+  font-size: smaller;
+  text-transform: uppercase;
+  font-weight: 700;
+  &::before,
+  &::after {
+    content: "";
+    flex: 1;
+    border-bottom: 1px solid $secondary;
+  }
+  &:not(:empty)::before {
+    margin-right: 0.5em;
+  }
+  &:not(:empty)::after {
+    margin-left: 0.33em;
+  }
+}
+
+/* blog */
+.post-title a {
+  color: $gray-100;
+  text-decoration: none;
+  border-bottom: none;
+  &:hover {
+    color: $primary;
+    border-bottom: $secondary 3px solid;
+  }
+}
+.post-lede,
+.post-body {
+  h2, h3, h4, h5, h6 {
+    color: $gray-200;
+    margin-top: 2rem;
+  }
+}
+.post li {
+  line-height: 1.75rem;
+}

content-templates/content-article.php

@@ -22,28 +22,29 @@ namespace WP_73k;
         echo get_the_title();
       } ?>
     </h2>
-  </header>
-</article>
 
+    <?php $posttags = get_the_tags(); ?>
+    <div class="post-date font-monospace text-gray-300 <?php if (count($posttags) == 0) { echo 'mb-3'; } ?>">
+      <?php echo svg_icon_use("mdi-calendar-clock", "icon baseline me-2") . get_the_date('F j, Y'); ?>
+      by <?php echo svg_icon_use("mdi-account", "icon baseline me-1") . get_the_author(); ?>
+    </div>
 
-<article <?php post_class( 'bg-white border-2 border-gray-400 p-8' ); ?> itemscope itemtype="https://schema.org/CreativeWork">
+    <?php
-  <header>
+      if (count($posttags) > 0) {
-    <h2 class="m-0">
+        echo '<div class="post-tags fs-smaller mb-4">' . svg_icon_use("mdi-tag-multiple", "icon baseline text-gray-300 me-1");
-      <?php
+
+        $tag_strings = array_map(function ($tag) {
+          $tag_str = '<span class="text-gray-300">#</span>';
+          $tag_str .= '<a href="' . get_bloginfo('url') . '/tag/' . $tag->slug . '">' . $tag->name . '</a>';
+          return $tag_str;
+        }, $posttags);
+        echo implode(", ", $tag_strings) . '</div>';
+      }
+    ?>
 
-      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>
-    <p class="text-sm">Published on <?= get_the_date(); ?></p>
   </header>
 
-  <div class="article">
+  <div class="article post-body">
     <?php
     if ( has_post_thumbnail() ) {
       echo get_the_post_thumbnail( get_the_ID(), 'large', ['class' => 'rounded shadow-lg'] );
@@ -51,8 +52,4 @@ namespace WP_73k;
 
     the_content(); ?>
   </div>
-
-  <footer>
-    Categorized under: <?= get_the_category_list( ',' ); ?>
-  </footer>
 </article>

footer.php

@@ -26,10 +26,10 @@ namespace WP_73k;
       </div>
     </footer> -->
     <footer class="footer73k footer bottom-0 end-0 bg-dark">
-        <div class="px-2 px-sm-3">
+      <div class="px-2 px-sm-3">
-          <span class="text-gray-300">&copy; Copyright <?php echo date("Y") ?> Adam Piontek</span>
+        <span class="text-gray-300">&copy; Copyright <?php echo date("Y") ?> Adam Piontek</span>
-        </div>
+      </div>
-      </footer>
+    </footer>
 
     <?php wp_footer(); ?>
   </body>

front-page.php

@@ -8,8 +8,8 @@
 
 namespace WP_73k;
 
-get_header(); ?>
+get_header('', array('fixednav'=>true)); ?>
-<main class="container-fluid d-flex justify-content-center align-items-center" style="height: 80%;">
+<main class="container-fluid h-100 d-flex justify-content-center align-items-center">
   <div class="d-flex flex-column-reverse flex-lg-row align-items-lg-end mt-5">
 
 

header.php

@@ -24,7 +24,7 @@ namespace WP_73k;
 
 <body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage">
 
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark px-1 px-sm-2 px-lg-3 px-xl-4 px-xxl-5 py-3">
+<nav class="navbar <?php echo ($args['fixednav'] ? 'fixed-top' : ''); ?> navbar-expand-lg navbar-dark bg-dark px-1 px-sm-2 px-lg-3 px-xl-4 px-xxl-5 py-3">
   <div class="container-fluid">
 
     <h1 class="my-0 py-0 lh-base">

home.php

@@ -0,0 +1,34 @@
+<?php
+/**
+ * The default single page template.
+ *
+ * @author Freeshifter LLC
+ * @since 1.0.0
+ */
+
+namespace WP_73k;
+
+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() ) {
+      while ( have_posts() ) {
+        the_post();
+        echo get_template_part( 'content-templates/content', 'article' );
+      }
+    } ?>
+
+    <?php
+    // if ( !is_active_sidebar( 'sidebar' ) ) : ?>
+      <!-- <aside class="w-full lg:w-2/6 bg-white border-gray-400 border-2 p-8"> -->
+        <?php // dynamic_sidebar( 'sidebar' ); ?>
+      <!-- </aside> -->
+    <?php
+    // endif; ?>
+  </div>
+</main>
+<?php
+get_footer();