Move the border from header to whole intro

Move the border from being along the text element to being along the entire container div such that the border will span the entire content div and underline the avatar in the horizontal desktop layout. Readjust the layout of the avatar and header by center-aligning them both in the vertical and horizontal axes using flexbox.
patrickod · Jan 27, 2019 · 998192f · 998192f
1 parent ab5a5c2
commit 998192f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 8 deletions.
diff --git a/static/dist/styles.css b/static/dist/styles.css
@@ -118,8 +118,8 @@ table tr { border-bottom: 1px dotted #aeadad; }
 .site-nav-item a:hover { color: #424242; }
 #latest-post { display: none; }
 .post-container { margin: 0 40px; }
-.post-header { border-bottom: 6px solid #303030; margin: 0 0 20px; padding: 0 0 20px; text-align: center; text-transform: uppercase; }
-.post-intro { display: flex; justify-content: center; }
+.post-header { text-align: center; text-transform: uppercase; }
+.post-intro { border-bottom: 6px solid #303030; margin: 0 0 20px; padding: 0 0 20px; display: flex; justify-content: center; align-items: center; }
 .post-intro .post-header-logo { padding: 0 30px; }
 .post-title, .page-title { font-size: 52px; font-weight: 700; margin: 15px 0; text-align: center; text-transform: uppercase; }
 .page-title { margin: 15px 40px; }
@@ -192,7 +192,6 @@ table tr { border-bottom: 1px dotted #aeadad; }
  .site-title a { float: none; }
  .site-title + .button-square { margin-left: 0; }
  .site-nav-item { display: block; margin: 15px 0; }
- .post-header { margin-bottom: 20px; padding-bottom: 20px; }
  .post-header p { word-wrap: break-word; overflow-wrap: break-word; }
  .post-title, .page-title, .author-name, .author-heading { font-size: 42px; margin-top: 5px; word-wrap: break-word; overflow-wrap: break-word; }
  .post-date, .blog-description, .author-meta { margin-top: 20px; }

diff --git a/static/styles/style.scss b/static/styles/style.scss
@@ -283,15 +283,16 @@ table {
 .post-container { margin: 0 40px; }
 
 .post-header {
-    border-bottom: 6px solid $secondary;
-    margin: 0 0 20px;
-    padding: 0 0 20px;
     text-align: center;
     text-transform: uppercase;
 }
 .post-intro {
+    border-bottom: 6px solid $secondary;
+    margin: 0 0 20px;
+    padding: 0 0 20px;
     display: flex;
     justify-content: center;
+    align-items: center;
 }
 
 .post-intro .post-header-logo {
@@ -640,8 +641,6 @@ table {
     }
 
     .post-header {
-        margin-bottom: 20px;
-        padding-bottom: 20px;
         p {
             word-wrap: break-word;
             overflow-wrap: break-word;