Add Sass compilation instructions to README

Replace HTML <div>s with markdown syntax
Fix box padding
2025-05-01 22:09:13 +02:00 · 2025-05-01 22:06:54 +02:00 · 2025-05-01 22:06:38 +02:00 · 2025-05-01 21:46:40 +02:00 · 2025-05-01 21:37:05 +02:00 · 2025-05-01 21:34:56 +02:00
33 changed files with 118 additions and 103 deletions
--- a/README.md
+++ b/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
-$ pip3 install -r requirements.txt
+cd latex-wochenende/onpoint
+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
+```
--- a/css/latex.css
+++ b/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); }
--- a/css/latex.css.map
+++ b/css/latex.css.map
--- a/css/latex.scss
+++ b/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 {
--- a/meta.yml
+++ b/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
-  en: Fachschaft WIAI LaTeX Weekend
+  de: LaTeX-Workshop der Fachschaft WIAI
+  en: LaTeX Workshop by Fachschaft WIAI
 task-name:
  de: Aufgabe
  en: Task
--- a/slides/basic-documents.de.md
+++ b/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
--- a/slides/basic-documents.en.md
+++ b/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
--- a/slides/graphics.de.md
+++ b/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
--- a/slides/graphics.en.md
+++ b/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
--- a/slides/intro.de.md
+++ b/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/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>
--- a/slides/intro.en.md
+++ b/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/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>
--- a/slides/lists.de.md
+++ b/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
--- a/slides/lists.en.md
+++ b/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
--- a/slides/literature.de.md
+++ b/slides/literature.de.md
@ -1,7 +1,7 @@
@slide(layout=chapter-slide)

@number
-12
+11

@title
 Literatur&shy;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
--- a/slides/literature.en.md
+++ b/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

--- a/slides/maths.de.md
+++ b/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;=&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
--- a/slides/maths.en.md
+++ b/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
--- a/slides/packages.de.md
+++ b/slides/packages.de.md
@ -1,7 +1,7 @@
@slide(layout=chapter-slide)

@number
-14
+13

@title
 Paket in Sicht!
--- a/slides/packages.en.md
+++ b/slides/packages.en.md
@ -1,7 +1,7 @@
@slide(layout=chapter-slide)

@number
-14
+13

@title
 Package in sight!
--- a/slides/project-structure.de.md
+++ b/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">
-<pre>./exercises/graphics/graphics.raw.tex</pre>
+(wenn `basic-functionality.tex` von `main-exercises.tex` importiert wird)
+
+::: {.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
--- a/slides/project-structure.en.md
+++ b/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">
-<pre>./exercises/graphics/graphics.raw.tex</pre>
+(`basic-functionality.tex` is imported into `main-exercises.tex`)
+
+::: {.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
--- a/slides/references-and-footnotes.de.md
+++ b/slides/references-and-footnotes.de.md
@ -1,7 +1,7 @@
@slide(layout=chapter-slide)

@number
-11
+10

@title
 Referenzen und&nbsp;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
--- a/slides/references-and-footnotes.en.md
+++ b/slides/references-and-footnotes.en.md
@ -1,7 +1,7 @@
@slide(layout=chapter-slide)

@number
-11
+10

@title
 References and&nbsp;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
--- a/slides/source-code-listings.de.md
+++ b/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
--- a/slides/source-code-listings.en.md
+++ b/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
--- a/slides/special-characters.de.md
+++ b/slides/special-characters.de.md
@ -1,7 +1,7 @@
@slide(layout=chapter-slide)

@number
-5
+4

@title
 Sonderzeichen
@ -109,15 +109,15 @@ 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**.
 * Die Bindestriche bei den Öffnungszeiten der ERBA sollen durch **Halbgeviertstriche** ersetzt werden, optional mit schmalen Leerzeichen außenrum.
--- a/slides/special-characters.en.md
+++ b/slides/special-characters.en.md
@ -1,7 +1,7 @@
@slide(layout=chapter-slide)

@number
-5
+4

@title
 Special characters
@ -106,15 +106,15 @@ 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 hyphens separating the opening hours by **en dashes** (`--`), optionally surrounded by thin spaces.
--- a/slides/support.de.md
+++ b/slides/support.de.md
@ -1,7 +1,7 @@
@slide(layout=chapter-slide)

@number
-15
+14

@title
 Hilfe und Informationen
--- a/slides/support.en.md
+++ b/slides/support.en.md
@ -1,7 +1,7 @@
@slide(layout=chapter-slide)

@number
-15
+14

@title
 Getting help and&nbsp;information
--- a/slides/tables.de.md
+++ b/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
--- a/slides/tables.en.md
+++ b/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
--- a/slides/text-markup.de.md
+++ b/slides/text-markup.de.md
@ -1,7 +1,7 @@
@slide(layout=chapter-slide)

@number
-6
+5

@title
 Text&shy;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
--- a/slides/text-markup.en.md
+++ b/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
Author	SHA1	Message	Date
Florian	3c6b58f871	Add Sass compilation instructions to README	2025-05-01 22:09:13 +02:00
Florian	ea48fddc35	Replace HTML <div>s with markdown syntax	2025-05-01 22:06:54 +02:00
Florian	6a923541a9	Fix box padding	2025-05-01 22:06:38 +02:00
Florian	3dc80857fc	Change task numbers	2025-05-01 21:46:40 +02:00
Florian	84f948b599	Change title	2025-05-01 21:37:05 +02:00
Florian	41e84b7d98	Change chapter numbers	2025-05-01 21:34:56 +02:00