Fix social buttons

src/index.html

@@ -248,25 +248,28 @@
         <div class="row justify-content-center">
             <div class="social__content col-10">
                 <div class="social__github">
-                    <button class="rect-button rect-button--github rect-button--fixed-width">
+                    <a href="https://github.com/bartlomiej-pluta/forkio" target="_blank"
+                       class="rect-button rect-button--github rect-button--fixed-width">
                         <span class="rect-button__icon fab fa-github"></span>
                         GitHub
-                    </button>
+                    </a>
-                    <p class="social__stats">7 352 Followers</p>
+                    <p id="github-watchers" class="social__stats"></p>
                 </div>
                 <div class="social__twitter">
-                    <button class="rect-button rect-button--twitter rect-button--fixed-width">
+                    <a href="https://twitter.com/pgssoftware" target="_blank"
+                       class="rect-button rect-button--twitter rect-button--fixed-width">
                         <span class="rect-button__icon fab fa-twitter"></span>
                         Twitter
-                    </button>
+                    </a>
-                    <p class="social__stats">136 312 Followers</p>
+                    <p class="social__stats"></p>
                 </div>
                 <div class="social__facebook">
-                    <button class="rect-button rect-button--facebook rect-button--fixed-width">
+                    <a href="https://www.facebook.com/pgs.software" target="_blank"
+                       class="rect-button rect-button--facebook rect-button--fixed-width">
                         <span class="rect-button__icon fab fa-facebook-f"></span>
                         Facebook
-                    </button>
+                    </a>
-                    <p class="social__stats">218 092 Subscribers</p>
+                    <p class="social__stats"></p>
                 </div>
             </div>
         </div>

src/js/script.js

@@ -26,3 +26,16 @@
     $('#navbarNavDropdown').collapse('hide');
   });
 })(jQuery);
+
+(function ($) {
+  "use strict";
+
+  const p = $('#github-watchers');
+  $.get({
+    //url: 'https://api.github.com/repos/bartlomiej-pluta/forkio',
+    url: 'https://localhost',
+    success: function(data) {
+      p.text((data ? data.watchers_count : 'No') + ' Watchers');
+    },
+  });
+})(jQuery);

src/scss/_buttons.scss

@@ -49,10 +49,24 @@
   text-align: left;
   line-height: 30px;
 
+  @media all and (max-width: $desktop) {
+    font-size: 18px;
+  }
+
+  @media all and (max-width: $tablet) {
+    padding: 10px 15px;
+    font-size: 15px;
+  }
+
+  @media all and (max-width: $phone) {
+    font-size: 15px;
+  }
+
   &:hover {
     background-color: lighten($primary, $hover-threshold);
     cursor: pointer;
     transition: $hover-duration;
+    text-decoration: none;
   }
 
   &--github {
@@ -61,6 +75,7 @@
 
     &:hover {
       background-color: darken($github-color, $hover-threshold);
+      color: black;
     }
   }
 
@@ -70,6 +85,7 @@
 
     &:hover {
       background-color: lighten($twitter-color, $hover-threshold);
+      color: white;
     }
   }
 
@@ -79,11 +95,24 @@
 
     &:hover {
       background-color: lighten($facebook-color, $hover-threshold);
+      color: white;
     }
   }
 
   &--fixed-width {
     width: 240px;
+
+    @media all and (max-width: $desktop) {
+      width: 180px;
+    }
+
+    @media all and (max-width: $tablet) {
+      width: 130px;
+    }
+
+    @media all and (max-width: $phone) {
+      width: 180px;
+    }
   }
 
   &--small {
@@ -103,4 +132,16 @@
 
 .rect-button__icon {
   margin-right: 35px;
+
+  @media all and (max-width: $desktop) {
+    margin-right: 15px;
+  }
+
+  @media all and (max-width: $tablet) {
+    margin-right: 10px;
+  }
+
+  @media all and (max-width: $phone) {
+    margin-right: 35px;
+  }
 }

src/scss/_social.scss

@@ -5,7 +5,7 @@
   display: flex;
   justify-content: space-between;
 
-  @media all and (max-width: $desktop) {
+  @media all and (max-width: $phone) {
     flex-direction: column;
   }
 }