Style Guide

A paragraph looks like this — dolor amet cray stumptown fingerstache neutra food truck seitan poke cardigan waistcoat VHS snackwave celiac hella. Godard seitan shoreditch flexitarian next level trust fund man braid vegan listicle keytar bitters. Disrupt cray fashion axe unicorn lomo shaman poke glossier keffiyeh snackwave austin tattooed seitan hexagon lo-fi. Lumbersexual irony vaporware, butcher shaman.

Headings by default:

# H1 Default styles for headings
## H2 Default styles for headings
### H3 Default styles for headings
#### H4 Default styles for headings
##### H5 Default styles for headings
###### H6 Default styles for headings

H1 Default styles for headings

H2 Default styles for headings

H3 Default styles for headings

H4 Default styles for headings

H5 Default styles for headings

H6 Default styles for headings

Images

Put images in the /assets/images folder eg /assets/images/somefoo.jpg; then refer to them as /images/somefoo.jpg

Single image

{{< image file=... >}} is required; all other fields are optional

{{< image file="/images/1260x840.png"
            link="https://wikipedia.com/images"
            width="1000"
            height="800"
            caption="Title and alt text"
            attribution="© Getty, 2017"
            attributionlink="https://gettyimages.com/" >}}

Gallery

<div class="gallery-box">
  <div class="gallery">
    {{< image file="/images/1260x840.png" >}}
    {{< image file="/images/1260x840.png" >}}
    {{< image file="/images/1260x840.png" >}}
    {{< image file="/images/1260x840.png" >}}
    {{< image file="/images/1260x840.png" >}}
    {{< image file="/images/1260x840.png" >}}
    {{< image file="/images/1260x840.png" >}}
    {{< image file="/images/1260x840.png" >}}
    {{< image file="/images/1260x840.png" >}}
  </div>
  <em>Gallery / <a href="/images/1260x840.png" target="_blank">Unsplash</a></em>
</div>

Gallery / Unsplash

Quotes

A quote looks like this:

> The longer I live, the more I realize that I am never wrong about anything, and that all the pains I have so humbly taken to verify my notions have only wasted my time!
>
> <cite>George Bernard Shaw</cite>

The longer I live, the more I realize that I am never wrong about anything, and that all the pains I have so humbly taken to verify my notions have only wasted my time!
George Bernard Shaw

Lists

Ordered list example:

1. Poutine drinking vinegar bitters.
2. Coloring book distillery fanny pack.
3. Venmo biodiesel gentrify enamel pin meditation.
3. Jean shorts shaman listicle pickled portland.
3. Salvia mumblecore brunch iPhone migas.

Poutine drinking vinegar bitters.
Coloring book distillery fanny pack.
Venmo biodiesel gentrify enamel pin meditation.
Jean shorts shaman listicle pickled portland.
Salvia mumblecore brunch iPhone migas.

Unordered list example:

* Bitters semiotics vice thundercats synth.
* Literally cred narwhal bitters wayfarers.
* Kale chips chartreuse paleo tbh street art marfa.
* Mlkshk polaroid sriracha brooklyn.
* Pug you probably haven't heard of them air plant man bun.

Bitters semiotics vice thundercats synth.
Literally cred narwhal bitters wayfarers.
Kale chips chartreuse paleo tbh street art marfa.
Mlkshk polaroid sriracha brooklyn.
Pug you probably haven’t heard of them air plant man bun.

Diagrams

```goat
      .               .                .               .--- 1          .-- 1     / 1
     / \              |                |           .---+            .-+         +
    /   \         .---+---.         .--+--.        |   '--- 2      |   '-- 2   / \ 2
   +     +        |       |        |       |    ---+            ---+          +
  / \   / \     .-+-.   .-+-.     .+.     .+.      |   .--- 3      |   .-- 3   \ / 3
 /   \ /   \    |   |   |   |    |   |   |   |     '---+            '-+         +
 1   2 3   4    1   2   3   4    1   2   3   4         '--- 4          '-- 4     \ 4

```

More examples of diagrams here: https://github.com/bep/goat

Tables and other HTML

<div class="table-container">
  <table>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>Row:1 Cell:1</td><td>Row:1 Cell:2</td><td>Row:1 Cell:3</td></tr>
    <tr><td>Row:2 Cell:1</td><td>Row:2 Cell:2</td><td>Row:2 Cell:3</td></tr>
    <tr><td>Row:3 Cell:1</td><td>Row:3 Cell:2</td><td>Row:3 Cell:3</td></tr>
  </table>
</div>

Header 1	Header 2	Header 3
Row:1 Cell:1	Row:1 Cell:2	Row:1 Cell:3
Row:2 Cell:1	Row:2 Cell:2	Row:2 Cell:3
Row:3 Cell:1	Row:3 Cell:2	Row:3 Cell:3

You can also just insert just about any HTML in markdown and it should work.

Syntax Highlighter

```js
$('.top').click(function () {
  $('html, body').stop().animate({ scrollTop: 0 }, 'slow', 'swing');
});
$(window).scroll(function () {
  if ($(this).scrollTop() > $(window).height()) {
    $('.top').addClass("top-active");
  } else {
    $('.top').removeClass("top-active");
  };
});
```

$('.top').click(function () {
  $('html, body').stop().animate({ scrollTop: 0 }, 'slow', 'swing');
});
$(window).scroll(function () {
  if ($(this).scrollTop() > $(window).height()) {
    $('.top').addClass("top-active");
  } else {
    $('.top').removeClass("top-active");
  };
});