futuro 0.7.4 → 0.7.5

data/_includes/svg/site/icon.liquid

@@ -1,36 +1,42 @@
 
-{% assign type = include.type %}
-
-{%- if type == "wordmark" -%}
+{%- if include.type == "wordmark" -%}
 
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 31.8"><path d="M0,0h7.2v11.8c1.7-1.5,3.3-2.1,5.7-2.1c6,0,10.3,4.7,10.3,11.2c0,3.2-1.1,6.1-3.1,8.1c-1.8,1.8-4.1,2.7-7,2.7	S8.4,31,6.9,29.2V31H0V0L0,0z M6.7,20.7c0,3.1,1.9,5.1,4.6,5.1c2.7,0,4.4-1.9,4.4-4.9c0-3.1-1.7-5.1-4.5-5.1	C8.4,15.8,6.7,17.8,6.7,20.7L6.7,20.7z M40.4,29.6c-1.9,1.7-3.1,2.2-6,2.2c-3.2,0-5.5-0.9-7.3-2.8c-1.9-2-3-4.9-3-8.2	c0-6.4,4.2-11,10.2-11c2.6,0,4.1,0.6,6.1,2.4v-1.8h6.9V31h-6.9V29.6L40.4,29.6z M31.6,21c0,3.1,1.7,4.9,4.5,4.9c2.7,0,4.5-2,4.5-5.1	c0-2.9-1.8-4.9-4.4-4.9C33.5,15.8,31.6,18,31.6,21L31.6,21z M49.2,10.5h6.9V13c1.5-2.4,3-3.2,5.5-3.2c0.5,0,0.8,0,2.5,0.2v6.6	c-0.8-0.2-1.3-0.3-1.9-0.3c-3.8,0-5.8,2-5.8,5.9V31h-7.2V10.5 M65.3,0h7.2v11.8c1.7-1.5,3.3-2.1,5.7-2.1c6,0,10.3,4.7,10.3,11.2	c0,3.2-1.1,6.1-3.1,8.1c-1.8,1.8-4.1,2.7-7,2.7s-4.6-0.7-6.2-2.5V31h-6.9V0L65.3,0z M72,20.7c0,3.1,1.9,5.1,4.6,5.1	c2.7,0,4.4-1.9,4.4-4.9c0-3.1-1.7-5.1-4.5-5.1C73.7,15.8,72,17.8,72,20.7L72,20.7z M97.4,4.5c0,2.2-1.8,4-4,4c-2.2,0-3.9-1.8-3.9-4	c0-2.2,1.8-3.9,3.9-3.9C95.6,0.6,97.4,2.4,97.4,4.5L97.4,4.5z M89.9,10.5H97V31h-7.2V10.5z M114.8,30.1c-3,1.5-4,1.7-6.5,1.7	c-2.8,0-5-0.8-6.6-2.3c-2-2-3.2-5-3.2-8.5c0-6.7,4.1-11.4,10.1-11.4c2.3,0,3.8,0.4,6.2,1.9v7.2c-1.7-2-2.7-2.6-4.5-2.6	c-2.6,0-4.2,1.8-4.2,4.7c0,2.8,1.6,4.6,4.2,4.6c1.6,0,2.8-0.6,4.5-2.3V30.1 M131.8,29.6c-1.9,1.7-3.1,2.2-6,2.2	c-3.2,0-5.5-0.9-7.3-2.8c-1.9-2-3-4.9-3-8.2c0-6.4,4.2-11,10.2-11c2.6,0,4.1,0.6,6.1,2.4v-1.8h6.9V31h-6.9V29.6L131.8,29.6z M123,21	c0,3.1,1.7,4.9,4.5,4.9c2.7,0,4.5-2,4.5-5.1c0-2.9-1.8-4.9-4.4-4.9S123,18,123,21L123,21z M140.6,10.5h7.1v2.4	c1.8-2.4,3.4-3.1,6.3-3.1c3.2,0,5.8,1.3,7,3.4c0.6,1.1,0.9,2.4,0.9,4V31h-7.2V19.7c0-2.8-1-4-3.2-4c-2.3,0-3.8,1.6-3.8,4V31h-7.2	V10.5"/></svg>
 
