From fd05bb3239ca8b0f126db09757ae533d0c5e4090 Mon Sep 17 00:00:00 2001
From: Ricky Vetter <rickywvetter@gmail.com>
Date: Wed, 18 Oct 2017 13:04:29 -0700
Subject: [PATCH] More consistent headers (#140)

* More consistent headers

* Clean up mobile blog posts styles
---
 lib/core/BlogPost.js    | 28 ++++++++++++---------
 lib/static/css/main.css | 56 ++++++++++++++++++-----------------------
 2 files changed, 40 insertions(+), 44 deletions(-)

diff --git a/lib/core/BlogPost.js b/lib/core/BlogPost.js
index 7dccd56517..ccc6ef0537 100644
--- a/lib/core/BlogPost.js
+++ b/lib/core/BlogPost.js
@@ -39,9 +39,12 @@ class BlogPost extends React.Component {
 
   renderAuthorPhoto() {
     const post = this.props.post;
+    const className = "authorPhoto" + ((post.author && post.authorTitle)
+    ? " authorPhoto-big"
+    : "");
     if (post.authorFBID) {
       return (
-        <div className="authorPhoto">
+        <div className={className}>
           <a href={post.authorURL} target="_blank">
             <img
               src={
@@ -55,7 +58,7 @@ class BlogPost extends React.Component {
       );
     } else if (post.authorImage) {
       return (
-        <div className="authorPhoto">
+        <div className={className}>
           <a href={post.authorURL} target="_blank">
             <img
               src={post.authorImage}
@@ -102,20 +105,21 @@ class BlogPost extends React.Component {
 
     return (
       <header className="postHeader">
-        {this.renderAuthorPhoto()}
-        {post.author ? (
-          <p className="post-authorName">
-            <a href={post.authorURL} target="_blank">
-              {post.author}
-            </a>
-            <br />
-            {post.authorTitle}
-          </p>
-        ) : null}
         {this.renderTitle()}
         <p className="post-meta">
           {month} {day}, {year}
         </p>
+        <div className="authorBlock">
+          {post.author ? (
+            <p className="post-authorName">
+              <a href={post.authorURL} target="_blank">
+                {post.author}
+              </a>
+              {post.authorTitle}
+            </p>
+          ) : null}
+          {this.renderAuthorPhoto()}
+        </div>
       </header>
     );
   }
diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index 4d500d7548..b9ae5c05a3 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -315,20 +315,14 @@ header h2 {
 .mainContainer .wrapper .post ol {
   list-style: decimal outside none;
 }
-.mainContainer .wrapper .post .postHeader {
-  padding: 2em 0 0;
-}
 .mainContainer .wrapper .post .postHeader h1 {
   font-size: 150%;
   line-height: 1em;
-  padding: 0.4em 0 0;
+  padding: 0;
 }
 .mainContainer .wrapper .post .postHeader h1 a {
   border: none;
 }
-.mainContainer .wrapper .post .postHeader .post-meta {
-  text-align: center;
-}
 .mainContainer .wrapper .post .postSocialPlugins {
   padding-top: 1em;
 }
@@ -363,9 +357,6 @@ header h2 {
 .mainContainer .wrapper .post .docPagination a .pagerTitle {
   display: none;
 }
-.mainContainer .wrapper .posts .post {
-  margin-bottom: 6vh;
-}
 
 .mainContainer .wrapper .post h1,
 .mainContainer .wrapper .post h2,
@@ -474,7 +465,6 @@ header h2 {
     font-size: 250%;
   }
   .mainContainer .wrapper .posts .post {
-    margin-bottom: 4vh;
     width: 100%;
   }
 }
@@ -863,7 +853,6 @@ a:hover code {
   float: right;
   font-size: 10px;
   font-weight: normal;
-  margin-top: 20px;
   text-decoration: none;
 }
 @media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
@@ -1533,10 +1522,6 @@ nav.toc .toggleNav .navBreadcrumb h2 {
   display: block;
 }
 
-.sideNavVisible .navPusher .mainContainer {
-  padding-top: 35px;
-}
-
 @media only screen and (min-width: 900px) {
   nav.toc section .navGroups {
     padding: 40px 0 0;
@@ -1633,42 +1618,52 @@ table tr th {
   font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;
   text-transform: uppercase;
 }
-
-.blogContainer .posts {
-  margin-top: 60px;
+.mainContainer:not(.blogContainer) .wrapper .post,
+.blogContainer .posts,
+.blogContainer .lonePost {
+  padding-top: 40px;
 }
 .blogContainer .posts .post {
   border-bottom: 1px solid #e0e0e0;
   border-radius: 3px;
-  padding: 0 10px 20px;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
 }
-.blogContainer .lonePost {
-  margin-top: 60px;
-}
-.blogContainer .postHeader h1 {
-  text-align: center;
+
+.blogContainer .postHeader {
+  margin-bottom: 10px;
 }
 .blogContainer .postHeader a {
   text-decoration: none;
 }
 .blogContainer .postHeader p.post-meta {
   padding: 0;
+  margin-bottom: 10px;
 }
 
+.blogContainer .postHeader .authorBlock {
+  display: flex;
+}
 .blogContainer .postHeader .post-authorName {
   color: rgba(57, 57, 57, 0.7);
+  display: flex;
+  flex-direction: column;
   font-size: 14px;
   font-weight: 400;
+  justify-content: center;
   margin-top: 0;
+  margin-right: 10px;
   padding: 0;
-  text-align: center;
 }
 .blogContainer .postHeader .authorPhoto {
   border-radius: 50%;
-  height: 70px;
-  margin: 0 auto;
+  height: 30px;
   overflow: hidden;
-  width: 70px;
+  width: 30px;
+}
+.blogContainer .postHeader .authorPhoto.authorPhoto-big {
+  height: 50px;
+  width: 50px;
 }
 .blog-recent {
   margin: 20px 0;
@@ -1680,9 +1675,6 @@ table tr th {
   .blog-recent {
     height: 40px;
   }
-  .blogContainer .lonePost {
-    margin-top: 0;
-  }
 }
 
 .header-link {