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
|
|
@ -464,29 +464,13 @@ table.plain {
|
|||
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 {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
left: 50%;
|
||||
margin-left: -14px;
|
||||
margin-left: -15px;
|
||||
border: #EBF2F6 1px solid;
|
||||
text-align: center;
|
||||
line-height: 2.4rem;
|
||||
|
|
@ -509,9 +493,46 @@ table.plain {
|
|||
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 {
|
||||
position: relative;
|
||||
margin: 6rem 0 0 0;
|
||||
margin: 8rem 0 0 0;
|
||||
padding: 6rem 0;
|
||||
border-top: #EBF2F6 1px solid;
|
||||
background: #F7FAFB;
|
||||
|
|
@ -550,12 +571,43 @@ table.plain {
|
|||
color: #222;
|
||||
}
|
||||
|
||||
|
||||
.pagination {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
max-width: 700px;
|
||||
margin: 1.6em auto;
|
||||
font-size: 1.4rem;
|
||||
margin: 4rem auto;
|
||||
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 }}
|
||||
{{{body}}}
|
||||
|
||||
{{! Ghost outputs important scripts and data with this tag }}
|
||||
{{ghost_foot}}
|
||||
<script type="text/javascript" src="assets/js/index.js"></script>
|
||||
<footer class="post-footer">
|
||||
<a class="subscribe icon-feed" href="#"><span class="tooltip">Subscribe!</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>
|
||||
|
||||
{{! Ghost outputs important scripts and data with this tag }}
|
||||
{{ghost_foot}}
|
||||
<script type="text/javascript" src="assets/js/index.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
16
post.hbs
16
post.hbs
|
|
@ -22,22 +22,6 @@
|
|||
|
||||
</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}}
|
||||
|
||||
</main>
|
||||
Loading…
Reference in New Issue