Icons in footer

6 files changed, 109 insertions, 17 deletions

diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
index 36e276f9..2e88c1ad 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
@@ -84,24 +84,26 @@
                 <div class="col l6 s12">
                     <h5 class="white-text">{% trans %}Take wallabag with you{% endtrans %}</h5>
                     <p class="grey-text text-lighten-4">
-                        {% trans %}We are available at{% endtrans %}
-                        <a target="_blank" class="grey-text text-lighten-3" href="https://play.google.com/store/apps/details?id=fr.gaulupeau.apps.InThePoche">android</a> (<a target="_blank" class="grey-text text-lighten-3" href="https://f-droid.org/repository/browse/?fdid=fr.gaulupeau.apps.InThePoche">f-droid</a>)
-                        {% trans %}and{% endtrans %}
-                        <a target="_blank" class="grey-text text-lighten-3" href="https://itunes.apple.com/app/id828331015">iOS</a>.<br>
-                        {% trans %}Install add-ons for{% endtrans %}
-                        <a target="_blank" class="grey-text text-lighten-3" href="https://addons.mozilla.org/ru/firefox/addon/wallabag/">firefox</a>
-                        {% trans %}and{% endtrans %}
-                        <a target="_blank" class="grey-text text-lighten-3" href="https://chrome.google.com/webstore/detail/wallabagit/peehlcgckcnclnjlndmoddifcicdnabm">chrome</a>.
+
+                        <a target="_blank" class="grey-text text-lighten-3" href="https://play.google.com/store/apps/details?id=fr.gaulupeau.apps.InThePoche" title="android"><span class="icon-android"></span></a>
+
+                        <a target="_blank" class="grey-text text-lighten-3" href="https://itunes.apple.com/app/id828331015" title="iOS"><span class="icon-apple"></a>
+
+                        <a target="_blank" class="grey-text text-lighten-3" href="https://addons.mozilla.org/ru/firefox/addon/wallabag/" title="Firefox"><span class="icon-firefox"></span></a>
+
+                        <a target="_blank" class="grey-text text-lighten-3" href="https://chrome.google.com/webstore/detail/wallabagit/peehlcgckcnclnjlndmoddifcicdnabm" title="Chrome"><span class="icon-chrome"></a>
+
                     </p>
                 </div>
                 <div class="col l4 offset-l2 s12">
                     <h5 class="white-text">{% trans %}Social{% endtrans %}</h5>
-                    <ul>
-                        <li><a target="_blank" class="grey-text text-lighten-3" href="https://twitter.com/wallabagapp">twitter</a></li>
-                        <li><a target="_blank" class="grey-text text-lighten-3" href="https://framasphere.org/u/wallabag">diaspora*</a></li>
-                        <li><a target="_blank" class="grey-text text-lighten-3" href="https://plus.google.com/+WallabagOrg/posts">Google+</a></li>
-                        <li><a target="_blank" class="grey-text text-lighten-3" href="https://facebook.com/Wallabag">Facebook</a></li>
-                    </ul>
+
+                    <a target="_blank" class="grey-text text-lighten-3" href="https://twitter.com/wallabagapp" title="Twitter"><span class="icon-twitter"></span></a>
+
+                    <a target="_blank" class="grey-text text-lighten-3" href="https://plus.google.com/+WallabagOrg/posts" title="Google+"><span class="icon-google-plus2"></span></a>
+
+                    <a target="_blank" class="grey-text text-lighten-3" href="https://facebook.com/Wallabag" title="Facebook"><span class="icon-facebook2"></span></a>
+
                 </div>
             </div>
         </div>
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
index 1fe4a533..b3bd07e7 100755
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
@@ -8,7 +8,8 @@
    4 = Cards
    5 = Article
    6 = Media queries
-   7 = Others
+   7 = Font
+   8 = Others
 
    ========================================================================== */
 
@@ -17,6 +18,31 @@
    0 = Common
    ========================================================================== */
 
