Galleries, diagrams and embeds

The theme’s first components write the design system’s own. These seven go further: they show what a post carries with it, break it into scenes, draw diagrams, and bring in things that live on other sites. Each is shown working here; the components page says how to write them.

Gallery🔗

A post that’s a folder, with its images beside its index.md, can show them all as a grid. Zola makes the thumbnails, so the page loads small files; each links to its image in full.

Separators🔗

A break between scenes, in one of fifteen styles. The pattern’s star is the theme’s own.

The default is three asterisks, the classic scene break of a novel.

An Arabic star, for an Arabic text, and a rule that fades at both ends.

Diagrams🔗

A Mermaid diagram is written as text and drawn in the browser, in the theme’s colours. Switch to dark, and it’s drawn again.

flowchart LR
  md[Markdown] --> zola((Zola))
  tpl[Templates] --> zola
  zola --> html[HTML]
  html --> browser[Browser]
  css[arabesque.css] --> browser
  js[theme.js] --> browser

Video🔗

From YouTube’s no-cookie domain, at 16:9, loaded only when it’s near the screen.

PDF🔗

In the page, with a link to download it for the browsers (most phones) that can’t show one.

Gist🔗

Instagram🔗