From c0b512d2b44458176cf30ef937f10cbd37eb4c8c Mon Sep 17 00:00:00 2001
From: Sam Scholten
Date: Mon, 24 Aug 2026 14:52:40 +1000
Subject: theme: switch to Atkinson Hyperlegible, 28px base, sync beamer
variant
- Replace EB Garamond with Atkinson Hyperlegible for projection legibility
- Drop base font-size to 28px in both standard and beamer themes
- Normalize letter-spacing for sans body text (0.2px)
- Consolidate logo CSS variables, pad-top/bottom variables, and refined
two-column title-row layout into the published theme
---
acarp.css | 560 +++++++++++++++++++++++++++++++++++---------------------------
1 file changed, 317 insertions(+), 243 deletions(-)
(limited to 'acarp.css')
diff --git a/acarp.css b/acarp.css
index 91f2482..ed10edb 100644
--- a/acarp.css
+++ b/acarp.css
@@ -6,10 +6,48 @@
*
* A minimal, grid-based theme for Marp presentations designed for academic content.
* Grid-only layouts - no flexbox, no utility classes, explicit contracts.
+ *
+ * ============================================================================
+ * CUSTOMIZATION GUIDE
+ * ============================================================================
+ *
+ * Most common customizations are in the :root section below. Edit these
+ * CSS variables to change the theme's appearance:
+ *
+ * Dimensions:
+ * --slide-width: 1280px # Slide width (16:9 aspect ratio)
+ * --slide-height: 720px # Slide height (16:9 aspect ratio)
+ * --padding: 70px # Main content padding (left/right)
+ * --pad-top: 30px # Top padding
+ * --pad-bottom: 30px # Bottom padding (also pagination position)
+ *
+ * Colors:
+ * --color-background: #fdfcff # Slide background
+ * --color-foreground: #202228 # Text color
+ * --color-highlight: #009dd5 # Accent color (links, highlights)
+ * --color-highlight-heading: #33b1dd # Heading accent color
+ * --color-background-code: #f2f1f4 # Code block background
+ *
+ * Typography:
+ * Font family: 'Atkinson Hyperlegible' (sans, projection-optimized)
+ * Base font size: 28px
+ * Line height: 1.4
+ *
+ * Logo (optional):
+ * --logo-image: url('path/to/logo.png')
+ * --logo-width: 100px
+ * --logo-height: 40px
+ * --logo-opacity: 0.7
+ * --logo-top: 20px
+ * --logo-right: 20px
+ *
+ * For 4:3 aspect ratio (Beamer style), see acarp-beamer.css
+ *
+ * ============================================================================
*/
/* @theme acarp */
-@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/* Import syntax highlighting theme */
@import url('https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css');
@@ -23,7 +61,10 @@
--slide-width: 1280px;
--slide-height: 720px;
--padding: 70px;
- --title-top: 40px;
+ --pad-top: 30px;
+ --pad-bottom: 30px;
+ --page-right: var(--padding);
+ --page-bottom: var(--pad-bottom);
--color-background: #fdfcff;
--color-background-code: #f2f1f4;
--color-foreground: #202228;
@@ -32,7 +73,13 @@
--color-highlight-heading: #33b1dd;
}
-/* Base section styling */
+/* ============================================================================
+ BASE SECTION STYLING
+
+ All slides inherit from this base. Defines the slide container, typography,
+ and positioning context for pagination.
+ ============================================================================ */
+
section {
/* Visual appearance */
background: var(--color-background);
@@ -43,13 +90,13 @@ section {
position: relative;
width: var(--slide-width);
height: var(--slide-height);
- padding: 30px var(--padding);
+ padding: var(--pad-top) var(--padding) var(--pad-bottom);
z-index: 0;
/* Typography */
- font-family: 'EB Garamond', 'Times New Roman', serif;
+ font-family: 'Atkinson Hyperlegible', 'Helvetica Neue', Arial, sans-serif;
font-size: 28px;
- letter-spacing: 1px;
+ letter-spacing: 0.2px;
line-height: 1.4;
/* Text behavior */
@@ -57,11 +104,21 @@ section {
word-wrap: break-word;
}
-/* Just change the color and styling of Marp's default pagination */
+/* ============================================================================
+ PAGINATION
+
+ Marp renders slide numbers as section::after pseudo-elements.
+ Positioned absolutely in the bottom-right corner using CSS variables
+ to ensure consistency across all layout types.
+ ============================================================================ */
+
section::after {
+ position: absolute;
+ bottom: var(--page-bottom);
+ right: var(--page-right);
color: #888888 !important;
font-size: 18px !important;
- font-family: 'EB Garamond', 'Times New Roman', serif !important;
+ font-family: 'Atkinson Hyperlegible', 'Helvetica Neue', Arial, sans-serif !important;
}
/* Hide pagination on title slides */
@@ -69,7 +126,13 @@ section.title::after {
display: none !important;
}
-/* Logo support - top right corner */
+/* ============================================================================
+ LOGO SUPPORT
+
+ Optional logo in top-right corner. Configure via CSS variables in your
+ markdown frontmatter or override in :root above.
+ ============================================================================ */
+
section:not(.title)::before {
content: '';
position: absolute;
@@ -85,14 +148,17 @@ section:not(.title)::before {
z-index: 1;
}
-
-
section:not([data-marpit-pagination])::after {
display: none;
}
-/* Typography */
-/* Remove top margin from first element and last element */
+/* ============================================================================
+ TYPOGRAPHY: MARGINS AND SPACING
+
+ Remove default margins from first and last elements to maintain clean
+ spacing. Paragraphs and blockquotes use consistent 15px bottom margin.
+ ============================================================================ */
+
section > *:first-child,
section[data-header] > :nth-child(2) {
margin-top: 0;
@@ -103,49 +169,61 @@ section[data-footer] > :nth-last-child(2) {
margin-bottom: 0;
}
-/* Paragraph and blockquote spacing */
-section p, section blockquote {
+section p,
+section blockquote {
margin: 0 0 15px;
}
-/* Heading spacing and sizing */
-section h1, section h2, section h3, section h4, section h5, section h6 {
+/* ============================================================================
+ TYPOGRAPHY: LISTS
+
+ Use right-pointing angle bracket (›) as list marker for a more
+ academic, minimal appearance.
+ ============================================================================ */
+
+section ul {
+ list-style-type: '› ';
+}
+
+/* ============================================================================
+ TYPOGRAPHY: HEADINGS
+
+ Headings use consistent spacing and sizing. Bold text in headings
+ is highlighted with the accent color for emphasis.
+ ============================================================================ */
+
+section :is(h1, h2, h3, h4, h5, h6) {
margin: 15px 0 30px;
}
-/* Highlight styling for bold text in headings */
-section h1 strong, section h2 strong, section h3 strong,
-section h4 strong, section h5 strong, section h6 strong {
+section :is(h1, h2, h3, h4, h5, h6) strong {
color: var(--color-highlight-heading);
font-weight: inherit;
}
-/* Auto-scaling constraint for headings */
-section h1::part(auto-scaling),
-section h2::part(auto-scaling),
-section h3::part(auto-scaling),
-section h4::part(auto-scaling),
-section h5::part(auto-scaling),
-section h6::part(auto-scaling) {
+section :is(h1, h2, h3, h4, h5, h6)::part(auto-scaling) {
max-height: 660px;
}
-/* Heading font sizes */
-section h1 { font-size: 2.2em; }
-section h2 { font-size: 1.8em; }
-section h3 { font-size: 1.5em; }
-section h4 { font-size: 1.3em; }
-section h5 { font-size: 1.1em; letter-spacing: 1px; }
-section h6 { font-size: 0.9em; letter-spacing: 1px; }
+section h1 { font-size: 2em; }
+section h2 { font-size: 1.6em; }
+section h3 { font-size: 1.3em; }
+section h4 { font-size: 1.1em; }
+section h5 { font-size: 1.05em; letter-spacing: 0.2px; }
+section h6 { font-size: 0.9em; letter-spacing: 0.2px; }
+
+/* ============================================================================
+ CODE: INLINE CODE
+
+ Inline code (backticks) gets a subtle background and border.
+ Font size is reduced to 85% to maintain visual balance.
+ ============================================================================ */
-/* Code and preformatted text */
-/* Inline code styling */
code {
font-family: Monaco, monospace;
letter-spacing: 0;
}
-/* Background for inline code */
section > code,
section *:not(pre) > code {
background: var(--color-background-code);
@@ -159,7 +237,14 @@ section *:not(pre) > code {
letter-spacing: -0.02em;
}
-/* Code block styling */
+/* ============================================================================
+ CODE: CODE BLOCKS
+
+ Code blocks (pre/code) use a subtle drop shadow and top accent bar.
+ Font size is reduced to 70% to fit more content. Overflow is handled
+ with horizontal scrolling.
+ ============================================================================ */
+
pre {
filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
font-size: 70%;
@@ -177,7 +262,7 @@ div[style*="max-width"] pre {
overflow-x: hidden;
}
-/* Add subtle background pattern for code blocks */
+/* Add subtle accent bar at top of code blocks */
pre::before {
content: '';
position: absolute;
@@ -203,116 +288,45 @@ pre > code {
border: 1px solid rgba(0, 0, 0, 0.1);
}
-/* Enhanced syntax highlighting for academic theme - override github theme */
-pre code .hljs-keyword,
-.hljs-keyword {
- color: #d73a49 !important;
- font-weight: 600 !important;
-}
-
-pre code .hljs-string,
-.hljs-string {
- color: #032f62 !important;
-}
-
-pre code .hljs-comment,
-.hljs-comment {
- color: #6a737d !important;
- font-style: italic;
-}
-
-pre code .hljs-number,
-.hljs-number {
- color: #005cc5 !important;
-}
-
-pre code .hljs-function,
-.hljs-function {
- color: #6f42c1 !important;
-}
-
-pre code .hljs-variable,
-.hljs-variable {
- color: #24292e !important;
-}
-
-pre code .hljs-class,
-.hljs-class {
- color: #6f42c1 !important;
- font-weight: 600 !important;
-}
-
-pre code .hljs-tag,
-.hljs-tag {
- color: #22863a !important;
-}
-
-/* Language-specific highlights */
-pre code .hljs-built_in,
-.hljs-built_in {
- color: #e36209 !important;
-}
-
-pre code .hljs-operator,
-.hljs-operator {
- color: #d73a49 !important;
-}
-
-pre code .hljs-punctuation,
-.hljs-punctuation {
- color: #586069 !important;
-}
-
-/* Additional syntax elements */
-pre code .hljs-title,
-.hljs-title {
- color: #6f42c1 !important;
- font-weight: 600 !important;
-}
-
-pre code .hljs-params,
-.hljs-params {
- color: #24292e !important;
-}
-
-pre code .hljs-attr,
-.hljs-attr {
- color: #6f42c1 !important;
-}
-
-pre code .hljs-name,
-.hljs-name {
- color: #22863a !important;
-}
-
-/* Math formulas */
-math {
- font-size: 1.1em;
- display: block !important;
- margin: 0.8em 0 0.8em 1.5em !important;
- text-align: left !important;
-}
+/* ============================================================================
+ MATH FORMULAS
+
+ Math expressions (LaTeX) are displayed as block elements with
+ left indentation for visual hierarchy.
+ ============================================================================ */
-/* MathML and Marp equation rendering */
+math,
section span[data-math],
section .math {
+ font-size: 1.1em;
display: block !important;
- margin: 0.8em 1.5em !important;
+ margin: 0.8em 0 0.8em 1.5em !important;
text-align: left !important;
padding-left: 1.5em;
}
/* ============================================================================
UTILITY CLASSES
+
+ Spacing utilities for fine-grained control over vertical spacing.
+ Use these classes to add consistent spacing between content blocks.
============================================================================ */
-/* Vertical spacing utilities */
+/* Vertical spacing utilities - add top margin */
+.vspace-tiny { margin-top: 0.5em !important; }
.vspace-small { margin-top: 1em !important; }
.vspace-medium { margin-top: 2em !important; }
.vspace-large { margin-top: 3em !important; }
.vspace-xlarge { margin-top: 4em !important; }
+.vspace-xxlarge { margin-top: 5em !important; }
+.vspace-6 { margin-top: 6em !important; }
+.vspace-7 { margin-top: 7em !important; }
+.vspace-8 { margin-top: 8em !important; }
+.vspace-9 { margin-top: 9em !important; }
+.vspace-10 { margin-top: 10em !important; }
+
-/* Spacing that works on any element */
+/* General spacing utilities */
.push-down { margin-bottom: 1.5em !important; }
.push-up { margin-top: 1.5em !important; }
@@ -327,20 +341,46 @@ section p > img:only-child {
margin: 0 auto;
}
-/* Citation utility - bottom left corner */
-.cite {
- position: absolute;
- bottom: 30px;
- left: var(--padding);
- font-size: 0.7em;
- color: #888888;
- opacity: 0.9;
+/* ============================================================================
+ CITATION HELPER
+
+ Position citations in the bottom-left corner. Use the .cite class
+ on a div or span to add a citation to your slide.
+ ============================================================================ */
+
+section .cite,
+div.cite {
+ position: absolute !important;
+ bottom: var(--page-bottom) !important;
+ left: var(--padding) !important;
+ font-size: 18px !important;
+ color: #888888 !important;
+ opacity: 0.9 !important;
+ white-space: normal !important;
+ margin-bottom: 0 !important;
+ width: calc(100% - var(--padding) - var(--page-right) - 150px) !important;
+ max-width: calc(100% - var(--padding) - var(--page-right) - 150px) !important;
+ box-sizing: border-box !important;
+ overflow-wrap: break-word !important;
+ word-break: break-word !important;
+ display: block !important;
}
/* ============================================================================
LAYOUT: title
- Centered title slide for cover pages.
+ Title slide layout - centered content with flexbox.
+
+ Usage:
+
+ # Main Title
+ ## Subtitle
+
+ Features:
+ - Centered vertically and horizontally
+ - Hides pagination
+ - Supports multiple heading levels
+ - Images scale to 80% width
============================================================================ */
section.title {
@@ -356,37 +396,49 @@ section.title {
position: relative;
}
-/* Wrapper for title content to ensure proper centering */
section.title > * {
flex: 0 0 auto;
}
section.title > h1 {
- font-size: 64px;
+ font-size: 2em !important;
margin: 0;
padding: 0;
}
section.title > h2 {
- font-size: 24px;
+ font-size: 1.2em !important;
color: #666;
margin: 0.5em 0 0 0;
padding: 0;
font-weight: normal;
- letter-spacing: 1px;
+ letter-spacing: 0.2px;
+}
+
+section.title > h3 {
+ font-size: 0.9em !important;
+ font-weight: normal !important;
+ color: #666;
+ margin: 0.5em 0 0 0;
+ padding: 0;
+}
+
+section.title > h4 {
+ font-size: 0.8em !important;
+ font-weight: normal !important;
+ color: #888;
+ margin: 0.3em 0 0 0;
+ padding: 0;
+ letter-spacing: 0.2px;
}
-/* Images in title slides behave normally */
section.title > img {
margin: 2em 0;
max-width: 80%;
height: auto;
}
-/* Ensure proper title slide alignment in fullscreen mode */
-div.marpit > svg > foreignObject > section.title,
-svg.marpit > foreignObject > section.title,
-.marpit svg > foreignObject > section.title {
+:is(div.marpit, svg.marpit, .marpit svg) > foreignObject > section.title {
width: 100%;
height: 100%;
display: grid;
@@ -396,58 +448,76 @@ svg.marpit > foreignObject > section.title,
/* ============================================================================
LAYOUT: layout-2col
- Two-column layout: left and right columns with title at top.
+ Two-column layout with title at top.
- Grid contract:
+ Grid structure:
┌─────────────────────────────┐
│ title │
├──────────────┬──────────────┤
│ │ │
│ left-col │ right-col │
│ │ │
- ├──────────────┴──────────────┤
- │ pagination │
- └─────────────────────────────┘
+ └──────────────┴──────────────┘
+
+ Usage:
+
+ # Title
- Grid areas: title, left, right, footer
- Default gap: 2em
- Columns: 1fr 1fr (equal)
+
+ Left content here
+
+
+
+ Right content here
+
+
+ Features:
+ - Fixed title row height (60px) for consistent positioning
+ - Equal-width columns (1fr 1fr)
+ - 1em gap between columns
+ - Title aligned to top of fixed row with 15px padding
+ - Pagination positioned absolutely at bottom-right
+ - Title text does not wrap (uses white-space: nowrap)
+
+ Grid areas: title, left, right
+
+ Note: Title selector targets any h1/h2/h3 direct child (not just first-child)
+ because citation divs may appear before the heading in the HTML.
============================================================================ */
section.layout-2col {
display: grid;
grid-template-columns: 1fr 1fr;
- grid-template-rows: auto 1fr auto;
+ grid-template-rows: 60px 1fr;
grid-template-areas:
"title title"
- "left right"
- "buffer buffer";
+ "left right";
row-gap: 1em;
- column-gap: 0;
- padding: 0;
- height: 100%;
- width: 100%;
- overflow: hidden;
+ column-gap: 1em;
+ box-sizing: border-box;
}
-section.layout-2col > h1:first-child,
-section.layout-2col > h2:first-child,
-section.layout-2col > h3:first-child {
+section.layout-2col > :is(h1, h2, h3),
+section.layout-2col-center > :is(h1, h2, h3) {
grid-area: title;
- padding: 30px 70px 0 70px;
- margin: 15px 0 0;
+ margin: 0;
+ padding: 15px 0 0 0;
position: static;
+ display: flex;
+ align-items: flex-start;
+ min-width: 0;
+ white-space: nowrap;
}
section.layout-2col .left-column {
grid-area: left;
- padding: 0 1em 0 70px;
+ padding: 0;
min-height: 0;
}
section.layout-2col .right-column {
grid-area: right;
- padding: 0 150px 0 1em;
+ padding: 0;
min-height: 0;
}
@@ -460,16 +530,65 @@ section.layout-2col pre {
margin: 15px 0 15px;
}
-section.layout-2col::after {
- position: absolute;
- bottom: 30px;
- right: 70px;
- color: #888888 !important;
- font-size: 18px !important;
- font-family: 'EB Garamond', 'Times New Roman', serif !important;
+section.layout-2col img {
+ max-width: 90%;
+ max-height: 90%;
+ height: auto;
+ width: auto;
+ object-fit: contain;
+ display: block;
}
-section.layout-2col img {
+/* ============================================================================
+ LAYOUT: layout-2col-center
+
+ Two-column layout with centered text content. Useful for outline slides.
+ Inherits grid structure from layout-2col but centers text in each column.
+
+ Note: Title styling is consolidated with layout-2col above to reduce
+ duplication. Both layouts share identical title behavior.
+ ============================================================================ */
+
+section.layout-2col-center {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 60px 1fr;
+ grid-template-areas:
+ "title title"
+ "left right";
+ row-gap: 1em;
+ column-gap: 1em;
+ box-sizing: border-box;
+}
+
+section.layout-2col-center > :is(h1, h2, h3) {
+ grid-column: 1 / -1;
+}
+
+section.layout-2col-center .left-column {
+ grid-area: left;
+ padding: 0;
+ min-height: 0;
+ text-align: center;
+}
+
+section.layout-2col-center .right-column {
+ grid-area: right;
+ padding: 0;
+ min-height: 0;
+ text-align: center;
+}
+
+section.layout-2col-center ul,
+section.layout-2col-center ol {
+ margin: 0 0 15px;
+}
+
+section.layout-2col-center pre {
+ margin: 15px 0 15px;
+}
+
+section.layout-2col-center img {
max-width: 90%;
max-height: 90%;
height: auto;
@@ -481,10 +600,10 @@ section.layout-2col img {
/* ============================================================================
SYNTAX HIGHLIGHTING OVERRIDE
- Force override of highlight.js theme colors for consistent academic styling.
+ Override highlight.js theme colors for consistent academic styling.
+ Colors are chosen to be readable and professional.
============================================================================ */
-/* Base code block colors */
pre {
--hljs-bg: var(--color-background-code) !important;
--hljs-fg: var(--color-foreground) !important;
@@ -496,108 +615,63 @@ pre code {
color: var(--hljs-fg) !important;
}
-/* Syntax-specific colors with maximum specificity */
-section pre code .token.keyword,
-section pre code .hljs-keyword,
-.token.keyword,
-.hljs-keyword {
+/* Syntax-specific colors */
+section pre code :is(.token.keyword, .hljs-keyword) {
color: #d73a49 !important;
font-weight: 600 !important;
}
-section pre code .token.string,
-section pre code .hljs-string,
-.token.string,
-.hljs-string {
+section pre code :is(.token.string, .hljs-string) {
color: #032f62 !important;
}
-section pre code .token.comment,
-section pre code .hljs-comment,
-.token.comment,
-.hljs-comment {
+section pre code :is(.token.comment, .hljs-comment) {
color: #6a737d !important;
font-style: italic !important;
}
-section pre code .token.number,
-section pre code .hljs-number,
-.token.number,
-.hljs-number {
+section pre code :is(.token.number, .hljs-number) {
color: #005cc5 !important;
}
-section pre code .token.function,
-section pre code .hljs-function,
-.token.function,
-.hljs-function {
+section pre code :is(.token.function, .hljs-function) {
color: #6f42c1 !important;
}
-section pre code .token.class-name,
-section pre code .hljs-class,
-.token.class-name,
-.hljs-class {
+section pre code :is(.token.class-name, .hljs-class) {
color: #6f42c1 !important;
font-weight: 600 !important;
}
-section pre code .token.tag,
-section pre code .hljs-tag,
-.token.tag,
-.hljs-tag {
+section pre code :is(.token.tag, .hljs-tag) {
color: #22863a !important;
}
-section pre code .token.builtin,
-section pre code .hljs-built_in,
-.token.builtin,
-.hljs-built_in {
+section pre code :is(.token.builtin, .hljs-built_in) {
color: #e36209 !important;
}
-section pre code .token.operator,
-section pre code .hljs-operator,
-.token.operator,
-.hljs-operator {
+section pre code :is(.token.operator, .hljs-operator) {
color: #d73a49 !important;
}
-section pre code .token.punctuation,
-section pre code .hljs-punctuation,
-.token.punctuation,
-.hljs-punctuation {
+section pre code :is(.token.punctuation, .hljs-punctuation) {
color: #586069 !important;
}
-/* Additional syntax elements */
-section pre code .token.title,
-section pre code .hljs-title,
-.token.title,
-.hljs-title {
+section pre code :is(.token.title, .hljs-title) {
color: #6f42c1 !important;
font-weight: 600 !important;
}
-section pre code .token.parameter,
-section pre code .hljs-params,
-.token.parameter,
-.hljs-params {
+section pre code :is(.token.parameter, .hljs-params) {
color: #24292e !important;
}
-section pre code .token.attr-name,
-section pre code .hljs-attr,
-.token.attr-name,
-.hljs-attr {
+section pre code :is(.token.attr-name, .hljs-attr) {
color: #6f42c1 !important;
}
-section pre code .token.attr-value,
-section pre code .hljs-string,
-.token.attr-value {
+section pre code :is(.token.attr-value, .hljs-string) {
color: #032f62 !important;
}
-
-
-
--
cgit v1.2.3