Next pass 2.0

assets/css/components/global.css

@@ -151,6 +151,8 @@ b,
 strong {
     font-weight: bold;
 }
+i,
+em,
 dfn {
     font-style: italic;
 }
@@ -180,6 +182,9 @@ img {
 svg:not(:root) {
     overflow: hidden;
 }
+mark {
+    background-color: #fdffb6;
+}
 code,
 kbd,
 pre,
@@ -297,12 +302,14 @@ body {
 }
 
 hr {
+    position: relative;
     display: block;
-    margin: 2em 0;
+    width: 100%;
+    margin: 2.5em 0 3.5em;
     padding: 0;
     height: 1px;
     border: 0;
-    border-top: 1px solid var(--whitegrey);
+    border-top: 1px solid color(var(--lightgrey) l(+10%));
 }
 
 audio,
@@ -334,7 +341,8 @@ blockquote {
 
 ol,
 ul {
-    padding-left: 2.5em;
+    padding-left: 1em;
+    padding-right: 1.5em;
 }
 
 ol ol,
@@ -342,7 +350,6 @@ ul ul,
 ul ol,
 ol ul {
     margin: 0.5em 0 1em;
-    padding-left: 2em;
 }
 
 ul {
@@ -355,6 +362,7 @@ ol {
 
 li {
     margin: 0.5em 0;
+    padding-left: 0.5em;
     line-height: 1.6em;
 }
 
@@ -436,7 +444,7 @@ h1 {
 
 h2 {
     margin: 1.5em 0 0.5em 0;
-    font-size: 1.8rem;
+    font-size: 2rem;
 }
 @media (max-width: 500px) {
     h2 {

assets/css/screen.css

@@ -300,6 +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;
+    min-height: 300px;
     margin: 0 20px 40px;
     background: #fff center center;
     background-size: cover;
@@ -337,6 +338,17 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     text-decoration: none;
 }
 
+.post-card-tags {
+    display: block;
+    margin-bottom: 4px;
+    color: var(--midgrey);
+    text-transform: uppercase;
+    font-size: 1.2rem;
+    line-height: 1.15em;
+    letter-spacing: 0.5px;
+    font-weight: 500;
+}
+
 .post-card-title {
     margin-top: 0;
 }
@@ -406,11 +418,11 @@ The first (most recent) post in the list is styled to be bigger than the others
     }
 
     .home-template .post-feed .post-card:nth-child(6n+1) .post-card-content-link {
-        padding: 30px 30px 0;
+        padding: 30px 40px 0;
     }
 
     .home-template .post-feed .post-card:nth-child(6n+1) .post-card-meta {
-        padding: 0 30px 30px;
+        padding: 0 40px 30px;
     }
 
     /* Special Styling for Subscribe box
@@ -470,7 +482,7 @@ The first (most recent) post in the list is styled to be bigger than the others
 }
 
 .post-full-title {
-    color: var(--darkgrey);
+    color: color(var(--darkgrey) l(-5%));
 }
 
 .date-divider {
@@ -556,7 +568,17 @@ The first (most recent) post in the list is styled to be bigger than the others
     max-width: 920px;
 }
 
-.post-full-content p {
+.post-full-content p,
+.post-full-content ul,
+.post-full-content ol,
+.post-full-content dl,
+.post-full-content pre,
+.post-full-content h1,
+.post-full-content h2,
+.post-full-content h3,
+.post-full-content h4,
+.post-full-content h5,
+.post-full-content h6 {
     min-width: 100%;
 }
 
@@ -575,6 +597,11 @@ The first (most recent) post in the list is styled to be bigger than the others
     text-decoration: none;
 }
 
+.post-full-content strong,
+.post-full-content em {
+    color: color(var(--darkgrey) l(-5%));
+}
+
 .post-full-content img {
     width: 100vw;
     max-width: 1040px;
@@ -618,32 +645,126 @@ Super neat trick courtesy of @JoelDrapper
     padding-top: 0;
 }
 
+.post-full-content code {
+    padding: 0 5px 2px;
+    font-size: 0.8em;
+    line-height: 1em;
+    font-weight: 400!important;
+    background: var(--whitegrey);
+    border-radius: 3px;
+}
+
+.post-full-content pre {
+    margin: 1.5em 0 3em;
+    padding: 20px;
+    border: color(var(--darkgrey) l(-10%)) 1px solid;
+    font-size: 1.4rem;
+    line-height: 1.5em;
+    color: var(--whitegrey);
+    background: color(var(--darkgrey) l(-3%));
+    border-radius: 5px;
+    overflow-x: auto;
+    max-width: 100%;
+}
+
+.post-full-content pre code {
+    padding: 0;
+    font-size: inherit;
+    line-height: inherit;
+    background: transparent;
+}
+
 .post-full-content .fluid-width-video-wrapper {
     margin: 1.5em 0 3em;
 }
 
+.post-full-content hr:after {
+    display: block;
+    content: "";
+    position: absolute;
+    top: -15px;
+    left: 50%;
+    margin-left: -10px;
+    height: 30px;
+    width: 1px;
+    background: color(var(--lightgrey) l(+10%));
+    box-shadow: #fff 0 0 0 5px;
+    transform: rotate(45deg);
+}
+
+.post-full-content h1,
+.post-full-content h2,
+.post-full-content h3,
+.post-full-content h4,
+.post-full-content h5,
+.post-full-content h6 {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    color: color(var(--darkgrey) l(-5%));
+}
+
+.post-full-content h1 {
+    font-size: 5rem;
+}
+@media (max-width: 500px) {
+    .post-full-content h1 {
+        font-size: 2.2rem;
+    }
+}
+
+.post-full-content h2 {
+    font-size: 3.5rem;
+}
+@media (max-width: 500px) {
+    .post-full-content h2 {
+        font-size: 2.9rem;
+    }
+}
+
+.post-full-content h3 {
+    font-size: 2.5rem;
+}
+@media (max-width: 500px) {
+    .post-full-content h3 {
+        font-size: 2rem;
+    }
+}
+
+.post-full-content h4 {
+    font-size: 1.6rem;
+}
+
+.post-full-content h5 {
+    font-size: 1.4rem;
+}
+
+.post-full-content h6 {
+    font-size: 1.4rem;
+}
+
 
 /* Subscribe Form
 /* ---------------------------------------------------------- */
 
 .subscribe-form {
     margin: 1.5em 0;
-    padding: 6vw 0 6.5vw;
+    padding: 6.5vw 7vw 7vw;
+    border: color(var(--whitegrey) l(+2%)) 1px solid;
     text-align: center;
     background: color(var(--whitegrey) l(+4%));
-    border-radius: 5px;
+    border-radius: 7px;
 }
 
 .subscribe-form-title {
     margin: 0 0 3px 0;
     padding: 0;
-    font-size: 3.2rem;
+    font-size: 3.5rem;
     line-height: 1;
     font-weight: 700;
     color: var(--darkgrey)
 }
 
 .subscribe-form p {
+    margin-bottom: 1em;
     font-size: 2.2rem;
     line-height: 1.55em;
     letter-spacing: 0.2px;
@@ -816,6 +937,7 @@ Super neat trick courtesy of @JoelDrapper
     line-height: 1.2em;
     font-weight: 200;
     letter-spacing: 1px;
+    color: #fff;
 }
 
 .read-next-card-content {

default.hbs

@@ -41,29 +41,14 @@
     </div>
 
     {{!-- jQuery + Fitvids, which makes all video embeds responsive --}}
-    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
+    <script
+  src="//code.jquery.com/jquery-3.2.1.slim.min.js"
+  integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
+  crossorigin="anonymous"></script>
     <script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script>
-    <script>
 
-    // TODO: Only include this on post.hbs - preferably put in floating-header.hbs and pass up to ghost_foot via block helper or similar.
+    {{!-- The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. --}}
-    $(function() {
+    {{{block "scripts"}}}
-        var $postContent = $(".post-full-content");
-        $postContent.fitVids();
-
-        $(window).scroll(function() {
-            var header = $(".floating-header");
-            var title = $(".post-full-title");
-            var trigger = title.offset().top;
-            var scroll = $(window).scrollTop();
-
-            if (scroll >= trigger + title.height() + 35 ) {
-                header.addClass("floating-active");
-            } else {
-                header.removeClass("floating-active");
-            }
-        });
-    });
-    </script>
 
     {{!-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag --}}
     {{ghost_foot}}

partials/loop.hbs

@@ -15,6 +15,9 @@
         <div class="post-card-content">
             <a class="post-card-content-link" href="{{url}}">
                 <header class="post-card-header">
+                    {{#if tags}}
+                        <span class="post-card-tags">{{tags.[0].name}}</span>
+                    {{/if}}
                     <h2 class="post-card-title">{{title}}</h2>
                 </header>
                 <section class="post-card-excerpt">
@@ -26,9 +29,6 @@
                     <img class="author-profile-image" src="{{author.profile_image}}" alt="{{author.name}}" nopin="nopin" />
                 {{/if}}
                 <span class="post-card-author">{{author}}</span>
-                {{#if tags}}
-                    <span class="poar-card-tags"> in <a href="{{@blog.url}}tag/{{tags.[0].slug}}">{{tags.[0].name}}</a></span>
-                {{/if}}
             </footer>
         </div>
     </article>

post.hbs

@@ -108,6 +108,7 @@ into the {body} of the default.hbs template --}}
 
             </footer>
 
+            {{!--
             <section class="post-full-comments">
                 <div id="disqus_thread"></div>
                 <script>
@@ -123,6 +124,7 @@ into the {body} of the default.hbs template --}}
                     })();
                 </script>
             </section>
+            --}}
 
         </article>
 
@@ -213,3 +215,26 @@ into the {body} of the default.hbs template --}}
 </aside>
 
 {{/post}}
+
+{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
+{{#contentFor "scripts"}}
+<script>
+$(function() {
+    var $postContent = $(".post-full-content");
+    $postContent.fitVids();
+
+    $(window).scroll(function() {
+        var header = $(".floating-header");
+        var title = $(".post-full-title");
+        var trigger = title.offset().top;
+        var scroll = $(window).scrollTop();
+
+        if (scroll >= trigger + title.height() + 35 ) {
+            header.addClass("floating-active");
+        } else {
+            header.removeClass("floating-active");
+        }
+    });
+});
+</script>
+{{/contentFor}}