feat: Add LinkedIn and Medium logos (#453)

* add linkedin and medium icons

* Make Icon set responsive for mobile

_includes/footer.html

@@ -62,13 +62,19 @@ <h4 class="footerHeaderStyle align-center-md"><b>Resources</b></h4>
                     <div class="col-md-6">
                         <div class="row justify-content-center">
                             <div class="row d-flex justify-content-center">
-                                <div id="own-ssk" class="d-flex">
-                                    <a href="https://www.facebook.com/SugarLabs-187845102582/timeline/" class="ion-icon ion-logo-facebook"></a>
-                                    <a href="https://github.com/sugarlabs" class="ion-icon ion-logo-github"></a>
-                                    <a href="https://twitter.com/sugar_labs" class="ion-icon ion-logo-twitter"></a>
-                                    <a rel="me" href="https://mastodon.social/@sugar_labs" class="ion-icon ion-logo-mastodon"></a>
-                                    <a href="https://www.instagram.com/sugarlabsforall/" class="ion-icon ion-logo-instagram" ></a>
-                                    <a href="https://www.youtube.com/channel/UCfsR9AEb7HuPRAc14jfiI6g/featured" class="ion-icon ion-logo-youtube"></a>
+                                <div class="grid-two-columns">
+                                    <div id="own-ssk" class="d-flex">
+                                        <a href="https://www.facebook.com/SugarLabs-187845102582/timeline/" class="ion-icon ion-logo-facebook"></a>
+                                        <a href="https://github.com/sugarlabs" class="ion-icon ion-logo-github"></a>
+                                        <a href="https://twitter.com/sugar_labs" class="ion-icon ion-logo-twitter"></a>
+                                        <a rel="me" href="https://mastodon.social/@sugar_labs" class="ion-icon ion-logo-mastodon"></a>
+                                    </div>
+                                    <div id="own-ssk" class="d-flex">
+                                        <a href="https://www.instagram.com/sugarlabsforall/" class="ion-icon ion-logo-instagram"></a>
+                                        <a href="https://www.youtube.com/channel/UCfsR9AEb7HuPRAc14jfiI6g/featured" class="ion-icon ion-logo-youtube"></a>
+                                        <a href="https://www.linkedin.com/company/sugar-labs" class="ion-icon ion-logo-linkedin"></a>
+                                        <a href="https://medium.com/@sugarlabs" class="ion-icon ion-logo-medium"></a>
+                                    </div>
                                 </div>
                             </div>
                             <br>

css/airspace.css

@@ -931,6 +931,12 @@ footer .footer-manu ul li a:hover {
 #own-ssk{
   margin-left: 5px;
 }
+@media (min-width: 576px) {
+  .grid-two-columns {
+      display: grid;
+      grid-template-columns: 1fr 1fr; /* Two equal-width columns */
+  }
+}
 .listFont{
   font-size: 16px;
 }

css/ion_icon_customization.scss

@@ -43,6 +43,17 @@ $mastodon-color-hover: darken($mastodon-color, $darken-percent);
 $mastodon-background: #3088d4;
 $mastodon-background-hover: darken($mastodon-background, $darken-percent);
 
+// LinkedIn colors
+$linkedin-color: white;
+$linkedin-color-hover: darken($linkedin-color, $darken-percent);
+$linkedin-background: #0077b5;
+$linkedin-background-hover: darken($linkedin-background, $darken-percent);
+
+// Medium colors
+$medium-color: white;
+$medium-color-hover: darken($medium-color, $darken-percent);
+$medium-background: black;
+$medium-background-hover: darken($medium-background, $darken-percent);
 
 .ion-sticky {
   top: 50%;
@@ -75,7 +86,6 @@ $mastodon-background-hover: darken($mastodon-background, $darken-percent);
   }
 
   &.ion-logo- {
-
     &facebook {
       background: $facebook-background;
       text-indent: 3px;
@@ -126,6 +136,7 @@ $mastodon-background-hover: darken($mastodon-background, $darken-percent);
         background: $youtube-background-hover;
       }
     }
+
     &mastodon {
       background: $mastodon-background;
       text-indent: 1px;
@@ -135,6 +146,26 @@ $mastodon-background-hover: darken($mastodon-background, $darken-percent);
         background: $mastodon-background-hover;
       }
     }
+
+    &linkedin {
+      background: $linkedin-background;
+      text-indent: 1px;
+      margin-right: -1px;
+
+      &:hover {
+        background: $linkedin-background-hover;
+      }
+    }
+
+    &medium {
+      background: $medium-background;
+      text-indent: 1.5px;
+      margin-right: -1.5px;
+
+      &:hover {
+        background: $medium-background-hover;
+      }
+    }
   }
 }
 
@@ -143,12 +174,8 @@ $mastodon-background-hover: darken($mastodon-background, $darken-percent);
   margin: 0.5rem;
   display: inline-block;
   border-radius: 50%;
-
 
   &.ion-logo- {
-
-
-
     &facebook {
       color: $facebook-color;
       border: 1px solid $facebook-background;
@@ -224,6 +251,7 @@ $mastodon-background-hover: darken($mastodon-background, $darken-percent);
         color: $youtube-color-hover;
       }
     }
+
     &mastodon {
       color: $mastodon-color;
       border: 1px solid $mastodon-background;
@@ -240,5 +268,35 @@ $mastodon-background-hover: darken($mastodon-background, $darken-percent);
         color: $mastodon-color-hover;
       }
     }
+
+    &linkedin {
+      color: $linkedin-color;
+      border: 1px solid $linkedin-background;
+      background-color: $linkedin-background;
+      font-size: 2rem;
+      height: 3rem;
+      width: 3rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        color: $linkedin-color-hover;
+      }
+    }
+
+    &medium {
+      color: $medium-color;
+      font-size: 3rem;
+      height: 3rem;     
+      width: 3rem;      
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        color: $medium-color-hover;
+      }
+    }
   }
 }