@moreonion/foundist 2.1.1 → 3.0.0

package/src/html/includes/overlay.html

@@ -1,6 +1,6 @@
 <div class="reveal" id="overlay" data-reveal data-deep-link="overlay">
-  <h2>Awesome. I Have It.</h2>
-  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
-  <include src="basic-form.html"></include>
-  <button class="close-button large" data-close aria-label="Close modal" type="button"></button>
+    <h2>Awesome. I Have It.</h2>
+    <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
+    {% include "./basic-form.html" %}
+    <button class="close-button large" data-close aria-label="Close modal" type="button"></button>
 </div>

package/src/html/includes/pagination.html

@@ -1,15 +1,15 @@
 <nav aria-label="Pagination">
-  <ul class="pagination">
-    <li class="pagination-first disabled">First</li>
-    <li class="pagination-previous disabled">Previous</li>
-    <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
-    <li><a href="#" aria-label="Page 2">2</a></li>
-    <li><a href="#" aria-label="Page 3">3</a></li>
-    <li><a href="#" aria-label="Page 4">4</a></li>
-    <li class="ellipsis"></li>
-    <li><a href="#" aria-label="Page 12">12</a></li>
-    <li><a href="#" aria-label="Page 13">13</a></li>
-    <li class="pagination-next"><a href="#" aria-label="Next page">Next</a></li>
-    <li class="pagination-last"><a href="#" aria-label="Last page">Last</a></li>
-  </ul>
+    <ul class="pagination">
+        <li class="pagination-first disabled">First</li>
+        <li class="pagination-previous disabled">Previous</li>
+        <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
+        <li><a href="#" aria-label="Page 2">2</a></li>
+        <li><a href="#" aria-label="Page 3">3</a></li>
+        <li><a href="#" aria-label="Page 4">4</a></li>
+        <li class="ellipsis"></li>
+        <li><a href="#" aria-label="Page 12">12</a></li>
+        <li><a href="#" aria-label="Page 13">13</a></li>
+        <li class="pagination-next"><a href="#" aria-label="Next page">Next</a></li>
+        <li class="pagination-last"><a href="#" aria-label="Last page">Last</a></li>
+    </ul>
 </nav>

package/src/html/includes/pgbar-thermometer.html

@@ -1,9 +1,9 @@
-<div class="pgbar-wrapper progress-wrapper flex-container data-pgbar-current="20193" data-pgbar-target="30000">
-  <div class="progress thermometer" role="progressbar" tabindex="0" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100">
-    <div class="pgbar-current progress-meter" style="height:67%"></div>
-  </div>
-  <div class="flex-container flex-dir-column align-justify">
-    <p>We need another <strong>€9,807</strong>!</p>
-    <p>We have already reached <strong>€20,193</strong>. Will you help us towards our target of <strong>€30,000?</strong></p>
-  </div>
+<div class="pgbar-wrapper progress-wrapper flex-container" data-pgbar-current="20193" data-pgbar-target="30000">
+    <div class="progress thermometer" role="progressbar" tabindex="0" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100">
+        <div class="pgbar-current progress-meter" style="height:67%"></div>
+    </div>
+    <div class="flex-container flex-dir-column align-justify">
+        <p>We need another <strong>€9,807</strong>!</p>
+        <p>We have already reached <strong>€20,193</strong>. Will you help us towards our target of <strong>€30,000?</strong></p>
+    </div>
 </div>

package/src/html/includes/pgbar.html

@@ -1,7 +1,7 @@
 <div class="pgbar-wrapper progress-wrapper" data-pgbar-current="20193" data-pgbar-target="30000">
-  <p>We need <strong>9,807</strong> more signups!</p>
-  <div class="progress" role="progressbar" tabindex="0" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100">
-    <div class="pgbar-current progress-meter" style="width:67%"></div>
-  </div>
-  <p>We have already reached <strong>20,193</strong> signups. Will you help us towards our target of <strong>30,000?</strong></p>
+    <p>We need <strong>9,807</strong> more signups!</p>
+    <div class="progress" role="progressbar" tabindex="0" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100">
+        <div class="pgbar-current progress-meter" style="width:67%"></div>
+    </div>
+    <p>We have already reached <strong>20,193</strong> signups. Will you help us towards our target of <strong>30,000?</strong></p>
 </div>

package/src/html/includes/recent-supporters-agregated.html

@@ -1,35 +1,35 @@
 <h2 class="recent-supporters-title">Recent supporters</h2>
 <div class="recent-supporters-wrapper">
