Remove water droplet icon for now

SVG optimization and CSS fixes
Mention GitHub Pages
2026-01-01 15:55:40 +03:00 · 2016-11-30 08:44:59 -05:00 · 2016-11-14 09:04:38 -05:00 · 2016-11-09 10:12:12 -05:00 · 2016-11-09 10:06:22 -05:00 · 2016-11-09 10:05:54 -05:00
88 changed files with 1068 additions and 565 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 _site/
 .sass-cache/
 node_modules/
+Gemfile.lock

 # Compiled source #
 ###################
@@ -38,4 +39,4 @@ node_modules/
 .Spotlight-V100
 .Trashes
 ehthumbs.db
-Thumbs.db
+Thumbs.db
--- a/1
+++ b/1
@@ -1 +0,0 @@
-liquidmarkup.org
--- a/2
+++ b/2
@@ -1,3 +1,3 @@
 source 'https://rubygems.org'

-gem 'github-pages', group: :jekyll_plugins
+gem 'github-pages', '>=100', group: :jekyll_plugins
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,8 +1,7 @@
 GEM
  remote: https://rubygems.org/
  specs:
-    RedCloth (4.2.9)
-    activesupport (4.2.6)
+    activesupport (4.2.7)
      i18n (~> 0.7)
      json (~> 1.7, >= 1.7.7)
      minitest (~> 5.1)
@@ -13,121 +12,134 @@ GEM
      coffee-script-source
      execjs
    coffee-script-source (1.10.0)
-    colorator (0.1)
-    ethon (0.8.1)
+    colorator (1.1.0)
+    ethon (0.9.1)
      ffi (>= 1.3.0)
-    execjs (2.6.0)
+    execjs (2.7.0)
    faraday (0.9.2)
      multipart-post (>= 1.2, < 3)
-    ffi (1.9.10)
+    ffi (1.9.14)
+    forwardable-extended (2.6.0)
    gemoji (2.1.0)
-    github-pages (64)
-      RedCloth (= 4.2.9)
-      github-pages-health-check (= 1.1.0)
-      jekyll (= 3.0.3)
+    github-pages (104)
+      activesupport (= 4.2.7)
+      github-pages-health-check (= 1.2.0)
+      jekyll (= 3.3.0)
+      jekyll-avatar (= 0.4.2)
      jekyll-coffeescript (= 1.0.1)
-      jekyll-feed (= 0.4.0)
+      jekyll-feed (= 0.8.0)
      jekyll-gist (= 1.4.0)
-      jekyll-github-metadata (= 1.9.0)
-      jekyll-mentions (= 1.0.1)
+      jekyll-github-metadata (= 2.2.0)
+      jekyll-mentions (= 1.2.0)
      jekyll-paginate (= 1.1.0)
-      jekyll-redirect-from (= 0.10.0)
+      jekyll-redirect-from (= 0.11.0)
      jekyll-sass-converter (= 1.3.0)
-      jekyll-seo-tag (= 1.3.2)
-      jekyll-sitemap (= 0.10.0)
-      jekyll-textile-converter (= 0.1.0)
-      jemoji (= 0.5.1)
-      kramdown (= 1.10.0)
+      jekyll-seo-tag (= 2.1.0)
+      jekyll-sitemap (= 0.12.0)
+      jekyll-swiss (= 0.4.0)
+      jemoji (= 0.7.0)
+      kramdown (= 1.11.1)
      liquid (= 3.0.6)
+      listen (= 3.0.6)
      mercenary (~> 0.3)
-      rdiscount (= 2.1.8)
-      redcarpet (= 3.3.3)
-      rouge (= 1.10.1)
+      minima (= 2.0.0)
+      rouge (= 1.11.1)
      terminal-table (~> 1.4)
-    github-pages-health-check (1.1.0)
+    github-pages-health-check (1.2.0)
      addressable (~> 2.3)
      net-dns (~> 0.8)
      octokit (~> 4.0)
      public_suffix (~> 1.4)
      typhoeus (~> 0.7)
-    html-pipeline (2.3.0)
-      activesupport (>= 2, < 5)
+    html-pipeline (2.4.2)
+      activesupport (>= 2)
      nokogiri (>= 1.4)
    i18n (0.7.0)
-    jekyll (3.0.3)
-      colorator (~> 0.1)
+    jekyll (3.3.0)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
      jekyll-sass-converter (~> 1.0)
      jekyll-watch (~> 1.1)
      kramdown (~> 1.3)
      liquid (~> 3.0)
      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
      rouge (~> 1.7)
      safe_yaml (~> 1.0)
+    jekyll-avatar (0.4.2)
+      jekyll (~> 3.0)
    jekyll-coffeescript (1.0.1)
      coffee-script (~> 2.2)
-    jekyll-feed (0.4.0)
+    jekyll-feed (0.8.0)
+      jekyll (~> 3.3)
    jekyll-gist (1.4.0)
      octokit (~> 4.2)
-    jekyll-github-metadata (1.9.0)
-      octokit (~> 4.0)
-    jekyll-mentions (1.0.1)
+    jekyll-github-metadata (2.2.0)
+      jekyll (~> 3.1)
+      octokit (~> 4.0, != 4.4.0)
+    jekyll-mentions (1.2.0)
+      activesupport (~> 4.0)
      html-pipeline (~> 2.3)
      jekyll (~> 3.0)
    jekyll-paginate (1.1.0)
-    jekyll-redirect-from (0.10.0)
+    jekyll-redirect-from (0.11.0)
      jekyll (>= 2.0)
    jekyll-sass-converter (1.3.0)
      sass (~> 3.2)
-    jekyll-seo-tag (1.3.2)
-      jekyll (~> 3.0)
-    jekyll-sitemap (0.10.0)
-    jekyll-textile-converter (0.1.0)
-      RedCloth (~> 4.0)
-    jekyll-watch (1.3.1)
-      listen (~> 3.0)
-    jemoji (0.5.1)
+    jekyll-seo-tag (2.1.0)
+      jekyll (~> 3.3)
+    jekyll-sitemap (0.12.0)
+      jekyll (~> 3.3)
+    jekyll-swiss (0.4.0)
+    jekyll-watch (1.5.0)
+      listen (~> 3.0, < 3.1)
+    jemoji (0.7.0)
+      activesupport (~> 4.0)
      gemoji (~> 2.0)
      html-pipeline (~> 2.2)
-      jekyll (>= 2.0)
+      jekyll (>= 3.0)
    json (1.8.3)
-    kramdown (1.10.0)
+    kramdown (1.11.1)
    liquid (3.0.6)
    listen (3.0.6)
      rb-fsevent (>= 0.9.3)
      rb-inotify (>= 0.9.7)
-    mercenary (0.3.5)
-    mini_portile2 (2.0.0)
-    minitest (5.8.4)
+    mercenary (0.3.6)
+    mini_portile2 (2.1.0)
+    minima (2.0.0)
+    minitest (5.9.1)
    multipart-post (2.0.0)
    net-dns (0.8.0)
-    nokogiri (1.6.7.2)
-      mini_portile2 (~> 2.0.0.rc2)
-    octokit (4.3.0)
-      sawyer (~> 0.7.0, >= 0.5.3)
+    nokogiri (1.6.8.1)
+      mini_portile2 (~> 2.1.0)
+    octokit (4.6.0)
+      sawyer (~> 0.8.0, >= 0.5.3)
+    pathutil (0.14.0)
+      forwardable-extended (~> 2.6)
    public_suffix (1.5.3)
-    rb-fsevent (0.9.7)
+    rb-fsevent (0.9.8)
    rb-inotify (0.9.7)
      ffi (>= 0.5.0)
-    rdiscount (2.1.8)
-    redcarpet (3.3.3)
-    rouge (1.10.1)
+    rouge (1.11.1)
    safe_yaml (1.0.4)
-    sass (3.4.21)
-    sawyer (0.7.0)
-      addressable (>= 2.3.5, < 2.5)
+    sass (3.4.22)
+    sawyer (0.8.0)
+      addressable (>= 2.3.5, < 2.6)
      faraday (~> 0.8, < 0.10)
-    terminal-table (1.5.2)
+    terminal-table (1.7.3)
+      unicode-display_width (~> 1.1.1)
    thread_safe (0.3.5)
    typhoeus (0.8.0)
      ethon (>= 0.8.0)
    tzinfo (1.2.2)
      thread_safe (~> 0.1)
+    unicode-display_width (1.1.1)

 PLATFORMS
  ruby

 DEPENDENCIES
-  github-pages
+  github-pages (>= 100)

 BUNDLED WITH
-   1.11.2
+   1.13.1
--- a/_config.yml
+++ b/_config.yml
@@ -1,25 +1,34 @@
-title: Liquid Templating Engine
-description: "Liquid is a template language and accompanying rendering engine. It is built for security, so is perfect for rendering custom templates from your users."
-
-repository: https://github.com/Shopify/liquid
+title: Liquid template language
+description: Liquid is a template language and accompanying rendering engine. It is built for security, so is perfect for rendering custom templates from your users.

 # Build settings
-baseurl:                "" # the subpath of your site, e.g. /blog/
+baseurl:                /liquid # the subpath of your site, e.g. /blog/
 url:                    http://liquidmarkup.org # the base hostname & protocol for your site
-markdown:               redcarpet
-redcarpet:
-  extensions:           ["with_toc_data", "tables", "disable_indented_code_blocks", "no_intra_emphasis"]
-highlighter:            pygments
 permalink:              pretty
 exclude:
  - README.md
  - CNAME
+  - Gemfile
+  - Gruntfile.js
+  - package.json
  - node_modules
 keep_files:             ["css"]

+# Plugins
+gems:
+  - jekyll-redirect-from
+
 # Front matter defaults
 defaults:
  - scope:
      path: "" # an empty string here means all files in the project
    values:
      layout: default
+  - scope:
+      path: "filters"
+    values:
+      type: filter
+  - scope:
+      path: "tags"
+    values:
+      type: tag
--- a/_includes/home-banner.html
+++ b/_includes/home-banner.html
@@ -1,8 +1,12 @@
-<header class="home-banner">
+<div class="home-banner">
  <h1>Liquid</h1>
-  <p>Safe, customer facing template language for flexible web apps.</p>
+  <p>Safe, customer-facing template language for flexible web apps.</p>
  <p class="btn-row">
-    <a href="https://github.com/Shopify/liquid/archive/master.zip" target="_blank" class="btn"><i class="icon fa fa-2x fa-arrow-circle-down"></i>Download</a>
-    <a href="https://github.com/Shopify/liquid" target="_blank" class="btn"><i class="icon fa fa-2x fa-github"></i>View on Github</a>
+    <a href="https://github.com/Shopify/liquid/archive/master.zip" target="_blank" class="btn">
+      <span aria-hidden="true">{% include icons/desktop-download.svg %}</span> Download
+    </a>
+    <a href="https://github.com/Shopify/liquid" target="_blank" class="btn">
+      <span aria-hidden="true">{% include icons/mark-github.svg %}</span> View on GitHub
+    </a>
  </p>
-</header>
+</div>
--- a/_includes/home-users-grid.html
+++ b/_includes/home-users-grid.html
@@ -1,24 +1,24 @@
 <div class="home-users-grid">
  <div class="home-users-grid__item">
-    <a href="http://jekyllrb.com/" target="_blank">
-      <img src="/images/jekyll-logo.png" />
+    <a href="http://jekyllrb.com" target="_blank">
+      <img src="{{ '/images/jekyll-logo.png' | prepend: site.baseurl }}" alt="Jekyll logo" />
    </a>
  </div>
  <div class="home-users-grid__item">
-    <a href="http://www.desk.com/" target="_blank">
-      <img src="/images/salesforcedesk-logo.png" />
+    <a href="http://www.desk.com" target="_blank">
+      <img src="{{ '/images/salesforcedesk-logo.png' | prepend: site.baseurl }}" alt="Desk logo" />
    </a>
  </div>
  <div class="home-users-grid__item">
-    <a href="https://www.zendesk.com/ " target="_blank">
-      <img src="/images/zendesk-logo.png" />
+    <a href="//www.zendesk.com" target="_blank">
+      <img src="{{ '/images/zendesk-logo.png' | prepend: site.baseurl }}" alt="ZenDesk logo" />
    </a>
  </div>
  <div class="home-users-grid__item">
-    <a href="http://500px.com/" target="_blank">
-      <img src="/images/500px-logo.png" />
+    <a href="//500px.com" target="_blank">
+      <img src="{{ '/images/500px-logo.png' | prepend: site.baseurl }}" alt="500px logo" />
    </a>
  </div>
 </div>

-<p class="home-users-blurb">...and <a href="https://github.com/Shopify/liquid/wiki#who-uses-liquid" target="_blank">many more!</a></p>
+<p class="home-users-blurb">...and <a href="https://github.com/Shopify/liquid/wiki#who-uses-liquid" target="_blank">many more</a></p>
--- a/_includes/icons/desktop-download.svg
+++ b/_includes/icons/desktop-download.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>desktop-download</title><desc>Created with Sketch.</desc><path d="M4 6h3v-6h2v6h3l-4 4-4-4zm11-4h-4v1h4v8h-14v-8h4v-1h-4c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2h5.34c.55 0 1-.45 1-1v-9c0-.55-.45-1-1-1z" fill-rule="evenodd"/></svg>
--- a/_includes/icons/mark-github.svg
+++ b/_includes/icons/mark-github.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>mark-github</title><desc>Created with Sketch.</desc><path d="M8 0c-4.42 0-8 3.58-8 8 0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38l-.01-1.49c-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38 3.16-1.06 5.45-4.06 5.45-7.59 0-4.42-3.58-8-8-8z" fill-rule="evenodd"/></svg>
--- a/_includes/icons/three-bars.svg
+++ b/_includes/icons/three-bars.svg
@@ -0,0 +1 @@
+<svg width="12" height="16" viewBox="0 0 12 16" xmlns="http://www.w3.org/2000/svg"><title>three-bars</title><desc>Created with Sketch.</desc><path d="M11.41 9h-10.82c-.59 0-.59-.41-.59-1 0-.59 0-1 .59-1h10.81c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zm0-4h-10.82c-.59 0-.59-.41-.59-1 0-.59 0-1 .59-1h10.81c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zm-10.82 6h10.81c.59 0 .59.41.59 1 0 .59 0 1-.59 1h-10.81c-.59 0-.59-.41-.59-1 0-.59 0-1 .59-1z" fill="#000"/></svg>
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -1,15 +1,15 @@
 <div class="sidebar">
-  <div class="sidebar--logo">
-    <a href="/">Liquid</a>
-  </div>
-  <nav class="sidebar--nav"> {% assign sections = "basics, tags, filters" | split: ", " %}
+  <header class="sidebar__logo" role="banner">
+    <a href="{{ "/" | prepend: site.baseurl }}">Liquid</a>
+  </header>
+  <nav class="sidebar__nav"> {% assign sections = "basics, tags, filters" | split: ", " %}

    {% for section in sections %}
    <h3 class="section__header">{{ section | capitalize }}</h3>

    <ul class="section__links">
    {% for item in site.pages %}{% if item.url contains section/ %}{% unless item.path contains "index" %}
-      <li><a href="{{ item.url | prepend: site.baseurl }}" class="section__link{% if item.url contains page.url and page.url != "/" %} section__link--is-active {% endif %}">{{ item.title }}</a></li>
+      <li><a href="{{ item.url | prepend: site.baseurl }}" class="section__link{% if item.url contains page.url and page.url != '/' and page.type != 'index' %} section__link--is-active{% endif %}">{{ item.title }}</a></li>
    {% endunless %}{% endif %}{% endfor %}
    </ul>
    {% endfor %}
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1,29 +1,56 @@
 <!DOCTYPE html>
 <html>
  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
    <title>{% if page.title %}{{ page.title }} – {% endif %}{{ site.title }}</title>

-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
+    <meta name="description" content="{{ page.description | default: site.description }}">
+    <meta name="author" content="Shopify">
+
+    <meta name="robots" content="index, follow">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">

    <link rel="stylesheet" href="{{ '/css/main.css' | prepend: site.baseurl }}">
-    <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
-    <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
+    <link rel="icon" type="image/png" href="{{ '/images/icons/water-drop-32x.png' | prepend: site.baseurl }}" sizes="32x32">
+    <link rel="icon" type="image/png" href="{{ '/images/icons/water-drop-64x.png' | prepend: site.baseurl }}" sizes="64x64">
+    <link rel="canonical" href="{{ page.url | replace: 'index.html','' | prepend: site.baseurl | prepend: site.url }}">
    <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
+
+    <meta property="og:site_name" content="{{ site.title }}">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="{{ site.url | append: site.baseurl }}">
+    <meta property="og:title" content="{{ page.title | default: site.title }}">
+    <meta property="og:description" content="{{ page.description | default: site.description }}">
+
+    <meta name="twitter:site" content="{{ site.title }}">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:url" content="{{ site.url | append: site.baseurl }}">
+    <meta name="twitter:title" content="{{ page.title | default: site.title }}">
+    <meta name="twitter:description" content="{{ page.description | default: site.description }}">
+
+    <script src="{{ '/js/vendor/jquery-3.1.1.slim.min.js' | prepend: site.baseurl }}"></script>
  </head>

  <body>
+
    {% include sidebar.html %}

-    <div class="content__area">
+    <div class="content__overlay"></div>
+    <main class="content__area" role="main">
      <div class="content">
+        <button class="menu-button">
+          <span aria-hidden="true">{% include icons/three-bars.svg %}</span>
+          <span>Menu</span>
+        </button>
        <h1>{{ page.title }}</h1>
        {{ content }}
      </div>
-    </div>
-
+    </main>
+    <script src="{{ '/js/script.js' | prepend: site.baseurl }}"></script>
  </body>
 </html>
--- a/_sass/modules/_base.scss
+++ b/_sass/modules/_base.scss
@@ -61,12 +61,6 @@ li {
  }
 }

-/** Headings */
-
-h1, h2, h3, h4, h5, h6 {
-  font-weight: bold;
-}
-
 /** Links */
 a {
    color: $color-blue-5;
@@ -80,19 +74,22 @@ a {
    }
 }

