From bb414a4be4fc36bb8f0c912c1cf5fe9f9d0d9e3a Mon Sep 17 00:00:00 2001
From: Nathan Schneider <n@nathanschneider.info>
Date: Mon, 13 Apr 2026 23:15:56 -0600
Subject: [PATCH] New ntn.css file for reveal

---
 .revealjs/ntn.css | 419 ++++++++++++++++++----------------------------
 1 file changed, 162 insertions(+), 257 deletions(-)

diff --git a/.revealjs/ntn.css b/.revealjs/ntn.css
index 06400ef..e6274c2 100644
--- a/.revealjs/ntn.css
+++ b/.revealjs/ntn.css
@@ -1,305 +1,210 @@
 /**
- * Black theme for reveal.js. This is the opposite of the 'white' theme.
- * By Hakim El Hattab, http://hakim.se, edited by Nathan Schneider, ntnsndr.in
- * Needs to be placed in ~/.revealjs/reveal.js/dist/theme/
+ * Light theme for reveal.js
+ * Dark-on-light, readable, minimal
+ * 
+ * Works with White Default base theme from reveal.js
+ * Drop into ~/.revealjs/reveal.js/dist/theme/
  */
-section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
-  color: #222; }
 
-/*********************************************
- * GLOBAL STYLES
- *********************************************/
-body {
-  background: light-gray;
-  background-color: light-gray;
+:root {
+  --bg: #ffffff;
+  --bg-secondary: #f4f4f4;
+  --bg-code: #e8e8e8;
+  --text: #1a1a1a;
+  --text-muted: #555555;
+  --accent: #2563eb;
+  --accent-hover: #1d4ed8;
+  --font-body: "Adwaita Sans", Helvetica, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", Consolas, monospace;
+  --h1-size: 2em;
+  --h2-size: 1.5em;
+  --body-size: 30px;
+  --small-size: 0.65em;
+  --code-size: 0.85em;
+  --pre-size: 0.75em;
 }
-  
+
 .reveal {
-  font-family: "Adwaita Sans", Helvetica, sans-serif; /* ntnsndr adjusted */
-  font-size: 30px;
-  font-weight: normal;
-  color: black; }
-
-.reveal:empty {
-  padding: 0 0 0 0;
+  font-family: var(--font-body);
+  font-size: var(--body-size);
+  color: var(--text);
+  text-align: left;
 }
 
-::selection {
-  color: black;
-  background: yellow;
-  text-shadow: none; }
+.reveal .slides { text-align: left; }
 
-.reveal .slides > section,
-.reveal .slides > section > section {
-  line-height: 1.3;
-  font-weight: inherit; }
-
-.reveal h1, .reh2, h3, h4, h5, h6, p {
-  
-}
-
-/*********************************************
- * HEADERS
- *********************************************/
 .reveal h1,
 .reveal h2,
 .reveal h3,
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  display: table;
-  margin: 0px auto 30px auto;
-  background-color: light-gray; /* ntnsndr addition */
-  color: black;
-  font-family: "Adwaita Sans", Helvetica, sans-serif; /* ntnsndr adjusted */
+  font-family: var(--font-body);
   font-weight: 600;
-  line-height: 1.2;
-  letter-spacing: normal;
+  color: var(--text);
+  line-height: 1.1;
+  margin: 0 0 0.3em 0;
   text-shadow: none;
-  word-wrap: break-word; }
-
-.reveal h1 {
-  font-size: 2.5em; }
-
-.reveal h2 {
-  font-size: 2em; }
-
-.reveal h3 {
-  font-size: 1em; }
-
-.reveal h4 {
-  font-size: 1em; }
-
-.reveal h1 {
-  text-shadow: none; }
-
-/*********************************************
- * OTHER
- *********************************************/
-.reveal p, .reveal figcaption {
-  display: table;
-  margin: 0px auto 0px auto;
-  background-color: light-gray;
-  padding: 10px 10px 10px 10px;
-  line-height: 1.3; }
-
-/* Ensure certain elements are never larger than the slide itself */
-.reveal img,
-.reveal video,
-.reveal iframe {
-  max-width: 95%;
-  max-height: 95%; }
-
-.reveal strong,
-.reveal b {
-  font-weight: bold; }
-
-.reveal em {
-  font-style: italic; }
-
-.reveal ol,
-.reveal dl,
-.reveal ul {
-  display: inline-block;
-  text-align: left;
-  margin: 0 0 0 1em; }
-
-.reveal ol {
-  background-color: light-gray; /* ntnsndr addition */
-  padding: 0 5px 0 5px; 
-  list-style-type: decimal; }
-
-.reveal ul {
-  background-color: light-gray; /* ntnsndr addition */
-  padding: 0 5px 0 5px; 
-  list-style-type: disc; }
-
-.reveal ul ul {
-  list-style-type: square; }
-
-.reveal ul ul ul {
-  list-style-type: circle; }
-
-.reveal ul ul,
-.reveal ul ol,
-.reveal ol ol,
-.reveal ol ul {
-  display: block;
-  margin-left: 40px; }
-
-.reveal dt {
-  font-weight: bold; }
-
-.reveal dd {
-  margin-left: 40px; }
-
-.reveal q,
-.reveal blockquote {
-  quotes: none; }
-
-.reveal blockquote {
-  background-color: light-gray; /* ntnsndr addition */
-  display: block;
-  position: relative;
-  width: 90%;
-  margin: 20px auto;
-  padding: 10px;
-  font-style: italic;
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
-
-.reveal blockquote p:first-child,
-.reveal blockquote p:last-child {
-  display: inline-block; }
-
-.reveal q {
-  font-style: italic; }
-
-.reveal pre {
-  background-color: light-gray; /* ntnsndr addition */
-  display: block;
-  position: relative;
-  width: 90%;
-  margin: 20px auto;
-  text-align: left;
-  font-size: 0.55em;
-  font-family: monospace;
-  line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+}
+
+.reveal h1 { font-size: var(--h1-size); font-weight: 700; margin-bottom: 1.6em; }
+.reveal h2 { font-size: var(--h2-size); margin-bottom: 0.7em; }
+.reveal h3 { font-size: 1.15em; }
+.reveal h4 { font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
+
+.reveal p { line-height: 1.35; margin: 0 0 0.6em 0; }
+.reveal strong { font-weight: 700; }
+.reveal em { font-style: italic; }
+
+.reveal ul, .reveal ol {
+  display: block;
+  text-align: left;
+  margin: 0 0 0.5em 0;
+  padding-left: 1.2em;
+}
+
+.reveal ul { list-style-type: disc; }
+.reveal ul ul { list-style-type: square; }
+.reveal ul ul ul { list-style-type: circle; }
+
+.reveal li { margin-bottom: 0.15em; line-height: 1.3; }
+.reveal li::marker { color: var(--accent); }
 
 .reveal code {
-  background-color: light-gray; /* ntnsndr addition */
-  font-family: monospace; }
+  font-family: var(--font-mono);
+  font-size: var(--code-size);
+  background: var(--bg-code);
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+}
 
-.reveal pre code {
-  display: block;
-  padding: 5px;
-  overflow: auto;
-  max-height: 400px;
-  word-wrap: normal; }
+.reveal pre {
+  font-family: var(--font-mono);
+  font-size: var(--pre-size);
+  background: var(--bg-code);
+  padding: 0.6em 1em;
+  border-radius: 4px;
+  margin: 0 0 0.6em 0;
+  width: 100%;
+  box-sizing: border-box;
+  text-align: left;
+  line-height: 1.4;
+  box-shadow: none;
+}
+
+.reveal pre code { background: none; padding: 0; font-size: 1em; }
+
+.reveal blockquote {
+  font-style: italic;
+  color: var(--text-muted);
+  border-left: 4px solid var(--accent);
+  padding: 0.5em 1em;
+  margin: 0 0 1em 0;
+  background: var(--bg-secondary);
+  box-shadow: none;
+}
+
+.reveal blockquote p { margin: 0; }
+.reveal blockquote p:first-child::before { content: none; }
 
 .reveal table {
-  margin: auto;
+  margin: 0 0 0.5em 0;
   border-collapse: collapse;
-  border-spacing: 0; }
+  border-spacing: 0;
+  width: 100%;
+  font-size: 1em;
+}
 
 .reveal table th {
-  font-weight: bold; }
+  font-weight: 600;
+  text-align: left;
+  padding: 0.4em 0.8em;
+  background: var(--bg-secondary);
+  border-bottom: 2px solid var(--accent);
+  border-top: 1px solid rgba(0,0,0,0.1);
+  vertical-align: bottom;
+}
 
-.reveal table th,
 .reveal table td {
   text-align: left;
-  padding: 0.2em 0.5em 0.2em 0.5em;
-  border-bottom: 1px solid; }
+  padding: 0.35em 0.8em;
+  border-bottom: 1px solid rgba(0,0,0,0.08);
+  border-top: 1px solid rgba(0,0,0,0.04);
+  vertical-align: top;
+}
 
+.reveal table tr:first-child td,
+.reveal table tr:first-child th { border-top: none; }
+.reveal table tr:last-child td { border-bottom: none; }
+.reveal table tbody tr:hover td { background: rgba(0,0,0,0.02); }
 .reveal table th[align="center"],
-.reveal table td[align="center"] {
-  text-align: center; }
-
+.reveal table td[align="center"] { text-align: center; }
 .reveal table th[align="right"],
-.reveal table td[align="right"] {
-  text-align: right; }
+.reveal table td[align="right"] { text-align: right; }
+.reveal table font[size="1"] { font-size: 0.8em; }
+.reveal table font[size="2"] { font-size: 1em; }
+.reveal table font[size="3"] { font-size: 1.2em; }
+.reveal table table { margin: 0; font-size: 1em; }
 
-.reveal table tbody tr:last-child th,
-.reveal table tbody tr:last-child td {
-  border-bottom: none; }
-
-.reveal sup {
-  vertical-align: super; }
-
-.reveal sub {
-  vertical-align: sub; }
-
-.reveal small {
-  background-color: light-gray; /* ntnsndr addition */
+.reveal figure {
+  margin: 0 0 0.5em 0;
   display: inline-block;
-  font-size: 0.6em;
-  line-height: 1.2em;
-  vertical-align: top; }
+  max-width: 98%;
+}
 
