Refactoring

Author: SteveWilkes

_config.yml

@@ -5,7 +5,7 @@ logo:
 # Author image is used in site sidebar
 author:
   name: Steve Wilkes
-  image: https://avatars1.githubusercontent.com/u/8459425?s=100&v=4
+  image: https://avatars1.githubusercontent.com/u/8459425?s=52&v=4
 favicon: 'assets/images/favicon.png'
 baseurl: 
 post_images_dir: '/assets/images/posts/'
@@ -35,7 +35,7 @@ stackoverflow: users/721236/steve-wilkes
 rss: agileobjects
 contact_icon: true
 
-# Projects
+# Products
 ao_github: 'https://github.com/agileobjects/agileobjects.github.io'
 am_nuget: 'https://www.nuget.org/packages/AgileObjects.AgileMapper'
 am_github: 'https://github.com/agileobjects/AgileMapper'
@@ -51,8 +51,8 @@ navigation:
     url: /
   - text: About
     url: /about
-  - text: Projects
-    url: /projects
+  - text: Products
+    url: /products
   - text: Search
     url: /search
   - text: Contact

_includes/header.html

@@ -6,23 +6,13 @@
                 {% if site.logo != null %}
                 <p class="site-logo"><a href="{{ site.baseurl }}/" rel="home"><img src="{{ site.baseurl }}/assets/images/{{ site.logo }}" alt="{{ site.name }}" /></a></p>
                 <h1 class="site-title screen-reader-text"><a href="{{ site.baseurl }}" rel="home">{{site.title}}</a></h1>
-                {% elsif site.author %}
-                <p class="profile">
-                    <a href="{{ site.baseurl }}/">
-                        <img src="{{ site.author.image }}" alt="{{ site.author.name }}'s Picture" class="avatar" />
-                    </a>
-                </p>
+                {% endif %}
                 <div class="site-identity">
-                    {% if site.name %}
                     <h1 class="site-title">
                         <a href="{{ site.baseurl }}/">{{site.name}}</a>
                     </h1>
-                    {% endif %}
-                    {% if site.description %}
                     <p class="site-description">{{site.description}}</p>
-                    {% endif %}
                 </div><!-- .site-identity -->
-                {% endif %}
                 <button id="menu-toggle" class="menu-toggle">
                     <span class="screen-reader-text">Main Menu</span><span class="icon-menu" aria-hidden="true"></span>
                 </button>

_includes/product-box.html

@@ -0,0 +1,16 @@
+
+<article class="post product-featured has-image">
+    <div class="product-inside">
+        <a href="https://nuget.org/packages/AgileObjects.{{ product.name }}" class="product-thumbnail" target="_blank">
+            <img src="{{ site.baseurl }}/assets/images/products/{{ product.image }}" alt="{{ product.name }}">
+            <header class="product-header">
+                <h2 class="product-title">{{ product.name }}</h2>
+            </header><!-- .product-header -->
+        </a>
+        <ul class="product-content">
+            {% for item in product.description %}
+            <li>{{ item }}</li>
+            {% endfor %}
+        </ul>
+    </div><!-- .product-inside -->
+</article><!-- .product -->

_includes/project-box.html

@@ -0,0 +1,19 @@
+<div class="project">
+    <input type="checkbox" id="project-{{ forloop.index }}" />
+    <label for="project-{{ forloop.index }}" class="hero">
+        <span class="hero-text">{{ project.title }}</span>
+    </label>
+
+    <div>
+        <ul>
+            {% for item in project.description %}
+            <li>{{ item }}</li>
+            {% endfor %}
+        </ul>
+        <p class="project-tags">
+            {% for tag in project.tags %}
+            <span>{{ tag }}</span>
+            {% endfor %}
+        </p>
+    </div>
+</div>

_includes/projectbox.html

@@ -44,8 +44,8 @@
     {% if page.layout == 'post' %}
     <a class="bmc-button" target="_blank" href="https://www.buymeacoffee.com/agileobjects">
         <span>
-            Thanks for reading my blog!<br />Care to treat me to a coffee?
-            <img src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" alt="Buy me a coffee" />
+            Thanks for reading the blog!<br />Care to treat us to a coffee?
+            <img src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" alt="Buy us a coffee" />
         </span>
     </a>
     {% endif %}

