Improve social follow popover button
This commit is contained in:
Michael Rose
parent
abb89f7eb6
commit
a2a4f84580
|
|
@ -17,72 +17,72 @@
|
|||
{% if author.bio %}<p class="author__bio">{{ author.bio }}</p>{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="author__urls_wrapper">
|
||||
<span class="btn">Follow</span>
|
||||
<div class="author__urls">
|
||||
<div class="author__urls-wrapper">
|
||||
<button class="btn btn--inverse">Follow</button>
|
||||
<ul class="author__urls">
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,8 @@
|
|||
/* for dark backgrounds */
|
||||
|
||||
&--inverse {
|
||||
color: #000 !important;
|
||||
color: currentColor !important;
|
||||
border: 1px solid currentColor !important; // override
|
||||
background-color: #fff;
|
||||
&:hover {
|
||||
background-color: mix(#000, #fff, 20%);
|
||||
|
|
|
|||
|
|
@ -107,16 +107,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
.author__urls_wrapper {
|
||||
.author__urls-wrapper {
|
||||
position: relative;
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
vertical-align: middle;
|
||||
font-family: $sans-serif;
|
||||
z-index: 9999;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
@include breakpoint($large) {
|
||||
display: block;
|
||||
}
|
||||
&:hover .author__urls {
|
||||
display: block;
|
||||
.btn {
|
||||
margin: 0;
|
||||
padding: 5px 10px;
|
||||
color: mix(#fff, $gray, 25%);
|
||||
@include breakpoint($large) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -124,10 +132,38 @@
|
|||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-top: 10px;
|
||||
margin-top: 15px;
|
||||
padding: 10px;
|
||||
list-style-type: none;
|
||||
border: 1px solid $border-color;
|
||||
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 {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
@ -139,18 +175,9 @@
|
|||
z-index: 1;
|
||||
top: -10px;
|
||||
left: calc(50% - 10px);
|
||||
}
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -28,8 +28,13 @@ $(document).ready(function(){
|
|||
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
|
||||
$("a").smoothScroll({offset: -20});
|
||||
|
|
|
|||
10
assets/js/main.min.js
vendored
10
assets/js/main.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue