@moreonion/foundist 3.4.0-beta → 3.4.1

package/src/html/basic-action-page.html

@@ -1,4 +1,6 @@
-{% extends "src/html/templates/action-page.html" %}
+{% import "_globals.html" as settings %}
+
+{% extends settings.html_path + "/templates/action-page.html" %}
 
 {% set layout = "default" %}
 
@@ -14,20 +16,20 @@
 {% endblock %}
 
 {% block progress_bar %}
-    {% include "src/html/includes/pgbar.html" %}
+    {% include settings.html_path + "/includes/pgbar.html" %}
 {% endblock %}
 
 {% block form %}
-    {% include "src/html/includes/basic-form.html" %}
+    {% include settings.html_path + "/includes/basic-form.html" %}
 {% endblock %}
 
 {% block recent_supporters %}
-    {% include "src/html/includes/recent-supporters.html" %}
+    {% include settings.html_path + "/includes/recent-supporters.html" %}
 {% endblock %}
 
 {% block content_top %}
     <div class="media-stretch">
-        <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
+        <img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
     </div>
 {% endblock %}
 

package/src/html/donation-action-page.html

@@ -1,4 +1,6 @@
-{% extends "src/html/templates/action-page.html" %}
+{% import "_globals.html" as settings %}
+
+{% extends settings.html_path + "/templates/action-page.html" %}
 
 {% set layout = "default" %}
 
@@ -14,16 +16,16 @@
 {% endblock %}
 
 {% block progress_bar %}
-    {% include "src/html/includes/pgbar-thermometer.html" %}
+    {% include settings.html_path + "/includes/pgbar-thermometer.html" %}
 {% endblock %}
 
 {% block form %}
-    {% include "src/html/includes/donate-form.html" %}
+    {% include settings.html_path + "/includes/donate-form.html" %}
 {% endblock %}
 
 {% block content_top %}
     <div class="media-stretch">
-        <img src="http://placekitten.com/860/460" alt="test image with cats" crossorigin="">
+        <img src="https://loremflickr.com/860/460/cat" alt="test image with cats" crossorigin="">
     </div>
 {% endblock %}
 

package/src/html/e2t-action-page.html

@@ -1,4 +1,6 @@
-{% extends "src/html/templates/action-page.html" %}
+{% import "_globals.html" as settings %}
+
+{% extends settings.html_path + "/templates/action-page.html" %}
 
 {% set layout = "default" %}
 
@@ -14,21 +16,21 @@
 {% endblock %}
 
 {% block form %}
-    {% include "src/html/includes/e2t-single-form.html" %}
+    {% include settings.html_path + "/includes/e2t-single-form.html" %}
 {% endblock %}
 
 {% block recent_supporters %}
-    {% include "src/html/includes/recent-supporters-comments.html" %}
+    {% include settings.html_path + "/includes/recent-supporters-comments.html" %}
 {% endblock %}
 
 {% block content_top %}
     <div class="media-stretch">
-        <img src="http://placekitten.com/860/460" alt="test image with cats" crossorigin="">
+        <img src="https://loremflickr.com/860/460/cat" alt="test image with cats" crossorigin="">
     </div>
 {% endblock %}
 
 {% block content %}
     <h2>Cougar British shorthair turkish angora</h2>
     <p>Twitch tail in permanent irritation attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? Get my claw stuck in the dog's ear. Lick plastic bags ask to go outside and ask to come inside and ask to go outside and ask to come inside hell is other people, ignore the squirrels, you'll never catch them anyway or walk on car leaving trail of paw prints on hood and windshield.</p>
-    {% include "src/html/includes/letter.html" %}
+    {% include settings.html_path + "/includes/letter.html" %}
 {% endblock %}

package/src/html/includes/language-switcher.html

@@ -1,5 +1,4 @@
-<!-- linthtml-configure attr-req-value="false" -->
-<nav>
+<nav aria-label="Switch locales">
     <ul class="dropdown menu" data-dropdown-menu="true" data-disable-hover="true" data-click-open="true">
         <li>
             <a href="#">English</a>

