dos2unix

2 files changed, 454 insertions, 454 deletions

diff --git a/static/css/adirondack.less b/static/css/adirondack.less
index d60d761..f3dd3ac 100644
--- a/static/css/adirondack.less
+++ b/static/css/adirondack.less
@@ -1,92 +1,92 @@
-@import (css) url('https://fonts.googleapis.com/css?family=Quattrocento|Quattrocento+Sans:400,400i,700,700i&subset=latin-ext');

-

-@adirondack-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: @adirondack-colors[shaded-bg];

-	}

-	table th, table td {

-		display: table-cell;

-		vertical-align: inherit;

-		padding: 0.15em 0.30em;

-		border: 1px solid @adirondack-colors[border];

-	}

-	table th {

-		font-weight: bold;

-	}

-	pre {

-		overflow: auto;

-	}

-	pre > code {

-		border-radius: 0.4em;

-		padding: 0.5em;

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

-	}

-	p>code, li>code, a>code {

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

-		margin: 0;

-		border-radius: 0.2em;

-		padding: 0.15em 0.25em;

-	}

-	blockquote {

-		margin: 0;

-		padding: 0 0.5em;

-		color: @adirondack-colors[muted-text];

-		border-left: 0.125em solid @adirondack-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.5),

-					8px 8px 20px rgba(0, 0, 0, 0.2);

-		}

-	}

-	&.fit-h1 h1 {

-		height: 1.25em;

-		overflow: hidden;

-	}

-}

+@import (css) url('https://fonts.googleapis.com/css?family=Quattrocento|Quattrocento+Sans:400,400i,700,700i&subset=latin-ext');
+
+@adirondack-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: @adirondack-colors[shaded-bg];
+	}
+	table th, table td {
+		display: table-cell;
+		vertical-align: inherit;
+		padding: 0.15em 0.30em;
+		border: 1px solid @adirondack-colors[border];
+	}
+	table th {
+		font-weight: bold;
+	}
+	pre {
+		overflow: auto;
+	}
+	pre > code {
+		border-radius: 0.4em;
+		padding: 0.5em;
+		background-color: @adirondack-colors[shaded-bg];
+	}
+	p>code, li>code, a>code {
+		background-color: @adirondack-colors[shaded-bg];
+		margin: 0;
+		border-radius: 0.2em;
+		padding: 0.15em 0.25em;
+	}
+	blockquote {
+		margin: 0;
+		padding: 0 0.5em;
+		color: @adirondack-colors[muted-text];
+		border-left: 0.125em solid @adirondack-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.5),
+					8px 8px 20px rgba(0, 0, 0, 0.2);
+		}
+	}
+	&.fit-h1 h1 {
+		height: 1.25em;
+		overflow: hidden;
+	}
+}
diff --git a/static/css/apron.less b/static/css/apron.less
index 58e9330..3f7e755 100644
--- a/static/css/apron.less
+++ b/static/css/apron.less
@@ -1,362 +1,362 @@
-// 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,

-// 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;

-	margin: 0px;

-	padding: 0px;

-}

-

-.remark-slide-content {

-	display: block;

-	box-sizing: border-box;

-	height: 100%;

-	* {

-		box-sizing: border-box;

-	}

-	

-	// Debug and debug grid, for help figuring out layouts and bugs.

-	&.debug * {

-		outline: 1px solid gold;

-	}

-	&.debug-white * {

-		outline: 1px solid white;

-	}

-	&.debug-black * {

-		outline: 1px solid black;

-	}

-	&.debug-grid {

-		background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII= ) repeat top left;

-	}

-	&.debug-grid-16 {

-		background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII= ) repeat top left;

-	}

-	&.debug-grid-8-solid {

-		background: white url( data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw== ) repeat top left;

-	}

-	&.debug-grid-16-solid {

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

-	}

-	

-	// 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%; // 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 {

-		margin: 0;

-		padding: 0;

-	}

-	

-	// 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;

-		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 {

-			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;

-		}

-	}

-	

-	// Layout: img-caption. Content must begin with an image.

-	&.img-caption {

-		text-align: center;

-		padding-top: @slide-height * 0.8;

-		&>p:first-of-type {

-			padding: 0px;

-			margin: 0px;

-			&>img {

-				position: absolute;

-				top: 0px;

-				left: 0px;

-				width: 100%;

-				height: 80%;

-				object-fit: cover;

-			}

-		}

-	}

-

-	// Layout: img-right. The first image begins "columns."

-	&.img-right>p:first-of-type {

-		height: 100%;

-		float: right;

-		width: calc(50% - 1rem);

-		margin-left: 2rem;

-		margin-top: 0px;

-		padding: 0px;

-	}

-	

-	// Layout: img-left. The first image begins "columns."

-	&.img-left {

-		&>p:first-of-type {

-			height: 100%;

-			float: left;

-			width: calc(50% - 1rem);

-			margin-right: 2rem;

-			margin-top: 0px;

-			padding: 0px;

-		}

-		&>ul, &>ol, &>blockquote {

-			// Ensures bullets are indented.

-			overflow: auto;

-		}

-	}

-	

-	// Layout: img-right-full. The first p>img fills the side of the slide.

-	// If you have "layout" content, ensure it has no <p> elements.

-	&.img-right-full {

-		padding-right: calc(40% + 2rem);

-		&>p:first-of-type {

-			margin: 0px;

-			padding: 0px;

-			&>img {

-				position: absolute;

-				top: 0px;

-				right: 0px;

-				height: 100%;

-				width: 40%;

-				object-fit: cover;

-				object-position: left;

-			}

-		}

-	}

