New Stylez
* New pagination styles * Refactored footer to global footer * Introduced new RSS subscription tooltip
This commit is contained in:
John O'Nolan
Hannah Wolfe
parent
49e774889c
commit
d93a50d48b
3 changed files with 91 additions and 39 deletions
|
|
@ -464,29 +464,13 @@ 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;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -14px;
|
top: -14px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -14px;
|
margin-left: -15px;
|
||||||
border: #EBF2F6 1px solid;
|
border: #EBF2F6 1px solid;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 2.4rem;
|
line-height: 2.4rem;
|
||||||
|
|
@ -509,9 +493,46 @@ table.plain {
|
||||||
transition: box-shadow 0.25s;
|
transition: box-shadow 0.25s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
opacity:0;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 4px 8px 5px 8px;
|
||||||
|
position:absolute;
|
||||||
|
top: -23px;
|
||||||
|
left: -23px;
|
||||||
|
color: rgba(255,255,255,0.9);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1em;
|
||||||
|
text-align: center;
|
||||||
|
background: #50585D;
|
||||||
|
border-radius:20px;
|
||||||
|
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
|
||||||
|
transition: opacity 0.3s ease, top 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip:after {
|
||||||
|
content:"";
|
||||||
|
border-width:5px 5px 0 5px;
|
||||||
|
border-style:solid;
|
||||||
|
border-color: #50585D transparent;
|
||||||
|
display:block;
|
||||||
|
position:absolute;
|
||||||
|
bottom:-4px;
|
||||||
|
left:50%;
|
||||||
|
margin-left:-5px;
|
||||||
|
z-index: 220;
|
||||||
|
width:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscribe:hover .tooltip {
|
||||||
|
opacity: 1;
|
||||||
|
top: -33px;
|
||||||
|
}
|
||||||
|
|
||||||
.post-footer {
|
.post-footer {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 6rem 0 0 0;
|
margin: 8rem 0 0 0;
|
||||||
padding: 6rem 0;
|
padding: 6rem 0;
|
||||||
border-top: #EBF2F6 1px solid;
|
border-top: #EBF2F6 1px solid;
|
||||||
background: #F7FAFB;
|
background: #F7FAFB;
|
||||||
|
|
@ -550,12 +571,43 @@ table.plain {
|
||||||
color: #222;
|
color: #222;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.pagination {
|
.pagination {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
max-width: 700px;
|
max-width: 700px;
|
||||||
margin: 1.6em auto;
|
margin: 4rem auto;
|
||||||
font-size: 1.4rem;
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: #9EABB3;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination a {
|
||||||
|
color: #9EABB3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.older-posts,
|
||||||
|
.newer-posts {
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 15px;
|
||||||
|
border: #EBF2F6 2px solid;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.older-posts {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-number {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.newer-posts {
|
||||||
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
22
default.hbs
22
default.hbs
|
|
@ -25,9 +25,25 @@
|
||||||
{{! Everything else gets inserted here }}
|
{{! Everything else gets inserted here }}
|
||||||
{{{body}}}
|
{{{body}}}
|
||||||
|
|
||||||
{{! Ghost outputs important scripts and data with this tag }}
|
<footer class="post-footer">
|
||||||
{{ghost_foot}}
|
<a class="subscribe icon-feed" href="#"><span class="tooltip">Subscribe!</span></a>
|
||||||
<script type="text/javascript" src="assets/js/index.js"></script>
|
<div class="inner">
|
||||||
|
<section class="author">
|
||||||
|
<h4>John O'Nolan</h4>
|
||||||
|
<p>A designer, developer and entrepreneur. Spends his time travelling the world with a bag of kites. Likes journalism and publishing platforms.</p>
|
||||||
|
</section>
|
||||||
|
<section class="share">
|
||||||
|
<h4>Share this post</h4>
|
||||||
|
<a class="icon-twitter" href="http://twitter.com/share?text={{title}}&url={{settings.url}}/{{slug}}"><span class="hidden">Twitter</span></a>
|
||||||
|
<a class="icon-facebook" href="http://www.facebook.com/sharer.php?u={{settings.url}}/{{slug}}"><span class="hidden">Twitter</span></a>
|
||||||
|
<a class="icon-google-plus" href="#"><span class="hidden">Twitter</span></a>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
{{! Ghost outputs important scripts and data with this tag }}
|
||||||
|
{{ghost_foot}}
|
||||||
|
<script type="text/javascript" src="assets/js/index.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
16
post.hbs
16
post.hbs
|
|
@ -22,22 +22,6 @@
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<footer class="post-footer">
|
|
||||||
<a class="subscribe icon-feed" href="#"><span class="hidden">Subscribe to RSS</span></a>
|
|
||||||
<div class="inner">
|
|
||||||
<section class="author">
|
|
||||||
<h4>John O'Nolan</h4>
|
|
||||||
<p>A designer, developer and entrepreneur. Spends his time travelling the world with a bag of kites. Likes journalism and publishing platforms.</p>
|
|
||||||
</section>
|
|
||||||
<section class="share">
|
|
||||||
<h4>Share this post</h4>
|
|
||||||
<a class="icon-twitter" href="http://twitter.com/share?text={{title}}&url={{../settings.url}}/{{slug}}"><span class="hidden">Twitter</span></a>
|
|
||||||
<a class="icon-facebook" href="http://www.facebook.com/sharer.php?u={{../settings.url}}/{{slug}}"><span class="hidden">Twitter</span></a>
|
|
||||||
<a class="icon-google-plus" href="#"><span class="hidden">Twitter</span></a>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
{{/post}}
|
{{/post}}
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
Loading…
Reference in a new issue