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.

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.

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 Note You can specify whether the content inside the notification is rendered as plain HTML or Markdown by using {{< >}} or {{% %}}, respectively.

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 >}} your title your content 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: is-dark is-primary is-info is-success is-danger 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: is-dark is-primary is-info is-success is-warning is-danger Note You can specify whether the content inside the notification is rendered as plain HTML or Markdown by using {{< >}} or {{% %}}, respectively.

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.