npm - @moreonion/foundist - Versions diffs - 2.1.2 → 3.0.1 - Mend

@moreonion/foundist 2.1.2 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

package/.vscode/settings.json +16 -0
package/README.md +5 -9
package/package.json +6 -28
package/src/html/basic-action-page-cover-1col-with-headline.html +54 -0
package/src/html/basic-action-page-cover-1col.html +27 -27
package/src/html/basic-action-page-cover-2col-reversed.html +27 -27
package/src/html/basic-action-page-cover-2col-with-headline.html +54 -0
package/src/html/basic-action-page-cover-2col.html +27 -27
package/src/html/basic-action-page-cover-banner-with-headline.html +54 -0
package/src/html/basic-action-page-cover-banner.html +27 -27
package/src/html/basic-action-page-reversed.html +22 -23
package/src/html/basic-action-page-with-banner-and-headline.html +54 -0
package/src/html/basic-action-page-with-banner-reversed.html +27 -27
package/src/html/basic-action-page-with-banner.html +27 -27
package/src/html/basic-action-page-with-callouts.html +28 -28
package/src/html/basic-action-page.html +22 -23
package/src/html/build-index.html +9 -0
package/src/html/dev-index.html +57 -0
package/src/html/donation-action-page.html +20 -20
package/src/html/e2t-action-page.html +25 -28
package/src/html/includes/accordion.html +25 -25
package/src/html/includes/basic-form-with-errors.html +28 -26
package/src/html/includes/basic-form.html +11 -7
package/src/html/includes/cookiebar.html +5 -5
package/src/html/includes/donate-form.html +11 -10
package/src/html/includes/e2t-single-form.html +29 -27
package/src/html/includes/form-items/_macros.html +76 -0
package/src/html/includes/form-items/checkboxes.html +18 -18
package/src/html/includes/form-items/country-select-options.html +253 -0
package/src/html/includes/form-items/donation-amount.html +63 -64
package/src/html/includes/form-items/donation-interval.html +14 -13
package/src/html/includes/form-items/fake-field.html +2 -2
package/src/html/includes/form-items/fieldset.html +9 -7
package/src/html/includes/form-items/file-upload.html +7 -7
package/src/html/includes/form-items/giftaid.html +16 -0
package/src/html/includes/form-items/inline-radios.html +14 -14
package/src/html/includes/form-items/opt-in-checkbox.html +5 -5
package/src/html/includes/form-items/opt-in-radios.html +7 -7
package/src/html/includes/form-items/payment-icons.html +17 -17
package/src/html/includes/form-items/paymethod-selector.html +24 -24
package/src/html/includes/form-items/radios-with-error.html +8 -8
package/src/html/includes/form-items/radios.html +14 -14
package/src/html/includes/form-items/select-with-error.html +257 -257
package/src/html/includes/form-items/textarea.html +2 -2
package/src/html/includes/form-items/webform-steps.html +13 -13
package/src/html/includes/language-switcher.html +10 -10
package/src/html/includes/login-form.html +5 -3
package/src/html/includes/menu.html +3 -3
package/src/html/includes/overlay.html +4 -4
package/src/html/includes/pagination.html +13 -13
package/src/html/includes/pgbar-thermometer.html +8 -8
package/src/html/includes/pgbar.html +5 -5
package/src/html/includes/recent-supporters-agregated.html +32 -32
package/src/html/includes/recent-supporters-comments.html +31 -31
package/src/html/includes/recent-supporters-empty.html +3 -3
package/src/html/includes/recent-supporters.html +26 -26
package/src/html/includes/share-buttons.html +30 -28
package/src/html/includes/sticky-button.html +1 -1
package/src/html/includes/teasers.html +25 -5
package/src/html/includes/toggle-element-show-more.html +3 -3
package/src/html/includes/toggle-element-toggle.html +2 -2
package/src/html/login-page.html +5 -7
package/src/html/snippets-demo.html +13 -15
package/src/html/teaser-page.html +7 -7
package/src/html/templates/action-page-cover-1col.html +12 -83
package/src/html/templates/action-page-cover-banner.html +16 -85
package/src/html/templates/action-page-reversed.html +16 -82
package/src/html/templates/action-page.html +21 -80
package/src/html/templates/base.html +31 -0
package/src/html/templates/page.html +99 -0
package/src/html/templates/share-page.html +9 -0
package/src/html/thank-you-page-cover-1col-with-headline.html +27 -0
package/src/html/thank-you-page-cover-1col.html +14 -14
package/src/html/thank-you-page-cover-2col-with-headline.html +31 -0
package/src/html/thank-you-page-cover-2col.html +17 -13
package/src/html/thank-you-page-cover-banner-with-headline.html +27 -0
package/src/html/thank-you-page-cover-banner.html +14 -14
package/src/html/thank-you-page-with-banner-and-headline.html +27 -0
package/src/html/thank-you-page-with-banner.html +14 -14
package/src/html/thank-you-page.html +15 -15
package/src/html/typography-static-page.html +18 -20
package/src/js/foundist.js +41 -14
package/src/scss/_settings.scss +3 -3
package/src/scss/components/_accordion.scss +4 -6
package/src/scss/components/_headline.scss +118 -0
package/src/scss/components/_settings.scss +6 -2
package/src/scss/form/_fields.scss +19 -0
package/src/scss/form/_settings.scss +4 -3
package/src/scss/layout/_banner.scss +50 -13
package/src/scss/layout/_cover-banner.scss +80 -34
package/src/scss/layout/_cover.scss +127 -45
package/src/scss/layout/_default.scss +9 -3
package/src/scss/layout/_sections.scss +7 -3
package/src/scss/main.scss +2 -0
package/src/scss/typography/_settings.scss +2 -0
package/src/html/empty-action-page.html +0 -29
package/src/html/empty-static-page.html +0 -21
package/src/html/includes/form-items/country-select.html +0 -258
package/src/html/includes/form-items/email.html +0 -4
package/src/html/includes/form-items/first-name.html +0 -4
package/src/html/includes/form-items/last-name.html +0 -4
package/src/html/includes/form-items/password.html +0 -5
package/src/html/includes/form-items/submit-button.html +0 -2
package/src/html/includes/form-items/text-with-description.html +0 -5
package/src/html/includes/form-items/text-with-error.html +0 -5
package/src/html/includes/teaser.html +0 -17
package/src/html/index.html +0 -51
package/src/html/templates/action-page-cover-2col-reversed.html +0 -97
package/src/html/templates/action-page-cover-2col.html +0 -97
package/src/html/templates/action-page-with-banner-reversed.html +0 -91
package/src/html/templates/action-page-with-banner.html +0 -91
package/src/html/templates/static-page-cover-1col.html +0 -80
package/src/html/templates/static-page-cover-2col.html +0 -88
package/src/html/templates/static-page-cover-banner.html +0 -81
package/src/html/templates/static-page-with-banner.html +0 -77
package/src/html/templates/static-page.html +0 -73
package/src/html/templates/teaser-page.html +0 -73

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

