Third pass 2.0

assets/css/screen.css

@@ -174,6 +174,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 */
 
 .site-nav-logo {
+    flex-shrink: 0;
     display: block;
     margin-right: 24px;
 }
@@ -299,7 +300,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     order: unset;
     display: flex;
     flex-direction: column;
-    margin: 0 15px 30px;
+    margin: 0 20px 40px;
     background: #fff center center;
     background-size: cover;
     box-shadow: rgba(39,44,49,0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px;
@@ -434,7 +435,9 @@ The first (most recent) post in the list is styled to be bigger than the others
 /* Single Post
 /* ---------------------------------------------------------- */
 
-.post-template .site-main {
+.post-template .site-main,
+.page-template .site-main {
+    padding-bottom: 4vw;
     background: #fff;
 }
 
@@ -487,8 +490,7 @@ The first (most recent) post in the list is styled to be bigger than the others
     .post-full-image {
         height: 600px;
         margin: -5vw -4vw -100px;
-        background: var(--lightgrey) center center;
-        background-size: cover;
+        border-radius: 0;
     }
 }
 
@@ -503,6 +505,17 @@ The first (most recent) post in the list is styled to be bigger than the others
     background: #fff;
 }
 
+@media (max-width: 1170px) {
+    .post-full-content {
+        padding: 5vw 7vw 0;
+    }
+}
+@media (max-width: 800px) {
+    .post-full-content {
+        font-size: 1.9rem;
+    }
+}
+
 .post-full-content:before {
     display: block;
     content: "";
@@ -531,6 +544,11 @@ The first (most recent) post in the list is styled to be bigger than the others
     filter: blur(5px);
 }
 
+.no-image .post-full-content:before,
+.no-image .post-full-content:after {
+    display: none;
+}
+
 .kg-card-markdown {
     display: flex;
     flex-direction: column;
@@ -542,22 +560,25 @@ The first (most recent) post in the list is styled to be bigger than the others
     min-width: 100%;
 }
 
-.kg-card-markdown > p:first-child {
-    font-size: 2.7rem;
-    line-height: 1.55em;
+.post-template .kg-card-markdown > p:first-child {
+    font-size: 1.25em;
+    line-height: 1.5em;
 }
 
 .post-full-content a {
+    color: #000;
     box-shadow: var(--blue) 0 -1px 0 inset;
 }
 
 .post-full-content a:hover {
+    color: var(--blue);
     text-decoration: none;
 }
 
 .post-full-content img {
     width: 100vw;
     max-width: 1040px;
+    margin: 1.5em 0;
 }
 
 /*
@@ -570,7 +591,7 @@ Super neat trick courtesy of @JoelDrapper
 
 .post-full-content blockquote {
     margin: 0 0 1.5em 0;
-    padding: 0;
+    padding: 1.5em 0;
     border: 0;
     text-align: center;
     font-size: 3rem;
@@ -593,49 +614,12 @@ Super neat trick courtesy of @JoelDrapper
     }
 }
 
+.post-full-content blockquote + blockquote {
+    padding-top: 0;
+}
+
 .post-full-content .fluid-width-video-wrapper {
-    margin-bottom: 1.5em;
-}
-
-
-/* Post Footer
-/* ---------------------------------------------------------- */
-
-.post-full-footer {
-    display: flex;
-    justify-content: space-between;
-    // max-width: 700px;
-    margin: 0 auto;
-    padding: 0 0 6vw 0;
-}
-
-.author-card {
-    display: flex;
-    align-items: center;
-}
-
-.author-card-image {
-    height: 60px;
-    width: 60px;
-    margin-right: 10px;
-}
-
-.author-card-content h4 {
-    margin: 0;
-    padding: 0;
-}
-
-.author-card-content h4 a {
-    color: var(--darkgrey);
-    font-weight: 700;
-}
-
-.author-card-content h4 a:hover {
-    text-decoration: none;
-}
-
-.author-card-content p {
-    margin: 0;
+    margin: 1.5em 0 3em;
 }
 
 
@@ -643,21 +627,27 @@ Super neat trick courtesy of @JoelDrapper
 /* ---------------------------------------------------------- */
 
 .subscribe-form {
-    padding: 6vw 0 8vw 0;
+    margin: 1.5em 0;
+    padding: 6vw 0 6.5vw;
     text-align: center;
+    background: color(var(--whitegrey) l(+4%));
+    border-radius: 5px;
 }
 
 .subscribe-form-title {
     margin: 0 0 3px 0;
     padding: 0;
-    font-size: 2.9rem;
+    font-size: 3.2rem;
+    line-height: 1;
     font-weight: 700;
     color: var(--darkgrey)
 }
 
 .subscribe-form p {
-    font-size: 1.8rem;
+    font-size: 2.2rem;
     line-height: 1.55em;
+    letter-spacing: 0.2px;
+    color: var(--midgrey);
 }
 
 .subscribe-form form {
@@ -699,7 +689,7 @@ Super neat trick courtesy of @JoelDrapper
     margin: 0 0 0 10px;
     padding: 0 20px;
     height: 41px;
-    font-size: 1.3rem;
+    font-size: 1.5rem;
     line-height: 37px;
     font-weight: 400;
     color: #fff;
@@ -723,6 +713,58 @@ Super neat trick courtesy of @JoelDrapper
 }
 
 
+/* Post Footer
+/* ---------------------------------------------------------- */
+
+.post-full-footer {
+    display: flex;
+    justify-content: space-between;
+    max-width: 840px;
+    margin: 0 auto;
+    padding: 3vw 0 6vw 0;
+}
+
+.author-card {
+    display: flex;
+    align-items: center;
+}
+
+.author-card-image {
+    height: 60px;
+    width: 60px;
+    margin-right: 10px;
+}
+
+.author-card-content h4 {
+    margin: 0;
+    padding: 0;
+    font-size: 2rem;
+}
+
+.author-card-content h4 a {
+    color: var(--darkgrey);
+    font-weight: 700;
+}
+
+.author-card-content h4 a:hover {
+    text-decoration: none;
+}
+
+.author-card-content p {
+    margin: 0;
+    color: var(--midgrey);
+}
+
+
+/* Comments
+/* ---------------------------------------------------------- */
+
+.post-full-comments {
+    max-width: 840px;
+    margin: 0 auto;
+}
+
+
 /* Related posts
 /* ---------------------------------------------------------- */
 
@@ -932,7 +974,7 @@ Super neat trick courtesy of @JoelDrapper
     margin: 0;
     font-weight: bold;
     font-size: 1.5rem;
-    line-height: 1.3;
+    line-height: 1.3em;
     color: #2e2e2e;
     white-space: nowrap;
     overflow: hidden;