convert apron/adirondack to less, improve a bunch

5 files changed, 313 insertions, 470 deletions

diff --git a/static/css/adirondack.css b/static/css/adirondack.css
deleted file mode 100644
index 6b3ef62..0000000
--- a/static/css/adirondack.css
+++ /dev/null
@@ -1,221 +0,0 @@
-@import url('https://fonts.googleapis.com/css?family=Quattrocento|Quattrocento+Sans:400,400i,700,700i&subset=latin-ext');
-
-/* Type scale, drawn from Tachyons:
- * 6rem (96px)		5rem (80px)		3rem (48px)	2.25rem (36px)
- * 1.5rem (24px)	1.25rem (20px)	1rem (16px)	.875rem (14px)
- * TODO: use font squirrel's web-safe font stacks as fallbacks
-*/
-
-.remark-slide-content * {
-	font-family: 'Quattrocento Sans',-apple-system, BlinkMacSystemFont,
-					'avenir next', avenir, 'helvetica neue', helvetica,
-					arial, sans-serif;
-	font-size: 2rem;
-	line-height: 1.25;
-}
-.remark-slide-content.compact {
-	padding-left: 40px;
-	padding-right: 40px;
-}
-.remark-slide-content.compact * {
-	font-size: 1.75rem;
-}
-.remark-slide-content.roomy * {
-	font-size: 2.25rem;
-}
-
-.remark-slide-content h1,
-.remark-slide-content h2,
-.remark-slide-content h3 {
-	font-family: Quattrocento, serif;
-	font-weight: bold;
-	margin-top: 0.5em;
-	margin-bottom: 0.5em;
-}
-.remark-slide-content h1 {
-	font-size: 3rem;
-}
-.remark-slide-content.compact h1 {
-	font-size: 2.75rem;
-}
-.remark-slide-content.roomy h1 {
-	font-size: 4rem;
-}
-.remark-slide-content h2 {
-	font-size: 2.75rem;
-}
-.remark-slide-content.compact h2 {
-	font-size: 2.5rem;
-}
-.remark-slide-content.roomy h2 {
-	font-size: 3rem;
-}
-.remark-slide-content h3 {
-	font-size: 2.5rem;
-}
-.remark-slide-content.compact h3 {
-	font-size: 2.25rem;
-}
-.remark-slide-content.roomy h3 {
-	font-size: 2.75rem;
-}
-
-/* Table Styling
- */
-.remark-slide-content table {
-   border-spacing: 0;
-   border-collapse: collapse;
-   display: block;
-   width: 100%;
-   overflow: auto;
-   font-size: 85%;
-	font-family: 'Quattrocento Sans',-apple-system, BlinkMacSystemFont,
-					'avenir next', avenir, 'helvetica neue', helvetica,
-					arial, sans-serif;
-}
-.remark-slide-content table tr:nth-child(2n) {
-   background-color: #f6f8fa;
-}
-.remark-slide-content table th, .remark-slide-content table td {
-   display: table-cell;
-   vertical-align: inherit;
-   padding: .25rem .5rem;
-   border: 1px solid #dfe2e5;
-}
-.remark-slide-content table th {
-   font-weight: 600;
-}
-
-/* Code and Blockquote Styling
- */
-pre {
-   border-radius: 3px;
-   padding: 1rem;
-   background: #f6f8fa;
-   overflow: auto;
-}
-p>code, li>code, a>code {
-   background: #f6f8fa;
-   margin: 0;
-   border-radius: 3px;
-   padding: 0.2em 0.3em;
-}
-pre, code, kbd, tt, samp,
-pre *, code *, kbd *, tt *, samp * {
-	font-family: Monaco, "Lucida Sans Typewriter", "Lucida Console", "Andale Mono", "Consolas", monospace !important;
-   font-size: 1.5rem !important;
-	line-height: 1.5 !important;
-}
-
-blockquote {
-   margin: 0;
-   padding: 0 1rem;
-   color: #6a737d;
-   border-left: 0.25rem solid #dfe2e5;
-}
-
-.remark-slide-content .remark-slide-number,
-.remark-slide-content .footer li {
-	background-color: rgba(255, 255, 255, .5);
-	opacity: .5;
-	padding: 2px 5px;
-	border-radius: 5px;
-	font-size: 1.25rem;
-	display: block;
-	position: absolute;
-	bottom: 12px;
-	list-style: none;
-}
-.remark-slide-content .footer li:nth-child(1) {
-	left: 20px;
-}
-.remark-slide-content .footer li:nth-child(2) {
-	left: 45%;
-}
-.remark-slide-content .footer li img {
-	display: block;
-}
-.remark-slide-content.no-number .remark-slide-number,
-.remark-slide-content.no-number .footer {
-	display: none;
-}
-
-/* title layout
- * This layout assumes that you start the content with an H1. You can follow it
- * with an H2 or H3, but you always start with H1.
- */
-.remark-slide-content.title h1 {
-	font-size: 4rem;
-	top: calc(50% - 2.25em);
-}
-.remark-slide-content.title h2 {
-	font-size: 3rem;
-	top: calc(50%);
-}
-.remark-slide-content.title h3 {
-	font-size: 2rem;
-	top: calc(50% + .25em);
-}
-.remark-slide-content.title h1,
-.remark-slide-content.title h2,
-.remark-slide-content.title h3 {
-	position: absolute;
-	width: 100%;
-	left: 0;
-	margin: 0;
-	padding: 1em 0;
-	font-weight: normal;
-}
-.remark-slide-content.smokescreen>h1,
-.remark-slide-content img[src~=smokescreen] {
-	background-color: rgba(0,0,0,.7);
-}
-.remark-slide-content.smokescreen>h1,
-.remark-slide-content.smokescreen>h2,
-.remark-slide-content.smokescreen>h3 {
-	color: white;
-	text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8),
-					 8px 8px 20px rgba(0, 0, 0, 0.9);
-}
-.remark-slide-content.fogscreen>h1 {
-	background-color: rgba(255,255,255,.7);
-}
-.remark-slide-content.fogscreen>h1,
-.remark-slide-content.fogscreen>h2,
-.remark-slide-content.fogscreen>h3 {
-	color: black;
-	text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.6),
-					 8px 8px 20px rgba(0, 0, 0, 0.4);
-}
-.remark-slide-content.title.shelf>h1 {
-	/* Make the element large but with negative bottom margin so it will extend
-	 * downwards underneath others.  This is better than giving each element a
-	 * background and nestling them against each other, because that will create
-	 * very thin lines between them where the elements don't meet and the slide
-	 * background shows through.
-	 */
-	padding-bottom: 2.5em;
-	margin-bottom: -2.5em;
-}
-
-.remark-slide-content.fit-h1 h1 {
-	height: 1.25em;
-	overflow: hidden;
-}
-
-.remark-slide-content.col {
-	padding-top: 136px;
-}
-
-.remark-slide-content.col.compact {
-	padding-top: 125px;
-	padding-left: 40px;
-	padding-right: 40px;
-}
-.remark-slide-content.col.compact h1 {
-	left: 40px;
-}
-
-.remark-slide-content.col.roomy {
-	padding-top: 168px;
-}
diff --git a/static/css/adirondack.less b/static/css/adirondack.less
index 6b3ef62..fa5953f 100644
--- a/static/css/adirondack.less
+++ b/static/css/adirondack.less
@@ -1,221 +1,90 @@
-@import url('https://fonts.googleapis.com/css?family=Quattrocento|Quattrocento+Sans:400,400i,700,700i&subset=latin-ext');
-
-/* Type scale, drawn from Tachyons:
- * 6rem (96px)		5rem (80px)		3rem (48px)	2.25rem (36px)
- * 1.5rem (24px)	1.25rem (20px)	1rem (16px)	.875rem (14px)
- * TODO: use font squirrel's web-safe font stacks as fallbacks
-*/
-
-.remark-slide-content * {
-	font-family: 'Quattrocento Sans',-apple-system, BlinkMacSystemFont,
-					'avenir next', avenir, 'helvetica neue', helvetica,
-					arial, sans-serif;
-	font-size: 2rem;
-	line-height: 1.25;
-}
-.remark-slide-content.compact {
-	padding-left: 40px;
-	padding-right: 40px;
-}
-.remark-slide-content.compact * {
-	font-size: 1.75rem;
-}
-.remark-slide-content.roomy * {
-	font-size: 2.25rem;
-}
-
-.remark-slide-content h1,
-.remark-slide-content h2,
-.remark-slide-content h3 {
-	font-family: Quattrocento, serif;
-	font-weight: bold;
-	margin-top: 0.5em;
-	margin-bottom: 0.5em;
-}
-.remark-slide-content h1 {
-	font-size: 3rem;
-}
-.remark-slide-content.compact h1 {
-	font-size: 2.75rem;
-}
-.remark-slide-content.roomy h1 {
-	font-size: 4rem;
-}
-.remark-slide-content h2 {
-	font-size: 2.75rem;
-}
-.remark-slide-content.compact h2 {
-	font-size: 2.5rem;
-}
-.remark-slide-content.roomy h2 {
-	font-size: 3rem;
-}
-.remark-slide-content h3 {
-	font-size: 2.5rem;
-}
-.remark-slide-content.compact h3 {
-	font-size: 2.25rem;
-}
-.remark-slide-content.roomy h3 {
-	font-size: 2.75rem;
-}
-
-/* Table Styling
- */
-.remark-slide-content table {
-   border-spacing: 0;
-   border-collapse: collapse;
-   display: block;
-   width: 100%;
-   overflow: auto;
-   font-size: 85%;
-	font-family: 'Quattrocento Sans',-apple-system, BlinkMacSystemFont,
-					'avenir next', avenir, 'helvetica neue', helvetica,
-					arial, sans-serif;
-}
-.remark-slide-content table tr:nth-child(2n) {
-   background-color: #f6f8fa;
-}
-.remark-slide-content table th, .remark-slide-content table td {
-   display: table-cell;
-   vertical-align: inherit;
-   padding: .25rem .5rem;
-   border: 1px solid #dfe2e5;
-}
-.remark-slide-content table th {
-   font-weight: 600;
-}
-
-/* Code and Blockquote Styling
- */
-pre {
-   border-radius: 3px;
-   padding: 1rem;
-   background: #f6f8fa;
-   overflow: auto;
-}
-p>code, li>code, a>code {
-   background: #f6f8fa;
-   margin: 0;
-   border-radius: 3px;
-   padding: 0.2em 0.3em;
-}
-pre, code, kbd, tt, samp,
-pre *, code *, kbd *, tt *, samp * {
-	font-family: Monaco, "Lucida Sans Typewriter", "Lucida Console", "Andale Mono", "Consolas", monospace !important;
-   font-size: 1.5rem !important;
-	line-height: 1.5 !important;
-}
-
-blockquote {
-   margin: 0;
-   padding: 0 1rem;
-   color: #6a737d;
-   border-left: 0.25rem solid #dfe2e5;
-}
-
-.remark-slide-content .remark-slide-number,
-.remark-slide-content .footer li {
-	background-color: rgba(255, 255, 255, .5);
-	opacity: .5;
-	padding: 2px 5px;
-	border-radius: 5px;
-	font-size: 1.25rem;
-	display: block;
-	position: absolute;
-	bottom: 12px;
-	list-style: none;
-}
-.remark-slide-content .footer li:nth-child(1) {
-	left: 20px;
-}
-.remark-slide-content .footer li:nth-child(2) {
-	left: 45%;
-}
-.remark-slide-content .footer li img {
-	display: block;
-}
-.remark-slide-content.no-number .remark-slide-number,
-.remark-slide-content.no-number .footer {
-	display: none;
-}
-
-/* title layout
- * This layout assumes that you start the content with an H1. You can follow it
- * with an H2 or H3, but you always start with H1.
- */
-.remark-slide-content.title h1 {
-	font-size: 4rem;
-	top: calc(50% - 2.25em);
-}
-.remark-slide-content.title h2 {
-	font-size: 3rem;
-	top: calc(50%);
-}
-.remark-slide-content.title h3 {
-	font-size: 2rem;
-	top: calc(50% + .25em);
-}
-.remark-slide-content.title h1,
-.remark-slide-content.title h2,
-.remark-slide-content.title h3 {
-	position: absolute;
-	width: 100%;
-	left: 0;
-	margin: 0;
-	padding: 1em 0;
-	font-weight: normal;
-}
-.remark-slide-content.smokescreen>h1,
-.remark-slide-content img[src~=smokescreen] {
-	background-color: rgba(0,0,0,.7);
-}
-.remark-slide-content.smokescreen>h1,
-.remark-slide-content.smokescreen>h2,
-.remark-slide-content.smokescreen>h3 {
-	color: white;
-	text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8),
-					 8px 8px 20px rgba(0, 0, 0, 0.9);
-}
-.remark-slide-content.fogscreen>h1 {
-	background-color: rgba(255,255,255,.7);
-}
-.remark-slide-content.fogscreen>h1,
-.remark-slide-content.fogscreen>h2,
-.remark-slide-content.fogscreen>h3 {
-	color: black;
-	text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.6),
-					 8px 8px 20px rgba(0, 0, 0, 0.4);
-}
-.remark-slide-content.title.shelf>h1 {
-	/* Make the element large but with negative bottom margin so it will extend
-	 * downwards underneath others.  This is better than giving each element a
-	 * background and nestling them against each other, because that will create
-	 * very thin lines between them where the elements don't meet and the slide
-	 * background shows through.
-	 */
-	padding-bottom: 2.5em;
-	margin-bottom: -2.5em;
-}
-
-.remark-slide-content.fit-h1 h1 {
-	height: 1.25em;
-	overflow: hidden;
-}
-
-.remark-slide-content.col {
-	padding-top: 136px;
-}
-
-.remark-slide-content.col.compact {
-	padding-top: 125px;
-	padding-left: 40px;
-	padding-right: 40px;
-}
-.remark-slide-content.col.compact h1 {
-	left: 40px;
-}
-
-.remark-slide-content.col.roomy {
-	padding-top: 168px;
-}
+@import url('https://fonts.googleapis.com/css?family=Quattrocento|Quattrocento+Sans:400,400i,700,700i&subset=latin-ext');

