Footer signup

assets/css/screen.css

@@ -753,12 +753,16 @@ Search                         LOGO                    Login Subscribe
 /* 10. Footer */
 
 .gh-footer {
-    padding-block: 48px;
+    margin-top: 80px;
 }
 
-.gh-footer-inner {
+/* 10.1. Footer bar */
+
+.gh-footer-bar {
     display: grid;
     grid-template-columns: 1fr auto 1fr;
+    padding-block: 40px;
+    border-block: 1px solid var(--color-border);
 }
 
 .gh-footer-menu .nav {
@@ -770,3 +774,12 @@ Search                         LOGO                    Login Subscribe
 .gh-footer-copyright {
     text-align: right;
 }
+
+/* 10.2. Footer signup */
+
+.gh-footer-signup {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-block: 100px;
+}

package.json

@@ -94,6 +94,14 @@
                 ],
                 "default": "Logo in the middle"
             },
+            "footer_signup_header": {
+                "type": "text",
+                "default": "Stay in the loop"
+            },
+            "footer_signup_subhead": {
+                "type": "text",
+                "default": "New content delivered to your inbox."
+            },
             "header_style": {
                 "type": "select",
                 "options": [

partials/components/footer.hbs

@@ -1,21 +1,31 @@
 <footer class="gh-footer gh-outer">
     <div class="gh-footer-inner gh-inner">
 
-        <span class="gh-footer-logo">
+        <div class="gh-footer-bar">
-            {{#if @site.logo}}
+            <span class="gh-footer-logo">
-                <img src="{{@site.logo}}" alt="{{@site.title}}">
+                {{#if @site.logo}}
-            {{else}}
+                    <img src="{{@site.logo}}" alt="{{@site.title}}">
-                {{@site.title}}
+                {{else}}
-            {{/if}}
+                    {{@site.title}}
-        </span>
+                {{/if}}
-
+            </span>
-        <nav class="gh-footer-menu">
+            <nav class="gh-footer-menu">
-            {{navigation type="secondary"}}
+                {{navigation type="secondary"}}
-        </nav>
+            </nav>
-
+            <div class="gh-footer-copyright">
-        <div class="gh-footer-copyright">
+                Powered by <a href="https://ghost.org/" target="_blank" rel="noopener">Ghost</a>
-            Powered by <a href="https://ghost.org/" target="_blank" rel="noopener">Ghost</a>
+            </div>
         </div>
 
+        <section class="gh-footer-signup">
+            {{#if @custom.footer_signup_header}}
+                <h2 class="gh-footer-signup-header">{{@custom.footer_signup_header}}</h2>
+            {{/if}}
+            {{#if @custom.footer_signup_subhead}}
+                <p class="gh-footer-signup-subhead">{{@custom.footer_signup_subhead}}</p>
+            {{/if}}
+            <button class="gh-button">Subscribe</button>
+        </section>
+
     </div>
 </footer>

partials/components/post-list.hbs

@@ -22,7 +22,7 @@
                     {{/if}}
                     {{#if @site.members_enabled}}
                         {{#unless @member}}
-                            <button>Subscribe</button>
+                            <button class="gh-button">Subscribe</button>
                         {{/unless}}
                     {{/if}}
                 </section>