package/src/html/includes/letter.html

@@ -6,7 +6,7 @@
     <p>Yours,</p>
     <ul class="signatures">
         <li>
-            <span class="signature-image"><img src="http://placekitten.com/100/100" alt="portrait of a cat" crossorigin=""></span>
+            <span class="signature-image"><img src="https://loremflickr.com/100/100/cat,portrait/all" alt="portrait of a cat" crossorigin=""></span>
             <span class="signature-name">Kitty</span>
             <span class="signature-description">the cat</span>
         </li>

package/src/html/includes/menu-responsive.html

@@ -0,0 +1,17 @@
+<button type="button"
+        class="mobile-menu-toggle"
+        data-toggle="mobile-menu"
+        aria-hidden="true"
+        tabindex="-1"><span class="menu-icon"></span>
+</button>
+<div id="mobile-menu" class="mobile-menu" data-toggler="open">
+    {% include "./menu.html" %}
+    {% include "./language-switcher.html" %}
+    <button type="button"
+            class="close-button large"
+            data-toggle="mobile-menu"
+            aria-hidden="true"
+            tabindex="-1"
+            onclick="event.target.blur();">
+    </button>
+</div>

package/src/html/includes/menu.html

@@ -1,5 +1,7 @@
-<ul class="menu">
-    <li><a href="#">About cats</a></li>
-    <li><a href="#">Meouw</a></li>
-    <li><a href="#">Another link</a></li>
-</ul>
+<nav aria-label="Main menu">
+    <ul class="menu">
+        <li class="is-active"><a href="#">About cats</a></li>
+        <li><a href="#">Meouw</a></li>
+        <li><a href="#">Another link</a></li>
+    </ul>
+</nav>

package/src/html/includes/section-1col.html

@@ -1,6 +1,6 @@
 <section>
     <div class="background">
-        <img src="http://placekitten.com/1600/1000" alt="test image with cats" crossorigin="">
+        <img src="https://loremflickr.com/1600/1000/cat" alt="test image with cats" crossorigin="">
     </div>
     <div class="grid-container narrow">
         <blockquote>

package/src/html/includes/section-2col.html

@@ -1,7 +1,7 @@
 <section>
     <div class="grid-container">
         <div class="column media-stretch">
-            <img src="http://placekitten.com/600/400" alt="test image with cats" crossorigin="">
+            <img src="https://loremflickr.com/600/400/cat" alt="test image with cats" crossorigin="">
         </div>
         <div class="column">
             <h2>What's your problem?</h2>

package/src/html/includes/section-quote.html

@@ -1,7 +1,7 @@
 <section class="blockquote-section">
     <div class="grid-container">
         <div class="column blockquote-image">
-            <img src="http://placekitten.com/500/500" alt="test image with cats" crossorigin="">
+            <img src="https://loremflickr.com/500/500/cat" alt="test image with cats" crossorigin="">
         </div>
         <div class="column">
             <blockquote>

package/src/html/includes/section-slideshow.html

@@ -1,8 +1,8 @@
 {% macro img_slide(width, height) %}
     <li>
         <img
-            src="http://placekitten.com/{{ width|default([480, 640, 880, 1280]|random) }}/{{ height|default([480, 640, 880]|random) }}"
-            alt="test image with cats"
+            src="https://loremflickr.com/{{ width|default([480, 640, 880, 1280]|random) }}/{{ height|default([480, 640, 880]|random) }}/animal"
+            alt="test image with random animal"
             crossorigin=""
         >
     </li>
@@ -12,7 +12,7 @@
     <li>
         <div class="card">
             <div class="card-image">
-                <img src="http://placekitten.com/480/270" alt="test image with cats" crossorigin="">
+                <img src="https://loremflickr.com/480/270/cat" alt="test image with cats" crossorigin="">
             </div>
             <div class="card-section">
                 <p>{{ caption }}</p>