+/** Headings */
+
 h1 {
  font-size: 2em;
+  font-weight: 300;
 }

 h2 {
  font-size: 1.5em;
-  text-decoration: underline;
+  font-weight: 300;
  margin-top: $spacing-unit;
 }

 h3 {
+  margin-top: $spacing-unit;
  font-size: 1em;
-  text-decoration: underline;
 }

 h4 {
@@ -112,6 +109,7 @@ blockquote {
 }

 pre, code {
+  font-family: Menlo, Monaco, monospace;
  font-size: 15px;
  border-radius: 3px;
  background-color: lighten($color-blue-1, 0.9);
--- a/_sass/modules/_buttons.scss
+++ b/_sass/modules/_buttons.scss
@@ -1,17 +1,42 @@
 .btn {
  color: $color-white;
+  fill: currentColor;
  display: flex;
  background: $color-blue-5;
  align-items: center;
+  justify-content: center;
  padding: $spacing-unit/4 $spacing-unit/2;
  border-radius: 8px;
  text-decoration: none;
+  text-align: center;
+  white-space: nowrap;

  &:hover {
    background: $color-blue-4;
    cursor: pointer;
    text-decoration: none;
  }
+
+  &:first-child {
+    margin-bottom: $spacing-unit / 2;
+  }
+
+  @include phone-and-up {
+    justify-content: center;
+
+    &:first-child {
+      justify-content: flex-start;
+      margin-bottom: 0;
+    }
+  }
+
+  svg {
+    margin-right: $spacing-unit / 4;
+    width: $base-font-size * 1.5;
+    height: $base-font-size * 1.5;
+    vertical-align: middle;
+  }
+
 }

 .btn:visited {
@@ -21,14 +46,39 @@
 .btn-row {
  display: flex;
  justify-content: center;
+  flex-direction: column;
  margin-bottom: 0;

-  .btn:not(:first-child) {
-    margin-left: $spacing-unit / 2;
+  @include phone-and-up {
+    flex-direction: row;
+
+    .btn:not(:first-child) {
+      margin-left: $spacing-unit / 2;
+    }
  }
 }

-.icon {
-  vertical-align: middle;
-  margin-right: $spacing-unit / 4;
+/*============================================================================
+  Menu button
+ ==============================================================================*/
+.menu-button {
+  display: inline-block;
+  font-size: $small-font-size;
+  background: none;
+  border: none;
+  margin: $spacing-unit / 2 0 $spacing-unit / 2 ($spacing-unit / 4 * -1);
+  padding: $spacing-unit / 4;
+  color: $color-slate;
+
+  @include tablet-and-up {
+    display: none;
+  }
+
+  svg {
+    margin-right: $spacing-unit / 4;
+    width: $base-font-size;
+    height: $base-font-size;
+    vertical-align: middle;
+  }
+
 }
--- a/_sass/modules/_content-area.scss
+++ b/_sass/modules/_content-area.scss
@@ -3,29 +3,20 @@
 }

 .highlight {
-
-  pre {
-    border-top: none;
-    border-radius: 0 0 3px 3px;
-  }
-
-  &:before {
-    content: "Example";
-    display: block;
-    padding: 8px 12px;
-    color: $color-slate;
-    background: #fff;
-    border: 1px solid $color-blue-2;
-    border-radius: 3px 3px 0 0;
-    font-size: 16px;
-    font-weight: bold;
-  }
-
-  // Label every second code block with "Output"
-  & + .highlight:nth-of-type(2n) {
-    &:before {
-      content: "Output";
-    }
-  }
-
+  background: lighten($color-blue-1, 1);
+}
+
+.code-label {
+  padding: 4px 12px;
+  margin-bottom: 0;
+  font-size: 15px;
+  background: darken($color-blue-1, 5);
+  border: 1px solid $color-blue-2;
+  border-bottom: none;
+  border-radius: 3px 3px 0 0;
+}
+
+.code-label + .highlighter-rouge .highlight {
+  border-top: none;
+  border-radius: 0 0 3px 3px;
 }
--- a/_sass/modules/_home-banner.scss
+++ b/_sass/modules/_home-banner.scss
@@ -5,7 +5,19 @@
  margin-bottom: $spacing-unit;

  h1 {
-    font-weight: bold;
-    font-size: 5em;
+    font-size: 4em;
+
+    // &:after {
+    //   content: '\01F4A7'; // Water droplet emoji
+    //   vertical-align: middle;
+    // }
+
+    @include phone-and-up {
+      font-size: 5em;
+    }
+  }
+
+  p {
+    color: lighten($color-slate, 20%);
  }
 }
--- a/_sass/modules/_layout.scss
+++ b/_sass/modules/_layout.scss
@@ -3,13 +3,39 @@ $sidebar-width: 250px;
 $logo-height: 130px;
 $wrapper-width: 800px;

+body {
+  // display: flex;
+  // flex-direction: column;
+
+  // @include tablet-and-up {
+  //   flex-direction: row;
+  // }
+}
+
+
 /*============================================================================
  Content Area
 ==============================================================================*/

 .content__area {
-  padding: $spacing-unit $spacing-unit $spacing-unit ($spacing-unit + $sidebar-width);
  width: 100%;
+
+  @include tablet-and-up {
+    padding: $spacing-unit $spacing-unit $spacing-unit ($spacing-unit + $sidebar-width);
+  }
+}
+
+.content__overlay {
+  background: rgba(0, 0, 0, 0.4);
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  z-index: 1;
+  display: none;
+}
+
+.content__overlay--is-active {
+  display: block;
 }

 .content {
@@ -26,19 +52,36 @@ $wrapper-width: 800px;
 .sidebar {
  background: $color-blue-5;
  width: $sidebar-width;
-  height: 100vh;
  position: fixed;
+  transform: translateX($sidebar-width * -1);
+  transition: all 0.15s ease;
+  z-index: 2;
+  height: 100vh;
+  -webkit-overflow-scrolling: touch;
+
+  @include tablet-and-up {
+    transform: translateX(0);
+  }
 }

-.sidebar--logo {
+.sidebar--is-visible {
+  transform: translateX(0);
+}
+
+.sidebar__logo {
  font-size: $base-font-size * 2;
-  font-weight: bold;
+  font-weight: 300;
  text-align: center;
  height: $logo-height;
  line-height: $logo-height;
  margin-bottom: 0;
  border-bottom: 1px solid $color-blue-4;

+  // &:after {
+  //   content: '\01F4A7'; // Water droplet emoji
+  //   vertical-align: middle;
+  // }
+
  a {
    color: $color-white;
    text-decoration: none;
@@ -49,7 +92,7 @@ $wrapper-width: 800px;
  }
 }

-.sidebar--nav {
+.sidebar__nav {
  padding: $spacing-unit $spacing-unit ($spacing-unit + $logo-height); // Add a bit more padding at the bottom for consistency.
  font-weight: bold;
  max-height: 100%;
@@ -81,10 +124,10 @@ $wrapper-width: 800px;
 }

 .section__header {
-  font-weight: bold;
  font-size: 1em;
  text-decoration: none;
  color: $color-white;
+  margin-top: 0;
  margin-bottom: $spacing-unit / 4;
 }

--- a/_sass/partials/_defaults.scss
+++ b/_sass/partials/_defaults.scss
@@ -1,6 +1,5 @@
-$base-font-family: 'Droid Sans', sans-serif;
+$base-font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
 $base-font-size:   18px;
 $small-font-size:  $base-font-size * 0.875;
 $base-line-height: 1.5;
 $spacing-unit:     40px;
-
--- a/_sass/partials/_helpers.scss
+++ b/_sass/partials/_helpers.scss
@@ -5,3 +5,12 @@
    clear: both;
   }
 }
+
+.visually-hidden {
+  position:absolute;
+  left:-10000px;
+  top:auto;
+  width:1px;
+  height:1px;
+  overflow:hidden;
+}
--- a/_sass/partials/_media-queries.scss
+++ b/_sass/partials/_media-queries.scss
@@ -0,0 +1,43 @@
+/*============================================================================
+  Media queries
+==============================================================================*/
+
+$phone-width: 375px;
+$tablet-width: 768px;
+$desktop-width: 1024px;
+
+@mixin phone {
+  @media (max-width: #{$phone-width}) {
+    @content;
+  }
+}
+
+@mixin phone-and-up {
+  @media (min-width: #{$phone-width}) {
+    @content;
+  }
+}
+
+@mixin phone-to-tablet {
+  @media (min-width: #{$phone-width}) and (max-width: #{$tablet-width - 1px}) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
+    @content;
+  }
+}
+
+@mixin tablet-and-up {
+  @media (min-width: #{$tablet-width}) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: #{$desktop-width}) {
+    @content;
+  }
+}
--- a/_sass/vendors/_syntax-highlighting.scss
+++ b/_sass/vendors/_syntax-highlighting.scss
@@ -2,7 +2,7 @@
 * Syntax highlighting styles
 */
 .highlight {
-    background: #fff;
+    // background: #fff;
    @extend %vertical-rhythm;

    .c     { color: #998; font-style: italic } // Comment
--- a/basics/_handles.md
+++ b/basics/_handles.md
@@ -1,48 +0,0 @@
---
-title: Handles
---
-
-A handle is used to access the attributes of a Liquid object. By default, the handle is the object's title in lowercase with any spaces and special characters replaced by hyphens (-).
-
-For example, a page with the title "About Us" can be accessed in Liquid via its handle `about-us` as shown below:
-
-{% highlight liquid %}
-{% raw %}
-<!-- the content of the About Us page -->
-{{ pages.about-us.content }}
-{% endraw %}
-{% endhighlight %}
-
-## Creating handles
-
-An object with the title "Shirt" will automatically be given the handle `shirt`. If there is already an object with the handle `shirt`, the handle will auto-increment. In other words, "Shirt" objects created after the first one will receive the handle `shirt-1`, `shirt-2`, and so on.
-
-Whitespace in titles is replaced by hyphens in handles. For example, the title "My Shiny New Title" will be given the handle `my-shiny-new-title`.
-
-Handles also determine the URL of their corresponding objects. For example, a page with the handle `about-us` would have the url `/pages/about-us`.
-
-Websites often rely on static handles for pages, posts, or objects. To preserve design elements and avoid broken links, if you modify the title of an object, **its handle is not automatically updated**. For example, if you were to change a page title from "About Us" to "About This Website", its handle would still be `about-us`.
-
-You can change an object's handle manually (TK how to change a handle manually)
-
-## Accessing handle attributes
-
-In many cases you may know the handle of a object whose attributes you want to access. You can access its attributes by pluralizing the name of the object, then using either the square bracket ( [ ] ) or dot ( . ) notation.
-
-<div class="code-block code-block--input">
-{% highlight liquid %}
-{% raw %}
-{{ pages.about-us.title }}
-{{ pages["about-us"].title }}
-{% endraw %}
-{% endhighlight %}
-</div>
-
-<div class="code-block code-block--output">
-{% highlight text %}
-About Us
-About Us
-{% endhighlight %}
-</div>
-
-In the example above, notice that we are using `pages` as opposed to `page`.
--- a/basics/index.html
+++ b/basics/index.html
@@ -1,4 +0,0 @@
---
-layout: default
---
-
--- a/basics/index.md
+++ b/basics/index.md
@@ -0,0 +1,3 @@
+---
+redirect_to: /liquid/basics/introduction
+---
--- a/basics/introduction.md
+++ b/basics/introduction.md
@@ -1,5 +1,6 @@
 ---
 title: Introduction
+description: An overview of objects, tags, and filters in the Liquid template language.
 ---

 Liquid code can be categorized into [**objects**](#objects), [**tags**](#tags), and [**filters**](#filters).
@@ -9,12 +10,14 @@ Liquid code can be categorized into [**objects**](#objects), [**tags**](#tags),
 **Objects** tell Liquid where to show content on a page. Objects and variable names are denoted by double curly braces: `{% raw %}{{{% endraw %}` and `{% raw %}}}{% endraw %}`.


+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ page.title }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 Introduction
 ```
@@ -27,38 +30,41 @@ In this case, Liquid is rendering the content of an object called `page.title`,

 The markup used in tags does not produce any visible text. This means that you can assign variables and create conditions and loops without showing any of the Liquid logic on the page.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% if user %}
  Hello {{ user.name }}!
 {% endif %}
-
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 Hello Adam!
 ```

 Tags can be categorized into three types:

- [Control flow](/tags/control-flow)
- [Iteration](/tags/iteration)
- [Variable assignments](/tags/variable)
+- [Control flow]({{ "/tags/control-flow" | prepend: site.baseurl }})
+- [Iteration]({{ "/tags/iteration" | prepend: site.baseurl }})
+- [Variable assignments]({{ "/tags/variable" | prepend: site.baseurl }})

 You can read more about each type of tag in their respective sections.


 ## Filters

-**Filters** change the output of a Liquid object. They are using within an output and are separated by a `|`.
+**Filters** change the output of a Liquid object. They are used within an output and are separated by a `|`.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "/my/fancy/url" | append: ".html" }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "/my/fancy/url" | append: ".html" }}
 ```
--- a/basics/operators.md
+++ b/basics/operators.md
@@ -1,5 +1,6 @@
 ---
 title: Operators
+description: Using operators to perform calculations in the Liquid template language.
 ---

 Liquid includes many logical and comparison operators.
--- a/basics/truthy-and-falsy.md
+++ b/basics/truthy-and-falsy.md
@@ -1,5 +1,6 @@
 ---
 title: Truthy and falsy
+description: An overview of boolean logic in the Liquid template language.
 ---

 In programming, anything that returns `true` in a conditional is called **truthy**. Anything that returns `false` in a conditional is called **falsy**. All object types can be described as either truthy or falsy.
@@ -18,14 +19,15 @@ In the example below, the string "Tobi" is not a boolean, but it is truthy in a
 {% raw %}
 {% assign tobi = "Tobi" %}

-{% if tobi == true %}
+{% if tobi %}
  This condition will always be true.
 {% endif %}
 {% endraw %}
 ```

-[Strings](/basics/types/#string), even when empty, are truthy. The example below will result in empty HTML tags if `settings.fp_heading` is empty:
+[Strings]({{ "/basics/types/#string" | prepend: site.baseurl }}), even when empty, are truthy. The example below will result in empty HTML tags if `settings.fp_heading` is empty:

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% if settings.fp_heading %}
@@ -34,27 +36,14 @@ In the example below, the string "Tobi" is not a boolean, but it is truthy in a
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```html
 <h1></h1>
 ```

-[EmptyDrops](/basics/types/#emptydrop) are also truthy. In the example below, if `settings.page` is an empty string or set to a hidden or deleted object, you will end up with an EmptyDrop. The result is an empty `div`:
-
-```liquid
-{% raw %}
-{% if pages[settings.page] %}
-  <div>{{ pages[settings.page].content }}</div>
-{% endif %}
-{% endraw %}
-```
-
-```html
-<div></div>
-```
-
 ## Falsy

-The falsy values in Liquid are [`nil`](/basics/types/#nil) and [`false`](/basics/types/#boolean).
+The falsy values in Liquid are [`nil`]({{ "/basics/types/#nil" | prepend: site.baseurl }}) and [`false`]({{ "/basics/types/#boolean" | prepend: site.baseurl }}).

 ## Summary

--- a/basics/types.md
+++ b/basics/types.md
@@ -1,5 +1,6 @@
 ---
 title: Types
+description: An overview of data types in the Liquid template language.
 ---

 Liquid objects can have one of six types:
@@ -9,9 +10,8 @@ Liquid objects can have one of six types:
 - [Boolean](#boolean)
 - [Nil](#nil)
 - [Array](#array)
- [EmptyDrop](#emptydrop)

-You can initialize Liquid variables with the [assign](/tags/#assign) or [capture](/tags/#capture) tags.
+You can initialize Liquid variables with the [assign]({{ "/tags/variable/#assign" | prepend: site.baseurl }}) or [capture]({{ "/tags/variable/#capture" | prepend: site.baseurl }}) tags.

 ## String

@@ -49,7 +49,7 @@ Booleans are either `true` or `false`. No quotations are necessary when declarin

 Nil is a special empty value that is returned when Liquid code has no results. It is **not** a string with the characters "nil".

-Nil is [treated as false](/basics/truthy-and-falsy) in the conditions of `if` blocks and other Liquid tags that check the truthfulness of a statement.
+Nil is [treated as false]({{ "/basics/truthy-and-falsy" | prepend: site.baseurl }}) in the conditions of `if` blocks and other Liquid tags that check the truthfulness of a statement.

 In the following example, if the user does not exist (that is, `user` returns `nil`), Liquid will not print the greeting:

@@ -63,12 +63,14 @@ In the following example, if the user does not exist (that is, `user` returns `n

 Tags or outputs that return `nil` will not print anything to the page.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 The current user is {{ user.name }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 The current user is
 ```
@@ -79,8 +81,9 @@ Arrays hold lists of variables of any type.

 ### Accessing items in arrays

-To access all the items in an array, you can loop through each item in the array using an [iteration tag](/tags/iteration/).
+To access all the items in an array, you can loop through each item in the array using an [iteration tag]({{ "/tags/iteration" | prepend: site.baseurl }}).

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 <!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
@@ -90,6 +93,7 @@ To access all the items in an array, you can loop through each item in the array
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {% raw %}
 Tobi Laura Tetsuro Adam
@@ -100,6 +104,7 @@ Tobi Laura Tetsuro Adam

 You can use square bracket `[` `]` notation to access a specific item in an array. Array indexing starts at zero.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 <!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
@@ -109,6 +114,7 @@ You can use square bracket `[` `]` notation to access a specific item in an arra
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 Tobi
 Laura
@@ -119,42 +125,4 @@ Adam

 You cannot initialize arrays using only Liquid.

-You can, however, use the [split](/filters/split) filter to break a string into an array of substrings.
-
-## EmptyDrop
-
-An EmptyDrop object is returned if you try to access a deleted object by name. In the example below, `page_1`, `page_2` and `page_3` are all EmptyDrop objects.
-
-```liquid
-{% raw %}
-{% assign variable = "hello" %}
-{% assign page_1 = pages[variable] %}
-{% assign page_2 = pages["does-not-exist"] %}
-{% assign page_3 = pages.this-handle-does-not-exist %}
-{% endraw %}
-```
-
-EmptyDrop objects only have one attribute, `empty?`, which is always *true*.
-
-Collections and pages that *do* exist do not have an `empty?` attribute. Their `empty?` is "falsy", which means that calling it inside an if statement will return *false*. When using an `unless` statement on existing collections and pages, `empty?` will return `true`.
-
-### Checking for emptiness
-
-Using the `empty?` attribute, you can check to see if an object exists or not before you access any of its attributes.
-
-```liquid
-{% raw %}
-{% unless pages.about.empty? %}
-  <!-- This will only print if the page with handle 'about' is not empty -->
-  <h1>{{ pages.frontpage.title }}</h1>
-  <div>{{ pages.frontpage.content }}</div>
-{% endunless %}
-{% endraw %}
-```
-
-If you don't check for emptiness first, Liquid might print empty HTML elements to the page:
-
-```html
-<h1></h1>
-<div></div>
-```
+You can, however, use the [split]({{ "/filters/split" | prepend: site.baseurl }}) filter to break a string into an array of substrings.
--- a/basics/variations.md
+++ b/basics/variations.md
@@ -0,0 +1,24 @@
+---
+title: Variations of Liquid
+description: An overview of the different installations of Liquid and how Liquid can change depending on where you're using it.
+---
+
+Liquid is a flexible, safe language, and is used in many different environments. Liquid was created for use in [Shopify](https://www.shopify.com) stores, and is also used extensively on [Jekyll](https://jekyllrb.com) websites. Over time, both Shopify and Jekyll have added their own objects, tags, and filters to Liquid. The most popular versions of Liquid that exist are **Liquid**, **Shopify Liquid**, and **Jekyll Liquid**.
+
+This site documents the latest version of **Liquid** including betas and release candidates — that is, Liquid as it exists outside of Shopify and Jekyll. If you download the Liquid repository or install it as a [gem](https://rubygems.org/gems/liquid), you will get access to whatever objects, tags, and filters are in the version of Liquid that you chose.
+
+## Shopify
+
+Shopify always uses the latest version of Liquid as a base, but Shopify adds a significant number of objects, tags, and filters to Liquid for use in merchants' stores. These include objects representing store, product, and customer information, and filters for displaying store data and manipulating storefront assets like product images.
+
+Shopify's version of Liquid is documented in the [Shopify Help Center](https://help.shopify.com/themes/liquid). If you want to try out Shopify's version of Liquid, you can [start a free trial of Shopify](https://www.shopify.com/signup) or use a sandbox like [DropPen](http://droppen.org/).
+
+## Jekyll
+
+[Jekyll](https://jekyllrb.com) is a static site generator, a command-line tool that creates websites by merging templates with content files. Jekyll uses Liquid as its template language, and adds a few objects, tags, and filters. These include objects representing content pages, tags for including snippets of content in others, and filters for manipulating strings and URLs.
+
+Jekyll also powers [GitHub Pages](https://pages.github.com/), a web hosting service that lets you push a Jekyll installation to a GitHub repository and have the resulting website published. This website is built using GitHub Pages.
+
+Jekyll might not be using the latest version of Liquid. This means that the tags and filters listed on this site may not work in Jekyll. Often the Jekyll project will wait for a stable release of Liquid rather than using a beta or release candidate version. To see what version of Liquid Jekyll is using, check the **runtime dependencies** section of [Jekyll's gem page](https://rubygems.org/gems/jekyll).
+
+Jekyll's version of Liquid is documented in the [Templates section of Jekyll's documentation](http://jekyllrb.com/docs/templates/). If you want to try out Jekyll's version of Liquid, you can clone the Jekyll project or install Jekyll as a gem and test Liquid on a static site.
--- a/basics/whitespace.md
+++ b/basics/whitespace.md
@@ -0,0 +1,80 @@
+---
+title: Whitespace control
+description: An overview of controlling whitespace between code in the Liquid template language.
+---
+
+In Liquid, you can include a hyphen in your tag syntax `{% raw %}{{-{% endraw %}`, `{% raw %}-}}{% endraw %}`, `{% raw %}{%-{% endraw %}`, and `{% raw %}-%}{% endraw %}` to strip whitespace from the left or right side of a rendered tag.
+
+Normally, even if it doesn't output text, any line of Liquid in your template will still output a blank line in your rendered HTML:
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{% assign my_variable = "tomato" %}
+{{ my_variable }}
+```
+{% endraw %}
+
+Notice the blank line before "tomato" in the rendered template:
+
+<p class="code-label">Output</p>
+``` text
+{% assign my_variable = "tomato" %}
+{{ my_variable }}
+```
+
+By including hyphens in your `assign` tag, you can strip the generated whitespace from the rendered template:
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{%- assign my_variable = "tomato" -%}
+{{ my_variable }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+``` text
+tomato
+```
+
+If you don't want any of your tags to output whitespace, as a general rule you can add hyphens to both sides of all your tags (`{% raw %}{%-{% endraw %}` and `{% raw %}-%}{% endraw %}`):
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{% assign username = "John G. Chalmers-Smith" %}
+{% if username and username.size > 10 %}
+  Wow, {{ username }}, you have a long name!
+{% else %}
+  Hello there!
+{% endif %}
+```
+{% endraw %}
+
+<p class="code-label">Output without whitespace control</p>
+``` text
+{% assign username = "John G. Chalmers-Smith" %}
+{% if username and username.size > 10 %}
+  Wow, {{ username }}, you have a long name!
+{% else %}
+  Hello there!
+{% endif %}
+```
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{%- assign username = "John G. Chalmers-Smith" -%}
+{%- if username and username.size > 10 -%}
+  Wow, {{ username }}, you have a long name!
+{%- else -%}
+  Hello there!
+{%- endif -%}
+```
+{% endraw %}
+
+<p class="code-label">Output with whitespace control</p>
+``` text
+Wow, John G. Chalmers-Smith, you have a long name!
+```
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -1,9 +1,13 @@
+---
+layout: null
+---

@charset "utf-8";

@import "partials/defaults";
@import "partials/colors";
@import "partials/helpers";
+@import "partials/media-queries";

@import "modules/base";
@import "modules/layout";
@@ -13,5 +17,3 @@
@import "modules/content-area";

@import "vendors/syntax-highlighting";
-
-
--- a/filters/abs.md
+++ b/filters/abs.md
@@ -0,0 +1,44 @@
+---
+title: abs
+description: Liquid filter that gets the absolute value of a number.
+---
+
+Returns the absolute value of a number.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ -17 | abs }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+17
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 4 | abs }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+4
+```
+
+`abs` will also work on a string if the string only contains a number.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "-19.86" | abs }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+19.86
+```
--- a/filters/append.md
+++ b/filters/append.md
@@ -1,21 +1,25 @@
 ---
 title: append
+description: Liquid filter that appends a string to another string.
 ---

 Concatenates two strings and returns the concatenated value.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "/my/fancy/url" | append: ".html" }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "/my/fancy/url" | append: ".html" }}
 ```

 `append` can also be used with variables:

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign filename = "/index.html" %}
@@ -23,6 +27,7 @@ Concatenates two strings and returns the concatenated value.
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {% assign filename = "/index.html" %}
 {{ "website.com" | append: filename }}
--- a/filters/capitalize.md
+++ b/filters/capitalize.md
@@ -1,27 +1,32 @@
 ---
 title: capitalize
+description: Liquid filter that capitalizes the first character in a string.
 ---

 Makes the first character of a string capitalized.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "title" | capitalize }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 Title
 ```

 `capitalize` only capitalizes the first character of the string, so later words are not affected:

- ```liquid
+ <p class="code-label">Input</p>
+```liquid
 {% raw %}
 {{ "my great title" | capitalize }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 My great title
 ```
--- a/filters/ceil.md
+++ b/filters/ceil.md
@@ -1,47 +1,56 @@
 ---
 title: ceil
+description: Liquid filter that gets the ceiling of a number by rounding up to the nearest integer.
 ---

 Rounds the input up to the nearest whole number. Liquid tries to convert the input to a number before the filter is applied.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 1.2 | ceil }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ 1.2 | ceil }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 2.0 | ceil }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ 2.0 | ceil }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 183.357 | ceil }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ 183.357 | ceil }}
 ```

 Here the input value is a string:

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "3.5" | ceil }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "3.5" | ceil }}
 ```
--- a/filters/compact.md
+++ b/filters/compact.md
@@ -0,0 +1,53 @@
+---
+title: compact
+description: Liquid filter that removes nil values from an array.
+---
+
+Removes any `nil` values from an array.
+
+For this example, assume `site.pages` is an array of content pages for a website, and some of these pages have an attribute called `category` that specifies their content category. If we `map` those categories to an array, some of the array items might be `nil` if any pages do not have a `category` attribute.
+
+
+<p class="code-label">Input</p>
+{% raw %}
+```liquid
+{% assign site_categories = site.pages | map: 'category' %}
+
+{% for category in site_categories %}
+  {{ category }}
+{% endfor %}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+```text
+  business
+  celebrities
+
+  lifestyle
+  sports
+
+  technology
+```
+
+By using `compact` when we create our `site_categories` array, we can remove all the `nil` values in the array.
+
+<p class="code-label">Input</p>
+{% raw %}
+```liquid
+{% assign site_categories = site.pages | map: 'category' | compact %}
+
+{% for category in site_categories %}
+  {{ category }}
+{% endfor %}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+```text
+  business
+  celebrities
+  lifestyle
+  sports
+  technology
+```
--- a/filters/date.md
+++ b/filters/date.md
@@ -1,37 +1,60 @@
 ---
 title: date
+description: Liquid filter that prints and formats dates.
 ---

-Converts a timestamp into another date format. The format for this syntax is the same as [`strftime`](//strftime.net).
+Converts a timestamp into another date format. The format for this syntax is the same as [`strftime`](http://strftime.net).

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ article.published_at | date: "%a, %b %d, %y" }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 Fri, Jul 17, 15
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ article.published_at | date: "%Y" }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 2015
 ```

 `date` works on strings if they contain well-formatted dates:

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "March 14, 2016" | date: "%b %d, %y" }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "March 14, 2016" | date: "%b %d, %y" }}
 ```
+
+To get the current time, pass the special word `"now"` (or `"today"`) to `date`:
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+This page was last updated at {{ "now" | date: "%Y-%m-%d %H:%M" }}.
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+This page was last updated at {{ "now" | date: "%Y-%m-%d %H:%M" }}.
+```
+
+Note that the value will be the current time of when the page was last generated from the template, not when the page is presented to a user if caching or static site generation is involved.
--- a/filters/default.md
+++ b/filters/default.md
@@ -1,23 +1,27 @@
 ---
 title: default
+description: Liquid filter that specifies a fallback in case a value doesn't exist.
 ---

 Allows you to specify a fallback in case a value doesn't exist. `default` will show its value if the left side is `nil`, `false`, or empty.

 In this example, `product_price` is not defined, so the default value is used.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ product_price | default: 2.99 }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 2.99
 ```

 In this example, `product_price` is defined, so the default value is not used.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign product_price = 4.99 %}
@@ -25,12 +29,14 @@ In this example, `product_price` is defined, so the default value is not used.
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 4.99
 ```

 In this example, `product_price` is empty, so the default value is used.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign product_price = "" %}
@@ -38,7 +44,7 @@ In this example, `product_price` is empty, so the default value is used.
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 2.99
 ```
-
--- a/filters/divided_by.md
+++ b/filters/divided_by.md
@@ -1,37 +1,102 @@
 ---
 title: divided_by
+description: Liquid filter that divides a number by another number.
 ---

 Divides a number by the specified number.

-The result is rounded down to the nearest integer (that is, the [floor](/filters/floor)).
+The result is rounded down to the nearest integer (that is, the [floor]({{ site.baseurl }}/filters/floor)) if the divisor is an integer.

-```liquid
-{% raw %}
-{{ 4 | divided_by: 2 }}
-{% endraw %}
-```
-
-```text
-{{ 4 | divided_by: 2 }}
-```
-
-```liquid
+<p class="code-label">Input</p>
 {% raw %}
+``` liquid
 {{ 16 | divided_by: 4 }}
-{% endraw %}
 ```
+{% endraw %}

-```text
+<p class="code-label">Output</p>
+``` text
 {{ 16 | divided_by: 4 }}
 ```

-```liquid
+<p class="code-label">Input</p>
 {% raw %}
+``` liquid
 {{ 5 | divided_by: 3 }}
+```
 {% endraw %}
+
+<p class="code-label">Output</p>
+``` text
+{{ 5 | divided_by: 3 }}
 ```

-```text
-{{ 5 | divided_by: 3 }}
+### Controlling rounding
+
+`divided_by` produces a result of the same type as the divisor — that is, if you divide by an integer, the result will be an integer. If you divide by a float (a number with a decimal in it), the result will be a float.
+
+For example, here the divisor is an integer:
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{{ 20 | divided_by: 7 }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+``` text
+{{ 20 | divided_by: 7 }}
+```
+
+Here it is a float:
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{{ 20 | divided_by: 7.0 }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+``` text
+{{ 20 | divided_by: 7.0 }}
+```
+
+### Changing variable types
+
+You might want to use a variable as a divisor, in which case you can't simply add `.0` to convert it to a float. In these cases, you can `assign` a version of your variable converted to a float using the `times` filter.
+
+In this example, we're dividing by a variable that contains an integer, so we get an integer:
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{% assign my_integer = 7 %}
+{{ 20 | divided_by: my_integer }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+``` text
+{% assign my_integer = 7 %}
+{{ 20 | divided_by: my_integer }}
+```
+
+Here, we [multiply]({{ site.baseurl}}/filters/times) the variable by `1.0` to get a float, then divide by the float instead:
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{% assign my_integer = 7 %}
+{% assign my_float = my_integer | times: 1.0 %}
+{{ 20 | divided_by: my_float }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+``` text
+{% assign my_integer = 7 %}
+{% assign my_float = my_integer | times: 1.0 %}
+{{ 20 | divided_by: my_float }}
 ```
--- a/filters/downcase.md
+++ b/filters/downcase.md
@@ -1,25 +1,30 @@
 ---
 title: downcase
+description: Liquid filter that coverts a string to lowercase.
 ---

 Makes each character in a string lowercase. It has no effect on strings which are already all lowercase.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Parker Moore" | downcase }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "Parker Moore" | downcase }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "apple" | downcase }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "apple" | downcase }}
 ```
--- a/filters/escape.md
+++ b/filters/escape.md
@@ -1,25 +1,30 @@
 ---
 title: escape
+description: Liquid filter that escapes URL-unsafe characters in a string.
 ---

 Escapes a string by replacing characters with escape sequences (so that the string can be used in a URL, for example). It doesn't change strings that don't have anything to escape.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Have you read 'James & the Giant Peach'?" | escape }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "Have you read 'James & the Giant Peach'?" | escape }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Tetsuro Takara" | escape }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "Tetsuro Takara" | escape }}
 ```
--- a/filters/escape_once.md
+++ b/filters/escape_once.md
@@ -1,25 +1,30 @@
 ---
 title: escape_once
+description: Liquid filter that escapes URL-unsafe characters in a string once.
 ---

 Escapes a string without changing existing escaped entities. It doesn't change strings that don't have anything to escape.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "1 < 2 & 3" | escape_once }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "1 < 2 & 3" | escape_once }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "1 &lt; 2 &amp; 3" | escape_once }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "1 &lt; 2 &amp; 3" | escape_once }}
 ```
--- a/filters/first.md
+++ b/filters/first.md
@@ -1,9 +1,11 @@
 ---
 title: first
+description: Liquid filter that returns the first item of an array.
 ---

 Returns the first item of an array.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
@@ -12,12 +14,14 @@ Returns the first item of an array.
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}

 {{ my_array.first }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
@@ -26,6 +30,7 @@ Returns the first item of an array.
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}

--- a/filters/floor.md
+++ b/filters/floor.md
@@ -1,47 +1,56 @@
 ---
 title: floor
+description: Liquid filter that gets the floor of a number by rounding down to the nearest integer.
 ---

 Rounds a number down to the nearest whole number. Liquid tries to convert the input to a number before the filter is applied.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 1.2 | floor }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ 1.2 | floor }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 2.0 | floor }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ 2.0 | floor }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 183.357 | floor }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ 183.357 | floor }}
 ```

 Here the input value is a string:

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "3.5" | floor }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "3.5" | floor }}
 ```
--- a/filters/index.html
+++ b/filters/index.html
@@ -1,10 +0,0 @@
---
-layout: default
---
-
-{% for doc in site.collections["filters"].docs %}
-  <h2 id="{{ doc.title | slugify }}">{{ doc.title }}</h2>
-  <div class="content">
-    {{ doc.content }}
-  </div>
-{% endfor %}
--- a/filters/index.md
+++ b/filters/index.md
@@ -0,0 +1,3 @@
+---
+redirect_to: /liquid/filters/abs
+---
--- a/filters/join.md
+++ b/filters/join.md
@@ -1,9 +1,11 @@
 ---
 title: join
+description: Liquid filter that joins an array of strings into a single string.
 ---

 Combines the items in an array into a single string using the argument as a separator.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
@@ -12,6 +14,7 @@ Combines the items in an array into a single string using the argument as a sepa
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {% assign beatles = "John, Paul, George, Ringo" | split: ", " %}

--- a/filters/last.md
+++ b/filters/last.md
@@ -1,9 +1,11 @@
 ---
 title: last
+description: Liquid filter that gets the last value in an array.
 ---

 Returns the last item of an array.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
@@ -12,12 +14,14 @@ Returns the last item of an array.
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}

 {{ my_array.last }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
@@ -26,6 +30,7 @@ Returns the last item of an array.
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}

--- a/filters/lstrip.md
+++ b/filters/lstrip.md
@@ -1,15 +1,18 @@
 ---
 title: lstrip
+description: Liquid filter that removes whitespace from the left side of a string.
 ---

 Removes all whitespaces (tabs, spaces, and newlines) from the beginning of a string. The filter does not affect spaces between words.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "          So much room for activities!          " | lstrip }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "          So much room for activities!          " | lstrip }}
 ```
--- a/filters/map.md
+++ b/filters/map.md
@@ -1,11 +1,13 @@
 ---
 title: map
+description: Liquid filter that creates an array of values by extracting a named property from an object.
 ---

 Creates an array of values by extracting the values of a named property from another object.

 In this example, assume the object `site.pages` contains all the metadata for a website. Using `assign` with the `map` filter creates a variable that contains only the values of the `category` properties of everything in the `site.pages` object.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign all_categories = site.pages | map: "category" %}
@@ -16,6 +18,7 @@ In this example, assume the object `site.pages` contains all the metadata for a
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 business
 celebrities
--- a/filters/minus.md
+++ b/filters/minus.md
@@ -1,35 +1,42 @@
 ---
 title: minus
+description: Liquid filter that subtracts one number from another.
 ---

 Subtracts a number from another number.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 4 | minus: 2 }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ 4 | minus: 2 }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 16 | minus: 4 }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ 16 | minus: 4 }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 183.357 | minus: 12 }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ 183.357 | minus: 12 }}
 ```
--- a/filters/modulo.md
+++ b/filters/modulo.md
@@ -1,35 +1,42 @@
 ---
 title: modulo
+description: Liquid filter that returns the remainder from a division operation.
 ---

 Returns the remainder of a division operation.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 3 | modulo: 2 }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ 3 | modulo: 2 }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 24 | modulo: 7 }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ 24 | modulo: 7 }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 183.357 | modulo: 12 }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ 183.357 | modulo: 12 }}
 ```