-{%- elsif type == "shopmark" -%}
+{%- elsif include.type == "carrier" -%}
+
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 226.6"><path d="M279.13,0H20.87C7.62,22.39,0,48.53,0,76.44C0,159.37,67.16,226.6,150,226.6c82.85,0,150-67.23,150-150.17	C300,48.53,292.38,22.39,279.13,0z"/></svg>
+
+{%- elsif include.type == "shopmark" -%}
 
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 245 38"><path d="M135.7,30h6.9V19.2c0-2.4,1.5-3.9,3.7-3.9	c2.1,0,3.1,1.2,3.1,3.9V30h6.9V16.7c0-1.5-0.3-2.8-0.9-3.8c-1.2-2.1-3.7-3.3-6.8-3.3c-2.8,0-4.4,0.7-6.1,3v-2.3h-6.8V30z M118.9,20.4c0,2.9,1.6,4.7,4.4,4.7c2.6,0,4.4-1.9,4.4-4.9c0-2.8-1.7-4.7-4.3-4.7C120.8,15.5,118.9,17.6,118.9,20.4z M127.5,28.7	c-1.8,1.6-3,2.1-5.8,2.1c-3.1,0-5.3-0.9-7.1-2.7c-1.9-2-2.9-4.7-2.9-7.9c0-6.2,4.1-10.6,9.9-10.6c2.5,0,3.9,0.6,5.9,2.3v-1.7h6.6V30	h-6.6C127.5,30,127.5,28.7,127.5,28.7z M110.6,22.4c-1.6,1.6-2.8,2.2-4.4,2.2c-2.5,0-4-1.7-4-4.4c0-2.8,1.5-4.5,4.1-4.5	c1.7,0,2.7,0.6,4.3,2.5v-6.9c-2.3-1.4-3.8-1.8-6-1.8c-5.8,0-9.7,4.4-9.7,10.9c0,3.3,1.1,6.3,3.1,8.2c1.5,1.5,3.6,2.2,6.4,2.2	c2.4,0,3.4-0.3,6.3-1.7C110.6,29.2,110.6,22.4,110.6,22.4z M86.7,30h6.9V10.3h-6.9V30z M94,4.6c0,2.1-1.7,3.8-3.8,3.8c0,0,0,0,0,0	c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8C92.2,0.8,94,2.5,94,4.6z M69.5,20.1c0,2.9,1.8,5,4.4,5c2.6,0,4.3-1.8,4.3-4.7	c0-3-1.7-4.9-4.4-4.9C71.2,15.5,69.5,17.3,69.5,20.1L69.5,20.1z M63,0.2H70v11.4c1.6-1.5,3.2-2,5.5-2c5.8,0,10,4.5,10,10.8	c0,3-1.1,5.9-3,7.8c-1.7,1.8-4,2.6-6.8,2.6c-2.8,0-4.5-0.7-6-2.4V30H63L63,0.2z M47.2,30h6.9v-8.3c0-3.8,1.9-5.7,5.6-5.7	c0.6,0,1,0,1.8,0.3V9.9c-1.6-0.2-1.9-0.2-2.4-0.2c-2.4,0-3.8,0.8-5.3,3.1v-2.5h-6.6V30z M30.5,20.4c0,2.9,1.6,4.7,4.4,4.7	c2.6,0,4.4-1.9,4.4-4.9c0-2.8-1.7-4.7-4.3-4.7S30.5,17.6,30.5,20.4z M39,28.7c-1.8,1.6-3,2.1-5.8,2.1c-3.1,0-5.3-0.9-7.1-2.7	c-1.9-2-2.9-4.7-2.9-7.9c0-6.2,4.1-10.6,9.9-10.6c2.5,0,3.9,0.6,5.9,2.4v-1.7h6.6V30H39C39,30,39,28.7,39,28.7z M6.5,20.1	c0,2.9,1.8,5,4.4,5s4.3-1.8,4.3-4.7c0-3-1.7-4.9-4.4-4.9C8.2,15.5,6.5,17.3,6.5,20.1z M0,0.2h6.9v11.4c1.6-1.5,3.2-2,5.5-2	c5.8,0,10,4.5,10,10.8c0,3-1.1,5.9-3,7.8c-1.7,1.8-4,2.6-6.8,2.6c-2.8,0-4.5-0.7-6-2.4V30H0V0.2z" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF"/><path d="M221.7,37.9h7v-9.1c1.6,1.5,3.1,2.1,5.7,2.1c5.9,0,9.9-4.3,9.9-10.7c0-6.5-3.8-10.8-9.8-10.8c-2.8,0-4.1,0.5-6.1,2.4v-1.7	h-6.7V37.9L221.7,37.9z M232.7,15.1c2.6,0,4.4,1.9,4.4,5c0,2.9-1.7,4.7-4.4,4.7c-2.6,0-4.4-1.9-4.4-4.7	C228.2,17.1,230.1,15.1,232.7,15.1z M209.3,9.3c-6.9,0-11.9,4.5-11.9,10.7c0,6.2,5,10.7,11.8,10.7c7.1,0,11.8-4.3,11.8-10.7	C220.9,13.7,216.1,9.3,209.3,9.3L209.3,9.3z M209.2,14.8c2.8,0,4.5,2,4.5,5.2c0,3.3-1.7,5.2-4.7,5.2c-2.6,0-4.5-2.2-4.5-5.2	C204.6,17,206.5,14.8,209.2,14.8L209.2,14.8z M175.5,30h7V19.6c0-2.9,1.3-4.5,3.6-4.5c2.1,0,3.2,1.2,3.2,3.4V30h7V17.1	c0-2-0.3-3.2-0.8-4.2c-1.2-2.1-4-3.5-6.9-3.5c-2.5,0-4.1,0.7-6.1,2.7V0h-7L175.5,30L175.5,30z M172,15.8c-1.7-0.9-3.5-1.6-4.9-1.6	c-1.2,0-1.9,0.5-1.9,1.4c0,0.4,0.2,0.8,0.6,1.1c0.5,0.3,1.1,0.5,1.7,0.7l0.7,0.1l0.7,0.2l0.7,0.2c3.5,0.8,4.7,2.2,4.7,5.6	c0,2-0.8,3.9-2.2,5.2c-1.8,1.6-3.7,2.2-7.2,2.2c-1.4,0-3.5-0.4-5-1c-0.8-0.3-1.4-0.6-2.7-1.4l2.2-4.7c2.2,1.2,3.6,1.8,5.1,1.9	c1.4,0.1,2.4-0.5,2.4-1.3c0-0.7-0.8-1.2-2.7-1.7c-2.8-0.6-3.6-0.9-4.6-1.8c-1.1-1-1.7-2.6-1.6-4.4c0.2-4.6,3.9-7.4,9.3-7.1	c2.3,0.1,4.2,0.6,7.1,1.9L172,15.8L172,15.8z"/></svg>
 
