Move pages to extra

css/latex.css

@@ -3,13 +3,16 @@
 section {
   min-height: 100vh;
   width: 100vw;
-  padding: 0 !important; }
+  padding: 0 !important;
+}
 
 * {
-  line-height: inherit; }
+  line-height: inherit;
+}
 
 input {
-  font-size: inherit; }
+  font-size: inherit;
+}
 
 /* config */
 :root {
@@ -18,29 +21,39 @@ input {
   --secondary: #bbd6ec;
   --secondary-dark: #3f5d75;
   --secondary-light: #eaf2f9;
-  --margin: 0.1; }
+  --margin: 0.1;
+}
 :root:lang(de) {
-    --opening-double-quote: '»';
+  --opening-double-quote: "»";
-    --closing-double-quote: '«'; }
+  --closing-double-quote: "«";
+}
 :root:lang(en) {
-    --opening-double-quote: '“';
+  --opening-double-quote: "“";
-    --closing-double-quote: '”'; }
+  --closing-double-quote: "”";
+}
 
 /* basic layout */
 :root {
   --square: 100vw;
-  overflow: hidden; }
+  overflow: hidden;
+}
 @media (min-aspect-ratio: 1/1) {
   :root {
-      --square: 50vw; } }
+    --square: 50vw;
+  }
+}
 @media (min-aspect-ratio: 2/1) {
   :root {
-      --square: 100vh; } }
+    --square: 100vh;
+  }
+}
 
 body {
-  font-size: calc(0.035 * var(--square)); }
+  font-size: calc(0.035 * var(--square));
+}
 body article {
-    position: relative; }
+  position: relative;
+}
 body .layout-content-and-preview,
 body .layout-content-only,
 body .layout-preview-only,
@@ -50,76 +63,95 @@ body {
   max-height: 100vh;
   min-width: 100vw;
   max-width: 100vw;
-    overflow: auto; }
+  overflow: auto;
+}
 body .layout-content-and-preview {
   grid-template-rows: var(--square) auto;
   grid-template-columns: auto;
   grid-template-areas: "content" "preview";
-    background: linear-gradient(to bottom, white 0%, white var(--square), var(--secondary) var(--square), var(--secondary) var(--square)); }
+  background: linear-gradient(to bottom, var(--background, white) 0%, var(--background, white) var(--square), var(--secondary) var(--square), var(--secondary) var(--square));
+}
 @media (min-aspect-ratio: 1/1) {
   body .layout-content-and-preview {
     grid-template-rows: auto var(--square) auto;
     grid-template-columns: var(--square) auto;
     grid-template-areas: "   .    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) {
   body .layout-content-and-preview {
     grid-template-rows: var(--square);
     grid-template-columns: var(--square) auto;
-        grid-template-areas: "content preview"; } }
+    grid-template-areas: "content preview";
+  }
+}
 body .layout-content-only {
   grid-template-rows: var(--square) auto;
   grid-template-columns: var(--square);
   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) {
   body .layout-content-only {
     grid-template-rows: auto var(--square) auto;
     grid-template-columns: auto var(--square) auto;
     grid-template-areas: ".    .    ." ". content ." ".    .    .";
-        background: linear-gradient(to right, var(--secondary) 0%, var(--secondary) calc((100% - var(--square)) / 2), white calc((100% - var(--square)) / 2), white calc(100% - (100% - var(--square)) / 2), var(--secondary) calc(100% - (100% - var(--square)) / 2), var(--secondary) 100%); } }
+    background: linear-gradient(to right, var(--secondary) 0%, var(--secondary) calc((100% - var(--square)) / 2), var(--background, white) calc((100% - var(--square)) / 2), var(--background, white) calc(100% - (100% - var(--square)) / 2), var(--secondary) calc(100% - (100% - var(--square)) / 2), var(--secondary) 100%);
+  }
+}
 body .layout-preview-only {
   grid-template-rows: auto;
   grid-template-columns: auto;
   grid-template-areas: "preview";
-    background: var(--secondary); }
+  background: var(--secondary);
+}
 body .layout-wide-content {
-    background: white;
+  background: var(--background, white);
   grid-template-rows: min-content auto;
   grid-template-columns: var(--square);
-    grid-template-areas: "content" "   .   "; }
+  grid-template-areas: "content" "   .   ";
+}
 @media (min-aspect-ratio: 1/1) {
   body .layout-wide-content {
     grid-template-rows: auto var(--square) auto;
     grid-template-columns: calc(2 * var(--square));
-        grid-template-areas: "   .   " "content" "   .   "; } }
+    grid-template-areas: "   .   " "content" "   .   ";
+  }
+}
 @media (min-aspect-ratio: 2/1) {
   body .layout-wide-content {
     grid-template-rows: auto var(--square) auto;
     grid-template-columns: auto calc(2 * var(--square)) auto;
     grid-template-areas: ".    .    ." ". content ." ".    .    .";
-        background: linear-gradient(to right, var(--secondary) 0%, var(--secondary) calc((100% - 2 * var(--square)) / 2), white calc((100% - 2 * var(--square)) / 2), white calc(100% - (100% - 2 * var(--square)) / 2), var(--secondary) calc(100% - (100% - 2 * var(--square)) / 2), var(--secondary) 100%); } }
+    background: linear-gradient(to right, var(--secondary) 0%, var(--secondary) calc((100% - 2 * var(--square)) / 2), var(--background, white) calc((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%);
+  }
+}
 body .layout-content {
-    background: white;
+  background: var(--background, white);
   grid-area: content;
-    position: relative; }
+  position: relative;
+}
 body .layout-content .chapter-number {
-      color: lightgray; }
+  color: lightgray;
+}
 body .layout-content.titlepage {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-      padding-bottom: calc(var(--margin) * var(--square) + 0.5 * 3em); }
+  padding-bottom: calc(var(--margin) * var(--square) + 1.5em);
+}
 body .layout-content.titlepage::before {
-        content: '';
+  content: "";
   position: absolute;
   top: calc(var(--margin) * var(--square));
   right: calc(var(--margin) * var(--square));
-        width: calc(.3 * var(--square));
+  width: calc(0.3 * var(--square));
-        height: calc(.3 * var(--square));
+  height: calc(0.3 * var(--square));
   background-image: url(../images/logo-fachschaft.jpg);
   background-repeat: no-repeat;
-        background-size: contain; }
+  background-size: contain;
+}
 body .layout-preview {
   grid-area: preview;
   display: flex;
@@ -127,44 +159,53 @@ body {
   align-items: center;
   justify-content: center;
   background: var(--secondary);
-    position: relative; }
+  position: relative;
+}
 body .layout-preview figure {
-      display: contents; }
+  display: contents;
+}
 body .layout-preview img {
   width: auto;
   height: auto;
-      max-width: calc(.9 * var(--square));
+  max-width: calc(0.9 * var(--square));
-      max-height: calc(.9 * var(--square));
+  max-height: calc(0.9 * var(--square));
   box-shadow: 0.2em 0.2em 0.5em 0 rgba(0, 0, 0, 0.3);
   object-fit: cover;
-      margin: calc(.05 * var(--square));
+  margin: calc(0.05 * var(--square));
-      background-color: white;
+  background-color: var(--background, white);
-      box-sizing: border-box; }
+  box-sizing: border-box;
+}
 body .layout-preview img.thin-padding {
-        padding: .5em; }
+  padding: 0.5em;
+}
 body .layout-preview img.large {
   width: 60%;
   max-width: 100%;
   max-height: 100%;
-        box-sizing: border-box; }
+  box-sizing: border-box;
+}
 body .layout-preview img[src$="-crop.svg"] {
   padding: calc(var(--margin) * var(--square));
   object-fit: contain;
-        width: calc(0.9 * var(--square)); }
+  width: calc(0.9 * var(--square));
+}
 body .layout-preview img[src$="-crop.svg"].thin-padding {
-          padding: calc(.35 * var(--margin) * var(--square)); }
+  padding: calc(0.35 * var(--margin) * var(--square));
+}
 body .layout-preview img[src$="-orig.svg"] {
-        background: white;
+  background: var(--background, white);
-        object-fit: contain; }
+  object-fit: contain;
+}
 body .layout-preview figcaption {
   position: absolute;
   background: rgba(0, 0, 0, 0.5);
   bottom: 0;
   width: 100%;
   text-align: center;
-      color: white;
+  color: var(--background, white);
-      padding: .5em;
+  padding: 0.5em;
-      box-sizing: border-box; }
+  box-sizing: border-box;
+}
 body .layout-two-columns {
   display: grid;
   min-height: 100vh;
@@ -175,26 +216,34 @@ body {
   grid-template-rows: auto auto auto 1fr;
   grid-template-columns: var(--square);
   grid-template-areas: "title" "column1" "column2" ".";
-    background: var(--secondary); }
+  background: var(--secondary);
+}
 @media (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" "   .       .   "; } }
+    grid-template-areas: "   .       .   " " title   title " "column1 column2" "   .       .   ";
+  }
+}
 @media (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 ."; } }
+    grid-template-areas: ".  title   title  ." ". column1 column2 .";
+  }
+}
 body .layout-two-columns .layout-title {
   grid-area: title;
-      background: var(--secondary); }
+  background: var(--secondary);
+}
 body .layout-two-columns .layout-column-one {
   grid-area: column1;
-      background: white; }
+  background: var(--background, white);
+}
 body .layout-two-columns .layout-column-two {
   grid-area: column2;
-      background: white; }
+  background: var(--background, white);
+}
 body .layout-two-previews {
   display: grid;
   min-height: 100vh;
@@ -204,60 +253,74 @@ body {
   overflow: auto;
   grid-template-rows: auto auto;
   grid-template-columns: auto;
-    background: var(--secondary); }
+  background: var(--secondary);
+}
 @media (min-aspect-ratio: 1/1) {
   body .layout-two-previews {
     grid-template-rows: 100vh;
     grid-template-columns: 50vw 50vw;
-        grid-template-areas: "preview preview"; } }
+    grid-template-areas: "preview preview";
+  }
+}
 body .layout-two-previews .layout-preview {
-      grid-area: auto; }
+  grid-area: auto;
+}
 
 /* content layout */
 @font-face {
-  font-family: 'Fira Sans';
+  font-family: "Fira Sans";
   src: url("../lib/font/fira-sans/FiraSans-Regular.ttf");
-  font-weight: 400; }
+  font-weight: 400;
+}
 @font-face {
-  font-family: 'Fira Sans';
+  font-family: "Fira Sans";
   src: url("../lib/font/fira-sans/FiraSans-Bold.ttf");
-  font-weight: 700; }
+  font-weight: 700;
+}
 @font-face {
-  font-family: 'Fira Code';
+  font-family: "Fira Code";
   src: url("../lib/font/fira-code/FiraCode-Regular.otf");
-  font-weight: 400; }
+  font-weight: 400;
+}
 @font-face {
-  font-family: 'Fira Code';
+  font-family: "Fira Code";
   src: url("../lib/font/fira-code/FiraCode-Bold.otf");
-  font-weight: 700; }
+  font-weight: 700;
+}
 @font-face {
-  font-family: 'EB Garamond';
+  font-family: "EB Garamond";
   src: url("../lib/font/eb-garamond/EBGaramond-Regular.ttf");
-  font-weight: 400; }
+  font-weight: 400;
+}
 body {
-  font-family: 'Fira Sans';
+  font-family: "Fira Sans";
   margin: 0;
-  line-height: 1.2em; }
+  line-height: 1.2em;
+}
 
 .layout-content-and-preview .layout-content,
 .layout-content-only .layout-content,
 .layout-wide-content .layout-content {
   overflow: visible;
-  padding: calc(var(--margin) * var(--square)); }
+  padding: calc(var(--margin) * var(--square));
+}
 .layout-content-and-preview .layout-content *:first-child,
 .layout-content-only .layout-content *:first-child,
 .layout-wide-content .layout-content *:first-child {
-    margin-top: 0; }
+  margin-top: 0;
+}
 .layout-content-and-preview .layout-content .layout-title,
 .layout-content-only .layout-content .layout-title,
 .layout-wide-content .layout-content .layout-title {
   padding: calc(0.3 * var(--margin) * var(--square)) 0;
-    line-height: 1.15em; }
+  line-height: 1.15em;
+}
 .layout-content-and-preview .layout-content .layout-title h2,
 .layout-content-only .layout-content .layout-title h2,
 .layout-wide-content .layout-content .layout-title h2 {
   margin: 0;
-      line-height: 1.15em; }
+  line-height: 1.15em;
+}
 .layout-content-and-preview .layout-content ul, .layout-content-and-preview .layout-content ol,
 .layout-content-only .layout-content ul,
 .layout-content-only .layout-content ol,
