From 03ab9c4b31ffddd268624d92fc3e005c18d02989 Mon Sep 17 00:00:00 2001
From: Kyle Gordy <kyletgordy@gmail.com>
Date: Sun, 24 Nov 2019 14:37:49 -0500
Subject: [PATCH] First pass at styling blog posts

---
 _includes/hero.html                       |   4 +-
 _includes/post-hero.html                  |  50 ++++++++
 _includes/post-sidebar.html               |  23 ++++
 _includes/related-jobs.html               |  20 ++++
 _layouts/post.html                        |  50 +++-----
 assets/_sass/base/_typography.scss        |  10 +-
 assets/_sass/component/_hero.scss         |  47 ++++++++
 assets/_sass/component/_post-content.scss | 137 ++++++++++++++++++++++
 assets/_sass/component/_post-list.scss    |   6 +-
 assets/_sass/utilities/_borders.scss      |   1 +
 assets/_sass/utilities/_images.scss       |  14 +++
 assets/_sass/utilities/_text.scss         |   8 ++
 assets/css/main.scss                      |   1 +
 assets/js/jobs.js                         |   3 +-
 blog.html                                 |  36 +++---
 15 files changed, 343 insertions(+), 67 deletions(-)
 create mode 100644 _includes/post-hero.html
 create mode 100644 _includes/post-sidebar.html
 create mode 100644 _includes/related-jobs.html
 create mode 100644 assets/_sass/component/_post-content.scss

diff --git a/_includes/hero.html b/_includes/hero.html
index 6bc5af2..d893cd9 100644
--- a/_includes/hero.html
+++ b/_includes/hero.html
@@ -1,10 +1,8 @@
-{% assign hero = page.hero %}
+ {% assign hero = page.hero %}
 <section class="hero theme-{{ hero.theme | default: "white" }}">
     <div class="hero__container container container-offset">
 
-        {% assign hero = page.hero %}
         <header class="hero__header">
-
             {% if hero.label %}
                 <h1 class="hero__section-heading">{{ hero.label }}</h1>
             {% endif %}
diff --git a/_includes/post-hero.html b/_includes/post-hero.html
new file mode 100644
index 0000000..d3ea66f
--- /dev/null
+++ b/_includes/post-hero.html
@@ -0,0 +1,50 @@
+<section class="hero theme-{{ hero.theme | default: "midnight" }}">
+    <div class="hero__container container container-offset">
+
+        <header class="hero__header">
+
+            <!-- Post Title -->
+            <h1 class="hero__title" itemprop="name headline">{{ page.title | escape }}</h1>
+
+            <!-- Post Metadata -->
+            <ul class="hero__meta">
+
+                <!-- Post Author -->
+                {%- if page.author -%}
+                <li class="hero__meta-item author">
+                    <strong>Author</strong><br>
+                    <span itemprop="author" itemscope itemtype="http://schema.org/Person">
+                        <span itemprop="name">
+                            {%- if site.data.authors[page.author] -%}
+                                {{ site.data.authors[page.author].name}}
+                            {%- else -%}
+                                {{ page.author }}
+                            {%- endif -%}
+                        </span>
+                    </span>
+                </li>
+                {%- endif -%}
+
+                <!-- Post Date -->
+                <li class="hero__meta-item published">
+                    <strong>Published</strong><br>
+                    <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+                        {%- assign date_format = site.date_format -%}
+                        {{ page.date | date: date_format }}
+                    </time>
+                </li>
+
+                {%- if page.team -%}
+                <!-- Team Info -->
+                <li class="hero__meta-item category">
+                    <strong>Category</strong><br>
+                    <span>{{ page.team }}</span>
+                </li>
+                {%- endif -%}
+
+            </ul>
+        </header>
+
+    </div>
+    {% include logo-texture.html %}
+</section>
diff --git a/_includes/post-sidebar.html b/_includes/post-sidebar.html
new file mode 100644
index 0000000..0d1d02e
--- /dev/null
+++ b/_includes/post-sidebar.html
@@ -0,0 +1,23 @@
+<div class="post__sidebar monospace">
+    <!-- Tags -->
+    {%- if page.tags -%}
+    <ul class="list--inline mb-2 pl-0">
+        <li><strong>Tags: </strong></li>
+        {% for tag in page.tags %}
+        <li>{{ tag }}</li>
+        {% endfor %}
+    </ul>
+    {%- endif -%}
+
+    <!-- Sharing / RSS -->
+    <ul class="list--inline mb-4 pl-0">
+        <li>
+            <strong>Subscribe: </strong>
+        </li>
+        <li>
+            <a class="no-underline" href="{{ "/feed.xml" | relative_url }}">
+                <svg class="svg-icon" aria-label="Subscribe via RSS"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#rss' | relative_url }}"></use></svg>
+            </a>
+        </li>
+    </ul>
+</div>
diff --git a/_includes/related-jobs.html b/_includes/related-jobs.html
new file mode 100644
index 0000000..48b489d
--- /dev/null
+++ b/_includes/related-jobs.html
@@ -0,0 +1,20 @@
+{%- if page.team and site.data.teams[page.team] -%}
+<section>
+
+    <h5 class="mb-3">Related Jobs
+        <a href="{% link careers.html %}#open-positions" class="float-right monospace fs-md fw-normal no-underline">
+            View All <span class="visually-hidden">Jobs</span>
+            <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#arrow-right' | relative_url }}"></use></svg>
+        </a>
+    </h5>
+    <ul class="card-grid card-grid-sm" id="jobs"></ul>
+
+    <script type="text/javascript">
+    <!--
+        window.onload = () =>{
+            renderJobs(document.getElementById('jobs'), "{{ site.data.teams[page.team].lever }}", 3);
+        };
+    -->
+    </script>
+</section>
+{%- endif -%}
diff --git a/_layouts/post.html b/_layouts/post.html
index 79c529b..5a76519 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -3,45 +3,27 @@ layout: default
 ---
 <article itemscope itemtype="http://schema.org/BlogPosting">
 