+

+@colors: {

+	muted-text: #6a737d;

+	shaded-bg: #f6f8fa;

+	border: #dfe2e5;

+}

+

+.remark-slide-content {

+	font-family: 'Quattrocento Sans',-apple-system, BlinkMacSystemFont,

+		'avenir next', avenir, 'helvetica neue', helvetica,

+		arial, sans-serif;

+	pre, code, kbd, tt, samp {

+		font-family: Monaco, "Lucida Sans Typewriter", "Lucida Console",

+			"Andale Mono", "Consolas", monospace;

+	}

+	h1, h2, h3 {

+		font-family: Quattrocento, "Goudy Old Style", "Big Caslon", Palatino, serif;

+		font-weight: bold;

+	}

+

+	table {

+		border-spacing: 0;

+		border-collapse: collapse;

+		display: block;

+		width: 100%;

+		overflow: auto;

+	}

+	table tr:nth-child(2n) {

+		background-color: @colors[shaded-bg];

+	}

+	table th, table td {

+		display: table-cell;

+		vertical-align: inherit;

+		padding: 0.15em 0.30em;

+		border: 1px solid @colors[border];

+	}

+	table th {

+		font-weight: bold;

+	}

+	pre {

+		border-radius: 0.4em;

+		padding: 0.5em;

+		background-color: @colors[shaded-bg];

+		overflow: auto;

+	}

+	p>code, li>code, a>code {

+		background-color: @colors[shaded-bg];

+		margin: 0;

+		border-radius: 0.2em;

+		padding: 0.15em 0.25em;

+	}

+	blockquote {

+		margin: 0;

+		padding: 0 0.5em;

+		color: @colors[muted-text];

+		border-left: 0.125em solid @colors[border];

+	}

+

+	.remark-slide-number, .footer li {

+		background-color: rgba(255, 255, 255, .5);

+		opacity: .5;

+	}

+	

+	// Smokescreen and fogscreen for the title layout

+	&.smokescreen>h1, img[src~=smokescreen] {

+		background-color: rgba(0, 0, 0, 0.7);

+	}

+	&.smokescreen {

+		>h1, >h2, >h3 {

+			color: white;

+			text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8),

+						8px 8px 20px rgba(0, 0, 0, 0.9);

+		}

+	}

