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

Full refactor

This commit is contained in:
John O'Nolan 2013-08-28 18:41:32 +02:00 committed by Hannah Wolfe
parent 5234629a60
commit 49e774889c
14 changed files with 109 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
assets/css/screen.css
View File

@ -45,7 +45,7 @@ body {
text-shadow: none; text-shadow: none;
} }
h1, h2, h3 h1, h2, h3,
h4, h5, h6 { h4, h5, h6 {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
line-height: 1; line-height: 1;
@ -57,12 +57,14 @@ h1 {
font-size: 5rem; font-size: 5rem;
line-height: 1.2em; line-height: 1.2em;
letter-spacing: -2px; letter-spacing: -2px;
text-indent: -3px;
} }
h2 { h2 {
font-size: 4rem; font-size: 4rem;
line-height: 1.2em; line-height: 1.2em;
letter-spacing: -1px; letter-spacing: -1px;
text-indent: -2px;
} }
h3 { h3 {
@ -117,15 +119,14 @@ hr {
blockquote { blockquote {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
margin: 1.6em 0; margin: 1.6em 0 1.6em -2.2em;
padding: 0 1.6em 0 1.6em; padding: 0 0 0 1.6em;
border-left: #4a4a4a 0.6em solid; border-left: #4a4a4a 0.4em solid;
} }
blockquote p { blockquote p {
margin:0.8em 0; margin: 0.8em 0;
font-size:1.2em; font-style: italic;
font-weight: 300;
} }
blockquote small { blockquote small {
@ -170,27 +171,27 @@ mark {
} }
code, tt { code, tt {
padding: 1px 3px;
font-family: Inconsolata, monospace, sans-serif; font-family: Inconsolata, monospace, sans-serif;
font-size: 0.85em; font-size: 0.85em;
white-space: pre; white-space: pre;
background: #ccc; border: 1px solid #E3EDF3;
border: 1px solid #aaa; background: #F7FAFB;
border-radius: 2px; border-radius: 2px;
padding: 1px 3px;
} }
pre { pre {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
margin: 1.6em 0; margin: 1.6em 0;
background: #ccc; border: 1px solid #E3EDF3;
border: 1px solid #aaa;
width: 100%; width: 100%;
padding: 10px; padding: 10px;
font-family: Inconsolata, monospace, sans-serif; font-family: Inconsolata, monospace, sans-serif;
font-size: 0.9em; font-size: 0.9em;
white-space: pre; white-space: pre;
overflow: auto; overflow: auto;
background: #F7FAFB;
border-radius: 3px; border-radius: 3px;
} }
@ -282,6 +283,11 @@ table.plain {
margin: 0 auto; margin: 0 auto;
} }
.vertical {
display: table-cell;
vertical-align: middle;
}
/* ========================================================================== /* ==========================================================================
1. General 1. General
@ -299,37 +305,37 @@ table.plain {
background-size: cover; background-size: cover;
} }
#blog-icon { #blog-logo img {
position: absolute;
top: 10px;
left: 10px;
}
#blog-icon img {
height: 40px;
width: 40px;
display: block; display: block;
max-height: 100px;
width: auto;
margin: 0 auto;
line-height: 0; line-height: 0;
} }
.vertical { #site-head-content {
display: table-cell;
vertical-align: middle;
}
#site-head .content {
width: 80%; width: 80%;
max-width: 700px; max-width: 700px;
margin: 0 auto; margin: 0 auto;
} }
#back {
color: rgba(0,0,0,0.2);
position: fixed;
top: 8px;
left: 8px;
padding: 6px;
font-size: 16px;
}
.blog-title { .blog-title {
margin: 0 0 20px 0; margin: 10px 0 10px 0;
font-size: 5rem; font-size: 5rem;
letter-spacing: -1px; letter-spacing: -1px;
} }
.blog-description { .blog-description {
margin: 0;
font-size: 1.8rem; font-size: 1.8rem;
line-height: 1.5em; line-height: 1.5em;
font-weight: 300; font-weight: 300;
@ -337,11 +343,8 @@ table.plain {
letter-spacing: 0; letter-spacing: 0;
} }
.post-template .content {
padding-top: 120px;
}
.post-template .post { .post-template .post {
margin-top: 0;
border-bottom: none; border-bottom: none;
} }
@ -349,6 +352,10 @@ table.plain {
display: none; display: none;
} }
.post-template .post-header {
padding: 60px 0;
}
.post { .post {
position: relative; position: relative;
width:80%; width:80%;
@ -365,7 +372,7 @@ table.plain {
content: ""; content: "";
width: 7px; width: 7px;
height: 7px; height: 7px;
border: #EBF2F6 1px solid; border: #E7EEF2 1px solid;
position: absolute; position: absolute;
bottom: -5px; bottom: -5px;
left: 50%; left: 50%;
@ -386,18 +393,21 @@ table.plain {
} }
.post-excerpt p { .post-excerpt p {
margin: 0; margin: 1.6rem 0 0 0;
font-size: 0.9em; font-size: 0.9em;
line-height: 1.6em; line-height: 1.6em;
} }
.post-content { .post-content img {
display: block;
max-width: 100%;
margin: 0 auto;
} }
.post-meta { .post-meta {
display: inline-block; display: inline-block;
margin: 0.8rem 0; margin: 0 0 5px 0;
font-family: 'Open Sans', sans-serif;
font-size: 1.5rem; font-size: 1.5rem;
color: #9EABB3; color: #9EABB3;
} }
@ -454,6 +464,22 @@ table.plain {
line-height: 1.5em; line-height: 1.5em;
} }
.pagination {
position: relative;
font-family: 'Open Sans', sans-serif;
text-align: center;
}
.older-posts {
position: absolute;
right: 0;
}
.newer-posts {
position: absolute;
left: 0;
}
.subscribe { .subscribe {
width: 28px; width: 28px;
height: 28px; height: 28px;
@ -488,6 +514,7 @@ table.plain {
margin: 6rem 0 0 0; margin: 6rem 0 0 0;
padding: 6rem 0; padding: 6rem 0;
border-top: #EBF2F6 1px solid; border-top: #EBF2F6 1px solid;
background: #F7FAFB;
} }
.post-footer h4 { .post-footer h4 {
@ -545,7 +572,7 @@ table.plain {
font-style: normal; font-style: normal;
} }
.icon-feed, .icon-twitter, .icon-google-plus, .icon-facebook { .icon-feed, .icon-twitter, .icon-google-plus, .icon-facebook, .icon-back {
font-family: 'icons'; font-family: 'icons';
speak: none; speak: none;
font-style: normal; font-style: normal;
@ -562,7 +589,6 @@ table.plain {
} }
.icon-twitter:before { .icon-twitter:before {
content: "\e001"; content: "\e001";
font-size: 1.1em;
} }
.icon-google-plus:before { .icon-google-plus:before {
content: "\e002"; content: "\e002";
@ -570,19 +596,15 @@ table.plain {
.icon-facebook:before { .icon-facebook:before {
content: "\e003"; content: "\e003";
} }
.icon-home:before { .icon-back:before {
content: "\e004"; content: "\e004";
} }
.icon-ghost:before {
content: "\e005";
}
@media only screen and (max-width: 900px) { @media only screen and (max-width: 900px) {
#ghost { blockquote {
top: 16px; margin-left: 0;
right: 16px;
} }
#site-head { #site-head {
@ -591,17 +613,7 @@ table.plain {
box-sizing: border-box; box-sizing: border-box;
height: auto; height: auto;
min-height: 240px; min-height: 240px;
padding: 25% 0; padding: 15% 0;
}
#blog-icon {
left: 50%;
margin-left: -41px;
}
.home-template #blog-icon {
top: auto;
bottom: -41px;
} }
.blog-title { .blog-title {
@ -623,8 +635,13 @@ table.plain {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
.post-template .post-header {
padding: 40px 0;
}
h1 { h1 {
font-size: 4.8rem; font-size: 4.8rem;
text-indent: -2px;
} }
h2 { h2 {
@ -644,7 +661,13 @@ table.plain {
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
.inner, .pagination { #blog-logo img {
max-height: 80px;
}
#site-head-content,
.inner,
.pagination {
width: auto; width: auto;
margin-left: 16px; margin-left: 16px;
margin-right: 16px; margin-right: 16px;
@ -658,9 +681,8 @@ table.plain {
line-height: 1.6em; line-height: 1.6em;
} }
#site-head .content { #site-head {
margin: 0 16px; padding: 10% 0;
width: auto;
} }
.blog-title { .blog-title {
@ -690,6 +712,14 @@ table.plain {
padding-bottom: 0; padding-bottom: 0;
} }
.post-template .post-header {
padding: 30px 0;
}
.post-meta {
font-size: 1.3rem;
}
.post-footer { .post-footer {
padding: 4rem 0; padding: 4rem 0;
text-align: center; text-align: center;

3
assets/fonts/icons.dev.svg
View File

@ -36,7 +36,6 @@ This is a custom SVG font generated by IcoMoon.
c 46.938,0, 85.328,38.373, 85.328,85.344L 512,394.656 C 512,441.593, 473.609,480, 426.672,480z M 435.296,224L 352,224 l0-224 l-96,0 L 256,224 l-46.263,0 l0,73.282 L 256,297.282 c 46.938,0, 85.328,38.373, 85.328,85.344L 512,394.656 C 512,441.593, 473.609,480, 426.672,480z M 435.296,224L 352,224 l0-224 l-96,0 L 256,224 l-46.263,0 l0,73.282 L 256,297.282
l0,47.593 C 256,409.546, 283.896,448, 359.935,448l 87.622,0 l0-79.285 l-71.565,0 c-21.241,0.035-23.876-11.076-23.876-31.756L 352,297.282l 96,0 l0,47.593 C 256,409.546, 283.896,448, 359.935,448l 87.622,0 l0-79.285 l-71.565,0 c-21.241,0.035-23.876-11.076-23.876-31.756L 352,297.282l 96,0
L 435.296,224z" data-tags="facebook, social" /> L 435.296,224z" data-tags="facebook, social" />
<glyph unicode="&#xe004;" d="M 430.905,213.063 L 533.333,213.063 L 266.788,480 L0,213.063 L 99.136,213.063 L 99.136-32 L 217.493-32 L 217.493,120.242 L 316.316,120.242 L 316.316-32 L 430.905-32 L 430.905,213.063 Z M 430.905,213.063" horiz-adv-x="533.333" data-tags="home" /> <glyph unicode="&#xe004;" d="M 102.4,223.886 L 387.789,415.966 L 387.789,300.425 C 387.789,300.425 716.914,275.166 716.914,31.772 C 716.914,31.772 675.282,131.658 516.050,150.591 C 490.007,153.685 450.435,156.735 387.686,156.735 L 387.686,31.784 L 102.4,223.886 L 102.4,223.886 Z M 102.4,223.886" horiz-adv-x="819.2" data-tags="back" />
<glyph unicode="&#xe005;" d="M0,283.077 L0,164.923 L 571.077,164.923 L 571.077,283.077 L0,283.077 Z M0,283.077M0,86.154 L 157.538,86.154 L 157.538-32 L0-32 Z M 216.615,86.154 L 571.077,86.154 L 571.077-32 L 216.615-32 Z M 216.615,86.154M0,480 L 354.462,480 L 354.462,361.846 L0,361.846 Z M 413.538,480 L 571.077,480 L 571.077,361.846 L 413.538,361.846 Z M 413.538,480" horiz-adv-x="571.077" data-tags="ghost" />
<glyph unicode="&#x20;" horiz-adv-x="256" /> <glyph unicode="&#x20;" horiz-adv-x="256" />
</font></defs></svg> </font></defs></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
assets/fonts/icons.eot
View File

Binary file not shown.

3
assets/fonts/icons.svg
View File

@ -36,7 +36,6 @@ This is a custom SVG font generated by IcoMoon.
c 46.938,0, 85.328,38.373, 85.328,85.344L 512,394.656 C 512,441.593, 473.609,480, 426.672,480z M 435.296,224L 352,224 l0-224 l-96,0 L 256,224 l-46.263,0 l0,73.282 L 256,297.282 c 46.938,0, 85.328,38.373, 85.328,85.344L 512,394.656 C 512,441.593, 473.609,480, 426.672,480z M 435.296,224L 352,224 l0-224 l-96,0 L 256,224 l-46.263,0 l0,73.282 L 256,297.282
l0,47.593 C 256,409.546, 283.896,448, 359.935,448l 87.622,0 l0-79.285 l-71.565,0 c-21.241,0.035-23.876-11.076-23.876-31.756L 352,297.282l 96,0 l0,47.593 C 256,409.546, 283.896,448, 359.935,448l 87.622,0 l0-79.285 l-71.565,0 c-21.241,0.035-23.876-11.076-23.876-31.756L 352,297.282l 96,0
L 435.296,224z" /> L 435.296,224z" />
<glyph unicode="&#xe004;" d="M 430.905,213.063 L 533.333,213.063 L 266.788,480 L0,213.063 L 99.136,213.063 L 99.136-32 L 217.493-32 L 217.493,120.242 L 316.316,120.242 L 316.316-32 L 430.905-32 L 430.905,213.063 Z M 430.905,213.063" horiz-adv-x="533.333" /> <glyph unicode="&#xe004;" d="M 102.4,223.886 L 387.789,415.966 L 387.789,300.425 C 387.789,300.425 716.914,275.166 716.914,31.772 C 716.914,31.772 675.282,131.658 516.050,150.591 C 490.007,153.685 450.435,156.735 387.686,156.735 L 387.686,31.784 L 102.4,223.886 L 102.4,223.886 Z M 102.4,223.886" horiz-adv-x="819.2" />
<glyph unicode="&#xe005;" d="M0,283.077 L0,164.923 L 571.077,164.923 L 571.077,283.077 L0,283.077 Z M0,283.077M0,86.154 L 157.538,86.154 L 157.538-32 L0-32 Z M 216.615,86.154 L 571.077,86.154 L 571.077-32 L 216.615-32 Z M 216.615,86.154M0,480 L 354.462,480 L 354.462,361.846 L0,361.846 Z M 413.538,480 L 571.077,480 L 571.077,361.846 L 413.538,361.846 Z M 413.538,480" horiz-adv-x="571.077" />
<glyph unicode="&#x20;" horiz-adv-x="256" /> <glyph unicode="&#x20;" horiz-adv-x="256" />
</font></defs></svg> </font></defs></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
assets/fonts/icons.ttf
View File

Binary file not shown.

BIN
assets/fonts/icons.woff
View File

Binary file not shown.

BIN
assets/img/ghost.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 585 B

BIN
assets/img/home.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 315 B

BIN
assets/img/rss.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 351 B

BIN
assets/img/user.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 59 KiB

4
assets/js/index.js
View File

@ -10,8 +10,8 @@
// On the home page, move the blog icon inside the header // On the home page, move the blog icon inside the header
// for better relative/absolute positioning. // for better relative/absolute positioning.
$("#blog-icon").prependTo("#site-head"); //$("#blog-logo").prependTo("#site-head-content");
}); });

10
default.hbs
View File

@ -15,8 +15,7 @@
{{! 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=Droid+Serif:400,700,400italic|Open+Sans:700,400">
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic' rel='stylesheet' type='text/css'>
{{! Ghost outputs important style and meta data with this tag }} {{! Ghost outputs important style and meta data with this tag }}
{{ghost_head}} {{ghost_head}}
@ -26,10 +25,9 @@
{{! Everything else gets inserted here }} {{! Everything else gets inserted here }}
{{{body}}} {{{body}}}
{{! Ghost outputs important scripts and data with this tag }} {{! Ghost outputs important scripts and data with this tag }}
{{ghost_foot}} {{ghost_foot}}
<script type="text/javascript" src="assets/js/index.js"></script>
<script type="text/javascript" src="assets/js/index.js"></script>
</body> </body>
</html> </html>

6
index.hbs
View File

@ -2,7 +2,8 @@
<header id="site-head"> <header id="site-head">
<div class="vertical"> <div class="vertical">
<div class="content"> <div id="site-head-content">
<a id="blog-logo" href="{{settings.url}}"><img src="assets/img/user.png" alt="" /></a>
<h1 class="blog-title">{{settings.title}}</h1> <h1 class="blog-title">{{settings.title}}</h1>
<h2 class="blog-description">A designer, developer and entrepreneur. Spends his time travelling the world with a bag of kites. Likes journalism and publishing platforms.</h2> <h2 class="blog-description">A designer, developer and entrepreneur. Spends his time travelling the world with a bag of kites. Likes journalism and publishing platforms.</h2>
</div> </div>
@ -15,8 +16,9 @@
<article class="{{post_class}}"> <article class="{{post_class}}">
<header class="post-header"> <header class="post-header">
<h2 class="post-title"><a href="/{{slug}}">{{title}}</a></h2>
<span class="post-meta"><time datetime="{{date published_at format='YYYY-MM-DD'}}">{{date published_at format='DD MMM YYYY'}}</time> in <a href="#">What I Learned Building...</a></span> <span class="post-meta"><time datetime="{{date published_at format='YYYY-MM-DD'}}">{{date published_at format='DD MMM YYYY'}}</time> in <a href="#">What I Learned Building...</a></span>
<h2 class="post-title"><a href="/{{slug}}">{{title}}</a></h2>
</header> </header>
<section class="post-excerpt"> <section class="post-excerpt">
<p>{{excerpt}}&hellip;</p> <p>{{excerpt}}&hellip;</p>

8
post.hbs
View File

@ -7,10 +7,14 @@
<article class="{{post_class}}"> <article class="{{post_class}}">
<header class="post-header"> <header class="post-header">
<a id="blog-logo" href="{{../settings.url}}"><img src="assets/img/user.png" alt="" /></a>
<h1 class="post-title">{{title}}</h1>
<span class="post-meta"><time datetime="{{date published_at format='YYYY-MM-DD'}}">{{date published_at format='DD MMM YYYY'}}</time> on <a href="#">What I Learned Building...</a></span>
</header> </header>
<span class="post-meta"><time datetime="{{date published_at format='YYYY-MM-DD'}}">{{date published_at format='DD MMM YYYY'}}</time> on <a href="#">What I Learned Building...</a></span>
<h1 class="post-title">{{title}}</h1>
<section class="post-content"> <section class="post-content">
{{content}} {{content}}