First pass at new Casper homepage
This commit is contained in:
parent
fd4aebe2e2
commit
d6fec8d50f
4 changed files with 74 additions and 15 deletions
|
@ -67,8 +67,42 @@ 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;
|
||||
padding-top: 120px;
|
||||
}
|
||||
|
||||
.post {
|
||||
|
@ -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;
|
||||
|
|
|
@ -6,7 +6,16 @@
|
|||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
$(document).ready(function () {
|
||||
// code goes here
|
||||
$(document).ready(function(){
|
||||
|
||||
sizeContent();
|
||||
$(window).resize(sizeContent);
|
||||
|
||||
function sizeContent() {
|
||||
var newHeight = $(window).height() - 30;
|
||||
$("#sitehead").css("height", newHeight);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}(jQuery));
|
|
@ -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>
|
31
index.hbs
31
index.hbs
|
@ -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}}
|
||||
{{#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>
|
||||
</article>
|
||||
</li>
|
||||
<article class="post">
|
||||
<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>
|
||||
|
||||
{{/foreach}}
|
||||
{{/foreach}}
|
||||
|
||||
</ul>
|
||||
{{pagination}}
|
||||
</main>
|
Loading…
Reference in a new issue