+	&.fogscreen {

+		>h1 {

+			background-color: rgba(255, 255, 255, 0.7);

+		}

+		>h1, >h2, >h3 {

+			color: black;

+			text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.6),

+					8px 8px 20px rgba(0, 0, 0, 0.4);

+		}

+	}

+	&.fit-h1 h1 {

+		height: 1.25em;

+		overflow: hidden;

+	}

+}

diff --git a/static/css/apron.css b/static/css/apron.css
index e1b6f58..553829f 100644
--- a/static/css/apron.css
+++ b/static/css/apron.css
@@ -1,9 +1,3 @@
-/* Globals, resets, and fixes. Remark sets display:table and display:table-cell,
- * I think in order to make things like vertical-align:middle work. But those
- * mess with a bunch of other things, and make them hard/impossible. An example
- * is using column-count, which won't work except inside a display:block
- * element. So I reset these things to undo what I consider Remark's hacks.
- */
 .remark-slide {
   display: block;
   box-sizing: border-box;
@@ -128,12 +122,27 @@
 }
 .remark-slide-content.col-2 {
   columns: 2;
-  padding-top: 10rem;
+  padding-top: 136px;
   column-gap: 1.5em;
 }
 .remark-slide-content.col-2 > h1:first-of-type {
   position: absolute;
-  top: 20px;
+  margin-top: 0px;
+  top: 44px;
+  left: 80px;
+}
+.remark-slide-content.col-2.compact {
+  padding-top: 136px;
+}
+.remark-slide-content.col-2.compact > h1:first-of-type {
+  top: 42px;
+  left: 40px;
+}
+.remark-slide-content.col-2.roomy {
+  padding-top: 168px;
+}
+.remark-slide-content.col-2.roomy > h1:first-of-type {
+  top: 52px;
   left: 80px;
 }
 .remark-slide-content.col-2 *:nth-child(2) {
@@ -146,12 +155,27 @@
 }
 .remark-slide-content.col-3 {
   columns: 3;
-  padding-top: 10rem;
+  padding-top: 136px;
   column-gap: 1.5em;
 }
 .remark-slide-content.col-3 > h1:first-of-type {
   position: absolute;
-  top: 20px;
+  margin-top: 0px;
+  top: 44px;
+  left: 80px;
+}
+.remark-slide-content.col-3.compact {
+  padding-top: 136px;
+}
+.remark-slide-content.col-3.compact > h1:first-of-type {
+  top: 42px;
+  left: 40px;
+}
+.remark-slide-content.col-3.roomy {
+  padding-top: 168px;
+}
+.remark-slide-content.col-3.roomy > h1:first-of-type {
+  top: 52px;
   left: 80px;
 }
 .remark-slide-content.col-3 *:nth-child(2) {
diff --git a/static/css/apron.css.map b/static/css/apron.css.map
deleted file mode 100644
index 3a4ec13..0000000
--- a/static/css/apron.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["apron.less"],"names":[],"mappings":";;;;;;AASA;EACC,cAAA;EACA,sBAAA;EACA,WAAA;EACA,YAAA;;AAGD;EACC,cAAA;EACA,sBAAA;EACA,YAAA;;AAHD,qBAIC;EACC,sBAAA;;AAID,qBAAC,MAAO;EACP,uBAAA;;AAED,qBAAC,YAAa;EACb,wBAAA;;AAED,qBAAC,YAAa;EACb,wBAAA;;AAED,qBAAC;EACA,4KAAA;;AAED,qBAAC;EACA,oNAAA;;AAED,qBAAC;EACA,sIAAA;;AAED,qBAAC;EACA,8JAAA;;AA5BF,qBAgCC;EACC,eAAA;;AAID,qBAAC;AAAY,qBAAC,UAAU;EACvB,SAAA;EACA,UAAA;;AAID,qBAAC;EACA,kBAAA;EACA,sBAAA;;AACA,qBAHA,MAGC;EACA,kBAAA;;AAED,qBANA,MAMC;EACA,kBAAA;;AAKF,qBAAC;EACA,kBAAA;EACA,oBAAA;;AACA,qBAHA,YAGC,IAAE;EACF,YAAA;EACA,WAAA;;AACA,qBAND,YAGC,IAAE,YAGD;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,WAAA;EACA,WAAA;EACA,iBAAA;;AAMH,qBAAC,UAAU,IAAE;EACZ,YAAA;EACA,YAAA;EACA,OAAO,SAAP;EACA,iBAAA;EACA,eAAA;EACA,YAAA;;AAKA,qBADA,SACC,IAAE;EACF,YAAA;EACA,WAAA;EACA,OAAO,SAAP;EACA,kBAAA;EACA,eAAA;EACA,YAAA;;AAED,qBATA,SASC;AAAK,qBATN,SASO;AAAK,qBATZ,SASa;EAEZ,cAAA;;AAMF,qBAAC;EACA,eAAe,SAAf;;AACA,qBAFA,eAEC,IAAE;EACF,WAAA;EACA,YAAA;;AACA,qBALD,eAEC,IAAE,cAGD;EACA,kBAAA;EACA,QAAA;EACA,UAAA;EACA,YAAA;EACA,UAAA;EACA,iBAAA;EACA,qBAAA;;AAOH,qBAAC;EACA,cAAc,SAAd;;AACA,qBAFA,cAEC,IAAE;EACF,WAAA;EACA,YAAA;;AACA,qBALD,cAEC,IAAE,cAGD;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,YAAA;EACA,UAAA;EACA,iBAAA;EACA,sBAAA;;AAyBH,qBAAC;EACA,UAAA;EAjBA,kBAAA;EAcA,iBAAA;;AAbA,qBAeA,MAfC,KAAG;EACH,kBAAA;EACA,SAAA;EACA,UAAA;;AAYF,qBAAC,MATA,EAAC,UAAU;EACV,eAAA;;AAED,qBAMA,MANC;AAAK,qBAMN,MANO;EACN,mBAAA;EACA,wBAAA;;AAQF,qBAAC;EACA,UAAA;EArBA,kBAAA;EAcA,iBAAA;;AAbA,qBAmBA,MAnBC,KAAG;EACH,kBAAA;EACA,SAAA;EACA,UAAA;;AAgBF,qBAAC,MAbA,EAAC,UAAU;EACV,eAAA;;AAED,qBAUA,MAVC;AAAK,qBAUN,MAVO;EACN,mBAAA;EACA,wBAAA","sourcesContent":["// Global variables.\r\n@slide-height: 681px;\r\n\r\n/* Globals, resets, and fixes. Remark sets display:table and display:table-cell,\r\n * I think in order to make things like vertical-align:middle work. But those\r\n * mess with a bunch of other things, and make them hard/impossible. An example\r\n * is using column-count, which won't work except inside a display:block\r\n * element. So I reset these things to undo what I consider Remark's hacks.\r\n */\r\n.remark-slide {\r\n\tdisplay: block;\r\n\tbox-sizing: border-box;\r\n\tmargin: 0px;\r\n\tpadding: 0px;\r\n}\r\n\r\n.remark-slide-content {\r\n\tdisplay: block;\r\n\tbox-sizing: border-box;\r\n\theight: 100%;\r\n\t* {\r\n\t\tbox-sizing: border-box;\r\n\t}\r\n\t\r\n\t// Debug and debug grid, for help figuring out layouts and bugs.\r\n\t&.debug * {\r\n\t\toutline: 1px solid gold;\r\n\t}\r\n\t&.debug-white * {\r\n\t\toutline: 1px solid white;\r\n\t}\r\n\t&.debug-black * {\r\n\t\toutline: 1px solid black;\r\n\t}\r\n\t&.debug-grid {\r\n\t\tbackground: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII= ) repeat top left;\r\n\t}\r\n\t&.debug-grid-16 {\r\n\t\tbackground: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII= ) repeat top left;\r\n\t}\r\n\t&.debug-grid-8-solid {\r\n\t\tbackground: white url( data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw== ) repeat top left;\r\n\t}\r\n\t&.debug-grid-16-solid {\r\n\t\tbackground: white url( data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7 ) repeat top left;\r\n\t}\r\n\t\r\n\t// Images should never be bigger than their container.\r\n\timg {\r\n\t\tmax-width: 100%;\r\n\t}\r\n\t\r\n\t// Layout: fullbleed. Simply removes Remark's built-in padding and margins.\r\n\t&.fullbleed, &.fullbleed>p {\r\n\t\tmargin: 0;\r\n\t\tpadding: 0;\r\n\t}\r\n\t\r\n\t// Layout: title, plus middle/bottom variations. Designed for H1 and optional H2.\r\n\t&.title {\r\n\t\ttext-align: center;\r\n\t\tbackground-size: cover;\r\n\t\t&.middle {\r\n\t\t\tpadding-top: @slide-height / 3;\r\n\t\t}\r\n\t\t&.bottom {\r\n\t\t\tpadding-top: @slide-height * 2/3;\r\n\t\t}\r\n\t}\r\n\t\r\n\t// Layout: img-caption. Content must begin with an image.\r\n\t&.img-caption {\r\n\t\ttext-align: center;\r\n\t\tpadding-top: @slide-height * 0.8;\r\n\t\t&>p:first-child {\r\n\t\t\tpadding: 0px;\r\n\t\t\tmargin: 0px;\r\n\t\t\t&>img {\r\n\t\t\t\tposition: absolute;\r\n\t\t\t\ttop: 0px;\r\n\t\t\t\tleft: 0px;\r\n\t\t\t\twidth: 100%;\r\n\t\t\t\theight: 80%;\r\n\t\t\t\tobject-fit: cover;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t// Layout: img-right. The first image begins \"columns.\"\r\n\t&.img-right>p:first-of-type {\r\n\t\theight: 100%;\r\n\t\tfloat: right;\r\n\t\twidth: calc(50% - 1rem);\r\n\t\tmargin-left: 2rem;\r\n\t\tmargin-top: 0px;\r\n\t\tpadding: 0px;\r\n\t}\r\n\t\r\n\t// Layout: img-left. The first image begins \"columns.\"\r\n\t&.img-left {\r\n\t\t&>p:first-of-type {\r\n\t\t\theight: 100%;\r\n\t\t\tfloat: left;\r\n\t\t\twidth: calc(50% - 1rem);\r\n\t\t\tmargin-right: 2rem;\r\n\t\t\tmargin-top: 0px;\r\n\t\t\tpadding: 0px;\r\n\t\t}\r\n\t\t&>ul, &>ol, &>blockquote {\r\n\t\t\t// Ensures bullets are indented.\r\n\t\t\toverflow: auto;\r\n\t\t}\r\n\t}\r\n\t\r\n\t// Layout: img-right-full. The first p>img fills the side of the slide.\r\n\t// If you have \"layout\" content, ensure it has no <p> elements.\r\n\t&.img-right-full {\r\n\t\tpadding-right: calc(40% + 2rem);\r\n\t\t&>p:first-of-type {\r\n\t\t\tmargin: 0px;\r\n\t\t\tpadding: 0px;\r\n\t\t\t&>img {\r\n\t\t\t\tposition: absolute;\r\n\t\t\t\ttop: 0px;\r\n\t\t\t\tright: 0px;\r\n\t\t\t\theight: 100%;\r\n\t\t\t\twidth: 40%;\r\n\t\t\t\tobject-fit: cover;\r\n\t\t\t\tobject-position: left;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t// Layout: img-left-full. The first p>img fills the side of the slide.\r\n\t// If you have \"layout\" content, ensure it has no <p> elements.\r\n\t&.img-left-full {\r\n\t\tpadding-left: calc(40% + 2rem);\r\n\t\t&>p:first-of-type {\r\n\t\t\tmargin: 0px;\r\n\t\t\tpadding: 0px;\r\n\t\t\t&>img {\r\n\t\t\t\tposition: absolute;\r\n\t\t\t\ttop: 0px;\r\n\t\t\t\tleft: 0px;\r\n\t\t\t\theight: 100%;\r\n\t\t\t\twidth: 40%;\r\n\t\t\t\tobject-fit: cover;\r\n\t\t\t\tobject-position: right;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\t\r\n\t// Layout: col-2 and col-3. Designed for use with an H1 heading.\r\n\t.col() {\r\n\t\t// If Firefox supported column-span: all I'd use that for the heading H1.\r\n\t\t// I use a workaround instead: push the content down and put the H1 above it.\r\n\t\tpadding-top: 10rem; // Just a guess; customize based on your H1:font-size TODO\r\n\t\t&>h1:first-of-type {\r\n\t\t\tposition: absolute;\r\n\t\t\ttop: 20px;\r\n\t\t\tleft: 80px;\r\n\t\t}\r\n\t\t// If the first columnized content has margin-top, it's a mess.\r\n\t\t*:nth-child(2) {\r\n\t\t\tmargin-top: 0px;\r\n\t\t}\r\n\t\t&>ul, &>ol {\r\n\t\t\tbreak-inside: avoid;\r\n\t\t\tpage-break-inside: avoid;\r\n\t\t}\r\n\t\tcolumn-gap: 1.5em; // Deliberately a relative measure\r\n\t}\r\n\t&.col-2 {\r\n\t\tcolumns: 2;\r\n\t\t.col();\r\n\t}\r\n\t&.col-3 {\r\n\t\tcolumns: 3;\r\n\t\t.col();\r\n\t}\r\n}"]}
\ No newline at end of file
diff --git a/static/css/apron.less b/static/css/apron.less
index 154cb9c..e655a0e 100644
--- a/static/css/apron.less
+++ b/static/css/apron.less
@@ -1,12 +1,59 @@
 // Global variables.

 @slide-height: 681px;

+@abs-offsets: {

+	@default: {

+		left: 80px;

+		top: 20px;

+		header-top: 44px;

+		content-top: 136px;

+	}

+	@compact: {

+		left: 40px;

+		top: 20px;

+		header-top: 42px;

+		content-top: 136px;

+	}

+	@roomy: {

+		left: 80px;

+		top: 20px;

+		header-top: 52px;

+		content-top: 168px;

+	}

+}

+@type-scale: {

+	@default: {

+		h1: 3rem;

+		h2: 2.75rem;

+		h3: 2.5rem;

+		default: 2rem;

+		code: 1.5rem;

+	}

+	@compact: {

+		h1: 2.75rem;

+		h2: 2.5rem;

+		h3: 2.25rem;

+		default: 1.75rem;

+		code: 1.25rem;

+	}

+	@roomy: {

+		h1: 4rem;

+		h2: 3rem;

+		h3: 2.75rem;

+		default: 2.25rem;

+		code: 1.75rem;

+	}

+	@title: {

+		h1: 4rem;

+		h2: 3rem;

+		h3: 2.25rem;

+	}

+}

 

-/* Globals, resets, and fixes. Remark sets display:table and display:table-cell,

- * I think in order to make things like vertical-align:middle work. But those

- * mess with a bunch of other things, and make them hard/impossible. An example

- * is using column-count, which won't work except inside a display:block

- * element. So I reset these things to undo what I consider Remark's hacks.

- */

