Add telegram to footer and to social share button

app/assets/stylesheets/layout.scss

@@ -1167,7 +1167,8 @@ table {
 
 .button.button-twitter,
 .button.button-facebook,
-.button.button-google {
+.button.button-google,
+.button.button-telegram {
   background: white;
   color: $text;
   font-weight: bold;
@@ -1303,6 +1304,48 @@ table {
   }
 }
 
+.button.button-telegram {
+  background: #ECF7FC;
+  border-left: 3px solid #45B0E3;
+
+  &:before {
+    color: #45B0E3;
+    content: "t";
+    font-family: "icons" !important;
+    font-size: rem-calc(24);
+    left: 0;
+    line-height: $line-height*2;
+    padding: 0 rem-calc(20);
+    position: absolute;
+    top: 0;
+  }
+}
+
+.ssb-telegram {
+  background: #45B0E3;
+  background-image: none !important;
+  color: white;
+  height: $line-height*2 !important;
+  position: relative;
+  width: $line-height*2 !important;
+
+  &:before {
+    content: "t";
+    font-family: "icons" !important;
+    font-size: rem-calc(24);
+    left: 50%;
+    line-height: $line-height*2;
+    margin-left: rem-calc(-11);
+    position: absolute;
+    top: 0;
+  }
+
+  &:hover, &:focus {
+    background: white;
+    color: #40A2D1;
+  }
+}
+
 .social {
 
   a {
@@ -1394,6 +1437,30 @@ table {
       color: #CE3E26;
     }
   }
+
+  .ssb-telegram {
+    background: #45B0E3;
+    color: white;
+    height: $line-height;
+    position: relative;
+    width: $line-height*2;
+
+    &:before {
+      content: "A";
+      font-family: "icons" !important;
+      font-size: rem-calc(24);
+      left: 50%;
+      line-height: $line-height*2;
+      margin-left: rem-calc(-11);
+      position: absolute;
+      top: 0;
+    }
+
+    &:hover, &:focus {
+      background: white;
+      color: #40A2D1;
+    }
+  }
 }
 
 // 13. Pages

app/assets/stylesheets/participation.scss

@@ -974,6 +974,10 @@
     &.social-share-button-google_plus:hover {
       color: #CE3E26;
     }
+
+    &.social-share-button-telegram:hover {
+      color: #CE3E26;
+    }
   }
 }
 

app/views/layouts/_footer.html.erb

@@ -84,6 +84,14 @@
               <% end %>
             </li>
           <% end %>
+          <% if setting['telegram_handle'] %>
+            <li class="inline-block">
+              <%= link_to "https://www.telegram.me/#{setting['telegram_handle']}", target: "_blank", title: t("social.telegram") + t('shared.target_blank_html') do %>
+                <span class="sr-only"><%= t("social.telegram") %></span>
+                <span class="icon-telegram" aria-hidden="true"></span>
+              <% end %>
+            </li>
+          <% end %>
         </ul>
       </div>
     </div>