Updated template to follow the same style as the blog

5 years ago · d1ebd98604
1 changed files with 60 additions and 45 deletions
--- a/index.html
+++ b/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);
 					}