The new header
* Experimental new Ghost watermark * Ghost icon navigational styles * Enhanced responsive styles
This commit is contained in:
John O'Nolan
Hannah Wolfe
parent
85b74ea393
commit
b5021db970
5 changed files with 93 additions and 22 deletions
|
|
@ -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
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
BIN
assets/img/home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 315 B |
15
default.hbs
15
default.hbs
|
|
@ -22,17 +22,20 @@
|
|||
</head>
|
||||
<body class="{{body_class}}">
|
||||
|
||||
<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 Ghost watermark in the top right corner}}
|
||||
<a id="ghost" href="/ghost/">Ghost</a>
|
||||
|
||||
{{! This is where shit gets real }}
|
||||
{{! 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}}}
|
||||
|
||||
{{! Ghost outputs important scripts and data with this tag }}
|
||||
{{ghost_foot}}
|
||||
|
||||
<script type="text/javascript" src="assets/js/index.js"></script>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
15
post.hbs
15
post.hbs
|
|
@ -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}}
|
||||
|
|
|
|||
Loading…
Reference in a new issue