Commit 5702769a authored by Kenton Varda's avatar Kenton Varda

Add slides for meetup talk.

parent 8db916de
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="viewport" content="width=480">
<link rel="stylesheet" type="text/css" media="screen" href="{{ site.baseurl }}stylesheets/stylesheet.css">
<link rel="alternate" type="application/rss+xml" title="Cap'n Proto News" href="{{site.baseurl}}feed.xml">
<title>Cap'n Proto: {{ page.title }}</title>
<script type="text/javascript" src="{{ site.baseurl }}javascripts/main.js"></script>
</head>
<body class="slides">
<header>
<img src="{{ site.baseurl }}images/logo.png">
<h1 class="title"></h1>
</header>
<!-- MAIN CONTENT -->
<main>
{{ content }}
</main>
<!-- FOOTER -->
<footer>
<p class="url">
<button class="back">&#9664;</button>
<button class="forward">&#9654;</button>
https://capnproto.org{{ page.url }}<span id="slide-num"></span>
</p>
<h2>Kenton Varda</h2>
<p>May 18, 2017</p>
</footer>
<script type="text/javascript">setupSlides();</script>
<!-- Google Analytics. -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-39711112-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>
......@@ -139,3 +139,62 @@ function setupNewsSidebar(items) {
}
}
}
function setupSlides() {
var slides = document.querySelectorAll("body.slides main section");
var headerTitle = document.querySelector("body.slides header .title");
var slideNum = document.querySelector("#slide-num");
var current = 0;
var hash = document.location.hash;
if (hash) {
current = parseInt(hash.slice(1)) - 1;
}
slides[current].className = "current";
headerTitle.textContent = slides[current].dataset.title || "";
slideNum.textContent = window.location.hash;
function navSlide(diff) {
slides[current].className = "";
current = Math.min(slides.length - 1, Math.max(0, current + diff));
slides[current].className = "current";
headerTitle.textContent = slides[current].dataset.title || "";
if (current) {
history.replaceState({}, "", "#" + (current + 1));
slideNum.textContent = "#" + (current + 1);
} else {
history.replaceState({}, "", window.location.pathname);
slideNum.textContent = "";
}
}
document.body.addEventListener("keydown", event => {
if (event.keyCode == 39) {
navSlide(1);
} else if (event.keyCode == 37) {
navSlide(-1);
}
});
document.querySelector("body.slides footer button.back").addEventListener("click", event => {
navSlide(-1);
});
document.querySelector("body.slides footer button.forward").addEventListener("click", event => {
navSlide(1);
});
if (document.location.hostname === "localhost") {
var lastModified = new Date(document.lastModified);
setInterval(function () {
var req = new Request(".", {headers: {
"If-Modified-Since": lastModified.toUTCString()}});
fetch(req).then(response => {
if (response.status == 200 &&
new Date(response.headers.get("Last-Modified")) > lastModified) {
document.location.reload();
}
});
}, 1000);
}
}
This diff is collapsed.
......@@ -23,29 +23,29 @@
.highlight .kn { color: #006699; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #006699 } /* Keyword.Pseudo */
.highlight .kr { color: #006699; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #007788; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #FF6600 } /* Literal.Number */
.highlight .s { color: #CC3300 } /* Literal.String */
.highlight .kt { color: #009900; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #0000FF } /* Literal.Number */
.highlight .s { color: #0000FF } /* Literal.String */
.highlight .na { color: #330099 } /* Name.Attribute */
.highlight .nb { color: #336666 } /* Name.Builtin */
.highlight .nb { color: #0000FF } /* Name.Builtin */
.highlight .nc { color: #00AA88; font-weight: bold } /* Name.Class */
.highlight .no { color: #336600 } /* Name.Constant */
.highlight .nd { color: #9999FF } /* Name.Decorator */
.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
.highlight .ne { color: #CC0000; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #CC00FF } /* Name.Function */
.highlight .nl { color: #9999FF } /* Name.Label */
.highlight .nf { color: inherit } /* Name.Function */
.highlight .nl { color: inherit } /* Name.Label */
.highlight .nn { color: #00CCFF; font-weight: bold } /* Name.Namespace */
.highlight .nt { color: #330099; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #003333 } /* Name.Variable */
.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #FF6600 } /* Literal.Number.Float */
.highlight .mh { color: #FF6600 } /* Literal.Number.Hex */
.highlight .mi { color: #FF6600 } /* Literal.Number.Integer */
.highlight .mo { color: #FF6600 } /* Literal.Number.Oct */
.highlight .mf { color: #0000FF } /* Literal.Number.Float */
.highlight .mh { color: #0000FF } /* Literal.Number.Hex */
.highlight .mi { color: #0000FF } /* Literal.Number.Integer */
.highlight .mo { color: #0000FF } /* Literal.Number.Oct */
.highlight .sb { color: #CC3300 } /* Literal.String.Backtick */
.highlight .sc { color: #CC3300 } /* Literal.String.Char */
.highlight .sc { color: #0000FF } /* Literal.String.Char */
.highlight .sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #CC3300 } /* Literal.String.Double */
.highlight .se { color: #CC3300; font-weight: bold } /* Literal.String.Escape */
......
......@@ -709,3 +709,147 @@ table.pass-fail td.pass { background-color: #8f8; }
table.pass-fail td.fail { background-color: #f88; }
table.pass-fail td.warn { background-color: #ff8; }
/*******************************************************************************
Slides
*******************************************************************************/
body.slides * {
box-sizing: border-box;
}
body.slides header {
background: #C42727;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 20%;
}
body.slides header>img {
float: right;
height: 20vh;
padding: 2vh;
width: auto;
}
body.slides header>.title {
color: white;
font-size: 8vh;
text-align: left;
line-height: 20vh;
padding-left: 5vh;
}
body.slides main {
font-size: 4vh;
}
body.slides main section {
border-top: 1px solid #111;
border-bottom: 1px solid #111;
position: fixed;
top: 20%;
left: 0;
width: 100%;
bottom: 10%;
background-color: #f2f2f2;
position: absolute;
z-index: -1;
padding: 5vh;
}
body.slides main section.current {
z-index: 1;
}
body.slides main section#slides-cover {
background: url(/images/logo.png) center/75% no-repeat #C42727;
top: 0;
border-top: none;
}
body.slides main section#slides-cover p {
color: white;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
font-size: 6vh;
font-weight: bold;
}
body.slides main img.ph3 {
background-color: white;
padding: 4vh;
height: 60vh;
width: auto;
box-shadow: 0 0 10px rgba(0,0,0,.1);
float: left;
margin-right: 2vh;
}
body.slides pre {
margin: 0 0 2em;
}
body.slides pre code {
font-size: 3vh;
}
body.slides footer {
background: #212121;
position: fixed;
width: 100%;
height: 10%;
left: 0;
bottom: 0;
color: white;
text-align: right;
padding: 2vh;
}
body.slides footer h2 {
font-size: 4vh;
height: 4vh;
margin: 0;
padding: 0;
background: none;
color: inherit;
line-height: 4vh;
}
body.slides footer p {
font-size: 2vh;
height: 2vh;
line-height: 2vh;
margin: 0;
}
body.slides footer p.url {
position: absolute;
left: 5vh;
top: 0;
bottom: 0;
font-size: 4vh;
line-height: 10vh;
margin: 0;
}
body.slides footer button {
width: 5vh;
height: 5vh;
font-size: 4vh;
padding: 0 0 0.5vh 0;
border: none;
border-radius: 0.5vh;
background-color: white;
}
body.slides footer button:last-of-type {
margin-right: 1vh;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment