Add Sass compilation instructions to README

README.md

@@ -11,16 +11,27 @@ Zum Zeigen der Präsentation wird ein aktueller Browser benötigt. In diesem mus
 Um Inhalte der Präsentationen abzuändern oder zu ergänzen, muss zunächst das Repository geklont werden. Hierbei ist zu beachten, dass wir ein Submodul verwenden und deshalb eine zusätzliche Option beim Klonen notwendig ist:
 
 ```sh
-$ git clone --recurse-submodules https://git.stuve-bamberg.de/latex/latex-wochenende.git
+git clone --recurse-submodules https://git.stuve-bamberg.de/latex/latex-wochenende.git
 ```
 
+### Folien kompilieren
+
 Zum Kompilieren der Präsentation werden python3 und pandoc (empfohlene Version: [2.5](https://github.com/jgm/pandoc/releases/tag/2.5)) verwendet. Als nächstes müssen alle benötigten Python-Pakete geladen werden.
 
 ```sh
-$ cd latex-wochenende/onpoint
+cd latex-wochenende/onpoint
-$ pip3 install -r requirements.txt
+pip3 install -r requirements.txt
 ```
 
 Damit sind alle benötigten Komponenten installiert. Mittels `python3 main.py ..` können alle Sprachversionen kompiliert werden. Danach stehen sie wie oben beschrieben als HTML-Dateien zur Verfügung.
 
 Die Präsentation baut auf dem von uns entwickelten [onPoint-Präsentationswerkzeug](https://git.stuve-bamberg.de/ckremitzl/onpoint/) auf. Einen Überblick über die Verzeichnisstruktur und eine Anleitung zum automatischen Kompilieren bei jeder Änderung (unter Linux) finden sich [im zugehörigen README](https://git.stuve-bamberg.de/ckremitzl/onpoint/src/branch/master/README.md#the-project-structure).
+
+### Stylesheet anpassen
+
+Das Stylesheet verwendet Sass. Nach der Installation lassen sich die Styles folgendermaßen automatisch erzeugen:
+
+```sh
+cd css
+sass --watch style.scss:style.css
+```

css/latex.css

@@ -506,7 +506,7 @@ table {
 
 .box {
   margin-left: calc(-1 * var(--margin) * var(--square));
-  padding: 0.8em 0.1em 0.1em calc(var(--margin) * var(--square)); }
+  padding: 1em 1em 0.1em calc(var(--margin) * var(--square)); }
 
 .box.warning {
   background: var(--primary); }

css/latex.scss

@@ -634,7 +634,7 @@ table {
 
 .box /*, blockquote*/ {
   margin-left: calc(-1 * var(--margin) * var(--square));
-  padding: .8em .1em .1em calc(var(--margin) * var(--square));
+  padding: 1em 1em .1em calc(var(--margin) * var(--square));
 }
 
 .box.warning {

meta.yml

@@ -2,8 +2,8 @@ language: # available language options and their value for the html lang attribu
   de: de
   en: en
 title:
-  de: LaTeX-Wochenende der Fachschaft WIAI
+  de: LaTeX-Workshop der Fachschaft WIAI
-  en: Fachschaft WIAI LaTeX Weekend
+  en: LaTeX Workshop by Fachschaft WIAI
 task-name:
   de: Aufgabe
   en: Task

slides/basic-documents.de.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-3
+2
 
 @title
 Einfache Dokumente
@@ -320,7 +320,7 @@ Inhaltsverzeichnis
 @slide(layout=wide-task)
 
 @task-number
-3
+2
 
 @title
 Dokument und Text gliedern

slides/basic-documents.en.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-3
+2
 
 @title
 Basic documents
@@ -317,7 +317,7 @@ Table of contents
 @slide(layout=wide-task)
 
 @task-number
-3
+2
 
 @title
 Structure your document and text

slides/graphics.de.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-9
+8
 
 @title
 Grafiken
@@ -100,7 +100,7 @@ Alternativ:
 @slide(layout=task)
 
 @task-number
-9
+8
 
 @title
 Grafiken einfügen

slides/graphics.en.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-9
+8
 
 @title
 Graphics
@@ -100,7 +100,7 @@ Alternatively:
 @slide(layout=task)
 
 @task-number
-9
+8
 
 @title
 Inserting graphics

slides/intro.de.md

@@ -10,7 +10,7 @@ Ablauf des Workshops
 * Verstehen, wie LaTeX funktioniert
 * Einzelheiten später nachschlagen
 
-<div class="fragment">
+::: {.fragment}
 **Gliederung:**
 
 1. Was ist LaTeX?
@@ -19,7 +19,7 @@ Ablauf des Workshops
 4. Viele Features
 5. Literaturverwaltung
 6. Ausblick
-</div>
+:::
 
 @preview
 ![](svg/chapter-01/cover-script.jpeg)
@@ -42,10 +42,10 @@ Entstehung
 * Donald **Knuth**, 1977–1986: Textsatzsystem **TeX**<span class="bubble fragment">τεχ → /tɛç/</span> für The Art of Computer Programming
 * Leslie **Lamport**, ab 1980er: Softwarepaket **LaTeX** zur einfacheren Benutzung von TeX
 
-<div style="display: flex; justify-content: space-between; align-items: stretch;">
+:::{style="display: flex; justify-content: space-between; align-items: stretch;"}
-  <figure><img src="svg/chapter-01/knuth.jpg" style="height: 13em"/><figcaption>Donald Knuth</figcaption></figure>
+<figure><img src="svg/chapter-01/knuth.jpg" style="height: 13em"/><figcaption>Donald Knuth</figcaption></figure>
-  <figure><img src="svg/chapter-01/lamport.jpg" style="height: 13em"/><figcaption>Leslie Lamport</figcaption></figure>
+<figure><img src="svg/chapter-01/lamport.jpg" style="height: 13em"/><figcaption>Leslie Lamport</figcaption></figure>
-</div>
+:::
 
 @preview
 ![](svg/chapter-01/taocp.jpg)
@@ -91,12 +91,12 @@ WYSIWaaas?
 
 * Formatierung mit unmittelbarem optischen Feedback
 
-<div class="fragment">
+::: {.fragment}
 ### What You See Is What You Mean {data-category=LaTeX}
 
 * Trennung von Inhalt und Struktur
 * Formatierung erst am Ende ersichtlich
-</div>
+:::
 
 <p style="margin-top:calc(.25 * var(--square));">
     Bildquelle: <a href="https://xkcd.com/1341/">xkcd</a>

slides/intro.en.md

@@ -10,7 +10,7 @@ Procedure of this workshop
 * understanding how LaTeX works
 * details can be looked up later
 
-<div class="fragment">
+::: {.fragment}
 **Outline:**
 
 1. What is LaTeX?
@@ -19,7 +19,7 @@ Procedure of this workshop
 4. Lots of features
 5. Reference management
 6. Outlook
-</div>
+:::
 
 @preview
 ![](svg/chapter-01/cover-script.jpeg)
@@ -42,10 +42,10 @@ Origin
 * Donald **Knuth**, 1977–1986: typesetting system **TeX**<span class="bubble fragment" style="margin-top: -3em;">τεχ → /tɛç, tɛx, tɛk/</span> for The Art of Computer Programming
 * Leslie **Lamport**, from 1980s: software package **LaTeX** made TeX easier to use
 
-<div style="display: flex; justify-content: space-between; align-items: stretch;">
+:::{style="display: flex; justify-content: space-between; align-items: stretch;"}
-  <figure><img src="svg/chapter-01/knuth.jpg" style="height: 13em"/><figcaption>Donald Knuth</figcaption></figure>
+<figure><img src="svg/chapter-01/knuth.jpg" style="height: 13em"/><figcaption>Donald Knuth</figcaption></figure>
-  <figure><img src="svg/chapter-01/lamport.jpg" style="height: 13em"/><figcaption>Leslie Lamport</figcaption></figure>
+<figure><img src="svg/chapter-01/lamport.jpg" style="height: 13em"/><figcaption>Leslie Lamport</figcaption></figure>
-</div>
+:::
 
 @preview
 ![](svg/chapter-01/taocp.jpg)
@@ -91,12 +91,12 @@ WYSIWhat?
 
 * Formatting with immediate visual feedback
 
-<div class="fragment">
+::: {.fragment}
 ### What You See Is What You Mean {data-category=LaTeX}
 
 * Separation of content and structure
 * Formatting only visible afterwards
-</div>
+:::
 
 <p style="margin-top:calc(.25 * var(--square));">
     Image source: <a href="https://xkcd.com/1341/">xkcd</a>

slides/lists.de.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-7
+6
 
 @title
 Aufzählungen
@@ -81,7 +81,7 @@ Verschachtelte Listen
 @slide(layout=task)
 
 @task-number
-7
+6
 
 @title
 Aufzählungen einfügen

slides/lists.en.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-7
+6
 
 @title
 Enumerations
@@ -83,7 +83,7 @@ Nested lists
 @slide(layout=task)
 
 @task-number
-7
+6
 
 @title
 Adding enumerations

slides/literature.de.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-12
+11
 
 @title
 Literatur­verwaltung
@@ -96,7 +96,7 @@ Durch BibTeX wird LaTeX um einige Befehle zum Zitieren erweitert. Außerdem ben
 @slide(layout=wide-task)
 
 @task-number
-12
+11
 
 @title
 Ein Literaturverzeichnis erstellen und einfügen

slides/literature.en.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-12
+11
 
 @title
 Reference management
@@ -96,7 +96,7 @@ BibTeX adds some citation commands to LaTeX. In addition, we need the `natbib` p
 @slide(layout=wide-task)
 
 @task-number
-12
+11
 
 @title
 

slides/maths.de.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-8
+7
 
 @title
 Mathematische Formeln
@@ -81,7 +81,7 @@ Die Umgebung `align` erlaubt es, Gleichungen zum Beispiel am › =&hairsp
 @slide(layout=task-without-number)
 
 @task-number
-8a
+7a
 
 @title
 Formeln setzen
@@ -99,7 +99,7 @@ Setzt die folgenden Formeln in der Datei `exercises/maths/math-formulas.tex`.
 @slide(layout=task-without-number)
 
 @task-number
-8b
+7b
 
 @title
 Formeln setzen

slides/maths.en.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-8
+7
 
 @title
 Typesetting mathematics
@@ -83,7 +83,7 @@ The `align` environment permits us to align equations at certain positions like
 @slide(layout=task-without-number)
 
 @task-number
-8a
+7a
 
 @title
 Typesetting mathematics
@@ -102,7 +102,7 @@ Code up the following formulas in the file `exercises/maths/math-formulas.tex`.
 @slide(layout=task-without-number)
 
 @task-number
-8b
+7b
 
 @title
 Typesetting mathematics

slides/packages.de.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-14
+13
 
 @title
 Paket in Sicht!

slides/packages.en.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-14
+13
 
 @title
 Package in sight!

slides/project-structure.de.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-4
+3
 
 @title
 Komplexere Projekte
@@ -109,11 +109,11 @@ Dateipfade angeben <span class="emoji">👣</span>
 @content
 <p data-category="Beispiel">`main-exercises.tex` → `praeamble.tex`</p>
 
-<div class="fragment">
+::: {.fragment}
 `./praeamle.tex`
 
 Der **einfache Punkt »`.`«** bezieht sich bei relativen Pfaden auf den aktuellen Ordner (hier: `latex-script`). Er ist optional, es könnte also auch nur `praeamble.tex` geschrieben werden.
-</div>
+:::
 
 @preview
 ![](svg/chapter-04/relative-path-crop.svg)
@@ -130,9 +130,9 @@ Dateipfade angeben <span class="emoji">👣</span>
 @content
 <p data-category="Beispiel">`main-exercises.tex` → `basic-document-structure.tex` (in einem Unterordner)</p>
 
-<div class="fragment">
+::: {.fragment}
 `./content/basic-document-structure.tex`
-</div>
+:::
 
 @preview
 ![](svg/chapter-04/relative-path-subdir-crop.svg)
@@ -149,12 +149,14 @@ Dateipfade angeben <span class="emoji">👣</span>
 
 @content
 <p data-category="Beispiel">`basic-functionality.tex` → `graphics.raw.tex`</p>
-<p>(wenn `basic-functionality.tex` von `main-exercises.tex` importiert wird)</p>
 
-<div class="fragment">
+(wenn `basic-functionality.tex` von `main-exercises.tex` importiert wird)
-<pre>./exercises/graphics/graphics.raw.tex</pre>
+
+::: {.fragment}
+`./exercises/graphics/graphics.raw.tex`
+
 <p data-category="Achtung!">Pfade sind immer relativ zum Wurzelelement, auch wenn dieses noch andere Dateien einbindet, die wiederum andere Dateien referenzieren.</p>
-</div>
+:::
 
 @preview
 ![](svg/chapter-04/relative-path-transitive-crop.svg)
@@ -178,7 +180,7 @@ Kompilieren des Projekts
 @slide(layout=task)
 
 @task-number
-4
+3
 
 @title
 Ein strukturiertes Projekt

slides/project-structure.en.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-4
+3
 
 @title
 Complex projects
@@ -108,11 +108,11 @@ Specifying file paths <span class="emoji">👣</span>
 @content
 <p data-category="Example">`main-exercises.tex` → `praeamble.tex`</p>
 
-<div class="fragment">
+::: {.fragment}
 `./praeamble.tex`
 
 A **single dot ‘`.`’** represents the current folder (in this case: `latex-script`). It is optional, you could also write `praeamble.tex` here.
-</div>
+:::
 
 @preview
 ![](svg/chapter-04/relative-path-english-crop.svg)
@@ -146,12 +146,14 @@ Specifying file paths <span class="emoji">👣</span>
 
 @content
 <p data-category="Example">`basic-functionality.tex` → `graphics.raw.tex`</p>
-<p>(`basic-functionality.tex` is imported into `main-exercises.tex`)</p>
 
-<div class="fragment">
+(`basic-functionality.tex` is imported into `main-exercises.tex`)
-<pre>./exercises/graphics/graphics.raw.tex</pre>
+
+::: {.fragment}
+`./exercises/graphics/graphics.raw.tex`
+
 <p data-category="Caution!">Paths are always relative to the root document that imports other files as fragments.</p>
-</div>
+:::
 
 @preview
 ![](svg/chapter-04/relative-path-transitive-english-crop.svg)
@@ -175,7 +177,7 @@ Compiling the project
 @slide(layout=task)
 
 @task-number
-4
+3
 
 @title
 A structured project

slides/references-and-footnotes.de.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-11
+10
 
 @title
 Referenzen und Fußnoten
@@ -139,7 +139,7 @@ Dinge, die zu beachten sind
 @slide(layout=task)
 
 @task-number
-11a
+10a
 
 @title
 Fußnoten einfügen
@@ -153,7 +153,7 @@ Fußnoten einfügen
 @slide(layout=task)
 
 @task-number
-11b
+10b
 
 @title
 Referenzen einfügen

slides/references-and-footnotes.en.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-11
+10
 
 @title
 References and footnotes
@@ -142,7 +142,7 @@ Things to consider
 @slide(layout=task)
 
 @task-number
-11a
+10a
 
 @title
 Inserting footnotes
@@ -155,7 +155,7 @@ Inserting footnotes
 @slide(layout=task)
 
 @task-number
-11b
+10b
 
 @title
 Inserting references

slides/source-code-listings.de.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-13
+12
 
 @title
 Quelltext-Listings
@@ -92,7 +92,7 @@ Weitere Materialien
 @slide(layout=task)
 
 @task-number
-13
+12
 
 @title
 Listings

slides/source-code-listings.en.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-13
+12
 
 @title
 Source code listings
@@ -92,7 +92,7 @@ Further resources
 @slide(layout=task)
 
 @task-number
-13
+12
 
 @title
 Listings

slides/special-characters.de.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-5
+4
 
 @title
 Sonderzeichen
@@ -109,18 +109,18 @@ Sonderzeichen & Symbole
 @slide(layout=task)
 
 @task-number
-5
+4
 
 @title
 Sonderzeichen einfügen
 
 @content
-<div class="box warning">
+:::{.box .warning}
 Kompiliert von nun an immer die Datei `main-exercises.tex`, um eure Änderungen im Übungsskript zu sehen (in diesem Fall im Abschnitt zu Übung 5).
-</div>
+:::
 
-*	Ersetzt die Leerzeichen innerhalb der Abkürzungen in  `exercises/special-characters.tex` durch **schmale Leerzeichen**.
+* 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.
+* 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/special-characters.en.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-5
+4
 
 @title
 Special characters
@@ -106,18 +106,18 @@ Special characters & symbols
 @slide(layout=task)
 
 @task-number
-5
+4
 
 @title
 Insert special characters
 
 @content
-<div class="box warning">
+:::{.box .warning}
 From now on, compile the file `main-exercises.tex` to see your changes appear in the exercise script (in this task, see exercise 5).
-</div>
+:::
 
-*	Replace the spaces in `exercises/special-characters.tex` within the abbreviations (“e.&thinsp;g.”, “i.&thinsp;a.”) by **thin spaces**.
+* 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.
+* 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.
 
 

slides/support.de.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-15
+14
 
 @title
 Hilfe und Informationen

slides/support.en.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-15
+14
 
 @title
 Getting help and information

slides/tables.de.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-10
+9
 
 @title
 Tabellen
@@ -133,7 +133,7 @@ Der [Tables Generator](https://tablesgenerator.com/) ist ein wunderbares Werkzeu
 @slide(layout=task)
 
 @task-number
-10
+9
 
 @title
 Tabellen setzen

slides/tables.en.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-10
+9
 
 @title
 Tables
@@ -133,7 +133,7 @@ The [Tables Generator](https://tablesgenerator.com/) is a wonderful tool to quic
 @slide(layout=task)
 
 @task-number
-10
+9
 
 @title
 Typesetting tables

slides/text-markup.de.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-6
+5
 
 @title
 Text­auszeichnung
@@ -43,7 +43,7 @@ Optische Auszeichnungsmöglichkeiten:
 Better Call LaTeX!
 
 @content
-<div class="box warning">
+:::{.box .warning}
 **Ein gutgemeinter Rat**
 
 Konsistentes Aussehen über das gesamte Dokument hinweg gewünscht?
@@ -51,7 +51,7 @@ Konsistentes Aussehen über das gesamte Dokument hinweg gewünscht?
 Voreinstellungen von LaTeX zur Schriftgröße verschiedener Textelemente (Titel, Fließtext, Fußnoten) vertrauen!
 
 Das heißt im Umkehrschluss: Möglichst wenig manuell an Schriftgrößen herumschrauben.
-</div>
+:::
 
 
 @slide(layout=content-and-preview)
@@ -86,7 +86,7 @@ wiedergibt.
 @slide(layout=task)
 
 @task-number
-6
+5
 
 @title
 Text hervorheben

slides/text-markup.en.md

@@ -1,7 +1,7 @@
 @slide(layout=chapter-slide)
 
 @number
-6
+5
 
 @title
 Text Markup
@@ -42,7 +42,7 @@ Furthermore, optical highlighting can be used.
 Better Call LaTeX!
 
 @content
-<div class="box warning">
+:::{.box .warning}
 **Some well-meaning advice**
 
 You want the entire document to look consistent?
@@ -50,7 +50,7 @@ You want the entire document to look consistent?
 Trust LaTeX’s defaults (font sizes of title, paragraphs, footnotes, etc.)!
 
 This conversely means: Avoid fiddling around with font sizes manually.
-</div>
+:::
 
 
 @slide(layout=content-and-preview)
@@ -83,7 +83,7 @@ The `hyperref` package provides an `\url{}` command that reproduces URLs
 @slide(layout=task)
 
 @task-number
-6
+5
 
 @title
 Emphasising text