Changed some code structure, added some elements + styling to blog views

This commit is contained in:
Tim Stallard 2016-09-03 17:47:02 +01:00
parent b7cca7b303
commit 91c316a3da
7 changed files with 42 additions and 21 deletions

View File

@ -7,12 +7,18 @@ var docpadConfig = {
return this.getCollection("html").findAllLive({relativeOutDirPath: "."}, [{order: 1}]);
},
posts: function(){
return this.getCollection("html").findAll({relativeOutDirPath: "blog"});
var posts = this.getCollection("html").findAllLive({relativeOutDirPath: "blog"});
posts.on("add", function(post){
post.setMetaDefaults({
layout: "blogpost"
});
});
return posts;
},
projects: function(){
var projects = this.getCollection("html").findAllLive({relativeOutDirPath: "projects"});
projects.on("add", function(model){
model.setMetaDefaults({
projects.on("add", function(project){
project.setMetaDefaults({
layout: "contentpage"
});
});

View File

@ -8,10 +8,12 @@ referencesOthers: true
<% var posts = getCollection("posts").toJSON() %>
<% posts.forEach(function(post){ %>
<div class="post">
<h2><a href="<%- post.url %>"><%= post.title %></a></h2>
<div class="date"><%- post.formattedDate %></div>
<h2 class="title"><a href="<%- post.url %>"><%= post.title %></a></h2>
<h3 class="subtitle"><%- post.subtitle %></h3>
<h4 class="date"><%- post.formattedDate %></h4>
<div class="firstcontent blogpost">
<%- post.contentRenderedWithoutLayouts.split("-split-")[0] %>
</div>
<a class="morelink" href="<%- post.url %>">Read More...</a>
</div>
<% }) %>

View File

@ -1,5 +1,4 @@
---
layout: "blogpost"
title: "Running TVheadend in a VM"
date: 2016-04-11
subtitle: "Or how I went from trying to watch HD TV to changing hypervisor..."

View File

@ -87,12 +87,9 @@ body{
margin-right: auto;
margin-top: 10px;
}
h1, h2, h3.date{
h1, h2, h3{
text-align: center;
}
h3.date{
margin-top: 0px;
}
h1{
margin-bottom: 5px;
}
@ -439,14 +436,31 @@ body{
margin-right: auto;
padding-top: 10px;
padding-bottom: 10px;
h2, .date{
h2.title a{
color: inherit;
}
h2.title, h3.subtitle, h4.date{
text-align: center;
margin: 0;
}
h3.subtitle, h4.date{
font-weight: normal;
}
}
}
.blogpost{
#content[data-slug^="blog-"]{
h1#title{
margin-bottom: 3px;
}
h2#subtitle, h3#date{
margin: 0;
font-weight: normal;
}
}
#content[data-slug^="blog"] .blogpost{
width: 100%;
max-width: 800px;
margin-left: auto;

View File

@ -2,10 +2,10 @@
layout: contentpage
---
<h3 class="date"><%- document.formattedDate %></h3>
<% if(document.subtitle){ %>
<h2><%- document.subtitle %></h2>
<h2 id="subtitle"><%- document.subtitle %></h2>
<% } %>
<h3 id="date"><%- document.formattedDate %></h3>
<div class="blogpost">
<%- content %>
</div>

View File

@ -4,7 +4,7 @@ layout: core.html
<div id="lightcontent" class="animated">
<div>
<h1><%- document.title %></h1>
<h1 id="title"><%- document.title %></h1>
<%- content %>
</div>
</div>

View File

@ -23,13 +23,13 @@
<% }) %>
</div>
</div>
<div id="content" class="animations" data-slug="<%- document.slug %>">
<div id="content" class="animations<% if(document.addclass){ %> <%= document.addclass %><% } %>" data-slug="<%- document.slug %>">
<meta data-menu="<%= document.url.split("/")[1] %>" data-slug="<%- document.slug %>" />
<%- content.replace("-split-", "") %>
</div>
</div>
<div id="footer">
<h3>&copy; Tim Stallard 2015</h3>
<h3>&copy; Tim Stallard <%- new Date().getFullYear() %></h3>
Hand crafted in the UK with DocPad, SmoothState.js, and lots of other magic<% /* - see the code <a href="https://github.com/TimStallard/timstallard.me.uk">on GitHub</a> */ %>
<br>
Mugshot by the awesome <a href="http://lws.io/">Kevin Lewis</a> at <a href="http://rebelmakers.co.uk/">Rebel Makers</a>