--- a/filters/newline_to_br.md
+++ b/filters/newline_to_br.md
@@ -1,9 +1,11 @@
 ---
 title: newline_to_br
+description: Liquid filter that converts newlines in an input string to HTML <br> tags.
 ---

 Replaces every newline (`\n`) with an HTML line break (`<br>`).

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% capture string_with_newlines %}
@@ -15,6 +17,7 @@ there
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```html
 {% capture string_with_newlines %}
 Hello
--- a/filters/plus.md
+++ b/filters/plus.md
@@ -1,35 +1,42 @@
 ---
 title: plus
+description: Liquid filter that adds a number to another number.
 ---

 Adds a number to another number.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 4 | plus: 2 }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ 4 | plus: 2 }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 16 | plus: 4 }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ 16 | plus: 4 }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 183.357 | plus: 12 }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ 183.357 | plus: 12 }}
 ```
--- a/filters/prepend.md
+++ b/filters/prepend.md
@@ -1,21 +1,25 @@
 ---
 title: prepend
+description: Liquid filter that prepends a string to the beginning of another string.
 ---

 Adds the specified string to the beginning of another string.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "apples, oranges, and bananas" | prepend: "Some fruit: " }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "apples, oranges, and bananas" | prepend: "Some fruit: " }}
 ```

 You can also `prepend` variables:

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign url = "liquidmarkup.com" %}
@@ -24,6 +28,7 @@ You can also `prepend` variables:
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {% assign url = "liquidmarkup.com" %}

--- a/filters/remove.md
+++ b/filters/remove.md
@@ -1,15 +1,18 @@
 ---
 title: remove
+description: Liquid filter that removes all occurences of a given substring from a string.
 ---

 Removes every occurrence of the specified substring from a string.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "I strained to see the train through the rain" | remove: "rain" }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "I strained to see the train through the rain" | remove: "rain" }}
 ```
