|
|
|
@ -5,64 +5,81 @@
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
|
|
<title>Presentations</title> |
|
|
|
|
|
|
|
|
|
<link rel='stylesheet' href='_external/normalize.css'> |
|
|
|
|
<link rel="stylesheet" href='_external/foundation.min.css'> |
|
|
|
|
<style> |
|
|
|
|
* { |
|
|
|
|
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; |
|
|
|
|
font-size: 1em; |
|
|
|
|
font-style: normal; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
<script src="_external/modernizr.js"></script> |
|
|
|
|
body { |
|
|
|
|
max-width: 50rem; |
|
|
|
|
padding: 20px 10px; |
|
|
|
|
background: #000; |
|
|
|
|
color: #ccc; |
|
|
|
|
line-height: 1rem; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
nav.top-bar { |
|
|
|
|
margin-bottom: 15px; |
|
|
|
|
h1 { |
|
|
|
|
display: block; |
|
|
|
|
position: relative; |
|
|
|
|
padding: 20px 0 10px; |
|
|
|
|
margin 0; |
|
|
|
|
overflow: hidden; |
|
|
|
|
float: none; |
|
|
|
|
line-height: 1.3rem; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
h1:after { |
|
|
|
|
content: "===================================================================================================="; |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: -7px; |
|
|
|
|
left: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
h2 { |
|
|
|
|
position: relative; |
|
|
|
|
margin-top: 1rem; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
h2:before { |
|
|
|
|
content: "## "; |
|
|
|
|
display: inline; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
div.thumb { |
|
|
|
|
background: no-repeat top center; |
|
|
|
|
background-size: 100px 100px; |
|
|
|
|
height: 100px; |
|
|
|
|
width: 100px; |
|
|
|
|
a, a:visited { |
|
|
|
|
color: #ccc; |
|
|
|
|
cursor: pointer; |
|
|
|
|
border-bottom: 1px solid #ff2e88; |
|
|
|
|
text-decoration: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
ul.inline-list li { |
|
|
|
|
text-align: center; |
|
|
|
|
a:after { |
|
|
|
|
content: " " url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20class='i-external'%20viewBox='0%200%2032%2032'%20width='14'%20height='14'%20fill='none'%20stroke='%23ff9800'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='9.38%'%3E%3Cpath%20d='M14%209%20L3%209%203%2029%2023%2029%2023%2018%20M18%204%20L28%204%2028%2014%20M28%204%20L14%2018'/%3E%3C/svg%3E"); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
div.record { |
|
|
|
|
height: 110px; |
|
|
|
|
div.muted { |
|
|
|
|
color: rgba(255,255,255,0.5); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
div.hide { |
|
|
|
|
display: none; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
</head> |
|
|
|
|
|
|
|
|
|
<body> |
|
|
|
|
<nav class='top-bar' data-topbar> |
|
|
|
|
<ul class='title-area'> |
|
|
|
|
<li class='name'> |
|
|
|
|
<h1><a href='/'>Presentations</a></h1> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</nav> |
|
|
|
|
|
|
|
|
|
<!-- |
|
|
|
|
<div class='row'> |
|
|
|
|
<div class="small-8 columns text-center">Title</div> |
|
|
|
|
<div class="small-4 columns">Last Updated</div> |
|
|
|
|
</div> |
|
|
|
|
--> |
|
|
|
|
<h1>Presentations</h1> |
|
|
|
|
|
|
|
|
|
<div id='presentations'></div> |
|
|
|
|
|
|
|
|
|
<script src="_external/jquery.js"></script> |
|
|
|
|
<script src="_external/foundation.min.js"></script> |
|
|
|
|
|
|
|
|
|
<script>$(document).foundation();</script> |
|
|
|
|
|
|
|
|
|
<div id='record' class='hide row record'> |
|
|
|
|
<a href=''> |
|
|
|
|
<div class="small-2 columns"> |
|
|
|
|
<div class="thumb"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="small-6 columns title"></div> |
|
|
|
|
<div class="small-4 columns updated"></div> |
|
|
|
|
</a> |
|
|
|
|
|
|
|
|
|
<div id='record' class='hide'> |
|
|
|
|
<h2 class="title"><a href='#'>Title</a></h2> |
|
|
|
|
<div class="muted">Updated: <span class="updated">never</span></div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<script type="text/javascript"> |
|
|
|
@ -74,16 +91,14 @@ div.record {
|
|
|
|
|
var record; |
|
|
|
|
for (var pos in data) { |
|
|
|
|
record = data[pos]; |
|
|
|
|
console.log(record); |
|
|
|
|
|
|
|
|
|
var template = $('#record').clone(); |
|
|
|
|
template.removeClass('hide'); |
|
|
|
|
template.removeAttr('id'); |
|
|
|
|
|
|
|
|
|
template.find('a').attr('href', record.presentation); |
|
|
|
|
template.find('.thumb').css('background-image', 'url("' + record.image + '")'); |
|
|
|
|
template.find('.title').append(record.title); |
|
|
|
|
template.find('.updated').append(record.changed); |
|
|
|
|
template.find('a').text(record.title); |
|
|
|
|
template.find('.updated').text(record.changed); |
|
|
|
|
|
|
|
|
|
$('#presentations').append(template); |
|
|
|
|
} |
|
|
|
|