-    <header>
-        <h1 itemprop="name headline">{{ page.title | escape }}</h1>
+    <!-- Post hero -->
+    {% include post-hero.html %}
 
-        <p>
-            <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
-            {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
-            {{ page.date | date: date_format }}
-            </time>
+    <div class="section-container" itemprop="articleBody">
 
-            {%- if page.author -%}
-            • <span itemprop="author" itemscope itemtype="http://schema.org/Person">
-                <span itemprop="name">
-                    {%- if site.data.authors[page.author] -%}
-                        {{ site.data.authors[page.author].name}}
-                    {%- else -%}
-                        {{ page.author }}
-                    {%- endif -%}
-                </span>
-            </span>
-            {%- endif -%}
-        </p>
-    </header>
+        <!-- Post sidebar -->
+        {% include post-sidebar.html %}
 
-    <ul class="card-grid card-grid-sm" id="jobs">
-    </ul>
+        <div class="text-length-lg">
 
-    <div itemprop="articleBody">
-        {{ content }}
+            <!-- Post content  -->
+            <div class="post-content">
+                {{ content }}
+                <!-- Post separator line -->
+                <hr>
+            </div>
+
+            <!-- Related jobs -->
+            {% include related-jobs.html %}
+        </div>
     </div>
 
     <a href="{{ page.url | relative_url }}" hidden></a>
 </article>
-
-{%- if page.team and site.data.teams[page.team] -%}
-<script type="text/javascript">
-<!--
-    window.onload = () =>{
-        renderJobs(document.getElementById('jobs'), "{{ site.data.teams[page.team].lever }}", 3);
-    };
--->
-</script>
-{%- endif -%}
diff --git a/assets/_sass/base/_typography.scss b/assets/_sass/base/_typography.scss
index 68c15e8..d18e0f6 100644
--- a/assets/_sass/base/_typography.scss
+++ b/assets/_sass/base/_typography.scss
@@ -49,14 +49,6 @@ ul {
     font-style: normal;
 }
 
-.body-lg {
-    font-size: 1rem;
-
-    @media (min-width: $bp-md) {
-        font-size: rem-calc(18px);
-    }
-}
-
 ////////////////////
 // Headings
 ////////////////////
@@ -69,7 +61,7 @@ h5,
 h6 {
     font-weight: 700;
     line-height: 1.25em;
-    margin: 0 0 0.3em 0;
+    margin: 0 0 .5em 0;
 }
 
 h1,
diff --git a/assets/_sass/component/_hero.scss b/assets/_sass/component/_hero.scss
index d2c6b27..efc052f 100644
--- a/assets/_sass/component/_hero.scss
+++ b/assets/_sass/component/_hero.scss
@@ -5,10 +5,12 @@
 :root {
     --hero-margin: 60px;
     --hero-overlap: -45px;
+    --hero-meta-padding: 15px;
 
     @media (min-width: $bp-lg) {
         --hero-margin: 100px;
         --hero-overlap: -75px;
+        --hero-meta-padding: 20px;
     }
 }
 
@@ -73,3 +75,48 @@
     margin-top: var(--hero-overlap);
     z-index: 2;
 }
