Capsule is a CSS-only theme for Hugo sites that uses the Bulma CSS framework and Font-Awesome icons.

Installation

To install Capsule, you can add it as a submodule in the themes/ directory, or you copy the files manually.

If you use Git to version your site, you can easily add Capsule as a submodule. From the base of your website repository, run:

git submodule add https://github.com/sudorook/capsule themes/capsule

If you would instead prefer to manually install the theme, copy over the contents of the static/ directory to your site. Note that the CSS uses relative paths to find the fonts, so the directory names and hierarchy must be preserved.

Hugo sites can be hosted for free on GitLab. To add a theme to a site, you could always copy over the files into the themes/ directory and add them directly into the git tree, but using git submodules are easier for pulling theme updates.

Unfortunately, building with submodules is a bit tricky with GitLab’s CI system. The following instructions will allow you to use the capsule theme as a submodule when building the site.

Capsule provides three shortcodes for embedding images, responsive images, and groups of images with relevant metadata.

img

The {{< img >}} shortcode simply adds an img tag with the following parameters:

• align: aligns the image and wrap text around (‘right’ or ’left’)
• alt (or caption): set the alt text for the image
• class: adds CSS classes to the img tag
• link: wraps the img in anchor tags so that the image has a clickable link. (‘self’ or url)
• src: the url of the image to load

If you want to center an image, use the {{< figure >}} shortcode instead.

Use the {{< blockquote >}} shortcode to highlight blocks of text and also add metadata.

Parameters:

• author: source author, appears as the title in the blockquote footer
• source: book, context, etc. where the text is derived, appearing as a subtitle below the author in the footer
• date: also appears as subtitle in the footer

{{< blockquote date="27 March 1920" author="Francis Picabia" 
    source="Manifeste cannibale dada" >}}
You are all indicted; stand up! Stand up as you would for the Marseillaise or
God Save the King....  
Dada alone does not smell: it is nothing, nothing, nothing.  

    It is like your hopes: nothing.  
    like your paradise: nothing.  
    like your idols: nothing.  
    like your politicians: nothing.  
    like your heroes: nothing.  
    like your artists: nothing.  
    like your religions: nothing.  

Hiss, shout, kick my teeth in, so what? I shall still tell you that you are
half-wits. In three months my friends and I will be selling you our pictures
for a few francs.
{{< /blockquote >}}

The {{< banner >}} and {{< banner-fluid >}} shortcodes use the Bulma hero class to display banners that can either fill the entire container width or the entire viewport width, respectively.

Parameters:

• title: the text to be displayed prominently in the center of the banner
• class: string of classes to add to banner
• subtitle: smaller text displayed under the title
• img: url to background image
• mode: how the image is used to fill the banner space (‘stretch’ or ‘repeat’)

Text to display in the body of the banner goes in between the {{< banner >}} tags.

The message shortcode is a simple wrapper for the Bulma message class. The syntax is:

{{< message class="<class>" title="<title>" >}}  
content
{{< /message >}}  

Replace <title> with the title of the message and <class> with a Bulma class. The class markup is taken directly from the names of the Bulma classes:

1. is-dark
2. is-primary
3. is-info
4. is-success
5. is-danger
6. is-warning

If no class is specified, the message will default to something similar to the dark version.

This shortcode wraps text within a Bulma notification class. They will occupy the container width.

Given that no JS is included, notifications cannot be dismissed unless you add your own custom functions. These only really function to highlight text.

To use, follow this syntax:

{{< notification <class> >}}
notification content
{{< /notification >}}

The available classes correspond to the class names available in Bulma:

1. is-dark
2. is-primary
3. is-info
4. is-success
5. is-warning
6. is-danger

Examples

Capsule can automatically generate a table of contents for each page. Simply set in the front matter (toml):

toc = true

The title from every # is used to generate each item in the table. The lesser the header is in the page hierarchy, the more it will be nested. See below.

Hugo comes with several built-in shortcodes. Some examples of them are displayed below. For a full list of available shortcodes, go to the Hugo website.

Syntax highlighting works out-of-the-box via Hugo. Set the highlighter style in config.toml:

pygmentsstyle = "<style>"

For dark highlighter themes, you should rebuild capsule CSS with build/extra/syntax.sass. Uncomment it from the capsule.sass file and run gulp.

Without that file, the background color will default to Bulma’s light background-color, and light colored elements meant to be displayed against dark backgrounds from dark themes will be hard to read.

Use ``` braces to add code blocks. To set a language-specific highlighter, add ```language to the opening brace, e.g.: