mirror/zs-starter-template
1
0
Fork 0
mirror of https://git.mills.io/prologic/zs-starter-template.git synced 2024-11-21 21:06:03 +03:00
Code Issues Packages Projects Releases Wiki Activity

gitea-pages: Automated Update

Browse Source
This commit is contained in:
Gitea Automation Bot 2024-03-03 05:40:13 +00:00
commit 2e527ac2fc
71 changed files with 13010 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
LICENSE Normal file
View File

@ -0,0 +1,13 @@
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.

56
SandBox.html Normal file
View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/assets/css/bahunya.css">
<link rel="stylesheet" href="/assets/css/board.css">
<link rel="stylesheet" href="/assets/css/highlight.css">
<link rel="stylesheet" href="/assets/css/site.css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<title>Sandbox</title>
<meta name="title" content="Sandbox" />
<meta name="description" content="A starter template for the Zen Static (zs) site generator" />
<meta name="keywords" content="zen, static, zs, starter, template, site, website, template, generator, ssg" />
</head>
<body>
<nav>
<a id="brand" href="/">Home 🏠</a>
<a href="/TestPage.html">Test Page 🧪</a>
<a href="https://zs.mills.io/">Demo 🥳</a>
<a href="https://git.mills.io/prologic/zs">Source 💾</a>
</nav>
<header>
<h1>Sandbox</h1>
</header>
<aside><p><strong>On this page</strong></p>
</aside>
<article><h1 id="sandbox">SandBox <a class="anchor" href="#sandbox"> </a></h1>
<blockquote>
<p>Oh you think you can edit this?! 🤣</p>
</blockquote>
<p><a href="YouCanActually.html">YouCanActually</a> 🤣</p>
</article>
<a href="SandBox.md?edit" rel="nofollow" target="_self">✍️ Edit this page</a>
<footer>
Copyright &copy; James Mills ·
Last modified <time datetime="2024-03-03T05:40:12Z+00:00
">Sun Mar 3 05:40:12 UTC 2024
</time> ·
Built with <a href="https://git.mills.io/prologic/zs">zs</a>
</footer>
<script type="application/javascript" src="/assets/js/highlight.js"></script>
<script type="application/javascript" src="/assets/js/umbrella.js"></script>
<script type="application/javascript" src="/assets/js/live.js"></script>
<script>
hljs.highlightAll();
</script>
</body>
</html>

60
TODO.html Normal file
View File

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/assets/css/bahunya.css">
<link rel="stylesheet" href="/assets/css/board.css">
<link rel="stylesheet" href="/assets/css/highlight.css">
<link rel="stylesheet" href="/assets/css/site.css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<title>TODO KanBan Board</title>
<meta name="title" content="TODO KanBan Board" />
<meta name="description" content="A starter template for the Zen Static (zs) site generator" />
<meta name="keywords" content="zen, static, zs, starter, template, site, website, template, generator, ssg" />
</head>
<body>
<nav>
<a id="brand" href="/">Home 🏠</a>
<a href="/TestPage.html">Test Page 🧪</a>
<a href="https://zs.mills.io/">Demo 🥳</a>
<a href="https://git.mills.io/prologic/zs">Source 💾</a>
</nav>
<header>
<h1>TODO KanBan Board</h1>
</header>
<article class="board"><h1 id="todo-board">TODO Board <a class="anchor" href="#todo-board"> </a></h1>
<h2 id="backlog">Backlog <a class="anchor" href="#backlog"> </a></h2>
<ul>
<li>Get feedback on zs</li>
</ul>
<h2 id="in-progress">In Progress <a class="anchor" href="#in-progress"> </a></h2>
<ul>
<li>Develop more samples</li>
</ul>
<h2 id="done">Done <a class="anchor" href="#done"> </a></h2>
<ul>
<li>Build CGI sample</li>
<li>Build Kanban sample</li>
</ul>
</article>
<a href="TODO.md?edit" rel="nofollow" target="_self">✍️ Edit this page</a>
<footer>
Copyright &copy; James Mills ·
Last modified <time datetime="2024-03-03T05:40:12Z+00:00
">Sun Mar 3 05:40:12 UTC 2024
</time> ·
Built with <a href="https://git.mills.io/prologic/zs">zs</a>
</footer>
<script type="application/javascript" src="/assets/js/highlight.js"></script>
<script type="application/javascript" src="/assets/js/umbrella.js"></script>
<script type="application/javascript" src="/assets/js/live.js"></script>
</body>
</html>

90
TestCGI.html Normal file
View File

@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/assets/css/bahunya.css">
<link rel="stylesheet" href="/assets/css/board.css">
<link rel="stylesheet" href="/assets/css/highlight.css">
<link rel="stylesheet" href="/assets/css/site.css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<title>Test CGI</title>
<meta name="title" content="Test CGI" />
<meta name="description" content="A starter template for the Zen Static (zs) site generator" />
<meta name="keywords" content="zen, static, zs, starter, template, site, website, template, generator, ssg" />
</head>
<body>
<nav>
<a id="brand" href="/">Home 🏠</a>
<a href="/TestPage.html">Test Page 🧪</a>
<a href="https://zs.mills.io/">Demo 🥳</a>
<a href="https://git.mills.io/prologic/zs">Source 💾</a>
</nav>
<header>
<h1>Test CGI</h1>
</header>
<aside><p><strong>On this page</strong></p>
</aside>
<article><h1 id="test-cgi">Test CGI <a class="anchor" href="#test-cgi"> </a></h1>
<h2 id="form">Form <a class="anchor" href="#form"> </a></h2>
<form id="hello" action="/cgi-bin/hello" method="POST">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<h2 id="results">Results <a class="anchor" href="#results"> </a></h2>
<div id="result"></div>
<hr />
<script>
document.addEventListener('DOMContentLoaded', function(event) {
u("#hello").on("submit", function (e) {
e.preventDefault();
const data = new FormData(u("#hello").first());
var object = {};
data.forEach(function(value, key){
object[key] = value;
});
var json = JSON.stringify(object);
fetch("/cgi-bin/hello", {
method: "POST",
body: json,
}).then(function (res) {
if (res.ok) {
res.text().then(function (text) {
u("#result").text(text);
})
} else {
u("#result").text(res.statusText)
}
});
});
});
</script></article>
<a href="TestCGI.md?edit" rel="nofollow" target="_self">✍️ Edit this page</a>
<footer>
Copyright &copy; James Mills ·
Last modified <time datetime="2024-03-03T05:40:12Z+00:00
">Sun Mar 3 05:40:12 UTC 2024
</time> ·
Built with <a href="https://git.mills.io/prologic/zs">zs</a>
</footer>
<script type="application/javascript" src="/assets/js/highlight.js"></script>
<script type="application/javascript" src="/assets/js/umbrella.js"></script>
<script type="application/javascript" src="/assets/js/live.js"></script>
<script>
hljs.highlightAll();
</script>
</body>
</html>

937
TestPage.html Normal file
View File

