Second pass on Casper refactor, added new footer areas on single post view.
This commit is contained in:
John O'Nolan
Hannah Wolfe
parent
e4ce16b517
commit
21d2a929a9
|
|
@ -18,26 +18,145 @@
|
|||
1. General
|
||||
========================================================================== */
|
||||
|
||||
html {font-size: 62.5%;}
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 2rem;
|
||||
font-size: 2.0rem;
|
||||
line-height: 1.6em;
|
||||
color: #50585D;
|
||||
}
|
||||
|
||||
h1, h2, h3
|
||||
h4, h5, h6 {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
line-height: 1.2em;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
p {
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4a4a4a;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #57A3E8;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
1. General
|
||||
========================================================================== */
|
||||
|
||||
.content {
|
||||
padding-top:120px;
|
||||
}
|
||||
|
||||
.post {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
font-size: 1.4rem;
|
||||
color: #9EABB3;
|
||||
}
|
||||
|
||||
.post-meta a {
|
||||
color: #9EABB3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.post-meta a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.post-footer {
|
||||
position: relative;
|
||||
padding: 4rem 100px 0 0;
|
||||
margin: 4rem 0 0 0;
|
||||
border-top: #DDE6EB 1px solid;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.user-meta {
|
||||
position: relative;
|
||||
padding: 0.3rem 40px 0 100px;
|
||||
min-height: 77px;
|
||||
}
|
||||
|
||||
.user-image {
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.user-bio {
|
||||
display: block;
|
||||
max-width: 440px;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.publish-meta {
|
||||
position: absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
padding: 4.3rem 0 4rem 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.publish-heading {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.publish-date {
|
||||
display: block;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.related-footer {
|
||||
margin: 4rem 0 0 0;
|
||||
padding: 4rem 0;
|
||||
border-top: #DDE6EB 1px solid;
|
||||
background: #F2F5F7;
|
||||
}
|
||||
|
||||
.related-post {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.related-title {
|
||||
font-size: 2.2rem;
|
||||
opacity:0.9;
|
||||
}
|
||||
|
||||
.related-meta {
|
||||
font-size: 1.4rem;
|
||||
color: #9EABB3;
|
||||
}
|
||||
|
||||
.related-content {
|
||||
font-size: 1.8rem;
|
||||
opacity:0.9;
|
||||
}
|
||||
|
||||
.related-content p {
|
||||
margin:0;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
45
post.hbs
45
post.hbs
|
|
@ -1,17 +1,44 @@
|
|||
{{!< default}}
|
||||
|
||||
<main class="content" role="main">
|
||||
|
||||
{{#post}}
|
||||
|
||||
<article class="post">
|
||||
<header>
|
||||
<span class="entry-meta">Published on <time class="updated" datetime="{{dateFormat published_at format='YYYY-MM-DD'}}">{{dateFormat published_at format='DD MMMM YYYY'}}</time></span>
|
||||
<h1>{{title}}</h1>
|
||||
</header>
|
||||
<section class="entry-content">
|
||||
{{content}}
|
||||
<article class="post">
|
||||
|
||||
<header class="post-header">
|
||||
<span class="post-meta"><a href="#">John O'Nolan</a> on <a href="#">What I Learned Building...</a></span>
|
||||
<h1 class="post-title">{{title}}</h1>
|
||||
</header>
|
||||
|
||||
<section class="post-content">
|
||||
{{content}}
|
||||
</section>
|
||||
|
||||
<footer class="post-footer">
|
||||
<section class="user-meta">
|
||||
<img class="user-image" src="http://f.cl.ly/items/2Y3p1W3R0k0t0C2e0Y3f/user.png" alt="User" />
|
||||
<span class="user-name">John O'Nolan</span>
|
||||
<span class="user-bio">A designer, developer and entrepreneur. Spends his time travelling the world with a bag of kites. Likes to write.</span>
|
||||
</section>
|
||||
<section class="publish-meta">
|
||||
<span class="publish-heading">Published</span>
|
||||
<time class="publish-date" datetime="{{dateFormat published_at format='YYYY-MM-DD'}}">{{dateFormat published_at format='DD MMMM YYYY'}}</time>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
</article>
|
||||
|
||||
{{/post}}
|
||||
|
||||
<footer class="related-footer">
|
||||
<article class="related-post">
|
||||
<h2 class="related-title">The Future of Mankind Depends on Your Voice</h2>
|
||||
<span class="related-meta">John O'Nolan on The Future</span>
|
||||
<section class="related-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip...</p>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
{{/post}}
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
Loading…
Reference in New Issue