🐼 Fixed icons behavior after html minifying

2 files changed, 29 insertions, 12 deletions

diff --git a/layouts/partials/social.html b/layouts/partials/social.html
index 829dce8..ff86b53 100755
--- a/layouts/partials/social.html
+++ b/layouts/partials/social.html
@@ -1,23 +1,23 @@
 <div class="social">
-	<h4>
+  <ul class="social-links">
     {{ if .Site.Params.Social.Github }}
-	  <a href="http://github.com/{{ .Site.Params.Social.Github }}"><i class="fa fa-github"></i></a>
+      <li><a href="http://github.com/{{ .Site.Params.Social.Github }}"><i class="fa fa-github"></i></a></li>
     {{ end }}
 
     {{ if .Site.Params.Social.Email }}
-	  <a href="mailto:{{ .Site.Params.Social.Email }}"><i class="fa fa-envelope"></i></a>
+      <li><a href="mailto:{{ .Site.Params.Social.Email }}"><i class="fa fa-envelope"></i></a></li>
     {{ end }}
 
     {{ if .Site.Params.Social.Twitter }}
-	  <a href="http://twitter.com/{{ .Site.Params.Social.Twitter }}"><i class="fa fa-twitter"></i></a>
+      <li><a href="http://twitter.com/{{ .Site.Params.Social.Twitter }}"><i class="fa fa-twitter"></i></a></li>
     {{ end }}
 
     {{ if .Site.Params.Social.LinkedIn }}
-	  <a href="http://linkedin.com/in/{{ .Site.Params.Social.LinkedIn }}"><i class="fa fa-linkedin"></i></a>
+      <li><a href="http://linkedin.com/in/{{ .Site.Params.Social.LinkedIn }}"><i class="fa fa-linkedin"></i></a></li>
     {{ end }}
 
     {{ if .Site.Params.Social.Stackoverflow }}
-	  <a href="http://stackoverflow.com/{{ .Site.Params.Social.Stackoverflow }}"><i class="fa fa-stack-overflow"></i></a>
+      <li><a href="http://stackoverflow.com/{{ .Site.Params.Social.Stackoverflow }}"><i class="fa fa-stack-overflow"></i></a></li>
     {{ end }}
-	</h4>
+  </ul>
 </div>
diff --git a/static/css/main.css b/static/css/main.css
index 890a094..c7c3fee 100755
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -127,12 +127,29 @@ html, body {
   padding-top: -10px;
   text-align: left;
 }
-.social {
-  padding-top: 12px;
-  word-spacing: 25px;
+.social-links {
+  display: block;
+  margin: 0 auto;
+  margin-top: 40px;
+  width: 100%;
+  text-align: center;
+  animation: fade 1s ease 1s both;
+}
+.social-links li {
+  display: inline-block;
+  padding: 5px;
+  padding-top: 0;
+  text-align: center;
+}
+.social-links li a {
+  font-size: 20px;
+  color: #000;
+  padding: 10px;
+  padding-bottom: 4px;
+  transition: all .4s ease;
 }
-.social h4 > a {
-  color: #000000;
+.social-links li a:hover {
+  color: #000;
 }
 .avatar {
   padding-top: 5%;