@@ -265,16 +328,18 @@ body {
 .layout-wide-content .layout-content ol {
   list-style-type: none;
   padding-left: 0;
-    position: relative; }
+  position: relative;
+}
 .layout-content-and-preview .layout-content ul li::before, .layout-content-and-preview .layout-content ol li::before,
 .layout-content-only .layout-content ul li::before,
 .layout-content-only .layout-content ol li::before,
 .layout-wide-content .layout-content ul li::before,
 .layout-wide-content .layout-content ol li::before {
-      content: '▪';
+  content: "▪";
   color: var(--secondary);
   position: absolute;
-      left: calc(-0.33 * var(--margin) * var(--square)); }
+  left: calc(-0.33 * var(--margin) * var(--square));
+}
 .layout-content-and-preview .layout-content ul ul, .layout-content-and-preview .layout-content ul ol, .layout-content-and-preview .layout-content ol ul, .layout-content-and-preview .layout-content ol ol,
 .layout-content-only .layout-content ul ul,
 .layout-content-only .layout-content ul ol,
@@ -284,18 +349,21 @@ body {
 .layout-wide-content .layout-content ul ol,
 .layout-wide-content .layout-content ol ul,
 .layout-wide-content .layout-content ol ol {
-      margin-left: calc(0.33 * var(--margin) * var(--square)); }
+  margin-left: calc(0.33 * var(--margin) * var(--square));
+}
 .layout-content-and-preview .layout-content ol,
 .layout-content-only .layout-content ol,
 .layout-wide-content .layout-content ol {
-    counter-reset: ol-counter; }
+  counter-reset: ol-counter;
+}
 .layout-content-and-preview .layout-content ol li::before,
 .layout-content-only .layout-content ol li::before,
 .layout-wide-content .layout-content ol li::before {
   counter-increment: ol-counter;
   content: counter(ol-counter) ".";
   color: var(--secondary-dark);
-      left: calc(-0.36 * var(--margin) * var(--square)); }
+  left: calc(-0.36 * var(--margin) * var(--square));
+}
 .layout-content-and-preview .layout-content pre,
 .layout-content-only .layout-content pre,
 .layout-wide-content .layout-content pre {
@@ -303,7 +371,8 @@ body {
   padding-left: calc(var(--margin) * var(--square));
   line-height: 1.2em;
   position: relative;
-    overflow: hidden; }
+  overflow: hidden;
+}
 .layout-content-and-preview .layout-content pre::before,
 .layout-content-only .layout-content pre::before,
 .layout-wide-content .layout-content pre::before {
@@ -311,85 +380,102 @@ body {
   position: absolute;
   text-align: right;
   color: var(--secondary);
-      top: .85em;
+  top: 0.85em;
   width: 100%;
   left: calc(-1 * var(--square) + 1.2 * var(--margin) * var(--square));
   transform-origin: top right;
-      transform: rotate(-90deg); }
+  transform: rotate(-90deg);
+}
 .layout-content-and-preview .layout-content pre code,
 .layout-content-only .layout-content pre code,
 .layout-wide-content .layout-content pre code {
-      padding: .3em 0; }
+  padding: 0.3em 0;
+}
 .layout-content-and-preview .layout-content code,
 .layout-content-only .layout-content code,
 .layout-wide-content .layout-content code {
   font-size: 0.9em;
-    font-family: 'Fira Code'; }
+  font-family: "Fira Code";
+}
 
 .layout-two-columns .layout-title {
-  padding: calc(0.3 * var(--margin) * var(--square)) calc(var(--margin) * var(--square)); }
+  padding: calc(0.3 * var(--margin) * var(--square)) calc(var(--margin) * var(--square));
+}
 .layout-two-columns .layout-title h2 {
-    line-height: 1.15em; }
+  line-height: 1.15em;
+}
 .layout-two-columns .layout-column-one,
 .layout-two-columns .layout-column-two {
   padding: calc(var(--margin) * var(--square));
-  padding-top: calc(var(--margin) * var(--square)); }
+  padding-top: calc(var(--margin) * var(--square));
+}
 .layout-two-columns .layout-column-one *:first-child,
 .layout-two-columns .layout-column-two *:first-child {
-    margin-top: 0; }
+  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; }
+  position: relative;
+}
 .layout-two-columns .layout-column-one ul li::before,
 .layout-two-columns .layout-column-two ul li::before {
-      content: '▪';
+  content: "▪";
   color: var(--secondary);
   position: absolute;
-      left: calc(-0.33 * var(--margin) * var(--square)); }
+  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)); }
+  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; }
+  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;
+  top: 0.85em;
   width: 100%;
   left: calc(-1 * var(--square) + 1.2 * var(--margin) * var(--square));
   transform-origin: top right;