-  <ul class="no-bullet recent-supporters all-actions no-comments no-flags">
-    <li class="supporter action-type-webform">
-      <span class="name">Bessie <span class="last_name">A</span></span>
-      just signed up at <span class="title"><a href="#">Take action now!</a></span>
-      <span class="time" >4 minutes ago</span>
-    </li>
-    <li class="supporter action-type-webform">
-      <span class="name">Tony <span class="last_name">D</span></span>
-      just signed up at <span class="title"><a href="#">Give cats a chance</a></span>
-      <span class="time" >20 minutes ago</span>
-    </li>
-    <li class="supporter action-type-webform">
-      <span class="name">Alex <span class="last_name">G</span></span>
-      just signed up at <span class="title"><a href="#">Give cats a chance</a></span>
-      <span class="time" >1 hour ago</span>
-    </li>
-    <li class="supporter action-type-webform">
-      <span class="name">Ricky <span class="last_name">K</span></span>
-      just signed up at <span class="title"><a href="#">Take action now!</a></span>
-      <span class="time" >2 hours ago</span>
-    </li>
-    <li class="supporter action-type-webform">
-      <span class="name">Jessie <span class="last_name">N</span></span>
-      just signed up at <span class="title"><a href="#">Take action now!</a></span>
-      <span class="time" >4 hours ago</span>
-    </li>
-    <li class="supporter action-type-webform">
-      <span class="name">Susan <span class="last_name">R</span></span>
-      just signed up at <span class="title"><a href="#">Give cats a chance</a></span>
-      <span class="time" >1 day ago</span>
-    </li>
-  </ul>
+    <ul class="no-bullet recent-supporters all-actions no-comments no-flags">
+        <li class="supporter action-type-webform">
+            <span class="name">Bessie <span class="last_name">A</span></span>
+            just signed up at <span class="title"><a href="#">Take action now!</a></span>
+            <span class="time" >4 minutes ago</span>
+        </li>
+        <li class="supporter action-type-webform">
+            <span class="name">Tony <span class="last_name">D</span></span>
+            just signed up at <span class="title"><a href="#">Give cats a chance</a></span>
+            <span class="time" >20 minutes ago</span>
+        </li>
+        <li class="supporter action-type-webform">
+            <span class="name">Alex <span class="last_name">G</span></span>
+            just signed up at <span class="title"><a href="#">Give cats a chance</a></span>
+            <span class="time" >1 hour ago</span>
+        </li>
+        <li class="supporter action-type-webform">
+            <span class="name">Ricky <span class="last_name">K</span></span>
+            just signed up at <span class="title"><a href="#">Take action now!</a></span>
+            <span class="time" >2 hours ago</span>
+        </li>
+        <li class="supporter action-type-webform">
+            <span class="name">Jessie <span class="last_name">N</span></span>
+            just signed up at <span class="title"><a href="#">Take action now!</a></span>
+            <span class="time" >4 hours ago</span>
+        </li>
+        <li class="supporter action-type-webform">
+            <span class="name">Susan <span class="last_name">R</span></span>
+            just signed up at <span class="title"><a href="#">Give cats a chance</a></span>
+            <span class="time" >1 day ago</span>
+        </li>
+    </ul>
 </div>

package/src/html/includes/recent-supporters-comments.html

@@ -1,35 +1,35 @@
 <h2 class="recent-supporters-title">Our most recent signups</h2>
 
 <div class="recent-supporters-wrapper">