-{%- elsif type == "avatar" -%}
+{%- elsif include.type == "avatar" -%}
 
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
 
-{%- elsif type == "search" -%}
+{%- elsif include.type == "search" -%}
 
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.6,19.4c0,0-3.4-3.1-3.3-3.2c1.2-1.4,1.9-3.1,1.9-5.1c0-4.3-3.5-7.9-7.9-7.9s-7.9,3.5-7.9,7.9S6.9,19,11.3,19	c1.7,0,3.2-0.5,4.5-1.4l3.4,3.2h1.5V19.4z M5.6,11.1c0-3.1,2.5-5.6,5.6-5.6s5.6,2.5,5.6,5.6s-2.5,5.6-5.6,5.6	C8.2,16.7,5.6,14.2,5.6,11.1z"/></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.5,7.4C6.6,8.3,6,9.7,6,11.1s0.6,2.7,1.5,3.7c0.9,0.9,2.3,1.5,3.7,1.5 s2.7-0.6,3.7-1.5c0.9-0.9,1.5-2.3,1.5-3.7s-0.6-2.7-1.5-3.7c-1-1.1-2.3-1.5-3.7-1.5S8.5,6.4,7.5,7.4z M19.5,21.4l-4-4 c-1.2,0.9-2.7,1.3-4.2,1.3c-2.1,0-4-0.8-5.4-2.2c-1.4-1.4-2.2-3.3-2.2-5.3s0.8-4,2.2-5.4s3.4-2.3,5.4-2.3s4,0.8,5.4,2.2 S19,9,19,11.1c0,1.5-0.4,3-1.3,4.3l4,4L19.5,21.4z" fill-rule="evenodd" clip-rule="evenodd"/></svg>
 
