Improve sidebar styling for small screens
This commit is contained in:
Michael Rose
parent
dc20be33a0
commit
17a6afcd35
3 changed files with 131 additions and 94 deletions
|
|
@ -4,75 +4,83 @@
|
|||
|
||||
<div itemscope itemtype="http://schema.org/Person">
|
||||
|
||||
<div class="author__avatar">
|
||||
{% if author.avatar contains "http" %}
|
||||
<img src="{{ author.avatar }}" class="author__avatar" alt="{{ author.name }}">
|
||||
<img src="{{ author.avatar }}" alt="{{ author.name }}">
|
||||
{% else %}
|
||||
<img src="{{ author.avatar | prepend: "/images/" | prepend: base_path }}" class="author__avatar" alt="{{ author.name }}">
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="author__content">
|
||||
<h3 class="author__name">{{ author.name }}</h3>
|
||||
|
||||
{% if author.bio %}<p class="author__bio">{{ author.bio }}</p>{% endif %}
|
||||
|
||||
<div class="author__urls">
|
||||
{% if author.uri %}
|
||||
<a href="{{ author.uri }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-globe"></i>Website</a>
|
||||
<a href="{{ author.uri }}" target="_blank"><i class="fa fa-fw fa-globe"></i>Website</a>
|
||||
{% endif %}
|
||||
{% if author.email %}
|
||||
<a href="mailto:{{ author.email }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-envelope-square"></i> Email</a>
|
||||
<a href="mailto:{{ author.email }}" target="_blank"><i class="fa fa-fw fa-envelope-square"></i> Email</a>
|
||||
{% endif %}
|
||||
{% if author.twitter %}
|
||||
<a href="http://twitter.com/{{ author.twitter }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-twitter-square"></i> Twitter</a>
|
||||
<a href="http://twitter.com/{{ author.twitter }}" target="_blank"><i class="fa fa-fw fa-twitter-square"></i> Twitter</a>
|
||||
{% endif %}
|
||||
{% if author.facebook %}
|
||||
<a href="http://facebook.com/{{ author.facebook }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-facebook-square"></i> Facebook</a>
|
||||
<a href="http://facebook.com/{{ author.facebook }}" target="_blank"><i class="fa fa-fw fa-facebook-square"></i> Facebook</a>
|
||||
{% endif %}
|
||||
{% if author.google_plus %}
|
||||
<a href="http://plus.google.com/+{{ author.google_plus }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-google-plus-square"></i> Google+</a>
|
||||
<a href="http://plus.google.com/+{{ author.google_plus }}" target="_blank"><i class="fa fa-fw fa-google-plus-square"></i> Google+</a>
|
||||
{% endif %}
|
||||
{% if author.linkedin %}
|
||||
<a href="http://linkedin.com/in/{{ author.linkedin }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-linkedin-square"></i> LinkedIn</a>
|
||||
<a href="http://linkedin.com/in/{{ author.linkedin }}" target="_blank"><i class="fa fa-fw fa-linkedin-square"></i> LinkedIn</a>
|
||||
{% endif %}
|
||||
{% if author.xing %}
|
||||
<a href="http://www.xing.com/profile/{{ author.xing }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-xing-square"></i> XING</a>
|
||||
<a href="http://www.xing.com/profile/{{ author.xing }}" target="_blank"><i class="fa fa-fw fa-xing-square"></i> XING</a>
|
||||
{% endif %}
|
||||
{% if author.instagram %}
|
||||
<a href="http://instagram.com/{{ author.instagram }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-instagram"></i> Instagram</a>
|
||||
<a href="http://instagram.com/{{ author.instagram }}" target="_blank"><i class="fa fa-fw fa-instagram"></i> Instagram</a>
|
||||
{% endif %}
|
||||
{% if author.tumblr %}
|
||||
<a href="http://{{ author.tumblr }}.tumblr.com" class="author__social-url" target="_blank"><i class="fa fa-fw fa-tumblr-square"></i> Tumblr</a>
|
||||
<a href="http://{{ author.tumblr }}.tumblr.com" target="_blank"><i class="fa fa-fw fa-tumblr-square"></i> Tumblr</a>
|
||||
{% endif %}
|
||||
{% if author.github %}
|
||||
<a href="http://github.com/{{ author.github }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-github"></i> Github</a>
|
||||
<a href="http://github.com/{{ author.github }}" target="_blank"><i class="fa fa-fw fa-github"></i> Github</a>
|
||||
{% endif %}
|
||||
{% if author.stackoverflow %}
|
||||
<a href="http://stackoverflow.com/users/{{ author.stackoverflow }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-stack-overflow"></i> Stackoverflow</a>
|
||||
<a href="http://stackoverflow.com/users/{{ author.stackoverflow }}" target="_blank"><i class="fa fa-fw fa-stack-overflow"></i> Stackoverflow</a>
|
||||
{% endif %}
|
||||
{% if author.lastfm %}
|
||||
<a href="http://lastfm.com/user/{{ author.lastfm }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-music"></i> Last.fm</a>
|
||||
<a href="http://lastfm.com/user/{{ author.lastfm }}" target="_blank"><i class="fa fa-fw fa-music"></i> Last.fm</a>
|
||||
{% endif %}
|
||||
{% if author.dribbble %}
|
||||
<a href="http://dribbble.com/{{ author.dribbble }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-dribbble"></i> Dribbble</a>
|
||||
<a href="http://dribbble.com/{{ author.dribbble }}" target="_blank"><i class="fa fa-fw fa-dribbble"></i> Dribbble</a>
|
||||
{% endif %}
|
||||
{% if author.pinterest %}
|
||||
<a href="http://www.pinterest.com/{{ author.pinterest }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-pinterest"></i> Pinterest</a>
|
||||
<a href="http://www.pinterest.com/{{ author.pinterest }}" target="_blank"><i class="fa fa-fw fa-pinterest"></i> Pinterest</a>
|
||||
{% endif %}
|
||||
{% if author.foursquare %}
|
||||
<a href="http://foursquare.com/{{ author.foursquare }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-foursquare"></i> Foursquare</a>
|
||||
<a href="http://foursquare.com/{{ author.foursquare }}" target="_blank"><i class="fa fa-fw fa-foursquare"></i> Foursquare</a>
|
||||
{% endif %}
|
||||
{% if author.steam %}
|
||||
<a href="http://steamcommunity.com/id/{{ author.steam }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-steam-square"></i> Steam</a>
|
||||
<a href="http://steamcommunity.com/id/{{ author.steam }}" target="_blank"><i class="fa fa-fw fa-steam-square"></i> Steam</a>
|
||||
{% endif %}
|
||||
{% if author.youtube %}
|
||||
<a href="https://youtube.com/user/{{ author.youtube }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-youtube-square"></i> Youtube</a>
|
||||
<a href="https://youtube.com/user/{{ author.youtube }}" target="_blank"><i class="fa fa-fw fa-youtube-square"></i> Youtube</a>
|
||||
{% endif %}
|
||||
{% if author.soundcloud %}
|
||||
<a href="http://soundcloud.com/{{ author.soundcloud }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-soundcloud"></i> Soundcloud</a>
|
||||
<a href="http://soundcloud.com/{{ author.soundcloud }}" target="_blank"><i class="fa fa-fw fa-soundcloud"></i> Soundcloud</a>
|
||||
{% endif %}
|
||||
{% if author.weibo %}
|
||||
<a href="http://www.weibo.com/{{ author.weibo }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-weibo"></i> Weibo</a>
|
||||
<a href="http://www.weibo.com/{{ author.weibo }}" target="_blank"><i class="fa fa-fw fa-weibo"></i> Weibo</a>
|
||||
{% endif %}
|
||||
{% if author.flickr %}
|
||||
<a href="http://www.flickr.com/{{ author.flickr }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-flickr"></i> Flickr</a>
|
||||
<a href="http://www.flickr.com/{{ author.flickr }}" target="_blank"><i class="fa fa-fw fa-flickr"></i> Flickr</a>
|
||||
{% endif %}
|
||||
{% if author.codepen %}
|
||||
<a href="http://codepen.io/{{ author.codepen }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-codepen"></i> CodePen</a>
|
||||
<a href="http://codepen.io/{{ author.codepen }}" target="_blank"><i class="fa fa-fw fa-codepen"></i> CodePen</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -3,16 +3,20 @@
|
|||
========================================================================== */
|
||||
|
||||
.sidebar {
|
||||
@include clearfix();
|
||||
margin-bottom: 2em;
|
||||
padding-bottom: 1em;
|
||||
border-bottom: 1px solid $border-color;
|
||||
@include breakpoint($medium) {
|
||||
display: block;
|
||||
margin-bottom: 1em;
|
||||
@include span(2 of 12);
|
||||
@include suffix(0.25 of 12);
|
||||
border-bottom: none;
|
||||
}
|
||||
@include breakpoint($x-large) {
|
||||
padding-right: 0;
|
||||
}
|
||||
h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 0;
|
||||
font-family: $sans-serif-narrow;
|
||||
}
|
||||
p, li {
|
||||
|
|
@ -27,32 +31,57 @@
|
|||
Author profile and links
|
||||
========================================================================== */
|
||||
|
||||
.author__name {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-family: $sans-serif-narrow;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.author__bio {
|
||||
margin-bottom: 20px;
|
||||
font-size: 80%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.author__avatar {
|
||||
float: left;
|
||||
width: 50px;
|
||||
margin-right: 10px;
|
||||
@include breakpoint($medium) {
|
||||
float: none;
|
||||
width: initial;
|
||||
}
|
||||
img {
|
||||
max-width: 110px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.author__social-url {
|
||||
display: block;
|
||||
.author__content {
|
||||
float: right;
|
||||
width: calc(100% - 60px); // subtract avatar width + any margin/padding
|
||||
@include breakpoint($medium) {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.author__name {
|
||||
margin: 0;
|
||||
font-family: $sans-serif-narrow;
|
||||
font-size: 20px;
|
||||
@include breakpoint($medium) {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.author__bio {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
@include breakpoint($medium) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.author__urls {
|
||||
a {
|
||||
display: inline-block;
|
||||
margin-bottom: 5px;
|
||||
padding-right: 5px;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue