layouts/slides.html (24 lines of code) (raw):
<!DOCTYPE html>
<html>
<head>
<title><%= item[:title] %></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Muli);
</style>
<link rel="stylesheet" href="<%= @config[:base_url] %>/slides-style.css">
</head>
<body>
<script src="<%= @config[:base_url] %>/remark.js" type="text/javascript"></script>
<script type="text/javascript">
var slideshow = remark.create({sourceUrl: './slides.md'});
// Restart animated gifs every time the slide changes
slideshow.on('showSlide', function() {
document.querySelectorAll('img[src$=".gif"]').forEach(function(img) {
img.setAttribute('src', img.src);
});
});
</script>
</body>
</html>