Showcase: Theme
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
- Pizza
- Gummibären
- Pasta
- Chocolate
- Meat
Ordered Lists
My preferences for 2-stroke scooters from the 50s to 90s:
- Vespa
- Heinkel
- Zündapp
- 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:
Per-page CSS
Having page-specific CSS is possible, see Functions.