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;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 60%;
|
height: 60%;
|
||||||
|
margin-bottom: 5rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: #303538 url(http://f.cl.ly/items/1N2205280l2u1l0h190o/bg.jpg) no-repeat center center;
|
background: #303538 url(http://f.cl.ly/items/1N2205280l2u1l0h190o/bg.jpg) no-repeat center center;
|
||||||
background-size: cover;
|
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 {
|
#blog-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 40px;
|
top: 40px;
|
||||||
|
|
@ -289,6 +312,45 @@ table.plain {
|
||||||
background: #303538;
|
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 {
|
#blog-icon img {
|
||||||
height: 80px;
|
height: 80px;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|
@ -325,13 +387,21 @@ table.plain {
|
||||||
padding-top: 120px;
|
padding-top: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.post-template .post {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-template .post:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.post {
|
.post {
|
||||||
position: relative;
|
position: relative;
|
||||||
width:80%;
|
width:80%;
|
||||||
max-width: 700px;
|
max-width: 700px;
|
||||||
border-bottom: #DDE6EB 1px solid;
|
border-bottom: #DDE6EB 1px solid;
|
||||||
margin: 3.2em auto;
|
margin: 3rem auto;
|
||||||
padding-bottom: 1.6em;
|
padding-bottom: 3rem;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
}
|
}
|
||||||
|
|
@ -361,6 +431,10 @@ table.plain {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.post-excerpt p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.post-content {
|
.post-content {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -544,12 +618,17 @@ table.plain {
|
||||||
line-height: 1.6em;
|
line-height: 1.6em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#ghost {
|
||||||
|
top: 16px;
|
||||||
|
right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
#blog-icon {
|
#blog-icon {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#site-head .wrap {
|
#site-head .wrap {
|
||||||
margin: 0 16px -30px 16px;
|
margin: 0 16px -40px 16px;
|
||||||
width: auto;
|
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>
|
</head>
|
||||||
<body class="{{body_class}}">
|
<body class="{{body_class}}">
|
||||||
|
|
||||||
<figure id="blog-icon">
|
{{! Your Ghost watermark in the top right corner}}
|
||||||
<a href="/" title="Home">
|
<a id="ghost" href="/ghost/">Ghost</a>
|
||||||
<img src="http://f.cl.ly/items/1O1o3n05373h222G101k/gravatar-j7-100.jpg" alt="John" />
|
|
||||||
</a>
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
{{! 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}}}
|
{{{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>
|
||||||
|
|
|
||||||
15
post.hbs
15
post.hbs
|
|
@ -7,26 +7,15 @@
|
||||||
<article class="{{post_class}}">
|
<article class="{{post_class}}">
|
||||||
|
|
||||||
<header class="post-header">
|
<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>
|
<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>
|
</header>
|
||||||
|
|
||||||
<section class="post-content">
|
<section class="post-content">
|
||||||
{{content}}
|
{{content}}
|
||||||
</section>
|
</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>
|
</article>
|
||||||
|
|
||||||
{{/post}}
|
{{/post}}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue