nemunaire/nemhugo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improved Share Links

Browse Source
This commit is contained in:
Michael Romero 2018-10-30 00:56:37 -07:00
parent b2e92aa5df
commit 04c5e1d32c
2 changed files with 94 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
layouts/partials/share-links.html
View File

@ -1,75 +1,53 @@
<!-- Social Share Button HTML --> <!-- Social Share Button HTML -->
<div class="share-box" aria-hidden="true">
<!-- Twitter --> <ul class="share">
<li> <!-- Twitter -->
<a href="//twitter.com/share?url={{ .Permalink }}&amp;text={{ .Title }}&amp;via={{ .Site.Author.twitter }}" <li>
target="_blank" title="Share on Twitter"> <a href="//twitter.com/share?url={{ .Permalink }}&amp;text={{ .Title }}&amp;via={{ .Site.Author.twitter }}" target="_blank" title="Share on Twitter">
<span class="fa-stack fa-lg"> <i class="fa fa-twitter"></i>
<i class="fa fa-circle fa-stack-2x"></i> </a>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i> </li>
</span>
</a> <!-- Google Plus -->
</li> <li>
<a href="//plus.google.com/share?url={{ .Permalink }}" target="_blank" title="Share on Google Plus">
<!-- Google Plus --> <i class="fa fa-google-plus"></i>
<li> </a>
<a href="//plus.google.com/share?url={{ .Permalink }}" target="_blank" title="Share on Google Plus"> </li>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i> <!-- Facebook -->
<i class="fa fa-google-plus fa-stack-1x fa-inverse"></i> <li>
</span> <a href="//www.facebook.com/sharer/sharer.php?u={{ .Permalink }}" target="_blank" title="Share on Facebook">
</a> <i class="fa fa-linkedin"></i>
</li> </a>
</li>
<!-- Facebook -->
<li> <!-- Reddit -->
<a href="//www.facebook.com/sharer/sharer.php?u={{ .Permalink }}" target="_blank" title="Share on Facebook"> <li>
<span class="fa-stack fa-lg"> <a href="//reddit.com/submit?url={{ .Permalink }}&amp;title={{ .Title }}" target="_blank" title="Share on Reddit">
<i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-reddit"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i> </a>
</span> </li>
</a>
</li> <!-- LinkedIn -->
<li>
<!-- Reddit --> <a href="//www.linkedin.com/shareArticle?url={{ .Permalink }}&amp;title={{ .Title }}" target="_blank" title="Share on LinkedIn">
<li> <i class="fa fa-linkedin"></i>
<a href="//reddit.com/submit?url={{ .Permalink }}&amp;title={{ .Title }}" target="_blank" title="Share on Reddit"> </a>
<span class="fa-stack fa-lg"> </li>
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-reddit fa-stack-1x fa-inverse"></i> <!-- StumbleUpon -->
</span> <li>
</a> <a href="//www.stumbleupon.com/submit?url={{ .Permalink }}&amp;title={{ .Title }}" target="_blank" title="Share on StumbleUpon">
</li> <i class="fa fa-stumbleupon"></i>
</a>
<!-- LinkedIn --> </li>
<li>
<a href="//www.linkedin.com/shareArticle?url={{ .Permalink }}&amp;title={{ .Title }}" target="_blank" <!-- Pinterest -->
title="Share on LinkedIn"> <li>
<span class="fa-stack fa-lg"> <a href="//www.pinterest.com/pin/create/button/?url={{ .Permalink }}&amp;description={{ .Title }}" target="_blank" title="Share on Pinterest">
<i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-pinterest"></i>
<i class="fa fa-linkedin fa-stack-1x fa-inverse"></i> </a>
</span> </li>
</a> </ul>
</li> </div>
<!-- StumbleUpon -->
<li>
<a href="//www.stumbleupon.com/submit?url={{ .Permalink }}&amp;title={{ .Title }}" target="_blank"
title="Share on StumbleUpon">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-stumbleupon fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<!-- Pinterest -->
<li>
<a href="//www.pinterest.com/pin/create/button/?url={{ .Permalink }}&amp;description={{ .Title }}" target="_blank"
title="Share on Pinterest">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-pinterest fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>

42
static/css/main.css
View File

@ -767,3 +767,45 @@ div.splitbox div.right {
h4.see-also { h4.see-also {
margin-top: 20px; margin-top: 20px;
} }
/*************************************************
* Sharing
**************************************************/
.share-box {
float: right;
}
ul.share {
display: flex;
flex-direction: row;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
ul.share li {
display: inline-flex;
margin-right: 5px;
}
ul.share li:last-of-type {
margin-right: 0;
}
ul.share li .fa {
display: block;
width: 30px;
height: 30px;
line-height: 30px;
font-size: 16px;
text-align: center;
transition: all 150ms ease-in-out;
color: #fff;
}
ul.share li a {
background-color: #b5c6ce;
display: block;
border-radius: 50%;
text-decoration: none !important;
margin: 0;
}
ul.share li:hover .fa {
transform: scale(1.4)
}