Style Guide

The Style Guide provides you with a set of standards for the writing and design of theme posts and pages, either for general use or for a specific publication, organization, or field.

See these Markdown quick reference for more details on the Markdown syntax: https://www.markdownguide.org/cheat-sheet or https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet.

Images

This theme supports regular image, wide images and full-width images, all with or without the caption.

A regular image with caption. Philippe Wuyts.

A regular image with caption. Philippe Wuyts.

A wide image with caption. Anton Sulsky.

A wide image with caption. Anton Sulsky.

A full-width image with caption. Alexey Topolyanskiy.

A full-width image with caption. Alexey Topolyanskiy.

This is an H2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus enim ut tortor feugiat pulvinar. Nam ac mauris gravida, porttitor augue ut, ultrices quam. Sed at mollis arcu, ac egestas tellus.

This is an H3

Mauris a tortor et felis rutrum dignissim. Morbi vel est odio. Suspendisse et ipsum in elit laoreet eleifend vel ac sapien. Etiam dolor elit, dictum eleifend velit a, pulvinar imperdiet ex.

This is an H4

Phasellus sollicitudin, metus nec interdum pellentesque, nunc est ultricies nisl, eu egestas ipsum magna eu purus. Fusce interdum ultricies ante eu ullamcorper.

Quoting

“Creativity is allowing yourself to make mistakes. Design is knowing which ones to keep.” — Scott Adams

Code Blocks

Code blocks, highlighted with Hugo's internal highlight shortcode. Read more how to use it on Syntax Highlighting page on Hugo docs.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>
// Simple map
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}
@import url(http://fonts.googleapis.com/css?family=Arvo);

/* Styles */

body {
  font: 100%/1.5 Questrial, sans-serif;
  tab-size: 4;
  hyphens: auto;
}

Lists

Ordered List

  1. First item
  2. Second item
  3. Third item

Unordered List

  • List item
  • Another item
  • And another item

Nested list

  • Item
    1. First Sub-item
    2. Second Sub-item
  1. Second list
    • First Sub-item
    • Second Sub-item

Footnotes

The quick brown fox1 jumped over the lazy dog2.

Footnotes are a great way to add additional contextual details when appropriate. Hugo will automatically add footnote content to the very end of your post.

Tables

TablesAreCool
col 3 isright-aligned$1600
col 2 iscentered$12
zebra stripesare neat$1

Tables are aligned to left by default and take the full width of the page. Any column can be aligned left, center or right. They can contain any markdown content.

MarkdownLessPretty
Stillrendersnicely
123

Table examples are from here: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#tables.

Videos

This Mountain

This Mountain from Evan Mann / OWP Denver on Vimeo.

For the Love of Type from ChingPaul on YouTube.


  1. Foxes are red ↩︎

  2. Dogs are usually not red ↩︎