chevron_leftGo Back list TOC

Table of Contents

• Go to Top
• Styling
  • Image Headers
  • Content Headers
  • Fonts
  • Font decorations
• Components
  • Code blocks
  • Icons
  • Accordions

Static features do not require JavaScript. Static components are implemented using only HTML and CSS!

Styling

Image Headers

By adding the key header under extra in the page metadata, a header image can be specified for the post. This image will be used both on the portfolio entries list and in the page itself.

Example:

[extra] 
header = "../static.jpg"

Note that this is not required. If you take a look at the sample blog post, you can see that it renders and looks just fine without the header photo.

Content Headers

Each header is exponentially smaller than the previous header.

Heading 1

Some text

Heading 2

Some more text

Heading 3

Here's some text

Heading 4

And more text

Heading 5

Look at all this text!

Heading 6

Fonts

The default typeface chosen follows the advice of the best font is the one you don't notice. This, however, can be easily changed by modifying the base.html and base.scss files.

• Header font (page titles, headers): Source Sans Pro
• Monospace font (code blocks): Source Code Pro
• Body font (everything else): OS-Defined Sans Serif Font

Font decorations

Here's some bold text, some italic text, and some bold and italic text.

Components

Code blocks

JavaScript:

function add(x, y) {
  return x + y;
}

Markdown:

# Code block inception
Markdown *within* markdown!

...and many more!

Icons

Based off of Google's Material Icons.

• waving_hand Hello world!
• check All done.
• shopping_basket Check out?

<!-- Icon shortcode -->
- {{ icon(id="waving_hand") }} Hello world! 
- {{ icon(id="check") }} All done. 
- {{ icon(id="shopping_basket") }} Check out?

Accordions

<!-- Use the accordion shortcode to create accordions. -->
{% accordion(summary="Hello World!") %}
  You found me, hi there!

  **Markdown** also works in *accordions*. {{ icon(id="style") }}
{% end %}