-{%- elsif type == "menu" -%}
+{%- elsif include.type == "menu" -%}
 
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
 
-{%- elsif type == "more" -%}
+{%- elsif include.type == "more" -%}
 
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
 
-{%- elsif type == "less" -%}
+{%- elsif include.type == "less" -%}
 
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
 
-{%- elsif type == "basket" -%}
+{%- elsif include.type == "basket" -%}
 
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17.21 9l-4.38-6.56c-.19-.28-.51-.42-.83-.42-.32 0-.64.14-.83.43L6.79 9H2c-.55 0-1 .45-1 1 0 .09.01.18.04.27l2.54 9.27c.23.84 1 1.46 1.92 1.46h13c.92 0 1.69-.62 1.93-1.46l2.54-9.27L23 10c0-.55-.45-1-1-1h-4.79zM9 9l3-4.4L15 9H9zm3 8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>
 
+{%- elsif include.type == "pie" -%}
+
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 184 184"><path d="M182,92c0,49.7-40.3,90-90,90S2,141.7,2,92S42.3,2,92,2 S182,42.3,182,92z" opacity="0.2" enable-background="new"/></svg>
+
 {%- endif -%}

data/_layouts/feed.html

@@ -2,59 +2,63 @@
 layout: mini
 ---
 
-{% include html/assign.liquid %}
-{% assign topic = page.title | replace: ' ','-' | prepend: ' topic-' | downcase %}
+{% include html/assign/site.liquid %}
 
 <!DOCTYPE html>
+
 <html lang="{{ page.lang | default: site.lang | default: 'en' }}" class="no-js">
 
   {% include html/head/meta.liquid %}
 
-  <body class="{% if site.setup.install %}{{ install }}{% endif %}
-               {% if site.setup.style %}{{ style }}{% endif %}
-               {% if page.collection %}{{ book }}{% endif %}
-               {% if page.chapter %}{{ chapter }}{% endif %}
-               {% if page.topic %}{{ topic }}{% endif %}
-               {{ layout }}{{ type }}">
+  <body class="{% if site.setup.install %}{{ SiteInstall }}{% endif %}
+               {% if site.setup.style %}{{ SiteStyle }}{% endif %}
+               {% if page.collection %}{{ LayoutBook }}{% endif %}
+               {% if page.chapter %}{{ LayoutChapter }}{% endif %}
+               {% if page.topic %}{{ LayoutTopic | prepend : 'topic-' }}{% endif %}
+               {{ LayoutLayout }}{{ LayoutType }}">
+
+    {% include {{ SiteOverlay | append : 'wrap.liquid' }} title='load'   exit='false' init=true %}
+
+    {% include {{ SiteOverlay | append : 'wrap.liquid' }} title='mobile' exit='false' %}
+
+    {% include {{ SiteOverlay | append : 'wrap.liquid' }} title='about' %}
 
