Browse Source

Trying to make a Terminiminal theme for HTML Slides

master
Julio Biason 4 years ago
parent
commit
1a441b4e76
  1. 103
      base.html
  2. 157
      htmlslides.css
  3. 210
      htmlslides.js
  4. 80
      reveal-base.html
  5. 16
      terminimal.css

103
base.html

@ -1,80 +1,35 @@
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title>reveal.js – The HTML Presentation Framework</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="reveal.js/css/reveal.css">
<link rel="stylesheet" href="reveal.js/css/theme/black.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="reveal.js/lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
<meta charset="utf-8" />
<link rel="stylesheet" href="htmlslides.css" title="" type="">
<link rel="stylesheet" href="terminimal.css" title="" type="">
<script src="htmlslides.js" charset="utf-8"></script>
<title>
PRESENTATION TITLE
</title>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1>Reveal.js</h1>
<h3>The HTML Presentation Framework</h3>
<p>
<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
</p>
</section>
</div>
</div>
<script src="reveal.js/lib/js/head.min.js"></script>
<script src="reveal.js/js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
<header>
<h1>
PRESENTATION TITLE
</h1>
</header>
<section id="introduction">
<h1>
ONE TITLE
</h1>
<p>
content
</p>
</section>
<section id="image">
<h1>This one have an image</h1>
<img src="_images/cargo-cult-smokey.jpg" alt="">
</section>
</body>
</html>

157
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%;
}

210
htmlslides.js

@ -0,0 +1,210 @@
"use strict";
/* htmlslides
Info and examples: https://gitlab.com/andybalaam/htmlslides
Structure your HTML like this:
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="htmlslides.css">
<script src="htmlslides.js"></script>
<title>How to Surf the Mist</title>
</head>
<body>
<header>
<h1>How to Surf the Mist</h1>
<!-- ... some stuff ... -->
</header>
<section id="contents">
<h2>Contents</h2>
<ul><li><a href="#breathin">First, breath in</a></ul>
<!-- ... some stuff ... -->
</section>
<section id="breathin">
<h2>First, breath in</h2>
<!-- ... some stuff ... -->
</section>
<!-- ... more slides ... -->
</body>
</html>
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:
<script src="htmlslides.js"></script>
<script>
htmlslides.config.mouse_moves_pages = false;
</script>
*/
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);
}());

80
reveal-base.html

@ -0,0 +1,80 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js – The HTML Presentation Framework</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="reveal.js/css/reveal.css">
<link rel="stylesheet" href="reveal.js/css/theme/black.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="reveal.js/lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1>Reveal.js</h1>
<h3>The HTML Presentation Framework</h3>
<p>
<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
</p>
</section>
</div>
</div>
<script src="reveal.js/lib/js/head.min.js"></script>
<script src="reveal.js/js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>

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

Loading…
Cancel
Save