Custom Additions

Custom Elements

We also have some custom elements, which are located in the _includes directory.

Breadcrumbs

• Translates the permalink into a breadcrumb
• {% include breadcrumbs.html %}

Example:

Carousel

Front matter:

---
carousel_elements:
    - image: assets/images/index_showcase/game0.png
      title: Pathway <br/>by Robotality                           # optional
      link: https://store.steampowered.com/app/546430/Pathway/    # optional
    - image: assets/images/index_showcase/game1.png
      title: Residual <br/>by Orangepixel                         # optional
      link: https://store.steampowered.com/app/1290780/Residual/  # optional
---

HTML:

<div style="max-width: 545px; margin-left: auto; margin-right: auto;">
      {% include carousel.html elements=page.carousel_elements height="103.8" unit="%" duration="7" control_color="#373737" %}
</div>

• control_color is optional; it changes the color of the controls; the default is #fafafa (light grey)
• title is used to show a button (which leads to link), when the user hovers over the gallery image; to disable the hover effect, don't specify title

Example (while hovering):

Status badges

• Used in the roadmap
• Supports planned, wip, close and done
• {% include status.html is='planned' %}

Example:

List Elements

• Allows using unordered lists (<ul>) inside HTML tags, while retaining the ability to format them in Markdown
• Supports two levels of nesting
• Used on the features page
• {% include list.html title="Audio" items=page.list1 %}, where list1 is defined in the frontmatter as:

---
list1:
  - "**Cool element on lvl 1**"
  - "Even _better_ element"
  - a:                         # optional second level; name irrelevant
    title: "Title of lvl 2"
    items:
      - "First [element](https://libgdx.com) on lvl 2"
      - "Whatever"
---

Example:

Tag Preview

• Previews the latest post with a certain tag
• Used on index
• {% include tag_preview.html tag="changelog" type="left" %}; also configured via the frontmatter as follows:

---
tag_preview:
    image_path: /assets/images/update.jpeg
    alt: "image description"
    btn_label: "Just do it!"
    btn_class: "btn--primary"
---

Example:

Other Elements

• setup_flowchart:

Theme overrides, etc.

• An author note on top of posts (_includes/page__metadata.html):
• Added a custom wide2 and wide3 style (and adapted the default wide style), which should be used depending on which sidebar is disabled (in _sass/minimal-mistakes.scss)
• Custom Footer Links (_includes/footer.html)
• Favicons (_includes/head/custom.html)
• A dark mode (_includes/head.html, _includes/masthead.html, assets/css/main2.scss)

Jekyll Plugins

• WIP, see #36