-  <ul class="no-bullet recent-supporters single-action with-comments no-flags">
-    <li class="supporter">
-      <span class="comment">This topic is sooo important to me!</span>
-      <span class="name">Bridget J</span>
-      <span class="time">15 seconds ago</span>
-    </li>
-    <li class="supporter">
-      <span class="comment">A have a very strong opinion about this and I’d love to let others know about it, especially now, everyone needs to know.</span>
-      <span class="name">Bobby G</span>
-      <span class="time">6 minutes ago</span>
-    </li>
-    <li class="supporter">
-      <span class="comment">Thanks for giving me the opportunity to speak up</span>
-      <span class="name">Mark D</span>
-      <span class="time">9 minutes ago</span>
-    </li>
-    <li class="supporter">
-      <span class="comment">Do something, sign up too!</span>
-      <span class="name">Maria C</span>
-      <span class="time">2 hours ago</span>
-    </li>
-    <li class="supporter">
-      <span class="name">Oliver D</span>
-      <span class="time">1 day ago</span>
-    </li>
-    <li class="supporter">
-      <span class="comment">Hm, yeah, whatever. Aren’t other things important too?</span>
-      <span class="name">Penny R</span>
-      <span class="time">3 days ago</span>
-    </li>
-  </ul>
+    <ul class="no-bullet recent-supporters single-action with-comments no-flags">
+        <li class="supporter">
+            <span class="comment">This topic is sooo important to me!</span>
+            <span class="name">Bridget J</span>
+            <span class="time">15 seconds ago</span>
+        </li>
+        <li class="supporter">
+            <span class="comment">A have a very strong opinion about this and I’d love to let others know about it, especially now, everyone needs to know.</span>
+            <span class="name">Bobby G</span>
+            <span class="time">6 minutes ago</span>
+        </li>
+        <li class="supporter">
+            <span class="comment">Thanks for giving me the opportunity to speak up</span>
+            <span class="name">Mark D</span>
+            <span class="time">9 minutes ago</span>
+        </li>
+        <li class="supporter">
+            <span class="comment">Do something, sign up too!</span>
+            <span class="name">Maria C</span>
+            <span class="time">2 hours ago</span>
+        </li>
+        <li class="supporter">
+            <span class="name">Oliver D</span>
+            <span class="time">1 day ago</span>
+        </li>
+        <li class="supporter">
+            <span class="comment">Hm, yeah, whatever. Aren’t other things important too?</span>
+            <span class="name">Penny R</span>
+            <span class="time">3 days ago</span>
+        </li>
+    </ul>
 </div>

package/src/html/includes/recent-supporters-empty.html

@@ -1,7 +1,7 @@
 <h2 class="recent-supporters-title">Who is signing up?</h2>
 
 <div class="recent-supporters-wrapper">
-  <div class="no-activity-yet">
-    <p>No recent activity.</p>
-  </div>
+    <div class="no-activity-yet">
+        <p>No recent activity.</p>
+    </div>
 </div>

package/src/html/includes/recent-supporters.html

@@ -1,30 +1,30 @@
 <h2 class="recent-supporters-title">Who is signing up?</h2>
 
 <div class="recent-supporters-wrapper">
-  <ul class="no-bullet recent-supporters single-action no-comments no-flags">
-    <li class="supporter">
-      <span class="name">Bridget J</span>
-      <span class="time">15 seconds ago</span>
-    </li>
-    <li class="supporter">
-      <span class="name">Bobby G</span>
-      <span class="time">6 minutes ago</span>
-    </li>
-    <li class="supporter">
-      <span class="name">Mark D</span>
-      <span class="time">9 minutes ago</span>
-    </li>
-    <li class="supporter">
-      <span class="name">Maria C</span>
-      <span class="time">2 hours ago</span>
-    </li>
-    <li class="supporter">
-      <span class="name">Oliver D</span>
-      <span class="time">1 day ago</span>
-    </li>
-    <li class="supporter">
-      <span class="name">Penny R</span>
-      <span class="time">3 days ago</span>
-    </li>
-  </ul>
+    <ul class="no-bullet recent-supporters single-action no-comments no-flags">
+        <li class="supporter">
+            <span class="name">Bridget J</span>
+            <span class="time">15 seconds ago</span>
+        </li>
+        <li class="supporter">
+            <span class="name">Bobby G</span>
+            <span class="time">6 minutes ago</span>
+        </li>
+        <li class="supporter">
+            <span class="name">Mark D</span>
+            <span class="time">9 minutes ago</span>
+        </li>
+        <li class="supporter">
+            <span class="name">Maria C</span>
+            <span class="time">2 hours ago</span>
+        </li>
+        <li class="supporter">
+            <span class="name">Oliver D</span>
+            <span class="time">1 day ago</span>
+        </li>
+        <li class="supporter">
+            <span class="name">Penny R</span>
+            <span class="time">3 days ago</span>
+        </li>
+    </ul>
 </div>

package/src/html/includes/share-buttons.html

@@ -1,31 +1,33 @@
 <div class="share-buttons">
-  <h2 class="share-buttons-title">Will you share this with your friends and family?</h2>
+    <h2 class="share-buttons-title">Will you share this with your friends and family?</h2>
 