@@ -1,93 +1,24 @@
-<!DOCTYPE html>
-<html lang="en" class="no-js">
+{% extends "./page.html" %}
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <link rel="icon" href="{{ favicon }}">
-    <link rel="stylesheet" href="{{ css }}" />
-    <title>{{ title }}</title>
-  </head>
+{% block page_class %}{{ layout }}-layout{% endblock %}
-  <body>
-    <div id="page" class="cover-banner-layout">
+{% block main_container_class %}with-sidebar{% endblock %}
-      <section id="header">
-        <div class="top-bar grid-container">
-          <div class="top-bar-left">
-            <a class="logo" href="#" rel="home">
-              <img src="{{ logo }}" alt="Logo" crossorigin="" />
-            </a>
-          </div>
-          <div class="top-bar-right">
-            <include src="language-switcher.html"></include>
-          </div>
-        </div>
-      </section>
-      <section id="highlighted">
-        <div class="grid-container">
-          <block name="highlighted"></block>
-        </div>
-      </section>
-      <div id="background">
-        <block name="banner"></block>
-      </div>
-      <section id="messages">
-        <div class="grid-container">
-          <block name="messages"></block>
-        </div>
-      </section>
-      <section id="banner-content">
-        <div class="grid-container with-sidebar">
-          <div id="form-wrapper" class="flex-container align-middle">
+{% block banner_content %}
+    <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">
-              <block name="form-intro"></block>
-              <block name="progress-bar"></block>
-              <block name="form"></block>
+                <div class="intro">{% block form_intro %}{% endblock %}</div>
+                {% block progress_bar %}{% endblock %}
+                {% block form %}{% endblock %}
             </div>
