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

Improve social follow popover button

Browse source
This commit is contained in:
Michael Rose 2016-03-21 00:03:46 -04:00
parent abb89f7eb6
commit a2a4f84580
6 changed files with 83 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
_includes/author-profile.html
View file

@ -17,72 +17,72 @@
{% if author.bio %}<p class="author__bio">{{ author.bio }}</p>{% endif %} {% if author.bio %}<p class="author__bio">{{ author.bio }}</p>{% endif %}
</div> </div>
<div class="author__urls_wrapper"> <div class="author__urls-wrapper">
<span class="btn">Follow</span> <button class="btn btn--inverse">Follow</button>
<div class="author__urls"> <ul class="author__urls">
{% if author.uri %} {% if author.uri %}
<a href="{{ author.uri }}" target="_blank"><i class="fa fa-fw fa-globe"></i>Website</a> <li><a href="{{ author.uri }}" target="_blank"><i class="fa fa-fw fa-globe"></i>Website</a></li>
{% endif %} {% endif %}
{% if author.email %} {% if author.email %}
<a href="mailto:{{ author.email }}" target="_blank"><i class="fa fa-fw fa-envelope-square"></i> Email</a> <li><a href="mailto:{{ author.email }}" target="_blank"><i class="fa fa-fw fa-envelope-square"></i> Email</a></li>
{% endif %} {% endif %}
{% if author.twitter %} {% if author.twitter %}
<a href="http://twitter.com/{{ author.twitter }}" target="_blank"><i class="fa fa-fw fa-twitter-square"></i> Twitter</a> <li><a href="http://twitter.com/{{ author.twitter }}" target="_blank"><i class="fa fa-fw fa-twitter-square"></i> Twitter</a></li>
{% endif %} {% endif %}
{% if author.facebook %} {% if author.facebook %}
<a href="http://facebook.com/{{ author.facebook }}" target="_blank"><i class="fa fa-fw fa-facebook-square"></i> Facebook</a> <li><a href="http://facebook.com/{{ author.facebook }}" target="_blank"><i class="fa fa-fw fa-facebook-square"></i> Facebook</a></li>
{% endif %} {% endif %}
{% if author.google_plus %} {% if author.google_plus %}
<a href="http://plus.google.com/+{{ author.google_plus }}" target="_blank"><i class="fa fa-fw fa-google-plus-square"></i> Google+</a> <li><a href="http://plus.google.com/+{{ author.google_plus }}" target="_blank"><i class="fa fa-fw fa-google-plus-square"></i> Google+</a></li>
{% endif %} {% endif %}
{% if author.linkedin %} {% if author.linkedin %}
<a href="http://linkedin.com/in/{{ author.linkedin }}" target="_blank"><i class="fa fa-fw fa-linkedin-square"></i> LinkedIn</a> <li><a href="http://linkedin.com/in/{{ author.linkedin }}" target="_blank"><i class="fa fa-fw fa-linkedin-square"></i> LinkedIn</a></li>
{% endif %} {% endif %}
{% if author.xing %} {% if author.xing %}
<a href="http://www.xing.com/profile/{{ author.xing }}" target="_blank"><i class="fa fa-fw fa-xing-square"></i> XING</a> <li><a href="http://www.xing.com/profile/{{ author.xing }}" target="_blank"><i class="fa fa-fw fa-xing-square"></i> XING</a></li>
{% endif %} {% endif %}
{% if author.instagram %} {% if author.instagram %}
<a href="http://instagram.com/{{ author.instagram }}" target="_blank"><i class="fa fa-fw fa-instagram"></i> Instagram</a> <li><a href="http://instagram.com/{{ author.instagram }}" target="_blank"><i class="fa fa-fw fa-instagram"></i> Instagram</a></li>
{% endif %} {% endif %}
{% if author.tumblr %} {% if author.tumblr %}
<a href="http://{{ author.tumblr }}.tumblr.com" target="_blank"><i class="fa fa-fw fa-tumblr-square"></i> Tumblr</a> <li><a href="http://{{ author.tumblr }}.tumblr.com" target="_blank"><i class="fa fa-fw fa-tumblr-square"></i> Tumblr</a></li>
{% endif %} {% endif %}
{% if author.github %} {% if author.github %}
<a href="http://github.com/{{ author.github }}" target="_blank"><i class="fa fa-fw fa-github"></i> Github</a> <li><a href="http://github.com/{{ author.github }}" target="_blank"><i class="fa fa-fw fa-github"></i> Github</a></li>
{% endif %} {% endif %}
{% if author.stackoverflow %} {% if author.stackoverflow %}
<a href="http://stackoverflow.com/users/{{ author.stackoverflow }}" target="_blank"><i class="fa fa-fw fa-stack-overflow"></i> Stackoverflow</a> <li><a href="http://stackoverflow.com/users/{{ author.stackoverflow }}" target="_blank"><i class="fa fa-fw fa-stack-overflow"></i> Stackoverflow</a></li>
{% endif %} {% endif %}
{% if author.lastfm %} {% if author.lastfm %}
<a href="http://lastfm.com/user/{{ author.lastfm }}" target="_blank"><i class="fa fa-fw fa-music"></i> Last.fm</a> <li><a href="http://lastfm.com/user/{{ author.lastfm }}" target="_blank"><i class="fa fa-fw fa-music"></i> Last.fm</a></li>
{% endif %} {% endif %}
{% if author.dribbble %} {% if author.dribbble %}
<a href="http://dribbble.com/{{ author.dribbble }}" target="_blank"><i class="fa fa-fw fa-dribbble"></i> Dribbble</a> <li><a href="http://dribbble.com/{{ author.dribbble }}" target="_blank"><i class="fa fa-fw fa-dribbble"></i> Dribbble</a></li>
{% endif %} {% endif %}
{% if author.pinterest %} {% if author.pinterest %}
<a href="http://www.pinterest.com/{{ author.pinterest }}" target="_blank"><i class="fa fa-fw fa-pinterest"></i> Pinterest</a> <li><a href="http://www.pinterest.com/{{ author.pinterest }}" target="_blank"><i class="fa fa-fw fa-pinterest"></i> Pinterest</a></li>
{% endif %} {% endif %}
{% if author.foursquare %} {% if author.foursquare %}
<a href="http://foursquare.com/{{ author.foursquare }}" target="_blank"><i class="fa fa-fw fa-foursquare"></i> Foursquare</a> <li><a href="http://foursquare.com/{{ author.foursquare }}" target="_blank"><i class="fa fa-fw fa-foursquare"></i> Foursquare</a></li>
{% endif %} {% endif %}
{% if author.steam %} {% if author.steam %}
<a href="http://steamcommunity.com/id/{{ author.steam }}" target="_blank"><i class="fa fa-fw fa-steam-square"></i> Steam</a> <li><a href="http://steamcommunity.com/id/{{ author.steam }}" target="_blank"><i class="fa fa-fw fa-steam-square"></i> Steam</a></li>
{% endif %} {% endif %}
{% if author.youtube %} {% if author.youtube %}
<a href="https://youtube.com/user/{{ author.youtube }}" target="_blank"><i class="fa fa-fw fa-youtube-square"></i> Youtube</a> <li><a href="https://youtube.com/user/{{ author.youtube }}" target="_blank"><i class="fa fa-fw fa-youtube-square"></i> Youtube</a></li>
{% endif %} {% endif %}
{% if author.soundcloud %} {% if author.soundcloud %}
<a href="http://soundcloud.com/{{ author.soundcloud }}" target="_blank"><i class="fa fa-fw fa-soundcloud"></i> Soundcloud</a> <li><a href="http://soundcloud.com/{{ author.soundcloud }}" target="_blank"><i class="fa fa-fw fa-soundcloud"></i> Soundcloud</a></li>
{% endif %} {% endif %}
{% if author.weibo %} {% if author.weibo %}
<a href="http://www.weibo.com/{{ author.weibo }}" target="_blank"><i class="fa fa-fw fa-weibo"></i> Weibo</a> <li><a href="http://www.weibo.com/{{ author.weibo }}" target="_blank"><i class="fa fa-fw fa-weibo"></i> Weibo</a></li>
{% endif %} {% endif %}
{% if author.flickr %} {% if author.flickr %}
<a href="http://www.flickr.com/{{ author.flickr }}" target="_blank"><i class="fa fa-fw fa-flickr"></i> Flickr</a> <li><a href="http://www.flickr.com/{{ author.flickr }}" target="_blank"><i class="fa fa-fw fa-flickr"></i> Flickr</a></li>
{% endif %} {% endif %}
{% if author.codepen %} {% if author.codepen %}
<a href="http://codepen.io/{{ author.codepen }}" target="_blank"><i class="fa fa-fw fa-codepen"></i> CodePen</a> <li><a href="http://codepen.io/{{ author.codepen }}" target="_blank"><i class="fa fa-fw fa-codepen"></i> CodePen</a></li>
{% endif %} {% endif %}
</div> </ul>
</div> </div>
</div> </div>

