feat(footer_sns): turn svg to base64 and save into style.css

Merge pull request #319 from viosey/feat/footer
iblh · Apr 25, 2017 · a99d713 · a99d713
2 parents e69092b + 68bb28b
commit a99d713
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 458 deletions.
diff --git a/_config.template.yml b/_config.template.yml
@@ -68,7 +68,6 @@ img:
     avatar: "/img/avatar.png"
     daily_pic: "/img/daily_pic.png"
     sidebar_header: "/img/sidebar_header.png"
-    footerico: "/img/footer/footer_ico-"
     random_thumbnail: "/img/random/material-"
     footer_image:
         #upyun_logo:

diff --git a/layout/_partial/footer-left.ejs b/layout/_partial/footer-left.ejs
@@ -2,7 +2,7 @@
     <!-- Twitter -->
     <% if(theme.sns.twitter) { %>
         <a href="<%= theme.sns.twitter %>" target="_blank">
-            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(<%= theme.img.footerico %>twitter.svg);">
+            <button class="mdl-mini-footer--social-btn social-btn footer-sns-twitter">
                 <span class="visuallyhidden">Twitter</span>
             </button><!--
      --></a>
@@ -11,7 +11,7 @@
     <!-- Facebook -->
     <% if(theme.sns.facebook) { %>
         <a href="<%= theme.sns.facebook %>" target="_blank">
-            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(<%= theme.img.footerico %>facebook.svg);">
+            <button class="mdl-mini-footer--social-btn social-btn footer-sns-facebook">
                 <span class="visuallyhidden">Facebook</span>
             </button><!--
      --></a>
@@ -20,7 +20,7 @@
     <!-- Google + -->
     <% if(theme.sns.googleplus) { %>
         <a href="<%= theme.sns.googleplus %>" target="_blank">
-            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(<%= theme.img.footerico %>gplus.svg);">
+            <button class="mdl-mini-footer--social-btn social-btn footer-sns-gplus">
                 <span class="visuallyhidden">Google Plus</span>
             </button><!--
      --></a>
@@ -29,7 +29,7 @@
     <!-- Weibo -->
     <% if(theme.sns.weibo) { %>
         <a href="<%= theme.sns.weibo %>" target="_blank">
-            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(<%= theme.img.footerico %>weibo.svg);">
+            <button class="mdl-mini-footer--social-btn social-btn footer-sns-weibo">
                 <span class="visuallyhidden">Weibo</span>
             </button><!--
      --></a>
@@ -38,7 +38,7 @@
     <!-- Instagram -->
     <% if(theme.sns.instagram) { %>
         <a href="<%= theme.sns.instagram %>" target="_blank">
-            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(<%= theme.img.footerico %>instagram.svg);">
+            <button class="mdl-mini-footer--social-btn social-btn footer-sns-instagram">
                 <span class="visuallyhidden">Instagram</span>
             </button><!--
      --></a>
@@ -47,7 +47,7 @@
     <!-- Tumblr -->
     <% if(theme.sns.tumblr) { %>
         <a href="<%= theme.sns.tumblr %>" target="_blank">
-            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(<%= theme.img.footerico %>tumblr.svg);">
+            <button class="mdl-mini-footer--social-btn social-btn footer-sns-tumblr">
                 <span class="visuallyhidden">Tumblr</span>
             </button><!--
      --></a>
@@ -56,7 +56,7 @@
     <!-- Github -->
     <% if(theme.sns.github) { %>
         <a href="<%= theme.sns.github %>" target="_blank">
-            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(<%= theme.img.footerico %>github.svg);">
+            <button class="mdl-mini-footer--social-btn social-btn footer-sns-github">
                 <span class="visuallyhidden">Github</span>
             </button><!--
      --></a>
@@ -65,7 +65,7 @@
     <!-- LinkedIn -->
     <% if(theme.sns.linkedin) { %>
         <a href="<%= theme.sns.linkedin %>" target="_blank">
-            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(<%= theme.img.footerico %>linkedin.svg);">
+            <button class="mdl-mini-footer--social-btn social-btn footer-sns-linkedin">
                 <span class="visuallyhidden">LinkedIn</span>
             </button><!--
      --></a>
@@ -74,7 +74,7 @@
     <!-- Zhihu -->
     <% if(theme.sns.zhihu) { %>
         <a href="<%= theme.sns.zhihu %>" target="_blank">
-            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(<%= theme.img.footerico %>zhihu.svg);">
+            <button class="mdl-mini-footer--social-btn social-btn footer-sns-zhihu">
                 <span class="visuallyhidden">Zhihu</span>
             </button><!--
      --></a>
@@ -83,7 +83,7 @@
     <!-- Bilibili -->
     <% if(theme.sns.bilibili) { %>
         <a href="<%= theme.sns.bilibili %>" target="_blank">
-            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(<%= theme.img.footerico %>bilibili.svg);">
+            <button class="mdl-mini-footer--social-btn social-btn footer-sns-bilibili">
                 <span class="visuallyhidden">Bilibili</span>
             </button><!--
      --></a>
@@ -92,7 +92,7 @@
     <!-- Telegram -->
     <% if(theme.sns.telegram) { %>
         <a href="<%= theme.sns.telegram %>" target="_blank">
-            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(<%= theme.img.footerico %>telegram.svg);">
+            <button class="mdl-mini-footer--social-btn social-btn footer-sns-telegram">
                 <span class="visuallyhidden">Telegram</span>
             </button><!--
      --></a>