themes
/
casper
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

First pass at new Casper homepage

This commit is contained in:
John O'Nolan 2013-08-20 18:53:02 +02:00 committed by Hannah Wolfe
parent fd4aebe2e2
commit d6fec8d50f
4 changed files with 74 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
assets/css/screen.css
View File

@ -67,6 +67,40 @@ a:hover {
1. General
========================================================================== */
#sitehead {
width: 100%;
height: 700px;
text-align: center;
color: #fff;
background: #4a4a4a url(http://cdn.travelllll.com/wp-content/uploads/2013/04/index.jpg) center center;
background-size: cover;
position: relative;
}
#sitehead .wrap {
display: inline-block;
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -100px;
}
#sitehead h1 {
font-size: 8rem;
font-family: Lato, "Open Sans", sans-serif;
font-weight: 100;
}
#sitehead h2 {
font-size: 1.8rem;
line-height: 1.5em;
font-weight: 300;
opacity: 0.6;
max-width: 700px;
margin: 0 auto;
}
.content {
padding-top: 120px;
}
@ -84,6 +118,10 @@ a:hover {
hyphens: auto;
}
.post-title a {
text-decoration: none;
}
.post-content {
/* Breaking for long words in preview region */
word-break: break-word;

11
assets/js/index.js
View File

@ -7,6 +7,15 @@
"use strict";
$(document).ready(function(){
// code goes here
sizeContent();
$(window).resize(sizeContent);
function sizeContent() {
var newHeight = $(window).height() - 30;
$("#sitehead").css("height", newHeight);
}
});
}(jQuery));

5
default.hbs
View File

@ -11,13 +11,14 @@
{{! Styles'n'Scripts }}
<link rel="stylesheet" type="text/css" href="assets/css/screen.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700,400">
<script type="text/javascript" src="assets/js/index.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:100|Open+Sans:400italic,700,400">
</head>
<body>
{{! This is where shit gets real }}
{{{body}}}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/index.js"></script>
</body>
</html>

23
index.hbs
View File

@ -1,18 +1,29 @@
{{!< default}}
<header id="sitehead">
<div class="wrap">
<h1>John O'Nolan</h1>
<h2>A designer, developer and entrepreneur. Spends his time travelling the world with a bag of kites. Likes to write.</h2>
</div>
</header>
<main class="content" role="main">
<ul class="hfeed">
{{#foreach posts}}
<li class="wrap">
<article class="post">
<h2 class="entry-title"><a href="/{{slug}}" rel="bookmark">{{title}}</a></h2>
<time datetime="2012-05-03">{{dateFormat published_at format="MMMM DD, YYYY"}}</time>
<header class="post-header">
<h2 class="post-title"><a href="/{{slug}}">{{title}}</a></h2>
<span class="post-meta"><time datetime="2012-05-03">23 Aug 2013</time> in <a href="#">What I Learned Building...</a></span>
</header>
<section class="post-excerpt">
{{content words="50"}}
</section>
</article>
</li>
{{/foreach}}
</ul>
{{pagination}}
</main>