Move pages to extra

css/latex.scss

@@ -68,8 +68,8 @@ body {
       "content"
       "preview";
     background: linear-gradient(to bottom,
-      white 0%,
+      var(--background, white) 0%,
-      white var(--square),
+      var(--background, white) var(--square),
       var(--secondary) var(--square),
       var(--secondary) var(--square));
     @media (min-aspect-ratio: 1/1) {
@@ -79,7 +79,7 @@ body {
         "   .    preview"
         "content preview"
         "   .    preview";
-      background: linear-gradient(to right, white 0%, white var(--square), var(--secondary) var(--square), var(--secondary) 100%);
+      background: linear-gradient(to right, var(--background, white) 0%, var(--background, white) var(--square), var(--secondary) var(--square), var(--secondary) 100%);
     }
     @media (min-aspect-ratio: 2/1) {
       grid-template-rows: var(--square);
@@ -95,7 +95,7 @@ body {
     grid-template-areas:
       "content"
       "   .   ";
-    background: linear-gradient(to bottom, white 0%, white var(--square), var(--secondary) var(--square), var(--secondary) 100%);
+    background: linear-gradient(to bottom, var(--background, white) 0%, var(--background, white) var(--square), var(--secondary) var(--square), var(--secondary) 100%);
     @media (min-aspect-ratio: 1/1) {
       grid-template-rows: auto var(--square) auto;
       grid-template-columns: auto var(--square) auto;
@@ -106,8 +106,8 @@ body {
       background: linear-gradient(to right,
         var(--secondary) 0%,
         var(--secondary) calc((100% - var(--square)) / 2),
-        white calc((100% - var(--square)) / 2),
+        var(--background, white) calc((100% - var(--square)) / 2),
-        white calc(100% - (100% - var(--square)) / 2),
+        var(--background, white) calc(100% - (100% - var(--square)) / 2),
         var(--secondary) calc(100% - (100% - var(--square)) / 2),
         var(--secondary) 100%);
     }
@@ -121,7 +121,7 @@ body {
   }
 
   .layout-wide-content {
-    background: white;
+    background: var(--background, white);
     grid-template-rows: min-content auto;
     grid-template-columns: var(--square);
     grid-template-areas:
@@ -145,15 +145,15 @@ body {
       background: linear-gradient(to right,
         var(--secondary) 0%,
         var(--secondary) calc((100% - 2 * var(--square)) / 2),
-        white calc((100% - 2 * var(--square)) / 2),
+        var(--background, white) calc((100% - 2 * var(--square)) / 2),
-        white calc(100% - (100% - 2 * var(--square)) / 2),
+        var(--background, white) calc(100% - (100% - 2 * var(--square)) / 2),
         var(--secondary) calc(100% - (100% - 2 * var(--square)) / 2),
         var(--secondary) 100%);
     }
   }
 
   .layout-content {
-    background: white;
+    background: var(--background, white);
     grid-area: content;
     position: relative;
 
@@ -200,7 +200,7 @@ body {
       box-shadow: .2em .2em .5em 0 rgba(0, 0, 0, .3);
       object-fit: cover;
       margin: calc(.05 * var(--square));
-      background-color: white;
+      background-color: var(--background, white);
       box-sizing: border-box;
 
       &.thin-padding {
@@ -224,7 +224,7 @@ body {
         }
       }
       &[src$="-orig.svg"] {
-        background: white;
+        background: var(--background, white);
         object-fit: contain;
       }
     }
@@ -234,7 +234,7 @@ body {
       bottom: 0;
       width: 100%;
       text-align: center;
-      color: white;
+      color: var(--background, white);
       padding: .5em;
       box-sizing: border-box;
     }
@@ -279,12 +279,12 @@ body {
 
     .layout-column-one {
       grid-area: column1;
-      background: white;
+      background: var(--background, white);
     }
 
     .layout-column-two {
       grid-area: column2;
-      background: white;
+      background: var(--background, white);
     }
   }
 
@@ -523,7 +523,7 @@ h3[data-category]::before {
   font-variant: small-caps;
   text-transform: lowercase;
   background: black;
-  color: white;
+  color: var(--background, white);
   padding: .1em .5em;
   display: inline-block;
   vertical-align: baseline;
@@ -760,7 +760,7 @@ figcaption a:not(.dark-font) {
   &:hover,
   &:active,
   &:visited {
-    color: white;
+    color: var(--background, white);
 
     &::before {
       background-color: var(--secondary-dark);
@@ -844,7 +844,7 @@ pre.scroll-one-half {
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
   z-index: 500;
-  background: white;
+  background: var(--background, white);
   box-shadow: 0 0px 50px rgba(0, 0, 0, 0.3);
   opacity: 0;
   transition: .2s opacity ease-in-out;
@@ -877,3 +877,13 @@ pre.scroll-one-half {
     background-color: rgba(0, 0, 0, .5);
   }
 }
+
+
+/* 
+ * Extra Content
+ * ==============
+ */
+
+.extra-content {
+  --background: var(--secondary-light)
+}

layouts/extra-content-only.html

@@ -0,0 +1,6 @@
+<div class="layout-content-only extra-content">
+    <div class="layout-content">
+    	<h2 data-category="Extra">@title(inline)</h2>
+        @content
+    </div>
+</div>

slides/chapter-03.de.md

@@ -203,7 +203,7 @@ Lösung: »`\`« voranstellen:
 50\% sind die Hälfte.
 ```
 
-Funktioniert nicht mit »`\\`«, Lösung dafür später.
+Funktioniert nicht mit »`\\`«, nutzt `\textbackslash` stattdessen.
 
 @preview
 ![](svg/chapter-03/reservierte-zeichen-crop.svg)

slides/chapter-03.en.md

@@ -203,7 +203,7 @@ Solution: prefix with ‘`\`’:
 50\% is one half.
 ```
 
-Does not work for ‘`\\`’, we will see a solution for this later.
+Does not work for ‘`\\`’, use `\textbackslash` instead.
 
 @preview
 ![](svg/chapter-03/reserved-characters-crop.svg)

slides/chapter-05.de.md

@@ -132,8 +132,63 @@ LaTeX trennt Wörter im Normalfall automatisch richtig, wenn die richtige Sprach
 ![](svg/chapter-05/silbentrennung-crop.svg)
 
 
+@slide(layout=content-and-preview)
+
+@title
+Zitate
+
+@content
+Das Paket `csquotes` stellt u. a. den Befehl `\enquote` zur Verfügung:
+
+``` {.lang-tex .hljs}
+\enquote{Ein \enquote{verschachteltes}
+Zitat.}
+```
+
+Wenn das Paket mit `autostyle=true` eingebunden wird, werden bei fremdsprachigen Zitaten die entsprechenden Anführungszeichen verwendet:
+
+``` {.lang-tex .hljs}
+\foreignquote{english}{An English
+quote.}
+```
+
+@preview
+![](svg/chapter-05/zitate-crop.svg)
+
+
 @slide(layout=content-only)
 
+@title
+Sonderzeichen & Symbole
+
+@content
+### Detexify to the rescue! <span class="emoji">⛑️</span>
+*	Ausführliche Liste an verwendbaren Symbolen:  
+    [PDF auf der CTAN-Website](http://tug.ctan.org/info/symbols/comprehensive/symbols-a4.pdf)
+*	Symbole malen und erkennen lassen:  
+    [Detexify](http://detexify.kirelabs.org/classify.html)
+
+
+@slide(layout=task)
+
+@task-number
+5
+
+@title
+Sonderzeichen einfügen
+
+@content
+<div class="box warning">
+Kompiliert von nun an immer die Datei `main.tex`, um eure Änderungen im Skript zu sehen (in diesem Fall im Abschnitt „Übung 5“).
+</div>
+
+*	Ersetzt die Leerzeichen innerhalb der Abkürzungen in  `exercises/special-characters.tex` durch **schmale Leerzeichen**.
+*	Die Bindestriche bei den Öffnungszeiten der ERBA sollen durch **Halbgeviertstriche** ersetzt werden, optional mit schmalen Leerzeichen außenrum.
+* Nutzt den Befehl `\enquote`, um die Wörter *Studi-Ticket* und *Studi-Karte* in **Anführungszeichen** zu setzen.
+
+
+@slide(layout=extra-content-only)
+
 @title
 Anführungszeichen
 
@@ -189,31 +244,7 @@ Anführungszeichen
 Für andere Sprachen können andere Regeln gelten, meistens aber mit den gleichen Zeichen, nur in anderer Zusammensetzung.
 
 
-@slide(layout=content-and-preview)
+@slide(layout=extra-content-only)
-
-@title
-Zitate
-
-@content
-Das Paket `csquotes` stellt u.&thinsp;a. den Befehl `\enquote` zur Verfügung:
-
-``` {.lang-tex .hljs}
-\enquote{Ein \enquote{verschachteltes}
-Zitat.}
-```
-
-Wenn das Paket mit `autostyle=true` eingebunden wird, werden bei fremdsprachigen Zitaten die entsprechenden Anführungszeichen verwendet:
-
-``` {.lang-tex .hljs}
-\foreignquote{english}{An English
-quote.}
-```
-
-@preview
-![](svg/chapter-05/zitate-crop.svg)
-
-
-@slide(layout=content-only)
 
 @title
 Diakritika
@@ -255,7 +286,7 @@ Buchstaben mit Diakritika können entweder direkt über die Tastatur eingegeben
 </table>
 
 
-@slide(layout=content-only)
+@slide(layout=extra-content-only)
 
 @title
 Sonderzeichen & Symbole
@@ -299,34 +330,3 @@ Auch andere Sonderzeichen können entweder direkt eingegeben werden oder per Bef
 </table>
 
 … und so ziemlich alles andere.
-
-
-@slide(layout=content-only)
-
-@title
-Sonderzeichen & Symbole
-
-@content
-### Detexify to the rescue! <span class="emoji">⛑️</span>
-*	Ausführliche Liste an verwendbaren Symbolen:  
-    [PDF auf der CTAN-Website](http://tug.ctan.org/info/symbols/comprehensive/symbols-a4.pdf)
-*	Symbole malen und erkennen lassen:  
-    [Detexify](http://detexify.kirelabs.org/classify.html)
-
-
-@slide(layout=task)
-
-@task-number
-5
-
-@title
-Sonderzeichen einfügen
-
-@content
-<div class="box warning">
-Kompiliert von nun an immer die Datei `main.tex`, um eure Änderungen im Skript zu sehen (in diesem Fall im Abschnitt „Übung 5“).
-</div>
-
-*	Ersetzt die Leerzeichen innerhalb der Abkürzungen in  `exercises/special-characters.tex` durch **schmale Leerzeichen**.
-*	Die Bindestriche bei den Öffnungszeiten der ERBA sollen durch **Halbgeviertstriche** ersetzt werden, optional mit schmalen Leerzeichen außenrum.
-* Nutzt den Befehl `\enquote`, um die Wörter *Studi-Ticket* und *Studi-Karte* in **Anführungszeichen** zu setzen.

slides/chapter-05.en.md

@@ -131,10 +131,65 @@ The different kinds of hyphens that LaTeX offers are described in our script.
 ![](svg/chapter-05/hyphenation-crop.svg)
 
 
+@slide(layout=content-and-preview)
+
+@title
+Quotes
+
+@content
+The `csquotes` package provides, amongst others, the command `\enquote`.
+
+``` {.lang-tex .hljs}
+\enquote{A \enquote{nested}
+quote.}
+```
+
+When included with `autostyle=true`, foreign-language quotes use the according quotation marks:
+
+``` {.lang-tex .hljs}
+\foreignquote{ngerman}{Ein deutsches
+Zitat.}
+```
+
+@preview
+![](svg/chapter-05/quotes-crop.svg)
+
+
 @slide(layout=content-only)
 
 @title
-Quotation marks
+Special characters & symbols
+
+@content
+### Detexify to the rescue! <span class="emoji">⛑️</span>
+*	A long list of symbols to use:  
+    [PDF on the CTAN website](http://tug.ctan.org/info/symbols/comprehensive/symbols-a4.pdf)
+*	Draw symbols and have them recognised:  
+    [Detexify](http://detexify.kirelabs.org/classify.html)
+
+
+@slide(layout=task)
+
+@task-number
+5
+
+@title
+Insert special characters
+
+@content
+<div class="box warning">
+From now on, compile the file `main.tex` to see your changes appear in the script itself (in this task, see section “Übung 5”).
+</div>
+
+*	Replace the spaces in `exercises/special-characters.tex` within the abbreviations (“e.&thinsp;g.”, “i.&thinsp;a.”) by **thin spaces**.
+*	Replace the hyphens separating the opening hours by **en dashes** (`--`), optionally surrounded by thin spaces.
+* Add **quotation marks** around the words *Studi-Ticket* and *Studi-Karte* using the `\enquote` command.
+
+
+@slide(layout=extra-content-only)
+
+@title
+Manual quotation
 
 @content
 <table>
@@ -188,31 +243,7 @@ Quotation marks
 Other rules my apply for other languages, but most of the time it’s the same characters, only combined differently.
 
 
-@slide(layout=content-and-preview)
+@slide(layout=extra-content-only)
-
-@title
-Quotes
-
-@content
-The `csquotes` package provides, amongst others, the command `\enquote`.
-
-``` {.lang-tex .hljs}
-\enquote{A \enquote{nested}
-quote.}
-```
-
-When included with `autostyle=true`, foreign-language quotes use the according quotation marks:
-
-``` {.lang-tex .hljs}
-\foreignquote{ngerman}{Ein deutsches
-Zitat.}
-```
-
-@preview
-![](svg/chapter-05/quotes-crop.svg)
-
-
-@slide(layout=content-only)
 
 @title
 Diacritics
@@ -254,10 +285,10 @@ Letters with diacritics can either by typed directly on the keyboard or via esca
 </table>
 
 
-@slide(layout=content-only)
+@slide(layout=extra-content-only)
 
 @title
-Special characters  & symbols
+Special characters
 
 @content
 The same is true for special characters: They can either be typed directly or created via escape codes and commands:
@@ -298,34 +329,3 @@ The same is true for special characters: They can either be typed directly or cr
 </table>
 
 … and pretty much anything else.
-
-
-@slide(layout=content-only)
-
-@title
-Special characters & symbols
-
-@content
-### Detexify to the rescue! <span class="emoji">⛑️</span>
-*	A long list of symbols to use:  
-    [PDF on the CTAN website](http://tug.ctan.org/info/symbols/comprehensive/symbols-a4.pdf)
-*	Draw symbols and have them recognised:  
-    [Detexify](http://detexify.kirelabs.org/classify.html)
-
-
-@slide(layout=task)
-
-@task-number
-5
-
-@title
-Insert special characters
-
-@content
-<div class="box warning">
-From now on, compile the file `main.tex` to see your changes appear in the script itself (in this task, see section “Übung 5”).
-</div>
-
-*	Replace the spaces in `exercises/special-characters.tex` within the abbreviations (“e.&thinsp;g.”, “i.&thinsp;a.”) by **thin spaces**.
-*	Replace the hyphens separating the opening hours by **en dashes** (`--`), optionally surrounded by thin spaces.
-* Add **quotation marks** around the words *Studi-Ticket* and *Studi-Karte* using the `\enquote` command.