Working on layouts.

css/theme/latex.css

@@ -223,7 +223,7 @@ body {
 .layout-content-and-preview .layout-content,
 .layout-content-only .layout-content,
 .layout-wide-content .layout-content {
-  overflow: auto;
+  overflow: visible;
   padding: calc(var(--margin) * var(--square)); }
   .layout-content-and-preview .layout-content *:first-child,
   .layout-content-only .layout-content *:first-child,
@@ -405,9 +405,12 @@ h2[data-category]::before {
   padding-left: calc(var(--margin) * var(--square));
   margin-right: .5em; }
 
-.layout-content-only h2[data-category^=Aufgabe]::after,
+h2[data-category=Aufgabe]::before {
-.layout-wide-content h2[data-category^=Aufgabe]::after {
+  content: attr(data-category) " " attr(data-task); }
-  content: attr(data-category);
+
+.layout-content-only h2[data-category=Aufgabe]::after,
+.layout-wide-content h2[data-category=Aufgabe]::after {
+  content: attr(data-task);
   position: absolute;
   top: 0;
   right: 0;
@@ -421,6 +424,12 @@ h2[data-category]::before {
   direction: rtl;
   word-spacing: 1000%;
   opacity: .2; }
+  @media screen and (min-aspect-ratio: 1 / 1) and (max-aspect-ratio: 2 / 1) {
+    .layout-content-only h2[data-category=Aufgabe]::after,
+    .layout-wide-content h2[data-category=Aufgabe]::after {
+      --versatz: calc((100vh - var(--square)) / 2);
+      top: var(--versatz);
+      bottom: calc(-1 * var(--versatz)); } }
 
 img {
   width: auto;
@@ -552,3 +561,10 @@ p a:link, p a:hover, p a:active, p a:visited {
 
 p a:hover::before {
   height: 110%; }
+
+pre.small-text {
+  font-size: 80%; }
+
+pre.scroll-one-half {
+  max-height: calc(.5 * var(--square));
+  overflow: auto !important; }

css/theme/source/latex.scss

@@ -314,7 +314,7 @@ body {
 .layout-content-only,
 .layout-wide-content {
   .layout-content {
-    overflow: auto;
+    overflow: visible;
     padding: calc(var(--margin) * var(--square));
 
     *:first-child {
@@ -494,15 +494,16 @@ h2[data-category]::before {
   vertical-align: baseline;
   letter-spacing: .1em;
   position: relative;
-  // left: calc(-1 * var(--margin) * var(--square));
-  // margin-right: calc(-1 * var(--margin) * var(--square) + 1em);
   margin-left: calc(-1 * var(--margin) * var(--square));
   padding-left: calc(var(--margin) * var(--square));
   margin-right: .5em;
 }
-.layout-content-only h2[data-category^=Aufgabe]::after,
+h2[data-category=Aufgabe]::before {
-.layout-wide-content h2[data-category^=Aufgabe]::after {
+  content: attr(data-category) ' ' attr(data-task);
-  content: attr(data-category);
+}
+.layout-content-only h2[data-category=Aufgabe]::after,
+.layout-wide-content h2[data-category=Aufgabe]::after {
+  content: attr(data-task);
   position: absolute;
   top: 0;
   right: 0;
@@ -516,6 +517,11 @@ h2[data-category]::before {
   direction: rtl;
   word-spacing: 1000%;
   opacity: .2;
+  @media screen and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 2/1) {
+    --versatz: calc((100vh - var(--square)) / 2);
+    top: var(--versatz);
+    bottom: calc(-1 * var(--versatz));
+  }
 }
 
 img {
@@ -684,3 +690,12 @@ p a {
 
   }
 }
+
+pre.small-text {
+  font-size: 80%;
+}
+
+pre.scroll-one-half {
+  max-height: calc(.5 * var(--square));
+  overflow: auto !important;
+}

sections/german/02/02.md

@@ -140,7 +140,7 @@ Geburtsort: Milwaukee, Wisconsin
 
 <div class="layout-content-only">
     <div class="layout-content">
-        <h2 data-category="Aufgabe 1">Erste Schritte mit LaTeX</h2>
+        <h2 data-category="Aufgabe" data-task="1">Erste Schritte mit LaTeX</h2>
         <ul>
             <li class="fragment">Falls nötig: Install now!</li>
             <li class="fragment">Ladet euch aus dem VC die Datei <code>aufgabe01.tex</code> herunter und speichert sie in einem eigenen Ordner.</li>

sections/german/03/03.md

@@ -345,7 +345,7 @@ Mein Lieblingsrezept
 
 <div class="layout-content-only">
     <div class="layout-content">
-        <h2 data-category="Aufgabe 2">Grundstruktur des Skripts anpassen</h2>
+        <h2 data-category="Aufgabe" data-task="2">Grundstruktur des Skripts anpassen</h2>
         <ul>
             <li class="fragment">Füge ein Inhaltsverzeichnis in das Skript ein.</li>
             <li class="fragment">Füge im 1. Kapitel xxxxx mehrere neue Absätze mit <code>\section{}</code> und <code>\subsection{}</code> ein und beobachte, was im Inhaltsverzeichnis passiert.</li>

sections/german/04/04.md

@@ -224,7 +224,7 @@ Inhalt von Abschnitt 1.</code></pre>
 
 <div class="layout-content-only">
     <div class="layout-content">
-        <h2 data-category="Aufgabe 4">Projektstruktur für das Skript anlegen</h2>
+        <h2 data-category="Aufgabe" data-task="3">Projektstruktur für das Skript anlegen</h2>
         <ul>
             <li class="fragment">Teile das Skript in sinnvolle Abschnitte auf und lagere sie in separate <code>.tex</code>-Dateien aus.</li>
             <li class="fragment">Verwende zunächst <code>\input{}</code>, um die Abschnitte in deine Hauptdatei einzubinden.</li>

sections/german/05/05.md

@@ -406,7 +406,7 @@ $\dagger$</code></pre>
 
 <div class="layout-content-only">
     <div class="layout-content">
-        <h2 data-category="Aufgabe 5">Sonderzeichen einfügen</h2>
+        <h2 data-category="Aufgabe" data-task="4">Sonderzeichen einfügen</h2>
         <ul>
             <li class="fragment">Suche dir aus der PDF-Liste zu Sonderzeichen einige interessante Symbole aus und füge sie in den ersten Absatz von xxx ein.</li>
             <li class="fragment">Lies dir den ersten Absatz von xxx durch und hebe auf unterschiedliche Art und Weise (fett, kursiv etc.) Abschnitte hervor, die dir wichtig erscheinen.</li>

sections/german/07/07.md

@@ -53,7 +53,7 @@
 
 <div class="layout-content-only">
     <div class="layout-content">
-        <h2 data-category="Aufgabe 7">Absätze ändern</h2>
+        <h2 data-category="Aufgabe" data-task="6">Absätze ändern</h2>
         <ul>
             <li class="fragment">Formatiere den ersten Absatz des Kapitels xxx rechtsbündig zentriert.</li>
         </ul>

sections/german/08/08.md

@@ -121,7 +121,7 @@
 
 <div class="layout-content-only">
     <div class="layout-content">
-        <h2 data-category="Aufgabe 6">Aufzählungen einfügen</h2>
+        <h2 data-category="Aufgabe" data-task="7">Aufzählungen einfügen</h2>
         <ul>
             <li class="fragment">Füge in Absatz xxx von Kapitel xxx eine nummerierte Aufzählung von xxx ein.</li>
             <li class="fragment">Wandle die Aufzählung anschließend in eine Liste mit Bullet Points um.</li>

sections/german/09/09.md

@@ -169,7 +169,7 @@
 
 <div class="layout-content-only">
     <div class="layout-content">
-        <h2 data-category="Aufgabe 9">Formeln setzen</h2>
+        <h2 data-category="Aufgabe" data-task="8">Formeln setzen</h2>
         <ul>
             <li class="fragment"></li>
         </ul>

sections/german/10/10.md

@@ -107,7 +107,7 @@ breaklines=true,
 
 <div class="layout-content-only">
     <div class="layout-content">
-        <h2 data-category="Aufgabe 10">Quelltext einbinden</h2>
+        <h2 data-category="Aufgabe" data-task="9">Quelltext einbinden</h2>
         <ul>
             <li class="fragment"></li>
         </ul>

sections/german/11/11.md

@@ -73,7 +73,7 @@ height=5cm]{&lt;dateipfad>}</code></pre>
 
 <div class="layout-content-only">
     <div class="layout-content">
-        <h2 data-category="Aufgabe 11">Grafiken einfügen</h2>
+        <h2 data-category="Aufgabe" data-task="10">Grafiken einfügen</h2>
         <ul>
             <li class="fragment"></li>
         </ul>

sections/german/12/12.md

@@ -196,7 +196,7 @@
 
 <div class="layout-content-only">
     <div class="layout-content">
-        <h2 data-category="Aufgabe 12">Tabellen einfügen</h2>
+        <h2 data-category="Aufgabe" data-task="11">Tabellen einfügen</h2>
         <ul>
             <li class="fragment"></li>
         </ul>

sections/german/13/13.md

@@ -55,12 +55,11 @@ TODO: Fußnoten
 
 ---
 
-<div class="layout-only">
+<div class="layout-content-only">
     <div class="layout-content">
-        <h2 data-category="Aufgabe">8. Referenzen einfügen</h2>
+        <h2 data-category="Aufgabe" data-task="12">Referenzen einfügen</h2>
         <ul>
             <li class="fragment"></li>
         </ul>
     </div>
 </div>
-

sections/german/14/14.md

@@ -75,7 +75,7 @@
 
 <div class="layout-wide-content">
     <div class="layout-content">
-        <h2 data-category="Aufgabe 14">Ein Literaturverzeichnis erstellen und einfügen</h2>
+        <h2 data-category="Aufgabe" data-task="13">Ein Literaturverzeichnis erstellen und einfügen</h2>
         <ul>
             <li class="fragment">Suche in einer Literaturdatenbank deiner Wahl die BibTeX-Einträge für folgende LaTeX-Handbücher:
 		<ul>

sections/german/15/15.md

@@ -37,7 +37,7 @@ weiter verbreitet.
    <div class="layout-content">
    <h2>Beamer</h2>
    <p>Dokumentenklasse zur Erstellung von Präsentationen.</p>
-   <pre class="lang-tex hljs"><code>\documentclass{beamer}
+   <pre class="lang-tex hljs small-text"><code>\documentclass{beamer}
 \usetheme{Frankfurt}
 \usecolortheme{seahorse}
 \author{ACID}
@@ -62,9 +62,9 @@ auf Basis von \textit{Zitronen}.
 
 <div class="layout-content-and-preview">
     <div class="layout-content">
-    <h2>TikZ - TikZ ist kein Zeichenprogramm</h2>
+    <h2>TikZ – TikZ ist kein Zeichenprogramm</h2>
     <p>Paket zur Erstellung von Vektorgrafiken.</p>
-    <pre class="lang-tex hljs"><code>\tikzstyle{every node}=[draw=black,thick,anchor=west]
+    <pre class="lang-tex hljs small-text scroll-one-half"><code>\tikzstyle{every node}=[draw=black,thick,anchor=west]
 \tikzstyle{selected}=[draw=red,fill=red!30]
 \tikzstyle{dir}=[fill=gray!50]
 \tikzstyle{relativeTo}=[fill=blue!70]
@@ -105,13 +105,13 @@ child { node {home}
    \item Erdbeeren
    \item Stachelbeeren
    \item Eisbären
-    \end{asparaenum}
+\end{asparaenum}
 
-    \begin{asparaitem} %itemize
+\begin{asparaitem} %itemize
    \item Erdbeeren
    \item Stachelbeeren
    \item Eisbären
-    \end{asparaitem}</code></pre>
+\end{asparaitem}</code></pre>
 </div>
 <div>
     <img src="sections/german/15/paralist.png">
@@ -123,13 +123,9 @@ child { node {home}
     <div class="layout-content">
         <h2>Linguistik</h2>
         <p>Beispiel Konstituentenbäume mit <code>qtree</code></p>
+        <pre class="lang-tex hljs"><code>\Tree [.S [.NP LaTeX ]
+[.VP [.V is ] [.NP fun ] ] ]</code></pre>
     </div>
-    <div class="layout-preview">
-    <pre class="lang-tex hljs">
-    <code>
-    \Tree [.S [.NP LaTeX ] [.VP [.V is ] [.NP fun ] ] ]
-    </code>
-    </pre>
 </div>
 <div class="layout-preview">
     <img src="sections/german/15/constituency_tree.png">