{{ page.title }}
diff --git a/_sass/modules/_base.scss b/_sass/modules/_base.scss index 635fcdc..afacffb 100644 --- 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); diff --git a/_sass/modules/_buttons.scss b/_sass/modules/_buttons.scss index 1bcdaef..90e3f79 100644 --- a/_sass/modules/_buttons.scss +++ b/_sass/modules/_buttons.scss @@ -1,5 +1,6 @@ .btn { color: $color-white; + fill: currentColor; display: flex; background: $color-blue-5; align-items: center; @@ -28,6 +29,14 @@ 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 { @@ -49,12 +58,6 @@ } } -.icon { - vertical-align: middle; - margin-right: $spacing-unit / 4; -} - - /*============================================================================ Menu button ==============================================================================*/ @@ -69,4 +72,12 @@ @include tablet-and-up { display: none; } + + svg { + margin-right: $spacing-unit / 4; + width: $base-font-size * 1.2; + height: $base-font-size * 1.2; + vertical-align: middle; + } + } diff --git a/_sass/modules/_home-banner.scss b/_sass/modules/_home-banner.scss index 8c5989d..85fac4c 100644 --- a/_sass/modules/_home-banner.scss +++ b/_sass/modules/_home-banner.scss @@ -2,14 +2,23 @@ text-align: center; border-bottom: 1px solid lighten($color-slate, 50%); padding-bottom: $spacing-unit; + margin-bottom: $spacing-unit; h1 { - font-weight: bold; + // font-weight: bold; font-size: 4em; + &:after { + content: '💧'; + vertical-align: middle; + } + @include phone-and-up { font-size: 5em; } } -} + p { + color: lighten($color-slate, 20%); + } +} diff --git a/_sass/modules/_layout.scss b/_sass/modules/_layout.scss index 6971064..44d39a3 100644 --- a/_sass/modules/_layout.scss +++ b/_sass/modules/_layout.scss @@ -70,13 +70,18 @@ body { .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: '💧'; + vertical-align: middle; + } + a { color: $color-white; text-decoration: none; @@ -119,10 +124,10 @@ body { } .section__header { - font-weight: bold; font-size: 1em; text-decoration: none; color: $color-white; + margin-top: 0; margin-bottom: $spacing-unit / 4; } diff --git a/_sass/partials/_defaults.scss b/_sass/partials/_defaults.scss index 5ff2048..a0674fe 100644 --- 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; - diff --git a/basics/index.md b/basics/index.md new file mode 100644 index 0000000..9b85ece --- /dev/null +++ b/basics/index.md @@ -0,0 +1,3 @@ +--- +redirect_to: /liquid/basics/introduction +--- diff --git a/basics/introduction.md b/basics/introduction.md index ed8a7e9..940952a 100644 --- a/basics/introduction.md +++ b/basics/introduction.md @@ -1,7 +1,5 @@ --- title: Introduction -redirect_from: - - /basics/ --- Liquid code can be categorized into [**objects**](#objects), [**tags**](#tags), and [**filters**](#filters). diff --git a/filters/abs.md b/filters/abs.md index c35489c..fc23eb6 100644 --- a/filters/abs.md +++ b/filters/abs.md @@ -1,5 +1,6 @@ --- title: abs +description: Liquid filter that gets the absolute value of a number. --- Returns the absolute value of a number. diff --git a/filters/append.md b/filters/append.md index abd414f..9c0bc16 100644 --- a/filters/append.md +++ b/filters/append.md @@ -1,5 +1,6 @@ --- title: append +description: Liquid filter that appends a string to another string. --- Concatenates two strings and returns the concatenated value. diff --git a/filters/capitalize.md b/filters/capitalize.md index 1ff06d2..1b160e4 100644 --- a/filters/capitalize.md +++ b/filters/capitalize.md @@ -1,5 +1,6 @@ --- title: capitalize +description: Liquid filter that capitalizes the first character in a string. --- Makes the first character of a string capitalized. diff --git a/filters/ceil.md b/filters/ceil.md index b9cb03e..bfecfe4 100644 --- a/filters/ceil.md +++ b/filters/ceil.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/date.md b/filters/date.md index 09f67f1..5423221 100644 --- a/filters/date.md +++ b/filters/date.md @@ -1,5 +1,6 @@ --- 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`](http://strftime.net). diff --git a/filters/default.md b/filters/default.md index 96249a1..9437cd5 100644 --- a/filters/default.md +++ b/filters/default.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/divided_by.md b/filters/divided_by.md index fc6abc3..7099708 100644 --- a/filters/divided_by.md +++ b/filters/divided_by.md @@ -1,5 +1,6 @@ --- title: divided_by +description: Liquid filter that divides a number by another number. --- Divides a number by the specified number. diff --git a/filters/downcase.md b/filters/downcase.md index eaec276..d08224c 100644 --- a/filters/downcase.md +++ b/filters/downcase.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/escape.md b/filters/escape.md index 777fd7a..479325b 100644 --- a/filters/escape.md +++ b/filters/escape.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/escape_once.md b/filters/escape_once.md index 3edcae3..6ee787e 100644 --- a/filters/escape_once.md +++ b/filters/escape_once.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/first.md b/filters/first.md index f87479b..4d80f1e 100644 --- a/filters/first.md +++ b/filters/first.md @@ -1,5 +1,6 @@ --- title: first +description: Liquid filter that returns the first item of an array. --- Returns the first item of an array. diff --git a/filters/floor.md b/filters/floor.md index dccc10e..3e6a597 100644 --- a/filters/floor.md +++ b/filters/floor.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/index.md b/filters/index.md index 14bda7c..aec1972 100644 --- a/filters/index.md +++ b/filters/index.md @@ -1,14 +1,3 @@ --- -title: Filters -type: index +redirect_to: /liquid/filters/abs --- - -**Filters** change the output of a Liquid object. You can append one or more filters to an object by separating the filter and its parameters by a pipe symbol `|`. - -{% assign filter_pages = site.pages | where: 'type', 'filter' %} - -{% for item in filter_pages %} -## [{{ item.title }}]({{ item.url | prepend: site.baseurl }}) - -{{ item.content }} -{% endfor %} diff --git a/filters/join.md b/filters/join.md index c0dee8d..2cd589c 100644 --- a/filters/join.md +++ b/filters/join.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/last.md b/filters/last.md index 5f3c680..1273078 100644 --- a/filters/last.md +++ b/filters/last.md @@ -1,5 +1,6 @@ --- title: last +description: Liquid filter that gets the last value in an array. --- Returns the last item of an array. diff --git a/filters/lstrip.md b/filters/lstrip.md index b143bb3..be8c19c 100644 --- a/filters/lstrip.md +++ b/filters/lstrip.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/map.md b/filters/map.md index 61fddb9..9b352a8 100644 --- a/filters/map.md +++ b/filters/map.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/minus.md b/filters/minus.md index f9d4474..0b0ffc7 100644 --- a/filters/minus.md +++ b/filters/minus.md @@ -1,5 +1,6 @@ --- title: minus +description: Liquid filter that subtracts one number from another. --- Subtracts a number from another number. diff --git a/filters/modulo.md b/filters/modulo.md index bb31570..38e538c 100644 --- a/filters/modulo.md +++ b/filters/modulo.md @@ -1,5 +1,6 @@ --- title: modulo +description: Liquid filter that returns the remainder from a division operation. --- Returns the remainder of a division operation. diff --git a/filters/newline_to_br.md b/filters/newline_to_br.md index a936e40..5b694da 100644 --- a/filters/newline_to_br.md +++ b/filters/newline_to_br.md @@ -1,5 +1,6 @@ --- title: newline_to_br +description: Liquid filter that converts newlines in an input string to HTMLtags. --- Replaces every newline (`\n`) with an HTML line break (`
`). diff --git a/filters/plus.md b/filters/plus.md index 52e97ac..0347f59 100644 --- a/filters/plus.md +++ b/filters/plus.md @@ -1,5 +1,6 @@ --- title: plus +description: Liquid filter that adds a number to another number. --- Adds a number to another number. diff --git a/filters/prepend.md b/filters/prepend.md index 98464b0..71def9f 100644 --- a/filters/prepend.md +++ b/filters/prepend.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/remove.md b/filters/remove.md index 6d517e8..0a294ab 100644 --- a/filters/remove.md +++ b/filters/remove.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/remove_first.md b/filters/remove_first.md index 5f18ff7..ead16b9 100644 --- a/filters/remove_first.md +++ b/filters/remove_first.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/replace.md b/filters/replace.md index 823c091..c01e419 100644 --- a/filters/replace.md +++ b/filters/replace.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/replace_first.md b/filters/replace_first.md index df43519..d9703e7 100644 --- a/filters/replace_first.md +++ b/filters/replace_first.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/reverse.md b/filters/reverse.md index c4eb594..87c3b6b 100644 --- a/filters/reverse.md +++ b/filters/reverse.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/round.md b/filters/round.md index 88913eb..40c8308 100644 --- a/filters/round.md +++ b/filters/round.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/rstrip.md b/filters/rstrip.md index e2d7284..649c922 100644 --- a/filters/rstrip.md +++ b/filters/rstrip.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/size.md b/filters/size.md index fe2c4c4..797c410 100644 --- a/filters/size.md +++ b/filters/size.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/slice.md b/filters/slice.md index 9265595..eefdc41 100644 --- a/filters/slice.md +++ b/filters/slice.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/sort.md b/filters/sort.md index 9a34de9..f0074b7 100644 --- a/filters/sort.md +++ b/filters/sort.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/sort_natural.md b/filters/sort_natural.md new file mode 100644 index 0000000..d45e16f --- /dev/null +++ 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. + +
Input
+```liquid +{% raw %} +{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %} + +{{ my_array | sort_natural | join: ", " }} +{% endraw %} +``` + +Output
+```text +giraffe, octopus, Sally Snake, zebra +``` diff --git a/filters/split.md b/filters/split.md index b56218a..17a72d1 100644 --- a/filters/split.md +++ b/filters/split.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/strip.md b/filters/strip.md index 97218d7..6885ac4 100644 --- a/filters/strip.md +++ b/filters/strip.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/strip_html.md b/filters/strip_html.md index 3c9a3d1..9ca00f0 100644 --- a/filters/strip_html.md +++ b/filters/strip_html.md @@ -1,5 +1,6 @@ --- title: strip_html +description: Liquid filter that removes HTML tags from a string. --- Removes any HTML tags from a string. diff --git a/filters/strip_newlines.md b/filters/strip_newlines.md index 675ff40..c05deaa 100644 --- a/filters/strip_newlines.md +++ b/filters/strip_newlines.md @@ -1,5 +1,6 @@ --- title: strip_newlines +description: Liquid filter that removes newline characters from a string. --- Removes any newline characters (line breaks) from a string. diff --git a/filters/times.md b/filters/times.md index 76e71c6..634c7e4 100644 --- a/filters/times.md +++ b/filters/times.md @@ -1,5 +1,6 @@ --- title: times +description: Liquid filter that multiplies a number by another number. --- Multiplies a number by another number. diff --git a/filters/truncate.md b/filters/truncate.md index f3ebcbe..8103cb2 100644 --- a/filters/truncate.md +++ b/filters/truncate.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/truncatewords.md b/filters/truncatewords.md index b2480e2..0a2d8ef 100644 --- a/filters/truncatewords.md +++ b/filters/truncatewords.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/uniq.md b/filters/uniq.md index 4846437..e02b4e9 100644 --- a/filters/uniq.md +++ b/filters/uniq.md @@ -1,5 +1,6 @@ --- title: uniq +description: Liquid filter that removes duplicate items from an array. --- Removes any duplicate elements in an array. diff --git a/filters/upcase.md b/filters/upcase.md index 105d3d1..1c6112c 100644 --- a/filters/upcase.md +++ b/filters/upcase.md @@ -1,5 +1,6 @@ --- 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. diff --git a/filters/url_decode.md b/filters/url_decode.md new file mode 100644 index 0000000..e6f1991 --- /dev/null +++ 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 }}). + +Input
+```liquid +{% raw %} +{{ "%27Stop%21%27+said+Fred" | url_decode }} +{% endraw %} +``` + +Output
+```text +'Stop!' said Fred +``` diff --git a/filters/url_encode.md b/filters/url_encode.md index f0f5add..5a17c81 100644 --- a/filters/url_encode.md +++ b/filters/url_encode.md @@ -1,5 +1,6 @@ --- 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. diff --git a/index.md b/index.md index 7ce0a6a..1ef72a3 100644 --- a/index.md +++ b/index.md @@ -4,13 +4,10 @@ layout: default {% 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 %} - diff --git a/tags/control-flow.md b/tags/control-flow.md index bae7080..8b89d83 100644 --- a/tags/control-flow.md +++ b/tags/control-flow.md @@ -4,30 +4,6 @@ title: Control flow 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. - -Input
-```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 %} -``` - -Output
-```text -This is a cake -``` - ## if Executes a block of code only if a certain condition is `true`. @@ -96,3 +72,27 @@ Adds more conditions within an `if` or `unless` block. ```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. + +Input
+```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 %} +``` + +Output
+```text +This is a cake +```