diff --git a/base.html b/base.html
index c6e96b3..47ee7b5 100644
--- a/base.html
+++ b/base.html
@@ -1,80 +1,35 @@
-
-
-
+
-
-
- reveal.js – The HTML Presentation Framework
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ PRESENTATION TITLE
+
-
-
-
-
-
-
-
+
+
+ PRESENTATION TITLE
+
+
+
+
+
+ ONE TITLE
+
+
+
+ content
+
+
+
+
+ This one have an image
+
+
+
diff --git a/htmlslides.css b/htmlslides.css
new file mode 100644
index 0000000..6d8be72
--- /dev/null
+++ b/htmlslides.css
@@ -0,0 +1,157 @@
+/* Colours and fonts */
+
+body {
+ font-family:
+ "Source Sans Pro","Trebuchet MS","Lucida Grande",
+ "Bitstream Vera Sans","Helvetica Neue","sans-serif";
+
+ background-color: white;
+ color: #293c4b;
+}
+
+h1, h2 {
+ background-color: #60b5cc;
+ color: white;
+}
+
+a { color: #60b5cc; }
+
+tt,code {
+ background-color: #2d2d2d;
+ color: #66cccc;
+}
+
+code em { color: #f33; }
+code i { color: #0f0; }
+
+
+/* Document structure */
+
+* {
+ box-sizing: border-box;
+}
+
+html,body {
+ padding: 0vh;
+ margin: 0vh;
+}
+
+body {
+ font-size: 5vh;
+}
+
+section,header {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ margin: 5vh 4vw;
+ break-after: always
+}
+
+header div {
+ text-align: center;
+ font-size: 90%;
+}
+
+h1,h2
+{
+ padding: 1vh;
+ text-align: center;
+}
+
+h1 {
+ margin-top: 15vh;
+ margin-bottom: 15vh;
+ font-size: 180%;
+}
+
+h2 {
+ font-size: 150%;
+ margin-bottom: 2vh;
+}
+
+a {
+ text-decoration: inherit;
+}
+
+p {
+ margin-bottom: 2vh;
+ margin-top: 1vh;
+}
+
+section > ul {
+ margin-left: 8vw;
+ margin-top: 2vh;
+}
+
+section > ul ul {
+ margin-top: 2vh;
+}
+
+li {
+ margin-bottom: 1vh;
+}
+
+li ul li {
+ font-size: 80%;
+}
+
+tt,code {
+ white-space: pre;
+ font-size: 70%;
+ overflow: auto;
+}
+
+tt {
+ border-radius: 0.3vw;
+ padding: 0.8vw;
+}
+
+code {
+ display: block;
+ border-radius: 0.5vw;
+ padding: 1.4vw;
+}
+
+code em,i {
+ font-style: normal;
+}
+
+div.cc {
+ display: flex;
+ flex-direction: row-reverse;
+ align-items: center;
+ font-size: 10px;
+ height: 31px;
+}
+
+div.cc img {
+ float: right;
+ width: 88px;
+ height: 31px;
+ border-width: 0px;
+ height: 31px;
+ margin-left: 1vh;
+}
+
+.moreinfo {
+ display: grid;
+ grid-template-columns: auto auto;
+ align-items: center;
+ font-size: 4vh;
+ width: 80%;
+ margin: auto;
+}
+
+.moreinfo h3 {
+ text-align: right;
+ font-weight: 500;
+ margin-right: 1vw;
+}
+
+.moreinfo > div {
+ display: flex;
+ flex-direction: column;
+ align-items: left;
+ font-size: 90%;
+}
diff --git a/htmlslides.js b/htmlslides.js
new file mode 100644
index 0000000..a26bcc2
--- /dev/null
+++ b/htmlslides.js
@@ -0,0 +1,210 @@
+"use strict";
+
+/* htmlslides
+
+Info and examples: https://gitlab.com/andybalaam/htmlslides
+
+Structure your HTML like this:
+
+
+
+
+
+
+ How to Surf the Mist
+
+
+
+
+ How to Surf the Mist
+
+
+
+
+
+
+
+
+Open the Developer Tools in your browser and check the Console output. If
+htmlslides was unable to understand your HTML, it will print error messages
+there.
+
+You can disable mouse-clicking by including htmlslides.js like this:
+
+
+
+
+*/
+
+let htmlslides = {}
+
+htmlslides.config = {
+ "mouse_moves_pages": true
+};
+
+(function() {
+
+let slide_anchors;
+let current_slide;
+let header;
+let sections;
+
+const KEY_PAGEUP = 33;
+const KEY_PAGEDOWN = 34;
+const KEY_END = 35;
+const KEY_HOME = 36;
+const KEY_LEFT = 37;
+const KEY_RIGHT = 39;
+
+function on_load() {
+ window.addEventListener("scroll", on_scroll);
+ document.addEventListener("keydown", on_key);
+ document.body.addEventListener('click', on_left_click);
+ document.body.addEventListener('contextmenu', on_right_click);
+
+ header = document.getElementsByTagName("header")[0];
+ sections = document.getElementsByTagName("section");
+ slide_anchors = scan_slides();
+ current_slide = find_slide(slide_anchors, window.location.hash);
+}
+
+function is_interactive_element(element) {
+ let tag = element.tagName.toLowerCase();
+ return (tag === "a" || tag === "button" || tag === "input");
+}
+
+function on_left_click(event) {
+ if (!htmlslides.config.mouse_moves_pages) {
+ return;
+ }
+ if (is_interactive_element(event.target)) {
+ return;
+ }
+ event.preventDefault();
+ return go_to_slide(current_slide + 1);
+}
+
+function on_right_click(event) {
+ if (!htmlslides.config.mouse_moves_pages) {
+ return;
+ }
+ if (is_interactive_element(event.target)) {
+ return;
+ }
+ event.preventDefault();
+ return go_to_slide(current_slide - 1);
+}
+
+function on_key(event) {
+ if (event.altKey || event.ctrlKey || event.shiftKey) {
+ return;
+ }
+
+ switch(event.keyCode) {
+ case KEY_LEFT:
+ case KEY_PAGEUP:
+ event.preventDefault();
+ return go_to_slide(current_slide - 1);
+ case KEY_RIGHT:
+ case KEY_PAGEDOWN:
+ event.preventDefault();
+ return go_to_slide(current_slide + 1);
+ case KEY_HOME:
+ event.preventDefault();
+ return go_to_slide(0);
+ case KEY_END:
+ event.preventDefault();
+ return go_to_last_slide();
+ }
+}
+
+function on_scroll() {
+ if (isVisible(header)) {
+ history.replaceState(null, null, ' ');
+ current_slide = 0;
+ return;
+ }
+
+ for (let section of sections) {
+ if (isVisible(section)) {
+ let anchor = "#" + section.id;
+ history.replaceState(null, null, anchor);
+ current_slide = find_slide(slide_anchors, anchor);
+ break;
+ }
+ }
+}
+
+function isVisible(obj) {
+ let rect = obj.getBoundingClientRect();
+ return (rect.top >= 0 && rect.top < window.innerHeight / 2);
+}
+
+function go_to_last_slide() {
+ go_to_slide(slide_anchors.length - 1);
+}
+
+function go_to_slide(n) {
+ current_slide = n;
+
+ if (current_slide < 0) {
+ current_slide = 0;
+ } else if (current_slide >= slide_anchors.length) {
+ current_slide = slide_anchors.length - 1;
+ }
+
+ if (current_slide === 0) {
+ if (header) {
+ header.scrollIntoView();
+ }
+ window.scrollTo(0, 0);
+ history.replaceState(null, null, ' ');
+ } else {
+ window.location.hash = slide_anchors[current_slide];
+ }
+}
+
+function find_slide(slide_anchors, anchor) {
+ let ret = slide_anchors.indexOf(anchor);
+ if (ret === -1) {
+ ret = 0;
+ }
+ return ret;
+}
+
+function scan_slides() {
+ let ret = [""];
+
+ for (let section of sections) {
+ ret.push(find_anchor(section));
+ }
+
+ return ret;
+}
+
+function find_anchor(section) {
+ if (section.id === "") {
+ fail("This section does not have an id='blah' attribute!:", section);
+ }
+ return "#" + section.id;
+}
+
+function fail(msg, obj) {
+ console.error(`htmlslides error: ${msg}`);
+ if (obj) {
+ console.error(obj);
+ }
+}
+
+window.addEventListener("load", on_load);
+
+}());
diff --git a/reveal-base.html b/reveal-base.html
new file mode 100644
index 0000000..c6e96b3
--- /dev/null
+++ b/reveal-base.html
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+ reveal.js – The HTML Presentation Framework
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/terminimal.css b/terminimal.css
index 413ad3c..94a3d95 100644
--- a/terminimal.css
+++ b/terminimal.css
@@ -8,6 +8,22 @@
}
+h1 {
+ background-color: inherit;
+ color: var(--accent);
+}
+
+header h1 {
+ font-size: 5rem;
+ width: 100%;
+ text-align: center;
+ height: 90%;
+ align-items: center;
+ justify-content: center;
+ margin: 0;
+ padding: 0;
+}
+
.button-container {
display:table;
margin-left:auto;