-          </div>
         </div>
-      </section>
-      <section id="main">
-        <div class="grid-container with-sidebar">
-          <div id="top">
-            <h1 id="page-title"><block name="page-title"></block></h1>
-            <block name="top"></block>
-          </div>
-          <div id="content">
-            <block name="content-top"></block>
-            <block name="content"></block>
-            <block name="content-bottom"></block>
-          </div>
-          <div id="sidebar">
-            <block name="recent-supporters"></block>
-          </div>
-        </div>
-      </section>
-      <section id="bottom">
-        <div class="grid-container">
-          <block name="bottom"></block>
-        </div>
-      </section>
     </div>
+{% endblock %}
-    <section id="footer">
-      <div class="grid-container">
-        <block name="footer"></block>
-      </div>
-    </section>
-    <script type="module" src="{{ js }}"></script>
-  </body>
-</html>
+{% block sidebar_bottom %}
+    <div id="sidebar">
+        {% block recent_supporters %}{% endblock %}
+    </div>
+{% endblock %}

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

@@ -1,88 +1,22 @@
-<!DOCTYPE html>
-<html lang="en" class="no-js">
+{% extends "./page.html" %}
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <link rel="icon" href="{{ favicon }}">
-    <link rel="stylesheet" href="{{ css }}" />
-    <title>{{ title }}</title>
-  </head>
+{% block page_class %}{{ layout }}-layout{% endblock %}
-  <body>
-    <div id="page" class="default-layout">
+{% block main_container_class %}with-sidebar{% endblock %}
-      <section id="header">
-        <div class="top-bar grid-container">
-          <div class="top-bar-left">
-            <a class="logo" href="#" rel="home">
-              <img src="{{ logo }}" alt="Logo" crossorigin="" />
-            </a>
-          </div>
-          <div class="top-bar-right">
-            <include src="language-switcher.html"></include>
-          </div>
-        </div>
-      </section>
-      <section id="highlighted">
-        <div class="grid-container">
-          <block name="highlighted"></block>
-        </div>
-      </section>
-      <section id="messages">
-        <div class="grid-container">
-          <block name="messages"></block>
-        </div>
-      </section>
-      <section id="main">
-        <div class="grid-container with-sidebar">
-          <div id="top">
-            <h1 id="page-title"><block name="page-title"></block></h1>
-            <block name="top"></block>
-          </div>
-          <div id="content">
-            <block name="content-top"></block>
-            <block name="content"></block>
-            <block name="content-bottom"></block>
-          </div>
-          <div id="sidebar">
-            <div id="form-wrapper" class="flex-container align-middle">
-              <div id="form-outer">
-                <block name="form-intro"></block>
-                <block name="progress-bar"></block>
-                <block name="form"></block>
-              </div>
+{% block sidebar_bottom %}
+    <div id="sidebar">
+        <div id=form-wrapper class="flex-container align-middle">
+            <div id="form-outer">
+                <div class="intro">{% block form_intro %}{% endblock %}</div>
+                {% block progress_bar %}{% endblock %}
+                {% block form %}{% endblock %}
             </div>
-          </div>
-          <div id="sidebar2">
-            <block name="recent-supporters"></block>
-          </div>
-        </div>
-      </section>
-      <section id="bottom">
-        <div class="grid-container">
-          <block name="bottom"></block>
         </div>
-      </section>
     </div>