+// Globals, resets, and fixes. Remark sets display:table and display:table-cell,

+// apparently to make things like vertical-align:middle work. But those

+// mess with a bunch of other things, and make them hard/impossible. An example

+// is using column-count, which won't work except inside a display:block

+// element. So I reset these things to undo what I consider Remark's hacks.

 .remark-slide {

 	display: block;

 	box-sizing: border-box;

@@ -45,10 +92,61 @@
 		background: white url( data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7 ) repeat top left;

 	}

 	

-	// Images should never be bigger than their container.

+	// Type scale (font-size, line-height, etc) and slide sizing.

+	line-height: 1.25;

+	padding: @abs-offsets[@default][top] @abs-offsets[@default][left] 0 @abs-offsets[@default][left];

+	font-size: @type-scale[@default][default];

+	h1 { font-size: @type-scale[@default][h1]; }

+	h2 { font-size: @type-scale[@default][h2]; }

+	h3 { font-size: @type-scale[@default][h3]; }

+	pre, code, kbd, tt, samp {

+		font-size: @type-scale[@default][code];

+		line-height: 1.5;

+	}

+	

+	&.compact {

+		padding: @abs-offsets[@compact][top] @abs-offsets[@compact][left] 0 @abs-offsets[@compact][left];

+		font-size: @type-scale[@compact][default];

+		h1 { font-size: @type-scale[@compact][h1]; }

+		h2 { font-size: @type-scale[@compact][h2]; }

+		h3 { font-size: @type-scale[@compact][h3]; }

+		pre, code, kbd, tt, samp {

+			font-size: @type-scale[@compact][code];

+		}

+	}

+	

+	&.roomy {

+		padding: @abs-offsets[@roomy][top] @abs-offsets[@roomy][left] 0 @abs-offsets[@roomy][left];

+		font-size: @type-scale[@roomy][default];

+		h1 { font-size: @type-scale[@roomy][h1]; }

+		h2 { font-size: @type-scale[@roomy][h2]; }

+		h3 { font-size: @type-scale[@roomy][h3]; }

+		pre, code, kbd, tt, samp {

+			font-size: @type-scale[@roomy][code];

+		}

+	}

+	

+	&.title {

+		h1 { font-size: @type-scale[@title][h1]; }

+		h2 { font-size: @type-scale[@title][h2]; }

+		h3 { font-size: @type-scale[@title][h3]; }

+	}

+	

+	// Element styling

 	img {

-		max-width: 100%;

+		max-width: 100%; // Images should never be bigger than their container.

+	}

+	

+	h1, h2, h3 {

+		margin-top: 0.5em;

+		margin-bottom: 0.5em;

+	}

+	

+	table, .katex {

+		font-size: 85%;

 	}

+

+	// Layout Classes

 	

 	// Layout: fullbleed. Simply removes Remark's built-in padding and margins.

 	&.fullbleed, &.fullbleed>p {

@@ -56,15 +154,39 @@
 		padding: 0;

 	}

 	