-.reveal small * {
-  vertical-align: top; }
+.reveal img, .reveal video, .reveal iframe {
+  max-width: 100%;
+  max-height: 75vh;
+  width: auto;
+  height: auto;
+  display: block;
+}
 
-/*********************************************
- * LINKS
- *********************************************/
-.reveal a {
-  color: #42affa;
-  text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
-  transition: color .15s ease; }
-
-.reveal a:hover {
-  color: #8dcffc;
-  text-shadow: none;
-  border: none; }
-
-.reveal .roll span:after {
-  color: purple;}
-
-/*********************************************
- * IMAGES
- *********************************************/
 .reveal section img {
-  margin: 15px 0px;
-  background: light-gray;
-  border: 4px solid #fff;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  border-radius: 4px;
+}
 
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
+.reveal figcaption {
+  font-size: 0.8em;
+  color: var(--text-muted);
+  margin-top: 0.3em;
+}
 
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
-  transition: all .15s linear; }
+.reveal a { color: var(--accent); text-decoration: none; transition: color 0.2s ease; }
+.reveal a:hover { color: var(--accent-hover); text-shadow: none; }
 
-.reveal a:hover img {
-  background: light-gray;
-  border-color: #42affa;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
-
-/*********************************************
- * NAVIGATION CONTROLS
- *********************************************/
 .reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
-  border-right-color: #42affa; }
-
+.reveal .controls .navigate-left.enabled { border-right-color: var(--accent); }
 .reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
-  border-left-color: #42affa; }
-
+.reveal .controls .navigate-right.enabled { border-left-color: var(--accent); }
 .reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
-  border-bottom-color: #42affa; }
-
+.reveal .controls .navigate-up.enabled { border-bottom-color: var(--accent); }
 .reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
-  border-top-color: #42affa; }
+.reveal .controls .navigate-down.enabled { border-top-color: var(--accent); }
+.reveal .controls .navigate-left.enabled:hover { border-right-color: var(--accent-hover); }
+.reveal .controls .navigate-right.enabled:hover { border-left-color: var(--accent-hover); }
+.reveal .controls .navigate-up.enabled:hover { border-bottom-color: var(--accent-hover); }
+.reveal .controls .navigate-down.enabled:hover { border-top-color: var(--accent-hover); }
 
-.reveal .controls .navigate-left.enabled:hover {
-  border-right-color: #8dcffc; }
+.reveal .progress { background: rgba(0,0,0,0.1); height: 4px; }
+.reveal .progress span { background: var(--accent); }
 
-.reveal .controls .navigate-right.enabled:hover {
-  border-left-color: #8dcffc; }
+.reveal ::selection { background: var(--accent); color: white; }
 
-.reveal .controls .navigate-up.enabled:hover {
-  border-bottom-color: #8dcffc; }
+.reveal .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; text-align: left; }
 
-.reveal .controls .navigate-down.enabled:hover {
-  border-top-color: #8dcffc; }
+.reveal .callout {
+  background: var(--bg-secondary);
+  border-left: 4px solid var(--accent);
+  padding: 0.5em 0.8em;
+  margin: 0 0 0.5em 0;
+  border-radius: 0 4px 4px 0;
+}
 
-/*********************************************
- * PROGRESS BAR
- *********************************************/
-.reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
-
-.reveal .progress span {
-  background: #42affa;
-  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+.reveal .callout-title { font-size: 0.8em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-bottom: 0.3em; }
+.reveal .tag { display: inline-block; font-size: 0.7em; font-weight: 600; padding: 0.2em 0.6em; background: var(--accent); color: white; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em; vertical-align: middle; }
+.reveal small { font-size: var(--small-size); line-height: 1.4; vertical-align: top; background: transparent; }
\ No newline at end of file