Showcase: Theme

Author: Stefan Published: 05.01.2006 00:00 Edited: 29.11.2025 10:38

Gravitrons default theme was build with a lot of CSS and code from my former projects like GetriebeSalat.de. This page itself is the demo, basic typography end elements are shown here.

Paragraphs

A default paragraph in German: Hermit widerspreche ich gemäß Art. 21 Abs. 2 und 3 Datenschutz-Grundverordnung jeglicher Nutzung der oben angegebenen persönlichen Daten zum Zweck von Direktmarketing. Gemäß §28 BDSG widerspreche ich jeder kommerziellen Verwendung und jeder sonstigen Weitergabe und anderweitigen Veröffentlichung unten stehender Daten.

Another one in English, just a short line to check paragraph spacing.

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.

Blockquotes

Contact the author:

Gravitron CMS
Stefan Onderka
https://gravitron.dev

Images

Centered with Markdown Extra classes {.center .gravitron-logo}:

Headings

Section headings to make readers, Google and other search engines happy:

Header 1

Text

Header 2

Text

Header 3

Text

Header 4

Text

Text formatting

Yes, we can! Text in bold, italic, strikethrough. An abbr. also looks good.

Code blocks

Code blocks are wrapped so they can scroll horizontly on mobile devices without exploding the page layout:

// Helper function for adding array elements
function _add_array_child(&$_original_array, $_path, $_key_name, $_value) {
    $_temp = &$_original_array;
    foreach ( $_path as $_key ) {
        $_temp = &$_temp[$_key];
    }
    $_temp[$_key_name] = $_value;
    return $_value;
}

Syntax higlighting is not available per default, but it's easy to add CSS and JS of Prism, highlight.js or others.

Horizontal rules

So 90s… But if you really want to, here we go:


Unordered lists

Favourite food, in no particular order

Ordered Lists

My preferences for 2-stroke scooters from the 50s to 90s:

  1. Vespa
  2. Heinkel
  3. Zündapp
  4. Lambretta

Tables

Tables are wrapped so they can scroll horizontly on mobile devices without exploding the page layout. Here's the default style:

Arabic numeral 1 Arabic numeral 2 Arabic numeral 3 Arabic numeral 4
One Two Three Four
Un Deux Trois Quatre
ένα δύο τρία τέσσερα
Uno Dos Tres Cuatro
Eins Zwei Drei Vier
Jedna Dva Tři Čtyři

Text with Links

The font used is "Manrope", licensed under the SIL Open Font License 1.1. The responsive menu is partly based on a W3 Schools navbar and a Fabian Freitag article, see Code Pen.

Pre-made classes for pargraphs

Some css classes that seem reasonable:

A warning. I really mean it! And a link.
More information. And a link.
An important link oder an update notification. And a link.
Notes. And a link.
You know what that means… And a link.

Per-page CSS

Having page-specific CSS is possible, see Functions.