jbiason
/
Presentations
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Trying to make a Terminiminal theme for HTML Slides

master
Julio Biason 5 years ago
parent
f4cfaf82f7
commit
1a441b4e76
5 changed files with 492 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 93
      base.html
  2. 157
      htmlslides.css
  3. 210
      htmlslides.js
  4. 80
      reveal-base.html
  5. 16
      terminimal.css

93
base.html
Unescape View File

@ -1,80 +1,35 @@
<!doctype html> <html>
<html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<link rel="stylesheet" href="htmlslides.css" title="" type="">
<title>reveal.js – The HTML Presentation Framework</title> <link rel="stylesheet" href="terminimal.css" title="" type="">
<script src="htmlslides.js" charset="utf-8"></script>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML"> <title>
<meta name="author" content="Hakim El Hattab"> PRESENTATION TITLE
</title>
<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> </head>
<body> <body>
<div class="reveal"> <header>
<div class="slides"> <h1>
<section> PRESENTATION TITLE
<h1>Reveal.js</h1> </h1>
<h3>The HTML Presentation Framework</h3> </header>
<section id="introduction">
<h1>
ONE TITLE
</h1>
<p> <p>
<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small> content
</p> </p>
</section> </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: <section id="image">
// https://github.com/hakimel/reveal.js#configuration <h1>This one have an image</h1>
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>
<img src="_images/cargo-cult-smokey.jpg" alt="">
</section>
</body> </body>
</html> </html>

157
htmlslides.css
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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 { .button-container {
display:table; display:table;
margin-left:auto; margin-left:auto;

Write Preview
Loading…
Cancel
Save