package/src/html/includes/teasers.html

@@ -1,7 +1,7 @@
 {% macro teaser(title) %}
     <article class="card">
         <div class="card-image">
-            <img src="http://placekitten.com/480/270" alt="test image with cats" crossorigin="">
+            <img src="https://loremflickr.com/480/270/cat" alt="test image with cats" crossorigin="">
         </div>
         <div class="card-section">
             <div class="progress-wrapper" data-pgbar-current="140" data-pgbar-target="200">

package/src/html/index.html

@@ -0,0 +1,58 @@
+{% extends "./templates/page.html" %}
+
+{% block page_title %}{{ settings.site_name }}{% endblock %}
+
+{% block content %}
+    <p>Documentation for <a href="https://get.foundation/sites/docs/">Foundation</a></p>
+    <h2>Example pages</h2>
+    <ul class="no-bullet">
+        <li><a href="{{ settings.html_path }}/basic-action-page.html">Basic action page</a></li>
+        <li><a href="{{ settings.html_path }}/e2t-action-page.html">Email to target page</a></li>
+        <li><a href="{{ settings.html_path }}/donation-action-page.html">Donation page</a></li>
+        <li><a href="{{ settings.html_path }}/signup-action-page.html">Sign up page</a></li>
+        <li><a href="{{ settings.html_path }}/thank-you-page.html">Thank you page</a></li>
+        <li><a href="{{ settings.html_path }}/thank-you-page.html#overlay">Thank you page with overlay</a></li>
+        <li><a href="{{ settings.html_path }}/login-page.html">Login page</a></li>
+        <li><a href="{{ settings.html_path }}/teaser-page.html">Teasers</a></li>
+        <li><a href="{{ settings.html_path }}/basic-action-page-with-callouts.html">Basic action page with callout messages</a></li>
+        <li><a href="{{ settings.html_path }}/typography-static-page.html">Typographic elements</a></li>
+        <li><a href="{{ settings.html_path }}/snippets-demo.html">Snippets demo</a></li>
+    </ul>
+    <h3>Layout variations</h3>
+    <h4 class="h6">A: Standard (2 columns) &ensp;<small>default</small></h4>
+    <ul class="no-bullet">
+        <li><a href="{{ settings.html_path }}/basic-action-page.html">Basic action page</a></li>
+        <li><a href="{{ settings.html_path }}/basic-action-page-reversed.html">Basic action page reversed</a></li>
+        <li><a href="{{ settings.html_path }}/thank-you-page.html">Thank you page</a></li>
+    </ul>
+    <h4 class="h6">B: Banner image (2 columns) &ensp;<small>banner</small></h4>
+    <ul class="no-bullet">
+        <li><a href="{{ settings.html_path }}/basic-action-page-with-banner.html">Basic action page</a></li>
+        <li><a href="{{ settings.html_path }}/basic-action-page-with-banner-and-headline.html">Basic action page with headline and bottom sections</a></li>
+        <li><a href="{{ settings.html_path }}/basic-action-page-with-banner-reversed.html">Basic action page reversed</a></li>
+        <li><a href="{{ settings.html_path }}/thank-you-page-with-banner.html">Thank you page</a></li>
+        <li><a href="{{ settings.html_path }}/thank-you-page-with-banner-and-headline.html">Thank you page with headline and bottom sections</a></li>
+    </ul>
+    <h4 class="h6">C: Fixed background image (2 columns) &ensp;<small>cover-2col</small></h4>
+    <ul class="no-bullet">
+        <li><a href="{{ settings.html_path }}/basic-action-page-cover-2col.html">Basic action page</a></li>
+        <li><a href="{{ settings.html_path }}/basic-action-page-cover-2col-with-headline.html">Basic action page with headline and bottom sections</a></li>
+        <li><a href="{{ settings.html_path }}/basic-action-page-cover-2col-reversed.html">Basic action page reversed</a></li>
+        <li><a href="{{ settings.html_path }}/thank-you-page-cover-2col.html">Thank you page</a></li>
+        <li><a href="{{ settings.html_path }}/thank-you-page-cover-2col-with-headline.html">Thank you page with headline and bottom sections</a></li>
+    </ul>
+    <h4 class="h6">D: Fixed banner image (2 columns) &ensp;<small>cover-banner</small></h4>
+    <ul class="no-bullet">
+        <li><a href="{{ settings.html_path }}/basic-action-page-cover-banner.html">Basic action page</a></li>
+        <li><a href="{{ settings.html_path }}/basic-action-page-cover-banner-with-headline.html">Basic action page with headline and bottom sections</a></li>
+        <li><a href="{{ settings.html_path }}/thank-you-page-cover-banner.html">Thank you page</a></li>
+        <li><a href="{{ settings.html_path }}/thank-you-page-cover-banner-with-headline.html">Thank you page with headline and bottom sections</a></li>
+    </ul>
+    <h4 class="h6">E: Fixed background image (1 column) &ensp;<small>cover-1col</small></h4>
+    <ul class="no-bullet">
+        <li><a href="{{ settings.html_path }}/basic-action-page-cover-1col.html">Basic action page</a></li>
+        <li><a href="{{ settings.html_path }}/basic-action-page-cover-1col-with-headline.html">Basic action page with headline and bottom sections</a></li>
+        <li><a href="{{ settings.html_path }}/thank-you-page-cover-1col.html">Thank you page</a></li>
+        <li><a href="{{ settings.html_path }}/thank-you-page-cover-1col-with-headline.html">Thank you page with headline and bottom sections</a></li>
+    </ul>
+{% endblock %}

