modularize css and make flags even moar fancy

_includes/flag.html

@@ -4,5 +4,6 @@
             <span class="flagText">{{include.name}}</span>
         </span>
         <span class="{{include.color}} flagPoint"></span>
+        <span class="{{include.color}} flagFold"></span>
     </a>
 </li>

_sass/_colors.scss

@@ -0,0 +1,29 @@
+$background: #2B2A27;
+$foreground: #EDE0CE;
+$margin: darken($background, 8%);
+$shadow: rgba(black, 0.4);
+
+$blue: rgb(39, 167, 167);
+$orange: rgb(236, 103, 55);
+$green: rgb(188, 212, 42);
+$magenta: rgb(168, 66, 114);
+
+.blue {
+    fill: $blue;
+    background-color: $blue;
+}
+
+.orange {
+    fill: $orange;
+    background-color: $orange;
+}
+
+.green {
+    fill: $green;
+    background-color: $green;
+}
+
+.magenta {
+    fill: $magenta;
+    background-color: $magenta;
+}

_sass/_fonts.scss

@@ -0,0 +1,8 @@
+$sidebar-text: $background;
+$sidebar-font: 'Barlow', sans-serif;
+
+$title-text: $foreground;
+$title-font: 'Barlow', sans-serif;
+
+$body-text: $foreground;
+$body-font: 'Open Sans', sans-serif;

_sass/_sidebar.scss

@@ -0,0 +1,155 @@
+@import 'colors';
+@import 'fonts';
+
+$flag-shadow: rgba(black, 0.2);
+
+ul#sidebar {
+    flex-shrink: 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    list-style-type: none;
+    width: 180px;
+    line-height: 0;
+
+
+    margin: 0;
+    padding: {
+        top: 5px;
+        bottom: 5px;
+        left: 0px;
+    }
+}
+
+.flag {
+    display: inline-block;
+    position: relative;
+    left: -3px;
+
+    text-align: center;
+    z-index: 1;
+
+    padding: {
+        top: 5px;
+        bottom: 5px;
+        left: 0px;
+    }
+    width: 90%;
+    
+    .flagFold{
+        display: block;
+        position: absolute;
+        z-index: -100;
+        left:0px;
+        top:55px;
+        width: 3px;
+        height: 3px;
+        mask-image: url('../svg/fold.svg');
+    }
+
+    .flagButton {
+        display: block;
+        float: left;
+        left: 0;
+        height: 50px;
+        width: 160px;
+
+        border-radius: 0 5px 5px 0;
+
+        .flagText {
+            font: {
+                family: $sidebar-font;
+                size: 20px;
+                weight: 600;
+            }
+            position: absolute;
+
+            line-height: normal;
+            text-align: center;
+
+            width: 160px;
+            right:0;
+            top:0;
+            padding-top: 10px;
+
+            color: $sidebar-text;
+        }
+    }
+
+    .flagButton::before {
+        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;
+    }
+}
+
+.flag:hover {
+
+    .flagButton {
+        width: 170px;
+        border-radius: 0;
+    }
+
+    .flagButton::before{
+        width: 170px;
+        border-radius: 0;
+    }
+
+    .flagPoint{
+        position: absolute;
+        width: 0; 
+        height: 0;
+        border-top: 25px solid transparent; 
+        border-bottom: 25px solid transparent;
+        border-left-width: 20px; 
+        border-left-style: solid;
+        background-color: transparent;
+        // display: block;
+        // position: absolute;
+        // left:170px;
+        // width: 20px;
+        // height: 50px;
+        // -webkit-mask-image: url('../svg/flag.svg');
+        // mask-image: url('../svg/flag.svg');
+        // //@include prefix(filter, $flag-shadow, o ms moz webkit);
+    }
+
+    .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: 20px solid $flag-shadow; 
+         z-index: -1;
+         content: " ";
+         left: -20 + 3px;
+         top: -25 + 4px;
+
+     }
+}
+
+ 

css/style.scss

@@ -1,23 +1,23 @@
 ---
 ---
-$background: #2B2A27;
-$foreground: #EDE0CE;
-$margin: darken($background, 8%);
-$shadow: rgba(black, 0.3);
-
-$blue: rgb(39, 167, 167);
-$orange: rgb(236, 103, 55);
-$green: rgb(188, 212, 42);
-$magenta: rgb(168, 66, 114);
-
-$sidebar-text: $background;
-$sidebar-font: 'Barlow', sans-serif;
-
-$title-text: $foreground;
-$title-font: 'Barlow', sans-serif;
-
-$body-text: $foreground;
-$body-font: 'Open Sans', sans-serif;
+@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;
+  }
 
 
 ::selection {
@@ -31,25 +31,6 @@ $body-font: 'Open Sans', sans-serif;
 }
 
 
-.blue {
-    fill: $blue;
-    background-color: $blue;
-}
-
-.orange {
-    fill: $orange;
-    background-color: $orange;
-}
-
-.green {
-    fill: $green;
-    background-color: $green;
-}
-
-.magenta {
-    fill: $magenta;
-    background-color: $magenta;
-}
 
 body {
     margin: 0;
@@ -59,6 +40,7 @@ body {
 #box {
     background-color: $background;
     max-width: 800px;
+    z-index: 0;
     
     margin-left: auto;
     margin-right: auto;
@@ -122,93 +104,6 @@ body {
 
 
 
-ul#sidebar {
-    flex-shrink: 0;
-    margin-block-start: 0;
-    margin-block-end: 0;
-    width: 180px;
-    margin: 0;
-    line-height: 0;
-
-    padding: {
-        top: 5px;
-        bottom: 5px;
-        left: 0px;
-    }
-    background-color: $background;
-    
-}
-
-.flag {
-    display: inline-block;
-    text-align: center;
-    line-height: normal;
-
-    position: relative;
-    padding: {
-        top: 5px;
-        bottom: 5px;
-        left: 0px;
-    }
-    //height: 60px;
-    width: 90%;
-    left: -3px;
-    
-    fill-opacity: 0;
-
-
-    .flagButton {
-        //position: absolute;
-        display: block;
-        float: left;
-
-        left: 0;
-        height: 50px;
-        width: 160px;
-
-        border-radius: 0 5px 5px 0;
-
-
-
-        .flagText {
-            margin-block-start: 0;
-            margin-block-end: 0;
-            z-index: 2;
-            float: right;
-            width: 160px;
-            text-align: center;
-            vertical-align: middle;
-            font-family: $sidebar-font;
-            color: $sidebar-text;
-            font-size: 20px;
-            text-align: center;
-            font-weight: 600;
-
-            height: 60%;
-            top: 50%;
-            bottom: 50%;
-            padding-top: 10px;
-        }
-    }
-}
-
-.flag:hover {
-
-    .flagButton {
-        width: 170px;
-        border-radius: 0;
-    }
-
-    .flagPoint{
-        display: block;
-        position: relative;
-        left:170px;
-        width: 20px;
-        height: 50px;
-        mask-image: url('../svg/flag.svg');
-    }
-}
-
 
 
 footer {

svg/fold.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 2 2" preserveAspectRatio="none">
+    <polygon points="0,0, 2,0, 2,2"/>
+</svg>