futuro 0.7.4 → 0.7.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6d3aef0a3b0b9d36a517f676d904e109f9d8c92753404e06e9bade871a16369c
-  data.tar.gz: 28e89b9c17b1c7877c014ca616770b004c6a59962c49822cc9ce0a89e7d18ea4
+  metadata.gz: e9536d32ff08c4d39edf133d82334628fc779501638d875528573351db214ccb
+  data.tar.gz: f97ec988c9fc9fde760b40c75317e64ab0e33d12141bea094100f728a922b73d
 SHA512:
-  metadata.gz: db0bf47ed67a7d1632d56a904a579946454678fdcc6816c2ca871aeae19025f1b19bb6e79c584ec9c054b0dcd464906ae9b2a3edeb9337473b5232450774ed29
-  data.tar.gz: 29ba16be5287db7fac120e801e69edc1455f2962c3c670fd841c11572df14b4ac65b92bd99ab74c643ac99fe92d57b10c199140d4f6917341c00239dcf2e2c03
+  metadata.gz: ad8c66c23ba3a74f3225d5a0130ce35b52b05c835e6bc58cbd933d1f25b912c79b643ef3ea929bd405b98e66c701d3b30d48f8476e611e5e10a799c9d6618080
+  data.tar.gz: 66ed64490f2a442cb2e595d95c9a86879eeeb7f6477cc8b3fd7e76684eb07a5270f76194e8316e62713ce84fcdd436f7bf30f8de58eaa905ce00faace07e234f

data/_includes/artwork/animal/icon.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="70px" height="66px" viewBox="0 0 70 66" style="enable-background:new 0 0 70 66;" xml:space="preserve">
+<path d="M47.5,14.2L47.5,14.2l5.8,5.8l-4.4,4.4l-5.8-5.8L47.5,14.2z M54.9,21.6c0.8-0.8,0.8-2.2,0-3L49,12.7c-0.8-0.8-2.2-0.8-3,0
+	l-11.4,12l8.5,9.2L54.9,21.6z M20,50.2l-1.8-1.8l0.6-2.3l3.6,3.6L20,50.2z M17.6,41.9l-3,11.8l11.8-3l8-8.2l-8.6-9.1L17.6,41.9z
+	 M15.3,19.1c-1.5-1.5-1.4-4.1,0.2-5.7c1.4-1.4,3.9-1.9,5.7-0.2l18.4,19.9l-5.9,5.9L15.3,19.1z M46.3,51.7c-1.3,0-2.5-0.5-3.4-1.3
+	c1.7-0.5,3.4-1.8,3.5-4.7c0.6-0.2,2.6-0.1,4.9,0.3c0,0.2,0,3.6,0.6,5.7H46.3z M53.4,46.6c0-3.9-3.3-7.5-8-7l-4.5-4.8l-5.8,5.9
+	l4.2,4.6c-0.7,3.8,1.8,8.6,7,8.6h9.4C53.4,53.8,53.4,46.6,53.4,46.6"/>
+</svg>

data/_includes/artwork/orwell/animal/flob.scss

@@ -0,0 +1,5 @@
+
+.thingo {
+  background-color: red;
+  min-height: 2rem;
+}

data/_includes/artwork/orwell/animal/waldo.scss

@@ -0,0 +1,45 @@
+.tag {
+  &-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    font-size: 11px;
+
+    span:not(.hidden) {
+      display: inline-block;
+      color: #767676;
+    }
+
+    .tag-buttons__title {
+      padding-right: 0.5em;
+    }
+  }
+
+  &-button {
+    @extend %bold;
+    letter-spacing: normal;
+    display: inline-block;
+    max-width: 30ch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: all 0.1s;
+    border: 1px solid #767676;
+    border-radius: 11.5px;
+    text-decoration: none;
+    text-transform: uppercase;
+    padding: 5px 10px;
+    margin: 0.25em 0.5em 0.25em 0;
+
+    &:hover {
+      border-color: black;
+      color: black;
+    }
+
+    @media (min-width: 768px) {
+      font-size: 11px;
+      line-height: 13px;
+      border-radius: 12.5px;
+    }
+  }
+}

data/_includes/html/assign/page.liquid

@@ -0,0 +1,85 @@
+
+{% assign PageLayout  = page.layout     | replace : ' ','-'     | downcase %}
+{% assign PageBook    = page.collection | replace : ' ','-'     | downcase %}
+{% assign PageChapter = page.chapter    | replace : ' ','-'     | downcase %}
+{% assign PageTopic   = page.topic      | replace : ' ','-'     | downcase %}
+{% assign PageTitle   = page.title      | replace : ' ','-'     | downcase %}
+{% assign PageTag     = page.tag        | replace : ' ',' tag-' | prepend : ' tag-'     | downcase %}
+
+{% assign PageUrl     = page.url | replace : '.html','' | replace : '/index','' | slice: 1,999 %}
+{% assign PageShare   = PageUrl  | prepend : '/' | prepend : site.url %}
+
+{% assign PageArtwork = page.url | prepend : 'artwork'     | replace : '.html','' %}
+{% assign PageImage   = page.url | prepend : '/assets/img' | replace : '.html','' %}
+{% assign PageVideo   = page.url | prepend : '/assets/vid' | replace : '.html','' %}
+
+{% assign PageType    = page.type | prepend : ' type-' %}
+{% assign PageSplit   = page.type | prepend : 'split-' %}
+{% assign PageInfo    = page.type | append  : '-info' %}
+{% assign TypeChapter = page.type | append  : '-chapter' %}
+{% assign TypeWeight  = page.type | append  : '-weight' %}
+{% assign TypeIcon    = page.type | append  : '-icon' %}
+
+{% assign ChapterID   = page.chapter | replace : ' ','-' | append : '-' | downcase %}
+{% assign PageID      = page.title   | replace : ' ','-' | downcase %}
+{% assign ScrollID    = ChapterID     | append : PageID %}
+
+{% assign ChapterWrap  = page.chapter | prepend : '<div>' | append : '</div>' %}
+{% assign ChapterSplit = ChapterWrap | split : ' ' | join : '</div><div>' %}
+
+{% assign BookPath    = page.collection | replace : ' ','-' | prepend : 'artwork/' | downcase %}
+{% assign ChapterPath = page.chapter    | replace : ' ','-' | prepend : '/' | append : '/' | downcase %}
+
+{%- if page.type == 'home' -%}
+  {% assign PageIsHome = true %}
+{%- else -%}
+  {% assign PageIsHome = false %}
+{%- endif -%}
+
+{%- if page.type == 'book' -%}
+  {% assign PageIsBook = true %}
+{%- else -%}
+  {% assign PageIsBook = false %}
+{%- endif -%}
+
+{%- if page.type == 'chapter' -%}
+  {% assign PageIsChapter = true %}
+{%- else -%}
+  {% assign PageIsChapter = false %}
+{%- endif -%}
+
+{%- if page.type == 'topic' -%}
+  {% assign PageIsTopic = true %}
+{%- else -%}
+  {% assign PageIsTopic = false %}
+{%- endif -%}
+
+{%- if page.topic -%}
+  {% assign PageInTopic = true %}
+{%- else -%}
+  {% assign PageInTopic = false %}
+{%- endif -%}
+
+{%- if page.type == 'page' -%}
+  {% assign PageIsPage = true %}
+{%- else -%}
+  {% assign PageIsPage = false %}
+{%- endif -%}
+
+{%- unless SiteIsBook -%}
+  {% assign IconPath = BookPath | append : ChapterPath %}
+{%- else -%}
+  {% assign IconPath = ChapterPath | prepend : 'artwork' %}
+{%- endunless -%}
+
+{%- if page.pies -%}
+  {% assign ClipPies = true %}
+{%- endif -%}
+
+{% assign NoSubtitle = false %}
+
+{% unless page.pies %}
+  {% unless page.subtitle %}
+    {% assign NoSubtitle = true %}
+  {% endunless %}
+{% endunless %}

data/_includes/html/assign/site.liquid

