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

Rework header/typography/icons

This commit is contained in:
John O'Nolan 2013-08-28 14:01:39 +02:00 committed by Hannah Wolfe
parent 788c8ebff0
commit 5234629a60
11 changed files with 43 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
assets/css/screen.css
View File

@ -27,7 +27,7 @@ html {
body {
height: 100%;
max-height: 100%;
font-family: 'Open Sans', sans-serif;
font-family: 'Droid Serif', serif;
font-size: 2.0rem;
line-height: 1.6em;
color: #3A4145;
@ -50,12 +50,13 @@ h4, h5, h6 {
text-rendering: optimizeLegibility;
line-height: 1;
margin-top: 0;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 5rem;
line-height: 1.2em;
letter-spacing: -1px;
letter-spacing: -2px;
}
h2 {
@ -288,120 +289,52 @@ table.plain {
#site-head {
position: relative;
display: table;
width: 100%;
height: 60%;
height: 70%;
margin-bottom: 5rem;
text-align: center;
color: #fff;
background: #303538 url(http://f.cl.ly/items/1N2205280l2u1l0h190o/bg.jpg) no-repeat center center;
background: #303538 url(https://maptia-production.s3.amazonaws.com/posts/1923/full_screen.jpg) no-repeat center center;
background-size: cover;
}
#ghost {
display: block;
width: 20px;
height: 18px;
padding: 4px;
position: absolute;
top: 43px;
right: 43px;
z-index: 950;
opacity: 0.4;
color: #fff;
text-indent: -9999px;
text-decoration: none;
background: rgba(0,0,0,0.15) url(../img/ghost.png) 4px 4px no-repeat;
border-radius: 2px;
transition: opacity ease 0.5s;
}
#ghost:hover {
opacity: 1;
}
#blog-icon {
position: absolute;
top: 40px;
left: 40px;
z-index: 900;
border: #fff 3px solid;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
overflow: hidden;
}
/* Create dark overlay state for blog icon */
#blog-icon:before {
display: block;
content: "";
position: absolute;
z-index: 930;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background ease 0.5s;
}
/* On the post template, show the dark overlay on hover */
.post-template #blog-icon:hover:before {
background: rgba(0,0,0,0.4);
}
/* Create home icon for blog icon overlay */
#blog-icon:after {
display: block;
position: absolute;
top: 50%;
left: 0;
bottom: 0;
right: 0;
z-index: 950;
margin-top: -10px;
content: "\e004";
color: #fff;
text-align: center;
opacity:0;
transition: opacity ease 0.5s;
}
/* On the post template, show the home icon overlay on hover */
.post-template #blog-icon:hover:after {
opacity: 1;
top: 10px;
left: 10px;
}
#blog-icon img {
height: 80px;
width: auto;
min-width: 80px;
height: 40px;
width: 40px;
display: block;
line-height: 0;
}
#site-head .wrap {
display: inline-block;
position: absolute;
bottom: 40%;
left: 0;
right: 0;
margin: 0 auto -60px auto;
.vertical {
display: table-cell;
vertical-align: middle;
}
#site-head .content {
width: 80%;
max-width: 700px;
margin: 0 auto;
}
.blog-title {
margin: 0 0 10px 0;
font-size: 7rem;
letter-spacing: -3px;
margin: 0 0 20px 0;
font-size: 5rem;
letter-spacing: -1px;
}
.blog-description {
font-size: 2rem;
font-size: 1.8rem;
line-height: 1.5em;
font-weight: 300;
opacity: 0.8;
font-family: 'Droid Serif', serif;
letter-spacing: 0;
}
.post-template .content {
@ -612,7 +545,7 @@ table.plain {
font-style: normal;
}
#blog-icon, .icon-feed, .icon-twitter, .icon-google-plus, .icon-facebook {
.icon-feed, .icon-twitter, .icon-google-plus, .icon-facebook {
font-family: 'icons';
speak: none;
font-style: normal;
@ -640,7 +573,9 @@ table.plain {
.icon-home:before {
content: "\e004";
}
.icon-ghost:before {
content: "\e005";
}
@media only screen and (max-width: 900px) {
@ -656,11 +591,7 @@ table.plain {
box-sizing: border-box;
height: auto;
min-height: 240px;
padding-top: 50%;
}
#site-head .wrap {
margin: 0 auto -50px auto;
padding: 25% 0;
}
#blog-icon {
@ -674,12 +605,12 @@ table.plain {
}
.blog-title {
font-size: 5rem;
letter-spacing: -3px;
font-size: 4rem;
letter-spacing: -1px;
}
.blog-description {
font-size: 1.9rem;
font-size: 1.7rem;
line-height: 1.5em;
}
@ -727,14 +658,13 @@ table.plain {
line-height: 1.6em;
}
#site-head .wrap {
margin: 0 16px -40px 16px;
#site-head .content {
margin: 0 16px;
width: auto;
}
.blog-title {
font-size: 3rem;
letter-spacing: 0;
}
.blog-description {
@ -745,7 +675,7 @@ table.plain {
h1, h2 {
font-size: 3rem;
line-height: 1.1em;
letter-spacing: 0;
letter-spacing: -1px;
}
h3 {

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

@ -37,5 +37,6 @@ This is a custom SVG font generated by IcoMoon.
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" />
<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="&#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" />
</font></defs></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
assets/fonts/icons.eot
View File

Binary file not shown.

1
assets/fonts/icons.svg
View File

@ -37,5 +37,6 @@ This is a custom SVG font generated by IcoMoon.
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" />
<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="&#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" />
</font></defs></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.6 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 Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 585 B

BIN
assets/img/user.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 34 KiB

9
default.hbs
View File

@ -16,20 +16,13 @@
{{! 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">
<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_head}}
</head>
<body class="{{body_class}}">
{{! Your Ghost watermark in the top right corner}}
<a id="ghost" href="/ghost/">Ghost</a>
{{! Your blog icon in the top left corner }}
<a id="blog-icon" href="/">
<img src="http://f.cl.ly/items/1O1o3n05373h222G101k/gravatar-j7-100.jpg" alt="John" />
</a>
{{! Everything else gets inserted here }}
{{{body}}}

8
index.hbs
View File

@ -1,9 +1,11 @@
{{!< default}}
<header id="site-head">
<div class="wrap">
<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>
<div class="vertical">
<div class="content">
<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>
</div>
</div>
</header>

2
post.hbs
View File

@ -9,7 +9,7 @@
<header class="post-header">
<h1 class="post-title">{{title}}</h1>
<span class="post-meta"><a href="/">John O'Nolan</a>, <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>
<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>
<section class="post-content">