-      transform: rotate(-90deg); }
+  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)); }
+  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'; }
+  font-family: "Fira Code";
+}
 
 .layout.layout-chapter-heading {
   height: 100vh;
   width: 100vw;
-  position: relative; }
+  position: relative;
+}
 .layout.layout-chapter-heading .layout-title {
   position: absolute;
   left: 2vw;
-    width: calc(100vw - 4vw);
+  width: 96vw;
   text-align: center;
-    bottom: calc(38.2% - .5em); }
+  bottom: calc(38.2% - 0.5em);
+}
 
 h1 {
   font-size: 300%;
-  max-width: var(--square); }
+  max-width: var(--square);
+}
 
 :not(.titlepage) > h1 {
   position: absolute;
@@ -397,36 +483,41 @@ h1 {
   left: 0;
   line-height: 115%;
   vertical-align: bottom;
-  padding: 0 calc(var(--margin) * var(--square)) 0.5em; }
+  padding: 0 calc(var(--margin) * var(--square)) 0.5em;
+}
 
 .titlepage > h1 {
   line-height: 100%;
-  margin-bottom: 3rem; }
+  margin-bottom: 3rem;
+}
 
 h2 {
-  line-height: 1.2; }
+  line-height: 1.2;
+}
 
 p[data-category]::before,
 h2[data-category]::before,
 h3[data-category]::before {
   content: attr(data-category);
-  font-size: .7em;
+  font-size: 0.7em;
   font-variant: small-caps;
   text-transform: lowercase;
   background: black;
-  color: white;
+  color: var(--background, white);
-  padding: .1em .5em;
+  padding: 0.1em 0.5em;
   display: inline-block;
   vertical-align: baseline;
-  letter-spacing: .1em;
+  letter-spacing: 0.1em;
   position: relative;
   margin-left: calc(-1 * var(--margin) * var(--square));
   padding-left: calc(var(--margin) * var(--square));
-  margin-right: .5em; }
+  margin-right: 0.5em;
+}
 
 h2[data-category=Aufgabe]::before,
 h2[data-category=Task]::before {
-  content: attr(data-category) " " attr(data-task); }
+  content: attr(data-category) " " attr(data-task);
+}
 
 .layout-content-only h2[data-category=Aufgabe]::after,
 .layout-content-only h2[data-category=Task]::after,