@@ -0,0 +1,88 @@
+
+{% assign SiteInstall = site.setup.install | replace : ' ','-' | prepend : 'install-' | downcase %}
+{% assign SiteStyle   = site.setup.style   | replace : ' ','-' | prepend : 'style-'   | downcase %}
+
+{% assign Site         = 'html/site/' %}
+{% assign SitePage     = 'html/page/' %}
+{% assign SiteOverlay  = 'html/overlay/' %}
+{% assign SiteLayout   = 'html/layout/' %}
+
+{% assign SiteUtil     = SitePage    | append : 'util/' %}
+{% assign SiteContent  = SitePage    | append : 'content/' %}
+
+{% assign ContentLoop  = SiteContent | append : 'loop/' %}
+{% assign LoopArtwork  = ContentLoop | append : 'artwork/' %}
+{% assign LoopForm     = ContentLoop | append : 'form/' %}
+{% assign LoopHeader   = ContentLoop | append : 'header/' %}
+{% assign LoopScreen   = ContentLoop | append : 'screen/' %}
+
+{% assign SiteSvg = 'svg/site/' %}
+{% assign SvgLoad = SiteSvg | append : 'load/' %}
+{% assign SvgBtn  = SiteSvg | append : 'btn/' %}
+{% assign SvgIcon = SiteSvg | append : 'icon.liquid' %}
+
+{% assign LayoutType    = page.type       | replace : ' ','-' | prepend : ' type-'    | downcase %}
+{% assign LayoutBook    = page.collection | replace : ' ','-' | prepend : ' book-'    | downcase  %}
+{% assign LayoutChapter = page.chapter    | replace : ' ','-' | prepend : ' chapter-' | downcase %}
+{% assign LayoutTitle   = page.title      | replace : ' ','-' | prepend : ' title-'   | downcase %}
+{% assign LayoutTopic   = page.topic      | replace : ' ','-' | downcase %}
+
+{%- if site.setup.style == 'docs' -%}
+  {% assign SiteIsDoc = true %}
+{%- else -%}
+  {% assign SiteIsDoc = false %}
+{%- endif -%}
+
+{%- if site.setup.install == 'library' -%}
+  {% assign SiteIsLibrary = true %}
+{%- else -%}
+  {% assign SiteIsLibrary = false %}
+{%- endif -%}
+
+{%- if site.setup.install == 'book' -%}
+  {% assign SiteIsBook = true %}
+{%- else -%}
+  {% assign SiteIsBook = false %}
+{%- endif -%}
+
+{%- if site.setup.shareable == true -%}
+  {% assign SiteIsShare = true %}
+{%- else -%}
+  {% assign SiteIsShare = false %}
+{%- endif -%}
+
+{%- if site.setup.display == 'block' -%}
+  {% assign SiteIsLegacy = true %}
+{%- else -%}
+  {% assign SiteIsLegacy = false %}
+{%- endif -%}
+
+{%- if page.type == 'home' -%}
+  {% assign LayoutIsHome = true %}
+{%- else -%}
+  {% assign LayoutIsHome = false %}
+{%- endif -%}
+
+{%- if page.type == 'book' -%}
+  {% assign LayoutIsBook = true %}
+{%- else -%}
+  {% assign LayoutIsBook = false %}
+{%- endif -%}
+
+{%- if page.type == 'chapter' -%}
+  {% assign LayoutIsChapter = true %}
+{%- else -%}
+  {% assign LayoutIsChapter = false %}
+{%- endif -%}
+
+{%- if page.type == 'topic' -%}
+  {% assign LayoutIsTopic = true %}
+{%- else -%}
+  {% assign LayoutIsTopic = false %}
+{%- endif -%}
+
+{%- if page.type == 'overlay' -%}
+  {% assign LayoutIsOverlay = true %}
+{%- else -%}
+  {% assign LayoutIsOverlay = false %}
+{%- endif -%}

data/_includes/html/layout/loop.liquid

@@ -0,0 +1,32 @@
+
+{%- for page in loop -%}
+
+  {%- include html/assign/page.liquid -%}
+
+  {% if include.type == 'chapter' %}
+
+    {% unless PageInTopic or PageIsChapter %}
+
+      {% include {{ SiteLayout | append : 'type.liquid' }} %}
+
+    {% endunless %}
+
+  {% elsif include.type == 'topic' %}
+
+    {%- if include.chapter == page.chapter -%}
+
+      {% include {{ SiteLayout | append : 'type.liquid' }} %}
+
+    {%- endif -%}
+
+  {% else %}
+
+    {% unless PageInTopic %}
+
+      {% include {{ SiteLayout | append : 'type.liquid' }}  %}
+
+    {% endunless %}
+
+  {% endif %}
+
+{%- endfor -%}

data/_includes/html/layout/type.liquid

@@ -0,0 +1,16 @@
+
+{%- include html/assign/page.liquid -%}
+
+{% unless PageIsBook or PageIsTopic %}
+
+  {% if PageIsHome %}
+
+    {% include html/page/layout/home.liquid  %}
+
+  {%- else -%}
+
+    {% include html/page/layout/page.liquid  %}
+
+  {% endif %}
+
+{% endunless %}

data/_includes/html/overlay/about.liquid

@@ -1,5 +1,8 @@
 