-  <ul class="share-light no-bullet">
-    <li class="email first">
-      <a href="#" title="Share this via email!" data-share="email" target="_blank" class="large share button expanded email-icon">
-        <span>Email</span>
-      </a>
-    </li>
-    <li class="facebook">
-      <a href="#" title="Share this via Facebook!" data-share="facebook" target="_blank" class="large share button expanded facebook-icon">
-        <span>Facebook</span>
-      </a>
-    </li>
-    <li class="twitter">
-      <a href="#" title="Share this via Twitter!" data-share="twitter" target="_blank" class="large share button expanded twitter-icon">
-        <span>Twitter</span>
-      </a>
-    </li>
-    <li class="whatsapp">
-      <a href="#" title="Share this via WhatsApp!" data-share="whatsapp" class="mobile large share button expanded whatsapp-icon">
-        <span>WhatsApp</span>
-      </a>
-    </li>
-    <li class="fbmsg last">
-      <a href="#" title="Share this via Facebook Messenger!" data-share="facebook-messenger" class="mobile large share button expanded facebook-messenger-icon">
-        <span>Facebook Messenger</span>
-      </a>
-    </li>
-  </ul>
+    <p>Spread your love for kittens.</p>
+
+    <ul class="share-light no-bullet">
+        <li class="email first">
+            <a href="#" title="Share this via email!" data-share="email" target="_blank" class="large share button expanded email-icon">
+                <span>Email</span>
+            </a>
+        </li>
+        <li class="facebook">
+            <a href="#" title="Share this via Facebook!" data-share="facebook" target="_blank" class="large share button expanded facebook-icon">
+                <span>Facebook</span>
+            </a>
+        </li>
+        <li class="twitter">
+            <a href="#" title="Share this via Twitter!" data-share="twitter" target="_blank" class="large share button expanded twitter-icon">
+                <span>Twitter</span>
+            </a>
+        </li>
+        <li class="whatsapp">
+            <a href="#" title="Share this via WhatsApp!" data-share="whatsapp" class="mobile large share button expanded whatsapp-icon">
+                <span>WhatsApp</span>
+            </a>
+        </li>
+        <li class="fbmsg last">
+            <a href="#" title="Share this via Facebook Messenger!" data-share="facebook-messenger" class="mobile large share button expanded facebook-messenger-icon">
+                <span>Facebook Messenger</span>
+            </a>
+        </li>
+    </ul>
 </div>

package/src/html/includes/sticky-button.html

@@ -1,3 +1,3 @@
 <div class="sticky-cta">
-  <a href="#form" class="expanded primary button">Take action!</a>
+    <a href="#form" class="expanded primary button">Take action!</a>
 </div>

package/src/html/includes/teasers.html

@@ -1,7 +1,27 @@
+{% macro teaser(title) %}
+    <article class="card">
+        <div class="card-image">
+            <img src="http://placekitten.com/480/270" alt="test image with cats" crossorigin="">
+        </div>
+        <div class="card-section">
+            <div class="progress-wrapper" data-pgbar-current="140" data-pgbar-target="200">
+                <div class="progress" role="progressbar" tabindex="0" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
+                    <div class="progress-meter" style="width: 70%;"></div>
+                    <span class="progress-meter-text">140</span>
+                </div>
+            </div>
+            <h4>{{ title }}</h4>
+        </div>
+        <footer class="card-section">
+            <a class="button small card-link" href="#" rel="tag">Read more</a>
+        </footer>
+    </article>
+{% endmacro %}
+
 <div class="teasers">
-  <include src="teaser.html" locals='{"title": "Cats for world domination"}'></include>
-  <include src="teaser.html" locals='{"title": "Meouw!"}'></include>
-  <include src="teaser.html" locals='{"title": "Ignore the squirrels, you’ll never catch them anyway"}'></include>
-  <include src="teaser.html" locals='{"title": "Your pillow is now my pet bed nya nya nyan"}'></include>
-  <include src="teaser.html" locals='{"title": "What’s your problem?"}'></include>
+    {{ teaser("Cats for world domination") }}
+    {{ teaser("Meouw!") }}
+    {{ teaser("Ignore the squirrels, you’ll never catch them anyway") }}
+    {{ teaser("Your pillow is now my pet bed nya nya nyan") }}
+    {{ teaser("What’s your problem?") }}
 </div>

package/src/html/includes/toggle-element-show-more.html

@@ -1,7 +1,7 @@
 <p>
-  <a data-toggle-element role="button" data-open="more" aria-controls="more" aria-expanded=false data-close>Read more</a>
+    <a data-toggle-element role="button" data-open="more" aria-controls="more" aria-expanded=false data-close>Read more</a>
 </p>
 <div data-toggle-element id="more" class="toggle-element-hidden">
-  <p>This will show up on click and can’t be closed again, the link is gone.</p>
-  <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>
+    <p>This will show up on click and can’t be closed again, the link is gone.</p>
+    <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>
 </div>

package/src/html/includes/toggle-element-toggle.html

@@ -1,6 +1,6 @@
 <p>
