diff --git a/css/theme/latex.css b/css/theme/latex.css index 74c9dcc..a80b4ff 100644 --- a/css/theme/latex.css +++ b/css/theme/latex.css @@ -5,9 +5,13 @@ section { width: 100vw; padding: 0 !important; } +* { + line-height: inherit; } + /* config */ :root { - --secondary: #c8ceda; } + --secondary: #c8ceda; + --margin: 0.1; } /* basic layout */ :root { @@ -72,6 +76,36 @@ body { max-width: 90%; max-height: 90%; box-shadow: 0.2em 0.2em 0.5em 0 rgba(0, 0, 0, 0.3); } + body .layout-two-columns { + display: grid; + min-height: 100vh; + max-height: 100vh; + min-width: 100vw; + max-width: 100vw; + overflow: auto; + grid-template-rows: auto auto auto 1fr; + grid-template-columns: var(--square); + grid-template-areas: "title" "column1" "column2" "."; + background: var(--secondary); } + @media screen and (min-aspect-ratio: 1 / 1) { + body .layout-two-columns { + grid-template-rows: auto calc(0.18 * var(--square)) calc(0.82 * var(--square)) auto; + grid-template-columns: var(--square) var(--square); + grid-template-areas: " . . " " title title " "column1 column2" " . . "; } } + @media screen and (min-aspect-ratio: 2 / 1) { + body .layout-two-columns { + grid-template-rows: calc(0.18 * var(--square)) calc(0.82 * var(--square)); + grid-template-columns: auto var(--square) var(--square) auto; + grid-template-areas: ". title title ." ". column1 column2 ."; } } + body .layout-two-columns .layout-title { + grid-area: title; + background: white; } + body .layout-two-columns .layout-column-one { + grid-area: column1; + background: white; } + body .layout-two-columns .layout-column-two { + grid-area: column2; + background: white; } /* content layout */ @font-face { @@ -99,62 +133,111 @@ body { margin: 0; line-height: 1.2em; } -.layout-content-and-preview, -.layout-content-only { - --margin: 0.1; } - .layout-content-and-preview .layout-content, - .layout-content-only .layout-content { - overflow: auto; - padding: calc(var(--margin) * var(--square)); } - .layout-content-and-preview .layout-content *:first-child, - .layout-content-only .layout-content *:first-child { - margin-top: 0; } - .layout-content-and-preview .layout-content .layout-title, - .layout-content-only .layout-content .layout-title { - padding: calc(0.3 * var(--margin) * var(--square)) 0; +.layout-content-and-preview .layout-content, +.layout-content-only .layout-content { + overflow: auto; + padding: calc(var(--margin) * var(--square)); } + .layout-content-and-preview .layout-content *:first-child, + .layout-content-only .layout-content *:first-child { + margin-top: 0; } + .layout-content-and-preview .layout-content .layout-title, + .layout-content-only .layout-content .layout-title { + padding: calc(0.3 * var(--margin) * var(--square)) 0; + line-height: 1.15em; } + .layout-content-and-preview .layout-content .layout-title h2, + .layout-content-only .layout-content .layout-title h2 { + margin: 0; line-height: 1.15em; } - .layout-content-and-preview .layout-content .layout-title h2, - .layout-content-only .layout-content .layout-title h2 { - margin: 0; } - .layout-content-and-preview .layout-content ul, - .layout-content-only .layout-content ul { - list-style-type: none; - padding-left: 0; - position: relative; } - .layout-content-and-preview .layout-content ul li::before, - .layout-content-only .layout-content ul 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-only .layout-content ul ul { - margin-left: calc(0.33 * 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)); - padding-left: calc(var(--margin) * var(--square)); - line-height: 1.2em; - position: relative; - overflow: hidden; } - .layout-content-and-preview .layout-content pre::before, - .layout-content-only .layout-content pre::before { - content: attr(data-sourcefile); - position: absolute; - text-align: right; - color: var(--secondary); - top: .85em; - width: 100%; - left: calc(-1 * var(--square) + 1.2 * var(--margin) * var(--square)); - transform-origin: top right; - transform: rotate(-90deg); } - .layout-content-and-preview .layout-content code, - .layout-content-only .layout-content code { - font-size: 0.9em; - font-family: 'Fira Code'; } - .layout-content-and-preview .layout-content code.hljs, - .layout-content-only .layout-content code.hljs { - padding: .3em 0; } + .layout-content-and-preview .layout-content ul, + .layout-content-only .layout-content ul { + list-style-type: none; + padding-left: 0; + position: relative; } + .layout-content-and-preview .layout-content ul li::before, + .layout-content-only .layout-content ul 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-only .layout-content ul ul { + margin-left: calc(0.33 * 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)); + padding-left: calc(var(--margin) * var(--square)); + line-height: 1.2em; + position: relative; + overflow: hidden; } + .layout-content-and-preview .layout-content pre::before, + .layout-content-only .layout-content pre::before { + content: attr(data-sourcefile); + position: absolute; + text-align: right; + color: var(--secondary); + top: .85em; + width: 100%; + left: calc(-1 * var(--square) + 1.2 * var(--margin) * var(--square)); + transform-origin: top right; + transform: rotate(-90deg); } + .layout-content-and-preview .layout-content pre code, + .layout-content-only .layout-content pre code { + padding: .3em 0; } + .layout-content-and-preview .layout-content code, + .layout-content-only .layout-content code { + font-size: 0.9em; + font-family: 'Fira Code'; } + +.layout-two-columns .layout-title { + padding: calc(0.3 * var(--margin) * var(--square)) calc(var(--margin) * var(--square)); } + .layout-two-columns .layout-title h2 { + line-height: 1.15em; } + +.layout-two-columns .layout-column-one, +.layout-two-columns .layout-column-two { + padding: calc(var(--margin) * var(--square)); + padding-top: 0; } + .layout-two-columns .layout-column-one *:first-child, + .layout-two-columns .layout-column-two *:first-child { + margin-top: 0; } + .layout-two-columns .layout-column-one ul, + .layout-two-columns .layout-column-two ul { + list-style-type: none; + padding-left: 0; + position: relative; } + .layout-two-columns .layout-column-one ul li::before, + .layout-two-columns .layout-column-two ul li::before { + content: '▪'; + color: var(--secondary); + position: absolute; + left: calc(-0.33 * var(--margin) * var(--square)); } + .layout-two-columns .layout-column-one ul ul, + .layout-two-columns .layout-column-two ul ul { + margin-left: calc(0.33 * var(--margin) * var(--square)); } + .layout-two-columns .layout-column-one pre, + .layout-two-columns .layout-column-two pre { + margin: 0 calc(-1 * var(--margin) * var(--square)); + line-height: 1.2em; + position: relative; + overflow: hidden; } + .layout-two-columns .layout-column-one pre::before, + .layout-two-columns .layout-column-two pre::before { + content: attr(data-sourcefile); + position: absolute; + text-align: right; + color: var(--secondary); + top: .85em; + width: 100%; + left: calc(-1 * var(--square) + 1.2 * var(--margin) * var(--square)); + transform-origin: top right; + transform: rotate(-90deg); } + .layout-two-columns .layout-column-one pre code, + .layout-two-columns .layout-column-two pre code { + padding: 0.3em calc(var(--margin) * var(--square)); } + .layout-two-columns .layout-column-one code, + .layout-two-columns .layout-column-two code { + font-size: 0.9em; + font-family: 'Fira Code'; } .layout.layout-chapter-heading { height: 100vh; @@ -176,3 +259,52 @@ h1 { vertical-align: bottom; max-width: var(--square); padding: 0 calc(var(--margin) * var(--square)) 0.5em; } + +h2[data-category]::before { + content: attr(data-category); + font-size: .7em; + font-variant: small-caps; + text-transform: lowercase; + background: black; + color: white; + padding: .1em .5em; + display: inline-block; + vertical-align: baseline; + letter-spacing: .1em; + position: relative; + margin-left: calc(-1 * var(--margin) * var(--square)); + padding-left: calc(var(--margin) * var(--square)); + margin-right: .5em; } + +img { + width: auto; + max-width: 100%; } + +table { + width: calc(var(--square) - var(--margin) * var(--square)); + margin-left: calc(-1 * var(--margin) * var(--square)); + border-spacing: 0; } + table tr:nth-child(2n-1) { + background: var(--secondary); } + table tr > *:first-child { + padding-left: calc(var(--margin) * var(--square)); } + table th, table td { + text-align: left; + vertical-align: top; + padding: .3em 0; } + +.box, blockquote { + margin-left: calc(-1 * var(--margin) * var(--square)); + padding: 0.8em 0.1em 0.1em calc(var(--margin) * var(--square)); + background: var(--secondary); } + +.box.warning { + background: #ffffaa; } + +blockquote { + text-indent: -.55em; + padding-bottom: .8em; } + blockquote::before { + content: '»'; } + blockquote cite::before { + content: ' – '; } diff --git a/css/theme/source/latex.scss b/css/theme/source/latex.scss index 896b071..faa3f0d 100644 --- a/css/theme/source/latex.scss +++ b/css/theme/source/latex.scss @@ -4,10 +4,14 @@ section { width: 100vw; padding: 0 !important; } +* { + line-height: inherit; +} /* config */ :root { --secondary: #c8ceda; + --margin: 0.1; } /* basic layout */ @@ -106,6 +110,54 @@ body { box-shadow: .2em .2em .5em 0 rgba(0, 0, 0, .3); } } + + .layout-two-columns { + display: grid; + min-height: 100vh; + max-height: 100vh; + min-width: 100vw; + max-width: 100vw; + overflow: auto; + grid-template-rows: auto auto auto 1fr; + grid-template-columns: var(--square); + grid-template-areas: + "title" + "column1" + "column2" + "."; + background: var(--secondary); + @media screen and (min-aspect-ratio: 1/1) { + grid-template-rows: auto calc(0.18 * var(--square)) calc(0.82 * var(--square)) auto; + grid-template-columns: var(--square) var(--square); + grid-template-areas: + " . . " + " title title " + "column1 column2" + " . . "; + } + @media screen and (min-aspect-ratio: 2/1) { + grid-template-rows: calc(0.18 * var(--square)) calc(0.82 * var(--square)); + grid-template-columns: auto var(--square) var(--square) auto; + grid-template-areas: + ". title title ." + ". column1 column2 ."; + } + + .layout-title { + grid-area: title; + background: white; + } + + .layout-column-one { + grid-area: column1; + background: white; + } + + .layout-column-two { + grid-area: column2; + background: white; + } + } } /* content layout */ @@ -139,8 +191,6 @@ body { .layout-content-and-preview, .layout-content-only { - --margin: 0.1; - .layout-content { overflow: auto; padding: calc(var(--margin) * var(--square)); @@ -155,6 +205,7 @@ body { h2 { margin: 0; + line-height: 1.15em; } } @@ -190,14 +241,74 @@ body { transform-origin: top right; transform: rotate(-90deg); } + code { + padding: .3em 0; + } } code { font-size: 0.9em; font-family: 'Fira Code'; - &.hljs { - padding: .3em 0; + } + } +} + +.layout-two-columns { + .layout-title { + padding: calc(0.3 * var(--margin) * var(--square)) calc(var(--margin) * var(--square)); + h2 { + line-height: 1.15em; + } + } + + .layout-column-one, + .layout-column-two { + padding: calc(var(--margin) * var(--square)); + padding-top: 0; + + *:first-child { + margin-top: 0; + } + + ul { + list-style-type: none; + padding-left: 0; + position: relative; + li::before { + content: '▪'; + color: var(--secondary); + position: absolute; + left: calc(-0.33 * var(--margin) * var(--square)); } + ul { + margin-left: calc(0.33 * var(--margin) * var(--square)); + } + } + + pre { + margin: 0 calc(-1 * var(--margin) * var(--square)); + line-height: 1.2em; + position: relative; + overflow: hidden; + &::before { + content: attr(data-sourcefile); + position: absolute; + text-align: right; + color: var(--secondary); + top: .85em; + width: 100%; + left: calc(-1 * var(--square) + 1.2 * var(--margin) * var(--square)); + transform-origin: top right; + transform: rotate(-90deg); + } + code { + padding: .3em calc(var(--margin) * var(--square)); + } + } + + code { + font-size: 0.9em; + font-family: 'Fira Code'; } } } @@ -226,3 +337,66 @@ h1 { max-width: var(--square); padding: 0 calc(var(--margin) * var(--square)) .5em; } + +h2[data-category]::before { + content: attr(data-category); + font-size: .7em; + font-variant: small-caps; + text-transform: lowercase; + background: black; + color: white; + padding: .1em .5em; + display: inline-block; + 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; +} + +img { + width: auto; + max-width: 100%; +} + +table { + width: calc(var(--square) - var(--margin) * var(--square)); + margin-left: calc(-1 * var(--margin) * var(--square)); + border-spacing: 0; + tr:nth-child(2n-1) { + background: var(--secondary); + } + tr>*:first-child { + padding-left: calc(var(--margin) * var(--square)); + } + th, td { + text-align: left; + vertical-align: top; + padding: .3em 0; + } +} + +.box, blockquote { + margin-left: calc(-1 * var(--margin) * var(--square)); + padding: .8em .1em .1em calc(var(--margin) * var(--square)); + background: var(--secondary); +} +.box.warning { + background: #ffffaa; +} +blockquote { + text-indent: -.55em; + padding-bottom: .8em; + &::before { + content: '»'; + } + &::after { + // content: '«'; + } + cite::before { + content: ' – ' + } +} diff --git a/sections/german/02/02.md b/sections/german/02/02.md index c0f64fc..cc75f70 100644 --- a/sections/german/02/02.md +++ b/sections/german/02/02.md @@ -1,5 +1,5 @@
\section{Dies ist Abschnitt1}
Hier ein Absatz zum
Inhalt von Abschnitt 1.
+ 
\input{filename.tex}
\include{filename}
+
+ Der einfache Punkt bezieht sich bei relativen Pfaden auf den Ordner, in dem die Ausgangsdatei liegt (hier: LaTeX-Tut).
+
+
+ Zwei Punkte bezeichnen den Elternordner des aktuellen Ordners (hier: Dokumente, der Elternordner von LaTeX-Tut).
+
+ Wird das Gesamtdokument kompilieren oder nicht?
+Ja, es kompiliert!
+ Ein einfacher weg, um die Hauptdatei noch übersichtlicher zu halten.
+ | Bezeichnung | Befehl |
|---|---|
| fett (bold face) | \textbf{Very Important Stuff} |
| kursiv (italics) | \textit{Very Important Stuff} |
| Kapitälchen (small capitals) | \textsc{Very Important Stuff} |
| dicktengleich (teletypefont) | \texttt{Very Important Stuff} |
| geneigt (slanted) | \textsl{Very Important Stuff) |
| unterstrichen | \underline{Very Important Stuff} |
+ Problemlos möglich:
+\textbf{Very \textit{Important Stuff}}
+ Innerhalb kursiver Hervorhebung kann man auch den Befehl `\emph{text}` verwenden, um Passagen von der Kursivierung auszunehmen:
+\texit{Very \emph{Important} Stuff}
+ Ein gutgemeinter Rat: Better Call ~~Saul~~ LaTeX!
+Vgl. Abschnitt zu Syntax und Semantik:
+ 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
\documentclass[12pt]{article}
+ Syntax:
+{\fontsize ein Textabschnitt}
+ Zur Auswahl: immer relativ zu normalsize
+{\tiny Wenn}
+{\footnotesize du}
+{\small das}
+{\normalsize lesen}
+{\large kannst,}
+{\Large brauchst}
+{\LARGE du}
+{\huge keine}
+{\Huge Brille.}
+
+ \fontsize{}{)\selectfont
+ Beispiel:
+Das ist Text in normaler Schriftgröße.
----
-
-#### Hervorhebungen schachteln
-Innerhalb kursiver Hervorhebung kann man auch den Befehl `\emph{text}` verwenden, um Passagen von der Kursivierung auszunehmen:
-```tex
-\texit{Very \emph{Important} Stuff}
-```
-$\texit{Very \emph{Important} Stuff}$
-
----
-
-### Schriftgröße
-
----
-
-#### Ein gutgemeinter Rat: Better Call ~~Saul~~ LaTeX!
-Vgl. Abschnitt zu Syntax und Semantik:
-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
-
----
-
-#### normalsize
-
-Wird für den Fließtext verwendet.
-Standard: 10pt.
-
-Kann im Header folgendermaßen verwendet werden:
-```tex
-\documentclass[12pt]{article}
-```
-
----
-
-#### Voreingestellte Schriftgrößen
-Syntax:
-```tex
-{\fontsize ein Textabschnitt}
-```
-
-Zur Auswahl: immer relativ zu normalsize
-```tex
-{\tiny Größe}
-{\footnotesize Größe}
-{\small Größe}
-{\normalsize Größe}
-{\large Größe}
-{\Large Größe}
-{\LARGE Größe}
-{\huge Größe}
-{\Huge Größe}
-```
-
-
-
----
-
-#### Voreinstellungen
-
-Zur Auswahl:
-```tex
- {\tiny Wenn}
- {\footnotesize du}
- {\small das}
- {\normalsize lesen}
- {\large kannst,}
- {\Large brauchst}
- {\LARGE du}
- {\huge keine}
- {\Huge Brille.}
-```
-
-
-
----
-
-#### Manuelle Konfiguration
-Syntax:
-```tex
-\fontsize{}{)\selectfont
-```
-
-Beispiel:
-```tex
-Das ist Text in normaler Schriftgröße.
-
\fontsize{1cm}{1.25cm}\selectfont
-Das ist eine Textpassage in wirklich riesiger Schrift.
-
+Das ist eine Textpassage in
+wirklich riesiger Schrift.
+
\normalsize
-Back to normal.
-```
-
-
+Back to normal.
+
+ \%
\$
\&
-\{ \}
-```
+\{ \}
+ Bei anderen Sonderzeichen gibt es eigene Befehle:
+\textbackslash % Backslash
\textasciitilde % Tilde
-\copyright % Copyrightzeichen
-```
-
-$\textbackslash$
-$\textasciitilde$
-$\copyright$
+\copyright % Copyrightzeichen
+ Einige Sonderzeichen und Symbole funktionieren nur in einer Mathematikumgebung:
+% griechische Buchstaben
$\pi \Sigma \delta$
-$\dagger$
+
+% Kreuz
+$\dagger$
+ Textsatz-System % in zusammengesetzen Wörter
+Ein- und Ausgabe % als Ergänzungsstrich
+ LaTeX ist -- wie Typograf*innen bestätigen können -- ein exzellentes Textsatzsystem. % für Einschübe
+ Mit LaTeX kann man sogar Gedichte und Kochrezepte setzen -- der Fantasie sind keine Grenzen gesetzt. % dort, wo in der gesprochenen Sprache eine Pause gemacht wird
+ eurosym, Befehl \euro)
-
-```tex
-LaTeX zu verwenden kostet 0 \euro.
-```
-
-LaTeX zu verwenden kostet 0 €.
+eurosym\euroLaTeX zu verwenden kostet 0 \euro.
+ Literatur ist nichts für Bürokraten,+
sie sollte nicht verwaltet werden,
sondern gelesen und gelebt.« Zarathustra