@ -0,0 +1,937 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/assets/css/bahunya.css">
<link rel="stylesheet" href="/assets/css/board.css">
<link rel="stylesheet" href="/assets/css/highlight.css">
<link rel="stylesheet" href="/assets/css/site.css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<title>Markdown Syntax</title>
<meta name="title" content="Markdown Syntax" />
<meta name="description" content="Basic Markdown Syntax and Test Page" />
<meta name="keywords" content="zen, static, zs, starter, template, site, website, template, generator, ssg" />
</head>
<body>
<nav>
<a id="brand" href="/">Home 🏠</a>
<a href="/TestPage.html">Test Page 🧪</a>
<a href="https://zs.mills.io/">Demo 🥳</a>
<a href="https://git.mills.io/prologic/zs">Source 💾</a>
</nav>
<header>
<h1>Markdown Syntax</h1>
</header>
<aside><p><strong>On this page</strong></p>
</aside>
<article><h1 id="overview">Overview <a class="anchor" href="#overview"> </a></h1>
<p>Nearly all Markdown applications support the basic syntax outlined in the original Markdown design document. There are minor variations and discrepancies between Markdown processors — those are noted inline wherever possible.</p>
<h2 id="headings">Headings <a class="anchor" href="#headings"> </a></h2>
<p>To create a heading, add number signs (<code>#</code>) in front of a word or phrase. The number of number signs you use should correspond to the heading level. For example, to create a heading level three (<code>&lt;h3&gt;</code>), use three number signs (e.g., <code>### My Header</code>).</p>
<table>
<thead>
<tr>
<th>Markdown</th>
<th>HTML</th>
<th>Rendered Output</th>
</tr>
</thead>
<tbody>
<tr>
<td><code># Heading level 1</code></td>
<td><code>&lt;h1&gt;Heading level 1&lt;/h1&gt;</code></td>
<td>Heading level 1</td>
</tr>
<tr>
<td><code>## Heading level 2</code></td>
<td><code>&lt;h2&gt;Heading level 2&lt;/h2&gt;</code></td>
<td>Heading level 2</td>
</tr>
<tr>
<td><code>### Heading level 3</code></td>
<td><code>&lt;h3&gt;Heading level 3&lt;/h3&gt;</code></td>
<td>Heading level 3</td>
</tr>
<tr>
<td><code>#### Heading level 4</code></td>
<td><code>&lt;h4&gt;Heading level 4&lt;/h4&gt;</code></td>
<td>Heading level 4</td>
</tr>
<tr>
<td><code>##### Heading level 5</code></td>
<td><code>&lt;h5&gt;Heading level 5&lt;/h5&gt;</code></td>
<td>Heading level 5</td>
</tr>
<tr>
<td><code>###### Heading level 6</code></td>
<td><code>&lt;h6&gt;Heading level 6&lt;/h6&gt;</code></td>
<td>Heading level 6</td>
</tr>
</tbody>
</table>
<h3 id="alternate-syntax">Alternate Syntax <a class="anchor" href="#alternate-syntax"> </a></h3>
<p>Alternatively, on the line below the text, add any number of <code>==</code> characters for heading level 1 or <code>--</code> characters for heading level 2.</p>
<table>
<thead>
<tr>
<th>Markdown</th>
<th>HTML</th>
<th>Rendered Output</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Heading level 1===============</code></td>
<td><code>&lt;h1&gt;Heading level 1&lt;/h1&gt;</code></td>
<td>Heading level 1</td>
</tr>
<tr>
<td><code>Heading level 2---------------</code></td>
<td><code>&lt;h2&gt;Heading level 2&lt;/h2&gt;</code></td>
<td>Heading level 2</td>
</tr>
</tbody>
</table>
<h3 id="heading-best-practices">Heading Best Practices <a class="anchor" href="#heading-best-practices"> </a></h3>
<p>Markdown applications don’t agree on how to handle a missing space between the number signs (<code>#</code>) and the heading name. For compatibility, always put a space between the number signs and the heading name.</p>
<table>
<thead>
<tr>
<th>✅ Do this</th>
<th>❌ Don&rsquo;t do this</th>
</tr>
</thead>
<tbody>
<tr>
<td><code># Here's a Heading</code></td>
<td><code>#Here's a Heading</code></td>
</tr>
</tbody>
</table>
<p>You should also put blank lines before and after a heading for compatibility.</p>
<table>
<thead>
<tr>
<th>✅ Do this</th>
<th>❌ Don&rsquo;t do this</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Try to put a blank line before...# Heading...and after a heading.</code></td>
<td><code>Without blank lines, this might not look right.# HeadingDon't do this!</code></td>
</tr>
</tbody>
</table>
<h2 id="paragraphs">Paragraphs <a class="anchor" href="#paragraphs"> </a></h2>
<p>To create paragraphs, use a blank line to separate one or more lines of text.</p>
<table>
<thead>
<tr>
<th>Markdown</th>
<th>HTML</th>
<th>Rendered Output</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>I really like using Markdown.I think I'll use it to format all of my documents from now on.</code></td>
<td><code>&lt;p&gt;I really like using Markdown.&lt;/p&gt;&lt;p&gt;I think I'll use it to format all of my documents from now on.&lt;/p&gt;</code></td>
<td>I really like using Markdown.I think I&rsquo;ll use it to format all of my documents from now on.</td>
</tr>
</tbody>
</table>
<h3 id="paragraph-best-practices">Paragraph Best Practices <a class="anchor" href="#paragraph-best-practices"> </a></h3>
<p>Unless the <a href="https://www.markdownguide.org/basic-syntax/#paragraphs">paragraph is in a list</a>, don’t indent paragraphs with spaces or tabs.</p>
<p><strong>Note:</strong> If you need to indent paragraphs in the output, see the section on how to <a href="https://www.markdownguide.org/hacks/#indent-tab">indent (tab)</a>.</p>
<table>
<thead>
<tr>
<th>✅ Do this</th>
<th>❌ Don&rsquo;t do this</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Don't put tabs or spaces in front of your paragraphs.Keep lines left-aligned like this.</code></td>
<td><code> This can result in unexpected formatting problems. Don't add tabs or spaces in front of paragraphs.</code></td>
</tr>
</tbody>
</table>
<h2 id="line-breaks">Line Breaks <a class="anchor" href="#line-breaks"> </a></h2>
<p>To create a line break or new line (<code>&lt;br&gt;</code>), end a line with two or more spaces, and then type return.</p>
<table>
<thead>
<tr>
<th>Markdown</th>
<th>HTML</th>
<th>Rendered Output</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>This is the first line. And this is the second line.</code></td>
<td><code>&lt;p&gt;This is the first line.&lt;br&gt;And this is the second line.&lt;/p&gt;</code></td>
<td>This is the first line. And this is the second line.</td>
</tr>
</tbody>
</table>
<h3 id="line-break-best-practices">Line Break Best Practices <a class="anchor" href="#line-break-best-practices"> </a></h3>
<p>You can use two or more spaces (commonly referred to as “trailing whitespace”) for line breaks in nearly every Markdown application, but it’s controversial. It’s hard to see trailing whitespace in an editor, and many people accidentally or intentionally put two spaces after every sentence. For this reason, you may want to use something other than trailing whitespace for line breaks. If your Markdown application <a href="https://www.markdownguide.org/basic-syntax/#html">supports HTML</a>, you can use the <code>&lt;br&gt;</code> HTML tag.</p>
<p>For compatibility, use trailing white space or the <code>&lt;br&gt;</code> HTML tag at the end of the line.</p>
<p>There are two other options I don’t recommend using. CommonMark and a few other lightweight markup languages let you type a backslash (<code>\</code>) at the end of the line, but not all Markdown applications support this, so it isn’t a great option from a compatibility perspective. And at least a couple lightweight markup languages don’t require anything at the end of the line — just type return and they’ll create a line break.</p>
<table>
<thead>
<tr>
<th>✅ Do this</th>
<th>❌ Don&rsquo;t do this</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>First line with two spaces after. And the next line.First line with the HTML tag after.&lt;br&gt;And the next line.</code></td>
<td><code>First line with a backslash after.\And the next line.First line with nothing after.And the next line.</code></td>
</tr>
</tbody>
</table>
<h2 id="emphasis">Emphasis <a class="anchor" href="#emphasis"> </a></h2>
<p>You can add emphasis by making text bold or italic.</p>
<h3 id="bold">Bold <a class="anchor" href="#bold"> </a></h3>
<p>To bold text, add two asterisks or underscores before and after a word or phrase. To bold the middle of a word for emphasis, add two asterisks without spaces around the letters.</p>
<table>
<thead>
<tr>
<th>Markdown</th>
<th>HTML</th>
<th>Rendered Output</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>I just love **bold text**.</code></td>
<td><code>I just love &lt;strong&gt;bold text&lt;/strong&gt;.</code></td>
<td>I just love <strong>bold text</strong>.</td>
</tr>
<tr>
<td><code>I just love __bold text__.</code></td>
<td><code>I just love &lt;strong&gt;bold text&lt;/strong&gt;.</code></td>
<td>I just love <strong>bold text</strong>.</td>
</tr>
<tr>
<td><code>Love**is**bold</code></td>
<td><code>Love&lt;strong&gt;is&lt;/strong&gt;bold</code></td>
<td>Love<strong>is</strong>bold</td>
</tr>
</tbody>
</table>
<h4 id="bold-best-practices">Bold Best Practices <a class="anchor" href="#bold-best-practices"> </a></h4>
<p>Markdown applications don’t agree on how to handle underscores in the middle of a word. For compatibility, use asterisks to bold the middle of a word for emphasis.</p>
<table>
<thead>
<tr>
<th>✅ Do this</th>
<th>❌ Don&rsquo;t do this</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Love**is**bold</code></td>
<td><code>Love__is__bold</code></td>
</tr>
</tbody>
</table>
<h3 id="italic">Italic <a class="anchor" href="#italic"> </a></h3>
<p>To italicize text, add one asterisk or underscore before and after a word or phrase. To italicize the middle of a word for emphasis, add one asterisk without spaces around the letters.</p>
<table>
<thead>
<tr>
<th>Markdown</th>
<th>HTML</th>
<th>Rendered Output</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Italicized text is the *cat's meow*.</code></td>
<td><code>Italicized text is the &lt;em&gt;cat's meow&lt;/em&gt;.</code></td>
<td>Italicized text is the <em>cat’s meow</em>.</td>
</tr>
<tr>
<td><code>Italicized text is the _cat's meow_.</code></td>
<td><code>Italicized text is the &lt;em&gt;cat's meow&lt;/em&gt;.</code></td>
<td>Italicized text is the <em>cat’s meow</em>.</td>
</tr>
<tr>
<td><code>A*cat*meow</code></td>
<td><code>A&lt;em&gt;cat&lt;/em&gt;meow</code></td>
<td>A<em>cat</em>meow</td>
</tr>
</tbody>
</table>
<h4 id="italic-best-practices">Italic Best Practices <a class="anchor" href="#italic-best-practices"> </a></h4>
<p>Markdown applications don’t agree on how to handle underscores in the middle of a word. For compatibility, use asterisks to italicize the middle of a word for emphasis.</p>
<table>
<thead>
<tr>
<th>✅ Do this</th>
<th>❌ Don&rsquo;t do this</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>A*cat*meow</code></td>
<td><code>A_cat_meow</code></td>
</tr>
</tbody>
</table>
<h3 id="bold-and-italic">Bold and Italic <a class="anchor" href="#bold-and-italic"> </a></h3>
<p>To emphasize text with bold and italics at the same time, add three asterisks or underscores before and after a word or phrase. To bold and italicize the middle of a word for emphasis, add three asterisks without spaces around the letters.</p>
<table>
<thead>
<tr>
<th>Markdown</th>
<th>HTML</th>
<th>Rendered Output</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>This text is ***really important***.</code></td>
<td><code>This text is &lt;em&gt;&lt;strong&gt;really important&lt;/strong&gt;&lt;/em&gt;.</code></td>
<td>This text is <em><strong>really important</strong></em>.</td>
</tr>
<tr>
<td><code>This text is ___really important___.</code></td>
<td><code>This text is &lt;em&gt;&lt;strong&gt;really important&lt;/strong&gt;&lt;/em&gt;.</code></td>
<td>This text is <em><strong>really important</strong></em>.</td>
</tr>
<tr>
<td><code>This text is __*really important*__.</code></td>
<td><code>This text is &lt;em&gt;&lt;strong&gt;really important&lt;/strong&gt;&lt;/em&gt;.</code></td>
<td>This text is <em><strong>really important</strong></em>.</td>
</tr>
<tr>
<td><code>This text is **_really important_**.</code></td>
<td><code>This text is &lt;em&gt;&lt;strong&gt;really important&lt;/strong&gt;&lt;/em&gt;.</code></td>
<td>This text is <em><strong>really important</strong></em>.</td>
</tr>
<tr>
<td><code>This is really***very***important text.</code></td>
<td><code>This is really&lt;em&gt;&lt;strong&gt;very&lt;/strong&gt;&lt;/em&gt;important text.</code></td>
<td>This is really<em><strong>very</strong></em>important text.</td>
</tr>
</tbody>
</table>
<p><strong>Note:</strong> The order of the <code>em</code> and <code>strong</code> tags might be reversed depending on the Markdown processor you&rsquo;re using.</p>
<h4 id="bold-and-italic-best-practices">Bold and Italic Best Practices <a class="anchor" href="#bold-and-italic-best-practices"> </a></h4>
<p>Markdown applications don’t agree on how to handle underscores in the middle of a word. For compatibility, use asterisks to bold and italicize the middle of a word for emphasis.</p>
<table>
<thead>
<tr>
<th>✅ Do this</th>
<th>❌ Don&rsquo;t do this</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>This is really***very***important text.</code></td>
<td><code>This is really___very___important text.</code></td>
</tr>
</tbody>
</table>
<h2 id="blockquotes">Blockquotes <a class="anchor" href="#blockquotes"> </a></h2>
<p>To create a blockquote, add a <code>&gt;</code> in front of a paragraph.</p>
<pre><code>&gt; Dorothy followed her through many of the beautiful rooms in her castle.
</code></pre>
<p>The rendered output looks like this:</p>
<blockquote>
<p>Dorothy followed her through many of the beautiful rooms in her castle.</p>
</blockquote>
<h3 id="blockquotes-with-multiple-paragraphs">Blockquotes with Multiple Paragraphs <a class="anchor" href="#blockquotes-with-multiple-paragraphs"> </a></h3>
<p>Blockquotes can contain multiple paragraphs. Add a <code>&gt;</code> on the blank lines between the paragraphs.</p>
<pre><code>&gt; Dorothy followed her through many of the beautiful rooms in her castle.
&gt;
&gt; The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
</code></pre>
<p>The rendered output looks like this:</p>
<blockquote>
<p>Dorothy followed her through many of the beautiful rooms in her castle.</p>
<p>The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.</p>
</blockquote>
<h3 id="nested-blockquotes">Nested Blockquotes <a class="anchor" href="#nested-blockquotes"> </a></h3>
<p>Blockquotes can be nested. Add a <code>&gt;&gt;</code> in front of the paragraph you want to nest.</p>
<pre><code>&gt; Dorothy followed her through many of the beautiful rooms in her castle.
&gt;
&gt;&gt; The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
</code></pre>
<p>The rendered output looks like this:</p>
<blockquote>
<p>Dorothy followed her through many of the beautiful rooms in her castle.</p>
<blockquote>
<p>The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.</p>
</blockquote>
</blockquote>
<h3 id="blockquotes-with-other-elements">Blockquotes with Other Elements <a class="anchor" href="#blockquotes-with-other-elements"> </a></h3>
<p>Blockquotes can contain other Markdown formatted elements. Not all elements can be used — you’ll need to experiment to see which ones work.</p>
<pre><code>&gt; #### The quarterly results look great!
&gt;
&gt; - Revenue was off the chart.
&gt; - Profits were higher than ever.
&gt;
&gt; *Everything* is going according to **plan**.
</code></pre>
<p>The rendered output looks like this:</p>
<blockquote>
<h4 id="the-quarterly-results-look-great">The quarterly results look great! <a class="anchor" href="#the-quarterly-results-look-great"> </a></h4>
<ul>
<li>Revenue was off the chart.</li>
<li>Profits were higher than ever.</li>
</ul>
<p><em>Everything</em> is going according to <strong>plan</strong>.</p>
</blockquote>
<h3 id="blockquotes-best-practices">Blockquotes Best Practices <a class="anchor" href="#blockquotes-best-practices"> </a></h3>
<p>For compatibility, put blank lines before and after blockquotes.</p>
<table>
<thead>
<tr>
<th>✅ Do this</th>
<th>❌ Don&rsquo;t do this</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Try to put a blank line before...&gt; This is a blockquote...and after a blockquote.</code></td>
<td><code>Without blank lines, this might not look right.&gt; This is a blockquoteDon't do this!</code></td>
</tr>
</tbody>
</table>
<h2 id="lists">Lists <a class="anchor" href="#lists"> </a></h2>
<p>You can organize items into ordered and unordered lists.</p>
<h3 id="ordered-lists">Ordered Lists <a class="anchor" href="#ordered-lists"> </a></h3>
<p>To create an ordered list, add line items with numbers followed by periods. The numbers don’t have to be in numerical order, but the list should start with the number one.</p>
<table>
<thead>
<tr>
<th>Markdown</th>
<th>HTML</th>
<th>Rendered Output</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>1. First item2. Second item3. Third item4. Fourth item</code></td>
<td><code>&lt;ol&gt; &lt;li&gt;First item&lt;/li&gt; &lt;li&gt;Second item&lt;/li&gt; &lt;li&gt;Third item&lt;/li&gt; &lt;li&gt;Fourth item&lt;/li&gt;&lt;/ol&gt;</code></td>
<td>First itemSecond itemThird itemFourth item</td>
</tr>
<tr>
<td><code>1. First item1. Second item1. Third item1. Fourth item</code></td>
<td><code>&lt;ol&gt; &lt;li&gt;First item&lt;/li&gt; &lt;li&gt;Second item&lt;/li&gt; &lt;li&gt;Third item&lt;/li&gt; &lt;li&gt;Fourth item&lt;/li&gt;&lt;/ol&gt;</code></td>
<td>First itemSecond itemThird itemFourth item</td>
</tr>
<tr>
<td><code>1. First item8. Second item3. Third item5. Fourth item</code></td>
<td><code>&lt;ol&gt; &lt;li&gt;First item&lt;/li&gt; &lt;li&gt;Second item&lt;/li&gt; &lt;li&gt;Third item&lt;/li&gt; &lt;li&gt;Fourth item&lt;/li&gt;&lt;/ol&gt;</code></td>
<td>First itemSecond itemThird itemFourth item</td>
</tr>
<tr>
<td><code>1. First item2. Second item3. Third item 1. Indented item 2. Indented item4. Fourth item</code></td>
<td><code>&lt;ol&gt; &lt;li&gt;First item&lt;/li&gt; &lt;li&gt;Second item&lt;/li&gt; &lt;li&gt;Third item &lt;ol&gt; &lt;li&gt;Indented item&lt;/li&gt; &lt;li&gt;Indented item&lt;/li&gt; &lt;/ol&gt; &lt;/li&gt; &lt;li&gt;Fourth item&lt;/li&gt;&lt;/ol&gt;</code></td>
<td>First itemSecond itemThird itemIndented itemIndented itemFourth item</td>
</tr>
</tbody>
</table>
<h4 id="ordered-list-best-practices">Ordered List Best Practices <a class="anchor" href="#ordered-list-best-practices"> </a></h4>
<p>CommonMark and a few other lightweight markup languages let you use a parenthesis (<code>)</code>) as a delimiter (e.g., <code>1) First item</code>), but not all Markdown applications support this, so it isn’t a great option from a compatibility perspective. For compatibility, use periods only.</p>
<table>
<thead>
<tr>
<th>✅ Do this</th>
<th>❌ Don&rsquo;t do this</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>1. First item2. Second item</code></td>
<td><code>1) First item2) Second item</code></td>
</tr>
</tbody>
</table>
<h3 id="unordered-lists">Unordered Lists <a class="anchor" href="#unordered-lists"> </a></h3>
<p>To create an unordered list, add dashes (<code>-</code>), asterisks (<code>*</code>), or plus signs (<code>+</code>) in front of line items. Indent one or more items to create a nested list.</p>
<table>
<thead>
<tr>
<th>Markdown</th>
<th>HTML</th>
<th>Rendered Output</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>- First item- Second item- Third item- Fourth item</code></td>
<td><code>&lt;ul&gt; &lt;li&gt;First item&lt;/li&gt; &lt;li&gt;Second item&lt;/li&gt; &lt;li&gt;Third item&lt;/li&gt; &lt;li&gt;Fourth item&lt;/li&gt;&lt;/ul&gt;</code></td>
<td>First itemSecond itemThird itemFourth item</td>
</tr>
<tr>
<td><code>* First item* Second item* Third item* Fourth item</code></td>
<td><code>&lt;ul&gt; &lt;li&gt;First item&lt;/li&gt; &lt;li&gt;Second item&lt;/li&gt; &lt;li&gt;Third item&lt;/li&gt; &lt;li&gt;Fourth item&lt;/li&gt;&lt;/ul&gt;</code></td>
<td>First itemSecond itemThird itemFourth item</td>
</tr>
<tr>
<td><code>+ First item+ Second item+ Third item+ Fourth item</code></td>
<td><code>&lt;ul&gt; &lt;li&gt;First item&lt;/li&gt; &lt;li&gt;Second item&lt;/li&gt; &lt;li&gt;Third item&lt;/li&gt; &lt;li&gt;Fourth item&lt;/li&gt;&lt;/ul&gt;</code></td>
<td>First itemSecond itemThird itemFourth item</td>
</tr>
<tr>
<td><code>- First item- Second item- Third item - Indented item - Indented item- Fourth item</code></td>
<td><code>&lt;ul&gt; &lt;li&gt;First item&lt;/li&gt; &lt;li&gt;Second item&lt;/li&gt; &lt;li&gt;Third item &lt;ul&gt; &lt;li&gt;Indented item&lt;/li&gt; &lt;li&gt;Indented item&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;Fourth item&lt;/li&gt;&lt;/ul&gt;</code></td>
<td>First itemSecond itemThird itemIndented itemIndented itemFourth item</td>
</tr>
</tbody>
</table>
<h4 id="starting-unordered-list-items-with-numbers">Starting Unordered List Items With Numbers <a class="anchor" href="#starting-unordered-list-items-with-numbers"> </a></h4>
<p>If you need to start an unordered list item with a number followed by a period, you can use a backslash (<code>\</code>) to <a href="https://www.markdownguide.org/basic-syntax/#escaping-characters">escape</a> the period.</p>
<table>
<thead>
<tr>
<th>Markdown</th>
<th>HTML</th>
<th>Rendered Output</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>- 1968\. A great year!- I think 1969 was second best.</code></td>
<td><code>&lt;ul&gt; &lt;li&gt;1968. A great year!&lt;/li&gt; &lt;li&gt;I think 1969 was second best.&lt;/li&gt;&lt;/ul&gt;</code></td>
<td>1968. A great year!I think 1969 was second best.</td>
</tr>
</tbody>
</table>
<h4 id="unordered-list-best-practices">Unordered List Best Practices <a class="anchor" href="#unordered-list-best-practices"> </a></h4>
<p>Markdown applications don’t agree on how to handle different delimiters in the same list. For compatibility, don’t mix and match delimiters in the same list — pick one and stick with it.</p>
<table>
<thead>
<tr>
<th>✅ Do this</th>
<th>❌ Don&rsquo;t do this</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>- First item- Second item- Third item- Fourth item</code></td>
<td><code>+ First item* Second item- Third item+ Fourth item</code></td>
</tr>
</tbody>
</table>
<h3 id="adding-elements-in-lists">Adding Elements in Lists <a class="anchor" href="#adding-elements-in-lists"> </a></h3>
<p>To add another element in a list while preserving the continuity of the list, indent the element four spaces or one tab, as shown in the following examples.</p>
<p><strong>Tip:</strong> If things don&rsquo;t appear the way you expect, double check that you&rsquo;ve indented the elements in the list four spaces or one tab.</p>
<h4 id="paragraphs-1">Paragraphs <a class="anchor" href="#paragraphs-1"> </a></h4>
<pre><code>* This is the first list item.
* Here's the second list item.
I need to add another paragraph below the second list item.
* And here's the third list item.
</code></pre>
<p>The rendered output looks like this:</p>
<ul>
<li>
<p>This is the first list item.</p>
</li>
<li>
<p>Here’s the second list item.</p>
<p>I need to add another paragraph below the second list item.</p>
</li>
<li>
<p>And here’s the third list item.</p>
</li>
</ul>
<h4 id="blockquotes-1">Blockquotes <a class="anchor" href="#blockquotes-1"> </a></h4>
<pre><code>* This is the first list item.
* Here's the second list item.
&gt; A blockquote would look great below the second list item.
* And here's the third list item.
</code></pre>
<p>The rendered output looks like this:</p>
<ul>
<li>
<p>This is the first list item.</p>
</li>
<li>
<p>Here’s the second list item.</p>
<blockquote>
<p>A blockquote would look great below the second list item.</p>
</blockquote>
</li>
<li>
<p>And here’s the third list item.</p>
</li>
</ul>
<h4 id="code-blocks">Code Blocks <a class="anchor" href="#code-blocks"> </a></h4>
<p><a href="https://www.markdownguide.org/basic-syntax/#code-blocks">Code blocks</a> are normally indented four spaces or one tab. When they’re in a list, indent them eight spaces or two tabs.</p>
<pre><code>1. Open the file.
2. Find the following code block on line 21:
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Test&lt;/title&gt;
&lt;/head&gt;
3. Update the title to match the name of your website.
</code></pre>
<p>The rendered output looks like this:</p>
<ol>
<li>
<p>Open the file.</p>
</li>
<li>
<p>Find the following code block on line 21:</p>
<pre><code> &lt;html&gt;
&lt;head&gt;
&lt;title&gt;Test&lt;/title&gt;
&lt;/head&gt;
</code></pre>
</li>
<li>
<p>Update the title to match the name of your website.</p>
</li>
</ol>
<h4 id="images">Images <a class="anchor" href="#images"> </a></h4>
<pre><code>1. Open the file containing the Linux mascot.
2. Marvel at its beauty.
![Tux, the Linux mascot](/assets/images/tux.png)
3. Close the file.
</code></pre>
<p>The rendered output looks like this:</p>
<ol>
<li>
<p>Open the file containing the Linux mascot.</p>
</li>
<li>
<p>Marvel at its beauty.</p>
<p><img src="https://mdg.imgix.net/assets/images/tux.png" alt="Tux, the Linux mascot" /></p>
</li>
<li>
<p>Close the file.</p>
</li>
</ol>
<h4 id="lists-1">Lists <a class="anchor" href="#lists-1"> </a></h4>
<p>You can nest an unordered list in an ordered list, or vice versa.</p>
<pre><code>1. First item
2. Second item
3. Third item
- Indented item
- Indented item
4. Fourth item
</code></pre>
<p>The rendered output looks like this:</p>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item
<ul>
<li>Indented item</li>
<li>Indented item</li>
</ul>
</li>
<li>Fourth item</li>
</ol>
<h2 id="code">Code <a class="anchor" href="#code"> </a></h2>
<p>To denote a word or phrase as code, enclose it in backticks (```).</p>
<table>
<thead>
<tr>
<th>Markdown</th>
<th>HTML</th>
<th>Rendered Output</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>At the command prompt, type </code>nano<code>.</code></td>
<td><code>At the command prompt, type &lt;code&gt;nano&lt;/code&gt;.</code></td>
<td>At the command prompt, type <code>nano</code>.</td>
</tr>
</tbody>
</table>
<h3 id="escaping-backticks">Escaping Backticks <a class="anchor" href="#escaping-backticks"> </a></h3>
<p>If the word or phrase you want to denote as code includes one or more backticks, you can escape it by enclosing the word or phrase in double backticks (````).</p>
<table>
<thead>
<tr>
<th>Markdown</th>
<th>HTML</th>
<th>Rendered Output</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Use `code` in your Markdown file.</code></td>
<td><code>&lt;code&gt;Use </code>code<code> in your Markdown file.&lt;/code&gt;</code></td>
<td><code>Use </code>code<code> in your Markdown file.</code></td>
</tr>
</tbody>
</table>
<h3 id="code-blocks-1">Code Blocks <a class="anchor" href="#code-blocks-1"> </a></h3>
<p>To create code blocks, indent every line of the block by at least four spaces or one tab.</p>
<pre><code> &lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;/html&gt;
</code></pre>
<p>The rendered output looks like this:</p>
<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;/html&gt;
</code></pre>
<p><strong>Note:</strong> To create code blocks without indenting lines, use <a href="https://www.markdownguide.org/extended-syntax/#fenced-code-blocks">fenced code blocks</a>.</p>
<h2 id="horizontal-rules">Horizontal Rules <a class="anchor" href="#horizontal-rules"> </a></h2>
<p>To create a horizontal rule, use three or more asterisks (<code>***</code>), dashes (<code>---</code>), or underscores (<code>___</code>) on a line by themselves.</p>
<pre><code>***
---
_________________
</code></pre>
<p>The rendered output of all three looks identical:</p>
<hr />
<h3 id="horizontal-rule-best-practices">Horizontal Rule Best Practices <a class="anchor" href="#horizontal-rule-best-practices"> </a></h3>
<p>For compatibility, put blank lines before and after horizontal rules.</p>
<table>
<thead>
<tr>
<th>✅ Do this</th>
<th>❌ Don&rsquo;t do this</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Try to put a blank line before...---...and after a horizontal rule.</code></td>
<td><code>Without blank lines, this would be a heading.---Don't do this!</code></td>
</tr>
</tbody>
</table>
<h2 id="links">Links <a class="anchor" href="#links"> </a></h2>
<p>To create a link, enclose the link text in brackets (e.g., <code>[Duck Duck Go]</code>) and then follow it immediately with the URL in parentheses (e.g., <code>(https://duckduckgo.com)</code>).</p>
<pre><code>My favorite search engine is [Duck Duck Go](https://duckduckgo.com).
</code></pre>
<p>The rendered output looks like this:</p>
<p>My favorite search engine is <a href="https://duckduckgo.com/">Duck Duck Go</a>.</p>
<p><strong>Note:</strong> To link to an element on the same page, see <a href="https://www.markdownguide.org/extended-syntax/#linking-to-heading-ids">linking to heading IDs</a>. To create a link that opens in a new tab or window, see the section on <a href="https://www.markdownguide.org/hacks/#link-targets">link targets</a>.</p>
<h3 id="adding-titles">Adding Titles <a class="anchor" href="#adding-titles"> </a></h3>
<p>You can optionally add a title for a link. This will appear as a tooltip when the user hovers over the link. To add a title, enclose it in quotation marks after the URL.</p>
<pre><code>My favorite search engine is [Duck Duck Go](https://duckduckgo.com &quot;The best search engine for privacy&quot;).
</code></pre>
<p>The rendered output looks like this:</p>
<p>My favorite search engine is <a href="https://duckduckgo.com/">Duck Duck Go</a>.</p>
<h3 id="urls-and-email-addresses">URLs and Email Addresses <a class="anchor" href="#urls-and-email-addresses"> </a></h3>
<p>To quickly turn a URL or email address into a link, enclose it in angle brackets.</p>
<pre><code>&lt;https://www.markdownguide.org&gt;
&lt;fake@example.com&gt;
</code></pre>
<p>The rendered output looks like this:</p>
<p><a href="https://www.markdownguide.org/">https://www.markdownguide.org</a><br />
<a href="mailto:fake@example.com">fake@example.com</a></p>
<h3 id="formatting-links">Formatting Links <a class="anchor" href="#formatting-links"> </a></h3>
<p>To <a href="https://www.markdownguide.org/basic-syntax/#emphasis">emphasize</a> links, add asterisks before and after the brackets and parentheses. To denote links as <a href="https://www.markdownguide.org/basic-syntax/#code">code</a>, add backticks in the brackets.</p>
<pre><code>I love supporting the **[EFF](https://eff.org)**.
This is the *[Markdown Guide](https://www.markdownguide.org)*.
See the section on [`code`](#code).
</code></pre>
<p>The rendered output looks like this:</p>
<p>I love supporting the <strong><a href="https://eff.org/">EFF</a></strong>.<br />
This is the <em><a href="https://www.markdownguide.org/">Markdown Guide</a></em>.<br />
See the section on <a href="https://www.markdownguide.org/basic-syntax/#code"><code>code</code></a>.</p>
<h3 id="reference-style-links">Reference-style Links <a class="anchor" href="#reference-style-links"> </a></h3>
<p>Reference-style links are a special kind of link that make URLs easier to display and read in Markdown. Reference-style links are constructed in two parts: the part you keep inline with your text and the part you store somewhere else in the file to keep the text easy to read.</p>
<h4 id="formatting-the-first-part-of-the-link">Formatting the First Part of the Link <a class="anchor" href="#formatting-the-first-part-of-the-link"> </a></h4>
<p>The first part of a reference-style link is formatted with two sets of brackets. The first set of brackets surrounds the text that should appear linked. The second set of brackets displays a label used to point to the link you’re storing elsewhere in your document.</p>
<p>Although not required, you can include a space between the first and second set of brackets. The label in the second set of brackets is not case sensitive and can include letters, numbers, spaces, or punctuation.</p>
<p>This means the following example formats are roughly equivalent for the first part of the link:</p>
<ul>
<li><code>[hobbit-hole][1]</code></li>
<li><code>[hobbit-hole] [1]</code></li>
</ul>
<h4 id="formatting-the-second-part-of-the-link">Formatting the Second Part of the Link <a class="anchor" href="#formatting-the-second-part-of-the-link"> </a></h4>
<p>The second part of a reference-style link is formatted with the following attributes:</p>
<ol>
<li>The label, in brackets, followed immediately by a colon and at least one space (e.g., <code>[label]: </code>).</li>
<li>The URL for the link, which you can optionally enclose in angle brackets.</li>
<li>The optional title for the link, which you can enclose in double quotes, single quotes, or parentheses.</li>
</ol>
<p>This means the following example formats are all roughly equivalent for the second part of the link:</p>
<ul>
<li><code>[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle</code></li>
<li><code>[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle &quot;Hobbit lifestyles&quot;</code></li>
<li><code>[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle 'Hobbit lifestyles'</code></li>
<li><code>[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle (Hobbit lifestyles)</code></li>
<li><code>[1]: &lt;https://en.wikipedia.org/wiki/Hobbit#Lifestyle&gt; &quot;Hobbit lifestyles&quot;</code></li>
<li><code>[1]: &lt;https://en.wikipedia.org/wiki/Hobbit#Lifestyle&gt; 'Hobbit lifestyles'</code></li>
<li><code>[1]: &lt;https://en.wikipedia.org/wiki/Hobbit#Lifestyle&gt; (Hobbit lifestyles)</code></li>
</ul>
<p>You can place this second part of the link anywhere in your Markdown document. Some people place them immediately after the paragraph in which they appear while other people place them at the end of the document (like endnotes or footnotes).</p>
<h4 id="an-example-putting-the-parts-together">An Example Putting the Parts Together <a class="anchor" href="#an-example-putting-the-parts-together"> </a></h4>
<p>Say you add a URL as a <a href="https://www.markdownguide.org/basic-syntax/#links">standard URL link</a> to a paragraph and it looks like this in Markdown:</p>
<pre><code>In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends
of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to
eat: it was a [hobbit-hole](https://en.wikipedia.org/wiki/Hobbit#Lifestyle &quot;Hobbit lifestyles&quot;), and that means comfort.
</code></pre>
<p>Though it may point to interesting additional information, the URL as displayed really doesn’t add much to the existing raw text other than making it harder to read. To fix that, you could format the URL like this instead:</p>
<pre><code>In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends
of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to
eat: it was a [hobbit-hole][1], and that means comfort.
[1]: &lt;https://en.wikipedia.org/wiki/Hobbit#Lifestyle&gt; &quot;Hobbit lifestyles&quot;
</code></pre>
<p>In both instances above, the rendered output would be identical:</p>
<blockquote>
<p>In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to eat: it was a <a href="https://en.wikipedia.org/wiki/Hobbit#Lifestyle">hobbit-hole</a>, and that means comfort.</p>
</blockquote>
<p>and the HTML for the link would be:</p>
<pre><code>&lt;a href=&quot;https://en.wikipedia.org/wiki/Hobbit#Lifestyle&quot; title=&quot;Hobbit lifestyles&quot;&gt;hobbit-hole&lt;/a&gt;
</code></pre>
<h3 id="link-best-practices">Link Best Practices <a class="anchor" href="#link-best-practices"> </a></h3>
<p>Markdown applications don’t agree on how to handle spaces in the middle of a URL. For compatibility, try to URL encode any spaces with <code>%20</code>. Alternatively, if your Markdown application <a href="https://www.markdownguide.org/basic-syntax/#html">supports HTML</a>, you could use the <code>a</code> HTML tag.</p>
<table>
<thead>
<tr>
<th>✅ Do this</th>
<th>❌ Don&rsquo;t do this</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>[link](https://www.example.com/my%20great%20page)&lt;a href=&quot;https://www.example.com/my great page&quot;&gt;link&lt;/a&gt;</code></td>
<td><code>[link](https://www.example.com/my great page)</code></td>
</tr>
</tbody>
</table>
<h2 id="images-1">Images <a class="anchor" href="#images-1"> </a></h2>
<p>To add an image, add an exclamation mark (<code>!</code>), followed by alt text in brackets, and the path or URL to the image asset in parentheses. You can optionally add a title in quotation marks after the path or URL.</p>
<pre><code>![The San Juan Mountains are beautiful!](/assets/images/san-juan-mountains.jpg &quot;San Juan Mountains&quot;)
</code></pre>
<p>The rendered output looks like this:</p>
<p><img src="https://mdg.imgix.net/assets/images/san-juan-mountains.jpg" alt="The San Juan Mountains are beautiful!" /></p>
<p><strong>Note:</strong> To resize an image, see the section on <a href="https://www.markdownguide.org/hacks/#image-size">image size</a>. To add a caption, see the section on <a href="https://www.markdownguide.org/hacks/#image-captions">image captions</a>.</p>
<h3 id="linking-images">Linking Images <a class="anchor" href="#linking-images"> </a></h3>
<p>To add a link to an image, enclose the Markdown for the image in brackets, and then add the link in parentheses.</p>
<pre><code>[![An old rock in the desert](/assets/images/shiprock.jpg &quot;Shiprock, New Mexico by Beau Rogers&quot;)](https://www.flickr.com/photos/beaurogers/31833779864/in/photolist-Qv3rFw-34mt9F-a9Cmfy-5Ha3Zi-9msKdv-o3hgjr-hWpUte-4WMsJ1-KUQ8N-deshUb-vssBD-6CQci6-8AFCiD-zsJWT-nNfsgB-dPDwZJ-bn9JGn-5HtSXY-6CUhAL-a4UTXB-ugPum-KUPSo-fBLNm-6CUmpy-4WMsc9-8a7D3T-83KJev-6CQ2bK-nNusHJ-a78rQH-nw3NvT-7aq2qf-8wwBso-3nNceh-ugSKP-4mh4kh-bbeeqH-a7biME-q3PtTf-brFpgb-cg38zw-bXMZc-nJPELD-f58Lmo-bXMYG-bz8AAi-bxNtNT-bXMYi-bXMY6-bXMYv)
</code></pre>
<p>The rendered output looks like this:</p>
<p><a href="https://www.flickr.com/photos/beaurogers/31833779864/in/photolist-Qv3rFw-34mt9F-a9Cmfy-5Ha3Zi-9msKdv-o3hgjr-hWpUte-4WMsJ1-KUQ8N-deshUb-vssBD-6CQci6-8AFCiD-zsJWT-nNfsgB-dPDwZJ-bn9JGn-5HtSXY-6CUhAL-a4UTXB-ugPum-KUPSo-fBLNm-6CUmpy-4WMsc9-8a7D3T-83KJev-6CQ2bK-nNusHJ-a78rQH-nw3NvT-7aq2qf-8wwBso-3nNceh-ugSKP-4mh4kh-bbeeqH-a7biME-q3PtTf-brFpgb-cg38zw-bXMZc-nJPELD-f58Lmo-bXMYG-bz8AAi-bxNtNT-bXMYi-bXMY6-bXMYv"><img src="https://mdg.imgix.net/assets/images/shiprock.jpg" alt="An old rock in the desert" /></a></p>
<h2 id="escaping-characters">Escaping Characters <a class="anchor" href="#escaping-characters"> </a></h2>
<p>To display a literal character that would otherwise be used to format text in a Markdown document, add a backslash (<code>\</code>) in front of the character.</p>
<pre><code>\* Without the backslash, this would be a bullet in an unordered list.
</code></pre>
<p>The rendered output looks like this:</p>
<p>* Without the backslash, this would be a bullet in an unordered list.</p>
<h3 id="characters-you-can-escape">Characters You Can Escape <a class="anchor" href="#characters-you-can-escape"> </a></h3>
<p>You can use a backslash to escape the following characters.</p>
<table>
<thead>
<tr>
<th>Character</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>\</td>
<td>backslash</td>
</tr>
<tr>
<td>`</td>
<td>backtick (see also <a href="https://www.markdownguide.org/basic-syntax/#escaping-backticks">escaping backticks in code</a>)</td>
</tr>
<tr>
<td>*</td>
<td>asterisk</td>
</tr>
<tr>
<td>_</td>
<td>underscore</td>
</tr>
<tr>
<td>{ }</td>
<td>curly braces</td>
</tr>
<tr>
<td>[ ]</td>
<td>brackets</td>
</tr>
<tr>
<td>&lt; &gt;</td>
<td>angle brackets</td>
</tr>
<tr>
<td>( )</td>
<td>parentheses</td>
</tr>
<tr>
<td>#</td>
<td>pound sign</td>
</tr>
<tr>
<td>+</td>
<td>plus sign</td>
</tr>
<tr>
<td>-</td>
<td>minus sign (hyphen)</td>
</tr>
<tr>
<td>.</td>
<td>dot</td>
</tr>
<tr>
<td>!</td>
<td>exclamation mark</td>
</tr>
<tr>
<td>|</td>
<td>pipe (see also <a href="https://www.markdownguide.org/extended-syntax/#escaping-pipe-characters-in-tables">escaping pipe in tables</a>)</td>
</tr>
</tbody>
</table>
<h2 id="html">HTML <a class="anchor" href="#html"> </a></h2>
<p>Many Markdown applications allow you to use HTML tags in Markdown-formatted text. This is helpful if you prefer certain HTML tags to Markdown syntax. For example, some people find it easier to use HTML tags for images. Using HTML is also helpful when you need to change the attributes of an element, like specifying the <a href="https://www.markdownguide.org/hacks/#color">color of text</a> or changing the width of an image.</p>
<p>To use HTML, place the tags in the text of your Markdown-formatted file.</p>
<pre><code>This **word** is bold. This &lt;em&gt;word&lt;/em&gt; is italic.
</code></pre>
<p>The rendered output looks like this:</p>
<p>This <strong>word</strong> is bold. This <em>word</em> is italic.</p>
<h3 id="html-best-practices">HTML Best Practices <a class="anchor" href="#html-best-practices"> </a></h3>
<p>For security reasons, not all Markdown applications support HTML in Markdown documents. When in doubt, check your Markdown application’s documentation. Some applications support only a subset of HTML tags.</p>
<p>Use blank lines to separate block-level HTML elements like <code>&lt;div&gt;</code>, <code>&lt;table&gt;</code>, <code>&lt;pre&gt;</code>, and <code>&lt;p&gt;</code> from the surrounding content. Try not to indent the tags with tabs or spaces — that can interfere with the formatting.</p>
<p>You can’t use Markdown syntax inside block-level HTML tags. For example, <code>&lt;p&gt;italic and **bold**&lt;/p&gt;</code> won’t work.</p>
</article>
<a href="TestPage.md?edit" rel="nofollow" target="_self">✍️ Edit this page</a>
<footer>
Copyright &copy; James Mills ·
Last modified <time datetime="2024-03-03T05:40:12Z+00:00
">Sun Mar 3 05:40:12 UTC 2024
</time> ·
Built with <a href="https://git.mills.io/prologic/zs">zs</a>
</footer>
<script type="application/javascript" src="/assets/js/highlight.js"></script>
<script type="application/javascript" src="/assets/js/umbrella.js"></script>
<script type="application/javascript" src="/assets/js/live.js"></script>
<script>
hljs.highlightAll();
</script>
</body>
</html>

BIN
android-chrome-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
android-chrome-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

995
assets/css/bahunya.css Normal file
View File

@ -0,0 +1,995 @@
:root {
--background-body: #0d1117;
--background: rgb(22, 27, 34);
--background-bright: rgba(240, 246, 252, 0.15);
--background-alt: #1a242f;
--selection: #1c76c5;
--text-main: rgb(201, 209, 217);
--text-bright: rgb(227, 233, 240);
--text-muted: rgb(139, 148, 158);
--links: #e3bc5e;
--focus: rgb(56, 139, 253);
--focus-background: rgb(12, 45, 107);
--border: rgb(33, 37, 44);
--border-muted: rgb(33, 38, 45);
--border-bright: rgb(139, 148, 158);
--button-hover: #324759;
--form-placeholder: #a9a9a9;
--select-arrow: svg-load("./assets/select-arrow.svg", fill: #efefef);
/* Fonts */
--monospace: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
--sans-serif: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji",
sans-serif;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji",
sans-serif;
font-family: var(--sans-serif);
line-height: 1.7;
max-width: 50rem;
margin: 6rem auto;
padding: 0 10px;
word-wrap: break-word;
color: rgb(201, 209, 217);
color: var(--text-main);
background: #0d1117;
background: var(--background-body);
text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
h4,
h5 {
margin: 3rem 0 1.38rem;
line-height: 1.3;
}
h1 {
font-size: 2.488rem;
}
h2 {
font-size: 2.074rem;
}
h3 {
font-size: 1.728rem;
}
h4 {
font-size: 1.44rem;
}
h5 {
font-size: 1.2rem;
}
h6 {
font-size: 1rem;
}
small {
font-size: 0.833rem;
}
h1 {
color: rgb(227, 233, 240);
color: var(--text-bright);
}
h2 {
color: rgb(227, 233, 240);
color: var(--text-bright);
}
h3 {
color: rgb(227, 233, 240);
color: var(--text-bright);
}
h4 {
color: rgb(227, 233, 240);
color: var(--text-bright);
}
h5 {
color: rgb(227, 233, 240);
color: var(--text-bright);
}
h6 {
color: rgb(227, 233, 240);
color: var(--text-bright);
}
strong {
color: rgb(227, 233, 240);
color: var(--text-bright);
}
blockquote {
border-left: 4px solid rgb(56, 139, 253);
border-left: 4px solid var(--focus);
margin: 1.5em 0;
padding: 0em 1em;
}
blockquote> :first-child {
margin-top: 0;
}
blockquote> :last-child {
margin-bottom: 0;
}
blockquote>footer {
border: 0;
}
address {
font-style: normal;
}
a[href^="mailto\:"]::before {
content: "📧 ";
}
a[href^="tel\:"]::before {
content: "📞 ";
}
a[href^="sms\:"]::before {
content: "💬 ";
}
mark {
background-color: #e3bc5e;
background-color: var(--links);
border-radius: 2px;
padding: 0 2px 0 2px;
}
ul,
ol {
padding-left: 2em;
}
aside {
width: 40%;
padding-left: .5rem;
margin-left: .5rem;
float: right;
border-left: 2px solid rgb(56, 139, 253);
border-left: 2px solid var(--focus);
font-style: italic;
}
aside>p {
margin: .5rem;
}
button,
select,
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="checkbox"],
input[type="range"],
input[type="radio"] {
cursor: pointer;
}
input:not([type="checkbox"]):not([type="radio"]),
select {
display: block;
}
input {
color: rgb(227, 233, 240);
color: var(--text-bright);
background-color: rgb(22, 27, 34);
background-color: var(--background);
font-family: inherit;
font-size: inherit;
margin-right: 6px;
margin-bottom: 6px;
padding: 10px;
border: none;
border-radius: 6px;
outline: none;
border: 1px solid rgb(33, 38, 45);
border: 1px solid var(--border-muted);
}
textarea {
color: rgb(227, 233, 240);
color: var(--text-bright);
background-color: rgb(22, 27, 34);
background-color: var(--background);
font-family: inherit;
font-size: inherit;
margin-right: 6px;
margin-bottom: 6px;
padding: 10px;
border: none;
border-radius: 6px;
outline: none;
border: 1px solid rgb(33, 38, 45);
border: 1px solid var(--border-muted);
}
select {
color: rgb(227, 233, 240);
color: var(--text-bright);
background-color: rgb(22, 27, 34);
background-color: var(--background);
font-family: inherit;
font-size: inherit;
margin-right: 6px;
margin-bottom: 6px;
padding: 10px;
border: none;
border-radius: 6px;
outline: none;
border: 1px solid rgb(33, 38, 45);
border: 1px solid var(--border-muted);
}
input[type="color"] {
min-height: 2rem;
padding: 8px;
cursor: pointer;
}
input[type="checkbox"],
input[type="radio"] {
height: 1.2em;
width: 1em;
}
input[type="radio"] {
border-radius: 100%;
}
input {
vertical-align: top;
}
label {
vertical-align: middle;
margin-bottom: 4px;
display: inline-block;
}
input:not([type="checkbox"]):not([type="radio"]),
input[type="range"],
select,
button,
textarea {
-webkit-appearance: none;
}
textarea {
display: block;
margin-right: 0;
resize: vertical;
width: 100%;
}
textarea:not([cols]) {
width: 100%;
}
textarea:not([rows]) {
min-height: 40px;
height: 140px;
}
select {
background: rgb(22, 27, 34) svg-load("./assets/select-arrow.svg", fill: #efefef) calc(100% - 12px) 50% / 12px no-repeat;
background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
padding-right: 35px;
}
select::-ms-expand {
display: none;
}
select[multiple] {
padding-right: 10px;
background-image: none;
overflow-y: auto;
}
input:focus {
border: 1px solid rgb(56, 139, 253);
border: 1px solid var(--focus);
box-shadow: 0 0 0 3px rgb(12, 45, 107);
box-shadow: 0 0 0 3px var(--focus-background);
}
select:focus {
border: 1px solid rgb(56, 139, 253);
border: 1px solid var(--focus);
box-shadow: 0 0 0 3px rgb(12, 45, 107);
box-shadow: 0 0 0 3px var(--focus-background);
}
textarea:focus {
border: 1px solid rgb(56, 139, 253);
border: 1px solid var(--focus);
box-shadow: 0 0 0 3px rgb(12, 45, 107);
box-shadow: 0 0 0 3px var(--focus-background);
}
input:disabled,
select:disabled,
button:disabled,
textarea:disabled {
cursor: not-allowed;
opacity: 0.5;
}
::-moz-placeholder {
color: #a9a9a9;
color: var(--form-placeholder);
}
:-ms-input-placeholder {
color: #a9a9a9;
color: var(--form-placeholder);
}
::placeholder {
color: #a9a9a9;
color: var(--form-placeholder);
}
fieldset {
border: 1px rgb(33, 37, 44) solid;
border: 1px var(--border) solid;
border-radius: 6px;
margin: 0;
margin-bottom: 12px;
padding: 10px 20px;
}
legend {
font-size: 0.9em;
font-weight: 600;
}
input[type="range"] {
margin: 10px 0;
padding: 10px 0;
background: transparent;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 9.5px;
-webkit-transition: 0.2s;
transition: 0.2s;
background: rgb(22, 27, 34);
background: var(--background);
border-radius: 3px;
}
input[type="range"]::-webkit-slider-thumb {
box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d;
height: 20px;
width: 20px;
border-radius: 50%;
background: rgb(33, 37, 44);
background: var(--border);
-webkit-appearance: none;
margin-top: -7px;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
background: rgb(22, 27, 34);
background: var(--background);
}
input[type="range"]::-moz-range-track {
width: 100%;
height: 9.5px;
-moz-transition: 0.2s;
transition: 0.2s;
background: rgb(22, 27, 34);
background: var(--background);
border-radius: 3px;
}
input[type="range"]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
height: 20px;
width: 20px;
border-radius: 50%;
background: rgb(33, 37, 44);
background: var(--border);
}
input[type="range"]::-ms-track {
width: 100%;
height: 9.5px;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type="range"]::-ms-fill-lower {
background: rgb(22, 27, 34);
background: var(--background);
border: 0.2px solid #010101;
border-radius: 3px;
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
}
input[type="range"]::-ms-fill-upper {
background: rgb(22, 27, 34);
background: var(--background);
border: 0.2px solid #010101;
border-radius: 3px;
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
}
input[type="range"]::-ms-thumb {
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
border: 1px solid #000;
height: 20px;
width: 20px;
border-radius: 50%;
background: rgb(33, 37, 44);
background: var(--border);
}
input[type="range"]:focus::-ms-fill-lower {
background: rgb(22, 27, 34);
background: var(--background);
}
input[type="range"]:focus::-ms-fill-upper {
background: rgb(22, 27, 34);
background: var(--background);
}
a {
text-decoration: none;
color: #e3bc5e;
color: var(--links);
}
a:hover {
text-decoration: underline;
}
code {
font-size: 85%;
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
font-family: var(--monospace);
}
samp {
font-size: 85%;
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
font-family: var(--monospace);
}
tt {
font-size: 85%;
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
font-family: var(--monospace);
}
var {
font-size: 85%;
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
font-family: var(--monospace);
}
kbd {
font-size: 85%;
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
font-family: var(--monospace);
}
code,
samp,
tt,
kbd {
padding: 0.2em 0.4em;
border-radius: 0.4em;
}
code {
background: rgba(240, 246, 252, 0.15);
background: var(--background-bright);
}
samp {
background: rgba(240, 246, 252, 0.15);
background: var(--background-bright);
}
tt {
background: rgba(240, 246, 252, 0.15);
background: var(--background-bright);
}
pre {
display: block;
overflow-x: auto;
}
pre>code {
background: rgb(22, 27, 34);
background: var(--background);
padding: 1em;
display: block;
overflow-x: auto;
}
var {
color: rgb(56, 139, 253);
color: var(--focus);
font-style: normal;
}
kbd {
border: 1px solid rgb(139, 148, 158);
border: 1px solid var(--border-bright);
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
font-family: var(--monospace);
}
img,
video {
max-width: 100%;
height: auto;
}
hr {
border: none;
border-top: 1px solid rgb(139, 148, 158);
border-top: 1px solid var(--border-bright);
margin: 1em 0;
}
table {
border-collapse: collapse;
margin-bottom: 10px;
width: 100%;
table-layout: fixed;
overflow-x: auto;
display: block;
}
table caption {
text-align: left;
}
td,
th {
padding: 6px;
text-align: left;
vertical-align: top;
word-wrap: break-word;
}
thead {
border-bottom: 1px solid rgb(139, 148, 158);
border-bottom: 1px solid var(--border-bright);
}
tfoot {
border-top: 1px solid rgb(139, 148, 158);
border-top: 1px solid var(--border-bright);
}
tbody tr:nth-child(even) {
background-color: rgb(22, 27, 34);
background-color: var(--background);
}
tbody tr:nth-child(even) button {
background-color: #1a242f;
background-color: var(--background-alt);
}
tbody tr:nth-child(even) button:hover {
background-color: #0d1117;
background-color: var(--background-body);
}
::-moz-selection {
background-color: #1c76c5;
background-color: var(--selection);
color: rgb(227, 233, 240);
color: var(--text-bright);
}
::selection {
background-color: #1c76c5;
background-color: var(--selection);
color: rgb(227, 233, 240);
color: var(--text-bright);
}
details summary {
padding: 0.5rem 0;
border-top: 1px solid rgb(33, 37, 44);
border-top: 1px solid var(--border);
cursor: pointer;
font-size: 1.2rem;
outline: none;
/* font-weight: 300; */
/* list-style: none; */
}
/* details summary:after {
content: "+";
color: white;
position: absolute;
font-size: 1.75rem;
line-height: 0;
margin-top: 0.75rem;
right: 0;
font-weight: 200;
transform-origin: center;
transition: 200ms linear;
}
details[open] summary:after {
transform: rotate(45deg);
font-size: 2rem;
} */
summary:hover,
summary:focus {
text-decoration: underline;
}
details> :not(summary) {
/* margin-top: 0; */
}
summary::-webkit-details-marker {
/* color: var(--text-main); */
}
dialog {
background-color: #0d1117;
background-color: var(--background-body);
color: rgb(201, 209, 217);
color: var(--text-main);
border: none;
border-radius: 6px;
border: 1px solid rgb(33, 37, 44);
border: 1px solid var(--border);
padding: 10px 30px;
}
dialog>header:first-child {
border-radius: 6px 6px 0 0;
margin: -10px -30px 10px;
padding: 10px;
text-align: center;
border-bottom: 1px solid rgb(33, 37, 44);
border-bottom: 1px solid var(--border);
}
dialog::-webkit-backdrop {
background: #0000009c;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
dialog::backdrop {
background: #0000009c;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
footer {
border-top: 1px solid rgb(33, 37, 44);
border-top: 1px solid var(--border);
padding-top: 10px;
color: rgb(139, 148, 158);
color: var(--text-muted);
}
body>footer {
margin-top: 40px;
}
@media print {
body,
pre,
code,
summary,
details,
button,
input,
textarea {
background-color: #fff;
}
button,
input,
textarea {
border: 1px solid #000;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
button,
input,
textarea,
footer,
summary,
strong {
color: #000;
}
summary::marker {
color: #000;
}
summary::-webkit-details-marker {
color: #000;
}
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
a {
color: #00f;
text-decoration: underline;
}
}
body nav:first-of-type {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
padding: 0 calc((100vw - 50rem) / 2);
display: flex;
align-items: center;
width: 100%;
z-index: 999;
}
body nav:first-of-type:before {
/* https://stackoverflow.com/questions/63907743/parent-element-backdrop-filter-does-not-apply-for-its-child */
backdrop-filter: saturate(180%) blur(5px);
-webkit-backdrop-filter: saturate(180%) blur(5px);
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
body nav:first-of-type #brand {
margin-right: auto;
font-size: 1.1rem;
}
body nav:first-of-type a {
margin: 10px;
display: inline-block;
}
body nav:first-of-type ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
body nav:first-of-type>ul>li {
float: left;
}
body nav:first-of-type ul li ul {
display: none;
position: absolute;
background: rgba(0, 0, 0, 0.5);
/* z-index: 1; */
-webkit-backdrop-filter: saturate(180%) blur(5px);
backdrop-filter: saturate(180%) blur(5px);
}
body nav:first-of-type ul li:hover ul {
display: block;
}
section {
margin: 20px 0;
}
article {
border: 1px solid rgb(33, 37, 44);
border: 1px solid var(--border);
padding: 20px;
margin: 10px 0;
border-radius: 0.4em;
}
article> :first-child {
margin-top: 0;
}
article> :first-child> :first-child {
margin-top: 0;
}
article> :last-child {
margin-bottom: 0;
}
article> :last-child> :last-child {
margin-bottom: 0;
}
input[type="submit"] {
background: rgba(240, 246, 252, 0.15);
background: var(--background-bright);
/* border: 1px solid rgb(48, 54, 61); */
border: 1px solid rgb(48, 54, 61);
color: rgb(227, 233, 240);
color: var(--text-bright);
font-family: inherit;
font-size: inherit;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
padding: 5px 16px;
border-radius: 6px;
outline: none;
font-size: 87.5%;
}
input[type="reset"] {
background: rgba(240, 246, 252, 0.15);
background: var(--background-bright);
/* border: 1px solid rgb(48, 54, 61); */
border: 1px solid rgb(48, 54, 61);
color: rgb(227, 233, 240);
color: var(--text-bright);
font-family: inherit;
font-size: inherit;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
padding: 5px 16px;
border-radius: 6px;
outline: none;
font-size: 87.5%;
}
input[type="button"] {
background: rgba(240, 246, 252, 0.15);
background: var(--background-bright);
/* border: 1px solid rgb(48, 54, 61); */
border: 1px solid rgb(48, 54, 61);
color: rgb(227, 233, 240);
color: var(--text-bright);
font-family: inherit;
font-size: inherit;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
padding: 5px 16px;
border-radius: 6px;
outline: none;
font-size: 87.5%;
}
button {
background: rgba(240, 246, 252, 0.15);
background: var(--background-bright);
/* border: 1px solid rgb(48, 54, 61); */
border: 1px solid rgb(48, 54, 61);
color: rgb(227, 233, 240);
color: var(--text-bright);
font-family: inherit;
font-size: inherit;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
padding: 5px 16px;
border-radius: 6px;
outline: none;
font-size: 87.5%;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover {
/* background-color: rgb(48, 54, 61); */
border-color: rgb(139, 148, 158);
filter: brightness(115%);
}
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus,
button:focus {
border: 1px solid rgb(139, 148, 158);
box-shadow: none;
}
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
button:active {
background: none;
}
input[type="submit"]:disabled,
input[type="reset"]:disabled,
input[type="button"]:disabled,
button:disabled {
border-color: rgb(48, 54, 61);
}
/*# sourceMappingURL=bahunya.css.map */
iframe {
width: 100%;
border: none;
}
audio,
video,
embed,
object {
width: 100%;
}

35
assets/css/board.css Normal file
View File

@ -0,0 +1,35 @@
.board {
display: grid;
column-gap: 50px;
justify-items: center;
}
/* Display long board titles without extending first grid column. Will display at least 6 columns */
.board h1 {
grid-column: 1/6;
justify-self: left;
padding-left: 5%;
}
.board h2 {
grid-row: 2;
}
/* Disable anchor hover effect */
.board h2:hover .anchor:before {
display: none;
}
.board ul {
grid-row: 3;
padding-left: 0;
}
.board li {
display: block;
border: 1px solid;
padding: 15px;
margin-bottom: 30px;
text-align: center;
border-radius: 25px;
}

9
assets/css/highlight.css Normal file
View File

@ -0,0 +1,9 @@
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
Theme: GitHub Dark Dimmed
Description: Dark dimmed theme as seen on github.com
Author: github.com
Maintainer: @Hirse
Updated: 2021-05-15
Colors taken from GitHub's CSS
*/.hljs{color:#adbac7;background:#22272e}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#f47067}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#dcbdfb}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#6cb6ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#96d0ff}.hljs-built_in,.hljs-symbol{color:#f69d50}.hljs-code,.hljs-comment,.hljs-formula{color:#768390}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#8ddb8c}.hljs-subst{color:#adbac7}.hljs-section{color:#316dca;font-weight:700}.hljs-bullet{color:#eac55f}.hljs-emphasis{color:#adbac7;font-style:italic}.hljs-strong{color:#adbac7;font-weight:700}.hljs-addition{color:#b4f1b4;background-color:#1b4721}.hljs-deletion{color:#ffd8d3;background-color:#78191b}

32
assets/css/site.css Normal file
View File

@ -0,0 +1,32 @@
/* Anchors */
h1:hover .anchor:before,
h2:hover .anchor:before,
h3:hover .anchor:before,
h4:hover .anchor:before,
h5:hover .anchor:before,
h6:hover .anchor:before {
width: 16px;
height: 16px;
content: ' ';
display: inline-block;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
}
/* Fences */
.blue {
background-color: steelblue;
padding: 5px;
}
#insideme {
color: yellow;
}
.red {
background-color: red;
}

1202
assets/js/highlight.js Normal file
View File

File diff suppressed because one or more lines are too long

233
assets/js/live.js Normal file
View File

@ -0,0 +1,233 @@
/*
Live.js - One script closer to Designing in the Browser
Written for Handcraft.com by Martin Kool (@mrtnkl).
Version 4.
Recent change: Made stylesheet and mimetype checks case insensitive.
http://livejs.com
http://livejs.com/license (MIT)
@livejs
Include live.js#css to monitor css changes only.
Include live.js#js to monitor js changes only.
Include live.js#html to monitor html changes only.
Mix and match to monitor a preferred combination such as live.js#html,css
By default, just include live.js to monitor all css, js and html changes.
Live.js can also be loaded as a bookmarklet. It is best to only use it for CSS then,
as a page reload due to a change in html or css would not re-include the bookmarklet.
To monitor CSS and be notified that it has loaded, include it as: live.js#css,notify
*/
(function () {
var headers = { "Etag": 1, "Last-Modified": 1, "Content-Length": 1, "Content-Type": 1 },
resources = {},
pendingRequests = {},
currentLinkElements = {},
oldLinkElements = {},
interval = 1000,
loaded = false,
active = { "html": 1, "css": 1, "js": 1 };
var Live = {
// performs a cycle per interval
heartbeat: function () {
if (document.body) {
// make sure all resources are loaded on first activation
if (!loaded) Live.loadresources();
Live.checkForChanges();
}
setTimeout(Live.heartbeat, interval);
},
// loads all local css and js resources upon first activation
loadresources: function () {
// helper method to assert if a given url is local
function isLocal(url) {
var loc = document.location,
reg = new RegExp("^\\.|^\/(?!\/)|^[\\w]((?!://).)*$|" + loc.protocol + "//" + loc.host);
return url.match(reg);
}
// gather all resources
var scripts = document.getElementsByTagName("script"),
links = document.getElementsByTagName("link"),
uris = [];
// track local js urls
for (var i = 0; i < scripts.length; i++) {
var script = scripts[i], src = script.getAttribute("src");
if (src && isLocal(src))
uris.push(src);
if (src && src.match(/\blive.js#/)) {
for (var type in active)
active[type] = src.match("[#,|]" + type) != null
if (src.match("notify"))
alert("Live.js is loaded.");
}
}
if (!active.js) uris = [];
if (active.html) uris.push(document.location.href);
// track local css urls
for (var i = 0; i < links.length && active.css; i++) {
var link = links[i], rel = link.getAttribute("rel"), href = link.getAttribute("href", 2);
if (href && rel && rel.match(new RegExp("stylesheet", "i")) && isLocal(href)) {
uris.push(href);
currentLinkElements[href] = link;
}
}
// initialize the resources info
for (var i = 0; i < uris.length; i++) {
var url = uris[i];
Live.getHead(url, function (url, info) {
resources[url] = info;
});
}
// add rule for morphing between old and new css files
var head = document.getElementsByTagName("head")[0],
style = document.createElement("style"),
rule = "transition: all .3s ease-out;"
css = [".livejs-loading * { ", rule, " -webkit-", rule, "-moz-", rule, "-o-", rule, "}"].join('');
style.setAttribute("type", "text/css");
head.appendChild(style);
style.styleSheet ? style.styleSheet.cssText = css : style.appendChild(document.createTextNode(css));
// yep
loaded = true;
},
// check all tracking resources for changes
checkForChanges: function () {
for (var url in resources) {
if (pendingRequests[url])
continue;
Live.getHead(url, function (url, newInfo) {
var oldInfo = resources[url],
hasChanged = false;
resources[url] = newInfo;
for (var header in oldInfo) {
// do verification based on the header type
var oldValue = oldInfo[header],
newValue = newInfo[header],
contentType = newInfo["Content-Type"];
switch (header.toLowerCase()) {
case "etag":
if (!newValue) break;
// fall through to default
default:
hasChanged = oldValue != newValue;
break;
}
// if changed, act
if (hasChanged) {
Live.refreshResource(url, contentType);
break;
}
}
});
}
},
// act upon a changed url of certain content type
refreshResource: function (url, type) {
switch (type.toLowerCase()) {
// css files can be reloaded dynamically by replacing the link element
case "text/css":
var link = currentLinkElements[url],
html = document.body.parentNode,
head = link.parentNode,
next = link.nextSibling,
newLink = document.createElement("link");
html.className = html.className.replace(/\s*livejs\-loading/gi, '') + ' livejs-loading';
newLink.setAttribute("type", "text/css");
newLink.setAttribute("rel", "stylesheet");
newLink.setAttribute("href", url + "?now=" + new Date() * 1);
next ? head.insertBefore(newLink, next) : head.appendChild(newLink);
currentLinkElements[url] = newLink;
oldLinkElements[url] = link;
// schedule removal of the old link
Live.removeoldLinkElements();
break;
// check if an html resource is our current url, then reload
case "text/html":
if (url != document.location.href)
return;
// local javascript changes cause a reload as well
case "text/javascript":
case "application/javascript":
case "application/x-javascript":
document.location.reload();
}
},
// removes the old stylesheet rules only once the new one has finished loading
removeoldLinkElements: function () {
var pending = 0;
for (var url in oldLinkElements) {
// if this sheet has any cssRules, delete the old link
try {
var link = currentLinkElements[url],
oldLink = oldLinkElements[url],
html = document.body.parentNode,
sheet = link.sheet || link.styleSheet,
rules = sheet.rules || sheet.cssRules;
if (rules.length >= 0) {
oldLink.parentNode.removeChild(oldLink);
delete oldLinkElements[url];
setTimeout(function () {
html.className = html.className.replace(/\s*livejs\-loading/gi, '');
}, 100);
}
} catch (e) {
pending++;
}
if (pending) setTimeout(Live.removeoldLinkElements, 50);
}
},
// performs a HEAD request and passes the header info to the given callback
getHead: function (url, callback) {
pendingRequests[url] = true;
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XmlHttp");
xhr.open("HEAD", url, true);
xhr.onreadystatechange = function () {
delete pendingRequests[url];
if (xhr.readyState == 4 && xhr.status != 304) {
xhr.getAllResponseHeaders();
var info = {};
for (var h in headers) {
var value = xhr.getResponseHeader(h);
// adjust the simple Etag variant to match on its significant part
if (h.toLowerCase() == "etag" && value) value = value.replace(/^W\//, '');
if (h.toLowerCase() == "content-type" && value) value = value.replace(/^(.*?);.*?$/i, "$1");
info[h] = value;
}
callback(url, info);
}
}
xhr.send();
}
};
// start listening
if (document.location.protocol != "file:") {
if (!window.liveJsLoaded)
Live.heartbeat();
window.liveJsLoaded = true;
}
else if (window.console)
console.log("Live.js doesn't support the file protocol. It needs http.");
})();

806
assets/js/umbrella.js Normal file
View File

@ -0,0 +1,806 @@
// Umbrella JS http://umbrellajs.com/
// -----------
// Small, lightweight jQuery alternative
// @author Francisco Presencia Fandos https://francisco.io/
// @inspiration http://youmightnotneedjquery.com/
// Initialize the library
var u = function (parameter, context) {
// Make it an instance of u() to avoid needing 'new' as in 'new u()' and just
// use 'u().bla();'.
// @reference http://stackoverflow.com/q/24019863
// @reference http://stackoverflow.com/q/8875878
if (!(this instanceof u)) {
return new u(parameter, context);
}
// No need to further processing it if it's already an instance
if (parameter instanceof u) {
return parameter;
}
// Parse it as a CSS selector if it's a string
if (typeof parameter === 'string') {
parameter = this.select(parameter, context);
}
// If we're referring a specific node as in on('click', function(){ u(this) })
// or the select() function returned a single node such as in '#id'
if (parameter && parameter.nodeName) {
parameter = [parameter];
}
// Convert to an array, since there are many 'array-like' stuff in js-land
this.nodes = this.slice(parameter);
};
// Map u(...).length to u(...).nodes.length
u.prototype = {
get length () {
return this.nodes.length;
}
};
// This made the code faster, read "Initializing instance variables" in
// https://developers.google.com/speed/articles/optimizing-javascript
u.prototype.nodes = [];
// Add class(es) to the matched nodes
u.prototype.addClass = function () {
return this.eacharg(arguments, function (el, name) {
el.classList.add(name);
});
};
// [INTERNAL USE ONLY]
// Add text in the specified position. It is used by other functions
u.prototype.adjacent = function (html, data, callback) {
if (typeof data === 'number') {
if (data === 0) {
data = [];
} else {
data = new Array(data).join().split(',').map(Number.call, Number);
}
}
// Loop through all the nodes. It cannot reuse the eacharg() since the data
// we want to do it once even if there's no "data" and we accept a selector
return this.each(function (node, j) {
var fragment = document.createDocumentFragment();
// Allow for data to be falsy and still loop once
u(data || {}).map(function (el, i) {
// Allow for callbacks that accept some data
var part = (typeof html === 'function') ? html.call(this, el, i, node, j) : html;
if (typeof part === 'string') {
return this.generate(part);
}
return u(part);
}).each(function (n) {
this.isInPage(n)
? fragment.appendChild(u(n).clone().first())
: fragment.appendChild(n);
});
callback.call(this, node, fragment);
});
};
// Add some html as a sibling after each of the matched elements.
u.prototype.after = function (html, data) {
return this.adjacent(html, data, function (node, fragment) {
node.parentNode.insertBefore(fragment, node.nextSibling);
});
};
// Add some html as a child at the end of each of the matched elements.
u.prototype.append = function (html, data) {
return this.adjacent(html, data, function (node, fragment) {
node.appendChild(fragment);
});
};
// [INTERNAL USE ONLY]
// Normalize the arguments to an array of strings
// Allow for several class names like "a b, c" and several parameters
u.prototype.args = function (args, node, i) {
if (typeof args === 'function') {
args = args(node, i);
}
// First flatten it all to a string http://stackoverflow.com/q/22920305
// If we try to slice a string bad things happen: ['n', 'a', 'm', 'e']
if (typeof args !== 'string') {
args = this.slice(args).map(this.str(node, i));
}
// Then convert that string to an array of not-null strings
return args.toString().split(/[\s,]+/).filter(function (e) {
return e.length;
});
};
// Merge all of the nodes that the callback return into a simple array
u.prototype.array = function (callback) {
callback = callback;
var self = this;
return this.nodes.reduce(function (list, node, i) {
var val;
if (callback) {
val = callback.call(self, node, i);
if (!val) val = false;
if (typeof val === 'string') val = u(val);
if (val instanceof u) val = val.nodes;
} else {
val = node.innerHTML;
}
return list.concat(val !== false ? val : []);
}, []);
};
// [INTERNAL USE ONLY]
// Handle attributes for the matched elements
u.prototype.attr = function (name, value, data) {
data = data ? 'data-' : '';
// This will handle those elements that can accept a pair with these footprints:
// .attr('a'), .attr('a', 'b'), .attr({ a: 'b' })
return this.pairs(name, value, function (node, name) {
return node.getAttribute(data + name);
}, function (node, name, value) {
if (value) {
node.setAttribute(data + name, value);
} else {
node.removeAttribute(data + name);
}
});
};
// Add some html before each of the matched elements.
u.prototype.before = function (html, data) {
return this.adjacent(html, data, function (node, fragment) {
node.parentNode.insertBefore(fragment, node);
});
};
// Get the direct children of all of the nodes with an optional filter
u.prototype.children = function (selector) {
return this.map(function (node) {
return this.slice(node.children);
}).filter(selector);
};
/**
* Deep clone a DOM node and its descendants.
* @return {[Object]} Returns an Umbrella.js instance.
*/
u.prototype.clone = function () {
return this.map(function (node, i) {
var clone = node.cloneNode(true);
var dest = this.getAll(clone);
this.getAll(node).each(function (src, i) {
for (var key in this.mirror) {
if (this.mirror[key]) {
this.mirror[key](src, dest.nodes[i]);
}
}
});
return clone;
});
};
/**
* Return an array of DOM nodes of a source node and its children.
* @param {[Object]} context DOM node.
* @param {[String]} tag DOM node tagName.
* @return {[Array]} Array containing queried DOM nodes.
*/
u.prototype.getAll = function getAll (context) {
return u([context].concat(u('*', context).nodes));
};
// Store all of the operations to perform when cloning elements
u.prototype.mirror = {};
/**
* Copy all JavaScript events of source node to destination node.
* @param {[Object]} source DOM node
* @param {[Object]} destination DOM node
* @return {[undefined]]}
*/
u.prototype.mirror.events = function (src, dest) {
if (!src._e) return;
for (var type in src._e) {
src._e[type].forEach(function (ref) {
u(dest).on(type, ref.callback);
});
}
};
/**
* Copy select input value to its clone.
* @param {[Object]} src DOM node
* @param {[Object]} dest DOM node
* @return {[undefined]}
*/
u.prototype.mirror.select = function (src, dest) {
if (u(src).is('select')) {
dest.value = src.value;
}
};
/**
* Copy textarea input value to its clone
* @param {[Object]} src DOM node
* @param {[Object]} dest DOM node
* @return {[undefined]}
*/
u.prototype.mirror.textarea = function (src, dest) {
if (u(src).is('textarea')) {
dest.value = src.value;
}
};
// Find the first ancestor that matches the selector for each node
u.prototype.closest = function (selector) {
return this.map(function (node) {
// Keep going up and up on the tree. First element is also checked
do {
if (u(node).is(selector)) {
return node;
}
} while ((node = node.parentNode) && node !== document);
});
};
// Handle data-* attributes for the matched elements
u.prototype.data = function (name, value) {
return this.attr(name, value, true);
};
// Loops through every node from the current call
u.prototype.each = function (callback) {
// By doing callback.call we allow "this" to be the context for
// the callback (see http://stackoverflow.com/q/4065353 precisely)
this.nodes.forEach(callback.bind(this));
return this;
};
// [INTERNAL USE ONLY]
// Loop through the combination of every node and every argument passed
u.prototype.eacharg = function (args, callback) {
return this.each(function (node, i) {
this.args(args, node, i).forEach(function (arg) {
// Perform the callback for this node
// By doing callback.call we allow "this" to be the context for
// the callback (see http://stackoverflow.com/q/4065353 precisely)
callback.call(this, node, arg);
}, this);
});
};
// Remove all children of the matched nodes from the DOM.
u.prototype.empty = function () {
return this.each(function (node) {
while (node.firstChild) {
node.removeChild(node.firstChild);
}
});
};
// .filter(selector)
// Delete all of the nodes that don't pass the selector
u.prototype.filter = function (selector) {
// The default function if it's a CSS selector
// Cannot change name to 'selector' since it'd mess with it inside this fn
var callback = function (node) {
// Make it compatible with some other browsers
node.matches = node.matches || node.msMatchesSelector || node.webkitMatchesSelector;
// Check if it's the same element (or any element if no selector was passed)
return node.matches(selector || '*');
};
// filter() receives a function as in .filter(e => u(e).children().length)
if (typeof selector === 'function') callback = selector;
// filter() receives an instance of Umbrella as in .filter(u('a'))
if (selector instanceof u) {
callback = function (node) {
return (selector.nodes).indexOf(node) !== -1;
};
}
// Just a native filtering function for ultra-speed
return u(this.nodes.filter(callback));
};
// Find all the nodes children of the current ones matched by a selector
u.prototype.find = function (selector) {
return this.map(function (node) {
return u(selector || '*', node);
});
};
// Get the first of the nodes
u.prototype.first = function () {
return this.nodes[0] || false;
};
// [INTERNAL USE ONLY]
// Generate a fragment of HTML. This irons out the inconsistences
u.prototype.generate = function (html) {
// Table elements need to be child of <table> for some f***ed up reason
if (/^\s*<tr[> ]/.test(html)) {
return u(document.createElement('table')).html(html).children().children().nodes;
} else if (/^\s*<t(h|d)[> ]/.test(html)) {
return u(document.createElement('table')).html(html).children().children().children().nodes;
} else if (/^\s*</.test(html)) {
return u(document.createElement('div')).html(html).children().nodes;
} else {
return document.createTextNode(html);
}
};
// Change the default event for the callback. Simple decorator to preventDefault
u.prototype.handle = function () {
var args = this.slice(arguments).map(function (arg) {
if (typeof arg === 'function') {
return function (e) {
e.preventDefault();
arg.apply(this, arguments);
};
}
return arg;
}, this);
return this.on.apply(this, args);
};
// Find out whether the matched elements have a class or not
u.prototype.hasClass = function () {
// Check if any of them has all of the classes
return this.is('.' + this.args(arguments).join('.'));
};
// Set or retrieve the html from the matched node(s)
u.prototype.html = function (text) {
// Needs to check undefined as it might be ""
if (text === undefined) {
return this.first().innerHTML || '';
}
// If we're attempting to set some text
// Loop through all the nodes
return this.each(function (node) {
// Set the inner html to the node
node.innerHTML = text;
});
};
// Check whether any of the nodes matches the selector
u.prototype.is = function (selector) {
return this.filter(selector).length > 0;
};
/**
* Internal use only. This function checks to see if an element is in the page's body. As contains is inclusive and determining if the body contains itself isn't the intention of isInPage this case explicitly returns false.
https://developer.mozilla.org/en-US/docs/Web/API/Node/contains
* @param {[Object]} node DOM node
* @return {Boolean} The Node.contains() method returns a Boolean value indicating whether a node is a descendant of a given node or not.
*/
u.prototype.isInPage = function isInPage (node) {
return (node === document.body) ? false : document.body.contains(node);
};
// Get the last of the nodes
u.prototype.last = function () {
return this.nodes[this.length - 1] || false;
};
// Merge all of the nodes that the callback returns
u.prototype.map = function (callback) {
return callback ? u(this.array(callback)).unique() : this;
};
// Delete all of the nodes that equals the filter
u.prototype.not = function (filter) {
return this.filter(function (node) {
return !u(node).is(filter || true);
});
};
// Removes the callback to the event listener for each node
u.prototype.off = function (events, cb, cb2) {
var cb_filter_off = (cb == null && cb2 == null);
var sel = null;
var cb_to_be_removed = cb;
if (typeof cb === 'string') {
sel = cb;
cb_to_be_removed = cb2;
}
return this.eacharg(events, function (node, event) {
u(node._e ? node._e[event] : []).each(function (ref) {
if (cb_filter_off || (ref.orig_callback === cb_to_be_removed && ref.selector === sel)) {
node.removeEventListener(event, ref.callback);
}
});
});
};
// Attach a callback to the specified events
u.prototype.on = function (events, cb, cb2) {
function overWriteCurrent (e, value) {
try {
Object.defineProperty(e, 'currentTarget', {
value: value,
configurable: true
});
} catch (err) {}
}
var selector = null;
var orig_callback = cb;
if (typeof cb === 'string') {
selector = cb;
orig_callback = cb2;
cb = function (e) {
var args = arguments;
u(e.currentTarget)
.find(selector)
.each(function (target) {
// The event is triggered either in the correct node, or a child
// of the node that we are interested in
// Note: .contains() will also check itself (besides children)
if (!target.contains(e.target)) return;
// If e.g. a child of a link was clicked, but we are listening
// to the link, this will make the currentTarget the link itself,
// so it's the "delegated" element instead of the root target. It
// makes u('.render a').on('click') and u('.render').on('click', 'a')
// to have the same currentTarget (the 'a')
var curr = e.currentTarget;
overWriteCurrent(e, target);
cb2.apply(target, args);
// Need to undo it afterwards, in case this event is reused in another
// callback since otherwise u(e.currentTarget) above would break
overWriteCurrent(e, curr);
});
};
}
var callback = function (e) {
return cb.apply(this, [e].concat(e.detail || []));
};
return this.eacharg(events, function (node, event) {
node.addEventListener(event, callback);
// Store it so we can dereference it with `.off()` later on
node._e = node._e || {};
node._e[event] = node._e[event] || [];
node._e[event].push({
callback: callback,
orig_callback: orig_callback,
selector: selector
});
});
};
// [INTERNAL USE ONLY]
// Take the arguments and a couple of callback to handle the getter/setter pairs
// such as: .css('a'), .css('a', 'b'), .css({ a: 'b' })
u.prototype.pairs = function (name, value, get, set) {
// Convert it into a plain object if it is not
if (typeof value !== 'undefined') {
var nm = name;
name = {};
name[nm] = value;
}
if (typeof name === 'object') {
// Set the value of each one, for each of the { prop: value } pairs
return this.each(function (node, i) {
for (var key in name) {
if (typeof name[key] === 'function') {
set(node, key, name[key](node, i));
} else {
set(node, key, name[key]);
}
}
});
}
// Return the style of the first one
return this.length ? get(this.first(), name) : '';
};
// [INTERNAL USE ONLY]
// Parametize an object: { a: 'b', c: 'd' } => 'a=b&c=d'
u.prototype.param = function (obj) {
return Object.keys(obj).map(function (key) {
return this.uri(key) + '=' + this.uri(obj[key]);
}.bind(this)).join('&');
};
// Travel the matched elements one node up
u.prototype.parent = function (selector) {
return this.map(function (node) {
return node.parentNode;
}).filter(selector);
};
// Add nodes at the beginning of each node
u.prototype.prepend = function (html, data) {
return this.adjacent(html, data, function (node, fragment) {
node.insertBefore(fragment, node.firstChild);
});
};
// Delete the matched nodes from the DOM
u.prototype.remove = function () {
// Loop through all the nodes
return this.each(function (node) {
// Perform the removal only if the node has a parent
if (node.parentNode) {
node.parentNode.removeChild(node);
}
});
};
// Removes a class from all of the matched nodes
u.prototype.removeClass = function () {
// Loop the combination of each node with each argument
return this.eacharg(arguments, function (el, name) {
// Remove the class using the native method
el.classList.remove(name);
});
};
// Replace the matched elements with the passed argument.
u.prototype.replace = function (html, data) {
var nodes = [];
this.adjacent(html, data, function (node, fragment) {
nodes = nodes.concat(this.slice(fragment.children));
node.parentNode.replaceChild(fragment, node);
});
return u(nodes);
};
// Scroll to the first matched element
u.prototype.scroll = function () {
this.first().scrollIntoView({ behavior: 'smooth' });
return this;
};
// [INTERNAL USE ONLY]
// Select the adecuate part from the context
u.prototype.select = function (parameter, context) {
// Allow for spaces before or after
parameter = parameter.replace(/^\s*/, '').replace(/\s*$/, '');
if (/^</.test(parameter)) {
return u().generate(parameter);
}
return (context || document).querySelectorAll(parameter);
};
// Convert forms into a string able to be submitted
// Original source: http://stackoverflow.com/q/11661187
u.prototype.serialize = function () {
var self = this;
// Store the class in a variable for manipulation
return this.slice(this.first().elements).reduce(function (query, el) {
// We only want to match enabled elements with names, but not files
if (!el.name || el.disabled || el.type === 'file') return query;
// Ignore the checkboxes that are not checked
if (/(checkbox|radio)/.test(el.type) && !el.checked) return query;
// Handle multiple selects
if (el.type === 'select-multiple') {
u(el.options).each(function (opt) {
if (opt.selected) {
query += '&' + self.uri(el.name) + '=' + self.uri(opt.value);
}
});
return query;
}
// Add the element to the object
return query + '&' + self.uri(el.name) + '=' + self.uri(el.value);
}, '').slice(1);
};
// Travel the matched elements at the same level
u.prototype.siblings = function (selector) {
return this.parent().children(selector).not(this);
};
// Find the size of the first matched element
u.prototype.size = function () {
return this.first().getBoundingClientRect();
};
// [INTERNAL USE ONLY]
// Force it to be an array AND also it clones them
// http://toddmotto.com/a-comprehensive-dive-into-nodelists-arrays-converting-nodelists-and-understanding-the-dom/
u.prototype.slice = function (pseudo) {
// Check that it's not a valid object
if (!pseudo ||
pseudo.length === 0 ||
typeof pseudo === 'string' ||
pseudo.toString() === '[object Function]') return [];
// Accept also a u() object (that has .nodes)
return pseudo.length ? [].slice.call(pseudo.nodes || pseudo) : [pseudo];
};
// [INTERNAL USE ONLY]
// Create a string from different things
u.prototype.str = function (node, i) {
return function (arg) {
// Call the function with the corresponding nodes
if (typeof arg === 'function') {
return arg.call(this, node, i);
}
// From an array or other 'weird' things
return arg.toString();
};
};
// Set or retrieve the text content from the matched node(s)
u.prototype.text = function (text) {
// Needs to check undefined as it might be ""
if (text === undefined) {
return this.first().textContent || '';
}
// If we're attempting to set some text
// Loop through all the nodes
return this.each(function (node) {
// Set the text content to the node
node.textContent = text;
});
};
// Activate/deactivate classes in the elements
u.prototype.toggleClass = function (classes, addOrRemove) {
/* jshint -W018 */
// Check if addOrRemove was passed as a boolean
if (!!addOrRemove === addOrRemove) {
return this[addOrRemove ? 'addClass' : 'removeClass'](classes);
}
/* jshint +W018 */
// Loop through all the nodes and classes combinations
return this.eacharg(classes, function (el, name) {
el.classList.toggle(name);
});
};
// Call an event manually on all the nodes
u.prototype.trigger = function (events) {
var data = this.slice(arguments).slice(1);
return this.eacharg(events, function (node, event) {
var ev;
// Allow the event to bubble up and to be cancelable (as default)
var opts = { bubbles: true, cancelable: true, detail: data };
try {
// Accept different types of event names or an event itself
ev = new window.CustomEvent(event, opts);
} catch (e) {
ev = document.createEvent('CustomEvent');
ev.initCustomEvent(event, true, true, data);
}
node.dispatchEvent(ev);
});
};
// [INTERNAL USE ONLY]
// Removed duplicated nodes, used for some specific methods
u.prototype.unique = function () {
return u(this.nodes.reduce(function (clean, node) {
var istruthy = node !== null && node !== undefined && node !== false;
return (istruthy && clean.indexOf(node) === -1) ? clean.concat(node) : clean;
}, []));
};
// [INTERNAL USE ONLY]
// Encode the different strings https://gist.github.com/brettz9/7147458
u.prototype.uri = function (str) {
return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');
};
u.prototype.wrap = function (selector) {
function findDeepestNode (node) {
while (node.firstElementChild) {
node = node.firstElementChild;
}
return u(node);
}
// 1) Construct dom node e.g. u('<a>'),
// 2) clone the currently matched node
// 3) append cloned dom node to constructed node based on selector
return this.map(function (node) {
return u(selector).each(function (n) {
findDeepestNode(n)
.append(node.cloneNode(true));
node
.parentNode
.replaceChild(n, node);
});
});
};
// Export it for webpack
if (typeof module === 'object' && module.exports) {
// Avoid breaking it for `import { u } from ...`. Add `import u from ...`
module.exports = u;
module.exports.u = u;
}

30
assets/reveal.js/css/reset.css Normal file
View File

@ -0,0 +1,30 @@
/* http://meyerweb.com/eric/tools/css/reset/
v4.0 | 20180602
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
display: block;
}

8
assets/reveal.js/css/reveal.css Normal file
View File

File diff suppressed because one or more lines are too long

364
assets/reveal.js/css/theme/beige.css Normal file
View File

@ -0,0 +1,364 @@
/**
* Beige theme for reveal.js.
*
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/
@import url(./fonts/league-gothic/league-gothic.css);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
color: #fff;
}
/*********************************************
* GLOBAL STYLES
*********************************************/
:root {
--r-background-color: #f7f3de;
--r-main-font: Lato, sans-serif;
--r-main-font-size: 40px;
--r-main-color: #333;
--r-block-margin: 20px;
--r-heading-margin: 0 0 20px 0;
--r-heading-font: League Gothic, Impact, sans-serif;
--r-heading-color: #333;
--r-heading-line-height: 1.2;
--r-heading-letter-spacing: normal;
--r-heading-text-transform: uppercase;
--r-heading-text-shadow: none;
--r-heading-font-weight: normal;
--r-heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
--r-heading1-size: 3.77em;
--r-heading2-size: 2.11em;
--r-heading3-size: 1.55em;
--r-heading4-size: 1em;
--r-code-font: monospace;
--r-link-color: #8b743d;
--r-link-color-dark: #564826;
--r-link-color-hover: #c0a86e;
--r-selection-background-color: rgba(79, 64, 28, 0.99);
--r-selection-color: #fff;
}
.reveal-viewport {
background: #f7f2d3;
background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));
background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
background-color: var(--r-background-color);
}
.reveal {
font-family: var(--r-main-font);
font-size: var(--r-main-font-size);
font-weight: normal;
color: var(--r-main-color);
}
.reveal ::selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal ::-moz-selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit;
}
/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: var(--r-heading-margin);
color: var(--r-heading-color);
font-family: var(--r-heading-font);
font-weight: var(--r-heading-font-weight);
line-height: var(--r-heading-line-height);
letter-spacing: var(--r-heading-letter-spacing);
text-transform: var(--r-heading-text-transform);
text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word;
}
.reveal h1 {
font-size: var(--r-heading1-size);
}
.reveal h2 {
font-size: var(--r-heading2-size);
}
.reveal h3 {
font-size: var(--r-heading3-size);
}
.reveal h4 {
font-size: var(--r-heading4-size);
}
.reveal h1 {
text-shadow: var(--r-heading1-text-shadow);
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin: var(--r-block-margin) 0;
line-height: 1.3;
}
/* Remove trailing margins after titles */
.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%;
}
.reveal strong,
.reveal b {
font-weight: bold;
}
.reveal em {
font-style: italic;
}
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
}
.reveal ol {
list-style-type: decimal;
}
.reveal ul {
list-style-type: disc;
}
.reveal ul ul {
list-style-type: square;
}
.reveal ul ul ul {
list-style-type: circle;
}
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px;
}
.reveal dt {
font-weight: bold;
}
.reveal dd {
margin-left: 40px;
}
.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: var(--r-block-margin) auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}
.reveal q {
font-style: italic;
}
.reveal pre {
display: block;
position: relative;
width: 90%;
margin: var(--r-block-margin) auto;
text-align: left;
font-size: 0.55em;
font-family: var(--r-code-font);
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code {
font-family: var(--r-code-font);
text-transform: none;
tab-size: 2;
}
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.reveal table th {
font-weight: bold;
}
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid;
}
.reveal table th[align=center],
.reveal table td[align=center] {
text-align: center;
}
.reveal table th[align=right],
.reveal table td[align=right] {
text-align: right;
}
.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none;
}
.reveal sup {
vertical-align: super;
font-size: smaller;
}
.reveal sub {
vertical-align: sub;
font-size: smaller;
}
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top;
}
.reveal small * {
vertical-align: top;
}
.reveal img {
margin: var(--r-block-margin) 0;
}
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: var(--r-link-color);
text-decoration: none;
transition: color 0.15s ease;
}
.reveal a:hover {
color: var(--r-link-color-hover);
text-shadow: none;
border: none;
}
.reveal .roll span:after {
color: #fff;
background: var(--r-link-color-dark);
}
/*********************************************
* Frame helper
*********************************************/
.reveal .r-frame {
border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame {
transition: all 0.15s linear;
}
.reveal a:hover .r-frame {
border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls {
color: var(--r-link-color);
}
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
background: rgba(0, 0, 0, 0.2);
color: var(--r-link-color);
}
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: var(--r-background-color);
}
}

