diff --git a/_includes/flag.html b/_includes/flag.html
index 5353011..1e1c147 100644
--- a/_includes/flag.html
+++ b/_includes/flag.html
@@ -4,5 +4,6 @@
{{include.name}}
+
\ No newline at end of file
diff --git a/_sass/_colors.scss b/_sass/_colors.scss
new file mode 100644
index 0000000..9a962ed
--- /dev/null
+++ b/_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;
+}
diff --git a/_sass/_fonts.scss b/_sass/_fonts.scss
new file mode 100644
index 0000000..5156593
--- /dev/null
+++ b/_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;
\ No newline at end of file
diff --git a/_sass/_sidebar.scss b/_sass/_sidebar.scss
new file mode 100644
index 0000000..5bf703f
--- /dev/null
+++ b/_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;
+
+ }
+}
+
+
diff --git a/css/style.scss b/css/style.scss
index db77ca4..1b1933d 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -1,23 +1,23 @@
---
---
-$background: #2B2A27;
-$foreground: #EDE0CE;
-$margin: darken($background, 8%);
-$shadow: rgba(black, 0.3);
+@import 'colors';
+@import 'sidebar';
+@import 'fonts';
-$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;
+/// 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 {
diff --git a/svg/fold.svg b/svg/fold.svg
new file mode 100644
index 0000000..e4a74b7
--- /dev/null
+++ b/svg/fold.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file