/*
Hacker Vibe Theme for Pandoc HTML Output
— Simplified, etched with neon accents and monospaced grids
This stylesheet defines the color palette, typography, and element
styling for a terminal-inspired “hacker” look when rendering
Pandoc-generated HTML.
*/
/*────────────────────────────────────────────────────────────────────────────*/
/* Custom properties (CSS variables) for colors and typography */
/*────────────────────────────────────────────────────────────────────────────*/
:root {
/* Color palette */
--bg-page: #202020; /* Dark background for entire page */
--fg-text: gainsboro; /* Light gray for body text */
--border-color: #444; /* Mid-gray for borders and separators */
--code-bg: #111; /* Very dark gray behind code blocks */
--table-bg: #1a1a1a; /* Background for tables (if used) */
--highlight-color: #0f0; /* Neon green accent (e.g., line stripes) */
--accent-color: #FCA311; /* Orange accent (e.g., headings, links) */
--blockquote-color: #666; /* Gray for blockquote bar */
/* Typography */
--base-font: 'Courier New', Courier, monospace; /* Body font */
--mono-font: 'Courier New', Courier, monospace; /* Code font */
--base-size: 18px; /* Root font size */
--line-height: 1.6; /* Comfortable reading line height */
/*Image Background*/
--img-bg: #f5f5f5; /* very light gray—try #fafafa, #fcfcfc, or #fdfcf8 for a creamier look */
}
/*────────────────────────────────────────────────────────────────────────────*/
/* Global Reset — make box-model predictable */
/*────────────────────────────────────────────────────────────────────────────*/
* {
box-sizing: border-box; /* Include padding & borders in element sizes */
}
/*────────────────────────────────────────────────────────────────────────────*/
/* Base page layout — page background, typography, content centering */
/*────────────────────────────────────────────────────────────────────────────*/
html {
background-color: var(--bg-page);
color: var(--fg-text);
font-family: var(--base-font);
font-size: var(--base-size);
line-height: var(--line-height);
}
body {
max-width: 70ch; /* Limit line length for readability */
margin: 0 auto; /* Center the content block */
padding: 2em; /* Space around the content */
overflow-x: auto; /* Allow horizontal scroll if needed */
}
/*────────────────────────────────────────────────────────────────────────────*/
/* Headings — accent color, spacing, and bottom border for h1–h3 */
/*────────────────────────────────────────────────────────────────────────────*/
h1, h2, h3 {
color: var(--accent-color); /* Bright orange headings */
margin-top: 1.0em; /* Space above each heading */
border-bottom: 1px solid var(--border-color);
padding-bottom: 0.25em; /* Visual separation line */
}
h4, h5, h6 {
color: var(--fg-text); /* Standard text color */
font-style: italic; /* Subheading emphasis */
}
/*────────────────────────────────────────────────────────────────────────────*/
/* Links — unvisited, visited, and hover states */
/*────────────────────────────────────────────────────────────────────────────*/
a {
color: var(--accent-color); /* Unvisited link color */
}
a:visited {
color: var(--highlight-color); /* Neon green for visited links */
}
a:hover {
text-decoration: underline; /* Underline on hover for clarity */
}
/*────────────────────────────────────────────────────────────────────────────*/
/* Blockquotes — indented bar, italic text, and spacing */
/*────────────────────────────────────────────────────────────────────────────*/
blockquote {
margin: 1em 0; /* Vertical spacing */
padding-left: 1em; /* Indent quoted text */
border-left: 2px solid var(--blockquote-color);
color: #aaa; /* Softer gray text */
font-style: italic; /* Italicize quotes */
}
/*────────────────────────────────────────────────────────────────────────────*/
/*Inline code — mono font, background, padding, rounded corners */
/*────────────────────────────────────────────────────────────────────────────*/
code {
font-family: var(--mono-font); /* Monospaced for inline code */
background-color: var(--code-bg);
color: var(--fg-text);
padding: 0.1em 0.3em; /* Small padding around text */
border-radius: 2px; /* Slightly rounded corners */
}
/*─────────────────────────────────────────────────────────────*/
/* Base styling for all code blocks ( and variants) */
/*─────────────────────────────────────────────────────────────*/
pre,
pre.numberLines,
div.sourceCode pre {
font-family: var(--mono-font); /* Monospaced font to align code vertically and horizontally */
font-size: 1em; /* Keep code text the same size as body text for consistency */
background-color: var(--code-bg); /* Dark background behind code to distinguish from page */
color: var(--fg-text); /* Light text color for readability against dark background */
padding: 1em; /* Padding inside the code block for breathing room */
margin: 1.5em 0; /* Vertical spacing above and below the block */
border: 1px solid var(--border-color); /* Thin border to frame the code region */
overflow-x: auto; /* Allow horizontal scrolling if code lines are wider than container */
white-space: pre; /* Preserve all whitespace, tabs, and line breaks exactly */
}
/*─────────────────────────────────────────────────────────────*/
/* Code Blocks - Neon stripe and gutter indent for numbered code panes */
/*─────────────────────────────────────────────────────────────*/
pre.numberLines > code,
div.sourceCode pre.numberSource > code {
display: block; /* Make the element fill the width of its parent */
margin-left: 1.25em; /* Push text right to make room for the neon stripe */
padding-left: 0.25em; /* Extra space between stripe and code text */
border-left: 2px solid var(--highlight-color); /* Bright accent stripe marking the start of code */
}
/*─────────────────────────────────────────────────────────────*/
/* Code Blocks - Resetting gutter for un-numbered code blocks */
/*─────────────────────────────────────────────────────────────*/
pre:not(.numberLines) > code {
margin-left: 0; /* Remove any left indent on plain code blocks */
padding-left: 0; /* Remove extra padding that accommodates the stripe */
border-left: none; /* No stripe on non-numbered code */
}
/*────────────────────────────────────────────────────────────────────────────*/
/* Hacker-Vibe Table Styling — dark tables with neon borders & stripes */
/*────────────────────────────────────────────────────────────────────────────*/
table {
width: 100%; /* Fill the available width */
border-collapse: collapse; /* Merge adjacent borders */
margin: 1.5em 0; /* Vertical spacing around tables */
background-color: var(--table-bg); /* Dark table background */
overflow-x: auto; /* Allow horizontal scroll if needed */
}
th,
td {
border: 1px solid var(--border-color); /* Cell outlines */
padding: 0.5em 1em; /* Comfortable cell padding */
text-align: left; /* Left-align by default */
vertical-align: top;
font-family: var(--mono-font); /* Monospaced cells */
}
th {
background-color: var(--border-color); /* Slightly lighter header row */
color: var(--fg-text);
font-weight: bold;
}
tr:nth-child(even) {
background-color: #2a2a2a; /* Subtle zebra-striping */
}
caption {
caption-side: bottom; /* Place captions underneath tables */
text-align: center;
margin-top: 0.5em;
font-style: italic;
color: var(--highlight-color);
}
/*
/*────────────────────────────────────────────────────────────────────────────*/
/*Display math — style for block math spans */
/*────────────────────────────────────────────────────────────────────────────*/
span.math.display {
display: block; /* Separate block for equations */
margin: 1em 0; /* Vertical spacing */
padding: 0.5em; /* Padding around formula */
background-color: var(--code-bg);
border: 1px solid var(--border-color);
font-family: var(--mono-font); /* Monospaced math font */
overflow-x: auto; /* Scroll long formulas */
white-space: pre; /* Preserve formula formatting */
}
*/
/*─────────────────────────────────────────────────────────────*/
/* Block math — left-justified formula with right label */
/*─────────────────────────────────────────────────────────────*/
span.math.display {
display: block; /* Make each equation its own block */
margin: 1em 0; /* Vertical spacing around the equation */
padding: 0.5em 3em 0.5em 0.5em; /* Padding: top/right/bottom/left; reserve gutter for number */
background-color: var(--code-bg); /* Dark background matching code blocks */
border: 1px solid var(--border-color); /* Border matching other blocks */
overflow-x: auto; /* Allow scroll for wide formulas */
white-space: pre; /* Preserve formatting */
position: relative; /* Establish positioning context for the label */
}
/* Force MathJax container to inherit and scale equation font */
span.math.display mjx-container {
font-size: 1.3em !important; /* Override inline styles to enlarge equations by 30% */
}
/* Ensure MathJax container uses left alignment */
/*span.math.display mjx-container {
display: block;
text-align: left;
}
*/
span.math.display mjx-math > mjx-texatom:last-of-type {
position: absolute; /* Absolute positioning inside the parent span */
top: 50%; /* Center vertically within the block */
transform: translateY(-50%); /* Shift up by half its height for perfect centering */
right: 0.25em; /* Distance from the right edge */
font-size: 0.75em; /* Optional: slightly smaller label */
}
/*────────────────────────────────────────────────────────────────────────────*/
/* Miscellaneous tweaks — TOC and link styles, no bullets, no underlines */
/*────────────────────────────────────────────────────────────────────────────*/
#TOC li {
list-style: none; /* Remove bullets in table of contents */
}
#TOC a:not(:hover) {
text-decoration: none; /* Underline only on hover */
}
/*────────────────────────────────────────────────────────────────────────────*/
/* Image centering — center only the ![]()
, not the caption */
/*────────────────────────────────────────────────────────────────────────────*/
figure img {
position: relative; /* Remove from normal flow */
left: 50%; /* Move left edge to the middle */
transform: translateX(-50%); /* Shift left by half its own width */
}
/*─────────────────────────────────────────────────────────────*/
/* White-background wrapper for images and figures */
/*─────────────────────────────────────────────────────────────*/
.image-white-bg,
figure.image-white-bg img {
/* solid white behind the image */
background-color: var(--img-bg);
/* push the edges of the image off the bg so you can see the white border */
padding: 0.25em;
/* make sure the background wraps exactly the image dimensions */
display: inline-block;
}
/*─────────────────────────────────────────────────────────────*/
/* Banner container: span full width, auto height (driven by the image) */
/*─────────────────────────────────────────────────────────────*/
header.page-banner {
background: #202020; /* Dark background for entire page matches main.css*/
text-align: center;
margin-bottom: 1.25em; /* space between banner and content */
overflow: visible; /* let the image overflow the container */
}
/* Banner image: scale to full width, preserve aspect ratio, cap at natural size */
header.page-banner img {
display: block; /* take up only as much width as the image */
position: relative;
left: 50%;
transform: translateX(-50%);
width: auto; /* render at its natural (1000px) width */
max-width: none; /* don’t constrain it to the container */
height: auto; /* keep aspect ratio */
}
/* style the divider under the banner */
hr.banner-divider {
border: none; /* remove default */
border-bottom: 2px solid #ccc;
width: 80%; /* or 100%, or whatever you prefer */
margin-left: auto;
margin-right: auto; /* center it */
}
/* Hide the auto-generated title, but keep author/date visible */
/*#title-block-header h1.title {
display: none;
}*/
#title-block-header p.author::before {
content: "Author: "; /* note the non-breaking space */
font-weight: bold; /* optional */
}
#title-block-header p.date::before {
content: "Date: "; /* adds “Date:” before the date text */
font-weight: bold; /* optional—match the author styling */
}
/*─────────────────────────────────────────────────────────────*/
/* Custom List Style */
/*─────────────────────────────────────────────────────────────*/
/* Remove the default bullets and add custom padding */
ul {
list-style: none;
padding-left: 2em; /* space for our custom bullet */
margin-bottom: 1em;
}
/* Style each list item and inject a hacker-style glyph */
ul li {
position: relative;
margin-bottom: 0.5em;
line-height: 1.4;
font-family: var(--mono-font);
font-size: 1em; /* adjust as needed */
}
/* Use ::before to insert a custom “▸” glyph in neon color */
ul li::before {
content: "→"; /* you can swap this for ▸, ▶, ✹, ●, →, ♦, ↪ etc. */
position: absolute;
left: -1.2em; /* move it a bit further left */
top: -0.1em; /* fine-tune vertical centering */
font-size: 1.4em; /* larger arrow */
color: var(--highlight-color);
line-height: 1; /* prevent it from affecting item spacing */
}
/* Optionally, animate or highlight on hover */
ul li:hover::before {
transform: scale(1.3);
transition: transform 0.1s ease-in-out;
color: var(--accent-color);
}
/* Different glyph for nested lists */
ul ul li::before {
content: "↳";
color: var(--accent-color);
left: -1.2em;
top: 0.2em; /* fine-tune vertical centering */
font-size: 1.1em;
}