From 8a2440993ce6e65b8f4b5b71a0feb3b63a9c968e Mon Sep 17 00:00:00 2001 From: Sam Scholten Date: Sun, 19 Oct 2025 21:29:03 +1000 Subject: init --- acarp.css | 560 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 560 insertions(+) create mode 100644 acarp.css (limited to 'acarp.css') diff --git a/acarp.css b/acarp.css new file mode 100644 index 0000000..6395e52 --- /dev/null +++ b/acarp.css @@ -0,0 +1,560 @@ +/* + * Academic Marp (acarp) Theme + * Version: 1.0.0 + * License: MIT + * Repository: https://git.samsci.com/cgit.cgi/acarp-marp-theme/ + * + * A minimal, grid-based theme for Marp presentations designed for academic content. + * Grid-only layouts - no flexbox, no utility classes, explicit contracts. + */ + +/* @theme acarp */ +@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;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'); + +/* Academic Marp (acarp) Theme Base + Grid-only layout system. No flexbox. No utility classes. + Explicit grid contracts for all layouts. +*/ + +:root { + --slide-width: 1280px; + --slide-height: 720px; + --padding: 70px; + --title-top: 40px; + --color-background: #fdfcff; + --color-background-code: #f2f1f4; + --color-foreground: #202228; + --color-highlight: #009dd5; + --color-highlight-hover: #087eaa; + --color-highlight-heading: #33b1dd; +} + +/* Base section styling */ +section { + /* Visual appearance */ + background: var(--color-background); + color: var(--color-foreground); + + /* Layout and positioning */ + display: block; + position: relative; + width: var(--slide-width); + height: var(--slide-height); + padding: 30px var(--padding); + z-index: 0; + + /* Typography */ + font-family: 'EB Garamond', 'Times New Roman', serif; + font-size: 28px; + letter-spacing: 2px; + line-height: 1.4; + + /* Text behavior */ + text-align: left; + word-wrap: break-word; +} + +/* Just change the color and styling of Marp's default pagination */ +section::after { + color: #888888 !important; + font-size: 18px !important; + font-family: 'EB Garamond', 'Times New Roman', serif !important; +} + +/* Hide pagination on title slides */ +section.title::after { + display: none !important; +} + +/* Logo support - top right corner */ +section:not(.title)::before { + content: ''; + position: absolute; + top: var(--logo-top, 20px); + right: var(--logo-right, 20px); + width: var(--logo-width, 100px); + height: var(--logo-height, 40px); + background-image: var(--logo-image, none); + background-repeat: no-repeat; + background-position: right center; + background-size: contain; + opacity: var(--logo-opacity, 0.7); + z-index: 1; +} + + + +section:not([data-marpit-pagination])::after { + display: none; +} + +/* Typography */ +/* Remove top margin from first element and last element */ +section > *:first-child, +section[data-header] > :nth-child(2) { + margin-top: 0; +} + +section > *:last-child, +section[data-footer] > :nth-last-child(2) { + margin-bottom: 0; +} + +/* Paragraph and blockquote spacing */ +section p, section blockquote { + margin: 0 0 15px; +} + +/* Heading spacing and sizing */ +section h1, section h2, section h3, section h4, section h5, section 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 { + 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) { + max-height: 660px; +} + +/* Heading font sizes */ +section h1 { font-size: 2.2em; } +section h2 { font-size: 1.8em; } +section h3 { font-size: 1.5em; letter-spacing: 2px; } +section h4 { font-size: 1.3em; letter-spacing: 2px; } +section h5 { font-size: 1.1em; letter-spacing: 1px; } +section h6 { font-size: 0.9em; letter-spacing: 1px; } + +/* 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); + color: var(--color-foreground); + margin: -0.2em 0.2em 0.2em; + padding: 0.15em 0.3em; + border-radius: 2px; + font-size: 0.85em; + border: 1px solid rgba(0, 0, 0, 0.08); + font-family: Monaco, monospace; + letter-spacing: -0.02em; +} + +/* Code block styling */ +pre { + filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2)); + font-size: 70%; + line-height: 1.15; + margin: 15px 0 30px; + text-align: left; + padding: 0; + overflow-x: auto; + border-radius: 6px; + position: relative; +} + +/* Add subtle background pattern for code blocks */ +pre::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, var(--color-highlight), var(--color-highlight-hover)); + border-radius: 6px 6px 0 0; +} + +/* Code block content styling */ +pre > code { + background: var(--color-background-code); + box-sizing: content-box; + color: var(--color-foreground); + display: block; + margin: 0 auto; + min-width: 456px; + padding: 0.8em 1em; + font-size: 0.9em; + border-radius: 4px; + 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; +} + +/* ============================================================================ + UTILITY CLASSES + ============================================================================ */ + +/* Vertical spacing utilities */ +.vspace-small { margin-top: 1em !important; } +.vspace-medium { margin-top: 2em !important; } +.vspace-large { margin-top: 3em !important; } +.vspace-xlarge { margin-top: 4em !important; } + +/* Spacing that works on any element */ +.push-down { margin-bottom: 1.5em !important; } +.push-up { margin-top: 1.5em !important; } + +/* Center figures and their content */ +.centered-figure { + text-align: center; +} + +/* Auto-center images that are alone in a paragraph */ +section p > img:only-child { + display: block; + margin: 0 auto; +} + +/* ============================================================================ + LAYOUT: title + + Centered title slide for cover pages. + ============================================================================ */ + +section.title { + text-align: center; + padding: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-height: 100vh; + box-sizing: border-box; +} + +section.title > h1 { + font-size: 64px; + margin: 0; + padding: 0; +} + +section.title > h2 { + font-size: 24px; + color: #666; + margin: 0.5em 0 0 0; + padding: 0; + font-weight: normal; + letter-spacing: 1px; +} + +/* Images in title slides behave normally */ +section.title > img { + margin: 2em 0; + max-width: 80%; + height: auto; +} + +/* ============================================================================ + LAYOUT: layout-2col + + Two-column layout: left and right columns with title at top. + + Grid contract: + ┌─────────────────────────────┐ + │ title │ + ├──────────────┬──────────────┤ + │ │ │ + │ left-col │ right-col │ + │ │ │ + ├──────────────┴──────────────┤ + │ pagination │ + └─────────────────────────────┘ + + Grid areas: title, left, right, footer + Default gap: 2em + Columns: 1fr 1fr (equal) + ============================================================================ */ + +section.layout-2col { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: + "title title" + "left right" + "footer footer"; + gap: 2em; + padding: 0; + height: 100%; + width: 100%; + overflow: hidden; +} + +section.layout-2col > h1:first-child, +section.layout-2col > h2:first-child, +section.layout-2col > h3:first-child { + grid-area: title; + padding: 30px var(--padding) 0; + margin: 0 0 10px 0; + position: static; +} + +section.layout-2col .left-column { + grid-area: left; + padding: 0 var(--padding) 0 var(--padding); + min-height: 0; +} + +section.layout-2col .right-column { + grid-area: right; + padding: 0 var(--padding) 0 0; + min-height: 0; +} + +section.layout-2col::after { + position: absolute; + bottom: 0; + right: 0; + color: #888888 !important; + font-size: 18px !important; + font-family: 'EB Garamond', 'Times New Roman', serif !important; + grid-area: unset; + padding: 30px var(--padding); + margin: 0; +} + +section.layout-2col img { + max-width: 90%; + max-height: 90%; + height: auto; + width: auto; + object-fit: contain; + display: block; +} + +/* ============================================================================ + SYNTAX HIGHLIGHTING OVERRIDE + + Force override of highlight.js theme colors for consistent academic styling. + ============================================================================ */ + +/* Base code block colors */ +pre { + --hljs-bg: var(--color-background-code) !important; + --hljs-fg: var(--color-foreground) !important; + background: var(--hljs-bg) !important; +} + +pre code { + background: var(--hljs-bg) !important; + 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 { + color: #d73a49 !important; + font-weight: 600 !important; +} + +section pre code .token.string, +section pre code .hljs-string, +.token.string, +.hljs-string { + color: #032f62 !important; +} + +section pre code .token.comment, +section pre code .hljs-comment, +.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 { + color: #005cc5 !important; +} + +section pre code .token.function, +section pre code .hljs-function, +.token.function, +.hljs-function { + color: #6f42c1 !important; +} + +section pre code .token.class-name, +section pre code .hljs-class, +.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 { + color: #22863a !important; +} + +section pre code .token.builtin, +section pre code .hljs-built_in, +.token.builtin, +.hljs-built_in { + color: #e36209 !important; +} + +section pre code .token.operator, +section pre code .hljs-operator, +.token.operator, +.hljs-operator { + color: #d73a49 !important; +} + +section pre code .token.punctuation, +section pre code .hljs-punctuation, +.token.punctuation, +.hljs-punctuation { + color: #586069 !important; +} + +/* Additional syntax elements */ +section pre code .token.title, +section pre code .hljs-title, +.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 { + color: #24292e !important; +} + +section pre code .token.attr-name, +section pre code .hljs-attr, +.token.attr-name, +.hljs-attr { + color: #6f42c1 !important; +} + +section pre code .token.attr-value, +section pre code .hljs-string, +.token.attr-value { + color: #032f62 !important; +} + + +/* ============================================================================ + LAYOUT: default (no class) + + Simple single-column layout - just use normal document flow. + ============================================================================ */ + +section:not(.title):not(.layout-2col) { + padding: 30px var(--padding); +} -- cgit v1.2.3