-<h4 class="title overlay about">About</h4>
+<h4 class="title overlay-about">About</h4>
+
 <p>These guidelines have been created by the Barbican Studio, which is the in-house design team at the Barbican Centre, London. The Studio creates most of the visual material for the Centre. It is based in the Marketing Department and consists of four permanent designers.</p>
+
 <p>The current structure of the design team was created in 2011 and coincides with a major rebranding project undertaken by North. The philosophy of the team is based on the visual guidelines North created at the time. These set out a flexible system influenced by the Centre’s vision of ‘arts without boundaries’ and includes strong visual elements that allow freedom and diversity.</p>
-<p>For further information contact <a class="lnk" href="mailto:design@barbican.org.uk?subject=Branding enquiry">design@barbican.org.uk</a></p>
+
+<p>For further information contact <a class="link" href="mailto:design@barbican.org.uk?subject=Branding%20enquiry">design@barbican.org.uk</a></p>

data/_includes/html/overlay/browse/book.liquid

@@ -1,37 +1,26 @@
 
-<div class="col browse book">
+{%- unless SiteIsBook -%}
 
-  <div class="block browse-label head">
-    <p><strong>Book</strong></p>
-  </div>
-
-  {% assign loop = site.collections | sort: 'weight' %}
+  <div class="wrap browse-book">
 
-  {% for page in loop %}
+    <div class="title browse-book">Book</div>
 
-  {% assign weight = page.weight | append: ' ' %}
-  {% assign book = page.label %}
-  {% assign title = book | prepend: weight %}
-  {% assign url = book | prepend: '/' %}
+    {% assign loop = site.collections | sort: 'weight' %}
 
-    {%- unless page.label == 'posts' -%}
+    {% for item in loop %}
 
-      {% if page.live %}
+      {% assign ItemBook = item.label | replace : ' ','' | downcase %}
 
-        <div class="block browse-lnk">
-          <a href="{{ url }}" class="lnk browse-book book-{{ book }}">{{ title | truncate: 13 }}</a>
-        </div>
+      {% unless item.label == 'posts' %}
 
-        {% else %}
+        <a href="{% if item.live %}{{ item.label | prepend : '/' }}{% else %}/{% endif %}"
+           class="link browse-book {{ ItemBook | prepend : 'book-' }} {% unless item.live %}draft{% endunless %}">
+        {{ item.weight }} {{ item.label | truncate : 13 }}</a>
 
-        <div class="block browse-lnk">
-          <a href="/" class="lnk browse-book book-{{ book }} draft">{{ title | truncate: 13 }}</a>
-        </div>
+      {% endunless %}
 
-      {% endif %}
+    {% endfor %}
 
-    {%- endunless -%}
-
-  {% endfor %}
+  </div>
 
-</div>
+{%- endunless -%}

data/_includes/html/overlay/browse/chapter.liquid

@@ -1,36 +1,41 @@
 
-<div class="col browse chapter">
+<div class="wrap browse-chapter">
 
-  <div class="block browse-label head">
-    <p>Chapter</p>
-  </div>
+  <div class="title browse-chapter">Chapter</div>
 
   {% assign loop = site.collections | sort: 'weight' %}
 
-  {% for page in loop %}
-    {% if page.live %}
+  {% for item in loop %}
 
-      {% assign label = page.label %}
-      {% assign loop = site.[label] | sort: 'weight' %}
+    {% if item.live %}
 
-      <div class="block browse-chunk {{ label }}">
+      {% assign loop = site[item.label] | sort: 'weight' %}
 
-      {% for page in loop %}
-        {% if page.type == 'chapter' %}
-        {% assign book    = page.collection %}
-        {% assign chapter = page.chapter | replace: ' ','-' | downcase %}
-        {% assign weight  = page.weight | slice: 0,3 %}
+      {% assign ItemBook = item.label | replace : ' ','' | downcase %}
 
-        <div class="block browse-lnk">
-          <a href="{{ page.url | replace: '/index.html','' }}" class="lnk browse-chapter book-{{ book }} chapter-{{ chapter }}">{{ weight }} {{ page.chapter | truncate: 13 }}</a>
-        </div>
+      <div class="block browse-book {{ ItemBook | prepend : 'book-' }}">
 
-        {% endif %}
-      {% endfor %}
+        {% for item in loop %}
+
+          {% assign ItemBook    = item.collection | replace : ' ','' | downcase %}
+          {% assign ItemChapter = item.chapter    | replace : ' ','' | downcase %}
+          {% assign ItemUrl     = item.url        | replace : '/index.html','' %}
+          {% assign ItemWeight  = item.weight     | slice : 0,3 %}
+
+          {% if item.type == 'chapter' %}
+
+            <a href="{{ ItemUrl }}" class="link browse-chapter {{ ItemChapter | prepend : 'chapter-' }}">
+              {{ ItemWeight }} {% if SiteIsBook %}{{ item.chapter | truncate : 22 }}{% else %}{{ item.chapter | truncate : 13 }}{% endif %}
+            </a>
+
+          {% endif %}
+
+        {% endfor %}
 
       </div>
 
     {% endif %}
+
   {% endfor %}
 
 </div>

data/_includes/html/overlay/browse/page.liquid

@@ -1,58 +1,78 @@
 
-<div class="col browse page">
+<div class="wrap browse-page">
 
-  <div class="block browse-label head">
-    <p>Page</p>
-  </div>
+  <div class="title browse-page">Page</div>
 
   {% assign loop = site.collections | sort: 'weight' %}
 
-  {% for page in loop %}
+  {% for item in loop %}
+
+    {% if item.live %}
+
+      {% assign loop = site[item.label] | sort: 'weight' %}
+
+      {% assign ItemBook = item.label | replace : ' ','' | downcase %}
+
+      <div class="block browse-book {{ ItemBook | prepend : 'book-' }}">
+
+        {% for item in loop %}
+
+          {%- if item.type == 'chapter' -%}
+
+            {% assign ItemChapter = item.chapter | replace: ' ','' | downcase %}
+
+            <div class="block browse-chapter {{ ItemChapter | prepend : 'chapter-' }}">
+
+              {% for item in loop %}
+
+                {% assign QueryChapter = item.chapter | replace: ' ','' | downcase %}
+
+                {%- if item.type == 'page' -%}
 
-    {% if page.live %}
+                  {% unless item.topic %}
 
-    {% assign label = page.label %}
-    {% assign loop = site.[label] | sort: 'weight' %}
+                    {% if QueryChapter == ItemChapter %}
 
-    <div class="block browse-chunk {{ label }}">
+                      {% assign ItemTitle  = item.title   | replace : ' ','' | downcase %}
+                      {% assign ItemUrl    = item.url     | replace : '.html','' %}
+                      {% assign ItemWeight = item.weight  | slice : 0,5 %}
+                      {% assign SplitUrl   = ItemUrl      | split : '/' %}
+                      {% assign SplitSize  = SplitUrl     | size %}
+                      {% assign Counter    = 0 %}
 
-      {% for page in loop %}
+                      {%- for item in SplitUrl -%}
 
-        {%- if page.type == 'chapter' -%}
+                        {% assign Counter = Counter | plus : 1 %}
 
-          {% assign match = page.chapter | replace: ' ','-' %}
+                        {%- if Counter == SplitSize -%}
 
-          <div class="block browse-chunk {{ match | downcase }}">
+                          {% assign ItemPage = item %}
 
-            {% for page in loop %}
+                        {%- endif -%}
 
-              {% assign query = page.chapter | replace: ' ','-' %}
+                      {%- endfor -%}
 
-              {% if page.type == 'page' and query == match %}
+                      <a href="{{ ItemUrl }}" class="link browse-page {{ ItemPage | prepend : 'title-' }}">
 
-                {% unless page.topic %}
+                        {{ ItemWeight }} {% if SiteIsBook %}{{ item.title | truncate : 22 }}{% else %}{{ item.title | truncate : 13 }}{% endif %}
 
-                {% assign chapter = page.chapter | replace: ' ','-' | downcase %}
-                {% assign title   = page.title | downcase | replace: ' ','-' %}
-                {% assign weight  = page.weight | slice: 0,5 %}
+                      </a>
 
-                <div class="block browse-lnk">
-                  <a href="{{ page.url | replace: '.html','' }}" class="lnk browse-page chapter-{{ chapter }} title-{{ title }}">{{ weight }} {{ page.title | truncate: 13 }}</a>
-                </div>
+                    {% endif %}
 
-                {% endunless %}
+                  {% endunless %}
 
-              {% endif %}
+                {%- endif -%}
 
-            {% endfor %}
+              {% endfor %}
 
-          </div>
+            </div>
 
-        {%- endif -%}
+          {%- endif -%}
 
-      {% endfor %}
+        {% endfor %}
 
-    </div>
+      </div>
 
     {%- endif -%}
 

data/_includes/html/overlay/browse.liquid

@@ -1,10 +1,10 @@
 
-<h4 class="title overlay browse">Browse</h4>
+<h4 class="title overlay-browse">Browse</h4>
 
-<div class="block browse {{ site.setup.install | prepend: 'install-' }}">
+<div class="wrap browse-block {{ SiteInstall }}">
 
-  {%- include html/overlay/browse/book.liquid -%}
-  {%- include html/overlay/browse/chapter.liquid -%}
-  {%- include html/overlay/browse/page.liquid -%}
+  {%- include {{ SiteOverlay | append : 'browse/book.liquid' }} -%}
+  {%- include {{ SiteOverlay | append : 'browse/chapter.liquid' }} -%}
+  {%- include {{ SiteOverlay | append : 'browse/page.liquid' }} -%}
 
 </div>

data/_includes/html/overlay/load.liquid

@@ -1,20 +1,40 @@
 
-{%- include svg/site/load/load_1.svg -%}
-{%- include svg/site/load/load_2.svg -%}
-{%- include svg/site/load/load_3.svg -%}
+{%- include {{ SvgLoad | append : 'load_1.svg' }} -%}
+{%- include {{ SvgLoad | append : 'load_2.svg' }} -%}
+{%- include {{ SvgLoad | append : 'load_3.svg' }} -%}
 
 <script type="text/javascript">
 
 var SiteTl = gsap.timeline({ repeat : -1 });
 
 function LoadAnim() {
+
+  function Target(number) {
+    var output = Overlay.load.screen + ' ' + 'svg:nth-child(' + number + ')';
+    return output;
+  }
+
+  function SwitchOn(color) {
+    return {
+      display : "block",
+      fill : color
+    };
+  }
+
+  function SwitchOff() {
+    return {
+      clearProps : "display",
+      delay : Overlay.load.speed
+    };
+  }
+
   SiteTl
-  .set(`${Overlay.load.screen} svg:nth-child(1)`,{ display : "block", fill : "red" })
-  .set(`${Overlay.load.screen} svg:nth-child(1)`,{ clearProps : "display", delay : Overlay.load.speed })
-  .set(`${Overlay.load.screen} svg:nth-child(2)`,{ display : "block", fill : "blue" })
-  .set(`${Overlay.load.screen} svg:nth-child(2)`,{ clearProps : "display", delay : Overlay.load.speed })
-  .set(`${Overlay.load.screen} svg:nth-child(3)`,{ display : "block" })
-  .set(`${Overlay.load.screen} svg:nth-child(3)`,{ clearProps : "display", delay : Overlay.load.speed })
+  .set(Target(1),SwitchOn("red"))
+  .set(Target(1),SwitchOff())
+  .set(Target(2),SwitchOn("blue"))
+  .set(Target(2),SwitchOff())
+  .set(Target(3),SwitchOn("black"))
+  .set(Target(3),SwitchOff());
 }
 
 LoadAnim();

data/_includes/html/overlay/search.liquid

@@ -1,28 +1,36 @@
 
-<div class="title overlay search">
-  <input class="input text search" type="text" placeholder="Search">
+<div class="title overlay-search">
+
+  <input class="input text-search" type="text" placeholder="Search">
+
+  <div class="block overlay-search-svg">
+
+    {%- include {{ SvgIcon }} type="search" -%}
+
+  </div>  
+
 </div>
 
-<div class="block results"></div>
+<div class="wrap results"></div>
 
 <script>
 
 window.simpleJekyllSearch = new SimpleJekyllSearch({
-  searchInput: document.querySelector(".input.text.search"),
-  resultsContainer: document.querySelector(".block.results"),
-  json: "/search.json",
+  searchInput: document.querySelector(".input.text-search"),
+  resultsContainer: document.querySelector(".wrap.results"),
+  json: '/search.json',
   searchResultTemplate:
-  "<a href='/{url}' class='block results-entry book-{book} chapter-{chapter}'>
+  '<a href="/{url}" class="block results-entry book-{book} chapter-{chapter}">
     <h1>{title}</h1>
-    <div class='block results-info'>
-      <div class='block results-dot'></div>
+    <div class="block results-info">
+      <div class="block results-dot"></div>
       <h5>{url}</h5>
     </div>
-  </a>",
+  </a>',
   noResultsText:
-  "<div class='block results-entry none'>
+  '<div class="block results-entry none">
     <h1>No results found</h1>
-  </div>",
+  </div>',
   fuzzy: true,
   limit: 5
 });