Make first exercise an actual exercise

css/latex.css

@@ -3,16 +3,13 @@
 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 {
@@ -21,39 +18,31 @@ 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.laser-pointer-active {
+    cursor: url("../onpoint/images/pointer.svg"), auto; }
   body article {
-  position: relative;
+    position: relative; }
-}
   body .layout-content-and-preview,
   body .layout-content-only,
   body .layout-preview-only,
@@ -63,104 +52,84 @@ body .layout-wide-content {
     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, var(--background, white) 0%, var(--background, 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, var(--background, white) 0%, var(--background, 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, var(--background, white) 0%, var(--background, 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), 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%);
+        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-preview-only .layout-preview img,
     body .layout-preview-only .layout-preview img.large,
     body .layout-preview-only .layout-preview img[src$="-crop.svg"] {
       max-width: calc(1.8 * var(--square));
-  max-height: calc(0.8 * var(--square));
+      max-height: calc(.8 * var(--square)); }
-}
+    body .layout-preview-only .layout-preview img.large
-body .layout-preview-only .layout-preview img.large img[src$="-crop.svg"].large {
+    img[src$="-crop.svg"].large {
-  width: 100%;
+      width: 100%; }
-}
   body .layout-wide-content {
     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), 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%);
+        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: 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) + 1.5em);
+      padding-bottom: calc(var(--margin) * var(--square) + 0.5 * 3em); }
-}
       body .layout-content.titlepage::before {
-  content: "";
+        content: '';
         position: absolute;
         top: calc(var(--margin) * var(--square));
         right: calc(var(--margin) * var(--square));
-  width: calc(0.3 * var(--square));
+        width: calc(.3 * var(--square));
-  height: calc(0.3 * var(--square));
+        height: calc(.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;
@@ -168,43 +137,35 @@ body .layout-preview {
     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(0.9 * var(--square));
+      max-width: calc(.9 * var(--square));
-  max-height: calc(0.9 * var(--square));
+      max-height: calc(.9 * var(--square));
       box-shadow: 0.2em 0.2em 0.5em 0 rgba(0, 0, 0, 0.3);
       object-fit: cover;
-  margin: calc(0.05 * var(--square));
+      margin: calc(.05 * var(--square));
       background-color: white;
-  box-sizing: border-box;
+      box-sizing: border-box; }
-}
       body .layout-preview img.thin-padding {
-  padding: 0.5em;
+        padding: .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(0.35 * var(--margin) * var(--square));
+          padding: calc(.35 * var(--margin) * var(--square)); }
-}
       body .layout-preview img[src$="-orig.svg"] {
         background: white;
-  object-fit: contain;
+        object-fit: contain; }
-}
     body .layout-preview figcaption {
       position: absolute;
       background: rgba(0, 0, 0, 0.5);
@@ -212,9 +173,8 @@ body .layout-preview figcaption {
       width: 100%;
       text-align: center;
       color: white;
-  padding: 0.5em;
+      padding: .5em;
-  box-sizing: border-box;
+      box-sizing: border-box; }
-}
   body .layout-two-columns {
     display: grid;
     min-height: 100vh;
@@ -225,34 +185,26 @@ body .layout-two-columns {
     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: var(--background, white);
+      background: var(--background, white); }
-}
     body .layout-two-columns .layout-column-two {
       grid-area: column2;
-  background: var(--background, white);
+      background: var(--background, white); }
-}
   body .layout-two-previews {
     display: grid;
     min-height: 100vh;
@@ -262,74 +214,60 @@ body .layout-two-previews {
     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,
@@ -337,18 +275,16 @@ 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,
@@ -358,21 +294,18 @@ 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 {
@@ -380,8 +313,7 @@ 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 {
@@ -389,106 +321,88 @@ body {
       position: absolute;
       text-align: right;
       color: var(--secondary);
-  top: 0.85em;
+      top: .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: 0.3em 0;
+      padding: .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: 0.85em;
+      top: .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: 96vw;
+    width: calc(100vw - 4vw);
     text-align: center;
-  bottom: calc(38.2% - 0.5em);
+    bottom: calc(38.2% - .5em); }
-}
 
 h1 {
   font-size: 300%;
-  max-width: var(--square);
+  max-width: var(--square); }
-}
 
 .titlepage > h1 p {
-  margin-bottom: 0;
+  margin-bottom: 0; }
-}
 
 :not(.titlepage) > h1 {
   position: absolute;
@@ -496,41 +410,36 @@ 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: 0.7em;
+  font-size: .7em;
   font-variant: small-caps;
   text-transform: lowercase;
   background: black;
   color: var(--background, white);
-  padding: 0.1em 0.5em;
+  padding: .1em .5em;
   display: inline-block;
   vertical-align: baseline;
-  letter-spacing: 0.1em;
+  letter-spacing: .1em;
   position: relative;
   margin-left: calc(-1 * var(--margin) * var(--square));
   padding-left: calc(var(--margin) * var(--square));
-  margin-right: 0.5em;
+  margin-right: .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,
@@ -542,15 +451,14 @@ h2[data-category=Task]::before {
   right: 0;
   bottom: 0;
   left: 0;
-  text-indent: calc(-0.16 * var(--square));
+  text-indent: calc(-.16 * var(--square));
   font-size: calc(1.2 * var(--square));
   overflow: hidden;
   text-align: right;
   white-space: nowrap;
   direction: rtl;
   word-spacing: 1000%;
-  opacity: 0.2;
+  opacity: .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,
@@ -558,97 +466,78 @@ 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: 0.3em;
+    padding: .3em;
-  padding-left: 0;
+    padding-left: 0; }
-}
   table th:last-child, table td:last-child {
-  padding-right: 0.1em;
+    padding-right: .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: 0.3rem;
+    padding-left: .3rem;
-  padding-right: 0.3rem;
+    padding-right: .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 {
-blockquote p:first-of-type { /* probably bungle, but works for one <p> inside <blockquote> */
+    /* 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;
@@ -659,32 +548,28 @@ blockquote cite::before {
   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: 0.5em solid transparent;
+    border: .5em solid transparent;
     border-top-color: var(--primary-dark);
     bottom: -1em;
-  left: calc(50% - 0.5em);
+    left: calc(50% - .5em); }
-}
   .bubble::after {
-  content: "";
+    content: '';
     width: 0;
     height: 0;
     position: absolute;
-  border: 0.5em solid transparent;
+    border: .5em solid transparent;
     border-top-color: var(--primary);
     bottom: -0.87em;
-  left: calc(50% - 0.5em);
+    left: calc(50% - .5em); }
-}
 
 section > h1, section > h2, section > h3, section > p, section > ul {
-  background: transparent;
+  background: transparent; }
-}
 
 /*
  * Keyboard Shortcut Styling
@@ -696,20 +581,17 @@ kbd {
   display: inline-block;
   border: 1px solid dimgray;
   border-width: 1px 5px 5px 1px;
-  padding: 0.2rem 0.5rem;
+  padding: .2rem .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
@@ -720,10 +602,9 @@ 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;
@@ -731,31 +612,25 @@ p a:link::before, p a:hover::before, p a:active::before, p a:visited::before, li
     z-index: -1;
     bottom: -5%;
     left: -1%;
-  transition: 0.2s height ease;
+    transition: .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: var(--background, 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(0.5 * var(--square));
+  max-height: calc(.5 * var(--square));
-  overflow: auto !important;
+  overflow: auto !important; }
-}
 
 /*
  * Fragments
@@ -763,12 +638,10 @@ pre.scroll-one-half {
  */
 .fragment {
   opacity: 0;
-  transition: 0.3s opacity ease-in-out;
+  transition: .3s opacity ease-in-out; }
-}
 
 .fragment.visible {
-  opacity: 1;
+  opacity: 1; }
-}
 
 /*
  * Topic List
@@ -776,26 +649,21 @@ 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: 0.5rem;
+    padding: .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: 0.2;
+      opacity: .2; }
-}
 
 /* 
  * Help Menu
@@ -816,18 +684,15 @@ pre.scroll-one-half {
   background: var(--background, white);
   box-shadow: 0 0px 50px rgba(0, 0, 0, 0.3);
   opacity: 0;
-  transition: 0.2s opacity ease-in-out;
+  transition: .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;
@@ -837,14 +702,12 @@ pre.scroll-one-half {
   height: 3rem;
   color: white;
   background-color: rgba(0, 0, 0, 0.3);
-  transition: 0.1s background-color ease-in-out;
+  transition: .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); }
-}
 
 /*
  * Page Number
@@ -858,20 +721,18 @@ pre.scroll-one-half {
   height: 3rem;
   color: white;
   background-color: rgba(0, 0, 0, 0.3);
-  transition: 0.1s background-color ease-in-out;
+  transition: .1s background-color ease-in-out;
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 0.7em;
+  font-size: .7em; }
-}
 
 /* 
  * Extra Content
  * ==============
  */
 .extra-content {
-  --background: var(--secondary-light) ;
+  --background: var(--secondary-light) ; }
-}
 
 /*
  * Print 
@@ -879,12 +740,10 @@ pre.scroll-one-half {
  */
 @media print {
   .fragment {
-    opacity: initial;
+    opacity: initial; }
-  }
+
   #page-number-container,
   #help-menu-toggle {
-    display: none;
+    display: none; } }
-  }
-}
 
 /*# sourceMappingURL=latex.css.map */

