Switch to kramdown/rouge and fix code blocks

Make buttons and headers better on mobile

.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

Gemfile.lock

@@ -21,22 +21,22 @@ GEM
       multipart-post (>= 1.2, < 3)
     ffi (1.9.10)
     gemoji (2.1.0)
-    github-pages (64)
+    github-pages (68)
       RedCloth (= 4.2.9)
       github-pages-health-check (= 1.1.0)
       jekyll (= 3.0.3)
       jekyll-coffeescript (= 1.0.1)
       jekyll-feed (= 0.4.0)
       jekyll-gist (= 1.4.0)
-      jekyll-github-metadata (= 1.9.0)
-      jekyll-mentions (= 1.0.1)
+      jekyll-github-metadata (= 1.10.0)
+      jekyll-mentions (= 1.1.2)
       jekyll-paginate (= 1.1.0)
       jekyll-redirect-from (= 0.10.0)
       jekyll-sass-converter (= 1.3.0)
-      jekyll-seo-tag (= 1.3.2)
+      jekyll-seo-tag (= 1.3.3)
       jekyll-sitemap (= 0.10.0)
       jekyll-textile-converter (= 0.1.0)
-      jemoji (= 0.5.1)
+      jemoji (= 0.6.2)
       kramdown (= 1.10.0)
       liquid (= 3.0.6)
       mercenary (~> 0.3)
@@ -68,9 +68,9 @@ GEM
     jekyll-feed (0.4.0)
     jekyll-gist (1.4.0)
       octokit (~> 4.2)
-    jekyll-github-metadata (1.9.0)
+    jekyll-github-metadata (1.10.0)
       octokit (~> 4.0)
-    jekyll-mentions (1.0.1)
+    jekyll-mentions (1.1.2)
       html-pipeline (~> 2.3)
       jekyll (~> 3.0)
     jekyll-paginate (1.1.0)
@@ -78,17 +78,17 @@ GEM
       jekyll (>= 2.0)
     jekyll-sass-converter (1.3.0)
       sass (~> 3.2)
-    jekyll-seo-tag (1.3.2)
+    jekyll-seo-tag (1.3.3)
       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)
+    jemoji (0.6.2)
       gemoji (~> 2.0)
       html-pipeline (~> 2.2)
-      jekyll (>= 2.0)
+      jekyll (>= 3.0)
     json (1.8.3)
     kramdown (1.10.0)
     liquid (3.0.6)
@@ -112,7 +112,7 @@ GEM
     redcarpet (3.3.3)
     rouge (1.10.1)
     safe_yaml (1.0.4)
-    sass (3.4.21)
+    sass (3.4.22)
     sawyer (0.7.0)
       addressable (>= 2.3.5, < 2.5)
       faraday (~> 0.8, < 0.10)

_config.yml

@@ -4,16 +4,15 @@ description: "Liquid is a template language and accompanying rendering engine. I
 repository: https://github.com/Shopify/liquid
 
 # 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"]
 

_includes/home-banner.html

@@ -2,7 +2,7 @@
   <h1>Liquid</h1>
   <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"><i class="icon fa fa-2x fa-arrow-circle-down" aria-hidden="true"></i>Download</a>
+    <a href="https://github.com/Shopify/liquid" target="_blank" class="btn" aria-hidden="true"><i class="icon fa fa-2x fa-github"></i>View on GitHub</a>
   </p>
 </header>

_includes/home-users-grid.html

@@ -1,22 +1,22 @@
 <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>

_includes/sidebar.html

@@ -1,8 +1,8 @@
 <div class="sidebar">
-  <div class="sidebar--logo">
-    <a href="/">Liquid</a>
+  <div class="sidebar__logo">
+    <a href="{{ "/" | prepend: site.baseurl }}">Liquid</a>
   </div>
-  <nav class="sidebar--nav"> {% assign sections = "basics, tags, filters" | split: ", " %}
+  <nav class="sidebar__nav"> {% assign sections = "basics, tags, filters" | split: ", " %}
 
     {% for section in sections %}
     <h3 class="section__header">{{ section | capitalize }}</h3>

_layouts/default.html

@@ -9,21 +9,27 @@
     <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
 
     <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 href='//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="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   </head>
 
   <body>
     {% include sidebar.html %}
 
+    <div class="content__overlay"></div>
     <div class="content__area">
       <div class="content">
+        <button class="menu-button">
+          <i class="icon fa fa-2x fa-bars" aria-hidden="true"></i>
+          <span>Menu</span>
+        </button>
         <h1>{{ page.title }}</h1>
         {{ content }}
       </div>
     </div>
