From 2e5765490c49637e5e32640549deaa7c42b114dc Mon Sep 17 00:00:00 2001
From: Jacek Lebioda <jacek.lebioda@uni.lu>
Date: Sat, 7 Apr 2018 17:55:42 +0200
Subject: [PATCH] Social animations
---
_includes/social.html | 6 +++---
_sass/minima/_base.scss | 16 ++++++++++++++++
2 files changed, 19 insertions(+), 3 deletions(-)
diff --git a/_includes/social.html b/_includes/social.html
index c0fa1dd..0207063 100644
--- a/_includes/social.html
+++ b/_includes/social.html
@@ -1,7 +1,7 @@
<ul class="social-media-list">
- {%- if site.twitter_username -%}<li><a href="https://www.twitter.com/{{ site.twitter_username| cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#twitter' | relative_url }}"></use></svg></a></li>{%- endif -%}
- {%- if site.facebook_username -%}<li><a href="https://www.facebook.com/{{ site.facebook_username| cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#facebook' | relative_url }}"></use></svg></a></li>{%- endif -%}
- {%- if site.linkedin_schoolname -%}<li><a href="https://www.linkedin.com/school/{{ site.linkedin_schoolname| cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#linkedin' | relative_url }}"></use></svg></a></li>{%- endif -%}
+ {%- if site.twitter_username -%}<li><a href="https://www.twitter.com/{{ site.twitter_username| cgi_escape | escape }}"><svg class="svg-icon svg-icon-twitter"><use xlink:href="{{ '/assets/minima-social-icons.svg#twitter' | relative_url }}"></use></svg></a></li>{%- endif -%}
+ {%- if site.facebook_username -%}<li><a href="https://www.facebook.com/{{ site.facebook_username| cgi_escape | escape }}"><svg class="svg-icon svg-icon-fb"><use xlink:href="{{ '/assets/minima-social-icons.svg#facebook' | relative_url }}"></use></svg></a></li>{%- endif -%}
+ {%- if site.linkedin_schoolname -%}<li><a href="https://www.linkedin.com/school/{{ site.linkedin_schoolname| cgi_escape | escape }}"><svg class="svg-icon svg-icon-linkedin"><use xlink:href="{{ '/assets/minima-social-icons.svg#linkedin' | relative_url }}"></use></svg></a></li>{%- endif -%}
{%- if site.dribbble_username -%}<li><a href="https://dribbble.com/{{ site.dribbble_username| cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#dribbble' | relative_url }}"></use></svg> <span class="username">{{ site.dribbble_username| escape }}</span></a></li>{%- endif -%}
{%- if site.flickr_username -%}<li><a href="https://www.flickr.com/photos/{{ site.flickr_username| cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#flickr' | relative_url }}"></use></svg> <span class="username">{{ site.flickr_username| escape }}</span></a></li>{%- endif -%}
diff --git a/_sass/minima/_base.scss b/_sass/minima/_base.scss
index 2410223..72003fe 100644
--- a/_sass/minima/_base.scss
+++ b/_sass/minima/_base.scss
@@ -244,6 +244,22 @@ pre {
fill: #{$grey-color};
padding-right: 5px;
vertical-align: text-top;
+ transition: all .4s ease-in-out;
+}
+
+.svg-icon-fb:hover {
+ fill: #3b5998;
+ transform: scale(1.3);
+}
+
+.svg-icon-linkedin:hover {
+ fill: #0077b2;
+ transform: scale(1.3);
+}
+
+.svg-icon-twitter:hover {
+ fill: #00aced;
+ transform: scale(1.3);
}
.social-media-list {
--
GitLab