path: root/acarp.css

/*
 * 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.
 *
 * ============================================================================
 * 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=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');

/* 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;
  --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;
  --color-highlight: #009dd5;
  --color-highlight-hover: #087eaa;
  --color-highlight-heading: #33b1dd;
}

/* ============================================================================
   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);
  color: var(--color-foreground);
  
  /* Layout and positioning */
  display: block;
  position: relative;
  width: var(--slide-width);
  height: var(--slide-height);
  padding: var(--pad-top) var(--padding) var(--pad-bottom);
  z-index: 0;
  
  /* Typography */
  font-family: 'Atkinson Hyperlegible', 'Helvetica Neue', Arial, sans-serif;
  font-size: 28px;
  letter-spacing: 0.2px;
  line-height: 1.4;
  
  /* Text behavior */
  text-align: left;
  word-wrap: break-word;
}

/* ============================================================================
   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: 'Atkinson Hyperlegible', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Hide pagination on title slides */
section.title::after {
  display: none !important;
}

/* ============================================================================
   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;
  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: 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;
}

section > *:last-child,
section[data-footer] > :nth-last-child(2) {
  margin-bottom: 0;
}

section p,
section blockquote {
  margin: 0 0 15px;
}

/* ============================================================================
   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;
}

section :is(h1, h2, h3, h4, h5, h6) strong {
  color: var(--color-highlight-heading);
  font-weight: inherit;
}

section :is(h1, h2, h3, h4, h5, h6)::part(auto-scaling) {
  max-height: 660px;
}

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 {
  font-family: Monaco, monospace;
  letter-spacing: 0;
}

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: 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%;
  line-height: 1.15;
  margin: 15px 0 30px;
  text-align: left;
  padding: 0;
  overflow-x: auto;
  border-radius: 6px;
  position: relative;
}

/* Hide scrollbar when pre is inside a width-constrained container */
div[style*="max-width"] pre {
  overflow-x: hidden;
}

/* Add subtle accent bar at top of 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);
}

/* ============================================================================
   MATH FORMULAS
   
   Math expressions (LaTeX) are displayed as block elements with
   left indentation for visual hierarchy.
   ============================================================================ */

math,
section span[data-math],
section .math {
  font-size: 1.1em;
  display: block !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 - add top margin.
   For custom spacings, use an inline-height spacer div instead:
     <div style="height: 15em"></div>
   Note: consecutive vspace divs do NOT stack - adjacent margins collapse
   to the larger value, so two .vspace-10 give 10em, not 20em. */
.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; }

/* Horizontal offset utilities - add left padding.
   Works on inline spans (offset within a line) and block wrappers
   (indents the whole block). Cleaner than runs of &nbsp;.
   Note: inline style="" attrs are stripped by Marp's sanitizer unless
   HTML mode is enabled, so prefer these classes over inline padding-left.
   For custom offsets without HTML mode there is no inline fallback. */
.hspace-tiny { padding-left: 0.5em !important; }
.hspace-small { padding-left: 1em !important; }
.hspace-medium { padding-left: 2em !important; }
.hspace-large { padding-left: 3em !important; }
.hspace-xlarge { padding-left: 4em !important; }
.hspace-xxlarge { padding-left: 5em !important; }
.hspace-6 { padding-left: 6em !important; }
.hspace-7 { padding-left: 7em !important; }
.hspace-8 { padding-left: 8em !important; }
.hspace-9 { padding-left: 9em !important; }
.hspace-10 { padding-left: 10em !important; }


/* General spacing utilities */
.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;
}

/* ============================================================================
   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
   
   Title slide layout - centered content with flexbox.
   
   Usage:
   <!-- _class: title -->
   # Main Title
   ## Subtitle
   
   Features:
   - Centered vertically and horizontally
   - Hides pagination
   - Supports multiple heading levels
   - Images scale to 80% width
   ============================================================================ */

