Browse Source

Updated template to follow the same style as the blog

master
Julio Biason 6 years ago
parent
commit
d1ebd98604
  1. 105
      index.html

105
index.html

@ -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);
}

Loading…
Cancel
Save