360
assets/reveal.js/css/theme/black-contrast.css Normal file
View File

@ -0,0 +1,360 @@
/**
* Black compact & high contrast reveal.js theme, with headers not in capitals.
*
* By Peter Kehl. Based on black.(s)css by Hakim El Hattab, http://hakim.se
*
* - Keep the source similar to black.css - for easy comparison.
* - $mainFontSize controls code blocks, too (although under some ratio).
*/
@import url(./fonts/source-sans-pro/source-sans-pro.css);
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
color: #000;
}
/*********************************************
* GLOBAL STYLES
*********************************************/
:root {
--r-background-color: #000000;
--r-main-font: Source Sans Pro, Helvetica, sans-serif;
--r-main-font-size: 42px;
--r-main-color: #fff;
--r-block-margin: 20px;
--r-heading-margin: 0 0 20px 0;
--r-heading-font: Source Sans Pro, Helvetica, sans-serif;
--r-heading-color: #fff;
--r-heading-line-height: 1.2;
--r-heading-letter-spacing: normal;
--r-heading-text-transform: uppercase;
--r-heading-text-shadow: none;
--r-heading-font-weight: 600;
--r-heading1-text-shadow: none;
--r-heading1-size: 2.5em;
--r-heading2-size: 1.6em;
--r-heading3-size: 1.3em;
--r-heading4-size: 1em;
--r-code-font: monospace;
--r-link-color: #42affa;
--r-link-color-dark: #068de9;
--r-link-color-hover: #8dcffc;
--r-selection-background-color: #bee4fd;
--r-selection-color: #fff;
}
.reveal-viewport {
background: #000000;
background-color: var(--r-background-color);
}
.reveal {
font-family: var(--r-main-font);
font-size: var(--r-main-font-size);
font-weight: normal;
color: var(--r-main-color);
}
.reveal ::selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal ::-moz-selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit;
}
/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: var(--r-heading-margin);
color: var(--r-heading-color);
font-family: var(--r-heading-font);
font-weight: var(--r-heading-font-weight);
line-height: var(--r-heading-line-height);
letter-spacing: var(--r-heading-letter-spacing);
text-transform: var(--r-heading-text-transform);
text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word;
}
.reveal h1 {
font-size: var(--r-heading1-size);
}
.reveal h2 {
font-size: var(--r-heading2-size);
}
.reveal h3 {
font-size: var(--r-heading3-size);
}
.reveal h4 {
font-size: var(--r-heading4-size);
}
.reveal h1 {
text-shadow: var(--r-heading1-text-shadow);
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin: var(--r-block-margin) 0;
line-height: 1.3;
}
/* Remove trailing margins after titles */
.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%;
}
.reveal strong,
.reveal b {
font-weight: bold;
}
.reveal em {
font-style: italic;
}
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
}
.reveal ol {
list-style-type: decimal;
}
.reveal ul {
list-style-type: disc;
}
.reveal ul ul {
list-style-type: square;
}
.reveal ul ul ul {
list-style-type: circle;
}
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px;
}
.reveal dt {
font-weight: bold;
}
.reveal dd {
margin-left: 40px;
}
.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: var(--r-block-margin) auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}
.reveal q {
font-style: italic;
}
.reveal pre {
display: block;
position: relative;
width: 90%;
margin: var(--r-block-margin) auto;
text-align: left;
font-size: 0.55em;
font-family: var(--r-code-font);
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code {
font-family: var(--r-code-font);
text-transform: none;
tab-size: 2;
}
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.reveal table th {
font-weight: bold;
}
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid;
}
.reveal table th[align=center],
.reveal table td[align=center] {
text-align: center;
}
.reveal table th[align=right],
.reveal table td[align=right] {
text-align: right;
}
.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none;
}
.reveal sup {
vertical-align: super;
font-size: smaller;
}
.reveal sub {
vertical-align: sub;
font-size: smaller;
}
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top;
}
.reveal small * {
vertical-align: top;
}
.reveal img {
margin: var(--r-block-margin) 0;
}
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: var(--r-link-color);
text-decoration: none;
transition: color 0.15s ease;
}
.reveal a:hover {
color: var(--r-link-color-hover);
text-shadow: none;
border: none;
}
.reveal .roll span:after {
color: #fff;
background: var(--r-link-color-dark);
}
/*********************************************
* Frame helper
*********************************************/
.reveal .r-frame {
border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame {
transition: all 0.15s linear;
}
.reveal a:hover .r-frame {
border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls {
color: var(--r-link-color);
}
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
background: rgba(0, 0, 0, 0.2);
color: var(--r-link-color);
}
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: var(--r-background-color);
}
}