--- a/filters/remove_first.md
+++ b/filters/remove_first.md
@@ -1,15 +1,18 @@
 ---
 title: remove_first
+description: Liquid filter that removes the first occurence of a given substring from a string.
 ---

 Removes only the first occurrence of the specified substring from a string.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "I strained to see the train through the rain" | remove_first: "rain" }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "I strained to see the train through the rain" | remove_first: "rain" }}
 ```
--- a/filters/replace.md
+++ b/filters/replace.md
@@ -1,15 +1,18 @@
 ---
 title: replace
+description: Liquid filter that replaces all occurences of a given substring in a string.
 ---

 Replaces every occurrence of an argument in a string with the second argument.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Take my protein pills and put my helmet on" | replace: "my", "your" }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "Take my protein pills and put my helmet on" | replace: "my", "your" }}
 ```
--- a/filters/replace_first.md
+++ b/filters/replace_first.md
@@ -1,9 +1,11 @@
 ---
 title: replace_first
+description: Liquid filter that replaces the first occurrence of a given substring in a string.
 ---

 Replaces only the first occurrence of the first argument in a string with the second argument.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign my_string = "Take my protein pills and put my helmet on" %}
@@ -11,6 +13,7 @@ Replaces only the first occurrence of the first argument in a string with the se
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {% assign my_string = "Take my protein pills and put my helmet on" %}
 {{ my_string | replace_first: "my", "your" }}
--- a/filters/reverse.md
+++ b/filters/reverse.md
@@ -1,9 +1,11 @@
 ---
 title: reverse
+description: Liquid filter that reverses an array, or a string converted to an array.
 ---

 Reverses the order of the items in an array. `reverse` cannot reverse a string.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
@@ -12,6 +14,7 @@ Reverses the order of the items in an array. `reverse` cannot reverse a string.
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}

@@ -20,12 +23,14 @@ Reverses the order of the items in an array. `reverse` cannot reverse a string.

 `reverse` cannot be used directly on a string, but you can split a string into an array, reverse the array, and rejoin it by chaining together filters:

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Ground control to Major Tom." | split: "" | reverse | join: "" }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "Ground control to Major Tom." | split: "" | reverse | join: "" }}
 ```
--- a/filters/round.md
+++ b/filters/round.md
@@ -1,35 +1,42 @@
 ---
 title: round
+description: Liquid filter that rounds a number to the nearest integer.
 ---

 Rounds an input number to the nearest integer or, if a number is specified as an argument, to that number of decimal places.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 1.2 | round }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ 1.2 | round }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 2.7 | round }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ 2.7 | round }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 183.357 | round: 2 }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ 183.357 | round: 2 }}
 ```