@@ -438,14 +529,15 @@ h2[data-category=Task]::before {
   right: 0;
   bottom: 0;
   left: 0;
-  text-indent: calc(-.16 * var(--square));
+  text-indent: calc(-0.16 * var(--square));
   font-size: calc(1.2 * var(--square));
   overflow: hidden;
   text-align: right;
   white-space: nowrap;
   direction: rtl;
   word-spacing: 1000%;
-  opacity: .2; }
+  opacity: 0.2;
+}
 @media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 2/1) {
   .layout-content-only h2[data-category=Aufgabe]::after,
 .layout-content-only h2[data-category=Task]::after,
@@ -453,78 +545,97 @@ h2[data-category=Task]::before {
 .layout-wide-content h2[data-category=Task]::after {
     --versatz: calc((100vh - var(--square)) / 2);
     top: var(--versatz);
-      bottom: calc(-1 * var(--versatz)); } }
+    bottom: calc(-1 * var(--versatz));
+  }
+}
 
 .layout-content-only h2.task-without-number::after,
 .layout-content-only h2.task-without-number::after,
 .layout-wide-content h2.task-without-number::after,
 .layout-wide-content h2.task-without-number::after {
-  display: none; }
+  display: none;
+}
 
 img {
   width: auto;
-  max-width: 100%; }
+  max-width: 100%;
+}
 
 table {
   font-size: inherit;
   width: calc(var(--square) - var(--margin) * var(--square));
   margin-left: calc(-1 * var(--margin) * var(--square));
-  border-spacing: 0; }
+  border-spacing: 0;
+}
 table tr:nth-child(2n-1) {
-    background: var(--secondary); }
+  background: var(--secondary);
+}
 table tr > *:first-child {
-    padding-left: calc(var(--margin) * var(--square)); }
+  padding-left: calc(var(--margin) * var(--square));
+}
 table th, table td {
   text-align: left;
   vertical-align: top;
-    padding: .3em;
+  padding: 0.3em;
-    padding-left: 0; }
+  padding-left: 0;
+}
 table th:last-child, table td:last-child {
-    padding-right: .1em; }
+  padding-right: 0.1em;
+}
 
 .layout-content-only table {
   border-spacing: 0;
   margin-left: 0;
   width: 100%;
-  box-sizing: border-box; }
+  box-sizing: border-box;
+}
 .layout-content-only table tr > *:first-child {
-    padding-left: .3rem;
+  padding-left: 0.3rem;
-    padding-right: .3rem; }
+  padding-right: 0.3rem;
+}
 
 .box {
   margin-left: calc(-1 * var(--margin) * var(--square));
-  padding: 0.8em 0.1em 0.1em calc(var(--margin) * var(--square)); }
+  padding: 0.8em 0.1em 0.1em calc(var(--margin) * var(--square));
+}
 
 .box.warning {
-  background: var(--primary); }
+  background: var(--primary);
+}
 
 blockquote {
   color: var(--secondary-dark);
   position: relative;
   padding-bottom: 1.8em;
   margin-left: 0;
-  margin-right: 0; }
+  margin-right: 0;
-  blockquote p:first-of-type {
+}
-    /* probably bungle, but works for one <p> inside <blockquote> */
+blockquote p:first-of-type { /* probably bungle, but works for one <p> inside <blockquote> */
-    display: contents; }
+  display: contents;
+}
 blockquote p:first-of-type::after {
-      content: " " var(--closing-double-quote); }
+  content: " " var(--closing-double-quote);
+}
 blockquote::before {
   content: var(--opening-double-quote) " ";
   color: var(--secondary-dark);
   position: absolute;
   display: inline-block;
-    right: 100%; }
+  right: 100%;
+}
 blockquote cite {
   position: absolute;
   bottom: 0.6em;
   left: calc(0.4 * var(--square));
-    width: calc(0.4 * var(--square)); }
+  width: calc(0.4 * var(--square));
+}
 blockquote cite::before {
-      content: "— "; }
+  content: "— ";
+}
 
 .layout-content figure {
-  margin: 0 1em 1em 0; }
+  margin: 0 1em 1em 0;
+}
 
 .bubble {
   display: inline-block;
@@ -535,28 +646,32 @@ blockquote {
   border: 0.1em solid var(--primary-dark);
   background: var(--primary);
   text-align: center;
-  border-radius: 1em; }
+  border-radius: 1em;
+}
 .bubble::before {
-    content: '';
+  content: "";
   width: 0;
   height: 0;
   position: absolute;
-    border: .5em solid transparent;
+  border: 0.5em solid transparent;
   border-top-color: var(--primary-dark);
   bottom: -1em;
-    left: calc(50% - .5em); }
+  left: calc(50% - 0.5em);
+}
 .bubble::after {
-    content: '';
+  content: "";
   width: 0;
   height: 0;
   position: absolute;
-    border: .5em solid transparent;
+  border: 0.5em solid transparent;
   border-top-color: var(--primary);
   bottom: -0.87em;
-    left: calc(50% - .5em); }
+  left: calc(50% - 0.5em);
+}
 
 section > h1, section > h2, section > h3, section > p, section > ul {
-  background: var(--primary); }
+  background: var(--primary);
+}
 
 /*
  * Keyboard Shortcut Styling
@@ -568,17 +683,20 @@ kbd {
   display: inline-block;
   border: 1px solid dimgray;
   border-width: 1px 5px 5px 1px;
-  padding: .2rem .5rem; }
+  padding: 0.2rem 0.5rem;
+}
 
 /*
  * Emoji Fonts
  * ============
  */
 @font-face {
-  font-family: 'Twemoji';
+  font-family: "Twemoji";
-  src: url("../lib/font/twemoji/TwitterColorEmoji-SVGinOT.ttf"); }
+  src: url("../lib/font/twemoji/TwitterColorEmoji-SVGinOT.ttf");
+}
 .emoji {
-  font-family: "Twemoji"; }
+  font-family: "Twemoji";
+}
 
 /*
  * Links
@@ -589,9 +707,10 @@ p a:link, p a:hover, p a:active, p a:visited, li a:link, li a:hover, li a:active
   color: var(--secondary-dark);
   font-weight: bold;
   position: relative;
-  z-index: 1; }
+  z-index: 1;
+}
 p a:link::before, p a:hover::before, p a:active::before, p a:visited::before, li a:link::before, li a:hover::before, li a:active::before, li a:visited::before, h2 a:link::before, h2 a:hover::before, h2 a:active::before, h2 a:visited::before, td a:link::before, td a:hover::before, td a:active::before, td a:visited::before, figcaption a:link::before, figcaption a:hover::before, figcaption a:active::before, figcaption a:visited::before, div a:link::before, div a:hover::before, div a:active::before, div a:visited::before {
-    content: '';
+  content: "";
   position: absolute;
   width: 102%;
   height: 0;
@@ -599,25 +718,31 @@ p a:link, p a:hover, p a:active, p a:visited, li a:link, li a:hover, li a:active
   z-index: -1;
   bottom: -5%;
   left: -1%;
-    transition: .2s height ease; }
+  transition: 0.2s height ease;
+}
 p a:hover::before, li a:hover::before, h2 a:hover::before, td a:hover::before, figcaption a:hover::before, div a:hover::before {
-  height: 110%; }
+  height: 110%;
+}
 
 figcaption a:not(.dark-font):link, figcaption a:not(.dark-font):hover, figcaption a:not(.dark-font):active, figcaption a:not(.dark-font):visited {
-  color: white; }
+  color: var(--background, white);
+}
 figcaption a:not(.dark-font):link::before, figcaption a:not(.dark-font):hover::before, figcaption a:not(.dark-font):active::before, figcaption a:not(.dark-font):visited::before {
-    background-color: var(--secondary-dark); }
+  background-color: var(--secondary-dark);
+}
 
 /*
  * Code Listings
  * =============
  */
 pre.small-text {
-  font-size: 80%; }
+  font-size: 80%;
+}
 
 pre.scroll-one-half {
-  max-height: calc(.5 * var(--square));
+  max-height: calc(0.5 * var(--square));
-  overflow: auto !important; }
+  overflow: auto !important;
+}
 
 /*
  * Fragments
@@ -625,10 +750,12 @@ pre.scroll-one-half {
  */
 .fragment {
   opacity: 0;
-  transition: .3s opacity ease-in-out; }
+  transition: 0.3s opacity ease-in-out;
+}
 
 .fragment.visible {
-  opacity: 1; }
+  opacity: 1;
+}
 
 /*
  * Topic List
@@ -636,21 +763,26 @@ pre.scroll-one-half {
  */
 .topic-list {
   box-shadow: 0 0px 50px rgba(0, 0, 0, 0.3);
-  z-index: 500; }
+  z-index: 500;
+}
 .topic-list .topic-list-search {
   display: block;
   width: 100%;
   border: none;
-    padding: .5rem;
+  padding: 0.5rem;
   margin-bottom: 1rem;
   border-bottom: 1px solid var(--secondary);
-    text-align: center; }
+  text-align: center;
+}
 .topic-list .topic-link {
-    font-weight: normal; }
+  font-weight: normal;
+}
 .topic-list .topic-link.active-topic-link {
-      font-weight: bold; }
+  font-weight: bold;
+}
 .topic-list .topic-link.not-matching-search-terms {
-      opacity: .2; }
+  opacity: 0.2;
+}
 
 /* 
  * Help Menu
@@ -668,18 +800,21 @@ 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; }
+  transition: 0.2s opacity ease-in-out;
+}
 
 #help-menu-checkbox:checked ~ #help-menu-wrapper {
   opacity: 1;
-  display: block; }
+  display: block;
+}
 
 #help-menu-checkbox {
   position: fixed;
-  right: 150vw; }
+  right: 150vw;
+}
 
 #help-menu-toggle {
   position: fixed;
@@ -689,11 +824,21 @@ pre.scroll-one-half {
   height: 3rem;
   color: white;
   background-color: rgba(0, 0, 0, 0.3);
-  transition: .1s background-color ease-in-out;
+  transition: 0.1s background-color ease-in-out;
   display: flex;
   justify-content: center;
-  align-items: center; }
+  align-items: center;
+}
 #help-menu-toggle:hover {
-    background-color: rgba(0, 0, 0, 0.5); }
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+/* 
+ * Extra Content
+ * ==============
+ */
+.extra-content {
+  --background: var(--secondary-light) ;
+}
 
 /*# sourceMappingURL=latex.css.map */

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.