-    <section id="footer">
-      <div class="grid-container">
-        <block name="footer"></block>
-      </div>
-    </section>
-    <script type="module" src="{{ js }}"></script>
-  </body>
-</html>
+    <div id="sidebar2">
+        {% if layout == "cover-2col" %}<div class="inner-wrapper">{% endif %}
+        {% block recent_supporters %}{% endblock %}
+        {% if layout == "cover-2col" %}</div>{% endif %}
+    </div>
+{% endblock %}

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

@@ -1,88 +1,29 @@
-<!DOCTYPE html>
-<html lang="en" class="no-js">
+{% extends "./page.html" %}
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <link rel="icon" href="{{ favicon }}">
-    <link rel="stylesheet" href="{{ css }}" />
-    <title>{{ title }}</title>
-  </head>
+{% block page_class %}{{ layout }}-layout{% endblock %}
-  <body>
-    <div id="page" class="default-layout">
+{% block main_container_class %}with-sidebar{% endblock %}
-      <section id="header">
-        <div class="top-bar grid-container">
-          <div class="top-bar-left">
-            <a class="logo" href="#" rel="home">
-              <img src="{{ logo }}" alt="Logo" crossorigin="" />
-            </a>
-          </div>
-          <div class="top-bar-right">
-            <include src="language-switcher.html"></include>
-          </div>
-        </div>
-      </section>
-      <section id="highlighted">
-        <div class="grid-container">
-          <block name="highlighted"></block>
-        </div>
-      </section>
-      <section id="messages">
-        <div class="grid-container">
-          <block name="messages"></block>
-        </div>
-      </section>
-      <section id="main">
-        <div class="grid-container with-sidebar">
+{% block header %}
+    {% include "src/html/includes/language-switcher.html" %}
+{% endblock %}
-          <div id="top">
-            <h1 id="page-title"><block name="page-title"></block></h1>
-            <block name="top"></block>
-          </div>
-          <div id="sidebar">
-            <div id="form-wrapper" class="flex-container align-middle">
-              <div id="form-outer">
-                <block name="form-intro"></block>
-                <block name="progress-bar"></block>
-                <block name="form"></block>
-              </div>
+{% block sidebar %}
+    <div id="sidebar">
+        <div id=form-wrapper class="flex-container align-middle">
+            <div id="form-outer">
+                <div class="intro">{% block form_intro %}{% endblock %}</div>
+                {% block progress_bar %}{% endblock %}
+                {% block form %}{% endblock %}
             </div>
-          </div>
-          <div id="content">
-            <block name="content-top"></block>
-            <block name="content"></block>
-            <block name="content-bottom"></block>
-          </div>
-          <div id="sidebar2">
-            <block name="recent-supporters"></block>
-          </div>
-        </div>
-      </section>
-      <section id="bottom">
-        <div class="grid-container">
-          <block name="bottom"></block>
         </div>
-      </section>
     </div>
+{% endblock %}
-    <section id="footer">
-      <div class="grid-container">
-        <block name="footer"></block>
-      </div>
-    </section>
-    <script type="module" src="{{ js }}"></script>
-  </body>
-</html>
+{% block sidebar_bottom %}
+    <div id="sidebar2">
+        {% if layout == "cover-2col" %}<div class="inner-wrapper">{% endif %}
+        {% block recent_supporters %}{% endblock %}
+        {% if layout == "cover-2col" %}</div>{% endif %}
+    </div>
+{% endblock %}

package/src/html/templates/base.html ADDED Viewed

