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
|
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 {
|
.content {
|
||||||
padding-top:120px;
|
padding-top: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post {
|
.post {
|
||||||
|
@ -84,6 +118,10 @@ a:hover {
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.post-title a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
.post-content {
|
.post-content {
|
||||||
/* Breaking for long words in preview region */
|
/* Breaking for long words in preview region */
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
|
|
|
@ -6,7 +6,16 @@
|
||||||
(function ($) {
|
(function ($) {
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
$(document).ready(function () {
|
$(document).ready(function(){
|
||||||
// code goes here
|
|
||||||
|
sizeContent();
|
||||||
|
$(window).resize(sizeContent);
|
||||||
|
|
||||||
|
function sizeContent() {
|
||||||
|
var newHeight = $(window).height() - 30;
|
||||||
|
$("#sitehead").css("height", newHeight);
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
}(jQuery));
|
}(jQuery));
|
|
@ -11,13 +11,14 @@
|
||||||
|
|
||||||
{{! Styles'n'Scripts }}
|
{{! Styles'n'Scripts }}
|
||||||
<link rel="stylesheet" type="text/css" href="assets/css/screen.css">
|
<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">
|
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:100|Open+Sans:400italic,700,400">
|
||||||
<script type="text/javascript" src="assets/js/index.js"></script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
{{! This is where shit gets real }}
|
{{! This is where shit gets real }}
|
||||||
{{{body}}}
|
{{{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>
|
</body>
|
||||||
</html>
|
</html>
|
23
index.hbs
23
index.hbs
|
@ -1,18 +1,29 @@
|
||||||
{{!< default}}
|
{{!< 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">
|
<main class="content" role="main">
|
||||||
<ul class="hfeed">
|
|
||||||
|
|
||||||
{{#foreach posts}}
|
{{#foreach posts}}
|
||||||
|
|
||||||
<li class="wrap">
|
|
||||||
<article class="post">
|
<article class="post">
|
||||||
<h2 class="entry-title"><a href="/{{slug}}" rel="bookmark">{{title}}</a></h2>
|
<header class="post-header">
|
||||||
<time datetime="2012-05-03">{{dateFormat published_at format="MMMM DD, YYYY"}}</time>
|
<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>
|
</article>
|
||||||
</li>
|
|
||||||
|
|
||||||
{{/foreach}}
|
{{/foreach}}
|
||||||
|
|
||||||
</ul>
|
|
||||||
{{pagination}}
|
{{pagination}}
|
||||||
</main>
|
</main>
|
Loading…
Reference in a new issue