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