package/src/html/login-page.html

@@ -1,7 +1,9 @@
-{% extends "src/html/templates/page.html" %}
+{% import "_globals.html" as settings %}
+
+{% extends settings.html_path + "/templates/page.html" %}
 
 {% block page_title %}User account{% endblock %}
 
 {% block content %}
-    {% include "src/html/includes/login-form.html" %}
+    {% include settings.html_path + "/includes/login-form.html" %}
 {% endblock %}

package/src/html/signup-action-page.html

@@ -1,4 +1,6 @@
-{% extends "src/html/templates/action-page.html" %}
+{% import "_globals.html" as settings %}
+
+{% extends settings.html_path + "/templates/action-page.html" %}
 
 {% set layout = "default" %}
 
@@ -14,16 +16,16 @@
 {% endblock %}
 
 {% block progress_bar %}
-    {% include "src/html/includes/pgbar.html" %}
+    {% include settings.html_path + "/includes/pgbar.html" %}
 {% endblock %}
 
 {% block form %}
-    {% include "src/html/includes/signup-form.html" %}
+    {% include settings.html_path + "/includes/signup-form.html" %}
 {% endblock %}
 
 {% block content_top %}
     <div class="media-stretch">
-        <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
+        <img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
     </div>
 {% endblock %}
 

package/src/html/snippets-demo.html

@@ -1,24 +1,30 @@
-{% extends "src/html/templates/page.html" %}
+{% import "_globals.html" as settings %}
+
+{% extends settings.html_path + "/templates/page.html" %}
 
 {% block page_title %}Snippets demo{% endblock %}
 
+{% block header %}
+    {% include settings.html_path + "/includes/menu-responsive.html" %}
+{% endblock %}
+
 {% block content %}
     <h2>Accordion</h2>
-    {% include "src/html/includes/accordion.html" %}
+    {% include settings.html_path + "/includes/accordion.html" %}
 
     <h2>Toggle element</h2>
