Demo Page
An archived section to indicate the post has been archived
A content warning section
A disclaimer section
Style§
Typography§
Breakout Elements§
Tables§
| Header 1 | Header 2 |
|---|---|
| Row:1 Cell:1 | Row:1 Cell:2 |
| Row:2 Cell:1 | Row:2 Cell:2 |
| Row:3 Cell:1 | Row:3 Cell:2 |
| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 | Header 7 | Header 8 | Header 9 | Header 10 | Header 11 | Header 12 | Header 13 | Header 14 | Header 15 | Header 16 | Header 17 | Header 18 | Header 19 | Header 20 | Header 21 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Row:1 Cell:1 | Row:1 Cell:2 | Row:1 Cell:3 | Row:1 Cell:4 | Row:1 Cell:5 | Row:1 Cell:6 | Row:1 Cell:7 | Row:1 Cell:8 | Row:1 Cell:9 | Row:1 Cell:10 | Row:1 Cell:11 | Row:1 Cell:12 | Row:1 Cell:13 | Row:1 Cell:14 | Row:1 Cell:15 | Row:1 Cell:16 | Row:1 Cell:17 | Row:1 Cell:18 | Row:1 Cell:19 | Row:1 Cell:20 | Row:1 Cell:21 |
| Row:2 Cell:1 | Row:2 Cell:2 | Row:2 Cell:3 | Row:2 Cell:4 | Row:2 Cell:5 | Row:2 Cell:6 | Row:2 Cell:7 | Row:2 Cell:8 | Row:2 Cell:9 | Row:2 Cell:10 | Row:2 Cell:11 | Row:2 Cell:12 | Row:2 Cell:13 | Row:2 Cell:14 | Row:2 Cell:15 | Row:2 Cell:16 | Row:2 Cell:17 | Row:2 Cell:18 | Row:2 Cell:19 | Row:2 Cell:20 | Row:2 Cell:21 |
| Row:3 Cell:1 | Row:3 Cell:2 | Row:3 Cell:3 | Row:3 Cell:4 | Row:3 Cell:5 | Row:3 Cell:6 | Row:3 Cell:7 | Row:3 Cell:8 | Row:3 Cell:9 | Row:3 Cell:10 | Row:3 Cell:11 | Row:3 Cell:12 | Row:3 Cell:13 | Row:3 Cell:14 | Row:3 Cell:15 | Row:3 Cell:16 | Row:3 Cell:17 | Row:3 Cell:18 | Row:3 Cell:19 | Row:3 Cell:20 | Row:3 Cell:21 |
| Row:4 Cell:1 | Row:4 Cell:2 | Row:4 Cell:3 | Row:4 Cell:4 | Row:4 Cell:5 | Row:4 Cell:6 | Row:4 Cell:7 | Row:4 Cell:8 | Row:4 Cell:9 | Row:4 Cell:10 | Row:4 Cell:11 | Row:4 Cell:12 | Row:4 Cell:13 | Row:4 Cell:14 | Row:4 Cell:15 | Row:4 Cell:16 | Row:4 Cell:17 | Row:4 Cell:18 | Row:4 Cell:19 | Row:4 Cell:20 | Row:4 Cell:21 |
| Row:5 Cell:1 | Row:5 Cell:2 | Row:5 Cell:3 | Row:5 Cell:4 | Row:5 Cell:5 | Row:5 Cell:6 | Row:5 Cell:7 | Row:5 Cell:8 | Row:5 Cell:9 | Row:5 Cell:10 | Row:5 Cell:11 | Row:5 Cell:12 | Row:5 Cell:13 | Row:5 Cell:14 | Row:5 Cell:15 | Row:5 Cell:16 | Row:5 Cell:17 | Row:5 Cell:18 | Row:5 Cell:19 | Row:5 Cell:20 | Row:5 Cell:21 |
| Row:6 Cell:1 | Row:6 Cell:2 | Row:6 Cell:3 | Row:6 Cell:4 | Row:6 Cell:5 | Row:6 Cell:6 | Row:6 Cell:7 | Row:6 Cell:8 | Row:6 Cell:9 | Row:6 Cell:10 | Row:6 Cell:11 | Row:6 Cell:12 | Row:6 Cell:13 | Row:6 Cell:14 | Row:6 Cell:15 | Row:6 Cell:16 | Row:6 Cell:17 | Row:6 Cell:18 | Row:6 Cell:19 | Row:6 Cell:20 | Row:6 Cell:21 |
| Row:7 Cell:1 | Row:7 Cell:2 | Row:7 Cell:3 | Row:7 Cell:4 | Row:7 Cell:5 | Row:7 Cell:6 | Row:7 Cell:7 | Row:7 Cell:8 | Row:7 Cell:9 | Row:7 Cell:10 | Row:7 Cell:11 | Row:7 Cell:12 | Row:7 Cell:13 | Row:7 Cell:14 | Row:7 Cell:15 | Row:7 Cell:16 | Row:7 Cell:17 | Row:7 Cell:18 | Row:7 Cell:19 | Row:7 Cell:20 | Row:7 Cell:21 |
| Row:8 Cell:1 | Row:8 Cell:2 | Row:8 Cell:3 | Row:8 Cell:4 | Row:8 Cell:5 | Row:8 Cell:6 | Row:8 Cell:7 | Row:8 Cell:8 | Row:8 Cell:9 | Row:8 Cell:10 | Row:8 Cell:11 | Row:8 Cell:12 | Row:8 Cell:13 | Row:8 Cell:14 | Row:8 Cell:15 | Row:8 Cell:16 | Row:8 Cell:17 | Row:8 Cell:18 | Row:8 Cell:19 | Row:8 Cell:20 | Row:8 Cell:21 |
| Row:9 Cell:1 | Row:9 Cell:2 | Row:9 Cell:3 | Row:9 Cell:4 | Row:9 Cell:5 | Row:9 Cell:6 | Row:9 Cell:7 | Row:9 Cell:8 | Row:9 Cell:9 | Row:9 Cell:10 | Row:9 Cell:11 | Row:9 Cell:12 | Row:9 Cell:13 | Row:9 Cell:14 | Row:9 Cell:15 | Row:9 Cell:16 | Row:9 Cell:17 | Row:9 Cell:18 | Row:9 Cell:19 | Row:9 Cell:20 | Row:9 Cell:21 |
| Row:10 Cell:1 | Row:10 Cell:2 | Row:10 Cell:3 | Row:10 Cell:4 | Row:10 Cell:5 | Row:10 Cell:6 | Row:10 Cell:7 | Row:10 Cell:8 | Row:10 Cell:9 | Row:10 Cell:10 | Row:10 Cell:11 | Row:10 Cell:12 | Row:10 Cell:13 | Row:10 Cell:14 | Row:10 Cell:15 | Row:10 Cell:16 | Row:10 Cell:17 | Row:10 Cell:18 | Row:10 Cell:19 | Row:10 Cell:20 | Row:10 Cell:21 |
| Row:11 Cell:1 | Row:11 Cell:2 | Row:11 Cell:3 | Row:11 Cell:4 | Row:11 Cell:5 | Row:11 Cell:6 | Row:11 Cell:7 | Row:11 Cell:8 | Row:11 Cell:9 | Row:11 Cell:10 | Row:11 Cell:11 | Row:11 Cell:12 | Row:11 Cell:13 | Row:11 Cell:14 | Row:11 Cell:15 | Row:11 Cell:16 | Row:11 Cell:17 | Row:11 Cell:18 | Row:11 Cell:19 | Row:11 Cell:20 | Row:11 Cell:21 |
| Row:12 Cell:1 | Row:12 Cell:2 | Row:12 Cell:3 | Row:12 Cell:4 | Row:12 Cell:5 | Row:12 Cell:6 | Row:12 Cell:7 | Row:12 Cell:8 | Row:12 Cell:9 | Row:12 Cell:10 | Row:12 Cell:11 | Row:12 Cell:12 | Row:12 Cell:13 | Row:12 Cell:14 | Row:12 Cell:15 | Row:12 Cell:16 | Row:12 Cell:17 | Row:12 Cell:18 | Row:12 Cell:19 | Row:12 Cell:20 | Row:12 Cell:21 |
| Row:13 Cell:1 | Row:13 Cell:2 | Row:13 Cell:3 | Row:13 Cell:4 | Row:13 Cell:5 | Row:13 Cell:6 | Row:13 Cell:7 | Row:13 Cell:8 | Row:13 Cell:9 | Row:13 Cell:10 | Row:13 Cell:11 | Row:13 Cell:12 | Row:13 Cell:13 | Row:13 Cell:14 | Row:13 Cell:15 | Row:13 Cell:16 | Row:13 Cell:17 | Row:13 Cell:18 | Row:13 Cell:19 | Row:13 Cell:20 | Row:13 Cell:21 |
| Row:14 Cell:1 | Row:14 Cell:2 | Row:14 Cell:3 | Row:14 Cell:4 | Row:14 Cell:5 | Row:14 Cell:6 | Row:14 Cell:7 | Row:14 Cell:8 | Row:14 Cell:9 | Row:14 Cell:10 | Row:14 Cell:11 | Row:14 Cell:12 | Row:14 Cell:13 | Row:14 Cell:14 | Row:14 Cell:15 | Row:14 Cell:16 | Row:14 Cell:17 | Row:14 Cell:18 | Row:14 Cell:19 | Row:14 Cell:20 | Row:14 Cell:21 |
| Row:15 Cell:1 | Row:15 Cell:2 | Row:15 Cell:3 | Row:15 Cell:4 | Row:15 Cell:5 | Row:15 Cell:6 | Row:15 Cell:7 | Row:15 Cell:8 | Row:15 Cell:9 | Row:15 Cell:10 | Row:15 Cell:11 | Row:15 Cell:12 | Row:15 Cell:13 | Row:15 Cell:14 | Row:15 Cell:15 | Row:15 Cell:16 | Row:15 Cell:17 | Row:15 Cell:18 | Row:15 Cell:19 | Row:15 Cell:20 | Row:15 Cell:21 |
| Row:16 Cell:1 | Row:16 Cell:2 | Row:16 Cell:3 | Row:16 Cell:4 | Row:16 Cell:5 | Row:16 Cell:6 | Row:16 Cell:7 | Row:16 Cell:8 | Row:16 Cell:9 | Row:16 Cell:10 | Row:16 Cell:11 | Row:16 Cell:12 | Row:16 Cell:13 | Row:16 Cell:14 | Row:16 Cell:15 | Row:16 Cell:16 | Row:16 Cell:17 | Row:16 Cell:18 | Row:16 Cell:19 | Row:16 Cell:20 | Row:16 Cell:21 |
| Row:17 Cell:1 | Row:17 Cell:2 | Row:17 Cell:3 | Row:17 Cell:4 | Row:17 Cell:5 | Row:17 Cell:6 | Row:17 Cell:7 | Row:17 Cell:8 | Row:17 Cell:9 | Row:17 Cell:10 | Row:17 Cell:11 | Row:17 Cell:12 | Row:17 Cell:13 | Row:17 Cell:14 | Row:17 Cell:15 | Row:17 Cell:16 | Row:17 Cell:17 | Row:17 Cell:18 | Row:17 Cell:19 | Row:17 Cell:20 | Row:17 Cell:21 |
| Row:18 Cell:1 | Row:18 Cell:2 | Row:18 Cell:3 | Row:18 Cell:4 | Row:18 Cell:5 | Row:18 Cell:6 | Row:18 Cell:7 | Row:18 Cell:8 | Row:18 Cell:9 | Row:18 Cell:10 | Row:18 Cell:11 | Row:18 Cell:12 | Row:18 Cell:13 | Row:18 Cell:14 | Row:18 Cell:15 | Row:18 Cell:16 | Row:18 Cell:17 | Row:18 Cell:18 | Row:18 Cell:19 | Row:18 Cell:20 | Row:18 Cell:21 |
| Row:19 Cell:1 | Row:19 Cell:2 | Row:19 Cell:3 | Row:19 Cell:4 | Row:19 Cell:5 | Row:19 Cell:6 | Row:19 Cell:7 | Row:19 Cell:8 | Row:19 Cell:9 | Row:19 Cell:10 | Row:19 Cell:11 | Row:19 Cell:12 | Row:19 Cell:13 | Row:19 Cell:14 | Row:19 Cell:15 | Row:19 Cell:16 | Row:19 Cell:17 | Row:19 Cell:18 | Row:19 Cell:19 | Row:19 Cell:20 | Row:19 Cell:21 |
| Row:20 Cell:1 | Row:20 Cell:2 | Row:20 Cell:3 | Row:20 Cell:4 | Row:20 Cell:5 | Row:20 Cell:6 | Row:20 Cell:7 | Row:20 Cell:8 | Row:20 Cell:9 | Row:20 Cell:10 | Row:20 Cell:11 | Row:20 Cell:12 | Row:20 Cell:13 | Row:20 Cell:14 | Row:20 Cell:15 | Row:20 Cell:16 | Row:20 Cell:17 | Row:20 Cell:18 | Row:20 Cell:19 | Row:20 Cell:20 | Row:20 Cell:21 |
| Row:21 Cell:1 | Row:21 Cell:2 | Row:21 Cell:3 | Row:21 Cell:4 | Row:21 Cell:5 | Row:21 Cell:6 | Row:21 Cell:7 | Row:21 Cell:8 | Row:21 Cell:9 | Row:21 Cell:10 | Row:21 Cell:11 | Row:21 Cell:12 | Row:21 Cell:13 | Row:21 Cell:14 | Row:21 Cell:15 | Row:21 Cell:16 | Row:21 Cell:17 | Row:21 Cell:18 | Row:21 Cell:19 | Row:21 Cell:20 | Row:21 Cell:21 |
Fieldset§
Preformatted Text§
```LANGUAGE
INSERT TEXT
```
body {
min-height: 100dvh;
color: oklch(var(--body-foreground-lightness) 0 0);
background-color: oklch(var(--body-background-lightness) 0 0);
font-family: system-ui, sans-serif;
overflow-wrap: break-word;
margin: 0;
display: grid;
grid-template-rows: auto 1fr auto;
font-size: var(--font-size);
grid-template-columns:
[full-width-start] 1fr [breakout-large-start] var(--breakout-large-width) [breakout-small-start] var(--breakout-small-width) [breakout-tiny-start] var(--breakout-tiny-width) [content-start] var(--content-width) [content-end] var(--breakout-tiny-width) [breakout-tiny-end] var(--breakout-small-width) [breakout-small-end] var(--breakout-large-width) [breakout-large-end] 1fr [full-width-end];
/* Header */
& > header {
--_padding-block: 12px;
overflow: auto;
background-color: oklch(var(--header-background-lightness) 0 0);
box-shadow: var(--box-shadow-box);
padding-block: var(--_padding-block);
font-weight: 600;
border-radius: var(--element-border-radius);
outline: solid 1px var(--high-contrast-border-color);
a {
--_baseline-transition-properties: background-color, color, transform;
border-radius: 6px;
padding: 12px;
text-decoration: none;
color:
var(--high-contrast-border-color,
oklch(var(--header-select-lightness) 0.15 var(--accent-hue)));
transition-duration: var(--animation-speed, 0.25s);
transition-property: var(--_baseline-transition-properties);
letter-spacing: var(--large-text-letter-spacing);
&:hover {
background-color:
var(--high-contrast-header-select-color,
oklch(var(--header-select-lightness) 0.15 var(--accent-hue)));
color:
var(--high-contrast-border-color,
oklch(var(--header-background-lightness) 0 0));
outline: dotted 2px var(--high-contrast-border-color);
}
&:focus {
outline: solid 4px oklch(var(--scrollbar-foreground-lightness) 0.15 var(--accent-hue));
transition-property: var(--_baseline-transition-properties), outline-width, outline-offset;
outline-offset: 2px;
}
}
.header-left, .skip-navigation {
font-size: var(--font-size-larger);
font-weight: 900;
background-color: oklch(var(--header-background-lightness 0 0));
}
.skip-navigation {
position: absolute;
transform: translateY(-200%);
margin-inline-start: 12px;
&:focus {
transform: translateY(0);
}
}
nav {
.header-left {
display: none;
}
.header-main {
display: flex;
justify-content: space-evenly;
a {
text-align: center;
&.active {
background-color:
var(--high-contrast-header-select-color,
oklch(var(--header-select-lightness) 0.15 var(--accent-hue)));
color:
var(--high-contrast-border-color,
oklch(var(--header-background-lightness) 0 0));
outline: solid 2px var(--high-contrast-border-color);
}
}
}
}
}
}
Figures§
Images§
{%
include image.html
url="INSERT LINK"
caption="INSERT CAPTION"
%}
Screenshot from Mindustry with conveyor belts transporting resources into vaults.
Videos§
{%
include video.html
url="INSERT LINK"
caption="INSERT CAPTION"
%}
Screencast of Mindustry with me taking over control of tier 5 units and firing.
Presentation Table§
This makes use of Jekyll’s Data Files to generate the presentation table. Alternatively, the front matter can be used.
YAML syntax:
presentation_name:
- title: "INSERT TITLE"
image: "INSERT IMAGE SOURCE"
description: "INSERT DESCRIPTION"
- title: "INSERT TITLE"
image: "INSERT IMAGE SOURCE"
description: "INSERT DESCRIPTION"
drop_shadow: false # Optional for images that include a drop shadow
- title: "INSERT TITLE"
image: "INSERT IMAGE SOURCE"
description: "INSERT DESCRIPTION"
source: "INSERT LINK" # Optional for source links
Liquid syntax:
{%
include presentation.html
rows="INSERT DATA"
%}
Row 1
Description
Row 2
Description and image without drop shadow
Row 3
Description with source link
Automatic Color Adaptations§
You can simply modify the --accent-hue custom property for it to change the accent color.