section.title {
  text-align: center;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

section.title > * {
  flex: 0 0 auto;
}

section.title > h1 {
  font-size: 2em !important;
  margin: 0;
  padding: 0;
}

section.title > h2 {
  font-size: 1.3em !important;
  color: #666;
  margin: 0.5em 0 0 0;
  padding: 0;
  font-weight: normal;
  letter-spacing: 0.2px;
}

section.title > h3 {
  font-size: 0.9em !important;
  font-weight: normal !important;
  color: #888;
  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;
}

section.title > img {
  margin: 2em 0;
  max-width: 80%;
  height: auto;
}

:is(div.marpit, svg.marpit, .marpit svg) > foreignObject > section.title {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

/* ============================================================================
   LAYOUT: layout-2col
   
   Two-column layout with title at top.
   
   Grid structure:
   ┌─────────────────────────────┐
   │         title               │
   ├──────────────┬──────────────┤
   │              │              │
   │  left-col    │  right-col   │
   │              │              │
   └──────────────┴──────────────┘
   
   Usage:
   <!-- _class: layout-2col -->
   # Title
   
   <div class="left-column">
   Left content here
   </div>
   
   <div class="right-column">
   Right content here
   </div>
   
   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: 60px 1fr;
  grid-template-areas:
    "title title"
    "left right";
  row-gap: 1em;
  column-gap: 1em;
  box-sizing: border-box;
}

section.layout-2col > :is(h1, h2, h3),
section.layout-2col-center > :is(h1, h2, h3) {
  grid-area: title;
  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;
  min-height: 0;
}

section.layout-2col .right-column {
  grid-area: right;
  padding: 0;
  min-height: 0;
}

section.layout-2col ul,
section.layout-2col ol {
  margin: 0 0 15px;
}

section.layout-2col pre {
  margin: 15px 0 15px;
}

section.layout-2col img {
  max-width: 90%;
  max-height: 90%;
  height: auto;
  width: auto;
  object-fit: contain;
  display: block;
}

/* ============================================================================
   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;
  width: auto;
  object-fit: contain;
  display: block;
}

/* ============================================================================
   LAYOUT: highlight-left / highlight-right

   Modifiers that fade out one column of a two-column slide to draw
   attention to the other. Combine with layout-2col or layout-2col-center:

   <!-- _class: layout-2col-center highlight-left -->

   Use across consecutive slides to build up a two-sided comparison,
   introducing one half first, then the other.
   ============================================================================ */

section.highlight-left .right-column,
section.highlight-right .left-column {
  opacity: 0.35;
}

/* ============================================================================
   SYNTAX HIGHLIGHTING OVERRIDE
   
   Override highlight.js theme colors for consistent academic styling.
   Colors are chosen to be readable and professional.
   ============================================================================ */

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 */
section pre code :is(.token.keyword, .hljs-keyword) {
  color: #d73a49 !important;
  font-weight: 600 !important;
}

section pre code :is(.token.string, .hljs-string) {
  color: #032f62 !important;
}

section pre code :is(.token.comment, .hljs-comment) {
  color: #6a737d !important;
  font-style: italic !important;
}

section pre code :is(.token.number, .hljs-number) {
  color: #005cc5 !important;
}

section pre code :is(.token.function, .hljs-function) {
  color: #6f42c1 !important;
}

section pre code :is(.token.class-name, .hljs-class) {
  color: #6f42c1 !important;
  font-weight: 600 !important;
}

section pre code :is(.token.tag, .hljs-tag) {
  color: #22863a !important;
}

section pre code :is(.token.builtin, .hljs-built_in) {
  color: #e36209 !important;
}

section pre code :is(.token.operator, .hljs-operator) {
  color: #d73a49 !important;
}

section pre code :is(.token.punctuation, .hljs-punctuation) {
  color: #586069 !important;
}

section pre code :is(.token.title, .hljs-title) {
  color: #6f42c1 !important;
  font-weight: 600 !important;
}

section pre code :is(.token.parameter, .hljs-params) {
  color: #24292e !important;
}

section pre code :is(.token.attr-name, .hljs-attr) {
  color: #6f42c1 !important;
}

section pre code :is(.token.attr-value, .hljs-string) {
  color: #032f62 !important;
}