@@ -0,0 +1,31 @@
+{% import "_globals.html" as settings %}
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="{{ settings.favicon }}">
+        <title>{{ settings.site_name }}</title>
+        {# Global stylesheets #}
+        <link rel="stylesheet" type="text/css" href="{{ settings.assets_css }}">
+        {% block extra_css %}
+            {# Override this in templates to add extra stylesheets #}
+        {% endblock %}
+    </head>
+    <body class="{% block body_class %}{% endblock %}">
+        {% block page %}{% endblock %}
+        {# Global javascript #}
+        <script type="text/javascript" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default,es6"></script>
+        <script type="module" src="{{ settings.assets_js }}"></script>
+        {% block extra_js %}
+            {# Override this in templates to add extra javascript #}
+        {% endblock %}
+    </body>
+</html>

package/src/html/templates/page.html ADDED Viewed

@@ -0,0 +1,99 @@
+{% extends "./base.html" %}
+{% block page %}
+    <div id="page" class="{% block page_class %}default-layout{% endblock %}">
+        <section id="header">
+            <div class="top-bar grid-container">
+                <div class="top-bar-left">
+                    {% block logo %}
+                        <div class="logo">
+                            <img
+                                src="{{ settings.logo }}"
+                                alt="{{ settings.site_name }}" />
+                        </div>
+                    {% endblock %}
+                </div>
+                <div class="top-bar-right">
+                    {% block header %}{% endblock %}
+                </div>
+            </div>
+        </section>
+        <section id="highlighted">
+            {% block highlighted %}{% endblock %}
+        </section>
+        {% if layout|truncate(5, true, '') == "cover" %}
+            <section id="background">
+                {% block background %}{% endblock %}
+            </section>
+        {% endif %}
+        <section id="messages">
+            <div class="grid-container{% if layout == 'cover-1col' %} narrow{% endif %}">
+                {% block messages %}{% endblock %}
+            </div>
+        </section>
+        {% if layout == "cover-banner" %}
+            <section id="banner-content">
+                {% block banner_content %}{% endblock %}
+            </section>
+        {% endif %}
+        {% if layout == "banner" %}
+            <section id="banner">
+                {% block banner %}{% endblock %}
+            </section>
+        {% endif %}
+        <section id="main">
+            <div class="grid-container {% block main_container_class %}narrow{% endblock %}">
+                {% if layout in ["banner", "cover-1col", "cover-2col"] %}
+                    <header id="headline">{% block headline %}{% endblock %}</header>
+                {% endif %}
+                {% if layout == "cover-1col" %}<div class="inner-wrapper">{% endif %}
+                <div id="top">
+                    {% if layout == "cover-2col" %}<div class="inner-wrapper">{% endif %}
+                    <h1 id="page-title">
+                        {% block page_title %}Example page{% endblock %}
+                    </h1>
+                    {% block top %}{% endblock %}
+                    {% if layout == "cover-2col" %}</div>{% endif %}
+                </div>
+                {% block sidebar %}{% endblock %}
+                <div id="content">
+                    {% if layout == "cover-2col" %}<div class="inner-wrapper">{% endif %}
+                    {% block content_top %}{% endblock %}
+                    {% block content %}{% endblock %}
+                    {% block content_bottom %}{% endblock %}
+                    {% if layout == "cover-2col" %}</div>{% endif %}
+                </div>
+                {% block sidebar_bottom %}{% endblock %}
+                {% if layout == "cover-1col" %}</div>{% endif %}
+            </div>
+        </section>
+        <section id="bottom">
+            {% block bottom %}{% endblock %}
+        </section>
+        <section id="footer">
+            <div class="grid-container">
+                {% block footer %}{% endblock %}
+            </div>
+        </section>
+    </div>
+{% endblock %}

package/src/html/templates/share-page.html ADDED Viewed

@@ -0,0 +1,9 @@
+{% extends "./page.html" %}
+{% block page_class %}{{ layout }}-layout{% endblock %}
+{% block banner_content %}
+    <div class="grid-container narrow">
+        <header id="headline">{% block headline %}{% endblock %}</header>
+    </div>
+{% endblock %}

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

@@ -0,0 +1,27 @@
+{% extends "src/html/templates/share-page.html" %}
+{% set layout = "cover-1col" %}
+{% block page_class %}{{ super() }} with-headline{% endblock %}
+{% 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="">
+{% endblock %}
+{% block headline %}
+    <p>A huge thank you!</p>
+{% endblock %}
+{% block content %}
+    <p>Cat ipsum dolor sit amet, mewl for food at 4am. Meeeeouw spill litter box, scratch at owner, destroy all furniture, especially couch. Sleep on dog bed, force dog to sleep on floor stinky cat spend all night ensuring people don't sleep sleep all day yet spread kitty litter all over house.</p>
+{% endblock %}
+{% block content_bottom %}
+    {% include "src/html/includes/share-buttons.html" %}
+{% endblock %}
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}

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

@@ -1,21 +1,21 @@
-<extends src="templates/static-page-cover-1col.html">
+{% extends "src/html/templates/share-page.html" %}
-  <block name="page-title">Thank you for taking action. You’re awesome!</block>
+{% set layout = "cover-1col" %}
-  <block name="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="">
-  </block>
+{% endblock %}
-  <block name="content">
+{% block content %}
     <p>Cat ipsum dolor sit amet, mewl for food at 4am. Meeeeouw spill litter box, scratch at owner, destroy all furniture, especially couch. Sleep on dog bed, force dog to sleep on floor stinky cat spend all night ensuring people don't sleep sleep all day yet spread kitty litter all over house.</p>
-  </block>
-  <block name="content-bottom">
-    <include src="share-buttons.html"></include>
-  </block>
+{% endblock %}
-  <block name="footer">
-    <include src="menu.html"></include>
-  </block>
+{% block content_bottom %}
+    {% include "src/html/includes/share-buttons.html" %}
+{% endblock %}
-</extends>
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}

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

@@ -0,0 +1,31 @@
+{% extends "src/html/templates/action-page.html" %}
+{% set layout = "cover-2col" %}
+{% block page_class %}{{ super() }} with-headline{% endblock %}
+{% 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="">
+{% endblock %}
+{% block headline %}
+    <p>A huge thank you!</p>
+{% endblock %}
+{% block content %}
+    <p>Cat ipsum dolor sit amet, mewl for food at 4am. Meeeeouw spill litter box, scratch at owner, destroy all furniture, especially couch. Sleep on dog bed, force dog to sleep on floor stinky cat spend all night ensuring people don't sleep sleep all day yet spread kitty litter all over house.</p>
+{% endblock %}
+{% block form %}
+    {% include "src/html/includes/share-buttons.html" %}
+{% endblock %}
+{% block recent_supporters %}
+    {% include "src/html/includes/recent-supporters.html" %}
+{% endblock %}
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}

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

@@ -1,21 +1,25 @@
-<extends src="templates/static-page-cover-2col.html">
+{% extends "src/html/templates/action-page.html" %}
-  <block name="page-title">Thank you for taking action. You’re awesome!</block>
+{% set layout = "cover-2col" %}
-  <block name="banner">
+{% 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="">
-  </block>
+{% endblock %}
-  <block name="content">
+{% block content %}
     <p>Cat ipsum dolor sit amet, mewl for food at 4am. Meeeeouw spill litter box, scratch at owner, destroy all furniture, especially couch. Sleep on dog bed, force dog to sleep on floor stinky cat spend all night ensuring people don't sleep sleep all day yet spread kitty litter all over house.</p>
-  </block>
+{% endblock %}
-  <block name="form">
-    <include src="share-buttons.html"></include>
-  </block>
+{% block form %}
+    {% include "src/html/includes/share-buttons.html" %}
+{% endblock %}
-  <block name="footer">
-    <include src="menu.html"></include>
-  </block>
+{% block recent_supporters %}
+    {% include "src/html/includes/recent-supporters.html" %}
+{% endblock %}
-</extends>
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}

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

@@ -0,0 +1,27 @@
+{% extends "src/html/templates/share-page.html" %}
+{% set layout = "cover-banner" %}
+{% block page_class %}{{ super() }} with-headline{% endblock %}
+{% 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="">
+{% endblock %}
+{% block headline %}
+    <p>A huge thank you!</p>
+{% endblock %}
+{% block content %}
+    <p>Cat ipsum dolor sit amet, mewl for food at 4am. Meeeeouw spill litter box, scratch at owner, destroy all furniture, especially couch. Sleep on dog bed, force dog to sleep on floor stinky cat spend all night ensuring people don't sleep sleep all day yet spread kitty litter all over house.</p>
+{% endblock %}
+{% block content_bottom %}
+    {% include "src/html/includes/share-buttons.html" %}
+{% endblock %}
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}