-    {% include html/overlay.liquid title='load' exit='false' state='open' %}
-    {% include html/overlay.liquid title='mobile' exit='false' %}
-    {% include html/overlay.liquid title='about' %}
-    {% include html/overlay.liquid title='browse' %}
-    {% include html/overlay.liquid title='search' %}
+    {% include {{ SiteOverlay | append : 'wrap.liquid' }} title='browse' %}
+
+    {% include {{ SiteOverlay | append : 'wrap.liquid' }} title='search' %}
 
     <div class="site feed">
 
-      {% if site.header %}
-      <header>
-        {{ site.header }}
-      </header>
-      {% endif %}
+      {% include {{ Site | append : 'header.liquid' }} %}
 
-      {% include html/page/topbar.liquid %}
+      {% include {{ SitePage | append : 'topbar.liquid' }} %}
 
-      {% if page.type == 'book' %}
+      {% if LayoutIsBook %}
 
-      {% assign loop = site[page.collection] | sort: 'weight' %}
-      {% include html/filter/loop.liquid type='book' %}
+        {% assign loop = site[page.collection] | sort: 'weight' %}
 
-      {% elsif page.type == 'chapter' %}
+        {% include {{ Site | append : 'scroller.liquid' }} %}
 
-      {% assign loop = site[page.collection] | where: 'chapter', page.chapter | sort: 'weight' %}
-      {% include html/filter/loop.liquid type='chapter' %}
+        {% include {{ SiteLayout | append : 'loop.liquid' }} type='book' %}
 
-      {% elsif page.type == 'topic' %}
+      {% elsif LayoutIsChapter %}
 
-      {% assign loop = site[page.collection] | where: 'topic', page.topic | sort: 'weight' %}
-        {% include html/filter/loop.liquid type='topic' %}
-      {% endif %}
+        {% assign loop = site[page.collection] | where: 'chapter', page.chapter | sort: 'weight' %}
+
+        {% include {{ SiteLayout | append : 'loop.liquid' }} type='chapter' %}
+
+      {% elsif LayoutIsTopic %}
+
+        {% assign loop = site[page.collection] | where: 'topic', page.topic | sort: 'weight' %}
+
+        {% include {{ SiteLayout | append : 'loop.liquid' }} type='topic' chapter=page.chapter %}
 
-      {% if site.footer %}
-      <footer>
-        {{ site.footer }}
-      </footer>
       {% endif %}
 
+      {% include {{ SitePage | append : 'clippies.liquid' }} %}
+
+      {% include {{ Site | append : 'footer.liquid' }} %}
+
     </div>
 
   </body>

data/_layouts/single.html

@@ -2,54 +2,59 @@
 layout: mini
 ---
 
-{% include html/assign.liquid %}
-{% assign title = page.title | replace: ' ','-' | prepend: ' title-' | downcase %}
+{% include html/assign/site.liquid %}
 
 <!DOCTYPE html>
+
 <html lang="{{ page.lang | default: site.lang | default: 'en' }}" class="no-js">
 
   {% include html/head/meta.liquid %}
 
-  <body class="{% if site.setup.install %}{{ install }}{% endif %}
-               {% if site.setup.style %}{{ style }}{% endif %}
-               {% if page.collection %}{{ book }}{% endif %}
-               {% if page.chapter %}{{ chapter }}{% endif %}
-               {{ layout }}{{ type }}{{ title }}">
+  <body class="{% if site.setup.install %}{{ SiteInstall }}{% endif %}
+               {% if site.setup.style %}{{ SiteStyle }}{% endif %}
+               {% if page.collection %}{{ LayoutBook }}{% endif %}
+               {% if page.chapter %}{{ LayoutChapter }}{% endif %}
+               {{ LayoutLayout }}{{ LayoutType }}{{ LayoutTitle }}">
+
+    {% include {{ SiteOverlay | append : 'wrap.liquid' }} title='load' exit='false' state='open' %}
+
+    {% include {{ SiteOverlay | append : 'wrap.liquid' }} title='mobile' exit='false' %}
+
+    {% if LayoutIsOverlay %}
 