--- a/filters/rstrip.md
+++ b/filters/rstrip.md
@@ -1,15 +1,18 @@
 ---
 title: rstrip
+description: Liquid filter that removes all whitespace from the right side of a string.
 ---

 Removes all whitespace (tabs, spaces, and newlines) from the right side of a string.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "          So much room for activities!          " | rstrip }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "          So much room for activities!          " | rstrip }}
 ```
--- a/filters/size.md
+++ b/filters/size.md
@@ -1,19 +1,23 @@
 ---
 title: size
+description: Liquid filter that returns the number of characters in a string or the number of items in an array.
 ---

 Returns the number of characters in a string or the number of items in an array. `size` can also be used with dot notation (for example, `{% raw %}{{ my_string.size }}{% endraw %}`). This allows you to use `size` inside  tags such as conditionals.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Ground control to Major Tom." | size }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "Ground control to Major Tom." | size }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
@@ -22,6 +26,7 @@ Returns the number of characters in a string or the number of items in an array.
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}

--- a/filters/slice.md
+++ b/filters/slice.md
@@ -1,49 +1,58 @@
 ---
 title: slice
+description: Liquid filter that returns a substring from a given position in a string.
 ---

 Returns a substring of 1 character beginning at the index specified by the argument passed in. An optional second argument specifies the length of the substring to be returned.

 String indices are numbered starting from 0.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Liquid" | slice: 0 }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "Liquid" | slice: 0 }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Liquid" | slice: 2 }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "Liquid" | slice: 2 }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Liquid" | slice: 2, 5 }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "Liquid" | slice: 2, 5 }}
 ```

 If the first parameter is a negative number, the indices are counted from the end of the string:

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Liquid" | slice: -3, 2 }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "Liquid" | slice: -3, 2 }}
 ```
--- a/filters/sort.md
+++ b/filters/sort.md
@@ -1,9 +1,11 @@
 ---
 title: sort
+description: Liquid filter that sorts an array in case-sensitive order.
 ---

 Sorts items in an array by a property of an item in the array. The order of the sorted array is case-sensitive.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}
@@ -12,6 +14,7 @@ Sorts items in an array by a property of an item in the array. The order of the
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}

--- a/filters/sort_natural.md
+++ b/filters/sort_natural.md
@@ -0,0 +1,20 @@
+---
+title: sort_natural
+description: Liquid filter that sorts an array in case-insensitive order.
+---
+
+Sorts items in an array by a property of an item in the array.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}
+
+{{ my_array | sort_natural | join: ", " }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+giraffe, octopus, Sally Snake, zebra
+```
--- a/filters/split.md
+++ b/filters/split.md
@@ -1,9 +1,11 @@
 ---
 title: split
+description: Liquid filter that splits a string into an array using separators.
 ---

 Divides an input string into an array using the argument as a separator. `split` is commonly used to convert comma-separated items from a string to an array.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
@@ -14,6 +16,7 @@ Divides an input string into an array using the argument as a separator. `split`
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {% assign beatles = "John, Paul, George, Ringo" | split: ", " %}

--- a/filters/strip.md
+++ b/filters/strip.md
@@ -1,15 +1,18 @@
 ---
 title: strip
+description: Liquid filter that removes whitespace from the left and right sides of a string.
 ---

 Removes all whitespace (tabs, spaces, and newlines) from both the left and right side of a string. It does not affect spaces between words.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "          So much room for activities!          " | strip }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "          So much room for activities!          " | strip }}
 ```
--- a/filters/strip_html.md
+++ b/filters/strip_html.md
@@ -1,15 +1,18 @@
 ---
 title: strip_html
+description: Liquid filter that removes HTML tags from a string.
 ---

 Removes any HTML tags from a string.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Have <em>you</em> read <strong>Ulysses</strong>?" | strip_html }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "Have <em>you</em> read <strong>Ulysses</strong>?" | strip_html }}
 ```
--- a/filters/strip_newlines.md
+++ b/filters/strip_newlines.md
@@ -1,9 +1,11 @@
 ---
 title: strip_newlines
+description: Liquid filter that removes newline characters from a string.
 ---

 Removes any newline characters (line breaks) from a string.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% capture string_with_newlines %}
@@ -15,6 +17,7 @@ there
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```html
 {% capture string_with_newlines %}
 Hello
@@ -23,4 +26,3 @@ there

 {{ string_with_newlines | strip_newlines }}
 ```
-
--- a/filters/times.md
+++ b/filters/times.md
@@ -1,35 +1,42 @@
 ---
 title: times
+description: Liquid filter that multiplies a number by another number.
 ---

 Multiplies a number by another number.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 3 | times: 2 }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ 3 | times: 2 }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 24 | times: 7 }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ 24 | times: 7 }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 183.357 | times: 12 }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ 183.357 | times: 12 }}
 ```
--- a/filters/truncate.md
+++ b/filters/truncate.md
@@ -1,15 +1,52 @@
 ---
 title: truncate
+description: Liquid filter that truncates a string to a given number of characters.
 ---

 `truncate` shortens a string  down to the number of characters passed as a parameter. If the number of characters specified is less than the length of the string, an ellipsis (...) is appended to the string and is included in the character count.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Ground control to Major Tom." | truncate: 20 }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "Ground control to Major Tom." | truncate: 20 }}
 ```