-  <a role="button" data-toggle="toggle-paragraph" aria-controls="toggle-paragraph" aria-expanded="false">Toggle a parapgraph on click.</a>
+    <a role="button" data-toggle="toggle-paragraph" aria-controls="toggle-paragraph" aria-expanded="false">Toggle a parapgraph on click.</a>
 </p>
 <p data-toggle-element id="toggle-paragraph" class="toggle-element-hidden">
-  Parapgraph that can be toggled on and off. Meouw. Always ensure to lay down in such a manner that tail can lightly brush human's nose sleep in the bathroom sink. Run up and down stairs curl up and sleep on the freshly laundered towels.
+    Parapgraph that can be toggled on and off. Meouw. Always ensure to lay down in such a manner that tail can lightly brush human's nose sleep in the bathroom sink. Run up and down stairs curl up and sleep on the freshly laundered towels.
 </p>

package/src/html/login-page.html

@@ -1,9 +1,7 @@
-<extends src="templates/static-page.html">
+{% extends "src/html/templates/page.html" %}
 
-  <block name="page-title">User account</block>
+{% block page_title %}User account{% endblock %}
 
-  <block name="content">
-    <include src="login-form.html"></include>
-  </block>
-
-</extends>
+{% block content %}
+    {% include "src/html/includes/login-form.html" %}
+{% endblock %}

package/src/html/snippets-demo.html

@@ -1,22 +1,20 @@
-<extends src="templates/static-page.html">
+{% extends "src/html/templates/page.html" %}
 
-  <block name="page-title">Snippets demo</block>
+{% block page_title %}Snippets demo{% endblock %}
 
-  <block name="content">
+{% block content %}
     <h2>Accordion</h2>
-    <include src="accordion.html"></include>
+    {% include "src/html/includes/accordion.html" %}
 
     <h2>Toggle element</h2>
-    <include src="toggle-element-show-more.html"></include>
-    <include src="toggle-element-toggle.html"></include>
-  </block>
+    {% include "src/html/includes/toggle-element-show-more.html" %}
+    {% include "src/html/includes/toggle-element-toggle.html" %}
+{% endblock %}
 
-  <block name="content-bottom">
-    <include src="cookiebar.html"></include>
-  </block>
+{% block content_bottom %}
+    {% include "src/html/includes/cookiebar.html" %}
+{% endblock %}
 
-  <block name="footer">
-    <include src="menu.html"></include>
-  </block>
-
-</extends>
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}

package/src/html/teaser-page.html

@@ -1,10 +1,10 @@
-<extends src="templates/teaser-page.html">
+{% extends "src/html/templates/page.html" %}
 
-  <block name="page-title">Our latest actions and donation asks</block>
+{% block page_title %}Our latest actions and donation asks{% endblock %}
 
-  <block name="content-bottom">
-    <include src="teasers.html"></include>
-    <include src="pagination.html"></include>
-  </block>
+{% block main_container_class %}{% endblock %}
 
-</extends>
+{% block content_bottom %}
+    {% include "src/html/includes/teasers.html" %}
+    {% include "src/html/includes/pagination.html" %}
+{% endblock %}

package/src/html/templates/action-page-cover-1col.html

@@ -1,88 +1,17 @@
-<!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-1col-layout">
-
-      <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="background">
-        <block name="banner"></block>
-      </section>
-
-      <section id="messages">
-        <div class="grid-container narrow">
-          <block name="messages"></block>
-        </div>
-      </section>
-
-      <section id="main">
-        <div class="grid-container narrow">
-          <div class="inner-wrapper">
-
-            <div id="top">
-              <h1 id="page-title"><block name="page-title"></block></h1>
-              <block name="top"></block>
-            </div>
-
-            <div id="form-outer">
-              <block name="form-intro"></block>
-              <block name="progress-bar"></block>
-              <block name="form"></block>
-            </div>
-
-            <div id="content">
-              <block name="content-top"></block>
-              <block name="content"></block>
-              <block name="content-bottom"></block>
-            </div>
-
-            <block name="recent-supporters"></block>
-
-          </div>
-        </div>
-      </section>
-
-      <section id="bottom">
-        <div class="grid-container">
-          <block name="bottom"></block>
-        </div>
-      </section>
+{% block main_container_class %}narrow{% endblock %}
 
+{% block sidebar %}
+    <div id="form-outer">
+        {% block form_intro %}{% endblock %}
+        {% block progress_bar %}{% endblock %}
+        {% block form %}{% endblock %}
     </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 %}
+    {% block recent_supporters %}{% endblock %}
+{% endblock %}