global.sass in slow-steps-0.3.0

- old
+ new

@@ -144,11 +144,11 @@
   padding: 1rem 0
   text-align: center
 
 // Block colors and sizes
 .strap--opd-trust
-  @include opd-blue-trust
+  @include opd-light-blue
 
 
 .strap__100
   padding: 5rem 1rem
   & > h2
@@ -254,19 +254,28 @@
 .svg__augment--pulse
   fill: $led
 
 
 // Social icons wraped in <a's
-.social
-  color: $grey
-  text-decoration: none
 
+.social-media
+  display: flex
+  padding: 0
+  margin: 0
+
+.social-media-item
+  list-style: none
+
+.social-media-link
+  @include default-trans
+  color: $white
+
 .yaml--link
   color: inherit
   text-decoration: none
   &:hover
-    color: $opd-blue-trust
+    color: $opd-light-blue
 
 
 @media screen and ( min-width: 768px )
 
   .fullwidth__wrap
@@ -282,29 +291,26 @@
   .narrow__wrap
     width: 80vw
     max-width: 600px
     margin: 0 auto
 
-  .social--Facebook
+  .social-media-item
     &:hover
-      color: $facebook-primary
+      .social--Facebook
+        color: $facebook-primary
 
-  .social--Twitter
-    &:hover
-      color: $twitter-primary
+      .social--Twitter
+        color: $twitter-primary
 
-  .social--LinkedIn
-    &:hover
-      color: $linkedin-primary
+      .social--LinkedIn
+        color: $linkedin-primary
 
-  .social--Instagram
-    &:hover
-      color: $instagram-primary
+      .social--Instagram
+        color: $instagram-primary
 
-  .social--Website,
-  .social--Email
-    &:hover
-      color: $opd-blue-trust
+      .social--Website,
+      .social--Email
+        color: $opd-light-blue
 
 
 // This is basically a button and should to be centralised
 .action__call
   bottom: 0