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 + -
-
-
-

Reveal.js

-

The HTML Presentation Framework

-

- Created by Hakim El Hattab / @hakimel -

-
-
- -
- - - - - - +
+

+ 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

+ +
+
+

Contents

+ + +
+
+

First, breath in

+ +
+ + + + +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 + + + + + + + + + + + + + + + + + + + + + + +
+
+
+

Reveal.js

+

The HTML Presentation Framework

+

+ Created by Hakim El Hattab / @hakimel +

+
+
+ +
+ + + + + + + + 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;