+
+////////////////////
+// Hero Meta List
+////////////////////
+
+.hero__meta {
+    display: inline-grid;
+    grid-gap: var(--hero-meta-padding);
+    grid-template-columns: auto auto auto;
+    grid-template-areas:
+        "author author author"
+        "published category .";
+    margin: rem-calc(20px) 0 0 0;
+    font-size: rem-calc(14px);
+    @extend .list--plain;
+
+    @media (min-width: $bp-sm) {
+        font-size: rem-calc(16px);
+        grid-template-areas: "author published category";
+    }
+}
+
+.hero__meta-item {
+    @extend .monospace;
+}
+
+// Item Borders
+.hero__meta-item {
+
+    &:last-child {
+        padding-left: var(--hero-meta-padding);
+        border-left: 2px solid var(--theme-border-color);
+    }
+
+    @media (min-width: $bp-sm) {
+        &:not(:first-child) {
+            padding-left: var(--hero-meta-padding);
+            border-left: 2px solid var(--theme-border-color);
+        }
+    }
+}
+
+.hero__meta-item.author { grid-area: author }
+.hero__meta-item.published { grid-area: published }
+.hero__meta-item.category { grid-area: category }
diff --git a/assets/_sass/component/_post-content.scss b/assets/_sass/component/_post-content.scss
new file mode 100644
index 0000000..ac05079
--- /dev/null
+++ b/assets/_sass/component/_post-content.scss
@@ -0,0 +1,137 @@
+////////////////////
+// Post Typography
+////////////////////
+
+// Bump of base font size for a comfortable reading experience
+.post-content {
+    font-size: 1rem;
+
+    @media (min-width: $bp-sm) {
+        font-size: rem-calc(18px);
+        line-height: 1.7;
+    }
+
+    @media (min-width: $bp-lg) {
+        font-size: rem-calc(20px);
+    }
+}
+
+// Links
+// Make sure all links have visible underlines
+.post-content a {
+    @extend.link-inline;
+}
+
+// Unordered list
+.post-content ul,
+.post-content ol {
+    padding-left: 1.5em;
+
+    li {
+        margin-bottom: .5em;
+    }
+
+    li p:last-child {
+        margin-bottom: 0;
+    }
+}
+
+// Blockquote
+.post-content blockquote {
+    margin: 0 0 2em 0;
+    padding: 1.25em;
+    font-size: .85em;
+    line-height: 1.7;
+    border: 1px solid $border-color;
+    @extend .monospace;
+    @extend .rounded;
+    @extend .shadow;
+
+    p:last-child {
+        margin-bottom: 0;
+    }
+}
+
+////////////////////
+// Post Images
+////////////////////
+
+.post-content img {
+    display: block;
+    margin: 0 auto 1.5em auto;
+    border: 1px solid $border-color;
+    @extend .shadow;
+    @extend .rounded;
+}
+
+////////////////////
+// Code Highlighter
+////////////////////
+
+// Inline code
+.post-content code.highlighter-rouge {
+    display: inline-block;
+    margin: 0 .25em;
+    padding: 0 .5em;
+    font-size: .75em;
+    border: 1px solid $border-color;
+    border-radius: $border-radius-sm;
+    @extend .monospace;
+    @extend .shadow-sm;
+}
+
+// Full width code boxes
+.post-content div.highlight {
+    margin-bottom: 1.5em;
+    padding: 1em;
+    font-size: .75em;
+    line-height: 1.5;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch; // for iOS momentum scrolling
+    @extend .rounded;
+
+    pre {
+        margin: 0;
+    }
+}
+
+////////////////////
+// Horizontal Rule
+////////////////////
+
+.post-content hr {
+    position: relative;
+    display: block;
+    margin: 2em auto;
+    width: 250px;
+    height: 1px;
+    border: none;
+
+    &:before,
+    &:after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+    }
+
+    // Line
+    &:before {
+        content: '';
+        width: 100%;
+        height: 100%;
+        background-color: $border-color;
+    }
+
+    // Dot
+    &:after {
+        content: '';
+        width: 7px;
+        height: 7px;
+        background-color: $white;
+        border-radius: 1px;
+        border: 1px solid $border-color;
+        box-shadow: 0 0 0 2px $white;
+        z-index: 2;
+    }
+}
diff --git a/assets/_sass/component/_post-list.scss b/assets/_sass/component/_post-list.scss
index 54a480c..b27b0fe 100644
--- a/assets/_sass/component/_post-list.scss
+++ b/assets/_sass/component/_post-list.scss
@@ -21,10 +21,14 @@
 
 .post-list__date,
 .post-list__author {
-    font-size: rem-calc(14px);
+    font-size: rem-calc(13px);
     line-height: 1;
     @extend .monospace;
     @extend .text-muted;
+
+    @media (min-width: $bp-md) {
+        font-size: rem-calc(14px);
+    }
 }
 
 // Bullet before post date