357
assets/reveal.js/css/theme/black.css Normal file
View File

@ -0,0 +1,357 @@
/**
* Black theme for reveal.js. This is the opposite of the 'white' theme.
*
* By Hakim El Hattab, http://hakim.se
*/
@import url(./fonts/source-sans-pro/source-sans-pro.css);
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
color: #222;
}
/*********************************************
* GLOBAL STYLES
*********************************************/
:root {
--r-background-color: #191919;
--r-main-font: Source Sans Pro, Helvetica, sans-serif;
--r-main-font-size: 42px;
--r-main-color: #fff;
--r-block-margin: 20px;
--r-heading-margin: 0 0 20px 0;
--r-heading-font: Source Sans Pro, Helvetica, sans-serif;
--r-heading-color: #fff;
--r-heading-line-height: 1.2;
--r-heading-letter-spacing: normal;
--r-heading-text-transform: uppercase;
--r-heading-text-shadow: none;
--r-heading-font-weight: 600;
--r-heading1-text-shadow: none;
--r-heading1-size: 2.5em;
--r-heading2-size: 1.6em;
--r-heading3-size: 1.3em;
--r-heading4-size: 1em;
--r-code-font: monospace;
--r-link-color: #42affa;
--r-link-color-dark: #068de9;
--r-link-color-hover: #8dcffc;
--r-selection-background-color: rgba(66, 175, 250, 0.75);
--r-selection-color: #fff;
}
.reveal-viewport {
background: #191919;
background-color: var(--r-background-color);
}
.reveal {
font-family: var(--r-main-font);
font-size: var(--r-main-font-size);
font-weight: normal;
color: var(--r-main-color);
}
.reveal ::selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal ::-moz-selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit;
}
/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: var(--r-heading-margin);
color: var(--r-heading-color);
font-family: var(--r-heading-font);
font-weight: var(--r-heading-font-weight);
line-height: var(--r-heading-line-height);
letter-spacing: var(--r-heading-letter-spacing);
text-transform: var(--r-heading-text-transform);
text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word;
}
.reveal h1 {
font-size: var(--r-heading1-size);
}
.reveal h2 {
font-size: var(--r-heading2-size);
}
.reveal h3 {
font-size: var(--r-heading3-size);
}
.reveal h4 {
font-size: var(--r-heading4-size);
}
.reveal h1 {
text-shadow: var(--r-heading1-text-shadow);
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin: var(--r-block-margin) 0;
line-height: 1.3;
}
/* Remove trailing margins after titles */
.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%;
}
.reveal strong,
.reveal b {
font-weight: bold;
}
.reveal em {
font-style: italic;
}
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
}
.reveal ol {
list-style-type: decimal;
}
.reveal ul {
list-style-type: disc;
}
.reveal ul ul {
list-style-type: square;
}
.reveal ul ul ul {
list-style-type: circle;
}
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px;
}
.reveal dt {
font-weight: bold;
}
.reveal dd {
margin-left: 40px;
}
.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: var(--r-block-margin) auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}
.reveal q {
font-style: italic;
}
.reveal pre {
display: block;
position: relative;
width: 90%;
margin: var(--r-block-margin) auto;
text-align: left;
font-size: 0.55em;
font-family: var(--r-code-font);
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code {
font-family: var(--r-code-font);
text-transform: none;
tab-size: 2;
}
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.reveal table th {
font-weight: bold;
}
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid;
}
.reveal table th[align=center],
.reveal table td[align=center] {
text-align: center;
}
.reveal table th[align=right],
.reveal table td[align=right] {
text-align: right;
}
.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none;
}
.reveal sup {
vertical-align: super;
font-size: smaller;
}
.reveal sub {
vertical-align: sub;
font-size: smaller;
}
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top;
}
.reveal small * {
vertical-align: top;
}
.reveal img {
margin: var(--r-block-margin) 0;
}
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: var(--r-link-color);
text-decoration: none;
transition: color 0.15s ease;
}
.reveal a:hover {
color: var(--r-link-color-hover);
text-shadow: none;
border: none;
}
.reveal .roll span:after {
color: #fff;
background: var(--r-link-color-dark);
}
/*********************************************
* Frame helper
*********************************************/
.reveal .r-frame {
border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame {
transition: all 0.15s linear;
}
.reveal a:hover .r-frame {
border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls {
color: var(--r-link-color);
}
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
background: rgba(0, 0, 0, 0.2);
color: var(--r-link-color);
}
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: var(--r-background-color);
}
}

390
assets/reveal.js/css/theme/blood.css Normal file
View File

@ -0,0 +1,390 @@
/**
* Blood theme for reveal.js
* Author: Walther http://github.com/Walther
*
* Designed to be used with highlight.js theme
* "monokai_sublime.css" available from
* https://github.com/isagalaev/highlight.js/
*
* For other themes, change $codeBackground accordingly.
*
*/
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic);
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
color: #222;
}
/*********************************************
* GLOBAL STYLES
*********************************************/
:root {
--r-background-color: #222;
--r-main-font: Ubuntu, sans-serif;
--r-main-font-size: 40px;
--r-main-color: #eee;
--r-block-margin: 20px;
--r-heading-margin: 0 0 20px 0;
--r-heading-font: Ubuntu, sans-serif;
--r-heading-color: #eee;
--r-heading-line-height: 1.2;
--r-heading-letter-spacing: normal;
--r-heading-text-transform: uppercase;
--r-heading-text-shadow: 2px 2px 2px #222;
--r-heading-font-weight: normal;
--r-heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
--r-heading1-size: 3.77em;
--r-heading2-size: 2.11em;
--r-heading3-size: 1.55em;
--r-heading4-size: 1em;
--r-code-font: monospace;
--r-link-color: #a23;
--r-link-color-dark: #6a1520;
--r-link-color-hover: #dd5566;
--r-selection-background-color: #a23;
--r-selection-color: #fff;
}
.reveal-viewport {
background: #222;
background-color: var(--r-background-color);
}
.reveal {
font-family: var(--r-main-font);
font-size: var(--r-main-font-size);
font-weight: normal;
color: var(--r-main-color);
}
.reveal ::selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal ::-moz-selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit;
}
/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: var(--r-heading-margin);
color: var(--r-heading-color);
font-family: var(--r-heading-font);
font-weight: var(--r-heading-font-weight);
line-height: var(--r-heading-line-height);
letter-spacing: var(--r-heading-letter-spacing);
text-transform: var(--r-heading-text-transform);
text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word;
}
.reveal h1 {
font-size: var(--r-heading1-size);
}
.reveal h2 {
font-size: var(--r-heading2-size);
}
.reveal h3 {
font-size: var(--r-heading3-size);
}
.reveal h4 {
font-size: var(--r-heading4-size);
}
.reveal h1 {
text-shadow: var(--r-heading1-text-shadow);
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin: var(--r-block-margin) 0;
line-height: 1.3;
}
/* Remove trailing margins after titles */
.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%;
}
.reveal strong,
.reveal b {
font-weight: bold;
}
.reveal em {
font-style: italic;
}
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
}
.reveal ol {
list-style-type: decimal;
}
.reveal ul {
list-style-type: disc;
}
.reveal ul ul {
list-style-type: square;
}
.reveal ul ul ul {
list-style-type: circle;
}
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px;
}
.reveal dt {
font-weight: bold;
}
.reveal dd {
margin-left: 40px;
}
.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: var(--r-block-margin) auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}
.reveal q {
font-style: italic;
}
.reveal pre {
display: block;
position: relative;
width: 90%;
margin: var(--r-block-margin) auto;
text-align: left;
font-size: 0.55em;
font-family: var(--r-code-font);
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code {
font-family: var(--r-code-font);
text-transform: none;
tab-size: 2;
}
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.reveal table th {
font-weight: bold;
}
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid;
}
.reveal table th[align=center],
.reveal table td[align=center] {
text-align: center;
}
.reveal table th[align=right],
.reveal table td[align=right] {
text-align: right;
}
.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none;
}
.reveal sup {
vertical-align: super;
font-size: smaller;
}
.reveal sub {
vertical-align: sub;
font-size: smaller;
}
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top;
}
.reveal small * {
vertical-align: top;
}
.reveal img {
margin: var(--r-block-margin) 0;
}
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: var(--r-link-color);
text-decoration: none;
transition: color 0.15s ease;
}
.reveal a:hover {
color: var(--r-link-color-hover);
text-shadow: none;
border: none;
}
.reveal .roll span:after {
color: #fff;
background: var(--r-link-color-dark);
}
/*********************************************
* Frame helper
*********************************************/
.reveal .r-frame {
border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame {
transition: all 0.15s linear;
}
.reveal a:hover .r-frame {
border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls {
color: var(--r-link-color);
}
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
background: rgba(0, 0, 0, 0.2);
color: var(--r-link-color);
}
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: var(--r-background-color);
}
}
.reveal p {
font-weight: 300;
text-shadow: 1px 1px #222;
}
section.has-light-background p, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4 {
text-shadow: none;
}
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
font-weight: 700;
}
.reveal p code {
background-color: #23241f;
display: inline-block;
border-radius: 7px;
}
.reveal small code {
vertical-align: baseline;
}

414
assets/reveal.js/css/theme/dracula.css Normal file
View File

@ -0,0 +1,414 @@
@charset "UTF-8";
/**
* Dracula Dark theme for reveal.js.
* Based on https://draculatheme.com
*/
/**
* Dracula colors by Zeno Rocha
* https://draculatheme.com/contribute
*/
html * {
color-profile: sRGB;
rendering-intent: auto;
}
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
color: #282A36;
}
/*********************************************
* GLOBAL STYLES
*********************************************/
:root {
--r-background-color: #282A36;
--r-main-font: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
--r-main-font-size: 40px;
--r-main-color: #F8F8F2;
--r-block-margin: 20px;
--r-heading-margin: 0 0 20px 0;
--r-heading-font: League Gothic, Impact, sans-serif;
--r-heading-color: #BD93F9;
--r-heading-line-height: 1.2;
--r-heading-letter-spacing: normal;
--r-heading-text-transform: none;
--r-heading-text-shadow: none;
--r-heading-font-weight: normal;
--r-heading1-text-shadow: none;
--r-heading1-size: 3.77em;
--r-heading2-size: 2.11em;
--r-heading3-size: 1.55em;
--r-heading4-size: 1em;
--r-code-font: Fira Code, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
--r-link-color: #FF79C6;
--r-link-color-dark: #ff2da5;
--r-link-color-hover: #8BE9FD;
--r-selection-background-color: #44475A;
--r-selection-color: #fff;
}
.reveal-viewport {
background: #282A36;
background-color: var(--r-background-color);
}
.reveal {
font-family: var(--r-main-font);
font-size: var(--r-main-font-size);
font-weight: normal;
color: var(--r-main-color);
}
.reveal ::selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal ::-moz-selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit;
}
/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: var(--r-heading-margin);
color: var(--r-heading-color);
font-family: var(--r-heading-font);
font-weight: var(--r-heading-font-weight);
line-height: var(--r-heading-line-height);
letter-spacing: var(--r-heading-letter-spacing);
text-transform: var(--r-heading-text-transform);
text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word;
}
.reveal h1 {
font-size: var(--r-heading1-size);
}
.reveal h2 {
font-size: var(--r-heading2-size);
}
.reveal h3 {
font-size: var(--r-heading3-size);
}
.reveal h4 {
font-size: var(--r-heading4-size);
}
.reveal h1 {
text-shadow: var(--r-heading1-text-shadow);
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin: var(--r-block-margin) 0;
line-height: 1.3;
}
/* Remove trailing margins after titles */
.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%;
}
.reveal strong,
.reveal b {
font-weight: bold;
}
.reveal em {
font-style: italic;
}
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
}
.reveal ol {
list-style-type: decimal;
}
.reveal ul {
list-style-type: disc;
}
.reveal ul ul {
list-style-type: square;
}
.reveal ul ul ul {
list-style-type: circle;
}
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px;
}
.reveal dt {
font-weight: bold;
}
.reveal dd {
margin-left: 40px;
}
.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: var(--r-block-margin) auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}
.reveal q {
font-style: italic;
}
.reveal pre {
display: block;
position: relative;
width: 90%;
margin: var(--r-block-margin) auto;
text-align: left;
font-size: 0.55em;
font-family: var(--r-code-font);
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code {
font-family: var(--r-code-font);
text-transform: none;
tab-size: 2;
}
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.reveal table th {
font-weight: bold;
}
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid;
}
.reveal table th[align=center],
.reveal table td[align=center] {
text-align: center;
}
.reveal table th[align=right],
.reveal table td[align=right] {
text-align: right;
}
.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none;
}
.reveal sup {
vertical-align: super;
font-size: smaller;
}
.reveal sub {
vertical-align: sub;
font-size: smaller;
}
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top;
}
.reveal small * {
vertical-align: top;
}
.reveal img {
margin: var(--r-block-margin) 0;
}
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: var(--r-link-color);
text-decoration: none;
transition: color 0.15s ease;
}
.reveal a:hover {
color: var(--r-link-color-hover);
text-shadow: none;
border: none;
}
.reveal .roll span:after {
color: #fff;
background: var(--r-link-color-dark);
}
/*********************************************
* Frame helper
*********************************************/
.reveal .r-frame {
border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame {
transition: all 0.15s linear;
}
.reveal a:hover .r-frame {
border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls {
color: var(--r-link-color);
}
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
background: rgba(0, 0, 0, 0.2);
color: var(--r-link-color);
}
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: var(--r-background-color);
}
}
:root {
--r-bold-color: #FFB86C;
--r-italic-color: #F1FA8C;
--r-inline-code-color: #50FA7B;
--r-list-bullet-color: #8BE9FD;
}
.reveal strong, .reveal b {
color: var(--r-bold-color);
}
.reveal em, .reveal i, .reveal blockquote {
color: var(--r-italic-color);
}
.reveal code {
color: var(--r-inline-code-color);
}
.reveal ul {
list-style: none;
}
.reveal ul li::before {
content: "•";
color: var(--r-list-bullet-color);
display: inline-block;
width: 1em;
margin-left: -1em;
}
.reveal ol {
list-style: none;
counter-reset: li;
}
.reveal ol li::before {
content: counter(li) ".";
color: var(--r-list-bullet-color);
display: inline-block;
width: 2em;
margin-left: -2.5em;
margin-right: 0.5em;
text-align: right;
}
.reveal ol li {
counter-increment: li;
}

2
assets/reveal.js/css/theme/fonts/league-gothic/LICENSE Normal file
View File

@ -0,0 +1,2 @@
SIL Open Font License (OFL)
http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL

10
assets/reveal.js/css/theme/fonts/league-gothic/league-gothic.css Normal file
View File

@ -0,0 +1,10 @@
@font-face {
font-family: 'League Gothic';
src: url('./league-gothic.eot');
src: url('./league-gothic.eot?#iefix') format('embedded-opentype'),
url('./league-gothic.woff') format('woff'),
url('./league-gothic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

BIN
assets/reveal.js/css/theme/fonts/league-gothic/league-gothic.eot Normal file
View File

Binary file not shown.

BIN
assets/reveal.js/css/theme/fonts/league-gothic/league-gothic.ttf Normal file
View File

Binary file not shown.

BIN
assets/reveal.js/css/theme/fonts/league-gothic/league-gothic.woff Normal file
View File

Binary file not shown.

45
assets/reveal.js/css/theme/fonts/source-sans-pro/LICENSE Normal file
View File

@ -0,0 +1,45 @@
SIL Open Font License
Copyright 2010, 2012 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name ‘Source’. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries.
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
—————————————————————————————-
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
—————————————————————————————-
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.
The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.
DEFINITIONS
“Font Software” refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation.
“Reserved Font Name” refers to any names specified as such after the copyright statement(s).
“Original Version” refers to the collection of Font Software components as distributed by the Copyright Holder(s).
“Modified Version” refers to any derivative made by adding to, deleting, or substituting—in part or in whole—any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment.
“Author” refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission.
5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.

BIN
assets/reveal.js/css/theme/fonts/source-sans-pro/source-sans-pro-italic.eot Normal file
View File

Binary file not shown.

BIN
assets/reveal.js/css/theme/fonts/source-sans-pro/source-sans-pro-italic.ttf Normal file
View File

Binary file not shown.

BIN
assets/reveal.js/css/theme/fonts/source-sans-pro/source-sans-pro-italic.woff Normal file
View File

Binary file not shown.

BIN
assets/reveal.js/css/theme/fonts/source-sans-pro/source-sans-pro-regular.eot Normal file
View File

Binary file not shown.

BIN
assets/reveal.js/css/theme/fonts/source-sans-pro/source-sans-pro-regular.ttf Normal file
View File

Binary file not shown.

BIN
assets/reveal.js/css/theme/fonts/source-sans-pro/source-sans-pro-regular.woff Normal file
View File

Binary file not shown.

BIN
assets/reveal.js/css/theme/fonts/source-sans-pro/source-sans-pro-semibold.eot Normal file
View File

Binary file not shown.

BIN
assets/reveal.js/css/theme/fonts/source-sans-pro/source-sans-pro-semibold.ttf Normal file
View File

Binary file not shown.

BIN
assets/reveal.js/css/theme/fonts/source-sans-pro/source-sans-pro-semibold.woff Normal file
View File

Binary file not shown.

BIN
assets/reveal.js/css/theme/fonts/source-sans-pro/source-sans-pro-semibolditalic.eot Normal file
View File

Binary file not shown.

BIN
assets/reveal.js/css/theme/fonts/source-sans-pro/source-sans-pro-semibolditalic.ttf Normal file
View File

Binary file not shown.

BIN
assets/reveal.js/css/theme/fonts/source-sans-pro/source-sans-pro-semibolditalic.woff Normal file
View File

Binary file not shown.

39
assets/reveal.js/css/theme/fonts/source-sans-pro/source-sans-pro.css Normal file
View File

@ -0,0 +1,39 @@
@font-face {
font-family: 'Source Sans Pro';
src: url('./source-sans-pro-regular.eot');
src: url('./source-sans-pro-regular.eot?#iefix') format('embedded-opentype'),
url('./source-sans-pro-regular.woff') format('woff'),
url('./source-sans-pro-regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Source Sans Pro';
src: url('./source-sans-pro-italic.eot');
src: url('./source-sans-pro-italic.eot?#iefix') format('embedded-opentype'),
url('./source-sans-pro-italic.woff') format('woff'),
url('./source-sans-pro-italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Source Sans Pro';
src: url('./source-sans-pro-semibold.eot');
src: url('./source-sans-pro-semibold.eot?#iefix') format('embedded-opentype'),
url('./source-sans-pro-semibold.woff') format('woff'),
url('./source-sans-pro-semibold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Source Sans Pro';
src: url('./source-sans-pro-semibolditalic.eot');
src: url('./source-sans-pro-semibolditalic.eot?#iefix') format('embedded-opentype'),
url('./source-sans-pro-semibolditalic.woff') format('woff'),
url('./source-sans-pro-semibolditalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}

366
assets/reveal.js/css/theme/league.css Normal file
View File

@ -0,0 +1,366 @@
/**
* League theme for reveal.js.
*
* This was the default theme pre-3.0.0.
*
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/
@import url(./fonts/league-gothic/league-gothic.css);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
color: #222;
}
/*********************************************
* GLOBAL STYLES
*********************************************/
:root {
--r-background-color: #2b2b2b;
--r-main-font: Lato, sans-serif;
--r-main-font-size: 40px;
--r-main-color: #eee;
--r-block-margin: 20px;
--r-heading-margin: 0 0 20px 0;
--r-heading-font: League Gothic, Impact, sans-serif;
--r-heading-color: #eee;
--r-heading-line-height: 1.2;
--r-heading-letter-spacing: normal;
--r-heading-text-transform: uppercase;
--r-heading-text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
--r-heading-font-weight: normal;
--r-heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
--r-heading1-size: 3.77em;
--r-heading2-size: 2.11em;
--r-heading3-size: 1.55em;
--r-heading4-size: 1em;
--r-code-font: monospace;
--r-link-color: #13DAEC;
--r-link-color-dark: #0d99a5;
--r-link-color-hover: #71e9f4;
--r-selection-background-color: #FF5E99;
--r-selection-color: #fff;
}
.reveal-viewport {
background: #1c1e20;
background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20));
background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
background-color: var(--r-background-color);
}
.reveal {
font-family: var(--r-main-font);
font-size: var(--r-main-font-size);
font-weight: normal;
color: var(--r-main-color);
}
.reveal ::selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal ::-moz-selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit;
}
/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: var(--r-heading-margin);
color: var(--r-heading-color);
font-family: var(--r-heading-font);
font-weight: var(--r-heading-font-weight);
line-height: var(--r-heading-line-height);
letter-spacing: var(--r-heading-letter-spacing);
text-transform: var(--r-heading-text-transform);
text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word;
}
.reveal h1 {
font-size: var(--r-heading1-size);
}
.reveal h2 {
font-size: var(--r-heading2-size);
}
.reveal h3 {
font-size: var(--r-heading3-size);
}
.reveal h4 {
font-size: var(--r-heading4-size);
}
.reveal h1 {
text-shadow: var(--r-heading1-text-shadow);
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin: var(--r-block-margin) 0;
line-height: 1.3;
}
/* Remove trailing margins after titles */
.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%;
}
.reveal strong,
.reveal b {
font-weight: bold;
}
.reveal em {
font-style: italic;
}
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
}
.reveal ol {
list-style-type: decimal;
}
.reveal ul {
list-style-type: disc;
}
.reveal ul ul {
list-style-type: square;
}
.reveal ul ul ul {
list-style-type: circle;
}
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px;
}
.reveal dt {
font-weight: bold;
}
.reveal dd {
margin-left: 40px;
}
.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: var(--r-block-margin) auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}
.reveal q {
font-style: italic;
}
.reveal pre {
display: block;
position: relative;
width: 90%;
margin: var(--r-block-margin) auto;
text-align: left;
font-size: 0.55em;
font-family: var(--r-code-font);
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code {
font-family: var(--r-code-font);
text-transform: none;
tab-size: 2;
}
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.reveal table th {
font-weight: bold;
}
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid;
}
.reveal table th[align=center],
.reveal table td[align=center] {
text-align: center;
}
.reveal table th[align=right],
.reveal table td[align=right] {
text-align: right;
}
.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none;
}
.reveal sup {
vertical-align: super;
font-size: smaller;
}
.reveal sub {
vertical-align: sub;
font-size: smaller;
}
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top;
}
.reveal small * {
vertical-align: top;
}
.reveal img {
margin: var(--r-block-margin) 0;
}
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: var(--r-link-color);
text-decoration: none;
transition: color 0.15s ease;
}
.reveal a:hover {
color: var(--r-link-color-hover);
text-shadow: none;
border: none;
}
.reveal .roll span:after {
color: #fff;
background: var(--r-link-color-dark);
}
/*********************************************
* Frame helper
*********************************************/
.reveal .r-frame {
border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame {
transition: all 0.15s linear;
}
.reveal a:hover .r-frame {
border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls {
color: var(--r-link-color);
}
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
background: rgba(0, 0, 0, 0.2);
color: var(--r-link-color);
}
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: var(--r-background-color);
}
}

365
assets/reveal.js/css/theme/moon.css Normal file
View File

@ -0,0 +1,365 @@
/**
* Solarized Dark theme for reveal.js.
* Author: Achim Staebler
*/
@import url(./fonts/league-gothic/league-gothic.css);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
/**
* Solarized colors by Ethan Schoonover
*/
html * {
color-profile: sRGB;
rendering-intent: auto;
}
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
color: #222;
}
/*********************************************
* GLOBAL STYLES
*********************************************/
:root {
--r-background-color: #002b36;
--r-main-font: Lato, sans-serif;
--r-main-font-size: 40px;
--r-main-color: #93a1a1;
--r-block-margin: 20px;
--r-heading-margin: 0 0 20px 0;
--r-heading-font: League Gothic, Impact, sans-serif;
--r-heading-color: #eee8d5;
--r-heading-line-height: 1.2;
--r-heading-letter-spacing: normal;
--r-heading-text-transform: uppercase;
--r-heading-text-shadow: none;
--r-heading-font-weight: normal;
--r-heading1-text-shadow: none;
--r-heading1-size: 3.77em;
--r-heading2-size: 2.11em;
--r-heading3-size: 1.55em;
--r-heading4-size: 1em;
--r-code-font: monospace;
--r-link-color: #268bd2;
--r-link-color-dark: #1a6091;
--r-link-color-hover: #78b9e6;
--r-selection-background-color: #d33682;
--r-selection-color: #fff;
}
.reveal-viewport {
background: #002b36;
background-color: var(--r-background-color);
}
.reveal {
font-family: var(--r-main-font);
font-size: var(--r-main-font-size);
font-weight: normal;
color: var(--r-main-color);
}
.reveal ::selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal ::-moz-selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit;
}
/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: var(--r-heading-margin);
color: var(--r-heading-color);
font-family: var(--r-heading-font);
font-weight: var(--r-heading-font-weight);
line-height: var(--r-heading-line-height);
letter-spacing: var(--r-heading-letter-spacing);
text-transform: var(--r-heading-text-transform);
text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word;
}
.reveal h1 {
font-size: var(--r-heading1-size);
}
.reveal h2 {
font-size: var(--r-heading2-size);
}
.reveal h3 {
font-size: var(--r-heading3-size);
}
.reveal h4 {
font-size: var(--r-heading4-size);
}
.reveal h1 {
text-shadow: var(--r-heading1-text-shadow);
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin: var(--r-block-margin) 0;
line-height: 1.3;
}
/* Remove trailing margins after titles */
.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%;
}
.reveal strong,
.reveal b {
font-weight: bold;
}
.reveal em {
font-style: italic;
}
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
}
.reveal ol {
list-style-type: decimal;
}
.reveal ul {
list-style-type: disc;
}
.reveal ul ul {
list-style-type: square;
}
.reveal ul ul ul {
list-style-type: circle;
}
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px;
}
.reveal dt {
font-weight: bold;
}
.reveal dd {
margin-left: 40px;
}
.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: var(--r-block-margin) auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}
.reveal q {
font-style: italic;
}
.reveal pre {
display: block;
position: relative;
width: 90%;
margin: var(--r-block-margin) auto;
text-align: left;
font-size: 0.55em;
font-family: var(--r-code-font);
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code {
font-family: var(--r-code-font);
text-transform: none;
tab-size: 2;
}
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.reveal table th {
font-weight: bold;
}
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid;
}
.reveal table th[align=center],
.reveal table td[align=center] {
text-align: center;
}
.reveal table th[align=right],
.reveal table td[align=right] {
text-align: right;
}
.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none;
}
.reveal sup {
vertical-align: super;
font-size: smaller;
}
.reveal sub {
vertical-align: sub;
font-size: smaller;
}
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top;
}
.reveal small * {
vertical-align: top;
}
.reveal img {
margin: var(--r-block-margin) 0;
}
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: var(--r-link-color);
text-decoration: none;
transition: color 0.15s ease;
}
.reveal a:hover {
color: var(--r-link-color-hover);
text-shadow: none;
border: none;
}
.reveal .roll span:after {
color: #fff;
background: var(--r-link-color-dark);
}
/*********************************************
* Frame helper
*********************************************/
.reveal .r-frame {
border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame {
transition: all 0.15s linear;
}
.reveal a:hover .r-frame {
border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls {
color: var(--r-link-color);
}
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
background: rgba(0, 0, 0, 0.2);
color: var(--r-link-color);
}
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: var(--r-background-color);
}
}

358
assets/reveal.js/css/theme/night.css Normal file
View File

@ -0,0 +1,358 @@
/**
* Black theme for reveal.js.
*
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
color: #222;
}
/*********************************************
* GLOBAL STYLES
*********************************************/
:root {
--r-background-color: #111;
--r-main-font: Open Sans, sans-serif;
--r-main-font-size: 40px;
--r-main-color: #eee;
--r-block-margin: 20px;
--r-heading-margin: 0 0 20px 0;
--r-heading-font: Montserrat, Impact, sans-serif;
--r-heading-color: #eee;
--r-heading-line-height: 1.2;
--r-heading-letter-spacing: -0.03em;
--r-heading-text-transform: none;
--r-heading-text-shadow: none;
--r-heading-font-weight: normal;
--r-heading1-text-shadow: none;
--r-heading1-size: 3.77em;
--r-heading2-size: 2.11em;
--r-heading3-size: 1.55em;
--r-heading4-size: 1em;
--r-code-font: monospace;
--r-link-color: #e7ad52;
--r-link-color-dark: #d08a1d;
--r-link-color-hover: #f3d7ac;
--r-selection-background-color: #e7ad52;
--r-selection-color: #fff;
}
.reveal-viewport {
background: #111;
background-color: var(--r-background-color);
}
.reveal {
font-family: var(--r-main-font);
font-size: var(--r-main-font-size);
font-weight: normal;
color: var(--r-main-color);
}
.reveal ::selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal ::-moz-selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit;
}
/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: var(--r-heading-margin);
color: var(--r-heading-color);
font-family: var(--r-heading-font);
font-weight: var(--r-heading-font-weight);
line-height: var(--r-heading-line-height);
letter-spacing: var(--r-heading-letter-spacing);
text-transform: var(--r-heading-text-transform);
text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word;
}
.reveal h1 {
font-size: var(--r-heading1-size);
}
.reveal h2 {
font-size: var(--r-heading2-size);
}
.reveal h3 {
font-size: var(--r-heading3-size);
}
.reveal h4 {
font-size: var(--r-heading4-size);
}
.reveal h1 {
text-shadow: var(--r-heading1-text-shadow);
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin: var(--r-block-margin) 0;
line-height: 1.3;
}
/* Remove trailing margins after titles */
.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%;
}
.reveal strong,
.reveal b {
font-weight: bold;
}
.reveal em {
font-style: italic;
}
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
}
.reveal ol {
list-style-type: decimal;
}
.reveal ul {
list-style-type: disc;
}
.reveal ul ul {
list-style-type: square;
}
.reveal ul ul ul {
list-style-type: circle;
}
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px;
}
.reveal dt {
font-weight: bold;
}
.reveal dd {
margin-left: 40px;
}
.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: var(--r-block-margin) auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}
.reveal q {
font-style: italic;
}
.reveal pre {
display: block;
position: relative;
width: 90%;
margin: var(--r-block-margin) auto;
text-align: left;
font-size: 0.55em;
font-family: var(--r-code-font);
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code {
font-family: var(--r-code-font);
text-transform: none;
tab-size: 2;
}
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.reveal table th {
font-weight: bold;
}
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid;
}
.reveal table th[align=center],
.reveal table td[align=center] {
text-align: center;
}
.reveal table th[align=right],
.reveal table td[align=right] {
text-align: right;
}
.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none;
}
.reveal sup {
vertical-align: super;
font-size: smaller;
}
.reveal sub {
vertical-align: sub;
font-size: smaller;
}
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top;
}
.reveal small * {
vertical-align: top;
}
.reveal img {
margin: var(--r-block-margin) 0;
}
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: var(--r-link-color);
text-decoration: none;
transition: color 0.15s ease;
}
.reveal a:hover {
color: var(--r-link-color-hover);
text-shadow: none;
border: none;
}
.reveal .roll span:after {
color: #fff;
background: var(--r-link-color-dark);
}
/*********************************************
* Frame helper
*********************************************/
.reveal .r-frame {
border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame {
transition: all 0.15s linear;
}
.reveal a:hover .r-frame {
border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls {
color: var(--r-link-color);
}
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
background: rgba(0, 0, 0, 0.2);
color: var(--r-link-color);
}
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: var(--r-background-color);
}
}

361
assets/reveal.js/css/theme/serif.css Normal file
View File

@ -0,0 +1,361 @@
/**
* A simple theme for reveal.js presentations, similar
* to the default theme. The accent color is brown.
*
* This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed.
*/
.reveal a {
line-height: 1.3em;
}
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
color: #fff;
}
/*********************************************
* GLOBAL STYLES
*********************************************/
:root {
--r-background-color: #F0F1EB;
--r-main-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
--r-main-font-size: 40px;
--r-main-color: #000;
--r-block-margin: 20px;
--r-heading-margin: 0 0 20px 0;
--r-heading-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
--r-heading-color: #383D3D;
--r-heading-line-height: 1.2;
--r-heading-letter-spacing: normal;
--r-heading-text-transform: none;
--r-heading-text-shadow: none;
--r-heading-font-weight: normal;
--r-heading1-text-shadow: none;
--r-heading1-size: 3.77em;
--r-heading2-size: 2.11em;
--r-heading3-size: 1.55em;
--r-heading4-size: 1em;
--r-code-font: monospace;
--r-link-color: #51483D;
--r-link-color-dark: #25211c;
--r-link-color-hover: #8b7c69;
--r-selection-background-color: #26351C;
--r-selection-color: #fff;
}
.reveal-viewport {
background: #F0F1EB;
background-color: var(--r-background-color);
}
.reveal {
font-family: var(--r-main-font);
font-size: var(--r-main-font-size);
font-weight: normal;
color: var(--r-main-color);
}
.reveal ::selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal ::-moz-selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit;
}
/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: var(--r-heading-margin);
color: var(--r-heading-color);
font-family: var(--r-heading-font);
font-weight: var(--r-heading-font-weight);
line-height: var(--r-heading-line-height);
letter-spacing: var(--r-heading-letter-spacing);
text-transform: var(--r-heading-text-transform);
text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word;
}
.reveal h1 {
font-size: var(--r-heading1-size);
}
.reveal h2 {
font-size: var(--r-heading2-size);
}
.reveal h3 {
font-size: var(--r-heading3-size);
}
.reveal h4 {
font-size: var(--r-heading4-size);
}
.reveal h1 {
text-shadow: var(--r-heading1-text-shadow);
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin: var(--r-block-margin) 0;
line-height: 1.3;
}
/* Remove trailing margins after titles */
.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%;
}
.reveal strong,
.reveal b {
font-weight: bold;
}
.reveal em {
font-style: italic;
}
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
}
.reveal ol {
list-style-type: decimal;
}
.reveal ul {
list-style-type: disc;
}
.reveal ul ul {
list-style-type: square;
}
.reveal ul ul ul {
list-style-type: circle;
}
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px;
}
.reveal dt {
font-weight: bold;
}
.reveal dd {
margin-left: 40px;
}
.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: var(--r-block-margin) auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}
.reveal q {
font-style: italic;
}
.reveal pre {
display: block;
position: relative;
width: 90%;
margin: var(--r-block-margin) auto;
text-align: left;
font-size: 0.55em;
font-family: var(--r-code-font);
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code {
font-family: var(--r-code-font);
text-transform: none;
tab-size: 2;
}
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.reveal table th {
font-weight: bold;
}
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid;
}
.reveal table th[align=center],
.reveal table td[align=center] {
text-align: center;
}
.reveal table th[align=right],
.reveal table td[align=right] {
text-align: right;
}
.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none;
}
.reveal sup {
vertical-align: super;
font-size: smaller;
}
.reveal sub {
vertical-align: sub;
font-size: smaller;
}
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top;
}
.reveal small * {
vertical-align: top;
}
.reveal img {
margin: var(--r-block-margin) 0;
}
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: var(--r-link-color);
text-decoration: none;
transition: color 0.15s ease;
}
.reveal a:hover {
color: var(--r-link-color-hover);
text-shadow: none;
border: none;
}
.reveal .roll span:after {
color: #fff;
background: var(--r-link-color-dark);
}
/*********************************************
* Frame helper
*********************************************/
.reveal .r-frame {
border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame {
transition: all 0.15s linear;
}
.reveal a:hover .r-frame {
border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls {
color: var(--r-link-color);
}
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
background: rgba(0, 0, 0, 0.2);
color: var(--r-link-color);
}
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: var(--r-background-color);
}
}

360
assets/reveal.js/css/theme/simple.css Normal file
View File

@ -0,0 +1,360 @@
/**
* A simple theme for reveal.js presentations, similar
* to the default theme. The accent color is darkblue.
*
* This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/
@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
color: #fff;
}
/*********************************************
* GLOBAL STYLES
*********************************************/
:root {
--r-background-color: #fff;
--r-main-font: Lato, sans-serif;
--r-main-font-size: 40px;
--r-main-color: #000;
--r-block-margin: 20px;
--r-heading-margin: 0 0 20px 0;
--r-heading-font: News Cycle, Impact, sans-serif;
--r-heading-color: #000;
--r-heading-line-height: 1.2;
--r-heading-letter-spacing: normal;
--r-heading-text-transform: none;
--r-heading-text-shadow: none;
--r-heading-font-weight: normal;
--r-heading1-text-shadow: none;
--r-heading1-size: 3.77em;
--r-heading2-size: 2.11em;
--r-heading3-size: 1.55em;
--r-heading4-size: 1em;
--r-code-font: monospace;
--r-link-color: #00008B;
--r-link-color-dark: #00003f;
--r-link-color-hover: #0000f1;
--r-selection-background-color: rgba(0, 0, 0, 0.99);
--r-selection-color: #fff;
}
.reveal-viewport {
background: #fff;
background-color: var(--r-background-color);
}
.reveal {
font-family: var(--r-main-font);
font-size: var(--r-main-font-size);
font-weight: normal;
color: var(--r-main-color);
}
.reveal ::selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal ::-moz-selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit;
}
/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: var(--r-heading-margin);
color: var(--r-heading-color);
font-family: var(--r-heading-font);
font-weight: var(--r-heading-font-weight);
line-height: var(--r-heading-line-height);
letter-spacing: var(--r-heading-letter-spacing);
text-transform: var(--r-heading-text-transform);
text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word;
}
.reveal h1 {
font-size: var(--r-heading1-size);
}
.reveal h2 {
font-size: var(--r-heading2-size);
}
.reveal h3 {
font-size: var(--r-heading3-size);
}
.reveal h4 {
font-size: var(--r-heading4-size);
}
.reveal h1 {
text-shadow: var(--r-heading1-text-shadow);
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin: var(--r-block-margin) 0;
line-height: 1.3;
}
/* Remove trailing margins after titles */
.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%;
}
.reveal strong,
.reveal b {
font-weight: bold;
}
.reveal em {
font-style: italic;
}
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
}
.reveal ol {
list-style-type: decimal;
}
.reveal ul {
list-style-type: disc;
}
.reveal ul ul {
list-style-type: square;
}
.reveal ul ul ul {
list-style-type: circle;
}
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px;
}
.reveal dt {
font-weight: bold;
}
.reveal dd {
margin-left: 40px;
}
.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: var(--r-block-margin) auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}
.reveal q {
font-style: italic;
}
.reveal pre {
display: block;
position: relative;
width: 90%;
margin: var(--r-block-margin) auto;
text-align: left;
font-size: 0.55em;
font-family: var(--r-code-font);
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code {
font-family: var(--r-code-font);
text-transform: none;
tab-size: 2;
}
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.reveal table th {
font-weight: bold;
}
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid;
}
.reveal table th[align=center],
.reveal table td[align=center] {
text-align: center;
}
.reveal table th[align=right],
.reveal table td[align=right] {
text-align: right;
}
.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none;
}
.reveal sup {
vertical-align: super;
font-size: smaller;
}
.reveal sub {
vertical-align: sub;
font-size: smaller;
}
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top;
}
.reveal small * {
vertical-align: top;
}
.reveal img {
margin: var(--r-block-margin) 0;
}
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: var(--r-link-color);
text-decoration: none;
transition: color 0.15s ease;
}
.reveal a:hover {
color: var(--r-link-color-hover);
text-shadow: none;
border: none;
}
.reveal .roll span:after {
color: #fff;
background: var(--r-link-color-dark);
}
/*********************************************
* Frame helper
*********************************************/
.reveal .r-frame {
border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame {
transition: all 0.15s linear;
}
.reveal a:hover .r-frame {
border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls {
color: var(--r-link-color);
}
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
background: rgba(0, 0, 0, 0.2);
color: var(--r-link-color);
}
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: var(--r-background-color);
}
}

368
assets/reveal.js/css/theme/sky.css Normal file
View File

@ -0,0 +1,368 @@
/**
* Sky theme for reveal.js.
*
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
.reveal a {
line-height: 1.3em;
}
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
color: #fff;
}
/*********************************************
* GLOBAL STYLES
*********************************************/
:root {
--r-background-color: #f7fbfc;
--r-main-font: Open Sans, sans-serif;
--r-main-font-size: 40px;
--r-main-color: #333;
--r-block-margin: 20px;
--r-heading-margin: 0 0 20px 0;
--r-heading-font: Quicksand, sans-serif;
--r-heading-color: #333;
--r-heading-line-height: 1.2;
--r-heading-letter-spacing: -0.08em;
--r-heading-text-transform: uppercase;
--r-heading-text-shadow: none;
--r-heading-font-weight: normal;
--r-heading1-text-shadow: none;
--r-heading1-size: 3.77em;
--r-heading2-size: 2.11em;
--r-heading3-size: 1.55em;
--r-heading4-size: 1em;
--r-code-font: monospace;
--r-link-color: #3b759e;
--r-link-color-dark: #264c66;
--r-link-color-hover: #74a7cb;
--r-selection-background-color: #134674;
--r-selection-color: #fff;
}
.reveal-viewport {
background: #add9e4;
background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4));
background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
background-color: var(--r-background-color);
}
.reveal {
font-family: var(--r-main-font);
font-size: var(--r-main-font-size);
font-weight: normal;
color: var(--r-main-color);
}
.reveal ::selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal ::-moz-selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit;
}
/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: var(--r-heading-margin);
color: var(--r-heading-color);
font-family: var(--r-heading-font);
font-weight: var(--r-heading-font-weight);
line-height: var(--r-heading-line-height);
letter-spacing: var(--r-heading-letter-spacing);
text-transform: var(--r-heading-text-transform);
text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word;
}
.reveal h1 {
font-size: var(--r-heading1-size);
}
.reveal h2 {
font-size: var(--r-heading2-size);
}
.reveal h3 {
font-size: var(--r-heading3-size);
}
.reveal h4 {
font-size: var(--r-heading4-size);
}
.reveal h1 {
text-shadow: var(--r-heading1-text-shadow);
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin: var(--r-block-margin) 0;
line-height: 1.3;
}
/* Remove trailing margins after titles */
.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%;
}
.reveal strong,
.reveal b {
font-weight: bold;
}
.reveal em {
font-style: italic;
}
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
}
.reveal ol {
list-style-type: decimal;
}
.reveal ul {
list-style-type: disc;
}
.reveal ul ul {
list-style-type: square;
}
.reveal ul ul ul {
list-style-type: circle;
}
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px;
}
.reveal dt {
font-weight: bold;
}
.reveal dd {
margin-left: 40px;
}
.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: var(--r-block-margin) auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}
.reveal q {
font-style: italic;
}
.reveal pre {
display: block;
position: relative;
width: 90%;
margin: var(--r-block-margin) auto;
text-align: left;
font-size: 0.55em;
font-family: var(--r-code-font);
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code {
font-family: var(--r-code-font);
text-transform: none;
tab-size: 2;
}
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.reveal table th {
font-weight: bold;
}
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid;
}
.reveal table th[align=center],
.reveal table td[align=center] {
text-align: center;
}
.reveal table th[align=right],
.reveal table td[align=right] {
text-align: right;
}
.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none;
}
.reveal sup {
vertical-align: super;
font-size: smaller;
}
.reveal sub {
vertical-align: sub;
font-size: smaller;
}
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top;
}
.reveal small * {
vertical-align: top;
}
.reveal img {
margin: var(--r-block-margin) 0;
}
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: var(--r-link-color);
text-decoration: none;
transition: color 0.15s ease;
}
.reveal a:hover {
color: var(--r-link-color-hover);
text-shadow: none;
border: none;
}
.reveal .roll span:after {
color: #fff;
background: var(--r-link-color-dark);
}
/*********************************************
* Frame helper
*********************************************/
.reveal .r-frame {
border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame {
transition: all 0.15s linear;
}
.reveal a:hover .r-frame {
border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls {
color: var(--r-link-color);
}
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
background: rgba(0, 0, 0, 0.2);
color: var(--r-link-color);
}
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: var(--r-background-color);
}
}

361
assets/reveal.js/css/theme/solarized.css Normal file
View File

@ -0,0 +1,361 @@
/**
* Solarized Light theme for reveal.js.
* Author: Achim Staebler
*/
@import url(./fonts/league-gothic/league-gothic.css);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
/**
* Solarized colors by Ethan Schoonover
*/
html * {
color-profile: sRGB;
rendering-intent: auto;
}
/*********************************************
* GLOBAL STYLES
*********************************************/
:root {
--r-background-color: #fdf6e3;
--r-main-font: Lato, sans-serif;
--r-main-font-size: 40px;
--r-main-color: #657b83;
--r-block-margin: 20px;
--r-heading-margin: 0 0 20px 0;
--r-heading-font: League Gothic, Impact, sans-serif;
--r-heading-color: #586e75;
--r-heading-line-height: 1.2;
--r-heading-letter-spacing: normal;
--r-heading-text-transform: uppercase;
--r-heading-text-shadow: none;
--r-heading-font-weight: normal;
--r-heading1-text-shadow: none;
--r-heading1-size: 3.77em;
--r-heading2-size: 2.11em;
--r-heading3-size: 1.55em;
--r-heading4-size: 1em;
--r-code-font: monospace;
--r-link-color: #268bd2;
--r-link-color-dark: #1a6091;
--r-link-color-hover: #78b9e6;
--r-selection-background-color: #d33682;
--r-selection-color: #fff;
}
.reveal-viewport {
background: #fdf6e3;
background-color: var(--r-background-color);
}
.reveal {
font-family: var(--r-main-font);
font-size: var(--r-main-font-size);
font-weight: normal;
color: var(--r-main-color);
}
.reveal ::selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal ::-moz-selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit;
}
/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: var(--r-heading-margin);
color: var(--r-heading-color);
font-family: var(--r-heading-font);
font-weight: var(--r-heading-font-weight);
line-height: var(--r-heading-line-height);
letter-spacing: var(--r-heading-letter-spacing);
text-transform: var(--r-heading-text-transform);
text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word;
}
.reveal h1 {
font-size: var(--r-heading1-size);
}
.reveal h2 {
font-size: var(--r-heading2-size);
}
.reveal h3 {
font-size: var(--r-heading3-size);
}
.reveal h4 {
font-size: var(--r-heading4-size);
}
.reveal h1 {
text-shadow: var(--r-heading1-text-shadow);
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin: var(--r-block-margin) 0;
line-height: 1.3;
}
/* Remove trailing margins after titles */
.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%;
}
.reveal strong,
.reveal b {
font-weight: bold;
}
.reveal em {
font-style: italic;
}
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
}
.reveal ol {
list-style-type: decimal;
}
.reveal ul {
list-style-type: disc;
}
.reveal ul ul {
list-style-type: square;
}
.reveal ul ul ul {
list-style-type: circle;
}
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px;
}
.reveal dt {
font-weight: bold;
}
.reveal dd {
margin-left: 40px;
}
.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: var(--r-block-margin) auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}
.reveal q {
font-style: italic;
}
.reveal pre {
display: block;
position: relative;
width: 90%;
margin: var(--r-block-margin) auto;
text-align: left;
font-size: 0.55em;
font-family: var(--r-code-font);
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code {
font-family: var(--r-code-font);
text-transform: none;
tab-size: 2;
}
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.reveal table th {
font-weight: bold;
}
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid;
}
.reveal table th[align=center],
.reveal table td[align=center] {
text-align: center;
}
.reveal table th[align=right],
.reveal table td[align=right] {
text-align: right;
}
.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none;
}
.reveal sup {
vertical-align: super;
font-size: smaller;
}
.reveal sub {
vertical-align: sub;
font-size: smaller;
}
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top;
}
.reveal small * {
vertical-align: top;
}
.reveal img {
margin: var(--r-block-margin) 0;
}
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: var(--r-link-color);
text-decoration: none;
transition: color 0.15s ease;
}
.reveal a:hover {
color: var(--r-link-color-hover);
text-shadow: none;
border: none;
}
.reveal .roll span:after {
color: #fff;
background: var(--r-link-color-dark);
}
/*********************************************
* Frame helper
*********************************************/
.reveal .r-frame {
border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame {
transition: all 0.15s linear;
}
.reveal a:hover .r-frame {
border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls {
color: var(--r-link-color);
}
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
background: rgba(0, 0, 0, 0.2);
color: var(--r-link-color);
}
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: var(--r-background-color);
}
}

360
assets/reveal.js/css/theme/white-contrast.css Normal file
View File

@ -0,0 +1,360 @@
/**
* White compact & high contrast reveal.js theme, with headers not in capitals.
*
* By Peter Kehl. Based on white.(s)css by Hakim El Hattab, http://hakim.se
*
* - Keep the source similar to black.css - for easy comparison.
* - $mainFontSize controls code blocks, too (although under some ratio).
*/
@import url(./fonts/source-sans-pro/source-sans-pro.css);
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
color: #fff;
}
/*********************************************
* GLOBAL STYLES
*********************************************/
:root {
--r-background-color: #fff;
--r-main-font: Source Sans Pro, Helvetica, sans-serif;
--r-main-font-size: 42px;
--r-main-color: #000;
--r-block-margin: 20px;
--r-heading-margin: 0 0 20px 0;
--r-heading-font: Source Sans Pro, Helvetica, sans-serif;
--r-heading-color: #000;
--r-heading-line-height: 1.2;
--r-heading-letter-spacing: normal;
--r-heading-text-transform: uppercase;
--r-heading-text-shadow: none;
--r-heading-font-weight: 600;
--r-heading1-text-shadow: none;
--r-heading1-size: 2.5em;
--r-heading2-size: 1.6em;
--r-heading3-size: 1.3em;
--r-heading4-size: 1em;
--r-code-font: monospace;
--r-link-color: #2a76dd;
--r-link-color-dark: #1a53a1;
--r-link-color-hover: #6ca0e8;
--r-selection-background-color: #98bdef;
--r-selection-color: #fff;
}
.reveal-viewport {
background: #fff;
background-color: var(--r-background-color);
}
.reveal {
font-family: var(--r-main-font);
font-size: var(--r-main-font-size);
font-weight: normal;
color: var(--r-main-color);
}
.reveal ::selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal ::-moz-selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit;
}
/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: var(--r-heading-margin);
color: var(--r-heading-color);
font-family: var(--r-heading-font);
font-weight: var(--r-heading-font-weight);
line-height: var(--r-heading-line-height);
letter-spacing: var(--r-heading-letter-spacing);
text-transform: var(--r-heading-text-transform);
text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word;
}
.reveal h1 {
font-size: var(--r-heading1-size);
}
.reveal h2 {
font-size: var(--r-heading2-size);
}
.reveal h3 {
font-size: var(--r-heading3-size);
}
.reveal h4 {
font-size: var(--r-heading4-size);
}
.reveal h1 {
text-shadow: var(--r-heading1-text-shadow);
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin: var(--r-block-margin) 0;
line-height: 1.3;
}
/* Remove trailing margins after titles */
.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%;
}
.reveal strong,
.reveal b {
font-weight: bold;
}
.reveal em {
font-style: italic;
}
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
}
.reveal ol {
list-style-type: decimal;
}
.reveal ul {
list-style-type: disc;
}
.reveal ul ul {
list-style-type: square;
}
.reveal ul ul ul {
list-style-type: circle;
}
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px;
}
.reveal dt {
font-weight: bold;
}
.reveal dd {
margin-left: 40px;
}
.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: var(--r-block-margin) auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}
.reveal q {
font-style: italic;
}
.reveal pre {
display: block;
position: relative;
width: 90%;
margin: var(--r-block-margin) auto;
text-align: left;
font-size: 0.55em;
font-family: var(--r-code-font);
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code {
font-family: var(--r-code-font);
text-transform: none;
tab-size: 2;
}
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.reveal table th {
font-weight: bold;
}
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid;
}
.reveal table th[align=center],
.reveal table td[align=center] {
text-align: center;
}
.reveal table th[align=right],
.reveal table td[align=right] {
text-align: right;
}
.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none;
}
.reveal sup {
vertical-align: super;
font-size: smaller;
}
.reveal sub {
vertical-align: sub;
font-size: smaller;
}
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top;
}
.reveal small * {
vertical-align: top;
}
.reveal img {
margin: var(--r-block-margin) 0;
}
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: var(--r-link-color);
text-decoration: none;
transition: color 0.15s ease;
}
.reveal a:hover {
color: var(--r-link-color-hover);
text-shadow: none;
border: none;
}
.reveal .roll span:after {
color: #fff;
background: var(--r-link-color-dark);
}
/*********************************************
* Frame helper
*********************************************/
.reveal .r-frame {
border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame {
transition: all 0.15s linear;
}
.reveal a:hover .r-frame {
border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls {
color: var(--r-link-color);
}
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
background: rgba(0, 0, 0, 0.2);
color: var(--r-link-color);
}
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: var(--r-background-color);
}
}

357
assets/reveal.js/css/theme/white.css Normal file
View File

@ -0,0 +1,357 @@
/**
* White theme for reveal.js. This is the opposite of the 'black' theme.
*
* By Hakim El Hattab, http://hakim.se
*/
@import url(./fonts/source-sans-pro/source-sans-pro.css);
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
color: #fff;
}
/*********************************************
* GLOBAL STYLES
*********************************************/
:root {
--r-background-color: #fff;
--r-main-font: Source Sans Pro, Helvetica, sans-serif;
--r-main-font-size: 42px;
--r-main-color: #222;
--r-block-margin: 20px;
--r-heading-margin: 0 0 20px 0;
--r-heading-font: Source Sans Pro, Helvetica, sans-serif;
--r-heading-color: #222;
--r-heading-line-height: 1.2;
--r-heading-letter-spacing: normal;
--r-heading-text-transform: uppercase;
--r-heading-text-shadow: none;
--r-heading-font-weight: 600;
--r-heading1-text-shadow: none;
--r-heading1-size: 2.5em;
--r-heading2-size: 1.6em;
--r-heading3-size: 1.3em;
--r-heading4-size: 1em;
--r-code-font: monospace;
--r-link-color: #2a76dd;
--r-link-color-dark: #1a53a1;
--r-link-color-hover: #6ca0e8;
--r-selection-background-color: #98bdef;
--r-selection-color: #fff;
}
.reveal-viewport {
background: #fff;
background-color: var(--r-background-color);
}
.reveal {
font-family: var(--r-main-font);
font-size: var(--r-main-font-size);
font-weight: normal;
color: var(--r-main-color);
}
.reveal ::selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal ::-moz-selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit;
}
/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: var(--r-heading-margin);
color: var(--r-heading-color);
font-family: var(--r-heading-font);
font-weight: var(--r-heading-font-weight);
line-height: var(--r-heading-line-height);
letter-spacing: var(--r-heading-letter-spacing);
text-transform: var(--r-heading-text-transform);
text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word;
}
.reveal h1 {
font-size: var(--r-heading1-size);
}
.reveal h2 {
font-size: var(--r-heading2-size);
}
.reveal h3 {
font-size: var(--r-heading3-size);
}
.reveal h4 {
font-size: var(--r-heading4-size);
}
.reveal h1 {
text-shadow: var(--r-heading1-text-shadow);
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin: var(--r-block-margin) 0;
line-height: 1.3;
}
/* Remove trailing margins after titles */
.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%;
}
.reveal strong,
.reveal b {
font-weight: bold;
}
.reveal em {
font-style: italic;
}
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
}
.reveal ol {
list-style-type: decimal;
}
.reveal ul {
list-style-type: disc;
}
.reveal ul ul {
list-style-type: square;
}
.reveal ul ul ul {
list-style-type: circle;
}
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px;
}
.reveal dt {
font-weight: bold;
}
.reveal dd {
margin-left: 40px;
}
.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: var(--r-block-margin) auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}
.reveal q {
font-style: italic;
}
.reveal pre {
display: block;
position: relative;
width: 90%;
margin: var(--r-block-margin) auto;
text-align: left;
font-size: 0.55em;
font-family: var(--r-code-font);
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code {
font-family: var(--r-code-font);
text-transform: none;
tab-size: 2;
}
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.reveal table th {
font-weight: bold;
}
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid;
}
.reveal table th[align=center],
.reveal table td[align=center] {
text-align: center;
}
.reveal table th[align=right],
.reveal table td[align=right] {
text-align: right;
}
.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none;
}
.reveal sup {
vertical-align: super;
font-size: smaller;
}
.reveal sub {
vertical-align: sub;
font-size: smaller;
}
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top;
}
.reveal small * {
vertical-align: top;
}
.reveal img {
margin: var(--r-block-margin) 0;
}
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: var(--r-link-color);
text-decoration: none;
transition: color 0.15s ease;
}
.reveal a:hover {
color: var(--r-link-color-hover);
text-shadow: none;
border: none;
}
.reveal .roll span:after {
color: #fff;
background: var(--r-link-color-dark);
}
/*********************************************
* Frame helper
*********************************************/
.reveal .r-frame {
border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame {
transition: all 0.15s linear;
}
.reveal a:hover .r-frame {
border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls {
color: var(--r-link-color);
}
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
background: rgba(0, 0, 0, 0.2);
color: var(--r-link-color);
}
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: var(--r-background-color);
}
}

360
assets/reveal.js/css/theme/white_contrast_compact_verbatim_headers.css Normal file
View File

@ -0,0 +1,360 @@
/**
* White compact & high contrast reveal.js theme, with headers not in capitals.
*
* By Peter Kehl. Based on white.(s)css by Hakim El Hattab, http://hakim.se
*
* - Keep the source similar to black.css - for easy comparison.
* - $mainFontSize controls code blocks, too (although under some ratio).
*/
@import url(./fonts/source-sans-pro/source-sans-pro.css);
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
color: #fff;
}
/*********************************************
* GLOBAL STYLES
*********************************************/
:root {
--r-background-color: #fff;
--r-main-font: Source Sans Pro, Helvetica, sans-serif;
--r-main-font-size: 25px;
--r-main-color: #000;
--r-block-margin: 20px;
--r-heading-margin: 0 0 20px 0;
--r-heading-font: Source Sans Pro, Helvetica, sans-serif;
--r-heading-color: #000;
--r-heading-line-height: 1.2;
--r-heading-letter-spacing: normal;
--r-heading-text-transform: none;
--r-heading-text-shadow: none;
--r-heading-font-weight: 450;
--r-heading1-text-shadow: none;
--r-heading1-size: 2.5em;
--r-heading2-size: 1.6em;
--r-heading3-size: 1.3em;
--r-heading4-size: 1em;
--r-code-font: monospace;
--r-link-color: #2a76dd;
--r-link-color-dark: #1a53a1;
--r-link-color-hover: #6ca0e8;
--r-selection-background-color: #98bdef;
--r-selection-color: #fff;
}
.reveal-viewport {
background: #fff;
background-color: var(--r-background-color);
}
.reveal {
font-family: var(--r-main-font);
font-size: var(--r-main-font-size);
font-weight: normal;
color: var(--r-main-color);
}
.reveal ::selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal ::-moz-selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit;
}
/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: var(--r-heading-margin);
color: var(--r-heading-color);
font-family: var(--r-heading-font);
font-weight: var(--r-heading-font-weight);
line-height: var(--r-heading-line-height);
letter-spacing: var(--r-heading-letter-spacing);
text-transform: var(--r-heading-text-transform);
text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word;
}
.reveal h1 {
font-size: var(--r-heading1-size);
}
.reveal h2 {
font-size: var(--r-heading2-size);
}
.reveal h3 {
font-size: var(--r-heading3-size);
}
.reveal h4 {
font-size: var(--r-heading4-size);
}
.reveal h1 {
text-shadow: var(--r-heading1-text-shadow);
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin: var(--r-block-margin) 0;
line-height: 1.3;
}
/* Remove trailing margins after titles */
.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%;
}
.reveal strong,
.reveal b {
font-weight: bold;
}
.reveal em {
font-style: italic;
}
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
}
.reveal ol {
list-style-type: decimal;
}
.reveal ul {
list-style-type: disc;
}
.reveal ul ul {
list-style-type: square;
}
.reveal ul ul ul {
list-style-type: circle;
}
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px;
}
.reveal dt {
font-weight: bold;
}
.reveal dd {
margin-left: 40px;
}
.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: var(--r-block-margin) auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}
.reveal q {
font-style: italic;
}
.reveal pre {
display: block;
position: relative;
width: 90%;
margin: var(--r-block-margin) auto;
text-align: left;
font-size: 0.55em;
font-family: var(--r-code-font);
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code {
font-family: var(--r-code-font);
text-transform: none;
tab-size: 2;
}
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.reveal table th {
font-weight: bold;
}
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid;
}
.reveal table th[align=center],
.reveal table td[align=center] {
text-align: center;
}
.reveal table th[align=right],
.reveal table td[align=right] {
text-align: right;
}
.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none;
}
.reveal sup {
vertical-align: super;
font-size: smaller;
}
.reveal sub {
vertical-align: sub;
font-size: smaller;
}
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top;
}
.reveal small * {
vertical-align: top;
}
.reveal img {
margin: var(--r-block-margin) 0;
}
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: var(--r-link-color);
text-decoration: none;
transition: color 0.15s ease;
}
.reveal a:hover {
color: var(--r-link-color-hover);
text-shadow: none;
border: none;
}
.reveal .roll span:after {
color: #fff;
background: var(--r-link-color-dark);
}
/*********************************************
* Frame helper
*********************************************/
.reveal .r-frame {
border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame {
transition: all 0.15s linear;
}
.reveal a:hover .r-frame {
border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls {
color: var(--r-link-color);
}
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
background: rgba(0, 0, 0, 0.2);
color: var(--r-link-color);
}
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: var(--r-background-color);
}
}

9
assets/reveal.js/js/reveal.js Normal file
View File

File diff suppressed because one or more lines are too long

5
assets/reveal.js/plugin/highlight/highlight.esm.js Normal file
View File

File diff suppressed because one or more lines are too long

5
assets/reveal.js/plugin/highlight/highlight.js Normal file
View File

File diff suppressed because one or more lines are too long

71
assets/reveal.js/plugin/highlight/monokai.css Normal file
View File

@ -0,0 +1,71 @@
/*
Monokai style - ported by Luigi Maselli - http://grigio.org
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #272822;
color: #ddd;
}
.hljs-tag,
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-strong,
.hljs-name {
color: #f92672;
}
.hljs-code {
color: #66d9ef;
}
.hljs-class .hljs-title {
color: white;
}
.hljs-attribute,
.hljs-symbol,
.hljs-regexp,
.hljs-link {
color: #bf79db;
}
.hljs-string,
.hljs-bullet,
.hljs-subst,
.hljs-title,
.hljs-section,
.hljs-emphasis,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
color: #a6e22e;
}
.hljs-comment,
.hljs-quote,
.hljs-deletion,
.hljs-meta {
color: #75715e;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag,
.hljs-title,
.hljs-section,
.hljs-type,
.hljs-selector-id {
font-weight: bold;
}

439
assets/reveal.js/plugin/highlight/plugin.js Normal file
View File

@ -0,0 +1,439 @@
import hljs from 'highlight.js';
/* highlightjs-line-numbers.js 2.8.0 | (C) 2018 Yauheni Pakala | MIT License | github.com/wcoder/highlightjs-line-numbers.js */
!function(r,o){"use strict";var e,i="hljs-ln",l="hljs-ln-line",h="hljs-ln-code",s="hljs-ln-numbers",c="hljs-ln-n",m="data-line-number",a=/\r\n|\r|\n/g;function u(e){for(var n=e.toString(),t=e.anchorNode;"TD"!==t.nodeName;)t=t.parentNode;for(var r=e.focusNode;"TD"!==r.nodeName;)r=r.parentNode;var o=parseInt(t.dataset.lineNumber),a=parseInt(r.dataset.lineNumber);if(o==a)return n;var i,l=t.textContent,s=r.textContent;for(a<o&&(i=o,o=a,a=i,i=l,l=s,s=i);0!==n.indexOf(l);)l=l.slice(1);for(;-1===n.lastIndexOf(s);)s=s.slice(0,-1);for(var c=l,u=function(e){for(var n=e;"TABLE"!==n.nodeName;)n=n.parentNode;return n}(t),d=o+1;d<a;++d){var f=p('.{0}[{1}="{2}"]',[h,m,d]);c+="\n"+u.querySelector(f).textContent}return c+="\n"+s}function n(e){try{var n=o.querySelectorAll("code.hljs,code.nohighlight");for(var t in n)n.hasOwnProperty(t)&&(n[t].classList.contains("nohljsln")||d(n[t],e))}catch(e){r.console.error("LineNumbers error: ",e)}}function d(e,n){if("object"==typeof e)e.innerHTML=f(e,n)}function f(e,n){var t,r,o=(t=e,{singleLine:function(e){return!!e.singleLine&&e.singleLine}(r=(r=n)||{}),startFrom:function(e,n){var t=1;isFinite(n.startFrom)&&(t=n.startFrom);var r=function(e,n){return e.hasAttribute(n)?e.getAttribute(n):null}(e,"data-ln-start-from");return null!==r&&(t=function(e,n){if(!e)return n;var t=Number(e);return isFinite(t)?t:n}(r,1)),t}(t,r)});return function e(n){var t=n.childNodes;for(var r in t){var o;t.hasOwnProperty(r)&&(o=t[r],0<(o.textContent.trim().match(a)||[]).length&&(0<o.childNodes.length?e(o):v(o.parentNode)))}}(e),function(e,n){var t=g(e);""===t[t.length-1].trim()&&t.pop();if(1<t.length||n.singleLine){for(var r="",o=0,a=t.length;o<a;o++)r+=p('<tr><td class="{0} {1}" {3}="{5}"><div class="{2}" {3}="{5}"></div></td><td class="{0} {4}" {3}="{5}">{6}</td></tr>',[l,s,c,m,h,o+n.startFrom,0<t[o].length?t[o]:" "]);return p('<table class="{0}">{1}</table>',[i,r])}return e}(e.innerHTML,o)}function v(e){var n=e.className;if(/hljs-/.test(n)){for(var t=g(e.innerHTML),r=0,o="";r<t.length;r++){o+=p('<span class="{0}">{1}</span>\n',[n,0<t[r].length?t[r]:" "])}e.innerHTML=o.trim()}}function g(e){return 0===e.length?[]:e.split(a)}function p(e,t){return e.replace(/\{(\d+)\}/g,function(e,n){return void 0!==t[n]?t[n]:e})}hljs?(hljs.initLineNumbersOnLoad=function(e){"interactive"===o.readyState||"complete"===o.readyState?n(e):r.addEventListener("DOMContentLoaded",function(){n(e)})},hljs.lineNumbersBlock=d,hljs.lineNumbersValue=function(e,n){if("string"!=typeof e)return;var t=document.createElement("code");return t.innerHTML=e,f(t,n)},(e=o.createElement("style")).type="text/css",e.innerHTML=p(".{0}{border-collapse:collapse}.{0} td{padding:0}.{1}:before{content:attr({2})}",[i,c,m]),o.getElementsByTagName("head")[0].appendChild(e)):r.console.error("highlight.js not detected!"),document.addEventListener("copy",function(e){var n,t=window.getSelection();!function(e){for(var n=e;n;){if(n.className&&-1!==n.className.indexOf("hljs-ln-code"))return 1;n=n.parentNode}}(t.anchorNode)||(n=-1!==window.navigator.userAgent.indexOf("Edge")?u(t):t.toString(),e.clipboardData.setData("text/plain",n),e.preventDefault())})}(window,document);
/*!
* reveal.js plugin that adds syntax highlight support.
*/
const Plugin = {
id: 'highlight',
HIGHLIGHT_STEP_DELIMITER: '|',
HIGHLIGHT_LINE_DELIMITER: ',',
HIGHLIGHT_LINE_RANGE_DELIMITER: '-',
hljs,
/**
* Highlights code blocks within the given deck.
*
* Note that this can be called multiple times if
* there are multiple presentations on one page.
*
* @param {Reveal} reveal the reveal.js instance
*/
init: function( reveal ) {
// Read the plugin config options and provide fallbacks
let config = reveal.getConfig().highlight || {};
config.highlightOnLoad = typeof config.highlightOnLoad === 'boolean' ? config.highlightOnLoad : true;
config.escapeHTML = typeof config.escapeHTML === 'boolean' ? config.escapeHTML : true;
Array.from( reveal.getRevealElement().querySelectorAll( 'pre code' ) ).forEach( block => {
block.parentNode.classList.add('code-wrapper');
// Code can optionally be wrapped in script template to avoid
// HTML being parsed by the browser (i.e. when you need to
// include <, > or & in your code).
let substitute = block.querySelector( 'script[type="text/template"]' );
if( substitute ) {
// textContent handles the HTML entity escapes for us
block.textContent = substitute.innerHTML;
}
// Trim whitespace if the "data-trim" attribute is present
if( block.hasAttribute( 'data-trim' ) && typeof block.innerHTML.trim === 'function' ) {
block.innerHTML = betterTrim( block );
}
// Escape HTML tags unless the "data-noescape" attrbute is present
if( config.escapeHTML && !block.hasAttribute( 'data-noescape' )) {
block.innerHTML = block.innerHTML.replace( /</g,"&lt;").replace(/>/g, '&gt;' );
}
// Re-highlight when focus is lost (for contenteditable code)
block.addEventListener( 'focusout', function( event ) {
hljs.highlightElement( event.currentTarget );
}, false );
} );
// Triggers a callback function before we trigger highlighting
if( typeof config.beforeHighlight === 'function' ) {
config.beforeHighlight( hljs );
}
// Run initial highlighting for all code
if( config.highlightOnLoad ) {
Array.from( reveal.getRevealElement().querySelectorAll( 'pre code' ) ).forEach( block => {
Plugin.highlightBlock( block );
} );
}
// If we're printing to PDF, scroll the code highlights of
// all blocks in the deck into view at once
reveal.on( 'pdf-ready', function() {
[].slice.call( reveal.getRevealElement().querySelectorAll( 'pre code[data-line-numbers].current-fragment' ) ).forEach( function( block ) {
Plugin.scrollHighlightedLineIntoView( block, {}, true );
} );
} );
},
/**
* Highlights a code block. If the <code> node has the
* 'data-line-numbers' attribute we also generate slide
* numbers.
*
* If the block contains multiple line highlight steps,
* we clone the block and create a fragment for each step.
*/
highlightBlock: function( block ) {
hljs.highlightElement( block );
// Don't generate line numbers for empty code blocks
if( block.innerHTML.trim().length === 0 ) return;
if( block.hasAttribute( 'data-line-numbers' ) ) {
hljs.lineNumbersBlock( block, { singleLine: true } );
var scrollState = { currentBlock: block };
// If there is more than one highlight step, generate
// fragments
var highlightSteps = Plugin.deserializeHighlightSteps( block.getAttribute( 'data-line-numbers' ) );
if( highlightSteps.length > 1 ) {
// If the original code block has a fragment-index,
// each clone should follow in an incremental sequence
var fragmentIndex = parseInt( block.getAttribute( 'data-fragment-index' ), 10 );
if( typeof fragmentIndex !== 'number' || isNaN( fragmentIndex ) ) {
fragmentIndex = null;
}
// Generate fragments for all steps except the original block
highlightSteps.slice(1).forEach( function( highlight ) {
var fragmentBlock = block.cloneNode( true );
fragmentBlock.setAttribute( 'data-line-numbers', Plugin.serializeHighlightSteps( [ highlight ] ) );
fragmentBlock.classList.add( 'fragment' );
block.parentNode.appendChild( fragmentBlock );
Plugin.highlightLines( fragmentBlock );
if( typeof fragmentIndex === 'number' ) {
fragmentBlock.setAttribute( 'data-fragment-index', fragmentIndex );
fragmentIndex += 1;
}
else {
fragmentBlock.removeAttribute( 'data-fragment-index' );
}
// Scroll highlights into view as we step through them
fragmentBlock.addEventListener( 'visible', Plugin.scrollHighlightedLineIntoView.bind( Plugin, fragmentBlock, scrollState ) );
fragmentBlock.addEventListener( 'hidden', Plugin.scrollHighlightedLineIntoView.bind( Plugin, fragmentBlock.previousSibling, scrollState ) );
} );
block.removeAttribute( 'data-fragment-index' );
block.setAttribute( 'data-line-numbers', Plugin.serializeHighlightSteps( [ highlightSteps[0] ] ) );
}
// Scroll the first highlight into view when the slide
// becomes visible. Note supported in IE11 since it lacks
// support for Element.closest.
var slide = typeof block.closest === 'function' ? block.closest( 'section:not(.stack)' ) : null;
if( slide ) {
var scrollFirstHighlightIntoView = function() {
Plugin.scrollHighlightedLineIntoView( block, scrollState, true );
slide.removeEventListener( 'visible', scrollFirstHighlightIntoView );
}
slide.addEventListener( 'visible', scrollFirstHighlightIntoView );
}
Plugin.highlightLines( block );
}
},
/**
* Animates scrolling to the first highlighted line
* in the given code block.
*/
scrollHighlightedLineIntoView: function( block, scrollState, skipAnimation ) {
cancelAnimationFrame( scrollState.animationFrameID );
// Match the scroll position of the currently visible
// code block
if( scrollState.currentBlock ) {
block.scrollTop = scrollState.currentBlock.scrollTop;
}
// Remember the current code block so that we can match
// its scroll position when showing/hiding fragments
scrollState.currentBlock = block;
var highlightBounds = this.getHighlightedLineBounds( block )
var viewportHeight = block.offsetHeight;
// Subtract padding from the viewport height
var blockStyles = getComputedStyle( block );
viewportHeight -= parseInt( blockStyles.paddingTop ) + parseInt( blockStyles.paddingBottom );
// Scroll position which centers all highlights
var startTop = block.scrollTop;
var targetTop = highlightBounds.top + ( Math.min( highlightBounds.bottom - highlightBounds.top, viewportHeight ) - viewportHeight ) / 2;
// Account for offsets in position applied to the
// <table> that holds our lines of code
var lineTable = block.querySelector( '.hljs-ln' );
if( lineTable ) targetTop += lineTable.offsetTop - parseInt( blockStyles.paddingTop );
// Make sure the scroll target is within bounds
targetTop = Math.max( Math.min( targetTop, block.scrollHeight - viewportHeight ), 0 );
if( skipAnimation === true || startTop === targetTop ) {
block.scrollTop = targetTop;
}
else {
// Don't attempt to scroll if there is no overflow
if( block.scrollHeight <= viewportHeight ) return;
var time = 0;
var animate = function() {
time = Math.min( time + 0.02, 1 );
// Update our eased scroll position
block.scrollTop = startTop + ( targetTop - startTop ) * Plugin.easeInOutQuart( time );
// Keep animating unless we've reached the end
if( time < 1 ) {
scrollState.animationFrameID = requestAnimationFrame( animate );
}
};
animate();
}
},
/**
* The easing function used when scrolling.
*/
easeInOutQuart: function( t ) {
// easeInOutQuart
return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t;
},
getHighlightedLineBounds: function( block ) {
var highlightedLines = block.querySelectorAll( '.highlight-line' );
if( highlightedLines.length === 0 ) {
return { top: 0, bottom: 0 };
}
else {
var firstHighlight = highlightedLines[0];
var lastHighlight = highlightedLines[ highlightedLines.length -1 ];
return {
top: firstHighlight.offsetTop,
bottom: lastHighlight.offsetTop + lastHighlight.offsetHeight
}
}
},
/**
* Visually emphasize specific lines within a code block.
* This only works on blocks with line numbering turned on.
*
* @param {HTMLElement} block a <code> block
* @param {String} [linesToHighlight] The lines that should be
* highlighted in this format:
* "1" = highlights line 1
* "2,5" = highlights lines 2 & 5
* "2,5-7" = highlights lines 2, 5, 6 & 7
*/
highlightLines: function( block, linesToHighlight ) {
var highlightSteps = Plugin.deserializeHighlightSteps( linesToHighlight || block.getAttribute( 'data-line-numbers' ) );
if( highlightSteps.length ) {
highlightSteps[0].forEach( function( highlight ) {
var elementsToHighlight = [];
// Highlight a range
if( typeof highlight.end === 'number' ) {
elementsToHighlight = [].slice.call( block.querySelectorAll( 'table tr:nth-child(n+'+highlight.start+'):nth-child(-n+'+highlight.end+')' ) );
}
// Highlight a single line
else if( typeof highlight.start === 'number' ) {
elementsToHighlight = [].slice.call( block.querySelectorAll( 'table tr:nth-child('+highlight.start+')' ) );
}
if( elementsToHighlight.length ) {
elementsToHighlight.forEach( function( lineElement ) {
lineElement.classList.add( 'highlight-line' );
} );
block.classList.add( 'has-highlights' );
}
} );
}
},
/**
* Parses and formats a user-defined string of line
* numbers to highlight.
*
* @example
* Plugin.deserializeHighlightSteps( '1,2|3,5-10' )
* // [
* // [ { start: 1 }, { start: 2 } ],
* // [ { start: 3 }, { start: 5, end: 10 } ]
* // ]
*/
deserializeHighlightSteps: function( highlightSteps ) {
// Remove whitespace
highlightSteps = highlightSteps.replace( /\s/g, '' );
// Divide up our line number groups
highlightSteps = highlightSteps.split( Plugin.HIGHLIGHT_STEP_DELIMITER );
return highlightSteps.map( function( highlights ) {
return highlights.split( Plugin.HIGHLIGHT_LINE_DELIMITER ).map( function( highlight ) {
// Parse valid line numbers
if( /^[\d-]+$/.test( highlight ) ) {
highlight = highlight.split( Plugin.HIGHLIGHT_LINE_RANGE_DELIMITER );
var lineStart = parseInt( highlight[0], 10 ),
lineEnd = parseInt( highlight[1], 10 );
if( isNaN( lineEnd ) ) {
return {
start: lineStart
};
}
else {
return {
start: lineStart,
end: lineEnd
};
}
}
// If no line numbers are provided, no code will be highlighted
else {
return {};
}
} );
} );
},
/**
* Serializes parsed line number data into a string so
* that we can store it in the DOM.
*/
serializeHighlightSteps: function( highlightSteps ) {
return highlightSteps.map( function( highlights ) {
return highlights.map( function( highlight ) {
// Line range
if( typeof highlight.end === 'number' ) {
return highlight.start + Plugin.HIGHLIGHT_LINE_RANGE_DELIMITER + highlight.end;
}
// Single line
else if( typeof highlight.start === 'number' ) {
return highlight.start;
}
// All lines
else {
return '';
}
} ).join( Plugin.HIGHLIGHT_LINE_DELIMITER );
} ).join( Plugin.HIGHLIGHT_STEP_DELIMITER );
}
}
// Function to perform a better "data-trim" on code snippets
// Will slice an indentation amount on each line of the snippet (amount based on the line having the lowest indentation length)
function betterTrim(snippetEl) {
// Helper functions
function trimLeft(val) {
// Adapted from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim#Polyfill
return val.replace(/^[\s\uFEFF\xA0]+/g, '');
}
function trimLineBreaks(input) {
var lines = input.split('\n');
// Trim line-breaks from the beginning
for (var i = 0; i < lines.length; i++) {
if (lines[i].trim() === '') {
lines.splice(i--, 1);
} else break;
}
// Trim line-breaks from the end
for (var i = lines.length-1; i >= 0; i--) {
if (lines[i].trim() === '') {
lines.splice(i, 1);
} else break;
}
return lines.join('\n');
}
// Main function for betterTrim()
return (function(snippetEl) {
var content = trimLineBreaks(snippetEl.innerHTML);
var lines = content.split('\n');
// Calculate the minimum amount to remove on each line start of the snippet (can be 0)
var pad = lines.reduce(function(acc, line) {
if (line.length > 0 && trimLeft(line).length > 0 && acc > line.length - trimLeft(line).length) {
return line.length - trimLeft(line).length;
}
return acc;
}, Number.POSITIVE_INFINITY);
// Slice each line with this amount
return lines.map(function(line, index) {
return line.slice(pad);
})
.join('\n');
})(snippetEl);
}
export default () => Plugin;

80
assets/reveal.js/plugin/highlight/zenburn.css Normal file
View File