-
   </body>
+  <script src="{{ '/js/script.js' | prepend: site.baseurl }}"></script>
 </html>

_sass/modules/_buttons.scss

@@ -3,15 +3,31 @@
   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;
+    }
+  }
 }
 
 .btn:visited {
@@ -21,10 +37,15 @@
 .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;
+    }
   }
 }
 
@@ -32,3 +53,20 @@
   vertical-align: middle;
   margin-right: $spacing-unit / 4;
 }
+
+
+/*============================================================================
+  Menu button
+ ==============================================================================*/
+.menu-button {
+  display: inline-block;
+  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;
+  }
+}

_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;
 }

_sass/modules/_home-banner.scss

@@ -2,10 +2,14 @@
   text-align: center;
   border-bottom: 1px solid lighten($color-slate, 50%);
   padding-bottom: $spacing-unit;
-  margin-bottom: $spacing-unit;
 
   h1 {
     font-weight: bold;
-    font-size: 5em;
+    font-size: 4em;
+
+    @include phone-and-up {
+      font-size: 5em;
+    }
   }
 }
+

_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,11 +52,23 @@ $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;
   text-align: center;
@@ -49,7 +87,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%;

_sass/partials/_helpers.scss

@@ -5,3 +5,12 @@
     clear: both;
    }
 }
+
+.visually-hidden {
+  position:absolute;
+  left:-10000px;
+  top:auto;
+  width:1px;
+  height:1px;
+  overflow:hidden;
+}

_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;
+  }
+}

_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

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`.

basics/introduction.md

@@ -9,12 +9,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,24 +29,25 @@ 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.
 
@@ -53,12 +56,14 @@ You can read more about each type of tag in their respective sections.
 
 **Filters** change the output of a Liquid object. They are using 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" }}
 ```

basics/truthy-and-falsy.md

@@ -18,14 +18,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 +35,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
 

basics/types.md

@@ -9,9 +9,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 +48,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 +62,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 +80,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 +92,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 +103,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 +113,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 +124,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.

css/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";
-
-

filters/append.md

@@ -4,18 +4,21 @@ title: append
 
 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 +26,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 }}

filters/capitalize.md

@@ -4,24 +4,28 @@ title: capitalize
 
 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
 ```

filters/ceil.md

@@ -4,44 +4,52 @@ title: ceil
 
 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 }}
 ```

filters/date.md

@@ -4,34 +4,40 @@ title: date
 
 Converts a timestamp into another date format. The format for this syntax is the same as [`strftime`](//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" }}
 ```

filters/default.md

@@ -6,18 +6,21 @@ Allows you to specify a fallback in case a value doesn't exist. `default` will s
 
 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 +28,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 +43,7 @@ In this example, `product_price` is empty, so the default value is used.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 2.99
 ```
-

filters/divided_by.md

@@ -4,34 +4,40 @@ title: divided_by
 
 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]({{ "/filters/floor" | prepend: site.baseurl }})).
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 4 | divided_by: 2 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 4 | divided_by: 2 }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 16 | divided_by: 4 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 16 | divided_by: 4 }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 5 | divided_by: 3 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 5 | divided_by: 3 }}
 ```

filters/downcase.md

@@ -4,22 +4,26 @@ title: downcase
 
 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 }}
 ```

filters/escape.md

@@ -4,22 +4,26 @@ title: escape
 
 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 }}
 ```

filters/escape_once.md

@@ -4,22 +4,26 @@ title: escape_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 }}
 ```

filters/first.md

@@ -4,6 +4,7 @@ title: first
 
 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 +13,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 +29,7 @@ Returns the first item of an array.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
 

filters/floor.md

@@ -4,44 +4,52 @@ title: floor
 
 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 }}
 ```

filters/join.md

@@ -4,6 +4,7 @@ title: join
 
 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 +13,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: ", " %}
 

filters/last.md

@@ -4,6 +4,7 @@ title: last
 
 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 +13,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 +29,7 @@ Returns the last item of an array.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
 

filters/lstrip.md

@@ -4,12 +4,14 @@ title: lstrip
 
 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 }}
 ```

filters/map.md

@@ -6,6 +6,7 @@ Creates an array of values by extracting the values of a named property from ano
 
 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 +17,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

filters/minus.md

@@ -4,32 +4,38 @@ title: minus
 
 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 }}
 ```

filters/modulo.md

@@ -4,32 +4,38 @@ title: modulo
 
 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 }}
 ```

filters/newline_to_br.md

