Add page numbers

css/latex.css

@@ -106,6 +106,15 @@ body .layout-preview-only {
   grid-template-areas: "preview";
   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));
+}
+body .layout-preview-only .layout-preview img.large img[src$="-crop.svg"].large {
+  width: 100%;
+}
 body .layout-wide-content {
   background: var(--background, white);
   grid-template-rows: min-content auto;
@@ -837,6 +846,25 @@ pre.scroll-one-half {
   background-color: rgba(0, 0, 0, 0.5);
 }
 
+/*
+ * Page Number
+ * ==============
+ */
+#page-number-container {
+  position: fixed;
+  right: 1rem;
+  top: 1rem;
+  width: 3rem;
+  height: 3rem;
+  color: white;
+  background-color: rgba(0, 0, 0, 0.3);
+  transition: 0.1s background-color ease-in-out;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 0.7em;
+}
+
 /* 
  * Extra Content
  * ==============
@@ -853,6 +881,10 @@ pre.scroll-one-half {
   .fragment {
     opacity: initial;
   }
+  #page-number-container,
+#help-menu-toggle {
+    display: none;
+  }
 }
 
 /*# sourceMappingURL=latex.css.map */

css/latex.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["latex.scss"],"names":[],"mappings":";AAAA;AACA;EACE;EACA;EACA;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;;AAIJ;AACA;EACE;EAOA;;AANA;EAFF;IAGI;;;AAEF;EALF;IAMI;;;;AAKJ;EACE;;AAEA;EACD;;AAGC;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,qBACE;EAEF;;AAKA;EAXF;IAYI;IACA;IACA,qBACE;IAGF;;;AAEF;EApBF;IAqBI;IACA;IACA,qBACE;;;AAIN;EACE;EACA;EACA,qBACE;EAEF;;AACA;EAPF;IAQI;IACA;IACA,qBACE;IAGF;;;AAUJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,qBACE;;AAEF;EAPF;IAQI;IACA;IACA,qBACE;;;AAIJ;EAfF;IAgBI;IACA;IACA,qBACE;IAGF;;;AAUJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAGJ;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,qBACE;EAIF;;AACA;EAfF;IAgBI;IACA;IACA,qBACE;;;AAKJ;EAxBF;IAyBI;IACA;IACA,qBACE;;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVF;IAWI;IACA;IACA,qBACE;;;AAEJ;EACE;;;AAKN;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMA;AAAA;AAAA;EACE;EACA;;AAEA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;AAEA;AAAA;AAAA;EACE;EACA;;AAIJ;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAGJ;AAAA;AAAA;EACE;;AACA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAIJ;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;;AACA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;EACE;;AAIJ;AAAA;AAAA;EACE;EACA;;;AAMJ;EACE;;AACA;EACE;;AAIJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;EACE;EACA;EACA;;AACA;AAAA;EACE;EACA;EACA;EACA;;AAEF;AAAA;EACE;;AAIJ;AAAA;EACE;EACA;EACA;EACA;;AACA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;EACE;;AAIJ;AAAA;EACE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAlBF;AAAA;AAAA;AAAA;IAmBI;IACA;IACA;;;;AAKJ;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AACA;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE;;;AAMJ;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAIA;EACE;EACA;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAMI;EAIE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;;AAOJ;EAIE;;AAEA;EACE;;;AAMN;AAAA;AAAA;AAAA;AAIA;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAIA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;;AAKN;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;AAAA;AAAA;AAAA;AAKA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;IACE","file":"latex.css"}
+{"version":3,"sourceRoot":"","sources":["latex.scss"],"names":[],"mappings":";AAAA;AACA;EACE;EACA;EACA;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;;AAIJ;AACA;EACE;EAOA;;AANA;EAFF;IAGI;;;AAEF;EALF;IAMI;;;;AAKJ;EACE;;AAEA;EACD;;AAGC;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,qBACE;EAEF;;AAKA;EAXF;IAYI;IACA;IACA,qBACE;IAGF;;;AAEF;EApBF;IAqBI;IACA;IACA,qBACE;;;AAIN;EACE;EACA;EACA,qBACE;EAEF;;AACA;EAPF;IAQI;IACA;IACA,qBACE;IAGF;;;AAUJ;EACE;EACA;EACA;EACA;;AAGE;AAAA;AAAA;EAGE;EACA;;AAGF;EAEE;;AAKN;EACE;EACA;EACA;EACA,qBACE;;AAEF;EAPF;IAQI;IACA;IACA,qBACE;;;AAIJ;EAfF;IAgBI;IACA;IACA,qBACE;IAGF;;;AAUJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAGJ;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,qBACE;EAIF;;AACA;EAfF;IAgBI;IACA;IACA,qBACE;;;AAKJ;EAxBF;IAyBI;IACA;IACA,qBACE;;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVF;IAWI;IACA;IACA,qBACE;;;AAEJ;EACE;;;AAKN;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMA;AAAA;AAAA;EACE;EACA;;AAEA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;AAEA;AAAA;AAAA;EACE;EACA;;AAIJ;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAGJ;AAAA;AAAA;EACE;;AACA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAIJ;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;;AACA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;EACE;;AAIJ;AAAA;AAAA;EACE;EACA;;;AAMJ;EACE;;AACA;EACE;;AAIJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;EACE;EACA;EACA;;AACA;AAAA;EACE;EACA;EACA;EACA;;AAEF;AAAA;EACE;;AAIJ;AAAA;EACE;EACA;EACA;EACA;;AACA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;EACE;;AAIJ;AAAA;EACE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAlBF;AAAA;AAAA;AAAA;IAmBI;IACA;IACA;;;;AAKJ;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AACA;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE;;;AAMJ;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAIA;EACE;EACA;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAMI;EAIE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;;AAOJ;EAIE;;AAEA;EACE;;;AAMN;AAAA;AAAA;AAAA;AAIA;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAIA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;;AAKN;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;AAAA;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAAA;AAKA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;IACE;;EAGF;AAAA;IAEE","file":"latex.css"}

