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;
+        border-radius: 0;
-        background-size: cover;
     }
 }
 
@@ -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 {
+.post-template .kg-card-markdown > p:first-child {
-    font-size: 2.7rem;
+    font-size: 1.25em;
-    line-height: 1.55em;
+    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;
+    margin: 1.5em 0 3em;
-}
-
-
-/* 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;
 }
 
 
@@ -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;

default.hbs

@@ -31,9 +31,9 @@
                 <section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> &copy; {{date format="YYYY"}}</section>
                 <nav class="site-footer-nav">
                     <a href="{{@blog.url}}">Latest Posts</a>
-                    {{#if @blog.facebook}}<a href="{{facebook_url}}">Facebook</a>{{/if}}
+                    {{#if @blog.facebook}}<a href="{{facebook_url}}" target="_blank">Facebook</a>{{/if}}
-                    {{#if @blog.twitter}}<a href="{{twitter_url}}">Twitter</a>{{/if}}
+                    {{#if @blog.twitter}}<a href="{{twitter_url}}" target="_blank">Twitter</a>{{/if}}
-                    <a href="https://ghost.org" target="_blank">About Ghost</a>
+                    <a href="https://ghost.org" target="_blank">Ghost</a>
                 </nav>
             </div>
         </footer>

error.hbs

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>{{meta_title}}</title>
+    <meta name="HandheldFriendly" content="True" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" type="text/css" href="{{asset "assets/public/screen.css"}}" />
+</head>
+<body class="{{body_class}}">
+
+    <div class="site-wrapper">
+        ERROR
+    </div>
+
+</body>
+</html>

page.hbs

@@ -40,7 +40,7 @@ into the {body} of the default.hbs template --}}
 <main id="site-main" class="site-main outer" role="main">
     <div class="inner">
 
-        <article class="post-full {{post_class}}">
+        <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
 
             <header class="post-full-header">
                 <h1 class="post-full-title">{{title}}</h1>

post.hbs

@@ -43,7 +43,7 @@ into the {body} of the default.hbs template --}}
 <main id="site-main" class="site-main outer" role="main">
     <div class="inner">
 
-        <article class="post-full {{post_class}}">
+        <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
 
             <header class="post-full-header">
                 <section class="post-full-meta">
@@ -102,20 +102,28 @@ into the {body} of the default.hbs template --}}
                 {{/author}}
                 </section>
 
-                <section class="share">
+                <section class="post-full-tags">
-                    <h4>Share this post</h4>
+                    {{tags}}
-                    <a class="icon-twitter" href="https://twitter.com/intent/tweet?text={{encode title}}&amp;url={{url absolute="true"}}"
-                        onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
-                        <span class="hidden">Twitter</span>
-                    </a>
-                    <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
-                        onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
-                        <span class="hidden">Facebook</span>
-                    </a>
                 </section>
 
             </footer>
 
+            <section class="post-full-comments">
+                <div id="disqus_thread"></div>
+                <script>
+                    var disqus_config = function () {
+                    this.page.url = '{{url absolute="true"}}';
+                    this.page.identifier = 'ghost-{{id}}';
+                    };
+                    (function() {
+                    var d = document, s = d.createElement('script');
+                    s.src = 'https://test-apkdzgmqhj.disqus.com/embed.js';
+                    s.setAttribute('data-timestamp', +new Date());
+                    (d.head || d.body).appendChild(s);
+                    })();
+                </script>
+            </section>
+
         </article>
 
     </div>