Base styles

assets/css/screen.css

@@ -45,7 +45,7 @@ body {
     min-height: 100vh;
     margin: 0;
     padding: 0;
-    color: #212427;
+    color: #273033;
     font-family: var(--font-sans-serif);
     font-size: 1.5rem;
     line-height: 1.6em;
@@ -172,11 +172,11 @@ h5,
 h6 {
     margin: 0;
     line-height: 1.15em;
-    font-weight: 600;
+    font-weight: 700;
 }
 
 h1 {
-    font-size: 4.6rem;
+    font-size: 3.6rem;
     letter-spacing: -0.5px;
 }
 @media (max-width: 500px) {
@@ -186,7 +186,7 @@ h1 {
 }
 
 h2 {
-    font-size: 3.6rem;
+    font-size: 3rem;
 }
 @media (max-width: 500px) {
     h2 {
@@ -195,7 +195,7 @@ h2 {
 }
 
 h3 {
-    font-size: 3.2rem;
+    font-size: 2.8rem;
 }
 @media (max-width: 500px) {
     h3 {
@@ -215,6 +215,10 @@ h6 {
     font-size: 2.2rem;
 }
 
+strong {
+    font-weight: 600;
+}
+
 a.gh-powered,
 a.gh-powered:hover {
     display: inline-flex;
@@ -260,7 +264,7 @@ a.gh-powered svg {
 }
 
 .gh-head {
-    padding: 6vmin 4vmin;
+    padding: 6vmin 0 4vmin;
     width: 100%;
     max-width: 600px;
     margin: 0 auto;
@@ -268,22 +272,33 @@ a.gh-powered svg {
 }
 
 .gh-head a {
+    display: inline-block;
     color: currentColor;
     text-decoration: none;
+    text-transform: uppercase;
+    font-size: 1.3rem;
+    font-weight: 500;
 }
 
-.nav {
+ul.nav {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
+    margin: 1rem 0 0 0;
+    padding: 0 0 4vmin 0;
+    border-bottom: var(--color-border) 1px solid;
 }
 
-.nav a {
+ul.nav a {
     margin: 0 1vmin;
     padding: 5px;
 }
 
+ul.nav a:hover {
+    color: var(--color-primary);
+}
+
 
 /* Index
 /* ---------------------------------------------------------- */
@@ -347,13 +362,22 @@ a.gh-powered svg {
 /* ---------------------------------------------------------- */
 
 .gh-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     padding: 0 0 8vmin 0;
     text-align: center;
 }
 
+.gh-feature-image {
+    width: 100%;
+    max-width: 800px;
+    margin: 4vmin auto 0;
+}
+
 .gh-post-meta {
     display: block;
-    margin: 1rem 0 0;
+    margin: 0.5rem 0 0;
     font-size: 1.3rem;
     letter-spacing: 0.5px;
     text-transform: uppercase;
@@ -361,25 +385,6 @@ a.gh-powered svg {
     font-weight: 500;
 }
 
-.gh-post-meta a {
-    text-decoration: none;
-    color: var(--color-grey);
-}
-
-.gh-post-meta a:hover {
-    color: var(--color-primary);
-}
-
-.gh-feature-image {
-    grid-column: wide-start / wide-end;
-    width: 100%;
-    margin: 8vmin 0 0;
-}
-
-.gh-post-footer {
-    margin: 2rem 0;
-}
-
 
 /* Content
 /* ---------------------------------------------------------- */
@@ -461,10 +466,9 @@ a.gh-powered svg {
 .gh-content > ul,
 .gh-content > dl,
 .gh-content > p {
-    font-family: var(--font-serif);
+    font-weight: 300;
-    font-weight: 400;
+    font-size: 1.7rem;
-    font-size: 1.8rem;
+    line-height: 1.55em;
-    line-height: 1.6em;
     -webkit-font-smoothing: auto;
     -moz-osx-font-smoothing: auto;
 }
@@ -504,7 +508,7 @@ a.gh-powered svg {
     .gh-content ul,
     .gh-content dl,
     .gh-content p {
-        font-size: 1.8rem;
+        font-size: 1.6rem;
     }
 
     .gh-content blockquote::before {
@@ -745,24 +749,10 @@ a.gh-powered svg {
 /* ---------------------------------------------------------- */
 
 .page-footer {
-    padding: 60px 5vmin;
+    width: 100%;
-    margin: 60px auto 0;
+    max-width: 600px;
+    padding: 6vmin 4vmin 6vmin;
+    margin: 6vmin auto 0;
+    border-top: var(--color-border) 1px solid;
     text-align: center;
-    background-color: #f8f8f8;
-}
-
-.page-footer h3 {
-    margin: 0.5rem 0 0 0;
-}
-
-.page-footer p {
-    max-width: 500px;
-    margin: 1rem auto 1.5rem;
-    font-size: 1.7rem;
-    line-height: 1.5em;
-    color: rgba(0,0,0,0.6);
-}
-
-.page-footer .gh-powered {
-    margin-top: 30px;
 }

default.hbs

@@ -15,8 +15,8 @@
 
 <header class="gh-head">
     <a href="{{@site.url}}">
-    {{#if @site.icon}}
+    {{#if @site.logo}}
-        <img class="site-icon" src="{{img_url @site.icon absolute="true"}}" width="50" height="50" alt="{{@site.title}}" />
+        <img class="site-logo" src="{{img_url @site.logo absolute="true"}}" height="50" alt="{{@site.title}}" />
     {{else}}
         <h2>{{@site.title}}</h2>
     {{/if}}
@@ -29,14 +29,6 @@
 </main>
 
 <footer class="page-footer">
-    {{#if @site.icon}}
-    <img class="site-icon" src="{{img_url @site.icon absolute="true"}}" width="50" height="50" alt="{{@site.title}}" />
-    {{/if}}
-    <h3>{{@site.title}}</h3>
-    {{#if @site.description}}
-    <p>{{@site.description}}</p>
-    {{/if}}
-    <p><a href="{{@site.url}}">Read more posts →</a></p>
     <a class="gh-powered" href="https://ghost.org" target="_blank" rel="noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156 156"><g fill="none" fill-rule="evenodd"><rect fill="#15212B" width="156" height="156" rx="27"></rect><g transform="translate(36 36)" fill="#F6F8FA"><path d="M0 71.007A4.004 4.004 0 014 67h26a4 4 0 014 4.007v8.986A4.004 4.004 0 0130 84H4a4 4 0 01-4-4.007v-8.986zM50 71.007A4.004 4.004 0 0154 67h26a4 4 0 014 4.007v8.986A4.004 4.004 0 0180 84H54a4 4 0 01-4-4.007v-8.986z"></path><rect y="34" width="84" height="17" rx="4"></rect><path d="M0 4.007A4.007 4.007 0 014.007 0h41.986A4.003 4.003 0 0150 4.007v8.986A4.007 4.007 0 0145.993 17H4.007A4.003 4.003 0 010 12.993V4.007z"></path><rect x="67" width="17" height="17" rx="4"></rect></g></g></svg> Publish with Ghost</a>
 </footer>
 

post.hbs

@@ -3,8 +3,21 @@
 {{#post}}
 
 <header class="gh-header">
-    <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time>
     <h1>{{title}}</h1>
+    <div class="gh-post-meta">
+        {{primary_author.name}} - <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time>
+    </div>
+    {{#if feature_image}}
+    <img class="gh-feature-image"
+        srcset="{{img_url feature_image size="s"}} 300w,
+                {{img_url feature_image size="m"}} 600w,
+                {{img_url feature_image size="l"}} 1000w,
+                {{img_url feature_image size="xl"}} 2000w"
+        sizes="(min-width: 2000px) 2000px"
+        src="{{img_url feature_image size="xl"}}"
+        alt="{{title}}"
+    />
+    {{/if}}
 </header>
 
 <section class="gh-content">