css/latex.scss

@@ -118,6 +118,20 @@ body {
     grid-template-columns: auto;
     grid-template-areas: "preview";
     background: var(--secondary);
+
+    .layout-preview  {
+      img,
+      img.large,
+      img[src$="-crop.svg"] {
+        max-width: calc(1.8 * var(--square));
+        max-height: calc(.8 * var(--square));
+      }
+
+      img.large
+      img[src$="-crop.svg"].large {
+        width: 100%;
+      }
+    }
   }
 
   .layout-wide-content {
@@ -192,6 +206,7 @@ body {
     figure {
       display: contents;
     }
+
     img {
       width: auto;
       height: auto;
@@ -881,6 +896,25 @@ pre.scroll-one-half {
   }
 }
 
+/*
+ * Page Number
+ * ==============
+ */
+#page-number-container {
+  position: fixed;
+  right: 1rem;
+  top: 1rem;
+  width: 3rem;
+  height: 3rem;
+  color: white;
+  background-color: rgba(0, 0, 0, .3);
+  transition: .1s background-color ease-in-out;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: .7em;
+}
+
 
 /* 
  * Extra Content
@@ -900,4 +934,9 @@ pre.scroll-one-half {
   .fragment {
     opacity: initial;
   }
+
+  #page-number-container,
+  #help-menu-toggle {
+    display: none;
+  }
 }

layouts/root.html

@@ -11,7 +11,7 @@
 	</head>
 	<body>
 		@slides
-		<div id="progress-bar"></div>
+		<div id="page-number-container"></div>
 		@help
 
 		<script src="onpoint/onpoint.js"></script>

onpoint

@@ -1 +1 @@
-Subproject commit 737a47ce1eb8f350724888c0ca6c74b89fe445a4
+Subproject commit 8cc875dac8ce14838b81fae25e59b69f3485193f

slides/support.de.md

@@ -61,7 +61,7 @@ Webseite mit zahlreichen LaTeX-Beispielvorlagen, vor allem zu TikZ.
 @slide(layout=preview-only)
 
 @preview
-![Klassisch ([Quelle](https://tex.stackexchange.com/questions/1319/showcase-of-beautiful-typography-done-in-tex-friends))](svg/chapter-16/klassisches-beispiel.jpg)
+![Klassisch ([Quelle](https://tex.stackexchange.com/questions/1319/showcase-of-beautiful-typography-done-in-tex-friends))](svg/chapter-16/klassisches-beispiel-2.jpeg){.large}
 
 @slide(layout=preview-only)
 
@@ -71,7 +71,7 @@ Webseite mit zahlreichen LaTeX-Beispielvorlagen, vor allem zu TikZ.
 @slide(layout=preview-only)
 
 @preview
-![Anders ([Quelle](https://tex.stackexchange.com/questions/1319/showcase-of-beautiful-typography-done-in-tex-friends))](svg/chapter-16/anderes-beispiel.jpg)
+![Anders ([Quelle](https://tex.stackexchange.com/questions/1319/showcase-of-beautiful-typography-done-in-tex-friends))](svg/chapter-16/anderes-beispiel.png){.large}
 
 @slide(layout=content-only)
 
@@ -100,4 +100,4 @@ Kurzes Feedback
 @slide(layout=preview-only) 
 
 @preview
-<img src="svg/chapter-16/fooboar-latex-tut.jpg" style="width:80%; margin:0 auto; display: block;"/>
+<img src="svg/chapter-16/fooboar-latex-tut.jpg" style="width:100%; margin:0 auto; display: block;"/>

slides/support.en.md

@@ -61,7 +61,7 @@ A collection of LaTeX examples, especially with TikZ.
 @slide(layout=preview-only)
 
 @preview
-![Classic ([source](https://tex.stackexchange.com/questions/1319/showcase-of-beautiful-typography-done-in-tex-friends))](svg/chapter-16/klassisches-beispiel.jpg)
+![Classic ([source](https://tex.stackexchange.com/questions/1319/showcase-of-beautiful-typography-done-in-tex-friends))](svg/chapter-16/klassisches-beispiel-2.jpeg){.large}
 
 @slide(layout=preview-only)
 
@@ -71,7 +71,7 @@ A collection of LaTeX examples, especially with TikZ.
 @slide(layout=preview-only)
 
 @preview
-![Different ([source](https://tex.stackexchange.com/questions/1319/showcase-of-beautiful-typography-done-in-tex-friends))](svg/chapter-16/anderes-beispiel.jpg)
+![Different ([source](https://tex.stackexchange.com/questions/1319/showcase-of-beautiful-typography-done-in-tex-friends))](svg/chapter-16/anderes-beispiel.png){.large}
 
 @slide(layout=content-only)
 
@@ -100,5 +100,5 @@ A short feedback round
 @slide(layout=preview-only) 
 
 @preview
-<img src="svg/chapter-16/fooboar-latex-tut.jpg" style="width:80%; margin:0 auto; display: block;"/>
+<img src="svg/chapter-16/fooboar-latex-tut.jpg" style="width:100%; margin:0 auto; display: block;" />