+@font-face {
+    font-family: 'icomoon';
+    src:url('../font/icomoon/icomoon.eot?yw303w');
+    src:url('../font/icomoon/icomoon.eot?yw303w#iefix') format('embedded-opentype'),
+        url('../font/icomoon/icomoon.ttf?yw303w') format('truetype'),
+        url('../font/icomoon/icomoon.woff?yw303w') format('woff'),
+        url('../font/icomoon/icomoon.svg?yw303w#icomoon') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+    font-family: 'icomoon';
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
 body {
     display: flex;
     min-height: 100vh;
@@ -86,6 +112,15 @@ nav, main, footer {
     display: none;
 }
 
+footer.page-footer {
+    margin-top: 10px;
+    padding-top: 10px;
+}
+
+footer .row {
+    margin-bottom: 10px;
+}
+
 /* ==========================================================================
    1 = Nav
    ========================================================================== */
@@ -409,11 +444,49 @@ main ul.row {
         display: none;
     }
 }
+
+/* ==========================================================================
+   7 = Font
+   ========================================================================== */
+
+.icon-google-plus2:before {
+    content: "\e800";
+}
+.icon-facebook2:before {
+    content: "\e801";
+}
+.icon-twitter:before {
+    content: "\e802";
+}
+.icon-apple:before {
+    content: "\e803";
+}
+.icon-android:before {
+    content: "\e804";
+}
+.icon-chrome:before {
+    content: "\e805";
+}
+.icon-firefox:before {
+    content: "\e806";
+}
+
+footer [class^="icon-"], footer [class*=" icon-"] {
+    font-size: 2em;
+    transition: text-shadow 0.2s ease;
+    padding-right: 10px;
+}
+
+footer [class^="icon-"]:hover, footer [class*=" icon-"]:hover {
+    text-shadow: 0 0 10px rgba(0,0,0,0.3);
+}
+
+
 /* ==========================================================================
-   7 = Others
+   8 = Others
    ========================================================================== */
 
 /* force height on non-input field in the settings page */
 div.settings div.input-field div, div.settings div.input-field ul {
     margin-top: 40px;
-}
+}
\ No newline at end of file
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/font/icomoon/icomoon.eot b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/font/icomoon/icomoon.eot
new file mode 100644
index 00000000..7318414e
--- /dev/null
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/font/icomoon/icomoon.eot
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/font/icomoon/icomoon.svg b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/font/icomoon/icomoon.svg
new file mode 100644
index 00000000..365c0c42
--- /dev/null
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/font/icomoon/icomoon.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe800;" glyph-name="google-plus2" d="M0.806 90.336c-0.244 2.532-0.452 5.070-0.584 7.63 0.13-2.56 0.34-5.098 0.584-7.63zM235.908 394.852c92.010-2.738 153.734 92.698 137.862 213.198-15.894 120.48-103.396 217.168-195.408 219.922-92.026 2.73-153.74-89.482-137.852-210 15.882-120.468 103.352-220.374 195.398-223.12zM1024 704v85.31c0 93.88-76.782 170.69-170.658 170.69h-682.656c-92.276 0-168.012-74.232-170.564-165.926 58.362 51.386 139.324 94.316 222.874 94.316 89.304 0 357.244 0 357.244 0l-79.948-67.618h-113.268c75.13-28.804 115.156-116.124 115.156-205.722 0-75.248-41.81-139.954-100.888-185.968-57.644-44.902-68.572-63.708-68.572-101.878 0-32.578 61.746-88 94.032-110.788 94.382-66.538 124.916-128.312 124.916-231.456 0-16.428-2.042-32.83-6.066-48.96h307.742c93.874 0 170.656 76.75 170.656 170.69v533.308h-192v-191.998h-64v192h-191.998v64h191.998v192h64v-192h192zM185.886 194.064c21.614 0 41.422 0.59 61.936 0.59-27.146 26.334-48.626 58.6-48.626 98.38 0 23.608 7.564 46.336 18.134 66.52-10.782-0.77-21.79-0.994-33.126-0.994-74.356 0-137.506 24.076-184.204 63.854v-67.242l0.006-201.73c53.44 25.374 116.888 40.622 185.88 40.622zM3.42 72.742c-1.112 5.458-1.966 11.006-2.542 16.634 0.574-5.628 1.43-11.176 2.542-16.634zM455.45 7.154c-15.058 58.806-68.454 87.964-142.888 139.568-27.072 8.732-56.894 13.874-88.894 14.208-89.618 0.964-173.108-34.942-220.216-88.372 15.92-77.706 85.034-136.558 167.234-136.558h286.444c1.816 11.128 2.696 22.632 2.696 34.432 0 12.534-1.534 24.792-4.376 36.722z" />
+<glyph unicode="&#xe801;" glyph-name="facebook2" d="M853.35 960h-682.702c-94.25 0-170.648-76.42-170.648-170.686v-682.63c0-94.266 76.398-170.684 170.648-170.684h341.352v448h-128v128h128v96c0 88.366 71.634 160 160 160h160v-128h-160c-17.674 0-32-14.328-32-32v-96h176l-32-128h-144v-448h213.35c94.25 0 170.65 76.418 170.65 170.684v682.63c0 94.266-76.4 170.686-170.65 170.686z" />
+<glyph unicode="&#xe802;" glyph-name="twitter" d="M1024 765.582c-37.676-16.708-78.164-28.002-120.66-33.080 43.372 26 76.686 67.17 92.372 116.23-40.596-24.078-85.556-41.56-133.41-50.98-38.32 40.83-92.922 66.34-153.346 66.34-116.022 0-210.088-94.058-210.088-210.078 0-16.466 1.858-32.5 5.44-47.878-174.6 8.764-329.402 92.4-433.018 219.506-18.084-31.028-28.446-67.116-28.446-105.618 0-72.888 37.088-137.192 93.46-174.866-34.438 1.092-66.832 10.542-95.154 26.278-0.020-0.876-0.020-1.756-0.020-2.642 0-101.788 72.418-186.696 168.522-206-17.626-4.8-36.188-7.372-55.348-7.372-13.538 0-26.698 1.32-39.528 3.772 26.736-83.46 104.32-144.206 196.252-145.896-71.9-56.35-162.486-89.934-260.916-89.934-16.958 0-33.68 0.994-50.116 2.94 92.972-59.61 203.402-94.394 322.042-94.394 386.422 0 597.736 320.124 597.736 597.744 0 9.108-0.206 18.168-0.61 27.18 41.056 29.62 76.672 66.62 104.836 108.748z" />
+<glyph unicode="&#xe803;" glyph-name="apple" d="M791.498 415.908c-1.294 129.682 105.758 191.876 110.542 194.966-60.152 88.020-153.85 100.078-187.242 101.472-79.742 8.074-155.596-46.948-196.066-46.948-40.368 0-102.818 45.754-168.952 44.552-86.916-1.292-167.058-50.538-211.812-128.38-90.304-156.698-23.126-388.84 64.89-515.926 43.008-62.204 94.292-132.076 161.626-129.58 64.842 2.588 89.362 41.958 167.756 41.958s100.428-41.958 169.050-40.67c69.774 1.296 113.982 63.398 156.692 125.796 49.39 72.168 69.726 142.038 70.924 145.626-1.548 0.706-136.060 52.236-137.408 207.134zM662.562 796.478c35.738 43.358 59.86 103.512 53.28 163.522-51.478-2.096-113.878-34.29-150.81-77.55-33.142-38.376-62.148-99.626-54.374-158.436 57.466-4.484 116.128 29.204 151.904 72.464z" />
+<glyph unicode="&#xe804;" glyph-name="android" d="M896 576c-35.2 0-64-28.8-64-64v-256c0-35.2 28.8-64 64-64s64 28.8 64 64v256c0 35.2-28.8 64-64 64zM128 576c-35.2 0-64-28.8-64-64v-256c0-35.2 28.8-64 64-64s64 28.8 64 64v256c0 35.2-28.802 64-64 64zM224 224c0-53.020 42.98-96 96-96v0-128c0-35.2 28.8-64 64-64s64 28.8 64 64v128h128v-128c0-35.2 28.8-64 64-64s64 28.8 64 64v128c53.020 0 96 42.98 96 96v352h-576v-352zM798.216 639.998c-9.716 87.884-59.004 163.792-129.62 209.646l32.024 64.046c7.904 15.806 1.496 35.028-14.31 42.932s-35.030 1.496-42.932-14.312l-32.142-64.286-8.35 3.316c-28.568 9.502-59.122 14.66-90.886 14.66-31.762 0-62.316-5.158-90.888-14.656l-8.348-3.316-32.142 64.282c-7.904 15.808-27.128 22.212-42.932 14.312-15.808-7.904-22.214-27.126-14.312-42.932l32.022-64.046c-70.616-45.852-119.904-121.762-129.622-209.644v-32h574.222v31.998h-1.784zM416 704c-17.674 0-32 14.328-32 32 0 17.648 14.288 31.958 31.93 31.996 0.032 0 0.062-0.002 0.094-0.002 0.018 0 0.036 0.002 0.052 0.002 17.638-0.042 31.924-14.35 31.924-31.996 0-17.672-14.326-32-32-32zM608 704c-17.674 0-32 14.328-32 32 0 17.646 14.286 31.954 31.924 31.996 0.016 0 0.034-0.002 0.050-0.002 0.032 0 0.064 0.002 0.096 0.002 17.64-0.038 31.93-14.348 31.93-31.996 0-17.672-14.326-32-32-32z" />
+<glyph unicode="&#xe805;" glyph-name="chrome" d="M258.278 513.458l-146.532 253.802c93.818 117.464 238.234 192.74 400.254 192.74 187.432 0 351.31-100.736 440.532-251h-417.77c-7.504 0.65-15.092 1-22.762 1-121.874 0-224.578-83.644-253.722-196.542zM695.306 635h293.46c22.74-57.93 35.234-121.004 35.234-187 0-280.826-226.1-508.804-506.186-511.926l209.394 362.678c29.48 42.378 46.792 93.826 46.792 149.248 0 73.17-30.164 139.42-78.694 187zM326 448c0 102.56 83.44 186 186 186s186-83.44 186-186c0-102.56-83.44-186-186-186s-186 83.44-186 186zM582.182 195.558l-146.578-253.878c-246.532 36.884-435.604 249.516-435.604 506.32 0 91.218 23.884 176.846 65.696 251.024l209.030-362.054c41.868-89.112 132.476-150.97 237.274-150.97 24.3 0 47.836 3.34 70.182 9.558z" />
+<glyph unicode="&#xe806;" glyph-name="firefox" d="M1022.526 625.86l-11.86-76.080c0 0-16.954 140.856-37.732 193.514-31.846 80.688-46.014 80.040-46.108 79.922 21.33-54.204 17.462-83.324 17.462-83.324s-37.792 102.998-137.712 135.768c-110.686 36.282-170.57 26.364-177.488 24.486-1.050 0.008-2.064 0.010-3.030 0.010 0.818-0.062 1.612-0.146 2.426-0.212-0.034-0.020-0.090-0.042-0.082-0.052 0.45-0.548 122.306-21.302 143.916-50.996 0 0-51.76 0-103.272-14.842-2.328-0.666 189.524-23.964 228.746-215.674 0 0-21.030 43.876-47.040 51.328 17.106-52.036 12.714-150.776-3.576-199.85-2.096-6.312-4.24 27.282-36.328 41.75 10.28-73.646-0.616-190.456-51.708-222.632-3.982-2.504 32.030 115.31 7.242 69.762-142.708-218.802-311.404-100.972-387.248-49.11 38.866-8.462 112.654 1.318 145.314 25.612 0.042 0.030 0.078 0.056 0.118 0.086 35.468 24.252 56.472 41.964 75.334 37.772 18.874-4.214 31.438 14.726 16.78 31.53-14.676 16.838-50.314 39.978-98.524 27.366-34-8.904-76.134-46.522-140.448-8.432-49.364 29.25-54.012 53.546-54.45 70.376 1.218 5.966 2.754 11.536 4.576 16.624 5.682 15.87 22.912 20.658 32.494 24.438 16.256-2.792 30.262-7.862 44.968-15.406 0.19 4.894 0.252 11.39-0.018 18.76 1.41 2.802 0.538 11.252-1.722 21.58-1.302 10.308-3.42 20.974-6.752 30.692 0.012 0.002 0.020 0.010 0.030 0.014 0.056 0.018 0.108 0.040 0.156 0.070 0.078 0.044 0.146 0.112 0.208 0.19 0.012 0.020 0.030 0.034 0.044 0.052 0.082 0.124 0.154 0.272 0.198 0.466 1.020 4.618 12.022 13.524 25.718 23.1 12.272 8.58 26.702 17.696 38.068 24.752 10.060 6.248 17.72 10.882 19.346 12.098 0.618 0.466 1.358 1.012 2.164 1.636 0.15 0.116 0.3 0.232 0.454 0.354 0.094 0.074 0.19 0.148 0.286 0.226 5.41 4.308 13.484 12.448 15.178 29.578 0.004 0.042 0.010 0.080 0.012 0.122 0.050 0.504 0.092 1.014 0.13 1.534 0.028 0.362 0.050 0.726 0.072 1.096 0.014 0.284 0.032 0.566 0.044 0.856 0.030 0.674 0.050 1.364 0.060 2.064 0 0.040 0.002 0.076 0.004 0.116 0.022 1.658-0.006 3.386-0.104 5.202-0.054 1.014-0.126 1.93-0.298 2.762-0.008 0.044-0.018 0.092-0.028 0.136-0.018 0.082-0.036 0.164-0.058 0.244-0.036 0.146-0.076 0.292-0.122 0.43-0.006 0.018-0.010 0.032-0.016 0.046-0.052 0.16-0.112 0.314-0.174 0.464-0.004 0.006-0.004 0.010-0.006 0.016-1.754 4.108-8.32 5.658-35.442 6.118-0.026 0.002-0.050 0.002-0.076 0.002v0c-11.066 0.188-25.538 0.194-44.502 0.118-33.25-0.134-51.628 32.504-57.494 45.132 8.040 44.46 31.276 76.142 69.45 97.626 0.722 0.406 0.58 0.742-0.274 0.978 7.464 4.514-90.246 0.124-135.186-57.036-39.888 9.914-74.654 9.246-104.616 2.214-5.754 0.162-12.924 0.88-21.434 2.652-19.924 18.056-48.448 51.402-49.976 91.208 0 0-0.092-0.072-0.252-0.204-0.020 0.382-0.056 0.76-0.072 1.142 0 0-60.716-46.664-51.628-173.882-0.022-2.036-0.064-3.986-0.12-5.874-16.432-22.288-24.586-41.020-25.192-45.156-14.56-29.644-29.334-74.254-41.356-141.98 0 0 8.408 26.666 25.284 56.866-12.412-38.022-22.164-97.156-16.436-185.856 0 0 1.514 19.666 6.874 47.994 4.186-55.010 22.518-122.924 68.858-202.788 88.948-153.32 225.67-230.74 376.792-242.616 26.836-2.212 54.050-2.264 81.424-0.186 2.516 0.178 5.032 0.364 7.55 0.574 30.964 2.174 62.134 6.852 93.238 14.366 425.172 102.798 378.942 616.198 378.942 616.198z" />
+</font></defs></svg>
\ No newline at end of file
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/font/icomoon/icomoon.ttf b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/font/icomoon/icomoon.ttf
new file mode 100644
index 00000000..fff65bca
--- /dev/null
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/font/icomoon/icomoon.ttf
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/font/icomoon/icomoon.woff b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/font/icomoon/icomoon.woff
new file mode 100644
index 00000000..f3fe2a46
--- /dev/null
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/font/icomoon/icomoon.woff