diff --git a/assets/_sass/utilities/_borders.scss b/assets/_sass/utilities/_borders.scss
index 3356d0b..b3494b8 100644
--- a/assets/_sass/utilities/_borders.scss
+++ b/assets/_sass/utilities/_borders.scss
@@ -32,6 +32,7 @@ $border-color: $slate-300;
 // Border Radius
 ////////////////////
 
+$border-radius-sm: 3px;
 $border-radius: 6px;
 
 .rounded {
diff --git a/assets/_sass/utilities/_images.scss b/assets/_sass/utilities/_images.scss
index 8c72aea..92e6c38 100644
--- a/assets/_sass/utilities/_images.scss
+++ b/assets/_sass/utilities/_images.scss
@@ -26,3 +26,17 @@
     .logo__wordmark { fill: $white; }
     .logo__subhead { fill: rgba($white, .70) }
 }
+
+////////////////////
+// Shadows
+////////////////////
+
+$shadow-color: $slate-200;
+
+.shadow-sm {
+    box-shadow: .15em .15em 0 $shadow-color;
+}
+
+.shadow {
+    box-shadow: .5em .5em 0 $shadow-color;
+}
diff --git a/assets/_sass/utilities/_text.scss b/assets/_sass/utilities/_text.scss
index 9160729..8cf2eda 100644
--- a/assets/_sass/utilities/_text.scss
+++ b/assets/_sass/utilities/_text.scss
@@ -28,6 +28,14 @@
     font-size: rem-calc(18px);
 }
 
+.body-lg {
+    font-size: 1rem;
+
+    @media (min-width: $bp-md) {
+        font-size: rem-calc(18px);
+    }
+}
+
 ////////////////////
 // Font Weights
 ////////////////////
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 4fb3f0c..2b55b4d 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -39,6 +39,7 @@
 @import "component/section-split";
 @import "component/post-list";
 @import "component/post-index";
+@import "component/post-content";
 
 // Import the syntax highlighting theme, see:
 // https://richleland.github.io/pygments-css/
diff --git a/assets/js/jobs.js b/assets/js/jobs.js
index 7cfdd11..8fe1171 100644
--- a/assets/js/jobs.js
+++ b/assets/js/jobs.js
@@ -97,7 +97,7 @@ function renderJobs(elem, team, randomLimit) {
       li.className = 'card theme-midnight';
       li.innerHTML = `
       <div class="card__body">
-          <h5 class="clamp-2">
+          <h5 class="mb-1 clamp-2">
               <a href="${job.hostedUrl}" target="_blank" class="stretched-link link-text-color">${job.text}</a>
           </h5>
           <p class="m-0 fs-md monospace text-truncate">${job.categories.location}</p>
@@ -120,4 +120,3 @@ function shuffleArray(array) {
         [array[i], array[j]] = [array[j], array[i]];
     }
 }
-
diff --git a/blog.html b/blog.html
index 8896f54..7a7850e 100644
--- a/blog.html
+++ b/blog.html
@@ -19,25 +19,25 @@ permalink: /blog/
             {%- for post in site.posts -%}
             <li class="post-list__item">
 
-            <!-- Post title -->
-            <h4 class="post-list__heading">
-                <a href="{{ post.url | relative_url }}" class="link-text-color">
-                {{ post.title | escape }}
-                </a>
-            </h4>
+                <!-- Post title -->
+                <h4 class="post-list__heading">
+                    <a href="{{ post.url | relative_url }}" class="link-text-color">
+                    {{ post.title | escape }}
+                    </a>
+                </h4>
 
-            <!-- Post metadata -->
-            <span class="post-list__author">
-                <span class="visually-hidden">Author:</span>
-                {%- if site.data.authors[post.author] -%}
-                    {{ site.data.authors[post.author].name}}
-                {%- else -%}
-                    {{ post.author }}
-                {%- endif -%}
-            </span>
-            <time class="post-list__date" datetime="{{ post.date | date_to_xmlschema }}">
-                {%- assign date_format = site.date_format -%}
-                {{ post.date | date: date_format }}</time>
+                <!-- Post metadata -->
+                <span class="post-list__author">
+                    <span class="visually-hidden">Author:</span>
+                    {%- if site.data.authors[post.author] -%}
+                        {{ site.data.authors[post.author].name}}
+                    {%- else -%}
+                        {{ post.author }}
+                    {%- endif -%}
+                </span><!--
+                --><time class="post-list__date" datetime="{{ post.date | date_to_xmlschema }}">
+                    {%- assign date_format = site.date_format -%}
+                    {{ post.date | date: date_format }}</time>
 
             </li>
             {%- endfor -%}