Add fontawesome and links to sidebar

css/sidebar.scss

@@ -0,0 +1,208 @@
+---
+---
+@import 'util';
+@import 'colors';
+@import 'fonts';
+
+$flag-shadow: rgba(black, 0.2);
+$animate-time: 0.03s;
+
+#sidebar {
+    display: block;
+    flex-shrink: 0;
+    width: 180px;
+    margin: 0;
+    padding: {
+        top: 5px;
+        bottom: 5px;
+        left: 0px;
+    }
+}
+
+#navFlags {
+    display: block;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    list-style-type: none;
+    line-height: 0;
+
+    margin: 0;
+    padding: {
+        left: 0px;
+    }
+}
+
+#navLinks {
+    padding: {
+        left: 10px;
+    }
+
+    color: $subtle;
+    font-family: $sidebar-font;
+
+    a{
+        color: $sidebar-link-text;
+        text-decoration: none;
+        @include prefix-group((
+            transition-duration: $animate-time,
+            transition-property: color,
+        ), webkit moz o);
+
+    }
+
+    a:hover{
+        color: $sidebar-link-hover;
+        text-decoration: underline;
+    }
+}
+
+.flagButton, .flagButton::after, .flagPoint, .flagPoint::after {
+    @include prefix-group((
+        transition-duration: $animate-time,
+        transition-timing-function: ease-out
+    ), webkit moz o);
+}
+
+.flag {
+    display: inline-block;
+    position: relative;
+    left: -3px;
+
+    text-align: center;
+    z-index: 1;
+
+    padding: {
+        top: 5px;
+        bottom: 5px;
+        left: 0px;
+    }
+    
+    .flagButton {
+        display: block;
+        float: left;
+
+        height: 50px;
+        width: 160px;
+
+        border-radius: 0 5px 5px 0;
+
+        @include prefix(transition-property, width, webkit moz o);
+        @include prefix(transition-property, border-radius, webkit moz o);
+
+        .flagText {
+            font: {
+                family: $sidebar-font;
+                size: 20px;
+                weight: 600;
+            }
+            position: absolute;
+
+            line-height: normal;
+            text-align: center;
+
+            width: 160px;
+            right:0;
+            top:15px;
+
+            color: $sidebar-text;
+        }
+    }
+
+    .flagButton::after{
+        z-index: -1;
+        content: " ";
+        display: block;
+        position: relative;
+        left: 3px;
+        top: 4px;
+
+        height: 50px;
+        width: 160px;
+        background-color: $flag-shadow;
+        border-radius: 0 5px 5px 0;
+
+        @include prefix(transition-property, width, webkit moz o);
+        @include prefix(transition-property, border-radius, webkit moz o);
+    }
+
+    .flagPoint{
+        position: absolute;
+        width: 0; 
+        height: 0;
+        left: 160px;
+        border-top: 25px solid transparent; 
+        border-bottom: 25px solid transparent;
+        border-left-width: 0px; 
+        border-left-style: solid;
+        background-color: transparent;
+
+        @include prefix(transition-property, left, webkit moz o);
+        @include prefix(transition-property, border-left-width, webkit moz o);
+    }
+
+    .flagPoint.blue {
+        border-left-color: $blue;
+    }
+    
+    .flagPoint.orange {
+        border-left-color: $orange;
+    }
+    
+    .flagPoint.green {
+        border-left-color: $green;
+    }
+    
+    .flagPoint.magenta {
+        border-left-color: $magenta;
+    }
+
+    .flagPoint::after{
+        position: absolute;
+        width: 0; 
+        height: 0;
+        border-top: 25px solid transparent; 
+        border-bottom: 25px solid transparent;
+        border-left: 0px solid $flag-shadow; 
+        z-index: -1;
+        content: " ";
+        left: -20 + 3px;
+        top: -25 + 4px;
+
+        @include prefix(transition-property, border-left-width, webkit moz o);
+    }
+
+    .flagFold{
+        display: block;
+        position: absolute;
+        z-index: -100;
+        left:0px;
+        top:55px;
+        width: 3px;
+        height: 3px;
+        mask-image: url('../svg/fold.svg');
+    }
+
+}
+
+.flag:hover {
+
+    .flagButton {
+        width: 170px;
+        border-radius: 0;
+    }
+
+    .flagButton::after{
+        width: 170px;
+        border-radius: 0;
+    }
+
+    .flagPoint {
+        left: 170px;
+        border-left-width: 20px;
+    }
+    .flagPoint::after{
+        border-left-width: 20px;
+    }
+}
+
+ 

css/style.scss

@@ -1,23 +1,49 @@
 ---
 ---
+@import 'util';
 @import 'colors';
-@import 'sidebar';
 @import 'fonts';
 
 
-/// Mixin to prefix a property
-/// @author Hugo Giraudel
-/// @param {String} $property - Property name
-/// @param {*} $value - Property value
-/// @param {List} $prefixes (()) - List of prefixes to print
-@mixin prefix($property, $value, $prefixes: ()) {
-    @each $prefix in $prefixes {
-      #{'-' + $prefix + '-' + $property}: $value;
-    }
-   
-    // Output standard non-prefixed declaration
-    #{$property}: $value;
-  }
+.blue {
+    fill: $blue;
+    background-color: $blue;
+}
+
+.orange {
+    fill: $orange;
+    background-color: $orange;
+}
+
+.green {
+    fill: $green;
+    background-color: $green;
+}
+
+.magenta {
+    fill: $magenta;
+    background-color: $magenta;
+}
+
+.dark-blue {
+    fill: $dark-blue;
+    background-color: $dark-blue;
+}
+
+.dark-orange {
+    fill: $dark-orange;
+    background-color: $dark-orange;
+}
+
+.dark-green {
+    fill: $dark-green;
+    background-color: $dark-green;
+}
+
+.dark-magenta {
+    fill: $dark-magenta;
+    background-color: $dark-magenta;
+}
 
 
 ::selection {