css/latex.scss

@@ -45,6 +45,10 @@ input {
 body {
   font-size: calc(0.035 * var(--square));
 
+  &.laser-pointer-active {
+    cursor: url("../onpoint/images/pointer.svg"), auto;
+  }
+
   article {
 	position: relative;
   }

onpoint

@@ -1 +1 @@
-Subproject commit ac3c4fff4236888e81f86a90a7c84c314af2d70e
+Subproject commit 52aff02eb82b5dca5cfaaffa59f20ce8389628b3

slides/intro.de.md

@@ -136,9 +136,13 @@ zum Schreiben unseres Quelltextes mit allen Befehlen zur semantischen Gliederung
 [TeXstudio](http://www.texstudio.org/) (Empfehlung), [VS Codium](https://vscodium.com) (für Fortgeschrittene, Anleitung auf [Github](https://github.com/fs-wiai/latex-script/blob/github/vs-code-instructions.md))
 :::
 
-@slide(layout=content-only)
+@slide(layout=task)
+
+@task-number
+1
+
 @title
-Kompilieren des Skriptes
+Erstmaliges Kompilieren des Skriptes
 
 @content
 * Ladet das Projektarchiv aus dem VC herunter.

slides/intro.en.md

@@ -136,7 +136,11 @@ writing our source code including all the commands that structure the text seman
 [TeXstudio](http://www.texstudio.org/) (recommended), [VS Codium](https://vscodium.com) (for advanced users, instructions on [Github](https://github.com/fs-wiai/latex-script/blob/github/vs-code-instructions.md))
 :::
 
-@slide(layout=content-only)
+@slide(layout=task)
+
+@task-number
+1
+
 @title
 Compile the script for the first time