Add content for chapter 1.

css/theme/latex.css

@@ -11,6 +11,7 @@ section {
 /* config */
 :root {
   --primary: #f8f281;
+  --primary-dark: #928c1b;
   --secondary: #bbd6ec;
   --secondary-dark: #3f5d75;
   --margin: 0.1; }
@@ -71,13 +72,25 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--secondary); }
+    background: var(--secondary);
+    position: relative; }
+    body .layout-preview figure {
+      display: contents; }
     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); }
+    body .layout-preview figcaption {
+      position: absolute;
+      background: rgba(0, 0, 0, 0.5);
+      bottom: 0;
+      width: 100%;
+      text-align: center;
+      color: white;
+      padding: .5em;
+      box-sizing: border-box; }
   body .layout-two-columns {
     display: grid;
     min-height: 100vh;
@@ -108,6 +121,23 @@ body {
     body .layout-two-columns .layout-column-two {
       grid-area: column2;
       background: white; }
+  body .layout-two-previews {
+    display: grid;
+    min-height: 100vh;
+    max-height: 100vh;
+    min-width: 100vw;
+    max-width: 100vw;
+    overflow: auto;
+    grid-template-rows: auto auto;
+    grid-template-columns: auto;
+    background: var(--secondary); }
+    @media screen and (min-aspect-ratio: 1 / 1) {
+      body .layout-two-previews {
+        grid-template-rows: 100vh;
+        grid-template-columns: 50vw 50vw;
+        grid-template-areas: "preview preview"; } }
+    body .layout-two-previews .layout-preview {
+      grid-area: auto; }
 
 /* content layout */
 @font-face {
@@ -150,20 +180,34 @@ body {
     .layout-content-only .layout-content .layout-title h2 {
       margin: 0;
       line-height: 1.15em; }
-  .layout-content-and-preview .layout-content ul,
+  .layout-content-and-preview .layout-content ul, .layout-content-and-preview .layout-content ol,
-  .layout-content-only .layout-content ul {
+  .layout-content-only .layout-content ul,
+  .layout-content-only .layout-content ol {
     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-and-preview .layout-content ol li::before,
-    .layout-content-only .layout-content ul li::before {
+    .layout-content-only .layout-content ul li::before,
+    .layout-content-only .layout-content ol 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-and-preview .layout-content ul ol, .layout-content-and-preview .layout-content ol ul, .layout-content-and-preview .layout-content ol ol,
-    .layout-content-only .layout-content ul ul {
+    .layout-content-only .layout-content ul ul,
+    .layout-content-only .layout-content ul ol,
+    .layout-content-only .layout-content ol ul,
+    .layout-content-only .layout-content ol ol {
       margin-left: calc(0.33 * var(--margin) * var(--square)); }
+  .layout-content-and-preview .layout-content ol,
+  .layout-content-only .layout-content ol {
+    counter-reset: ol-counter; }
+    .layout-content-and-preview .layout-content ol li::before,
+    .layout-content-only .layout-content ol li::before {
+      counter-increment: ol-counter;
+      content: counter(ol-counter) ".";
+      color: var(--secondary-dark);
+      left: calc(-0.36 * var(--margin) * var(--square)); }
   .layout-content-and-preview .layout-content pre,
   .layout-content-only .layout-content pre {
     margin-left: calc(-1 * var(--margin) * var(--square));
@@ -314,3 +358,35 @@ blockquote {
     color: var(--secondary-dark); }
   blockquote cite::before {
     content: ' – '; }
+
+.layout-content figure {
+  margin: 0 1em 1em 0; }
+
+.bubble {
+  display: inline-block;
+  position: absolute;
+  margin-top: -2em;
+  margin-left: -3.8em;
+  width: 6em;
+  border: 0.1em solid var(--primary-dark);
+  background: var(--primary);
+  text-align: center;
+  border-radius: 1em; }
+  .bubble::before {
+    content: '';
+    width: 0;
+    height: 0;
+    position: absolute;
+    border: .5em solid transparent;
+    border-top-color: var(--primary-dark);
+    bottom: -1em;
+    left: calc(50% - .5em); }
+  .bubble::after {
+    content: '';
+    width: 0;
+    height: 0;
+    position: absolute;
+    border: .5em solid transparent;
+    border-top-color: var(--primary);
+    bottom: -0.87em;
+    left: calc(50% - .5em); }

css/theme/source/latex.scss

@@ -11,6 +11,7 @@ section {
 /* config */
 :root {
   --primary: #f8f281;
+  --primary-dark: #928c1b;
   --secondary: #bbd6ec;
   --secondary-dark: #3f5d75;
   --margin: 0.1;
@@ -104,6 +105,10 @@ body {
     align-items: center;
     justify-content: center;
     background: var(--secondary);
+    position: relative;
+    figure {
+      display: contents;
+    }
     img {
       width: auto;
       height: auto;
@@ -111,6 +116,16 @@ body {
       max-height: 90%;
       box-shadow: .2em .2em .5em 0 rgba(0, 0, 0, .3);
     }
+    figcaption {
+      position: absolute;
+      background: rgba(0,0,0,.5);
+      bottom: 0;
+      width: 100%;
+      text-align: center;
+      color: white;
+      padding: .5em;
+      box-sizing: border-box;
+    }
   }
 
   .layout-two-columns {
@@ -160,6 +175,27 @@ body {
       background: white;
     }
   }
+
+  .layout-two-previews {
+    display: grid;
+    min-height: 100vh;
+    max-height: 100vh;
+    min-width: 100vw;
+    max-width: 100vw;
+    overflow: auto;
+    grid-template-rows: auto auto;
+    grid-template-columns: auto;
+    background: var(--secondary);
+    @media screen and (min-aspect-ratio: 1/1) {
+      grid-template-rows: 100vh;
+      grid-template-columns: 50vw 50vw;
+      grid-template-areas:
+        "preview preview";
+    }
+    .layout-preview {
+      grid-area: auto;
+    }
+  }
 }
 
 /* content layout */
@@ -211,7 +247,7 @@ body {
       }
     }
 
-    ul {
+    ul, ol {
       list-style-type: none;
       padding-left: 0;
       position: relative;
@@ -221,10 +257,19 @@ body {
         position: absolute;
         left: calc(-0.33 * var(--margin) * var(--square));
       }
-      ul {
+      ul, ol {
         margin-left: calc(0.33 * var(--margin) * var(--square));
       }
     }
+    ol {
+      counter-reset: ol-counter;
+      li::before {
+        counter-increment: ol-counter;
+        content: counter(ol-counter) '.';
+        color: var(--secondary-dark);
+        left: calc(-0.36 * var(--margin) * var(--square));
+      }
+    }
 
     pre {
       margin-left: calc(-1 * var(--margin) * var(--square));
@@ -406,3 +451,41 @@ blockquote {
     content: ' – '
   }
 }
+
+.layout-content {
+  figure {
+    margin: 0 1em 1em 0;
+  }
+}
+
+.bubble {
+  display: inline-block;
+  position: absolute;
+  margin-top: -2em;
+  margin-left: -3.8em;
+  width: 6em;
+  border: .1em solid var(--primary-dark);
+  background: var(--primary);
+  text-align: center;
+  border-radius: 1em;
+  &::before {
+    content: '';
+    width: 0;
+    height: 0;
+    position: absolute;
+    border: .5em solid transparent;
+    border-top-color: var(--primary-dark);
+    bottom: -1em;
+    left: calc(50% - .5em);
+  }
+  &::after {
+    content: '';
+    width: 0;
+    height: 0;
+    position: absolute;
+    border: .5em solid transparent;
+    border-top-color: var(--primary);
+    bottom: -0.87em;
+    left: calc(50% - .5em);
+  }
+}

sections/german/01/01.md

@@ -6,13 +6,148 @@
 
 ---
 
-<div class="layout-content-and-preview">
+<div class="layout-two-previews">
-	<div class="layout-content">
+    <div class="layout-preview">
-		<h2>Titel</h2>
+        <figure>
-		<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>
+            <img src="sections/german/04/projekt_dokument.png">
-		<pre class="hljs"><code>bar</code></pre>
+            <figcaption>TODO: Klassisches Word-Dokument</figcaption>
+        </figure>
     </div>
     <div class="layout-preview">
-		<img class="layout-content-right" src="sections/german/04/projekt_dokument.png">
+        <figure>
+            <img src="sections/german/04/projekt_dokument.png">
+            <figcaption>TODO: Klassisches LaTeX-Dokument</figcaption>
+        </figure>
+    </div>
+</div>
+
+---
+
+<div class="layout-content-and-preview">
+    <div class="layout-content">
+        <h2>Entstehung</h2>
+        <ul>
+            <li>Donald **Knuth**, 1977–1986: Textsatzsystem **TeX**<span class="bubble fragment">τεχ → /tɛç/</span> für The Art of Computer Programming</li>
+            <li>Leslie **Lamport**, ab 1980er: Softwarepaket **LaTeX** zur einfacheren Benutzung von TeX</li>
+        </ul>
+        <div style="display: flex; justify-content: space-between; align-items: stretch;">
+            <figure>
+                <img src="sections/german/01/knuth.jpg">
+                <figcaption>Donald Knuth</figcaption>
+            </figure>
+            <figure>
+                <img src="sections/german/01/lamport.jpg">
+                <figcaption>Leslie Lamport</figcaption>
+            </figure>
+        </div>
+    </div>
+    <div class="layout-preview">
+        <img src="sections/german/01/taocp.jpg">
+        <!-- https://in.pinterest.com/pin/813110907700064708/ -->
+    </div>
+</div>
+
+---
+
+<div class="layout-two-previews">
+    <div class="layout-preview">
+        <figure>
+            <img src="sections/german/04/projekt_dokument.png">
+            <figcaption>TODO: Klassisches Word-Dokument</figcaption>
+        </figure>
+    </div>
+    <div class="layout-preview">
+        <figure>
+            <img src="sections/german/04/projekt_dokument.png">
+            <figcaption>TODO: Klassisches LaTeX-Dokument</figcaption>
+        </figure>
+    </div>
+</div>
+
+---
+
+<div class="layout-content-and-preview">
+    <div class="layout-content">
+        <h2>Typografie</h2>
+        <h3>Makrotypografie</h3>
+        <ul>
+            <li>Satzspiegel</li>
+            <li>Zeilenlänge vs. -abstand</li>
+            <li>Platzierung von Bildern und Tabellen</li>
+            <li>Schusterjungen / Hurenkinder</li>
+            <li>…</li>
+        </ul>
+    </div>
+    <div class="layout-preview">
+        TODO: Illustration
+    </div>
+</div>
+
+---
+
+<div class="layout-content-and-preview">
+    <div class="layout-content">
+        <h2>Typografie</h2>
+        <h3>Mikrotypografie</h3>
+        <ul>
+            <li>Ligaturen</li>
+            <li>Kerning</li>
+            <li>echte Kursiven, Kapitälchen, …</li>
+            <li>Wortabstände</li>
+            <li>…</li>
+        </ul>
+    </div>
+    <div class="layout-preview">
+        TODO: Illustration
+    </div>
+</div>
+
+---
+
+<div class="layout-content-only">
+    <div class="layout-content">
+        <h2>Weitere Vorteile</h2>
+        <ul>
+            <li>strukturiertes Arbeiten</li>
+            <li>zuverlässiges Undo</li>
+            <li>einfache Versionierung</li>
+            <li>unabhängig von proprietären Programmen</li>
+            <li>Quelltext und Ausgabe langfristig lesbar</li>
+        </ul>
+    </div>
+</div>
+
+---
+
+<div class="layout-content-only">
+    <div class="layout-content">
+        <h2>Ablauf des Workshops</h2>
+        <p><strong>Ziel:</strong> Ihr baut eure eigene LaTeX-Referenz</li>
+        <ul>
+            <li>Learning by Doing</li>
+            <li>Verstehen, wie LaTeX funktioniert</li>
+            <li>Einzelheiten später nachschlagen</li>
+        </ul>
+        <div class="fragment">
+        <p><strong>Gliederung:</strong></p>
+        <ol>
+            <li><del>Was ist LaTeX?</del></li>
+            <li>Wie funktioniert LaTeX?</li>
+            <li>Grundstruktur eines LaTeX-Dokuments</li>
+            <li>Projektstruktur</li>
+            <li>Viele Features</li>
+            <li>Literaturverwaltung</li>
+            <li>Ausblick</li>
+        </ol>
+        </div>
+    </div>
+</div>
+
+<div class="layout-content-and-preview">
+    <div class="layout-content">
+        Leer
+    </div>
+    <div class="layout-preview">
+        Leer
     </div>
 </div>