Demo Page
An archived section to indicate the post has been archived
A content warning section
A disclaimer section
Style§
Typography§
Breakout Elements§
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.