Styleguide

Demo of the content, layout, styleguide, etc.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a paragraph. This contains a marked text, while trying to include others such as quotes, and some italic text, while being not subtle enough to be bold and beautiful.

The blockquote element is used to indicate the quotation of a large section of text from another source. Using the default HTML styling of most web browsers, it will indent the right and left margins both on the display and in printed form, but this may be overridden by Cascading Style Sheets. The non-semantic use of the blockquote element purely to indent text has been deprecated by the W3C since HTML 4. The preferred approach is the use of CSS.

Wrap content blocks in a class .content-medium, .content-large, or .content-full to have it extend out of the default content-width on large screens.

Here is a Youtube¹ video using {% include video source="youtube" id="qaF6dPiJ-NM" %}. You can extend the video with just wrapping with something like <div class="content-medium">, replace medium with large or full. You can apply this not only videos but photos or any other block content.

So, did you see the Footnote² I added above. You will need to be using markdown: kramdown as your MarkdDown.

On larger screens, photos are treated a little differently. A simple picture will be part of the content but you can highlight it by adding the appropriate classes to the img html element – medium, large, and full.

There are times when you want to use smaller images and flushed them right or left. Add the class small to the IMAGE and chose left or right. For example, an image to flushed right will be <img class="small right" src="" alt="">.

EM text that follows an Image immediately are treated as a Caption.

A simple photos gallery is also included. There are two ways of using it. You can either have a gallery of photos in a page or post, or have a separate page of its own - view example.

1. Use a normal HTML element figure to display your images. But you throw in multiple images inside wrapped in a div.gallery. They can either be hyperlink or just the images.
2. Or wrapped a bunch of images, either hyperlinked or not, inside a div.gallery. You can combine the div.gallery with other contend-extenders – content-medium, content-large or content-full.

There is a Jekyll Default highlighter built-in for code blocks powered by Rouge. You can replace it with your choice of highlighter styles.

// external links opens in new tab
function externalLinks() {
  for(var c = document.getElementsByTagName("a"), a = 0;a < c.length;a++) {
    var b = c[a];
    b.getAttribute("href")
    && b.hostname !== location.hostname
    && (b.target = "_new")
    && (b.rel = "noopener")
  }
}
;
externalLinks();

Form

Please fill up the non-working form and we will never get back to you. ;-)