Indie Gaia

Opinionated Marp Theme
Inspired by and based on
Yuki Hattori’s classic Gaia theme

Features

  • System font stack with system-ui, sans-serif
  • Support for color-scheme: light dark
  • Support for prefers-contrast: less|more
  • Typographic blockquotes for lang="de|en|es|fr|it|CH"
  • Compatible to Gaia’s invert and gaia coloring

Project

Features · Usage

GitHub · Issues · Discuss

Usage

  1. Store indie-gaia.css in project directory
  2. Add theme: indie-gaia to your slides frontmatter
  3. Marp your slide deck
  4. Toggle light and dark color schemes using DevTools
  5. Emulate contrast settings using Chrome

Project

Inverted colors

Swap background and foreground color,
as created by marp-team

Frontmatter: _class: invert

Accentuated slides

The Gaia scheme for accentuated slides,
as created by marp-team

Frontmatter: _class: gaia

Typographic Blockquotes

Adapt to presentation language
Adjustable by blockquote language

Adaptive Quotation Marks

Quotation marks adapt to presentation language.

Imagine if every Thursday your shoes exploded if you tied them the usual way. This happens to us all the time with computers, and nobody thinks of complaining — Jef Raskin, 1943—2005

---
lang: en-GB
---

> Imagine if every Thursday your shoes exploded ...
Typographic Blockquotes

Adaptive Quotation Marks

Blockquote language changes quotation marks:

<span lang="de|en|es|fr|it|CH">

---
lang: en-US
---

> <span lang="de"> ... </span> ...
Typographic Blockquotes

German Guillemets

Theorie ist, wenn man alles weiß und nichts funktioniert. Praxis ist, wenn alles funktioniert und niemand weiß warum.

> <span lang="de">Theorie ist, wenn man alles weiß ... </span>
Typographic Blockquotes

French Guillemets

L’ordinateur est un truc qui sert à résoudre des problèmes qu’on n’aurait pas si on n’avait pas d’ordinateur.

> <span lang="fr"> L’ordinateur est un truc ... </span>
Typographic Blockquotes

Table example

Name Age City Salary
Alice 25 Berlin 25,000
Bob 30 Munich 30,000
Charlie 35 Hamburg 35,000

Table example · inverted

Name Age City Salary
Alice 25 Berlin 25,000
Bob 30 Munich 30,000
Charlie 35 Hamburg 35,000

Frontmatter: _class: invert

Table example · accentuated

Name Age City Salary
Alice 25 Berlin 25,000
Bob 30 Munich 30,000
Charlie 35 Hamburg 35,000

Frontmatter: _class: gaia

Source Code

Inline source code and code block:

{ foo: "bar" }

Source Code · inverted

Inline source code and code block:

{ foo: "bar" }

Frontmatter: _class: invert

Source Code · accentuated

Inline source code and code block:

{ foo: "bar" }

Frontmatter: _class: gaia