N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix social share buttons overlapping on small screens

Browse source
This commit is contained in:
Michael Rose 2015-01-22 12:18:35 -05:00
parent 87b8d0b129
commit 7811c598b0
2 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
_includes/_social-share.html
View file

@ -2,13 +2,13 @@
<h4>Share on</h4>
<ul>
<li>
<a href="https://twitter.com/intent/tweet?text={{ site.url }}{{ page.url }}" class="twitter" title="Share on Twitter"><i class="fa fa-twitter"></i> Twitter</a>
<a href="https://twitter.com/intent/tweet?text={{ site.url }}{{ page.url }}" class="twitter" title="Share on Twitter"><i class="fa fa-twitter"></i><span> Twitter</span></a>
</li>
<li>
<a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}" class="facebook" title="Share on Facebook"><i class="fa fa-facebook"></i> Facebook</a>
<a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}" class="facebook" title="Share on Facebook"><i class="fa fa-facebook"></i><span> Facebook</span></a>
</li>
<li>
<a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}" class="google-plus" title="Share on Google Plus"><i class="fa fa-google-plus"></i> Google+</a>
<a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}" class="google-plus" title="Share on Google Plus"><i class="fa fa-google-plus"></i><span> Google+</span></a>
</li>
</ul>
</div><!-- /.social-share -->

8
_sass/page.scss
View file

@ -593,6 +593,7 @@ $button-size: 1.5rem;
}
}
a {
display: block;
padding: 8px 20px;
text-decoration: none !important;
text-transform: uppercase;
@ -605,6 +606,13 @@ $button-size: 1.5rem;
opacity: 1;
}
}
span {
display: none;
@media #{$medium} {
display: inline;
padding-left: 5px;
}
}
h4 {
@include font-rem(14);
margin-bottom: 10px;