WEB: Add Telegram to follow us and footer (#47531)

Author: datapythonista

web/pandas/_templates/layout.html

@@ -69,6 +69,11 @@
         </main>
         <footer class="container pt-4 pt-md-5 border-top">
             <ul class="list-inline social-buttons float-end">
+                <li class="list-inline-item">
+                    <a href="https://t.me/s/pandas_dev">
+                        <i class="fab fa-telegram"></i>
+                    </a>
+                </li>
                 <li class="list-inline-item">
                     <a href="https://twitter.com/pandas_dev/">
                         <i class="fab fa-twitter"></i>

web/pandas/index.html

@@ -72,9 +72,19 @@ <h4>Latest version: {{ releases[0].name }}</h4>
                 {% endif %}
                 <h4>Follow us</h4>
                 <div class="text-center">
-                    <p>
-                        <a href="https://twitter.com/pandas_dev?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @pandas_dev</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
-                    </p>
+                    <ul class="list-inline social-buttons">
+                        <li class="list-inline-item">
+                            <a href="https://t.me/s/pandas_dev">
+                                <i class="follow-us-button fab fa-telegram"></i>
+                            </a>
+                        </li>
+                        <li class="list-inline-item">
+                            <a href="https://twitter.com/pandas_dev/">
+                                <i class="follow-us-button fab fa-twitter"></i>
+                            </a>
+                        </li>
+                    </ul>
+
                 </div>
 				<h4>Get the book</h4>
 				<p class="book">

web/pandas/static/css/pandas.css

@@ -32,6 +32,13 @@ ol ol, ol ul, ul ol, ul ul {
 .pink {
     color: #e70488;
 }
+.follow-us-button {
+    font-size: 2.4rem !important;
+    color: #0d6efd !important;
+}
+.follow-us-button:hover {
+    color: #0b5ed7 !important;
+}
 .fab {
     font-size: 1.2rem;
     color: #666;