The new header

* Experimental new Ghost watermark
* Ghost icon navigational styles
* Enhanced responsive styles
This commit is contained in:
John O'Nolan 2013-08-26 20:26:34 +02:00 committed by Hannah Wolfe
parent 85b74ea393
commit b5021db970
5 changed files with 93 additions and 22 deletions

View file

@ -270,12 +270,35 @@ table.plain {
position: relative;
width: 100%;
height: 60%;
margin-bottom: 5rem;
text-align: center;
color: #fff;
background: #303538 url(http://f.cl.ly/items/1N2205280l2u1l0h190o/bg.jpg) no-repeat center center;
background-size: cover;
}
#ghost {
display: block;
width: 20px;
height: 18px;
padding: 4px;
position: absolute;
top: 40px;
right: 40px;
z-index: 950;
opacity: 0.4;
color: #fff;
text-indent: -9999px;
text-decoration: none;
background: rgba(0,0,0,0.2) 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;
@ -289,6 +312,45 @@ table.plain {
background: #303538;
}
/* 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;
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 950;
background: url(../img/home.png) center center no-repeat;
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;
}
#blog-icon img {
height: 80px;
width: auto;
@ -325,13 +387,21 @@ table.plain {
padding-top: 120px;
}
.post-template .post {
border-bottom: none;
}
.post-template .post:after {
display: none;
}
.post {
position: relative;
width:80%;
max-width: 700px;
border-bottom: #DDE6EB 1px solid;
margin: 3.2em auto;
padding-bottom: 1.6em;
margin: 3rem auto;
padding-bottom: 3rem;
word-break: break-word;
hyphens: auto;
}
@ -361,6 +431,10 @@ table.plain {
text-decoration: none;
}
.post-excerpt p {
margin: 0;
}
.post-content {
}
@ -544,12 +618,17 @@ table.plain {
line-height: 1.6em;
}
#ghost {
top: 16px;
right: 16px;
}
#blog-icon {
}
#site-head .wrap {
margin: 0 16px -30px 16px;
margin: 0 16px -40px 16px;
width: auto;
}

BIN
assets/img/ghost.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
assets/img/home.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 315 B

View file

@ -21,18 +21,21 @@
{{ghost_head}}
</head>
<body class="{{body_class}}">
{{! Your Ghost watermark in the top right corner}}
<a id="ghost" href="/ghost/">Ghost</a>
<figure id="blog-icon">
<a href="/" title="Home">
<img src="http://f.cl.ly/items/1O1o3n05373h222G101k/gravatar-j7-100.jpg" alt="John" />
</a>
</figure>
{{! 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>
{{! This is where shit gets real }}
{{! Everything else gets inserted here }}
{{{body}}}
{{! Ghost outputs important scripts and data with this tag }}
{{ghost_foot}}
<script type="text/javascript" src="assets/js/index.js"></script>
</body>

View file

@ -7,26 +7,15 @@
<article class="{{post_class}}">
<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>
<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>
</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="{{date published_at format='YYYY-MM-DD'}}">{{date published_at format='DD MMM YYYY'}}</time>
</section>
</footer>
</article>
{{/post}}