Merge pull request #5 from kleros/change_telegram_button

Change telegram button

Author: n1c01a5

img/Telegram-icon-sq.png

@@ -111,6 +111,9 @@ <h1 class="kleros-title">THE JUSTICE PROTOCOL</h1>
               <div class="hidden-md-down">
                 <a class="btn btn-lg btn-how-it-works" href="#how-it-works">How it works?</a>
                 <a class="btn btn-lg btn-primary btn-wp" href="assets/whitepaper.pdf">Read the white paper</a>
+                <a href="https://t.me/kleros">
+                  <img class="btn-telegram" src="img/Telegram-icon-sq.png" alt="kleros telegram" />
+                </a>
               </div>
               <div class="hidden-lg-up">
                 <div class="row">
@@ -992,12 +995,6 @@ <h2 class="contact-title-section">CONTACT</h2>
       </footer>
     </div>
 
-    <div class="telegram-button">
-      <a href="https://t.me/kleros">
-        <img src="img/telegram_button.png" alt="kleros telegram" />
-      </a>
-    </div>
-
     <!-- jQuery first, then Tether, then Bootstrap JS. -->
     <script
       src="https://code.jquery.com/jquery-3.2.1.min.js"

index.html

@@ -184,6 +184,11 @@ body {
   width: 40px;
 }
 
+.btn-telegram {
+  width: 52px;
+  margin-left: 12px;
+}
+
 @media (max-width: 576px) {
   .kleros-wording {
     padding: 0;
@@ -212,6 +217,12 @@ body {
   }
 }
 
+@media (max-width: 1200px) {
+  .btn-telegram {
+    display: none;
+  }
+}
+
 /**************** End Kleros section ****************/
 
 /**************** Protocol section ****************/
@@ -733,17 +744,3 @@ footer-right a {
 }
 
 /**************** End Footer ****************/
-
-/**************** Telegram ****************/
-
-.telegram-button {
-  position: fixed;
-  bottom: 52px;
-  right: 30px;
-}
-
-.telegram-button img {
-  width: 200px;
-}
-
-/**************** End Telegram ****************/