-    {% include html/overlay.liquid title='load' exit='false' state='open' %}
-    {% include html/overlay.liquid title='mobile' exit='false' %}
+      {% assign DynamicTitle = page.title | downcase %}
+
+      {% include {{ SiteOverlay | append : 'wrap.liquid' }} title=DynamicTitle exit='false' %}
 
-    {% if page.type == 'overlay' %}
-      {% assign dynamic = page.title | downcase %}
-      {% include html/overlay.liquid title=dynamic exit='false' %}
     {% endif %}
 
-    {% unless page.type == 'overlay' %}
-      {% unless page.type == 'home' %}
-        {% include html/overlay.liquid title='about' %}
-        {% include html/overlay.liquid title='browse' %}
-        {% include html/overlay.liquid title='search' %}
+    {% unless LayoutIsOverlay %}
+
+      {% unless LayoutIsHome %}
+
+        {% include {{ SiteOverlay | append : 'wrap.liquid' }} title='about' %}
+
+        {% include {{ SiteOverlay | append : 'wrap.liquid' }} title='browse' %}
+
+        {% include {{ SiteOverlay | append : 'wrap.liquid' }} title='search' %}
+
       {% endunless %}
 
-    <div class="site {% if page.type == 'home' %} full {% else %} single {% endif %}">
+    <div class="site {% if LayoutIsHome %} full {% else %} single {% endif %}">
 
-      {% if site.header %}
-      <header>
-        {{ site.header }}
-      </header>
-      {% endif %}
+      {% include {{ Site | append : 'header.liquid' }} %}
+
+      {% unless LayoutIsHome %}
+
+        {% include {{ SitePage | append : 'topbar.liquid' }} %}
 
-      {% unless page.type == 'home' %}
-        {% include html/page/topbar.liquid %}
       {% endunless %}
 
-      {% include html/filter/type.liquid %}
+      {% include {{ SiteLayout | append : 'type.liquid' }} %}
+
+      {% include {{ SitePage | append : 'clippies.liquid' }} %}
 
-      {% if site.footer %}
-      <footer>
-        {{ site.footer }}
-      </footer>
-      {% endif %}
+      {% include {{ Site | append : 'footer.liquid' }} %}
 
     </div>
 

data/_sass/_bar.scss