+
+### Custom ellipsis
+
+`truncate` takes an optional second parameter that specifies the sequence of characters to be appended to the truncated string. By default this is an ellipsis (...), but you can specify a different sequence.
+
+The length of the second parameter counts against the number of characters specified by the first parameter. For example, if you want to truncate a string to exactly 10 characters, and use a 3-character ellipsis, use **13** for the first parameter of `truncate`, since the ellipsis counts as 3 characters.
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{{ "Ground control to Major Tom." | truncate: 25, ", and so on" }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+``` text
+{{ "Ground control to Major Tom." | truncate: 25, ", and so on" }}
+```
+
+### No ellipsis
+
+You can truncate to the exact number of characters specified by the first parameter and show no trailing characters by passing a blank string as the second parameter:
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{{ "Ground control to Major Tom." | truncate: 20, "" }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+``` text
+{{ "Ground control to Major Tom." | truncate: 20, "" }}
+```
--- a/filters/truncatewords.md
+++ b/filters/truncatewords.md
@@ -1,15 +1,50 @@
 ---
 title: truncatewords
+description: Liquid filter that truncates a string to the given number of words.
 ---

 Shortens a string down to the number of words passed as the argument. If the specified number of words is less than the number of words in the string, an ellipsis (...) is appended to the string.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Ground control to Major Tom." | truncatewords: 3 }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "Ground control to Major Tom." | truncatewords: 3 }}
 ```
+
+### Custom ellipsis
+
+`truncatewords` takes an optional second parameter that specifies the sequence of characters to be appended to the truncated string. By default this is an ellipsis (...), but you can specify a different sequence.
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{{ "Ground control to Major Tom." | truncatewords: 3, "--" }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+``` text
+{{ "Ground control to Major Tom." | truncatewords: 3, "--" }}
+```
+
+### No ellipsis
+
+You can avoid showing trailing characters by passing a blank string as the second parameter:
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{{ "Ground control to Major Tom." | truncatewords: 3, "" }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+``` text
+{{ "Ground control to Major Tom." | truncatewords: 3, "" }}
+```
--- a/filters/uniq.md
+++ b/filters/uniq.md
@@ -1,9 +1,11 @@
 ---
 title: uniq
+description: Liquid filter that removes duplicate items from an array.
 ---

 Removes any duplicate elements in an array.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign my_array = "ants, bugs, bees, bugs, ants" | split: ", " %}
@@ -12,6 +14,7 @@ Removes any duplicate elements in an array.
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {% assign my_array = "ants, bugs, bees, bugs, ants" | split: ", " %}

--- a/filters/upcase.md
+++ b/filters/upcase.md
@@ -1,25 +1,30 @@
 ---
 title: upcase
+description: Liquid filter that capitalizes every character in a string.
 ---

 Makes each character in a string uppercase. It has no effect on strings which are already all uppercase.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Parker Moore" | upcase }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "Parker Moore" | upcase }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "APPLE" | upcase }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "APPLE" | upcase }}
 ```
--- a/filters/url_decode.md
+++ b/filters/url_decode.md
@@ -0,0 +1,18 @@
+---
+title: url_decode
+description: Liquid filter that decodes percent-encoded characters in a string.
+---
+
+Decodes a string that has been encoded as a URL or by [`url_encode`]({{ '/filters/url_encode' | prepend: site.baseurl }}).
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "%27Stop%21%27+said+Fred" | url_decode }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+'Stop!' said Fred
+```
--- a/filters/url_encode.md
+++ b/filters/url_encode.md
@@ -1,25 +1,30 @@
 ---
 title: url_encode
+description: Liquid filter that encodes URL-unsafe characters in a string.
 ---

 Converts any URL-unsafe characters in a string into percent-encoded characters.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "john@liquid.com" | url_encode }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "john@liquid.com" | url_encode }}
 ```

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Tetsuro Takara" | url_encode }}
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 {{ "Tetsuro Takara" | url_encode }}
 ```
--- a/images/icons/water-drop-128x.png
+++ b/images/icons/water-drop-128x.png
--- a/images/icons/water-drop-32x.png
+++ b/images/icons/water-drop-32x.png
--- a/images/icons/water-drop-64x.png
+++ b/images/icons/water-drop-64x.png
--- a/index.md
+++ b/index.md
@@ -1,16 +1,14 @@
 ---
 layout: default
+description: Documentation for the Liquid template language, created by Shopify.
 ---

 {% include home-banner.html %}

-## What is Liquid?
-
 Liquid is an open-source template language created by [Shopify](https://www.shopify.com) and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.

-Liquid has been in production use since June 2006 and is now used by many other hosted web applications.
+Liquid has been in production use at Shopify since 2006 and is now used by many other hosted web applications.

-## Who uses Liquid?
+## Used by

 {% include home-users-grid.html %}
-
--- a/js/script.js
+++ b/js/script.js
@@ -0,0 +1,12 @@
+$menuButton = $(".menu-button");
+$sidebar = $(".sidebar");
+$contentOverlay = $(".content__overlay");
+
+
+$(document).ready(function() {
+
+  $menuButton.add($contentOverlay).on("click", function() {
+    $sidebar.toggleClass("sidebar--is-visible");
+    $contentOverlay.toggleClass("content__overlay--is-active");
+  });
+})
--- a/js/vendor/jquery-3.1.1.slim.min.js
+++ b/js/vendor/jquery-3.1.1.slim.min.js
--- a/tags/_theme.md
+++ b/tags/_theme.md
@@ -1,238 +0,0 @@
---
-title: Theme
---
-
-
-Theme Tags have various functions, including:
-
- Outputting template-specific HTML markup
- Telling the theme which layout and snippets to use
- Splitting a returned array into multiple pages.
-
-
-### comment
-
-<p>Allows you to leave un-rendered code inside a Liquid template. Any text within the opening and closing <code>comment</code> blocks will not be output, and any Liquid code within will not be executed.</p>     
-
-<div class="code-block code-block--input">
-{% highlight html %}{% raw %}
-  My name is {% comment %}super{% endcomment %} Shopify.
-{% endraw %}{% endhighlight %}
-</div>
-
-<div class="code-block code-block--output">
-{% highlight html %}{% raw %}
-My name is Shopify.
-{% endraw %}{% endhighlight %}
-</div>
-
-### include
-
-Inserts a snippet from the **snippets** folder of a theme. 
-
-{% highlight html %}{% raw %}
-{% include 'snippet-name' %}
-{% endraw %}{% endhighlight %}
-
-Note that the <tt>.liquid</tt> extension is omitted in the above code. 
-
-When a snippet is included, the code inside it will have access to the variables within its parent template. 
-
-<h3 id="multi-variable-snippet">Including multiple variables in a snippet</h3>
-
-There are two ways to include multiple variables in a snippet. You can assign and include them on different lines:
-
-{% highlight html %}{% raw %}
-{% assign snippet_variable = 'this is it' %}
-{% assign snippet_variable_two = 'this is also it' %}
-{% include 'snippet' %}
-{% endraw %}{% endhighlight %}
-
-Or you can consolidate them into one line of code:
-
-{% highlight html %}{% raw %}
-{% include 'snippet', snippet_variable: 'this is it', snippet_variable_two: 'this is also it' %}
-{% endraw %}{% endhighlight %}
-
-<h2 class="parameter">parameters <span>include</span></h2>
-
-### with
-
-The <code>with</code> parameter assigns a value to a variable inside a snippet that shares the same name as the snippet. 
-
-For example, we can have a snippet named **color.liquid** which contains the following:
-
-{% highlight html %}{% raw %}
-color: '{{ color }}'
-shape: '{{ shape }}'
-{% endraw %}{% endhighlight %}
-
-Within **theme.liquid**, we can include the **color.liquid** snippet as follows:
-
-{% highlight html %}{% raw %}
-{% assign shape = 'circle' %}
-{% include 'color' %}
-{% include 'color' with 'red' %}
-{% include 'color' with 'blue' %}
-{% assign shape = 'square' %}
-{% include 'color' with 'red' %}
-{% endraw %}{% endhighlight %}
-
-The output will be:
-
-{% highlight html %}{% raw %}
-color: shape: 'circle'
-color: 'red' shape: 'circle'
-color: 'blue' shape: 'circle'
-color: 'red' shape: 'square'
-{% endraw %}{% endhighlight %}
-
-### form
-
-Creates an HTML <code>&#60;form&#62;</code> element with all the necessary attributes (action, id, etc.) and <code>&#60;input&#62;</code> to submit the form successfully. 
-
-<h2 class="parameter">parameters <span>form</span></h2>
-
-### new_comment
-
-Generates a form for creating a new comment in the <a href="/themes/theme-development/templates/article-liquid/">article.liquid</a> template. Requires the <code>article</code> object as a parameter. 
-
-<p class="input">Input</p>
-<div>
-{% highlight html %}{% raw %}
-{% form "new_comment", article %}
-...
-{% endform %}
-{% endraw %}{% endhighlight %}
-</div>
-
-
-<p class="output">Output</p>
-<div>
-{% highlight html %}{% raw %}
-<form accept-charset="UTF-8" action="/blogs/news/10582441-my-article/comments" class="comment-form" id="article-10582441-comment-form" method="post">
-	<input name="form_type" type="hidden" value="new_comment" />
-	<input name="utf8" type="hidden" value="✓" />
-	...
-</form>
-{% endraw %}{% endhighlight %}
-</div>
-
-### layout
-
-Loads an alternate template file from the **layout** folder of a theme. If no alternate layout is defined, the **theme.liquid** template is loaded by default. 
-
-{% highlight html %}{% raw %}
-<!-- loads the templates/alternate.liquid template -->
-{% layout 'alternate' %}
-{% endraw %}{% endhighlight %}
-
-If you don't want **any** layout to be used on a specific template, you can use <code>none</code>.
-
-{% highlight html %}{% raw %}
-{% layout none %}
-{% endraw %}{% endhighlight %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-### paginate
-
-Splitting products, blog articles, and search results across multiple pages is a necessary component of theme design as you are limited to 50 results per page in any <a href="/themes/liquid-documentation/tags/iteration-tags/#for">for</a> loop. 
-
-The <code>paginate</code> tag works in conjunction with the <code> for </code> tag to split content into numerous pages. It must wrap a <code>for</code> tag block that loops through an array, as shown  in the example below:
-
-{% highlight html %}{% raw %}
-{% paginate collection.products by 5 %}  
-  {% for product in collection.products %}
-    <!--show product details here -->
-  {% endfor %}
-{% endpaginate %}
-{% endraw %}{% endhighlight %}
-
-The <code>by</code> parameter is followed by an integer <strong>between 1 and 50</strong> that tells the <code>paginate</code> tag how many results it should output per page. 
-
-
-Within <code>paginate</code> tags, you can access attributes of the <a href="/themes/liquid-documentation/objects/paginate/">paginate</a> object. This includes the attributes to output the links required to navigate within the generated pages.
-
-
-{% comment %}
-
-Accessing any attributes of the array you are paginating <em>before</em> the opening <code>paginate</code> tag will cause errors. To avoid this, make sure any variables 
-
-
-**Bad Example**
-<div>
-{% highlight html %}{% raw %}
-{{ collection.title }}
-{% paginate collection.products by 5 %}  
-  {% for product in collection.products %}
-		{{ product.title }}
-  {% endfor %}
-{% endpaginate %}
-{% endraw %}{% endhighlight %}
-</div>
-
-
-**Good Example**
-<div>
-{% highlight html %}{% raw %}
-{% paginate collection.products by 5 %}  
-  {% for product in collection.products %}
-    <!--show product details here -->
-  {% endfor %}
-{% endpaginate %}
-{% endraw %}{% endhighlight %}
-</div>
-
-{% endcomment %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-### raw
-
-<p>Allows output of Liquid code on a page without being parsed.</p>
-
-<p class="input">Input</p>
-
-<div>
-<div class="highlight"><pre><code class="html">&#123;% raw %&#125;&#123;&#123; 5 | plus: 6 &#125;&#125;&#123;% endraw %&#125; is equal to 11.</code></pre></div>
-</div>
-
-<p class="output">Output</p>
-
-<div>
-<div class="highlight"><pre><code class="html">&#123;&#123; 5 | plus: 6 &#125;&#125; is equal to 11.</code></pre></div>
-</div>
-
-
-
--- a/tags/control-flow.md
+++ b/tags/control-flow.md
@@ -1,35 +1,15 @@
 ---
 title: Control flow
+description: An overview of control flow and conditional tags in the Liquid template language.
 ---

 Control flow tags can change the information Liquid shows using programming logic.

-## case/when
-
-Creates a switch statement to compare a variable with different values. `case` initializes the switch statement, and `when` compares its values.
-
-```liquid
-{% raw %}
-{% assign handle = 'cake' %}
-{% case handle %}
-  {% when 'cake' %}
-     This is a cake
-  {% when 'cookie' %}
-     This is a cookie
-  {% else %}
-     This is not a cake nor a cookie
-{% endcase %}
-{% endraw %}
-```
-
-```text
-This is a cake
-```
-
 ## if

 Executes a block of code only if a certain condition is `true`.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% if product.title == 'Awesome Shoes' %}
@@ -38,6 +18,7 @@ Executes a block of code only if a certain condition is `true`.
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 These shoes are awesome!
 ```
@@ -46,6 +27,7 @@ These shoes are awesome!

 The opposite of `if` – executes a block of code only if a certain condition is **not** met.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% unless product.title == 'Awesome Shoes' %}
@@ -54,6 +36,7 @@ The opposite of `if` – executes a block of code only if a certain condition is
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 These shoes are not awesome.
 ```
@@ -72,6 +55,7 @@ This would be the equivalent of doing the following:

 Adds more conditions within an `if` or `unless` block.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 <!-- If customer.name = 'anonymous' -->
@@ -85,6 +69,31 @@ Adds more conditions within an `if` or `unless` block.
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 Hey Anonymous!
 ```
+
+## case/when
+
+Creates a switch statement to compare a variable with different values. `case` initializes the switch statement, and `when` compares its values.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign handle = 'cake' %}
+{% case handle %}
+  {% when 'cake' %}
+     This is a cake
+  {% when 'cookie' %}
+     This is a cookie
+  {% else %}
+     This is not a cake nor a cookie
+{% endcase %}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+This is a cake
+```
--- a/tags/index.md
+++ b/tags/index.md
@@ -0,0 +1,3 @@
+---
+redirect_to: /liquid/tags/control-flow
+---
--- a/tags/iteration.md
+++ b/tags/iteration.md
@@ -1,5 +1,6 @@
 ---
 title: Iteration
+description: An overview of iteration or 'loop' tags in the Liquid template language.
 ---

 Iteration tags run blocks of code repeatedly.
@@ -8,6 +9,7 @@ Iteration tags run blocks of code repeatedly.

 Repeatedly executes a block of code. For a full list of attributes available within a `for` loop, see [forloop (object)](https://docs.shopify.com/themes/liquid/objects/for-loops).

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
  {% for product in collection.products %}
@@ -16,6 +18,7 @@ Repeatedly executes a block of code. For a full list of attributes available wit
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 hat shirt pants
 ```
@@ -24,6 +27,7 @@ hat shirt pants

 Causes the loop to stop iterating when it encounters the `break` tag.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% for i in (1..5) %}
@@ -36,6 +40,7 @@ Causes the loop to stop iterating when it encounters the `break` tag.
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 1 2 3
 ```
@@ -44,6 +49,7 @@ Causes the loop to stop iterating when it encounters the `break` tag.

 Causes the loop to skip the current iteration when it encounters the `continue` tag.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% for i in (1..5) %}
@@ -56,6 +62,7 @@ Causes the loop to skip the current iteration when it encounters the `continue`
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 1 2 3   5
 ```
@@ -66,6 +73,7 @@ Causes the loop to skip the current iteration when it encounters the `continue`

 Limits the loop to the specified number of iterations.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 <!-- if array = [1,2,3,4,5,6] -->
@@ -75,6 +83,7 @@ Limits the loop to the specified number of iterations.
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 1 2
 ```
@@ -83,6 +92,7 @@ Limits the loop to the specified number of iterations.

 Begins the loop at the specified index.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 <!-- if array = [1,2,3,4,5,6] -->
@@ -92,6 +102,7 @@ Begins the loop at the specified index.
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 3 4 5 6
 ```
@@ -100,12 +111,13 @@ Begins the loop at the specified index.

 Defines a range of numbers to loop through. The range can be defined by both literal and variable numbers.

+<p class="code-label">Input</p>
 ```liquid
+{% raw %}
 {% for i in (3..5) %}
  {{ i }}
 {% endfor %}

-{% raw %}
 {% assign num = 4 %}
 {% for i in (1..num) %}
  {{ i }}
@@ -113,6 +125,7 @@ Defines a range of numbers to loop through. The range can be defined by both lit
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 3 4 5
 1 2 3 4
@@ -122,6 +135,7 @@ Defines a range of numbers to loop through. The range can be defined by both lit

 Reverses the order of the loop.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 <!-- if array = [1,2,3,4,5,6] -->
@@ -131,6 +145,7 @@ Reverses the order of the loop.
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 6 5 4 3 2 1
 ```
@@ -141,6 +156,7 @@ Loops through a group of strings and outputs them in the order that they were pa

 `cycle` must be used within a [for](#for) loop block.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% cycle 'one', 'two', 'three' %}
@@ -150,6 +166,7 @@ Loops through a group of strings and outputs them in the order that they were pa
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 one
 two
@@ -170,6 +187,7 @@ Uses for `cycle` include:

 Generates an HTML table. Must be wrapped in opening `<table>` and closing `</table>` HTML tags.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 <table>
@@ -180,6 +198,7 @@ Generates an HTML table. Must be wrapped in opening `<table>` and closing `</tab
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```html
 <table>
  <tr class="row1">
@@ -211,6 +230,7 @@ Generates an HTML table. Must be wrapped in opening `<table>` and closing `</tab

 Defines how many columns the tables should have.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% tablerow product in collection.products cols:2 %}
@@ -219,6 +239,7 @@ Defines how many columns the tables should have.
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```html
 <table>
  <tr class="row1">
--- a/tags/variable.md
+++ b/tags/variable.md
@@ -1,5 +1,6 @@
 ---
 title: Variable
+description: An overview of tags for creating variables in the Liquid template language.
 ---

 Variable tags create new Liquid variables.
@@ -8,6 +9,7 @@ Variable tags create new Liquid variables.

 Creates a new variable.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign my_variable = false %}
@@ -17,12 +19,14 @@ Creates a new variable.
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
  This statement is valid.
 ```

 Wrap a variable in quotations `"` to save it as a string.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign foo = "bar" %}
