Make all slides dynamic squares.

css/theme/latex.css

@@ -21,48 +21,55 @@ section {
       --square: 100vh; } }
 
 body {
-  font-size: calc(0.035 * var(--square)); }
+  font-size: calc(0.035 * var(--square));
-  body .layout-content-and-preview {
+  background: black; }
+  body .layout-content-and-preview,
+  body .layout-content-only {
     display: grid;
-    grid-template-rows: var(--square) auto;
-    grid-template-columns: auto;
-    grid-template-areas: "content" "preview";
     min-height: 100vh;
     max-height: 100vh;
     min-width: 100vw;
     max-width: 100vw;
     overflow: auto; }
-    body .layout-content-and-preview .layout-content {
+  body .layout-content-and-preview {
-      background: white;
+    grid-template-rows: var(--square) auto;
-      grid-area: content; }
+    grid-template-columns: auto;
-    body .layout-content-and-preview .layout-preview {
+    grid-template-areas: "content" "preview"; }
-      grid-area: preview;
+    @media screen and (min-aspect-ratio: 1 / 1) {
-      display: flex;
+      body .layout-content-and-preview {
-      align-items: center;
+        grid-template-rows: auto var(--square) auto;
-      justify-content: center;
+        grid-template-columns: var(--square) auto;
-      background: var(--secondary); }
+        grid-template-areas: "   .    preview" "content preview" "   .    preview"; } }
-      body .layout-content-and-preview .layout-preview img {
+    @media screen and (min-aspect-ratio: 2 / 1) {
-        width: auto;
+      body .layout-content-and-preview {
-        height: auto;
+        grid-template-rows: var(--square);
-        max-width: 90%;
+        grid-template-columns: var(--square) auto;
-        max-height: 90%;
+        grid-template-areas: "content preview"; } }
-        box-shadow: 0.2em 0.2em 0.5em 0 rgba(0, 0, 0, 0.3); }
+  body .layout-content-only {
-
+    grid-template-rows: var(--square) auto;
-@media screen and (min-aspect-ratio: 1 / 1) {
+    grid-template-columns: var(--square);
-  body {
+    grid-template-areas: "content" "   .   "; }
-    font-size: calc(0.035 * var(--square)); }
+    @media screen and (min-aspect-ratio: 1 / 1) {
-    body .layout-content-and-preview {
+      body .layout-content-only {
-      grid-template-rows: auto var(--square) auto;
+        grid-template-rows: auto var(--square) auto;
-      grid-template-columns: var(--square) auto;
+        grid-template-columns: auto var(--square) auto;
-      grid-template-areas: "   .    preview" "content preview" "   .    preview"; } }
+        grid-template-areas: ".    .    ." ". content ." ".    .    ."; } }
-
+  body .layout-content {
-@media screen and (min-aspect-ratio: 2 / 1) {
+    background: white;
-  body {
+    grid-area: content;
-    font-size: calc(0.035 * var(--square)); }
+    position: relative; }
-    body .layout-content-and-preview {
+  body .layout-preview {
-      grid-template-rows: var(--square);
+    grid-area: preview;
-      grid-template-columns: var(--square) auto;
+    display: flex;
-      grid-template-areas: "content preview"; } }
+    align-items: center;
+    justify-content: center;
+    background: var(--secondary); }
+    body .layout-preview img {
+      width: auto;
+      height: auto;
+      max-width: 90%;
+      max-height: 90%;
+      box-shadow: 0.2em 0.2em 0.5em 0 rgba(0, 0, 0, 0.3); }
 
 /* content layout */
 @font-face {
@@ -80,36 +87,46 @@ body {
   margin: 0;
   line-height: 1.2em; }
 
-.layout-content-and-preview {
+.layout-content-and-preview,
+.layout-content-only {
   --margin: 0.1; }
-  .layout-content-and-preview .layout-content {
+  .layout-content-and-preview .layout-content,
+  .layout-content-only .layout-content {
     overflow: auto;
     padding: calc(var(--margin) * var(--square)); }
-    .layout-content-and-preview .layout-content *:first-child {
+    .layout-content-and-preview .layout-content *:first-child,
+    .layout-content-only .layout-content *:first-child {
       margin-top: 0; }
-    .layout-content-and-preview .layout-content .layout-title {
+    .layout-content-and-preview .layout-content .layout-title,
+    .layout-content-only .layout-content .layout-title {
       padding: calc(0.3 * var(--margin) * var(--square)) 0;
       line-height: 1.15em; }
-      .layout-content-and-preview .layout-content .layout-title h2 {
+      .layout-content-and-preview .layout-content .layout-title h2,
+      .layout-content-only .layout-content .layout-title h2 {
         margin: 0; }
-    .layout-content-and-preview .layout-content ul {
+    .layout-content-and-preview .layout-content ul,
+    .layout-content-only .layout-content ul {
       list-style-type: none;
       padding-left: 0;
       position: relative; }
-      .layout-content-and-preview .layout-content ul li::before {
+      .layout-content-and-preview .layout-content ul li::before,
+      .layout-content-only .layout-content ul li::before {
         content: '▪';
         color: var(--secondary);
         position: absolute;
         left: calc(-0.33 * var(--margin) * var(--square)); }
-      .layout-content-and-preview .layout-content ul ul {
+      .layout-content-and-preview .layout-content ul ul,
+      .layout-content-only .layout-content ul ul {
         margin-left: calc(0.33 * var(--margin) * var(--square)); }
-    .layout-content-and-preview .layout-content pre {
+    .layout-content-and-preview .layout-content pre,
+    .layout-content-only .layout-content pre {
       margin-left: calc(-1 * var(--margin) * var(--square));
       padding-left: calc(var(--margin) * var(--square));
       line-height: 1.2em;
       position: relative;
       overflow: hidden; }
-      .layout-content-and-preview .layout-content pre::before {
+      .layout-content-and-preview .layout-content pre::before,
+      .layout-content-only .layout-content pre::before {
         content: attr(data-sourcefile);
         position: absolute;
         text-align: right;
@@ -119,11 +136,13 @@ body {
         left: calc(-1 * var(--square) + 1.2 * var(--margin) * var(--square));
         transform-origin: top right;
         transform: rotate(-90deg); }
-  .layout-content-and-preview code {
+    .layout-content-and-preview .layout-content code,
-    font-size: 0.9em;
+    .layout-content-only .layout-content code {
-    font-family: 'Fira Code'; }
+      font-size: 0.9em;
-  .layout-content-and-preview code.hljs {
+      font-family: 'Fira Code'; }
-    padding: .3em 0; }
+      .layout-content-and-preview .layout-content code.hljs,
+      .layout-content-only .layout-content code.hljs {
+        padding: .3em 0; }
 
 .layout.layout-chapter-heading {
   height: 100vh;
@@ -137,4 +156,11 @@ body {
     bottom: calc(38.2% - .5em); }
 
 h1 {
-  font-size: 300%; }
+  position: absolute;
+  font-size: 300%;
+  bottom: 0;
+  left: 0;
+  line-height: 115%;
+  vertical-align: bottom;
+  max-width: var(--square);
+  padding: 0 calc(var(--margin) * var(--square)) 0.5em; }

css/theme/source/latex.scss

@@ -1,8 +1,8 @@
 /* tame reveal.js */
 section {
-	min-height: 100vh;
+  min-height: 100vh;
-	width: 100vw;
+  width: 100vw;
-	padding: 0 !important;
+  padding: 0 !important;
 }
 
 /* config */
@@ -23,42 +23,25 @@ section {
 
 body {
   font-size: calc(0.035 * var(--square));
-  .layout-content-and-preview {
+  background: black;
+
+  .layout-content-and-preview,
+  .layout-content-only {
     display: grid;
-    grid-template-rows: var(--square) auto;
-    grid-template-columns: auto;
-    grid-template-areas:
-    "content"
-    "preview";
     min-height: 100vh;
     max-height: 100vh;
     min-width: 100vw;
     max-width: 100vw;
     overflow: auto;
-    .layout-content {
-      background: white;
-      grid-area: content;
-    }
-    .layout-preview {
-      grid-area: preview;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: var(--secondary);
-      img {
-        width: auto;
-        height: auto;
-        max-width: 90%;
-        max-height: 90%;
-        box-shadow: .2em .2em .5em 0 rgba(0, 0, 0, .3);
-      }
-    }
   }
-}
+
-@media screen and (min-aspect-ratio: 1/1) {
+  .layout-content-and-preview {
-  body {
+    grid-template-rows: var(--square) auto;
-    font-size: calc(0.035 * var(--square));
+    grid-template-columns: auto;
-    .layout-content-and-preview {
+    grid-template-areas:
+      "content"
+      "preview";
+    @media screen and (min-aspect-ratio: 1/1) {
       grid-template-rows: auto var(--square) auto;
       grid-template-columns: var(--square) auto;
       grid-template-areas:
@@ -66,18 +49,50 @@ body {
         "content preview"
         "   .    preview";
     }
-  }
+    @media screen and (min-aspect-ratio: 2/1) {
-}
-@media screen and (min-aspect-ratio: 2/1) {
-  body {
-    font-size: calc(0.035 * var(--square));
-    .layout-content-and-preview {
       grid-template-rows: var(--square);
       grid-template-columns: var(--square) auto;
       grid-template-areas:
         "content preview";
     }
   }
+
+  .layout-content-only {
+    grid-template-rows: var(--square) auto;
+    grid-template-columns: var(--square);
+    grid-template-areas:
+      "content"
+      "   .   ";
+    @media screen and (min-aspect-ratio: 1/1) {
+      grid-template-rows: auto var(--square) auto;
+      grid-template-columns: auto var(--square) auto;
+      grid-template-areas:
+        ".    .    ."
+        ". content ."
+        ".    .    .";
+    }
+  }
+
+  .layout-content {
+    background: white;
+    grid-area: content;
+    position: relative;
+  }
+
+  .layout-preview {
+    grid-area: preview;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--secondary);
+    img {
+      width: auto;
+      height: auto;
+      max-width: 90%;
+      max-height: 90%;
+      box-shadow: .2em .2em .5em 0 rgba(0, 0, 0, .3);
+    }
+  }
 }
 
 /* content layout */
@@ -99,7 +114,8 @@ body {
   line-height: 1.2em;
 }
 
-.layout-content-and-preview {
+.layout-content-and-preview,
+.layout-content-only {
    --margin: 0.1;
 
   .layout-content {
@@ -150,31 +166,40 @@ body {
         left: calc(-1 * var(--square) + 1.2 * var(--margin) * var(--square));
         transform-origin: top right;
         transform: rotate(-90deg);
+      }
     }
 
     code {
       font-size: 0.9em;
       font-family: 'Fira Code';
-    }
+      &.hljs {
-
+        padding: .3em 0;
-    code.hljs {
+      }
-      padding: .3em 0;
     }
   }
 }
 
 .layout.layout-chapter-heading {
-	height: 100vh;
+  height: 100vh;
-	width: 100vw;
+  width: 100vw;
-	position: relative;
+  position: relative;
 
-	.layout-title {
+  .layout-title {
-		position: absolute;
+    position: absolute;
-		left: 2vw;
+    left: 2vw;
-		width: calc(100vw - 4vw);
+    width: calc(100vw - 4vw);
-		text-align: center;
+    text-align: center;
-		bottom: calc(38.2% - .5em);
+    bottom: calc(38.2% - .5em);
-	}
+  }
 }
 
-h1 { font-size: 300%; }
+h1 {
+  position: absolute;
+  font-size: 300%;
+  bottom: 0;
+  left: 0;
+  line-height: 115%;
+  vertical-align: bottom;
+  max-width: var(--square);
+  padding: 0 calc(var(--margin) * var(--square)) .5em;
+}

lib/font/fira-code/FiraCode_1.206/fira_code.css

@@ -0,0 +1,43 @@
+@font-face{
+    font-family: 'Fira Code';
+    src: url('eot/FiraCode-Light.eot');
+    src: url('eot/FiraCode-Light.eot') format('embedded-opentype'),
+         url('woff2/FiraCode-Light.woff2') format('woff2'),
+         url('woff/FiraCode-Light.woff') format('woff'),
+         url('ttf/FiraCode-Light.ttf') format('truetype');
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face{
+    font-family: 'Fira Code';
+    src: url('eot/FiraCode-Regular.eot');
+    src: url('eot/FiraCode-Regular.eot') format('embedded-opentype'),
+         url('woff2/FiraCode-Regular.woff2') format('woff2'),
+         url('woff/FiraCode-Regular.woff') format('woff'),
+         url('ttf/FiraCode-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face{
+    font-family: 'Fira Code';
+    src: url('eot/FiraCode-Medium.eot');
+    src: url('eot/FiraCode-Medium.eot') format('embedded-opentype'),
+         url('woff2/FiraCode-Medium.woff2') format('woff2'),
+         url('woff/FiraCode-Medium.woff') format('woff'),
+         url('ttf/FiraCode-Medium.ttf') format('truetype');
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face{
+    font-family: 'Fira Code';
+    src: url('eot/FiraCode-Bold.eot');
+    src: url('eot/FiraCode-Bold.eot') format('embedded-opentype'),
+         url('woff2/FiraCode-Bold.woff2') format('woff2'),
+         url('woff/FiraCode-Bold.woff') format('woff'),
+         url('ttf/FiraCode-Bold.ttf') format('truetype');
+    font-weight: 700;
+    font-style: normal;
+}

lib/font/fira-code/FiraCode_1.206/specimen.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>Fira Code Specimen</title>
+
+  <link rel="stylesheet" href="fira_code.css">
+  <style>
+    body { font: 14px/1.5em "Fira Code"; }
+    .code {
+      font-feature-settings: "calt" 1;  /* Enable ligatures for IE 10+, Edge */
+      text-rendering: optimizeLegibility; /* Force ligatures for Webkit, Blink, Gecko */
+      width: 30em;
+      margin: 5em auto;
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+    .light { font-weight: 300; }
+    .regular { font-weight: 400; }
+    .medium { font-weight: 500; }
+    .bold { font-weight: 700; }
+    i { font-style: normal; color: #c33; }
+    b { font-weight: inherit; color: #c33; }
+  </style>
+<body>
+
+<div class="code light"><b># Fira Code Light</b>
+
+take = (n, [x, <i>...</i>xs]:list) <i>--></i>
+  | n <i><=</i> 0     <i>=></i> []
+  | empty list <i>=></i> []
+  | otherwise  <i>=></i> [x] <i>++</i> take n-1, xs
+
+last3 = reverse <i>>></i> take 3 <i>>></i> reverse</div>
+
+
+    <div class="code regular"><b># Fira Code Regular</b>
+
+take = (n, [x, <i>...</i>xs]:list) <i>--></i>
+  | n <i><=</i> 0     <i>=></i> []
+  | empty list <i>=></i> []
+  | otherwise  <i>=></i> [x] <i>++</i> take n-1, xs
+
+last3 = reverse <i>>></i> take 3 <i>>></i> reverse</div>
+
+
+    <div class="code medium"><b># Fira Code Medium</b>
+
+take = (n, [x, <i>...</i>xs]:list) <i>--></i>
+  | n <i><=</i> 0     <i>=></i> []
+  | empty list <i>=></i> []
+  | otherwise  <i>=></i> [x] <i>++</i> take n-1, xs
+
+last3 = reverse <i>>></i> take 3 <i>>></i> reverse</div>
+
+
+    <div class="code bold"><b># Fira Code Bold</b>
+
+take = (n, [x, <i>...</i>xs]:list) <i>--></i>
+  | n <i><=</i> 0     <i>=></i> []
+  | empty list <i>=></i> []
+  | otherwise  <i>=></i> [x] <i>++</i> take n-1, xs
+
+last3 = reverse <i>>></i> take 3 <i>>></i> reverse</div>

sections/german/01/01.md

@@ -1,12 +1,18 @@
-# Was ist $\LaTeX$?
+<div class="layout-content-only">
+	<div class="layout-content">
+		<h1>Was ist L<sup style="font-weight: bold; font-size: 73%; margin-left: -.25em; margin-right: -.05em; position: relative; top: .2em">A</sup>T<sub style="font-size: 100%; margin-left: -.1em">E</sub>X?</h1>
+	</div>
+</div>
 
 ---
 
-<div class="layout">
+<div class="layout-content-and-preview">
-	<h2 class="layout-title">Titel</h2>
+	<div class="layout-content">
-	<div class="layout-content-left">
+		<h2>Titel</h2>
 		<p>Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch in Spruch in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum.</p>
-		<pre>bar</pre>
+		<pre class="hljs"><code>bar</code></pre>
+	</div>
+	<div class="layout-preview">
+		<img class="layout-content-right" src="sections/german/04/projekt_dokument.png">
 	</div>
-	<img class="layout-content-right" src="sections/german/04/projekt_dokument.png">
 </div>

sections/german/02/02.md

@@ -1,5 +1,7 @@
-# Wie funktioniert LaTeX?
+<div class="layout-content-only">
+    <div class="layout-content">
+        <h1>Wie funktioniert LaTeX?</h1>
+    </div>
+</div>
 
 ---
-
-

sections/german/03/03.md

@@ -1,2 +1,5 @@
-# Grundstruktur eines LaTeX-Dokuments
+<div class="layout-content-only">
-
+    <div class="layout-content">
+        <h1>Grundstruktur eines LaTeX-Dokuments</h1>
+    </div>
+</div>

sections/german/04/04.md

@@ -1,61 +1,67 @@
-
+<div class="layout-content-only">
-<div class="layout layout-chapter-heading">
+    <div class="layout-content">
-	<h1 class="layout-title">Projektstruktur</h1>
+        <h1>Projektstruktur</h1>
+    </div>
 </div>
 
 ---
 
-## Zielsetzung
+<div class="layout-content-only">
-Ein größeres LaTeX-Projekt anlegen und dabei ...
+    <div class="layout-content">
-* ... verhindern, dass LaTeX-Dokumente zu monströser Größe anwachsen 👹
+        <h2>Zielsetzung</h2>
-* ... den Überblick über die Struktur eines Projekts behalten
+        <p>Ein größeres LaTeX-Projekt anlegen und dabei …</p>
+        <ul>
+            <li>… verhindern, dass LaTeX-Dokumente zu monströser Größe anwachsen 👹</li>
+            <li>… den Überblick über die Struktur eines Projekts behalten</li>
+        </ul>
+    </div>
+</div>
 
 ---
 
 <div class="layout layout-content-and-preview">
-
+    <div class="layout-content">
-<div class="layout-content">
+        <h2 class="layout-title">Hauptdatei 👑</h2>
-
-<h2 class="layout-title">Hauptdatei 👑</h2>
-<ul>
-    <li>enthält Grundgerüst, Titelei, etc. </li>
-    <li>bindet einzelne Kapitel ein mit
         <ul>
-            <li><code>\input{filename.tex}</code> oder</li>
+            <li>enthält Grundgerüst, Titelei, etc. </li>
-            <li><code>\include{filename}</code></li>
+            <li>bindet einzelne Kapitel ein mit
+                <ul>
+                    <li><code>\input{filename.tex}</code> oder</li>
+                    <li><code>\include{filename}</code></li>
+                </ul>
+            </li>
         </ul>
-    </li>
+        <pre class="lang-tex hljs" data-sourcefile="main.tex"><code>\documentclass{article}
-</ul>
-
-<pre class="lang-tex hljs" data-sourcefile="main.tex"><code>\documentclass{article}
 \usepackage[ngerman]{babel}
 \usepackage[utf8]{inputenc}
 \usepackage[T1]{fontenc}
 \begin{document}
-	\maketitle
+    \maketitle
-	\tableofcontents
+    \tableofcontents
-	\input{abschnitt1.tex}
+    \input{abschnitt1.tex}
-	\input{abschnitt2.tex}
+    \input{abschnitt2.tex}
-\end{document}
+\end{document}</code></pre>
-</code></pre>
+    </div>
-
+    <div class="layout-preview">
-</div>
+        ![](sections/german/04/projekt_dokument.png)
-
+    </div>
-<div class="layout-preview">
-![](sections/german/04/projekt_dokument.png)
-</div>
 
 ---
 
-## Datei mit Teilabschnitt
+<div class="layout-content-only">
-* enthält **keine Präambel**
+    <div class="layout-content">
-* enthält **kein** `\begin{document}` und `\end{document`
+        <h2>Datei mit Teilabschnitt</h2>
+        <ul>
+            <li>enthält **keine Präambel**<li>
+            <li>enthält **kein** `\begin{document}` und `\end{document`</li>
+        </ul>
+        <pre data-source="abschnitt1.tex" class="hljs lang-tex"><code>\section{Dies ist Abschnitt1}
+Hier ein Absatz zum
+Inhalt von Abschnitt 1.</code></pre>
+    </div>
+</div>
+
 
-abschnitt1.tex:
-```tex
-\section{Dies ist Abschnitt1}
-Hier ein Absatz zum Inhalt von Abschnitt 1.
-```
 
 ---
 
@@ -70,22 +76,22 @@ Hier ein Absatz zum Inhalt von Abschnitt 1.
 ---
 
 <div class="two-columns">
-	<div class="column">
+    <div class="column">
-		`\input{filename.tex}`
+        `\input{filename.tex}`
-		<ul class="fragment">
+        <ul class="fragment">
-			<li>Dateiendung .tex angeben</li>
+            <li>Dateiendung .tex angeben</li>
-			<li>Schachtelung möglich: Unterdateien können wiederum per `\input{}` andere Unterunterdateien einbinden</li>
+            <li>Schachtelung möglich: Unterdateien können wiederum per `\input{}` andere Unterunterdateien einbinden</li>
-			<li>Unterdatei wird im fertigen Dokument ohne Sprung auf neue Seite in Hauptdatei eingefügt</li>
+            <li>Unterdatei wird im fertigen Dokument ohne Sprung auf neue Seite in Hauptdatei eingefügt</li>
-	    	</ul>
+            </ul>
-	</div>
+    </div>
-	<div class="column">
+    <div class="column">
-		`\include{filename}`
+        `\include{filename}`
-		<ul class="fragment">
+        <ul class="fragment">
-			<li>Dateiendung .tex **nicht** angeben</li>
+            <li>Dateiendung .tex **nicht** angeben</li>
-			<li>Schachtelung nicht möglich</li>
+            <li>Schachtelung nicht möglich</li>
-			<li>für jede Unterdatei wird im fertigen Dokument eine neue Seite angelegt</li>
+            <li>für jede Unterdatei wird im fertigen Dokument eine neue Seite angelegt</li>
-		</ul>
+        </ul>
-	</div>
+    </div>
 </div>
 
 ---
@@ -101,8 +107,8 @@ Hier ein Absatz zum Inhalt von Abschnitt 1.
 ### Absolute Dateipfade
 * Pfad von der Wurzel des Ordnerbaums bis zur jeweiligen Datei
 * die verschiedenen Ebenen des Baums werden dabei durch folgende Zeichen getrennt:
-	* / (Unix, Mac)
+    * / (Unix, Mac)
-	* \ (Windows)
+    * \ (Windows)
 
 ---