_layouts/default.html

@@ -4,9 +4,11 @@
 
 <main id="main" class="site-main">
     <article class="post-full inner">
+        {% if page.title %}
         <header class="post-header">
             <h1 class="post-title">{{ page.title }}</h1>
         </header><!-- .post-header -->
+        {% endif %}
         {% if page.featured_image %}
         <div class="post-thumbnail"><img src="{{ site.baseurl }}{{ page.featured_image }}" alt="{% if page.featured_image_alt %}{{ page.featured_image_alt }}{% else %}{{ page.title }}{% endif %}" /></div>
         {% endif %}

_layouts/page.html

@@ -25,6 +25,10 @@ <h1 class="post-title">{{ page.title }}</h1>
             <img src="{{ page.featured_image }}" alt="{{ page.title }}">
         </div>
         {% endif %}
+        <div class="profile">
+            <img src="{{ site.author.image }}" alt="{{ site.author.name }}'s Picture" class="avatar" style="margin-bottom: .66667em" />
+            Steve Wilkes, Principal Consultant
+        </div>
         <div class="post-content">
             {{content}}
         </div>

_layouts/post.html

@@ -12,7 +12,7 @@ contained some good info, as well as some things I don't agree with. Top of the
 
 > Self-documenting code is bullshit.
 
-I mean... it's not, is it?
+I mean... it's not... is it?
 
 ## Self-Documenting Code
 

_posts/2020-09-09-self-documenting-code-comments.md

@@ -12,7 +12,7 @@
 }
 
 .post-header {
-    margin-bottom: 1.66667em;
+    overflow: hidden;
 
     h2 {
         padding: 3px 6px;
@@ -71,7 +71,8 @@
 
 .post-tags,
 .reading-time,
-.post-share {
+.post-share,
+.project-tags > span {
     font-size: 0.77778rem;
     line-height: 1.5;
     float: left;
@@ -223,7 +224,8 @@ blockquote > p {
 }
 
 .button-small,
-.tagcloud a {
+.tagcloud a,
+.project-tags > span {
     border: 1px solid $gray-lighter;
     color: $body-text-color;
     display: inline-block;
@@ -342,7 +344,75 @@ ul.archive-posts-list {
 }
 
 /* Projects */
-.featured-projects {
+.project {
+
+    input[type=checkbox] {
+        display: none;
+
+        ~ div {
+            display: none;
+            padding-left: 26px;
+        }
+    }
+
+    label.hero {
+        cursor: pointer;
+        margin-bottom: .5em;
+        padding-left: 26px;
+        position: relative;
+        display: block;
+
+        &::before {
+            content: "+";
+            position: absolute;
+            left: 3px;
+        }
+
+        &::after {
+            margin-top: 0;
+            height: 0;
+            width: 120px;
+        }
+
+        .hero-text {
+            font-size: 1.33334em;
+        }
+    }
+
+    input[type=checkbox]:checked {
+        + label {
+            margin-bottom: .77778em;
+
+            &:before {
+                content: "-";
+                left: 5px;
+            }
+
+            &:after {
+                height: 1px;
+                margin-top: 1em;
+            }
+        }
+
+        ~ div {
+            display: block;
+            margin-bottom: 2em;
+            overflow: hidden;
+        }
+    }
+
+    ul {
+        padding-left: .9em;
+    }
+
+    li {
+        font-size: .9em;
+        margin-bottom: .4em;
+    }
+}
+
+/* Products */
+.featured-products {
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
@@ -352,11 +422,11 @@ ul.archive-posts-list {
     margin: 0 -0.83333em 2.5em;
 }
 
-.project-featured {
+.product-featured {
     flex: 0 0 100%;
     margin-bottom: .5em;
 
-    .project-inside {
+    .product-inside {
         padding: 0 0.833333em;
         margin-bottom: 1.5em;
         overflow: hidden;
@@ -368,19 +438,19 @@ ul.archive-posts-list {
         width: 27%;
     }
 
-    .project-header {
+    .product-header {
         float: left;
     }
 
     h2 {
         margin-bottom: 6px;
     }
 
-    .project-thumbnail {
+    .product-thumbnail {
         text-decoration: none;
     }
 
-    .project-content {
+    .product-content {
         font-size: 0.75rem;
         float: left;
         margin-bottom: 0;