@@ -4,6 +4,7 @@ title: newline_to_br
 
 Replaces every newline (`\n`) with an HTML line break (`<br>`).
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% capture string_with_newlines %}
@@ -15,6 +16,7 @@ there
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```html
 {% capture string_with_newlines %}
 Hello

filters/plus.md

@@ -4,32 +4,38 @@ title: plus
 
 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 }}
 ```

filters/prepend.md

@@ -4,18 +4,21 @@ title: prepend
 
 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 +27,7 @@ You can also `prepend` variables:
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {% assign url = "liquidmarkup.com" %}
 

filters/remove.md

@@ -4,12 +4,14 @@ title: remove
 
 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" }}
 ```

filters/remove_first.md

@@ -4,12 +4,14 @@ title: remove_first
 
 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" }}
 ```

filters/replace.md

@@ -4,12 +4,14 @@ title: replace
 
 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" }}
 ```

filters/replace_first.md

@@ -4,6 +4,7 @@ title: replace_first
 
 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 +12,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" }}

filters/reverse.md

@@ -4,6 +4,7 @@ title: reverse
 
 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 +13,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 +22,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: "" }}
 ```

filters/round.md

@@ -4,32 +4,38 @@ title: round
 
 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 }}
 ```

filters/rstrip.md

@@ -4,12 +4,14 @@ title: rstrip
 
 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 }}
 ```

filters/size.md

@@ -4,16 +4,19 @@ title: size
 
 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 +25,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: ", " %}
 

filters/slice.md

@@ -6,44 +6,52 @@ Returns a substring of 1 character beginning at the index specified by the argum
 
 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 }}
 ```

filters/sort.md

@@ -4,6 +4,7 @@ title: sort
 
 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 +13,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: ", " %}
 

filters/split.md

@@ -4,6 +4,7 @@ title: split
 
 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 +15,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: ", " %}
 

filters/strip.md

@@ -4,12 +4,14 @@ title: strip
 
 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 }}
 ```

filters/strip_html.md

@@ -4,12 +4,14 @@ title: strip_html
 
 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 }}
 ```

filters/strip_newlines.md

@@ -4,6 +4,7 @@ title: strip_newlines
 
 Removes any newline characters (line breaks) from a string.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% capture string_with_newlines %}
@@ -15,6 +16,7 @@ there
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```html
 {% capture string_with_newlines %}
 Hello
@@ -23,4 +25,3 @@ there
 
 {{ string_with_newlines | strip_newlines }}
 ```
-

filters/times.md

@@ -4,32 +4,38 @@ title: times
 
 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 }}
 ```

filters/truncate.md

@@ -4,12 +4,14 @@ title: truncate
 
 `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 }}
 ```

filters/truncatewords.md

@@ -4,12 +4,14 @@ title: truncatewords
 
 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 }}
 ```

filters/uniq.md

@@ -4,6 +4,7 @@ title: uniq
 
 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 +13,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: ", " %}
 

filters/upcase.md

@@ -4,22 +4,26 @@ title: upcase
 
 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 }}
 ```

filters/url_encode.md

@@ -4,22 +4,26 @@ title: url_encode
 
 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 }}
 ```

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");
+  });
+})

tags/control-flow.md

@@ -8,6 +8,7 @@ Control flow tags can change the information Liquid shows using programming logi
 
 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' %}
@@ -22,6 +23,7 @@ Creates a switch statement to compare a variable with different values. `case` i
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 This is a cake
 ```
@@ -30,6 +32,7 @@ This is a cake
 
 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 +41,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 +50,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 +59,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 +78,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 +92,7 @@ Adds more conditions within an `if` or `unless` block.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 Hey Anonymous!
 ```

tags/iteration.md

@@ -8,6 +8,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 +17,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 +26,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 +39,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 +48,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 +61,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 +72,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 +82,7 @@ Limits the loop to the specified number of iterations.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 1 2
 ```
@@ -83,6 +91,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 +101,7 @@ Begins the loop at the specified index.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 3 4 5 6
 ```
@@ -100,6 +110,7 @@ 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
 {% for i in (3..5) %}
   {{ i }}
@@ -113,6 +124,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 +134,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 +144,7 @@ Reverses the order of the loop.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 6 5 4 3 2 1
 ```
@@ -141,6 +155,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 +165,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 +186,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 +197,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 +229,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 +238,7 @@ Defines how many columns the tables should have.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```html
 <table>
   <tr class="row1">

tags/variable.md

@@ -8,6 +8,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 +18,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 +33,7 @@ Wrap a variable in quotations `"` to save it as a string.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 bar
 ```
@@ -38,6 +42,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 +50,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 +59,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 +68,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 +79,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 +90,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 +102,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 +111,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