Make all slides dynamic squares.

css/theme/latex.css

@@ -21,49 +21,56 @@ 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 {
+    grid-template-rows: var(--square) auto;
+    grid-template-columns: auto;
+    grid-template-areas: "content" "preview"; }
+    @media screen and (min-aspect-ratio: 1 / 1) {
+      body .layout-content-and-preview {
+        grid-template-rows: auto var(--square) auto;
+        grid-template-columns: var(--square) auto;
+        grid-template-areas: "   .    preview" "content preview" "   .    preview"; } }
+    @media screen and (min-aspect-ratio: 2 / 1) {
+      body .layout-content-and-preview {
+        grid-template-rows: var(--square);
+        grid-template-columns: var(--square) auto;
+        grid-template-areas: "content preview"; } }
+  body .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) {
+      body .layout-content-only {
+        grid-template-rows: auto var(--square) auto;
+        grid-template-columns: auto var(--square) auto;
+        grid-template-areas: ".    .    ." ". content ." ".    .    ."; } }
+  body .layout-content {
     background: white;
-      grid-area: content; }
+    grid-area: content;
-    body .layout-content-and-preview .layout-preview {
+    position: relative; }
+  body .layout-preview {
     grid-area: preview;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--secondary); }
-      body .layout-content-and-preview .layout-preview img {
+    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); }
 
-@media screen and (min-aspect-ratio: 1 / 1) {
-  body {
-    font-size: calc(0.035 * var(--square)); }
-    body .layout-content-and-preview {
-      grid-template-rows: auto var(--square) auto;
-      grid-template-columns: var(--square) auto;
-      grid-template-areas: "   .    preview" "content preview" "   .    preview"; } }
-
-@media screen and (min-aspect-ratio: 2 / 1) {
-  body {
-    font-size: calc(0.035 * var(--square)); }
-    body .layout-content-and-preview {
-      grid-template-rows: var(--square);
-      grid-template-columns: var(--square) auto;
-      grid-template-areas: "content preview"; } }
-
 /* content layout */
 @font-face {
   font-family: 'Fira Code';
@@ -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,10 +136,12 @@ 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,
+    .layout-content-only .layout-content code {
       font-size: 0.9em;
       font-family: 'Fira Code'; }
-  .layout-content-and-preview code.hljs {
+      .layout-content-and-preview .layout-content code.hljs,
+      .layout-content-only .layout-content code.hljs {
         padding: .3em 0; }
 
 .layout.layout-chapter-heading {
@@ -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

@@ -23,22 +23,62 @@ 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-and-preview {
+    grid-template-rows: var(--square) auto;
+    grid-template-columns: auto;
+    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:
+        "   .    preview"
+        "content preview"
+        "   .    preview";
+    }
+    @media screen and (min-aspect-ratio: 2/1) {
+      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;
@@ -54,31 +94,6 @@ body {
     }
   }
 }
-}
-@media screen and (min-aspect-ratio: 1/1) {
-  body {
-    font-size: calc(0.035 * var(--square));
-    .layout-content-and-preview {
-      grid-template-rows: auto var(--square) auto;
-      grid-template-columns: var(--square) auto;
-      grid-template-areas:
-        "   .    preview"
-        "content preview"
-        "   .    preview";
-    }
-  }
-}
-@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";
-    }
-  }
-}
 
 /* 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 {
@@ -151,17 +167,17 @@ body {
         transform-origin: top right;
         transform: rotate(-90deg);
       }
+    }
 
     code {
       font-size: 0.9em;
       font-family: 'Fira Code';
-    }
+      &.hljs {
-
-    code.hljs {
         padding: .3em 0;
       }
     }
   }
+}
 
 .layout.layout-chapter-heading {
   height: 100vh;
@@ -177,4 +193,13 @@ body {
   }
 }
 
-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>
+</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,21 +1,26 @@
-
+<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">
-
         <h2 class="layout-title">Hauptdatei 👑</h2>
         <ul>
             <li>enthält Grundgerüst, Titelei, etc. </li>
@@ -26,7 +31,6 @@ Ein größeres LaTeX-Projekt anlegen und dabei ...
                 </ul>
             </li>
         </ul>
-
         <pre class="lang-tex hljs" data-sourcefile="main.tex"><code>\documentclass{article}
 \usepackage[ngerman]{babel}
 \usepackage[utf8]{inputenc}
@@ -36,26 +40,28 @@ Ein größeres LaTeX-Projekt anlegen und dabei ...
     \tableofcontents
     \input{abschnitt1.tex}
     \input{abschnitt2.tex}
-\end{document}
+\end{document}</code></pre>
-</code></pre>
-
     </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.
-```
 
 ---