@ -0,0 +1,80 @@
/*
Zenburn style from voldmar.ru (c) Vladimir Epifanov <voldmar@voldmar.ru>
based on dark.css by Ivan Sagalaev
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #3f3f3f;
color: #dcdcdc;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-tag {
color: #e3ceab;
}
.hljs-template-tag {
color: #dcdcdc;
}
.hljs-number {
color: #8cd0d3;
}
.hljs-variable,
.hljs-template-variable,
.hljs-attribute {
color: #efdcbc;
}
.hljs-literal {
color: #efefaf;
}
.hljs-subst {
color: #8f8f8f;
}
.hljs-title,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-section,
.hljs-type {
color: #efef8f;
}
.hljs-symbol,
.hljs-bullet,
.hljs-link {
color: #dca3a3;
}
.hljs-deletion,
.hljs-string,
.hljs-built_in,
.hljs-builtin-name {
color: #cc9393;
}
.hljs-addition,
.hljs-comment,
.hljs-quote,
.hljs-meta {
color: #7f9f7f;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}

7
assets/reveal.js/plugin/markdown/markdown.esm.js Normal file
View File

File diff suppressed because one or more lines are too long

7
assets/reveal.js/plugin/markdown/markdown.js Normal file
View File

File diff suppressed because one or more lines are too long

475
assets/reveal.js/plugin/markdown/plugin.js Normal file
View File

@ -0,0 +1,475 @@
/*!
* The reveal.js markdown plugin. Handles parsing of
* markdown inside of presentations as well as loading
* of external markdown documents.
*/
import { marked } from 'marked';
const DEFAULT_SLIDE_SEPARATOR = '\r?\n---\r?\n',
DEFAULT_NOTES_SEPARATOR = 'notes?:',
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$';
const SCRIPT_END_PLACEHOLDER = '__SCRIPT_END__';
const CODE_LINE_NUMBER_REGEX = /\[([\s\d,|-]*)\]/;
const HTML_ESCAPE_MAP = {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#39;'
};
const Plugin = () => {
// The reveal.js instance this plugin is attached to
let deck;
/**
* Retrieves the markdown contents of a slide section
* element. Normalizes leading tabs/whitespace.
*/
function getMarkdownFromSlide( section ) {
// look for a <script> or <textarea data-template> wrapper
var template = section.querySelector( '[data-template]' ) || section.querySelector( 'script' );
// strip leading whitespace so it isn't evaluated as code
var text = ( template || section ).textContent;
// restore script end tags
text = text.replace( new RegExp( SCRIPT_END_PLACEHOLDER, 'g' ), '</script>' );
var leadingWs = text.match( /^\n?(\s*)/ )[1].length,
leadingTabs = text.match( /^\n?(\t*)/ )[1].length;
if( leadingTabs > 0 ) {
text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}(.*)','g'), function(m, p1) { return '\n' + p1 ; } );
}
else if( leadingWs > 1 ) {
text = text.replace( new RegExp('\\n? {' + leadingWs + '}(.*)', 'g'), function(m, p1) { return '\n' + p1 ; } );
}
return text;
}
/**
* Given a markdown slide section element, this will
* return all arguments that aren't related to markdown
* parsing. Used to forward any other user-defined arguments
* to the output markdown slide.
*/
function getForwardedAttributes( section ) {
var attributes = section.attributes;
var result = [];
for( var i = 0, len = attributes.length; i < len; i++ ) {
var name = attributes[i].name,
value = attributes[i].value;
// disregard attributes that are used for markdown loading/parsing
if( /data\-(markdown|separator|vertical|notes)/gi.test( name ) ) continue;
if( value ) {
result.push( name + '="' + value + '"' );
}
else {
result.push( name );
}
}
return result.join( ' ' );
}
/**
* Inspects the given options and fills out default
* values for what's not defined.
*/
function getSlidifyOptions( options ) {
options = options || {};
options.separator = options.separator || DEFAULT_SLIDE_SEPARATOR;
options.notesSeparator = options.notesSeparator || DEFAULT_NOTES_SEPARATOR;
options.attributes = options.attributes || '';
return options;
}
/**
* Helper function for constructing a markdown slide.
*/
function createMarkdownSlide( content, options ) {
options = getSlidifyOptions( options );
var notesMatch = content.split( new RegExp( options.notesSeparator, 'mgi' ) );
if( notesMatch.length === 2 ) {
content = notesMatch[0] + '<aside class="notes">' + marked(notesMatch[1].trim()) + '</aside>';
}
// prevent script end tags in the content from interfering
// with parsing
content = content.replace( /<\/script>/g, SCRIPT_END_PLACEHOLDER );
return '<script type="text/template">' + content + '</script>';
}
/**
* Parses a data string into multiple slides based
* on the passed in separator arguments.
*/
function slidify( markdown, options ) {
options = getSlidifyOptions( options );
var separatorRegex = new RegExp( options.separator + ( options.verticalSeparator ? '|' + options.verticalSeparator : '' ), 'mg' ),
horizontalSeparatorRegex = new RegExp( options.separator );
var matches,
lastIndex = 0,
isHorizontal,
wasHorizontal = true,
content,
sectionStack = [];
// iterate until all blocks between separators are stacked up
while( matches = separatorRegex.exec( markdown ) ) {
var notes = null;
// determine direction (horizontal by default)
isHorizontal = horizontalSeparatorRegex.test( matches[0] );
if( !isHorizontal && wasHorizontal ) {
// create vertical stack
sectionStack.push( [] );
}
// pluck slide content from markdown input
content = markdown.substring( lastIndex, matches.index );
if( isHorizontal && wasHorizontal ) {
// add to horizontal stack
sectionStack.push( content );
}
else {
// add to vertical stack
sectionStack[sectionStack.length-1].push( content );
}
lastIndex = separatorRegex.lastIndex;
wasHorizontal = isHorizontal;
}
// add the remaining slide
( wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1] ).push( markdown.substring( lastIndex ) );
var markdownSections = '';
// flatten the hierarchical stack, and insert <section data-markdown> tags
for( var i = 0, len = sectionStack.length; i < len; i++ ) {
// vertical
if( sectionStack[i] instanceof Array ) {
markdownSections += '<section '+ options.attributes +'>';
sectionStack[i].forEach( function( child ) {
markdownSections += '<section data-markdown>' + createMarkdownSlide( child, options ) + '</section>';
} );
markdownSections += '</section>';
}
else {
markdownSections += '<section '+ options.attributes +' data-markdown>' + createMarkdownSlide( sectionStack[i], options ) + '</section>';
}
}
return markdownSections;
}
/**
* Parses any current data-markdown slides, splits
* multi-slide markdown into separate sections and
* handles loading of external markdown.
*/
function processSlides( scope ) {
return new Promise( function( resolve ) {
var externalPromises = [];
[].slice.call( scope.querySelectorAll( 'section[data-markdown]:not([data-markdown-parsed])') ).forEach( function( section, i ) {
if( section.getAttribute( 'data-markdown' ).length ) {
externalPromises.push( loadExternalMarkdown( section ).then(
// Finished loading external file
function( xhr, url ) {
section.outerHTML = slidify( xhr.responseText, {
separator: section.getAttribute( 'data-separator' ),
verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
notesSeparator: section.getAttribute( 'data-separator-notes' ),
attributes: getForwardedAttributes( section )
});
},
// Failed to load markdown
function( xhr, url ) {
section.outerHTML = '<section data-state="alert">' +
'ERROR: The attempt to fetch ' + url + ' failed with HTTP status ' + xhr.status + '.' +
'Check your browser\'s JavaScript console for more details.' +
'<p>Remember that you need to serve the presentation HTML from a HTTP server.</p>' +
'</section>';
}
) );
}
else {
section.outerHTML = slidify( getMarkdownFromSlide( section ), {
separator: section.getAttribute( 'data-separator' ),
verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
notesSeparator: section.getAttribute( 'data-separator-notes' ),
attributes: getForwardedAttributes( section )
});
}
});
Promise.all( externalPromises ).then( resolve );
} );
}
function loadExternalMarkdown( section ) {
return new Promise( function( resolve, reject ) {
var xhr = new XMLHttpRequest(),
url = section.getAttribute( 'data-markdown' );
var datacharset = section.getAttribute( 'data-charset' );
// see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
if( datacharset != null && datacharset != '' ) {
xhr.overrideMimeType( 'text/html; charset=' + datacharset );
}
xhr.onreadystatechange = function( section, xhr ) {
if( xhr.readyState === 4 ) {
// file protocol yields status code 0 (useful for local debug, mobile applications etc.)
if ( ( xhr.status >= 200 && xhr.status < 300 ) || xhr.status === 0 ) {
resolve( xhr, url );
}
else {
reject( xhr, url );
}
}
}.bind( this, section, xhr );
xhr.open( 'GET', url, true );
try {
xhr.send();
}
catch ( e ) {
console.warn( 'Failed to get the Markdown file ' + url + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + e );
resolve( xhr, url );
}
} );
}
/**
* Check if a node value has the attributes pattern.
* If yes, extract it and add that value as one or several attributes
* to the target element.
*
* You need Cache Killer on Chrome to see the effect on any FOM transformation
* directly on refresh (F5)
* http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development/7000899#answer-11786277
*/
function addAttributeInElement( node, elementTarget, separator ) {
var mardownClassesInElementsRegex = new RegExp( separator, 'mg' );
var mardownClassRegex = new RegExp( "([^\"= ]+?)=\"([^\"]+?)\"|(data-[^\"= ]+?)(?=[\" ])", 'mg' );
var nodeValue = node.nodeValue;
var matches,
matchesClass;
if( matches = mardownClassesInElementsRegex.exec( nodeValue ) ) {
var classes = matches[1];
nodeValue = nodeValue.substring( 0, matches.index ) + nodeValue.substring( mardownClassesInElementsRegex.lastIndex );
node.nodeValue = nodeValue;
while( matchesClass = mardownClassRegex.exec( classes ) ) {
if( matchesClass[2] ) {
elementTarget.setAttribute( matchesClass[1], matchesClass[2] );
} else {
elementTarget.setAttribute( matchesClass[3], "" );
}
}
return true;
}
return false;
}
/**
* Add attributes to the parent element of a text node,
* or the element of an attribute node.
*/
function addAttributes( section, element, previousElement, separatorElementAttributes, separatorSectionAttributes ) {
if ( element != null && element.childNodes != undefined && element.childNodes.length > 0 ) {
var previousParentElement = element;
for( var i = 0; i < element.childNodes.length; i++ ) {
var childElement = element.childNodes[i];
if ( i > 0 ) {
var j = i - 1;
while ( j >= 0 ) {
var aPreviousChildElement = element.childNodes[j];
if ( typeof aPreviousChildElement.setAttribute == 'function' && aPreviousChildElement.tagName != "BR" ) {
previousParentElement = aPreviousChildElement;
break;
}
j = j - 1;
}
}
var parentSection = section;
if( childElement.nodeName == "section" ) {
parentSection = childElement ;
previousParentElement = childElement ;
}
if ( typeof childElement.setAttribute == 'function' || childElement.nodeType == Node.COMMENT_NODE ) {
addAttributes( parentSection, childElement, previousParentElement, separatorElementAttributes, separatorSectionAttributes );
}
}
}
if ( element.nodeType == Node.COMMENT_NODE ) {
if ( addAttributeInElement( element, previousElement, separatorElementAttributes ) == false ) {
addAttributeInElement( element, section, separatorSectionAttributes );
}
}
}
/**
* Converts any current data-markdown slides in the
* DOM to HTML.
*/
function convertSlides() {
var sections = deck.getRevealElement().querySelectorAll( '[data-markdown]:not([data-markdown-parsed])');
[].slice.call( sections ).forEach( function( section ) {
section.setAttribute( 'data-markdown-parsed', true )
var notes = section.querySelector( 'aside.notes' );
var markdown = getMarkdownFromSlide( section );
section.innerHTML = marked( markdown );
addAttributes( section, section, null, section.getAttribute( 'data-element-attributes' ) ||
section.parentNode.getAttribute( 'data-element-attributes' ) ||
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR,
section.getAttribute( 'data-attributes' ) ||
section.parentNode.getAttribute( 'data-attributes' ) ||
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR);
// If there were notes, we need to re-add them after
// having overwritten the section's HTML
if( notes ) {
section.appendChild( notes );
}
} );
return Promise.resolve();
}
function escapeForHTML( input ) {
return input.replace( /([&<>'"])/g, char => HTML_ESCAPE_MAP[char] );
}
return {
id: 'markdown',
/**
* Starts processing and converting Markdown within the
* current reveal.js deck.
*/
init: function( reveal ) {
deck = reveal;
let { renderer, animateLists, ...markedOptions } = deck.getConfig().markdown || {};
if( !renderer ) {
renderer = new marked.Renderer();
renderer.code = ( code, language ) => {
// Off by default
let lineNumbers = '';
// Users can opt in to show line numbers and highlight
// specific lines.
// ```javascript [] show line numbers
// ```javascript [1,4-8] highlights lines 1 and 4-8
if( CODE_LINE_NUMBER_REGEX.test( language ) ) {
lineNumbers = language.match( CODE_LINE_NUMBER_REGEX )[1].trim();
lineNumbers = `data-line-numbers="${lineNumbers}"`;
language = language.replace( CODE_LINE_NUMBER_REGEX, '' ).trim();
}
// Escape before this gets injected into the DOM to
// avoid having the HTML parser alter our code before
// highlight.js is able to read it
code = escapeForHTML( code );
return `<pre><code ${lineNumbers} class="${language}">${code}</code></pre>`;
};
}
if( animateLists === true ) {
renderer.listitem = text => `<li class="fragment">${text}</li>`;
}
marked.setOptions( {
renderer,
...markedOptions
} );
return processSlides( deck.getRevealElement() ).then( convertSlides );
},
// TODO: Do these belong in the API?
processSlides: processSlides,
convertSlides: convertSlides,
slidify: slidify,
marked: marked
}
};
export default Plugin;

1
assets/reveal.js/plugin/notes/notes.esm.js Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/reveal.js/plugin/notes/notes.js Normal file
View File

File diff suppressed because one or more lines are too long

261
assets/reveal.js/plugin/notes/plugin.js Normal file
View File

@ -0,0 +1,261 @@
import speakerViewHTML from './speaker-view.html'
import { marked } from 'marked';
/**
* Handles opening of and synchronization with the reveal.js
* notes window.
*
* Handshake process:
* 1. This window posts 'connect' to notes window
* - Includes URL of presentation to show
* 2. Notes window responds with 'connected' when it is available
* 3. This window proceeds to send the current presentation state
* to the notes window
*/
const Plugin = () => {
let connectInterval;
let speakerWindow = null;
let deck;
/**
* Opens a new speaker view window.
*/
function openSpeakerWindow() {
// If a window is already open, focus it
if( speakerWindow && !speakerWindow.closed ) {
speakerWindow.focus();
}
else {
speakerWindow = window.open( 'about:blank', 'reveal.js - Notes', 'width=1100,height=700' );
speakerWindow.marked = marked;
speakerWindow.document.write( speakerViewHTML );
if( !speakerWindow ) {
alert( 'Speaker view popup failed to open. Please make sure popups are allowed and reopen the speaker view.' );
return;
}
connect();
}
}
/**
* Reconnect with an existing speaker view window.
*/
function reconnectSpeakerWindow( reconnectWindow ) {
if( speakerWindow && !speakerWindow.closed ) {
speakerWindow.focus();
}
else {
speakerWindow = reconnectWindow;
window.addEventListener( 'message', onPostMessage );
onConnected();
}
}
/**
* Connect to the notes window through a postmessage handshake.
* Using postmessage enables us to work in situations where the
* origins differ, such as a presentation being opened from the
* file system.
*/
function connect() {
const presentationURL = deck.getConfig().url;
const url = typeof presentationURL === 'string' ? presentationURL :
window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search;
// Keep trying to connect until we get a 'connected' message back
connectInterval = setInterval( function() {
speakerWindow.postMessage( JSON.stringify( {
namespace: 'reveal-notes',
type: 'connect',
state: deck.getState(),
url
} ), '*' );
}, 500 );
window.addEventListener( 'message', onPostMessage );
}
/**
* Calls the specified Reveal.js method with the provided argument
* and then pushes the result to the notes frame.
*/
function callRevealApi( methodName, methodArguments, callId ) {
let result = deck[methodName].apply( deck, methodArguments );
speakerWindow.postMessage( JSON.stringify( {
namespace: 'reveal-notes',
type: 'return',
result,
callId
} ), '*' );
}
/**
* Posts the current slide data to the notes window.
*/
function post( event ) {
let slideElement = deck.getCurrentSlide(),
notesElements = slideElement.querySelectorAll( 'aside.notes' ),
fragmentElement = slideElement.querySelector( '.current-fragment' );
let messageData = {
namespace: 'reveal-notes',
type: 'state',
notes: '',
markdown: false,
whitespace: 'normal',
state: deck.getState()
};
// Look for notes defined in a slide attribute
if( slideElement.hasAttribute( 'data-notes' ) ) {
messageData.notes = slideElement.getAttribute( 'data-notes' );
messageData.whitespace = 'pre-wrap';
}
// Look for notes defined in a fragment
if( fragmentElement ) {
let fragmentNotes = fragmentElement.querySelector( 'aside.notes' );
if( fragmentNotes ) {
messageData.notes = fragmentNotes.innerHTML;
messageData.markdown = typeof fragmentNotes.getAttribute( 'data-markdown' ) === 'string';
// Ignore other slide notes
notesElements = null;
}
else if( fragmentElement.hasAttribute( 'data-notes' ) ) {
messageData.notes = fragmentElement.getAttribute( 'data-notes' );
messageData.whitespace = 'pre-wrap';
// In case there are slide notes
notesElements = null;
}
}
// Look for notes defined in an aside element
if( notesElements ) {
messageData.notes = Array.from(notesElements).map( notesElement => notesElement.innerHTML ).join( '\n' );
messageData.markdown = notesElements[0] && typeof notesElements[0].getAttribute( 'data-markdown' ) === 'string';
}
speakerWindow.postMessage( JSON.stringify( messageData ), '*' );
}
/**
* Check if the given event is from the same origin as the
* current window.
*/
function isSameOriginEvent( event ) {
try {
return window.location.origin === event.source.location.origin;
}
catch ( error ) {
return false;
}
}
function onPostMessage( event ) {
// Only allow same-origin messages
// (added 12/5/22 as a XSS safeguard)
if( isSameOriginEvent( event ) ) {
let data = JSON.parse( event.data );
if( data && data.namespace === 'reveal-notes' && data.type === 'connected' ) {
clearInterval( connectInterval );
onConnected();
}
else if( data && data.namespace === 'reveal-notes' && data.type === 'call' ) {
callRevealApi( data.methodName, data.arguments, data.callId );
}
}
}
/**
* Called once we have established a connection to the notes
* window.
*/
function onConnected() {
// Monitor events that trigger a change in state
deck.on( 'slidechanged', post );
deck.on( 'fragmentshown', post );
deck.on( 'fragmenthidden', post );
deck.on( 'overviewhidden', post );
deck.on( 'overviewshown', post );
deck.on( 'paused', post );
deck.on( 'resumed', post );
// Post the initial state
post();
}
return {
id: 'notes',
init: function( reveal ) {
deck = reveal;
if( !/receiver/i.test( window.location.search ) ) {
// If the there's a 'notes' query set, open directly
if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
openSpeakerWindow();
}
else {
// Keep listening for speaker view hearbeats. If we receive a
// heartbeat from an orphaned window, reconnect it. This ensures
// that we remain connected to the notes even if the presentation
// is reloaded.
window.addEventListener( 'message', event => {
if( !speakerWindow && typeof event.data === 'string' ) {
let data;
try {
data = JSON.parse( event.data );
}
catch( error ) {}
if( data && data.namespace === 'reveal-notes' && data.type === 'heartbeat' ) {
reconnectSpeakerWindow( event.source );
}
}
});
}
// Open the notes when the 's' key is hit
deck.addKeyBinding({keyCode: 83, key: 'S', description: 'Speaker notes view'}, function() {
openSpeakerWindow();
} );
}
},
open: openSpeakerWindow
};
};
export default Plugin;

891
assets/reveal.js/plugin/notes/speaker-view.html Normal file
View File

@ -0,0 +1,891 @@
<!--
NOTE: You need to build the notes plugin after making changes to this file.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Speaker View</title>
<style>
body {
font-family: Helvetica;
font-size: 18px;
}
#current-slide,
#upcoming-slide,
#speaker-controls {
padding: 6px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#current-slide iframe,
#upcoming-slide iframe {
width: 100%;
height: 100%;
border: 1px solid #ddd;
}
#current-slide .label,
#upcoming-slide .label {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
}
#connection-status {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 20;
padding: 30% 20% 20% 20%;
font-size: 18px;
color: #222;
background: #fff;
text-align: center;
box-sizing: border-box;
line-height: 1.4;
}
.overlay-element {
height: 34px;
line-height: 34px;
padding: 0 10px;
text-shadow: none;
background: rgba( 220, 220, 220, 0.8 );
color: #222;
font-size: 14px;
}
.overlay-element.interactive:hover {
background: rgba( 220, 220, 220, 1 );
}
#current-slide {
position: absolute;
width: 60%;
height: 100%;
top: 0;
left: 0;
padding-right: 0;
}
#upcoming-slide {
position: absolute;
width: 40%;
height: 40%;
right: 0;
top: 0;
}
/* Speaker controls */
#speaker-controls {
position: absolute;
top: 40%;
right: 0;
width: 40%;
height: 60%;
overflow: auto;
font-size: 18px;
}
.speaker-controls-time.hidden,
.speaker-controls-notes.hidden {
display: none;
}
.speaker-controls-time .label,
.speaker-controls-pace .label,
.speaker-controls-notes .label {
text-transform: uppercase;
font-weight: normal;
font-size: 0.66em;
color: #666;
margin: 0;
}
.speaker-controls-time, .speaker-controls-pace {
border-bottom: 1px solid rgba( 200, 200, 200, 0.5 );
margin-bottom: 10px;
padding: 10px 16px;
padding-bottom: 20px;
cursor: pointer;
}
.speaker-controls-time .reset-button {
opacity: 0;
float: right;
color: #666;
text-decoration: none;
}
.speaker-controls-time:hover .reset-button {
opacity: 1;
}
.speaker-controls-time .timer,
.speaker-controls-time .clock {
width: 50%;
}
.speaker-controls-time .timer,
.speaker-controls-time .clock,
.speaker-controls-time .pacing .hours-value,
.speaker-controls-time .pacing .minutes-value,
.speaker-controls-time .pacing .seconds-value {
font-size: 1.9em;
}
.speaker-controls-time .timer {
float: left;
}
.speaker-controls-time .clock {
float: right;
text-align: right;
}
.speaker-controls-time span.mute {
opacity: 0.3;
}
.speaker-controls-time .pacing-title {
margin-top: 5px;
}
.speaker-controls-time .pacing.ahead {
color: blue;
}
.speaker-controls-time .pacing.on-track {
color: green;
}
.speaker-controls-time .pacing.behind {
color: red;
}
.speaker-controls-notes {
padding: 10px 16px;
}
.speaker-controls-notes .value {
margin-top: 5px;
line-height: 1.4;
font-size: 1.2em;
}
/* Layout selector */
#speaker-layout {
position: absolute;
top: 10px;
right: 10px;
color: #222;
z-index: 10;
}
#speaker-layout select {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 0;
box-shadow: 0;
cursor: pointer;
opacity: 0;
font-size: 1em;
background-color: transparent;
-moz-appearance: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#speaker-layout select:focus {
outline: none;
box-shadow: none;
}
.clear {
clear: both;
}
/* Speaker layout: Wide */
body[data-speaker-layout="wide"] #current-slide,
body[data-speaker-layout="wide"] #upcoming-slide {
width: 50%;
height: 45%;
padding: 6px;
}
body[data-speaker-layout="wide"] #current-slide {
top: 0;
left: 0;
}
body[data-speaker-layout="wide"] #upcoming-slide {
top: 0;
left: 50%;
}
body[data-speaker-layout="wide"] #speaker-controls {
top: 45%;
left: 0;
width: 100%;
height: 50%;
font-size: 1.25em;
}
/* Speaker layout: Tall */
body[data-speaker-layout="tall"] #current-slide,
body[data-speaker-layout="tall"] #upcoming-slide {
width: 45%;
height: 50%;
padding: 6px;
}
body[data-speaker-layout="tall"] #current-slide {
top: 0;
left: 0;
}
body[data-speaker-layout="tall"] #upcoming-slide {
top: 50%;
left: 0;
}
body[data-speaker-layout="tall"] #speaker-controls {
padding-top: 40px;
top: 0;
left: 45%;
width: 55%;
height: 100%;
font-size: 1.25em;
}
/* Speaker layout: Notes only */
body[data-speaker-layout="notes-only"] #current-slide,
body[data-speaker-layout="notes-only"] #upcoming-slide {
display: none;
}
body[data-speaker-layout="notes-only"] #speaker-controls {
padding-top: 40px;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 1.25em;
}
@media screen and (max-width: 1080px) {
body[data-speaker-layout="default"] #speaker-controls {
font-size: 16px;
}
}
@media screen and (max-width: 900px) {
body[data-speaker-layout="default"] #speaker-controls {
font-size: 14px;
}
}
@media screen and (max-width: 800px) {
body[data-speaker-layout="default"] #speaker-controls {
font-size: 12px;
}
}
</style>
</head>
<body>
<div id="connection-status">Loading speaker view...</div>
<div id="current-slide"></div>
<div id="upcoming-slide"><span class="overlay-element label">Upcoming</span></div>
<div id="speaker-controls">
<div class="speaker-controls-time">
<h4 class="label">Time <span class="reset-button">Click to Reset</span></h4>
<div class="clock">
<span class="clock-value">0:00 AM</span>
</div>
<div class="timer">
<span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
</div>
<div class="clear"></div>
<h4 class="label pacing-title" style="display: none">Pacing – Time to finish current slide</h4>
<div class="pacing" style="display: none">
<span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
</div>
</div>
<div class="speaker-controls-notes hidden">
<h4 class="label">Notes</h4>
<div class="value"></div>
</div>
</div>
<div id="speaker-layout" class="overlay-element interactive">
<span class="speaker-layout-label"></span>
<select class="speaker-layout-dropdown"></select>
</div>
<script>
(function() {
var notes,
notesValue,
currentState,
currentSlide,
upcomingSlide,
layoutLabel,
layoutDropdown,
pendingCalls = {},
lastRevealApiCallId = 0,
connected = false
var connectionStatus = document.querySelector( '#connection-status' );
var SPEAKER_LAYOUTS = {
'default': 'Default',
'wide': 'Wide',
'tall': 'Tall',
'notes-only': 'Notes only'
};
setupLayout();
let openerOrigin;
try {
openerOrigin = window.opener.location.origin;
}
catch ( error ) { console.warn( error ) }
// In order to prevent XSS, the speaker view will only run if its
// opener has the same origin as itself
if( window.location.origin !== openerOrigin ) {
connectionStatus.innerHTML = 'Cross origin error.<br>The speaker window can only be opened from the same origin.';
return;
}
var connectionTimeout = setTimeout( function() {
connectionStatus.innerHTML = 'Error connecting to main window.<br>Please try closing and reopening the speaker view.';
}, 5000 );
window.addEventListener( 'message', function( event ) {
clearTimeout( connectionTimeout );
connectionStatus.style.display = 'none';
var data = JSON.parse( event.data );
// The overview mode is only useful to the reveal.js instance
// where navigation occurs so we don't sync it
if( data.state ) delete data.state.overview;
// Messages sent by the notes plugin inside of the main window
if( data && data.namespace === 'reveal-notes' ) {
if( data.type === 'connect' ) {
handleConnectMessage( data );
}
else if( data.type === 'state' ) {
handleStateMessage( data );
}
else if( data.type === 'return' ) {
pendingCalls[data.callId](data.result);
delete pendingCalls[data.callId];
}
}
// Messages sent by the reveal.js inside of the current slide preview
else if( data && data.namespace === 'reveal' ) {
if( /ready/.test( data.eventName ) ) {
// Send a message back to notify that the handshake is complete
window.opener.postMessage( JSON.stringify({ namespace: 'reveal-notes', type: 'connected'} ), '*' );
}
else if( /slidechanged|fragmentshown|fragmenthidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
dispatchStateToMainWindow( data.state );
}
}
} );
/**
* Updates the presentation in the main window to match the state
* of the presentation in the notes window.
*/
const dispatchStateToMainWindow = debounce(( state ) => {
window.opener.postMessage( JSON.stringify({ method: 'setState', args: [ state ]} ), '*' );
}, 500);
/**
* Asynchronously calls the Reveal.js API of the main frame.
*/
function callRevealApi( methodName, methodArguments, callback ) {
var callId = ++lastRevealApiCallId;
pendingCalls[callId] = callback;
window.opener.postMessage( JSON.stringify( {
namespace: 'reveal-notes',
type: 'call',
callId: callId,
methodName: methodName,
arguments: methodArguments
} ), '*' );
}
/**
* Called when the main window is trying to establish a
* connection.
*/
function handleConnectMessage( data ) {
if( connected === false ) {
connected = true;
setupIframes( data );
setupKeyboard();
setupNotes();
setupTimer();
setupHeartbeat();
}
}
/**
* Called when the main window sends an updated state.
*/
function handleStateMessage( data ) {
// Store the most recently set state to avoid circular loops
// applying the same state
currentState = JSON.stringify( data.state );
// No need for updating the notes in case of fragment changes
if ( data.notes ) {
notes.classList.remove( 'hidden' );
notesValue.style.whiteSpace = data.whitespace;
if( data.markdown ) {
notesValue.innerHTML = marked( data.notes );
}
else {
notesValue.innerHTML = data.notes;
}
}
else {
notes.classList.add( 'hidden' );
}
// Update the note slides
currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'next' }), '*' );
}
// Limit to max one state update per X ms
handleStateMessage = debounce( handleStateMessage, 200 );
/**
* Forward keyboard events to the current slide window.
* This enables keyboard events to work even if focus
* isn't set on the current slide iframe.
*
* Block F5 default handling, it reloads and disconnects
* the speaker notes window.
*/
function setupKeyboard() {
document.addEventListener( 'keydown', function( event ) {
if( event.keyCode === 116 || ( event.metaKey && event.keyCode === 82 ) ) {
event.preventDefault();
return false;
}
currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'triggerKey', args: [ event.keyCode ] }), '*' );
} );
}
/**
* Creates the preview iframes.
*/
function setupIframes( data ) {
var params = [
'receiver',
'progress=false',
'history=false',
'transition=none',
'autoSlide=0',
'backgroundTransition=none'
].join( '&' );
var urlSeparator = /\?/.test(data.url) ? '&' : '?';
var hash = '#/' + data.state.indexh + '/' + data.state.indexv;
var currentURL = data.url + urlSeparator + params + '&postMessageEvents=true' + hash;
var upcomingURL = data.url + urlSeparator + params + '&controls=false' + hash;
currentSlide = document.createElement( 'iframe' );
currentSlide.setAttribute( 'width', 1280 );
currentSlide.setAttribute( 'height', 1024 );
currentSlide.setAttribute( 'src', currentURL );
document.querySelector( '#current-slide' ).appendChild( currentSlide );
upcomingSlide = document.createElement( 'iframe' );
upcomingSlide.setAttribute( 'width', 640 );
upcomingSlide.setAttribute( 'height', 512 );
upcomingSlide.setAttribute( 'src', upcomingURL );
document.querySelector( '#upcoming-slide' ).appendChild( upcomingSlide );
}
/**
* Setup the notes UI.
*/
function setupNotes() {
notes = document.querySelector( '.speaker-controls-notes' );
notesValue = document.querySelector( '.speaker-controls-notes .value' );
}
/**
* We send out a heartbeat at all times to ensure we can
* reconnect with the main presentation window after reloads.
*/
function setupHeartbeat() {
setInterval( () => {
window.opener.postMessage( JSON.stringify({ namespace: 'reveal-notes', type: 'heartbeat'} ), '*' );
}, 1000 );
}
function getTimings( callback ) {
callRevealApi( 'getSlidesAttributes', [], function ( slideAttributes ) {
callRevealApi( 'getConfig', [], function ( config ) {
var totalTime = config.totalTime;
var minTimePerSlide = config.minimumTimePerSlide || 0;
var defaultTiming = config.defaultTiming;
if ((defaultTiming == null) && (totalTime == null)) {
callback(null);
return;
}
// Setting totalTime overrides defaultTiming
if (totalTime) {
defaultTiming = 0;
}
var timings = [];
for ( var i in slideAttributes ) {
var slide = slideAttributes[ i ];
var timing = defaultTiming;
if( slide.hasOwnProperty( 'data-timing' )) {
var t = slide[ 'data-timing' ];
timing = parseInt(t);
if( isNaN(timing) ) {
console.warn("Could not parse timing '" + t + "' of slide " + i + "; using default of " + defaultTiming);
timing = defaultTiming;
}
}
timings.push(timing);
}
if ( totalTime ) {
// After we've allocated time to individual slides, we summarize it and
// subtract it from the total time
var remainingTime = totalTime - timings.reduce( function(a, b) { return a + b; }, 0 );
// The remaining time is divided by the number of slides that have 0 seconds
// allocated at the moment, giving the average time-per-slide on the remaining slides
var remainingSlides = (timings.filter( function(x) { return x == 0 }) ).length
var timePerSlide = Math.round( remainingTime / remainingSlides, 0 )
// And now we replace every zero-value timing with that average
timings = timings.map( function(x) { return (x==0 ? timePerSlide : x) } );
}
var slidesUnderMinimum = timings.filter( function(x) { return (x < minTimePerSlide) } ).length
if ( slidesUnderMinimum ) {
message = "The pacing time for " + slidesUnderMinimum + " slide(s) is under the configured minimum of " + minTimePerSlide + " seconds. Check the data-timing attribute on individual slides, or consider increasing the totalTime or minimumTimePerSlide configuration options (or removing some slides).";
alert(message);
}
callback( timings );
} );
} );
}
/**
* Return the number of seconds allocated for presenting
* all slides up to and including this one.
*/
function getTimeAllocated( timings, callback ) {
callRevealApi( 'getSlidePastCount', [], function ( currentSlide ) {
var allocated = 0;
for (var i in timings.slice(0, currentSlide + 1)) {
allocated += timings[i];
}
callback( allocated );
} );
}
/**
* Create the timer and clock and start updating them
* at an interval.
*/
function setupTimer() {
var start = new Date(),
timeEl = document.querySelector( '.speaker-controls-time' ),
clockEl = timeEl.querySelector( '.clock-value' ),
hoursEl = timeEl.querySelector( '.hours-value' ),
minutesEl = timeEl.querySelector( '.minutes-value' ),
secondsEl = timeEl.querySelector( '.seconds-value' ),
pacingTitleEl = timeEl.querySelector( '.pacing-title' ),
pacingEl = timeEl.querySelector( '.pacing' ),
pacingHoursEl = pacingEl.querySelector( '.hours-value' ),
pacingMinutesEl = pacingEl.querySelector( '.minutes-value' ),
pacingSecondsEl = pacingEl.querySelector( '.seconds-value' );
var timings = null;
getTimings( function ( _timings ) {
timings = _timings;
if (_timings !== null) {
pacingTitleEl.style.removeProperty('display');
pacingEl.style.removeProperty('display');
}
// Update once directly
_updateTimer();
// Then update every second
setInterval( _updateTimer, 1000 );
} );
function _resetTimer() {
if (timings == null) {
start = new Date();
_updateTimer();
}
else {
// Reset timer to beginning of current slide
getTimeAllocated( timings, function ( slideEndTimingSeconds ) {
var slideEndTiming = slideEndTimingSeconds * 1000;
callRevealApi( 'getSlidePastCount', [], function ( currentSlide ) {
var currentSlideTiming = timings[currentSlide] * 1000;
var previousSlidesTiming = slideEndTiming - currentSlideTiming;
var now = new Date();
start = new Date(now.getTime() - previousSlidesTiming);
_updateTimer();
} );
} );
}
}
timeEl.addEventListener( 'click', function() {
_resetTimer();
return false;
} );
function _displayTime( hrEl, minEl, secEl, time) {
var sign = Math.sign(time) == -1 ? "-" : "";
time = Math.abs(Math.round(time / 1000));
var seconds = time % 60;
var minutes = Math.floor( time / 60 ) % 60 ;
var hours = Math.floor( time / ( 60 * 60 )) ;
hrEl.innerHTML = sign + zeroPadInteger( hours );
if (hours == 0) {
hrEl.classList.add( 'mute' );
}
else {
hrEl.classList.remove( 'mute' );
}
minEl.innerHTML = ':' + zeroPadInteger( minutes );
if (hours == 0 && minutes == 0) {
minEl.classList.add( 'mute' );
}
else {
minEl.classList.remove( 'mute' );
}
secEl.innerHTML = ':' + zeroPadInteger( seconds );
}
function _updateTimer() {
var diff, hours, minutes, seconds,
now = new Date();
diff = now.getTime() - start.getTime();
clockEl.innerHTML = now.toLocaleTimeString( 'en-US', { hour12: true, hour: '2-digit', minute:'2-digit' } );
_displayTime( hoursEl, minutesEl, secondsEl, diff );
if (timings !== null) {
_updatePacing(diff);
}
}
function _updatePacing(diff) {
getTimeAllocated( timings, function ( slideEndTimingSeconds ) {
var slideEndTiming = slideEndTimingSeconds * 1000;
callRevealApi( 'getSlidePastCount', [], function ( currentSlide ) {
var currentSlideTiming = timings[currentSlide] * 1000;
var timeLeftCurrentSlide = slideEndTiming - diff;
if (timeLeftCurrentSlide < 0) {
pacingEl.className = 'pacing behind';
}
else if (timeLeftCurrentSlide < currentSlideTiming) {
pacingEl.className = 'pacing on-track';
}
else {
pacingEl.className = 'pacing ahead';
}
_displayTime( pacingHoursEl, pacingMinutesEl, pacingSecondsEl, timeLeftCurrentSlide );
} );
} );
}
}
/**
* Sets up the speaker view layout and layout selector.
*/
function setupLayout() {
layoutDropdown = document.querySelector( '.speaker-layout-dropdown' );
layoutLabel = document.querySelector( '.speaker-layout-label' );
// Render the list of available layouts
for( var id in SPEAKER_LAYOUTS ) {
var option = document.createElement( 'option' );
option.setAttribute( 'value', id );
option.textContent = SPEAKER_LAYOUTS[ id ];
layoutDropdown.appendChild( option );
}
// Monitor the dropdown for changes
layoutDropdown.addEventListener( 'change', function( event ) {
setLayout( layoutDropdown.value );
}, false );
// Restore any currently persisted layout
setLayout( getLayout() );
}
/**
* Sets a new speaker view layout. The layout is persisted
* in local storage.
*/
function setLayout( value ) {
var title = SPEAKER_LAYOUTS[ value ];
layoutLabel.innerHTML = 'Layout' + ( title ? ( ': ' + title ) : '' );
layoutDropdown.value = value;
document.body.setAttribute( 'data-speaker-layout', value );
// Persist locally
if( supportsLocalStorage() ) {
window.localStorage.setItem( 'reveal-speaker-layout', value );
}
}
/**
* Returns the ID of the most recently set speaker layout
* or our default layout if none has been set.
*/
function getLayout() {
if( supportsLocalStorage() ) {
var layout = window.localStorage.getItem( 'reveal-speaker-layout' );
if( layout ) {
return layout;
}
}
// Default to the first record in the layouts hash
for( var id in SPEAKER_LAYOUTS ) {
return id;
}
}
function supportsLocalStorage() {
try {
localStorage.setItem('test', 'test');
localStorage.removeItem('test');
return true;
}
catch( e ) {
return false;
}
}
function zeroPadInteger( num ) {
var str = '00' + parseInt( num );
return str.substring( str.length - 2 );
}
/**
* Limits the frequency at which a function can be called.
*/
function debounce( fn, ms ) {
var lastTime = 0,
timeout;
return function() {
var args = arguments;
var context = this;
clearTimeout( timeout );
var timeSinceLastCall = Date.now() - lastTime;
if( timeSinceLastCall > ms ) {
fn.apply( context, args );
lastTime = Date.now();
}
else {
timeout = setTimeout( function() {
fn.apply( context, args );
lastTime = Date.now();
}, ms - timeSinceLastCall );
}
}
}
})();
</script>
</body>
</html>