-

-	// Layout: img-left-full. The first p>img fills the side of the slide.

-	// If you have "layout" content, ensure it has no <p> elements.

-	&.img-left-full {

-		padding-left: calc(40% + 2rem);

-		&>p:first-of-type {

-			margin: 0px;

-			padding: 0px;

-			&>img {

-				position: absolute;

-				top: 0px;

-				left: 0px;

-				height: 100%;

-				width: 40%;

-				object-fit: cover;

-				object-position: right;

-			}

-		}

-	}

-	

-	// Layout: col-2 and col-3. Designed for use with an H1 heading.

-	.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: @abs-offsets[@default][content-top];

-		&>h1:first-of-type {

-			position: absolute;

-			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];

-		}

-		&.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;

-		}

-		&>ul, &>ol {

-			break-inside: avoid;

-			page-break-inside: avoid;

-		}

-		column-gap: 1.5em; // Deliberately a relative measure

-	}

-	&.col-2 {

-		columns: 2;

-		.col();

-	}

-	&.col-3 {

-		columns: 3;

-		.col();

-	}

-	

-	// 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 {

-		&, & ul {

-			position: absolute;

-			bottom: 0px;

-			right: 0px;

-			left: 0px;

-			height: 50px;

-			margin: 0px;

-			padding: 0px;

-		}

-		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;

-		}

-	}

-}

+// 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,
+// 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;
+	margin: 0px;
+	padding: 0px;
+}
+
+.remark-slide-content {
+	display: block;
+	box-sizing: border-box;
+	height: 100%;
+	* {
+		box-sizing: border-box;
+	}
+	
+	// Debug and debug grid, for help figuring out layouts and bugs.
+	&.debug * {
+		outline: 1px solid gold;
+	}
+	&.debug-white * {
+		outline: 1px solid white;
+	}
+	&.debug-black * {
+		outline: 1px solid black;
+	}
+	&.debug-grid {
+		background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII= ) repeat top left;
+	}
+	&.debug-grid-16 {
+		background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII= ) repeat top left;
+	}
+	&.debug-grid-8-solid {
+		background: white url( data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw== ) repeat top left;
+	}
+	&.debug-grid-16-solid {
+		background: white url( data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7 ) repeat top left;
+	}
+	
+	// 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%; // 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 {
+		margin: 0;
+		padding: 0;
+	}
+	
+	// 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;
+		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 {
+			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;
+		}
+	}
+	
+	// Layout: img-caption. Content must begin with an image.
+	&.img-caption {
+		text-align: center;
+		padding-top: @slide-height * 0.8;
+		&>p:first-of-type {
+			padding: 0px;
+			margin: 0px;
+			&>img {
+				position: absolute;
+				top: 0px;
+				left: 0px;
+				width: 100%;
+				height: 80%;
+				object-fit: cover;
+			}
+		}
+	}
+
+	// Layout: img-right. The first image begins "columns."
+	&.img-right>p:first-of-type {
+		height: 100%;
+		float: right;
+		width: calc(50% - 1rem);
+		margin-left: 2rem;
+		margin-top: 0px;
+		padding: 0px;
+	}
+	
+	// Layout: img-left. The first image begins "columns."
+	&.img-left {
+		&>p:first-of-type {
+			height: 100%;
+			float: left;
+			width: calc(50% - 1rem);
+			margin-right: 2rem;
+			margin-top: 0px;
+			padding: 0px;
+		}
+		&>ul, &>ol, &>blockquote {
+			// Ensures bullets are indented.
+			overflow: auto;
+		}
+	}
+	
+	// Layout: img-right-full. The first p>img fills the side of the slide.
+	// If you have "layout" content, ensure it has no <p> elements.
+	&.img-right-full {
+		padding-right: calc(40% + 2rem);
+		&>p:first-of-type {
+			margin: 0px;
+			padding: 0px;
+			&>img {
+				position: absolute;
+				top: 0px;
+				right: 0px;
+				height: 100%;
+				width: 40%;
+				object-fit: cover;
+				object-position: left;
+			}
+		}
+	}
+
+	// Layout: img-left-full. The first p>img fills the side of the slide.
+	// If you have "layout" content, ensure it has no <p> elements.
+	&.img-left-full {
+		padding-left: calc(40% + 2rem);
+		&>p:first-of-type {
+			margin: 0px;
+			padding: 0px;
+			&>img {
+				position: absolute;
+				top: 0px;
+				left: 0px;
+				height: 100%;
+				width: 40%;
+				object-fit: cover;
+				object-position: right;
+			}
+		}
+	}
+	
+	// Layout: col-2 and col-3. Designed for use with an H1 heading.
+	.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: @abs-offsets[@default][content-top];
+		&>h1:first-of-type {
+			position: absolute;
+			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];
+		}
+		&.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;
+		}
+		&>ul, &>ol {
+			break-inside: avoid;
+			page-break-inside: avoid;
+		}
+		column-gap: 1.5em; // Deliberately a relative measure
+	}
+	&.col-2 {
+		columns: 2;
+		.col();
+	}
+	&.col-3 {
+		columns: 3;
+		.col();
+	}
+	
+	// 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 {
+		&, & ul {
+			position: absolute;
+			bottom: 0px;
+			right: 0px;
+			left: 0px;
+			height: 50px;
+			margin: 0px;
+			padding: 0px;
+		}
+		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;
+		}
+	}
+}