-	// Layout: title, plus middle/bottom variations. Designed for H1 and optional H2.

+	// Layout: title, plus top/bottom variations, and shelf sizing.

+	// Designed for H1, plus optional H2 or H3 (but not both).

 	&.title {

 		text-align: center;

 		background-size: cover;

-		&.middle {

-			padding-top: @slide-height / 3;

+		h1, h2, h3 {

+			position: absolute;

+			width: 100%;

+			left: 0;

+			margin: 0;

+			padding: 1em 0;

+			font-weight: normal;

+		}

+		h1 { top: calc(50% - 2.5em); }

+		h2 { top: calc(50% - 1.0em); }

+		h3 { top: calc(50% - 0.5em); }

+		&.top {

+			h1 { top: calc(@slide-height * 0.3 - 2.5em); }

+			h2 { top: calc(@slide-height * 0.3 - 1.0em); }

+			h3 { top: calc(@slide-height * 0.3 - 0.5em); }

 		}

 		&.bottom {

-			padding-top: @slide-height * 2/3;

+			h1 { top: calc(@slide-height * 3/4 - 2.5em); }

+			h2 { top: calc(@slide-height * 3/4 - 1.0em); }

+			h3 { top: calc(@slide-height * 3/4 - 0.5em); }

+		}

+		&.shelf>h1 {

+			// The "shelf" class makes the H1 extend down far enough to form the background for

+			// the H2 or H3, with a negative bottom margin to extend beneath the H2/H3. This is

+			// better than giving each element a background color and placing them next to each

+			// other; that will let a thin slice of the slide background show through.

+			padding-bottom: 2.25em;

+			margin-bottom: -1.75em;

 		}

 	}

 	

@@ -154,13 +276,28 @@
 	.col() {

 		// If Firefox supported column-span: all I'd use that for the heading H1.

 		// I use a workaround instead: push the content down and put the H1 above it.

-		padding-top: 10rem; // Just a guess; customize based on your H1:font-size TODO

+		padding-top: @abs-offsets[@default][content-top];

 		&>h1:first-of-type {

 			position: absolute;

-			top: 20px;

-			left: 80px;

+			margin-top: 0px;

+			top: @abs-offsets[@default][header-top];

+			left: @abs-offsets[@default][left];

+		}

+		&.compact {

+			padding-top: @abs-offsets[@compact][content-top];

+		}

+		&.compact>h1:first-of-type {

+			top: @abs-offsets[@compact][header-top];

+			left: @abs-offsets[@compact][left];

+		}

+		&.roomy {

+			padding-top: @abs-offsets[@roomy][content-top];

 		}

-		// If the first columnized content has margin-top, it's a mess.

+		&.roomy>h1:first-of-type {

+			top: @abs-offsets[@roomy][header-top];

+			left: @abs-offsets[@roomy][left];

+		}

+		// If the first columnized content has margin-top, vertical alignment is messy.

 		*:nth-child(2) {

 			margin-top: 0px;

 		}

@@ -178,4 +315,39 @@
 		columns: 3;

 		.col();

 	}

-}
\ No newline at end of file
+	

+	// Footer layout and positioning. TODO make the UL full width so it can have border.

+	// TODO make the UL possible to place at the top of the slide.

+	.remark-slide-number, .footer li {

+		font-size: 1.25rem;

+		display: block;

+		list-style: none;

+		position: absolute;

+		bottom: 12px;

+		height: 30px;

+		margin: 0px;

+		padding: 2px 5px;

+		border-radius: 3px;

+		border: 1px solid rgba(0, 0, 0, 0);

+	}

+	.footer {

+		li:nth-child(1) {

+			left: 20px;

+		}

+		li:nth-child(2) {

+			left: 50%;

+			margin-left: -50px; // assume the logo/content is about 100px

+		}

+		li img {

+			display: block;

+			max-height: 100%;

+			margin-left: auto;

+			margin-right: auto;

+		}

+	}

+	&.no-footer {

+		.remark-slide-number, .footer {

+			display: none;

+		}

+	}

+}