17
cgi-bin/hello Executable file
View File

@ -0,0 +1,17 @@
#!/bin/sh
# Set content-type to text/plain
echo "Content-type: text/plain"
echo ""
# read JSON from request body (stdin) and store in a tempoary file (fd)
tmpfile="$(mktemp /tmp/req.XXXXXX)"
trap 'rm -f -- "$tmpfile"' INT TERM HUP EXIT
cat >"$tmpfile"
# Extract fname and lname fields from JSON
firstName="$(jq -r '.fname' <"$tmpfile")"
lastName="$(jq -r '.lname' <"$tmpfile")"
# Send a response
printf "Hello %s %s !" "$firstName" "$lastName"

BIN
favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 347 B

BIN
favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 675 B

BIN
favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

209
index.html Normal file
View File

@ -0,0 +1,209 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/assets/css/bahunya.css">
<link rel="stylesheet" href="/assets/css/board.css">
<link rel="stylesheet" href="/assets/css/highlight.css">
<link rel="stylesheet" href="/assets/css/site.css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<title>zs starter template</title>
<meta name="title" content="zs starter template" />
<meta name="description" content="A starter template for the Zen Static (zs) site generator" />
<meta name="keywords" content="zen, static, zs, starter, template, site, website, template, generator, ssg" />
</head>
<body>
<nav>
<a id="brand" href="/">Home 🏠</a>
<a href="/TestPage.html">Test Page 🧪</a>
<a href="https://zs.mills.io/">Demo 🥳</a>
<a href="https://git.mills.io/prologic/zs">Source 💾</a>
</nav>
<header>
<h1>zs starter template</h1>
</header>
<aside><p><strong>On this page</strong></p>
</aside>
<article><h1 id="zs-starter-template">zs-starter-template <a class="anchor" href="#zs-starter-template"> </a></h1>
<p>This is a <a href="https://git.mills.io/prologic/zs">zs</a> starter template. A live version of this site can be found <a href="https://zs.mills.io">here</a>.</p>
<h2 id="features">Features <a class="anchor" href="#features"> </a></h2>
<ul>
<li>A basic index page with the content you see here</li>
<li>A basic layout using a modified version of <a href="https://github.com/Kimeiga/bahunya">bahunya</a> for style</li>
<li><a href="live.js">live.js</a> for faster development</li>
<li>Examples of several built-in extensions</li>
<li>Editable from within the browser!</li>
</ul>
<h2 id="quick-start">Quick Start <a class="anchor" href="#quick-start"> </a></h2>
<pre><code class="language-console">git clone https://git.mills.io/prologic/zs-starter-template.git
cd zs-starter-template
make dev
</code></pre>
<p>Open your browser to http://localhost:8000</p>
<h2 id="examples">Examples <a class="anchor" href="#examples"> </a></h2>
<p>Aside from the regular Markdown <a href="TestPage.html">TestPage</a> that demonstrates the full capabilities of the Markdown support for <a href="https://git.mills.io/prologic/zs">zs</a>, there are a number of additional extensions enabled by default:</p>
<h3 id="anchors">Anchors <a class="anchor" href="#anchors"> </a></h3>
<p>With the [anchors][anchors] extension so you can link to any section(s) on the page like <a href="#quick-start">Quick Start</a>.</p>
<blockquote>
<p>💡 <strong>Tip:</strong> Try hovering over any of the headings on this page!</p>
</blockquote>
<h3 id="d2-diagrams">D2 Diagrams <a class="anchor" href="#d2-diagrams"> </a></h3>
<p>With the <a href="https://github.com/FurqanSoftware/goldmark-d2">d2</a> extension you can draw and diagrams such as:</p>
<div class="d2"><?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.3.0-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 256 434"><svg id="d2-svg" class="d2-2448830429" width="256" height="434" viewBox="-101 -101 256 434"><rect x="-101.000000" y="-101.000000" width="256.000000" height="434.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-2448830429 .text-bold {
font-family: "d2-2448830429-font-bold";
}
@font-face {
font-family: d2-2448830429-font-bold;
src: url("data:application/font-woff;base64,d09GRgABAAAAAAZwAAoAAAAACywAAguFAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAAA9AAAAGAAAABgXxHXrmNtYXAAAAFUAAAAMgAAADIADQCyZ2x5ZgAAAYgAAAEQAAABEBXyvOFoZWFkAAACmAAAADYAAAA2G38e1GhoZWEAAALQAAAAJAAAACQKfwXCaG10eAAAAvQAAAAMAAAADAa9AGpsb2NhAAADAAAAAAgAAAAIAFgAtG1heHAAAAMIAAAAIAAAACAAGwD3bmFtZQAAAygAAAMoAAAIKgjwVkFwb3N0AAAGUAAAAB0AAAAg/9EAMgADAioCvAAFAAACigJYAAAASwKKAlgAAAFeADIBKQAAAgsHAwMEAwICBGAAAvcAAAADAAAAAAAAAABBREJPACAAIP//Au7/BgAAA9gBESAAAZ8AAAAAAfAClAAAACAAAwAAAAEAAwABAAAADAAEACQAAAAEAAQAAQAAAHn//wAAAHj///+JAAEAAAAAAAEAAgAAAAAABQBQAAACYgKUAAMACQAPABIAFQAAMxEhESUzJycjBzczNzcjFwM3JwERB1ACEv6lpCcpBCkpBCogmB96X18BTV4ClP1sW01iYvZfOzv+nrm6/o0Bc7oAAAEADgAAAfQB8AAZAAAzEyczFxYWFzM2Njc3MwcXIycmJicjBgYHBw6Yj54sChYKBAgSCCKYkJmeMAwXDAQJFAknAQLuUBUrFRUrFVD/8VIVLBUVKxZSAAABAAz/PgH9AfAAGwAAFyImJzcWFjMyNjc3AzMXFhYXMzY2NzczAw4CeBYhDxoHEgglKAoHv5RHCxIKBAgRCTyNrBc4T8IGBHABBSQdGgHj1SJGJSNHI9X+Cz5VKgAAAAABAAAAAguFT5ZgE18PPPUAAQPoAAAAANhdoIQAAAAA3WYvNv43/sQIbQPxAAEAAwACAAAAAAAAAAEAAAPY/u8AAAiY/jf+NwhtAAEAAAAAAAAAAAAAAAAAAAADArIAUAICAA4CCQAMAAAALABYAIgAAQAAAAMAkAAMAGMABwABAAAAAAAAAAAAAAAAAAQAA3icnJTPbhtVFMZ/TmzTCsECRVW6ie6CRZHo2FRJ1TYrh9SKRRQHjwtCQkgTz/iPMp4ZeSYO4QlY8xa8RVc8BM+BWKP5fOzYBdEmipJ8d+75851zvnOBHf5mm0r1IfBHPTFcYa9+bniLB/UTw9u061uGqzyp/Wm4RlibG67zea1n+CPeVn8z/ID96k+GH7JbbRv+mGfVHcOfbDv+Mvwp+7xd4Aq84FfDFXbJDG+xw4+Gt3mExaxUeUTTcI3P2DNcZw/oM6EgZkLCCMeQCSOumBGR4xMxY8KQiBBHhxYxhb4mBEKO0X9+DfApmBEo4pgCR4xPTEDO2CL+Iq+Uc2Uc6jSzuxYFYwIu5HFJQIIjZURKQsSl4hQUZLyiQYOcgfhmFOR45EyI8UiZMaJBlzan9BkzIcfRVqSSmU/KkIJrAuV3ZlF2ZkBEQm6srkgIxdOJXyTvDqc4umSyXY98uhHhSxzfybvklsr2Kzz9ujVmm3mXbALm6mesrsS6udYEx7ot87b4VrjgFe5e/dlk8v4ehfpfKPIFV5p/qEklYpLg3C4tfCnId49xHOncwVdHvqdDnxO6vKGvc4sePVqc0afDa/l26eH4mi5nHMujI7y4a0sxZ/yA4xs6siljR9afxcQifiYzdefiOFMdUzL1vGTuqdZIFd59wuUOpRvqyOUz0B6Vlk7zS7RnASNTRSaGU/VyqY3c+heaIqaqpZzt7X25DXPbveUW35Bqh0u1LjiVk1swet9UvXc0c60fj4CQlAtZDEiZ0qDgRrzPCbgixnGs7p1oSwpaK58yz41UEjEVgw6J4szI9Dcw3fjGfbChe2dvSSj/kunlqqr7ZHHq1e2M3qh7yzvfuhytTaBhU03X1DQQ18S0H2mn1vn78s31uqU85YiUmPBfL8AzPJrsc8AhY2UY6GZur0NTL0STlxyq+ksiWQ2l58giHODxnAMOeMnzd/q4ZOKMi1txWc/d4pgjuhx+UBUL+y5HvF59+/+sv4tpU7U4nq5OL+49xSd3UOsX2rPb97KniZWTmFu02604I2BacnG76zW5x3j/AAAA//8BAAD///S3T1F4nGJgZgCD/+cYjBiwAAAAAAD//wEAAP//LwECAwAAAA==");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
stroke-linejoin: round;
}
.connection {
stroke-linecap: round;
stroke-linejoin: round;
}
.blend {
mix-blend-mode: multiply;
opacity: 0.5;
}
.d2-2448830429 .fill-N1{fill:#0A0F25;}
.d2-2448830429 .fill-N2{fill:#676C7E;}
.d2-2448830429 .fill-N3{fill:#9499AB;}
.d2-2448830429 .fill-N4{fill:#CFD2DD;}
.d2-2448830429 .fill-N5{fill:#DEE1EB;}
.d2-2448830429 .fill-N6{fill:#EEF1F8;}
.d2-2448830429 .fill-N7{fill:#FFFFFF;}
.d2-2448830429 .fill-B1{fill:#0D32B2;}
.d2-2448830429 .fill-B2{fill:#0D32B2;}
.d2-2448830429 .fill-B3{fill:#E3E9FD;}
.d2-2448830429 .fill-B4{fill:#E3E9FD;}
.d2-2448830429 .fill-B5{fill:#EDF0FD;}
.d2-2448830429 .fill-B6{fill:#F7F8FE;}
.d2-2448830429 .fill-AA2{fill:#4A6FF3;}
.d2-2448830429 .fill-AA4{fill:#EDF0FD;}
.d2-2448830429 .fill-AA5{fill:#F7F8FE;}
.d2-2448830429 .fill-AB4{fill:#EDF0FD;}
.d2-2448830429 .fill-AB5{fill:#F7F8FE;}
.d2-2448830429 .stroke-N1{stroke:#0A0F25;}
.d2-2448830429 .stroke-N2{stroke:#676C7E;}
.d2-2448830429 .stroke-N3{stroke:#9499AB;}
.d2-2448830429 .stroke-N4{stroke:#CFD2DD;}
.d2-2448830429 .stroke-N5{stroke:#DEE1EB;}
.d2-2448830429 .stroke-N6{stroke:#EEF1F8;}
.d2-2448830429 .stroke-N7{stroke:#FFFFFF;}
.d2-2448830429 .stroke-B1{stroke:#0D32B2;}
.d2-2448830429 .stroke-B2{stroke:#0D32B2;}
.d2-2448830429 .stroke-B3{stroke:#E3E9FD;}
.d2-2448830429 .stroke-B4{stroke:#E3E9FD;}
.d2-2448830429 .stroke-B5{stroke:#EDF0FD;}
.d2-2448830429 .stroke-B6{stroke:#F7F8FE;}
.d2-2448830429 .stroke-AA2{stroke:#4A6FF3;}
.d2-2448830429 .stroke-AA4{stroke:#EDF0FD;}
.d2-2448830429 .stroke-AA5{stroke:#F7F8FE;}
.d2-2448830429 .stroke-AB4{stroke:#EDF0FD;}
.d2-2448830429 .stroke-AB5{stroke:#F7F8FE;}
.d2-2448830429 .background-color-N1{background-color:#0A0F25;}
.d2-2448830429 .background-color-N2{background-color:#676C7E;}
.d2-2448830429 .background-color-N3{background-color:#9499AB;}
.d2-2448830429 .background-color-N4{background-color:#CFD2DD;}
.d2-2448830429 .background-color-N5{background-color:#DEE1EB;}
.d2-2448830429 .background-color-N6{background-color:#EEF1F8;}
.d2-2448830429 .background-color-N7{background-color:#FFFFFF;}
.d2-2448830429 .background-color-B1{background-color:#0D32B2;}
.d2-2448830429 .background-color-B2{background-color:#0D32B2;}
.d2-2448830429 .background-color-B3{background-color:#E3E9FD;}
.d2-2448830429 .background-color-B4{background-color:#E3E9FD;}
.d2-2448830429 .background-color-B5{background-color:#EDF0FD;}
.d2-2448830429 .background-color-B6{background-color:#F7F8FE;}
.d2-2448830429 .background-color-AA2{background-color:#4A6FF3;}
.d2-2448830429 .background-color-AA4{background-color:#EDF0FD;}
.d2-2448830429 .background-color-AA5{background-color:#F7F8FE;}
.d2-2448830429 .background-color-AB4{background-color:#EDF0FD;}
.d2-2448830429 .background-color-AB5{background-color:#F7F8FE;}
.d2-2448830429 .color-N1{color:#0A0F25;}
.d2-2448830429 .color-N2{color:#676C7E;}
.d2-2448830429 .color-N3{color:#9499AB;}
.d2-2448830429 .color-N4{color:#CFD2DD;}
.d2-2448830429 .color-N5{color:#DEE1EB;}
.d2-2448830429 .color-N6{color:#EEF1F8;}
.d2-2448830429 .color-N7{color:#FFFFFF;}
.d2-2448830429 .color-B1{color:#0D32B2;}
.d2-2448830429 .color-B2{color:#0D32B2;}
.d2-2448830429 .color-B3{color:#E3E9FD;}
.d2-2448830429 .color-B4{color:#E3E9FD;}
.d2-2448830429 .color-B5{color:#EDF0FD;}
.d2-2448830429 .color-B6{color:#F7F8FE;}
.d2-2448830429 .color-AA2{color:#4A6FF3;}
.d2-2448830429 .color-AA4{color:#EDF0FD;}
.d2-2448830429 .color-AA5{color:#F7F8FE;}
.d2-2448830429 .color-AB4{color:#EDF0FD;}
.d2-2448830429 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="x"><g class="shape" ><rect x="1.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 27.000000 68.000000 C 27.000000 106.000000 27.000000 126.000000 27.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-2448830429)" /></g><mask id="d2-2448830429" maskUnits="userSpaceOnUse" x="-101" y="-101" width="256" height="434">
<rect x="-101" y="-101" width="256" height="434" fill="white"></rect>
</mask></svg></svg></div><h3 id="embed">Embed <a class="anchor" href="#embed"> </a></h3>
<p>With the <a href="https://github.com/13rac1/goldmark-embed">embed</a> extension you can embed [Youtube][youtube] videos like:</p>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<h3 id="fences">Fences <a class="anchor" href="#fences"> </a></h3>
<p>With the <a href="https://github.com/stefanfritsch/goldmark-fences">fences</a> extension you can</p>
<div data-fence="0" class="blue">
<h2 id="life-inside-fences">Life Inside Fences <a class="anchor" href="#life-inside-fences"> </a></h2>
<p>We are now inside a div with the css-class &ldquo;blue&rdquo;. This can be used to style this block</p>
<div data-fence="1" id="insideme" class="red">
<p>fences can be nested and given ids as well as classes</p>
</div>
</div>
<h3 id="highlighting">Highlighting <a class="anchor" href="#highlighting"> </a></h3>
<p>With the <a href="https://github.com/yuin/goldmark-highlighting">highlighting</a> extension you can syntax highlight code samples:</p>
<pre><code class="language-go">package main
import &quot;fm&quot;
func main() {
fmt.Println(&quot;Hello World!&quot;);
}
</code></pre>
<h3 id="wiki-links">Wiki Links <a class="anchor" href="#wiki-links"> </a></h3>
<p>With the <a href="https://github.com/abhinav/goldmark-wikilink">wikilink</a> extension you can link to other pages more easily like <a href="SandBox.html">SandBox</a>.</p>
<h3 id="we-can-even-do-slides">We can even do slides! <a class="anchor" href="#we-can-even-do-slides"> </a></h3>
<ul>
<li><a href="slides/TestSlides.html">Test Slide</a></li>
<li><a href="slides/SlideExample.html">Slide Example</a></li>
</ul>
<h3 id="and-kanban-boards">And Kanban Boards! <a class="anchor" href="#and-kanban-boards"> </a></h3>
<ul>
<li><a href="TODO.html">TODO</a></li>
</ul>
<h3 id="remember-cgi-scripts">Remember cgi scripts? <a class="anchor" href="#remember-cgi-scripts"> </a></h3>
<ul>
<li><a href="TestCGI.html">TestCGI</a></li>
</ul>
<h2 id="license">License <a class="anchor" href="#license"> </a></h2>
<p><code>zs-starter-template</code> is licensed under the terms of the <a href="/LICENSE">WTFPL License</a></p>
</article>
<a href="index.md?edit" rel="nofollow" target="_self">✍️ Edit this page</a>
<footer>
Copyright &copy; James Mills ·
Last modified <time datetime="2024-03-03T05:40:12Z+00:00
">Sun Mar 3 05:40:12 UTC 2024
</time> ·
Built with <a href="https://git.mills.io/prologic/zs">zs</a>
</footer>
<script type="application/javascript" src="/assets/js/highlight.js"></script>
<script type="application/javascript" src="/assets/js/umbrella.js"></script>
<script type="application/javascript" src="/assets/js/live.js"></script>
<script>
hljs.highlightAll();
</script>
</body>
</html>

318
slides/SlideExample.html Normal file
View File

@ -0,0 +1,318 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Slide Example</title>
<meta name="title" content="Slide Example" />
<meta name="description" content="Full Slide Example" />
<meta name="keywords" content="zen, static, zs, starter, template, site, website, template, generator, ssg" />
<link rel="stylesheet" href="/assets/reveal.js/css/reset.css">
<link rel="stylesheet" href="/assets/reveal.js/css/reveal.css">
<link rel="stylesheet" href="/assets/reveal.js/css/theme/black.css">
<!-- Theme used for syntax highlighted code -->
<link rel="stylesheet" href="/assets/reveal.js/plugin/highlight/monokai.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-markdown data-separator="^\r?\n---\r?\n$" data-separator-vertical="^\r?\n----\r?\n$"
data-separator-notes="^Note:">
<textarea data-template>
# Slide example
This full slide example was borrowed from [HedgeDoc](https://hedgedoc.org/)
and made to work with [zs](https://git.mills.io/prologic/zs) using [reveal.js](https://https://revealjs.com/).
---
## First slide
`---`
Is the divider of slides
----
### First branch of first the slide
`----`
Is the divider of branches
Use the *Space* key to navigate through all slides.
----
### Second branch of first the slide
Nested slides are useful for adding additional detail underneath a high-level horizontal slide.
---
## Point of View
Press **ESC** to enter the slide overview.
---
## Touch Optimized
Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
---
## Fragments
`<!-- .element: class="fragment" data-fragment-index="1" -->`
Is the fragment syntax
Hit the next arrow...
... to step through ...
<span>... a<!-- .element: class="fragment" data-fragment-index="1" --></span> <span>fragmented<!-- .element: class="fragment" data-fragment-index="2" --></span> <span>slide.<!-- .element: class="fragment" data-fragment-index="3" --></span>
Note:
This slide has fragments which are also stepped through in the notes window.
---
## Fragment Styles
There are different types of fragments, like:
grow
shrink
fade-out
fade-up (also down, left and right!)
current-visible
Highlight <span><!-- .element: class="fragment highlight-red" -->red</span> <span><!-- .element: class="fragment highlight-blue" -->blue</span> <span><!-- .element: class="fragment highlight-green"-->green</span>
---
<!-- .slide: data-transition="zoom" -->
## Transition Styles
Different background transitions are available via the transition option. This one's called "zoom".
`<!-- .slide: data-transition="zoom" -->`
Is the transition syntax
You can use:
none/fade/slide/convex/concave/zoom
---
<!-- .slide: data-transition="fade-in convex-out" -->
`<!-- .slide: data-transition="fade-in convex-out" -->`
Also, you can set different in/out transition
You can use:
none/fade/slide/convex/concave/zoom
postfix with `-in` or `-out`
---
<!-- .slide: data-transition-speed="fast" -->
`<!-- .slide: data-transition-speed="fast" -->`
Custom the transition speed!
You can use:
default/fast/slow
---
## Themes
reveal.js comes with a few themes built in:
Black (default) - White - League - Sky - Beige - Simple
Serif - Blood - Night - Moon - Solarized
It can be set in YAML slideOptions
---
<!-- .slide: data-background="#1A237E" -->
`<!-- .slide: data-background="#1A237E" -->`
Is the background syntax
---
<!-- .slide: data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-color="#005" -->
<div style="color: #fff;">
## Image Backgrounds
`<!-- .slide: data-background="image.png"-->`
</div>
----
<!-- .slide: data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px" data-background-color="#005" -->
<div style="color: #fff;">
## Tiled Backgrounds
`<!-- .slide: data-background="image.png" data-background-repeat="repeat" data-background-size="100px" -->`
</div>
----
<!-- .slide: data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-color="#000000" -->
<div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
## Video Backgrounds
`<!-- .slide: data-background-video="video.mp4,video.webm" -->`
</div>
----
<!-- .slide: data-background="http://i.giphy.com/90F8aUepslB84.gif" -->
## ... and GIFs!
---
## Pretty Code
``` javascript
function linkify( selector ) {
if( supports3DTransforms ) {
const nodes = document.querySelectorAll( selector );
for( const i = 0, len = nodes.length; i < len; i++ ) {
var node = nodes[i];
if( !node.className ) {
node.className += ' roll';
}
}
}
}
```
Code syntax highlighting courtesy of [highlight.js](http://softwaremaniacs.org/soft/highlight/en/description/).
---
## Marvelous List
- No order here
- Or here
- Or here
- Or here
---
## Fantastic Ordered List
1. One is smaller than...
2. Two is smaller than...
3. Three!
---
## Tabular Tables
| Item | Value | Quantity |
| ---- | ----- | -------- |
| Apples | $1 | 7 |
| Lemonade | $2 | 18 |
| Bread | $3 | 2 |
---
## Clever Quotes
> “For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”
---
## Intergalactic Interconnections
You can link between slides internally, [like this](#/1/3).
---
## Speaker
There's a [speaker view](https://github.com/hakimel/reveal.js#speaker-notes). It includes a timer, preview of the upcoming slide as well as your speaker notes.
Press the *S* key to try it out.
Note:
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit `s` on your keyboard).
---
## Take a Moment
Press `B` or `.` on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.
---
## Print your Slides
Down below you can find a print icon<i class="fa fa-fw fa-print"></i>.
After you click on it, use the print function of your browser (either CTRL+P or cmd+P) to print the slides as PDF. [See official reveal.js instructions for details](https://github.com/hakimel/reveal.js#instructions-1)
---
# The End
</textarea>
</section>
</div>
</div>
<script src="/assets/reveal.js/js/reveal.js"></script>
<script src="/assets/reveal.js/plugin/notes/notes.js"></script>
<script src="/assets/reveal.js/plugin/markdown/markdown.js"></script>
<script src="/assets/reveal.js/plugin/highlight/highlight.js"></script>
<script>
// More info about initialization & config:
// - https://revealjs.com/initialization/
// - https://revealjs.com/config/
Reveal.initialize({
hash: true,
slideNumber: true,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
});
</script>
</body>
</html>

111
slides/TestSlides.html Normal file
View File

@ -0,0 +1,111 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Test Slide</title>
<meta name="title" content="Test Slide" />
<meta name="description" content="A starter template for the Zen Static (zs) site generator" />
<meta name="keywords" content="zen, static, zs, starter, template, site, website, template, generator, ssg" />
<link rel="stylesheet" href="/assets/reveal.js/css/reset.css">
<link rel="stylesheet" href="/assets/reveal.js/css/reveal.css">
<link rel="stylesheet" href="/assets/reveal.js/css/theme/black.css">
<!-- Theme used for syntax highlighted code -->
<link rel="stylesheet" href="/assets/reveal.js/plugin/highlight/monokai.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-markdown data-separator="^\r?\n---\r?\n$" data-separator-vertical="^\r?\n----\r?\n$"
data-separator-notes="^Note:">
<textarea data-template>
# Test Slide
Main Slide
---
## Slide 1
Slide 1
----
### Sub-slide 1
Sub-slide 1
----
### Sub-slide 2
Sub-slide 2
---
## Slide 2
Slide 2
---
## Slide 3
- Item 1 <!-- .element: class="fragment" data-fragment-index="1" -->
- Item 2 <!-- .element: class="fragment" data-fragment-index="2" -->
- Item 3 <!-- .element: class="fragment" data-fragment-index="3" -->
---
## 🍦
<!-- .slide: data-background-color="aquamarine" -->
---
## Example Code
```go
package main
import "fmt"
func main() {
fmt.Println("Hello World!")
}
```
---
## The End
The End
</textarea>
</section>
</div>
</div>
<script src="/assets/reveal.js/js/reveal.js"></script>
<script src="/assets/reveal.js/plugin/notes/notes.js"></script>
<script src="/assets/reveal.js/plugin/markdown/markdown.js"></script>
<script src="/assets/reveal.js/plugin/highlight/highlight.js"></script>
<script>
// More info about initialization & config:
// - https://revealjs.com/initialization/
// - https://revealjs.com/config/
Reveal.initialize({
hash: true,
slideNumber: true,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
});
</script>
</body>
</html>