@@ -8,7 +8,7 @@
   }
 
   &.mobile {
-    background-color: $gun;
+    background-color: map-get($color,gun);
     justify-self: center;
     display: grid;
     height: 20px;

data/_sass/_base.scss

@@ -52,7 +52,7 @@ footer {
   z-index: 3;
 }
 
-p + p, p + ul {
+p + p {
   margin-top: 20px;
 }
 
@@ -60,24 +60,6 @@ ul, ol {
   padding: 0 0 0 20px;
   list-style: outside;
   margin: 0;
-
-  &.slim {
-    padding-top: 0;
-  }
-
-  &.letters {
-    padding: 0 0 0 30px;
-    list-style: lower-alpha;
-  }
-
-  &.numbers {
-    padding: 0 0 0 30px;
-    list-style: decimal;
-  }
-
-  + p {
-    margin-top: 20px;
-  }
 }
 
 a {
@@ -91,7 +73,6 @@ h1, h2, h3, h4, h5, h6, p, ul, ol {
 
 h1 {
   @extend %bold;
-  margin-bottom: 20px;
   font-size: 2.8rem;
 }
 
@@ -141,6 +122,10 @@ svg {
   display: block;
 }
 
+svg.crop {
+  clip-path: url(#cp);
+}
+
 img {
   display: block;
 }
@@ -161,10 +146,14 @@ button {
 button.navigation {
   letter-spacing: -0.02em;
   border-radius: 0;
-  color: $forms;
+  color: map-get($color,slate);
   padding: 0;
 }
 
 button.navigation.book {
   padding: 0 20px;
 }
+
+button.navigation.search {
+  width: 36px;
+}

data/_sass/_block.scss

@@ -9,32 +9,13 @@
   left: auto;
 }
 
-.block.page-split {
-  display: grid;
-}
-
-.block.page-split-2 {
-  grid-template-columns: repeat(2,1fr);
-  grid-column-gap: 40px;
-}
-
-.block.page-split-3 {
-  grid-template-columns: repeat(3,1fr);
-  grid-column-gap: 20px;
+.block.page-footnote {
+  position: absolute;
+  bottom: 66px;
+  left: 540px;
+  opacity:0.3;
 }
 
-.block.page-split.no-subtitle {
-  padding-top: 20px;
-}
-
-.block.scroller {
-  @include zeros;
-  grid-template-columns: 1fr 26px 1fr;
-  place-items: center;
-  min-height: 600px;
-  display: grid;
-  height: 100%;
-  width: 100px;
-  z-index: 2;
-  left: auto;
+.block.overlay-search-svg {
+  padding-bottom: 4px;
 }

data/_sass/_box.scss

@@ -7,7 +7,7 @@
   }
 
   &.mobile {
-    border: 3px solid $gun;
+    border: 3px solid map-get($color,gun);
     display: grid;
     width: 100%;
   }

data/_sass/_button.scss

@@ -8,12 +8,12 @@
   font-size: 1.6rem;
   cursor: pointer;
 
-  @media#{$max767} {
+  @media#{map-get($query,max767)} {
     display: block;
     width: 100%;
   }
 
-  @media#{$min768} {
+  @media#{map-get($query,min768)} {
     &:not(.legend-button) {
       justify-self: flex-start;
       grid-column: 2;

data/_sass/_col.scss

@@ -6,7 +6,7 @@
   }
 
   > .block.browse-label, > .block.browse-lnk {
-    border-right: 2px solid $gun;
+    border-right: 2px solid map-get($color,gun);
   }
 }
 
@@ -16,6 +16,6 @@
 
 .col.browse.page {
   > .block.browse-label, > .block.browse-chunk {
-    border-left: 2px solid $gun;
+    border-left: 2px solid map-get($color,gun);
   }
 }

data/_sass/_input.scss

@@ -1,33 +1,19 @@
 
-.input {
-
-  &.text {
-    display: block;
-    color: inherit;
-    padding: 10px;
-    border: none;
-    width: 100%;
-
-    &.search {
-      @extend h4;
-      background-color: transparent;
-      letter-spacing: -0.03rem;
-      line-height: 1;
-      padding: 0;
-    }
-  }
-
-  &.email {
-    display: block;
-    color: inherit;
-    padding: 10px;
-    border: none;
-    width: 100%;
-  }
+%InputText {
+  display: block;
+  color: inherit;
+  padding: 10px;
+  border: none;
+  width: 100%;
+}
 
-  &.checkbox {
-    margin-right: 8px;
-  }
+.input.text-search {
+  @extend %InputText;
+  @extend h4;
+  background-color: transparent;
+  letter-spacing: -0.03rem;
+  line-height: 1;
+  padding: 0;
 }
 
 ::-webkit-input-placeholder {

data/_sass/_item.scss

@@ -2,25 +2,29 @@
 .item.pie {
   grid-row-gap: 20px;
   text-align: center;
+  font-size: 2.8rem;
   display: grid;
 }
 
-.item.text-roller {
-  @extend %item_roller;
-  @include ThemeRoller("culture-addicts",$addicts);
-  @include ThemeRoller("family-centric",$family);
-  @include ThemeRoller("receptive",$receptive);
-  @include ThemeRoller("value-seekers",$value);
-  @include ThemeRoller("next-generation",$next);
-  @include ThemeRoller("maybe-someday",$maybe);
+.item.roller.input {
+  background-color: rgba(0,0,0,0.05);
+  border: 2px solid white;
+  padding: 8px 10px 6px;
+  cursor: pointer;
 }
 
-.item.text-output {
-  @extend %item_output;
-  @include ThemeOutput("culture-addicts",$addicts);
-  @include ThemeOutput("family-centric",$family);
-  @include ThemeOutput("receptive",$receptive);
-  @include ThemeOutput("value-seekers",$value);
-  @include ThemeOutput("next-generation",$next);
-  @include ThemeOutput("maybe-someday",$maybe);
+.item.roller.output {
+  background-color: rgba(black,5%);
+  border: 2px solid;
+  padding: 10px;
+  display: none;
+}
+
+.item.roller.output.active {
+  display: block;
+}
+
+.item.scroller {
+  opacity: 0.5;
+  fill: map-get($color,gun);
 }

data/_sass/_link.scss

@@ -0,0 +1,42 @@
+
+.link.navigation {
+  text-decoration: none;
+  align-content: center;
+  line-height: 1.1;
+  padding: 0 20px;
+  display: grid;
+
+  button {
+    text-transform: capitalize;
+    border-radius: 0;
+    line-height: 1.1;
+    color: inherit;
+    padding: 0;
+  }
+}
+
+%LinkBrowse {
+  padding: 8px 10px 6px 10px;
+  display: block;
+}
+
+.link.browse-book {
+  @extend %LinkBrowse;
+  @extend %bold;
+  text-transform: capitalize;
+}
+
+.link.browse-book.draft {
+  pointer-events: none;
+  user-select: none;
+  opacity: 0.5;
+}
+
+.link.browse-chapter {
+  @extend %LinkBrowse;
+  @extend %bold;
+}
+
+.link.browse-page {
+  @extend %LinkBrowse;
+}

data/_sass/_list.scss

@@ -1,36 +1,37 @@
 
-.list.text-roller {
-  @extend %list-roller;
-  margin: 100px 0 30px 40px;
+.list.roller {
+  font-size: 1.6rem;
+  list-style: none;
+  display: grid;
+  padding: 0;
+  margin: 0;
 
-  &.pies {
-    margin: 0 0 30px;
+  &.split-3 {
+    grid-template-columns: repeat(3,1fr);
   }
 }
 
-.list.text-output {
-  @extend %list-output;
-
-  svg {
-    margin: 0 auto;
-  }
+.list.roller.input {
+  @extend %bold;
+  grid-template-columns: repeat(2,1fr);
 }
 
 .list.pies {
-  @include grid(3);
+  @include Grid(3);
   @extend %bold;
-  margin: 80px 0 0 -40px;
   list-style: none;
+  width: 100%;
   padding: 0;
 
-  @include ThemePies("culture-addicts",$addicts);
-  @include ThemePies("family-centric",$family);
-  @include ThemePies("receptive",$receptive);
-  @include ThemePies("value-seekers",$value);
-  @include ThemePies("next-generation",$next);
-  @include ThemePies("maybe-someday",$maybe);
-
   svg {
     margin: 0 auto;
   }
 }
+
+.list.scrollers {
+  grid-row-gap: 20px;
+  grid-column: 2 / 3;
+  list-style: none;
+  display: grid;
+  padding: 0;
+}

data/_sass/_site.scss

@@ -1,6 +1,6 @@
 
 .site {
-  background-color: $smoke;
+  background-color: map-get($color,smoke);
   position: relative;
   display: none;
   z-index: 1;
@@ -11,10 +11,10 @@
   }
 
   &.feed {
-    @extend %site-setup;
+    @extend %SiteSetup;
   }
 
   &.single {
-    @extend %site-setup;
+    @extend %SiteSetup;
   }
 }