@@ -30,6 +34,7 @@ Wrap a variable in quotations `"` to save it as a string.
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 bar
 ```
@@ -38,6 +43,7 @@ bar

 Captures the string inside of the opening and closing tags and assigns it to a variable. Variables created through `{% raw %}{% capture %}{% endraw %}` are strings.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% capture my_variable %}I am being captured.{% endcapture %}
@@ -45,6 +51,7 @@ Captures the string inside of the opening and closing tags and assigns it to a v
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 I am being captured.
 ```
@@ -53,6 +60,7 @@ I am being captured.

 Creates a new number variable, and increases its value by one every time it is called. The initial value is 0.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% increment my_counter %}
@@ -61,6 +69,7 @@ Creates a new number variable, and increases its value by one every time it is c
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 0
 1
@@ -71,6 +80,7 @@ Variables created through the `increment` tag are independent from variables cre

 In the example below, a variable named "var" is created through `assign`. The `increment` tag is then used several times on a variable with the same name. Note that the `increment` tag does not affect the value of "var" that was created through `assign`.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign var = 10 %}
@@ -81,6 +91,7 @@ In the example below, a variable named "var" is created through `assign`. The `i
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 0
 1
@@ -92,6 +103,7 @@ In the example below, a variable named "var" is created through `assign`. The `i

 Creates a new number variable, and decreases its value by one every time it is called. The initial value is -1.

+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% decrement variable %}
@@ -100,6 +112,7 @@ Creates a new number variable, and decreases its value by one every time it is c
 {% endraw %}
 ```

+<p class="code-label">Output</p>
 ```text
 -1
 -2
Author	SHA1	Message	Date
Adam Hollett	2360370d19	Remove water droplet icon for now	2016-11-30 08:44:59 -05:00
Adam Hollett	b86226c2f6	SVG optimization and CSS fixes	2016-11-14 09:04:38 -05:00
Adam Hollett	f62a3b26fc	Mention GitHub Pages	2016-11-09 10:12:12 -05:00
Adam Hollett	5ffb286353	templating -> template	2016-11-09 10:06:22 -05:00
Adam Hollett	cacfe95c59	Add page outlining the most common variants of Liquid	2016-11-09 10:05:54 -05:00
Adam Hollett	1fe6b24d47	Add descriptions for remaining pages	2016-11-09 09:11:47 -05:00
Adam Hollett	d4d3d1a8e7	Delete tags aggregate index, remove hidden theme tags page	2016-11-09 09:11:38 -05:00
Adam Hollett	fd98f82a07	Bump jQuery, fix emoji CSS	2016-11-09 09:02:51 -05:00
Adam Hollett	4e42b08f3c	Add favicon and better metadata	2016-11-08 17:23:36 -05:00
Adam Hollett	aef8bd5642	Fix up miscellaneous things and remove some deps	2016-11-08 16:23:33 -05:00
Justin Li	aa35b3f3fd	Merge pull request #813 from kainjow/patch-1 Update iteration.md	2016-10-26 18:53:27 -04:00
Kevin Wojniak	295bdf3fa8	Update iteration.md Fix liquid syntax error Liquid Warning: Liquid syntax error (line 111): Unexpected character in "i in (3..5) " in tags/iteration.md	2016-10-26 14:16:17 -07:00
Justin Li	16f0580d33	Merge pull request #810 from knu/patch-1 Document how to get the current time	2016-10-23 10:35:44 -04:00
Akinori MUSHA	0ecaecc889	Document how to get the current time	2016-10-23 22:42:23 +09:00
Adam Hollett	8b07f4b059	Merge pull request #785 from Shopify/whitespace-control-docs Add page on whitespace control tags	2016-08-12 08:58:33 -04:00
Adam Hollett	98d098f060	Add page on whitespace control tags	2016-08-11 10:08:24 -04:00
Adam Hollett	05c5d2a12d	Merge pull request #781 from MilanAryal/patch-1 Add http for strftime site	2016-07-20 10:32:37 -04:00
Milan Aryal	e97ee306d8	Add http for strftime site	2016-07-20 11:42:49 +05:45
Adam Hollett	461db01257	Merge pull request #766 from Shopify/multiplication-and-division Better explanation of divided_by filter	2016-06-15 10:48:35 -04:00
Adam Hollett	20562fb32a	Markdown linting	2016-06-15 10:02:56 -04:00
Adam Hollett	1e093f9cb6	Remove errant colon	2016-06-15 10:00:24 -04:00
Adam Hollett	bda77bc934	Better explanation of divided_by filter	2016-06-15 09:56:06 -04:00
Adam Hollett	55bded5041	Prepend page links with baseurl	2016-06-14 16:27:18 -04:00
Adam Hollett	4fdb21e0ea	Merge pull request #765 from Shopify/collection-index-pages Generate index pages for tags and filters	2016-06-14 15:15:37 -04:00
Adam Hollett	c2ead29ff9	Generate index pages for tags and filters	2016-06-14 11:04:31 -04:00
Adam Hollett	8590bb5727	Merge pull request #764 from Shopify/truncate-filter-parameters Examples for second parameter of truncate	2016-06-13 16:00:20 -04:00
Adam Hollett	d849a9e010	Examples for second parameter of truncate	2016-06-13 12:58:30 -04:00
Adam Hollett	6fc28fcf2e	Fix typo	2016-06-07 15:43:03 -04:00
Matt Vleming	75556460f0	Delete CNAME	2016-05-12 15:45:52 -04:00
tetchi	80f6f04132	Merge pull request #741 from Shopify/a11y-updates [Docs] Adds a11y landmarks	2016-04-11 09:31:25 -04:00
Adam Hollett	7e25675dc3	Merge pull request #742 from Shopify/code-labels-for-abs Add code labels for abs filter	2016-04-11 08:58:22 -04:00
Adam Hollett	89e3728ec8	Add code labels for abs filter	2016-04-11 08:57:20 -04:00
Adam Hollett	424c97464a	Merge pull request #738 from Shopify/markdown-renderer Switch to kramdown/rouge and fix code blocks	2016-04-11 08:53:01 -04:00
Tetsuro	c89176b219	Add role attribute for old screen readers	2016-04-10 19:26:03 -04:00
Tetsuro	1d2ad13bd8	Adds a11y landmarks	2016-04-10 19:15:20 -04:00
Adam Hollett	d085b5911d	Merge pull request #739 from Shopify/abs-filter-docs Add abs filter docs	2016-04-05 09:43:18 -04:00
Adam Hollett	6c3fc60e32	Add "also"	2016-04-05 09:36:56 -04:00
Adam Hollett	0bfab96fc0	Add abs filter docs	2016-04-05 09:31:44 -04:00
Adam Hollett	de82d100d5	Switch to kramdown/rouge and fix code blocks	2016-04-02 18:46:32 -04:00
tetchi	e79e4bb615	Merge pull request #723 from Shopify/fed-updates Make buttons and headers better on mobile	2016-03-20 16:13:45 -04:00
Tetsuro	fc87cfaf37	make buttons and headers better on mobile	2016-03-20 16:12:09 -04:00
Justin Li	512bcdd803	Merge pull request #718 from Shopify/docs-misc-fixes Docs misc fixes	2016-03-19 00:23:05 -04:00
Adam Hollett	bda9c570c9	Remove reference to liquidmarkup.org domain	2016-03-18 23:06:29 -04:00
Adam Hollett	76a01254ed	Fix some protocols, add alt text	2016-03-18 23:06:12 -04:00
Adam Hollett	f4407fe651	Fix truthy example	2016-03-18 22:42:41 -04:00
Adam Hollett	8c6f4c2f92	Fix all the links	2016-03-18 22:42:16 -04:00
Adam Hollett	3b0f5c45c2	Delete unused handles file	2016-03-18 22:42:07 -04:00
Adam Hollett	4b09f0d49c	Don't commit Gemfile.lock for GitHub Pages	2016-03-18 22:41:56 -04:00
tetchi	dfdaae0409	Merge pull request #717 from Shopify/inertia-scroll Add inertia scroll	2016-03-18 20:38:46 -04:00
Tetsuro	bbf7ef8482	Add inertia scroll	2016-03-18 20:38:16 -04:00
tetchi	c9e9bc3529	Merge pull request #716 from Shopify/fix-mobile [Liquid Docs] Adds mobile layout	2016-03-18 20:32:17 -04:00
Tetsuro	7aa82e8547	Added mobile layout	2016-03-18 20:29:35 -04:00
Justin Li	d1a538b5fd	Merge pull request #714 from parkr/patch-1 Github ~> GitHub	2016-03-18 19:04:42 -04:00
Parker Moore	75cab2ad13	capital_H_dangit	2016-03-18 16:01:41 -07:00
Florian Weingarten	3a4bc8a153	¯\_(ツ)_/¯	2016-03-18 21:59:06 +00:00
Florian Weingarten	bc7bc46ffd	Revert "Use jekyll-assets" This reverts commit `9062937951`.	2016-03-18 21:54:29 +00:00
Florian Weingarten	aa8df89b20	Revert "business" This reverts commit `2e889c82c8`, reversing changes made to `9062937951`.	2016-03-18 21:54:22 +00:00
Adam Hollett	2e889c82c8	business	2016-03-18 17:46:41 -04:00
Adam Hollett	9062937951	Use jekyll-assets	2016-03-18 17:46:09 -04:00
Florian Weingarten	2fe6dcacbc	¯\_(ツ)_/¯	2016-03-18 21:42:56 +00:00
Adam Hollett	6d5879177d	What is even happening	2016-03-18 17:21:26 -04:00
Adam Hollett	9211e2222c	Merge pull request #713 from Shopify/docs-update github-pages and Gemfile	2016-03-18 17:07:41 -04:00
tetchi	e0325c45d2	Merge pull request #712 from Shopify/docs-config-fix Amend config file	2016-03-18 17:00:12 -04:00
Tetsuro	e88c50c70d	Amend config file	2016-03-18 16:59:00 -04:00
tetchi	24ffbd0c16	Merge pull request #711 from Shopify/revert-710-revert-513-docs-update Revert "Revert "Docs Update""	2016-03-18 16:48:51 -04:00
tetchi	90b361a309	Revert "Revert "Docs Update""	2016-03-18 16:48:27 -04:00
tetchi	26e667a77c	Merge pull request #710 from Shopify/revert-513-docs-update Revert "Docs Update"	2016-03-18 16:19:07 -04:00
tetchi	70ddccd88f	Revert "Docs Update"	2016-03-18 16:18:35 -04:00
tetchi	6bc76a92ea	Merge pull request #513 from Shopify/docs-update Docs Update	2016-03-18 16:15:16 -04:00
				`@@ -0,0 +1 @@`
				`<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>desktop-download</title><desc>Created with Sketch.</desc><path d="M4 6h3v-6h2v6h3l-4 4-4-4zm11-4h-4v1h4v8h-14v-8h4v-1h-4c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2h5.34c.55 0 1-.45 1-1v-9c0-.55-.45-1-1-1z" fill-rule="evenodd"/></svg>`
				`@@ -0,0 +1 @@`
				<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>mark-github</title><desc>Created with Sketch.</desc><path d="M8 0c-4.42 0-8 3.58-8 8 0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38l-.01-1.49c-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38 3.16-1.06 5.45-4.06 5.45-7.59 0-4.42-3.58-8-8-8z" fill-rule="evenodd"/></svg>
				`@@ -0,0 +1 @@`
				`<svg width="12" height="16" viewBox="0 0 12 16" xmlns="http://www.w3.org/2000/svg"><title>three-bars</title><desc>Created with Sketch.</desc><path d="M11.41 9h-10.82c-.59 0-.59-.41-.59-1 0-.59 0-1 .59-1h10.81c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zm0-4h-10.82c-.59 0-.59-.41-.59-1 0-.59 0-1 .59-1h10.81c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zm-10.82 6h10.81c.59 0 .59.41.59 1 0 .59 0 1-.59 1h-10.81c-.59 0-.59-.41-.59-1 0-.59 0-1 .59-1z" fill="#000"/></svg>`