[scripts] Implemented a general styling and usage system for custom made presentations

1 files changed, 132 insertions, 0 deletions

diff --git a/src/presentation.css b/src/presentation.css
new file mode 100644
index 0000000..0b59e58
--- /dev/null
+++ b/src/presentation.css
@@ -0,0 +1,132 @@
+/* Stylesheet override */
+
+article {
+  font-size: 22px;
+}
+
+h2, h3, h4, h5, h6 {
+  margin-block-start: 0;
+  margin-block-end: 0.5em;
+}
+
+/* Presentation controller */
+
+#presentCont {
+  margin: 0.5em 0.5em 0.5em 0;
+}
+
+#presentCont > img {
+  height: 1.4em;
+}
+
+/* Slides styles */
+
+.fow {
+  flex-direction: row;
+}
+
+.fow > *:not(:last-child) {
+  margin-right: 0.5em;
+}
+
+.fol {
+  flex-direction: column;
+}
+
+.fol > *:not(:last-child) {
+  margin-bottom: 0.5em;
+}
+
+.fow, .fol {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.fow, .fol, .fow > *, .fol > *, .slide > * {
+  min-width: 0;
+  min-height: 0;
+}
+
+.slide {
+  display: flex;
+  flex-direction: column;
+  width: 297mm; /* Size of landscape A4 paper */
+  height: 210mm;
+
+  padding: 1em;
+  box-sizing: border-box;
+}
+
+.centered {
+  text-align: center;
+}
+
+.centered > h1::after, .centered > h2::after, .centered > h3::after {
+  content: " \2550"
+}
+
+.flexer {
+  flex: 1;
+}
+
+/* Media specific stylings */
+
+@media screen {
+  .slide {
+    border: 1px solid var(--fg-color);
+    margin-bottom: 1em;
+  }
+}
+
+@media print {
+  article, body {
+    margin: 0;
+    border: none !important;
+    padding: 0;
+    max-width: auto;
+  }
+
+  nav {
+    display: none !important;
+  }
+
+  .slide {
+    width: 296.99mm;
+    height: 209.616mm;
+  }
+}
+
+/* Presenting mode */
+
+.invisible {
+  visibility: hidden;
+}
+
+.nodisplay {
+  display: none;
+}
+
+.no-overflow {
+  overflow: hidden;
+}
+
+.absolute-slide {
+  visibility: visible;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  height: min(100vh, 100vw / 1.414);
+  width: min(100vh * 1.414, 100vw);
+  border: none;
+}
+
+.absolute-cont {
+  visibility: visible;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  opacity: 40%;
+  z-index: 10;
+}