3
assets/_scss/_buttons.scss
View file

@ -49,7 +49,8 @@
/* for dark backgrounds */ /* for dark backgrounds */
&--inverse { &--inverse {
color: #000 !important; color: currentColor !important;
border: 1px solid currentColor !important; // override
background-color: #fff; background-color: #fff;
&:hover { &:hover {
background-color: mix(#000, #fff, 20%); background-color: mix(#000, #fff, 20%);

59
assets/_scss/_sidebar.scss
View file

@ -107,16 +107,24 @@
} }
} }
.author__urls_wrapper { .author__urls-wrapper {
position: relative; position: relative;
display: table-cell; display: table-cell;
vertical-align: top; vertical-align: middle;
font-family: $sans-serif; font-family: $sans-serif;
z-index: 9999;
position: relative;
cursor: pointer;
@include breakpoint($large) { @include breakpoint($large) {
display: block; display: block;
} }
&:hover .author__urls { .btn {
display: block; margin: 0;
padding: 5px 10px;
color: mix(#fff, $gray, 25%);
@include breakpoint($large) {
display: none;
}
} }
} }
@ -124,10 +132,38 @@
display: none; display: none;
position: absolute; position: absolute;
right: 0; right: 0;
margin-top: 10px; margin-top: 15px;
padding: 10px; padding: 10px;
list-style-type: none;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: $border-radius; border-radius: $border-radius;
background: #fff;
z-index: -1;
box-shadow: 0 0 10px rgba(#000, 0.25);
@include breakpoint($large) {
display: block;
position: initial;
margin: 0;
padding: 0;
border: 0;
background: initial;
box-shadow: initial;
}
&:before {
content: "";
position: absolute;
border-style: solid;
border-width: 0 10px 10px;
border-color: $border-color transparent;
display: block;
width: 0;
z-index: 0;
top: -11px;
left: calc(50% - 10px);
@include breakpoint($large) {
display: none;
}
}
&:after { &:after {
content: ""; content: "";
position: absolute; position: absolute;
@ -139,18 +175,9 @@
z-index: 1; z-index: 1;
top: -10px; top: -10px;
left: calc(50% - 10px); left: calc(50% - 10px);
@include breakpoint($large) {
display: none;
} }
&:before {
content: '';
position: absolute;
border-style: solid;
border-width: 0 10px 10px;
border-color: $border-color transparent;
display: block;
width: 0;
z-index: 0;
top: -11px;
left: calc(50% - 10px);
} }
a { a {
display: block; display: block;

2
assets/css/main.css
View file

File diff suppressed because one or more lines are too long

7
assets/js/_main.js
View file

@ -28,8 +28,13 @@ $(document).ready(function(){
stickySideBar(); stickySideBar();
}); });
// Follow menu drop down
$(".author__urls-wrapper button").on("click", function() {
$(".author__urls").fadeToggle("fast", function() {});
$(".author__urls-wrapper button").toggleClass("open");
$(".author__urls-wrapper button:after").css("content", "-");
});
// init smooth scroll // init smooth scroll
$("a").smoothScroll({offset: -20}); $("a").smoothScroll({offset: -20});

10
assets/js/main.min.js vendored
View file

File diff suppressed because one or more lines are too long