-    {% include "src/html/includes/toggle-element-show-more.html" %}
-    {% include "src/html/includes/toggle-element-toggle.html" %}
+    {% include settings.html_path + "/includes/toggle-element-show-more.html" %}
+    {% include settings.html_path + "/includes/toggle-element-toggle.html" %}
 {% endblock %}
 
 {% block content_bottom %}
-    {% include "src/html/includes/cookiebar.html" %}
+    {% include settings.html_path + "/includes/cookiebar.html" %}
 {% endblock %}
 
 {% block bottom %}
-    {% include "src/html/includes/section-slideshow.html" %}
+    {% include settings.html_path + "/includes/section-slideshow.html" %}
 {% endblock %}
 
 {% block footer %}
-    {% include "src/html/includes/menu.html" %}
+    {% include settings.html_path + "/includes/menu.html" %}
 {% endblock %}

package/src/html/teaser-page.html

@@ -1,10 +1,12 @@
-{% extends "src/html/templates/page.html" %}
+{% import "_globals.html" as settings %}
+
+{% extends settings.html_path + "/templates/page.html" %}
 
 {% block page_title %}Our latest actions and donation asks{% endblock %}
 
 {% block main_container_class %}{% endblock %}
 
 {% block content_bottom %}
-    {% include "src/html/includes/teasers.html" %}
-    {% include "src/html/includes/pagination.html" %}
+    {% include settings.html_path + "/includes/teasers.html" %}
+    {% include settings.html_path + "/includes/pagination.html" %}
 {% endblock %}

package/src/html/templates/action-page-cover-banner.html

@@ -8,7 +8,7 @@
     <div class="grid-container with-sidebar">
         <header id="headline">{% block headline %}{% endblock %}</header>
         <div id="form-wrapper" class="flex-container align-middle">
-            <div id="form-outer">
+            <div id="form-outer" class="flex-child-auto">
                 <div class="intro">{% block form_intro %}{% endblock %}</div>
                 {% block progress_bar %}{% endblock %}
                 {% block form %}{% endblock %}

package/src/html/templates/action-page-reversed.html

@@ -7,7 +7,7 @@
 {% block sidebar_bottom %}
     <div id="sidebar">
         <div id="form-wrapper" class="flex-container align-middle">
-            <div id="form-outer">
+            <div id="form-outer" class="flex-child-auto">
                 <div class="intro">{% block form_intro %}{% endblock %}</div>
                 {% block progress_bar %}{% endblock %}
                 {% block form %}{% endblock %}

package/src/html/templates/action-page.html

@@ -5,13 +5,13 @@
 {% block main_container_class %}with-sidebar{% endblock %}
 
 {% block header %}
-    {% include "src/html/includes/language-switcher.html" %}
+    {% include "../includes/language-switcher.html" %}
 {% endblock %}
 
 {% block sidebar %}
     <div id="sidebar">
         <div id="form-wrapper" class="flex-container align-middle">
-            <div id="form-outer">
+            <div id="form-outer" class="flex-child-auto">
                 <div class="intro">{% block form_intro %}{% endblock %}</div>
                 {% block progress_bar %}{% endblock %}
                 {% block form %}{% endblock %}

package/src/html/templates/page.html

@@ -4,6 +4,9 @@
     <div id="page" class="{% block page_class %}default-layout{% endblock %}">
 
         <section id="header">
+            <div class="skip-link grid-container">
+                <a class="show-on-focus small" href="#main">Skip to main content</a>
+            </div>
             <div class="top-bar grid-container">
                 <div class="top-bar-left">
                     {% block logo %}

package/src/html/thank-you-page-cover-1col-with-headline.html

@@ -1,4 +1,6 @@
-{% extends "src/html/templates/share-page.html" %}
+{% import "_globals.html" as settings %}
+
+{% extends settings.html_path + "/templates/share-page.html" %}
 
 {% set layout = "cover-1col" %}
 
@@ -7,7 +9,7 @@
 {% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
 
 {% block background %}
-    <img src="http://placekitten.com/1600/735" alt="test image with cats" crossorigin="">
+    <img src="https://loremflickr.com/1600/735/cat" alt="test image with cats" crossorigin="">
 {% endblock %}
 
 {% block headline %}
@@ -19,16 +21,16 @@
 {% endblock %}
 
 {% block content_bottom %}
-    {% include "src/html/includes/share-buttons.html" %}
+    {% include settings.html_path + "/includes/share-buttons.html" %}
 {% endblock %}
 
 {% block bottom %}
-    {% include "src/html/includes/section-2col.html" %}
-    {% include "src/html/includes/section-2col.html" %}
-    {% include "src/html/includes/section-quote.html" %}
-    {% include "src/html/includes/section-1col.html" %}
+    {% include settings.html_path + "/includes/section-2col.html" %}
+    {% include settings.html_path + "/includes/section-2col.html" %}
+    {% include settings.html_path + "/includes/section-quote.html" %}
+    {% include settings.html_path + "/includes/section-1col.html" %}
 {% endblock %}
 
 {% block footer %}
-    {% include "src/html/includes/menu.html" %}
+    {% include settings.html_path + "/includes/menu.html" %}
 {% endblock %}

package/src/html/thank-you-page-cover-1col.html

@@ -1,11 +1,13 @@
-{% extends "src/html/templates/share-page.html" %}
+{% import "_globals.html" as settings %}
+
+{% extends settings.html_path + "/templates/share-page.html" %}
 
 {% set layout = "cover-1col" %}
 
 {% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
 
 {% block background %}
-    <img src="http://placekitten.com/1600/735" alt="test image with cats" crossorigin="">
+    <img src="https://loremflickr.com/1600/735/cat" alt="test image with cats" crossorigin="">
 {% endblock %}
 
 {% block content %}
@@ -13,9 +15,9 @@
 {% endblock %}
 
 {% block content_bottom %}
-    {% include "src/html/includes/share-buttons.html" %}
+    {% include settings.html_path + "/includes/share-buttons.html" %}
 {% endblock %}
 
 {% block footer %}
-    {% include "src/html/includes/menu.html" %}
+    {% include settings.html_path + "/includes/menu.html" %}
 {% endblock %}

package/src/html/thank-you-page-cover-2col-with-headline.html

@@ -1,4 +1,6 @@
-{% extends "src/html/templates/action-page.html" %}
+{% import "_globals.html" as settings %}
+
+{% extends settings.html_path + "/templates/action-page.html" %}
 
 {% set layout = "cover-2col" %}
 
@@ -7,7 +9,7 @@
 {% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
 
 {% block background %}
-    <img src="http://placekitten.com/1600/800" alt="test image with cats" crossorigin="">
+    <img src="https://loremflickr.com/1600/800/cat" alt="test image with cats" crossorigin="">
 {% endblock %}
 
 {% block headline %}
@@ -19,20 +21,20 @@
 {% endblock %}
 
 {% block form %}
-    {% include "src/html/includes/share-buttons.html" %}
+    {% include settings.html_path + "/includes/share-buttons.html" %}
 {% endblock %}
 
 {% block recent_supporters %}
-    {% include "src/html/includes/recent-supporters.html" %}
+    {% include settings.html_path + "/includes/recent-supporters.html" %}
 {% endblock %}
 
 {% block bottom %}
-    {% include "src/html/includes/section-2col.html" %}
-    {% include "src/html/includes/section-2col.html" %}
-    {% include "src/html/includes/section-quote.html" %}
-    {% include "src/html/includes/section-1col.html" %}
+    {% include settings.html_path + "/includes/section-2col.html" %}
+    {% include settings.html_path + "/includes/section-2col.html" %}
+    {% include settings.html_path + "/includes/section-quote.html" %}
+    {% include settings.html_path + "/includes/section-1col.html" %}
 {% endblock %}
 
 {% block footer %}
-    {% include "src/html/includes/menu.html" %}
+    {% include settings.html_path + "/includes/menu.html" %}
 {% endblock %}

package/src/html/thank-you-page-cover-2col.html

@@ -1,11 +1,13 @@
-{% extends "src/html/templates/action-page.html" %}
+{% import "_globals.html" as settings %}
+
+{% extends settings.html_path + "/templates/action-page.html" %}
 
 {% set layout = "cover-2col" %}
 
 {% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
 
 {% block background %}
-    <img src="http://placekitten.com/1600/800" alt="test image with cats" crossorigin="">
+    <img src="https://loremflickr.com/1600/800/cat" alt="test image with cats" crossorigin="">
 {% endblock %}
 
 {% block content %}
@@ -13,13 +15,13 @@
 {% endblock %}
 
 {% block form %}
-    {% include "src/html/includes/share-buttons.html" %}
+    {% include settings.html_path + "/includes/share-buttons.html" %}
 {% endblock %}
 
 {% block recent_supporters %}
-    {% include "src/html/includes/recent-supporters.html" %}
+    {% include settings.html_path + "/includes/recent-supporters.html" %}
 {% endblock %}
 
 {% block footer %}
-    {% include "src/html/includes/menu.html" %}
+    {% include settings.html_path + "/includes/menu.html" %}
 {% endblock %}

package/src/html/thank-you-page-cover-banner-with-headline.html

@@ -1,4 +1,6 @@
-{% extends "src/html/templates/share-page.html" %}
+{% import "_globals.html" as settings %}
+
+{% extends settings.html_path + "/templates/share-page.html" %}
 
 {% set layout = "cover-banner" %}
 
@@ -7,7 +9,7 @@
 {% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
 
 {% block background %}
-    <img src="http://placekitten.com/1600/735" alt="test image with cats" crossorigin="">
+    <img src="https://loremflickr.com/1600/735/cat" alt="test image with cats" crossorigin="">
 {% endblock %}
 
 {% block headline %}
@@ -19,16 +21,16 @@
 {% endblock %}
 
 {% block content_bottom %}
-    {% include "src/html/includes/share-buttons.html" %}
+    {% include settings.html_path + "/includes/share-buttons.html" %}
 {% endblock %}
 
 {% block bottom %}
-    {% include "src/html/includes/section-2col.html" %}
-    {% include "src/html/includes/section-2col.html" %}
-    {% include "src/html/includes/section-quote.html" %}
-    {% include "src/html/includes/section-1col.html" %}
+    {% include settings.html_path + "/includes/section-2col.html" %}
+    {% include settings.html_path + "/includes/section-2col.html" %}
+    {% include settings.html_path + "/includes/section-quote.html" %}
+    {% include settings.html_path + "/includes/section-1col.html" %}
 {% endblock %}
 
 {% block footer %}
-    {% include "src/html/includes/menu.html" %}
+    {% include settings.html_path + "/includes/menu.html" %}
 {% endblock %}

package/src/html/thank-you-page-cover-banner.html

@@ -1,11 +1,13 @@
-{% extends "src/html/templates/share-page.html" %}
+{% import "_globals.html" as settings %}
+
+{% extends settings.html_path + "/templates/share-page.html" %}
 
 {% set layout = "cover-banner" %}
 
 {% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
 
 {% block background %}
-    <img src="http://placekitten.com/1600/735" alt="test image with cats" crossorigin="">
+    <img src="https://loremflickr.com/1600/735/cat" alt="test image with cats" crossorigin="">
 {% endblock %}
 
 {% block content %}
@@ -13,9 +15,9 @@
 {% endblock %}
 
 {% block content_bottom %}
-    {% include "src/html/includes/share-buttons.html" %}
+    {% include settings.html_path + "/includes/share-buttons.html" %}
 {% endblock %}
 
 {% block footer %}
-    {% include "src/html/includes/menu.html" %}
+    {% include settings.html_path + "/includes/menu.html" %}
 {% endblock %}