Fix embed fontawesome css usage and migrate to dart sass

5 files changed, 23 insertions, 15 deletions

diff --git a/src/scss/components/_alert.scss b/src/scss/components/_alert.scss
index b7fb020..826e44d 100755
--- a/src/scss/components/_alert.scss
+++ b/src/scss/components/_alert.scss
@@ -22,7 +22,8 @@
             top:         10px;
             left:        15px;
             font-family: 'Font Awesome 5 Free';
-            font-size:   2.5rem;
+            font-weight: 600;
+            font-size:   2rem;
         }
     }
     &.info {
diff --git a/src/scss/components/_archive.scss b/src/scss/components/_archive.scss
index 91ff6a2..fae1fa7 100755
--- a/src/scss/components/_archive.scss
+++ b/src/scss/components/_archive.scss
@@ -28,6 +28,7 @@
             // Change style of the list by adding font-awesome icon
             &::before {
                 font-family: 'Font Awesome 5 Free';
+                font-weight: 600;
                 content:     '\f0da';
                 font-size:   map-get($font-size, small);
             }
diff --git a/src/scss/components/_post.scss b/src/scss/components/_post.scss
index 3572868..4498699 100755
--- a/src/scss/components/_post.scss
+++ b/src/scss/components/_post.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .post {
     position:       relative;
     width:          100%;
@@ -80,20 +82,20 @@
         // Display bottom bar in small size and push it from the size of the large sidebar
         &[data-behavior="1"] .post.pushed,
         &[data-behavior="2"] .post.pushed {
-            @include prefix(transform, translate3d(-#{map-get($sidebar, lg-screen-width) / 2}, 0, 0), 'webkit' 'moz');
+            @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, lg-screen-width), 2)}, 0, 0), 'webkit' 'moz');
         }
         // Display bottom bar in medium size and push it from the size of the medium sidebar
         &[data-behavior="3"] .post.pushed {
-            @include prefix(transform, translate3d(-#{map-get($sidebar, md-screen-width) / 2}, 0, 0), 'webkit' 'moz');
+            @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, md-screen-width), 2)}, 0, 0), 'webkit' 'moz');
         }
         // Display bottom bar in large size and push it from the size of the large sidebar
         &[data-behavior="4"] .post.pushed,
         &[data-behavior="5"] .post.pushed {
-            @include prefix(transform, translate3d(-#{map-get($sidebar, lg-screen-width) / 2}, 0, 0), 'webkit' 'moz');
+            @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, lg-screen-width), 2)}, 0, 0), 'webkit' 'moz');
         }
         // Display bottom bar in large size and push it from the size of the medium sidebar
         &[data-behavior="6"] .post.pushed {
-            @include prefix(transform, translate3d(-#{map-get($sidebar, md-screen-width) / 2}, 0, 0), 'webkit' 'moz');
+            @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, md-screen-width), 2)}, 0, 0), 'webkit' 'moz');
         }
     }
 }
@@ -102,27 +104,27 @@
     #main {
         // Display bottom bar in extra small size and push it from the size of the extra large sidebar
         &[data-behavior="1"] .post.pushed {
-            @include prefix(transform, translate3d(-#{map-get($sidebar, xlg-screen-width) / 2}, 0, 0), 'webkit' 'moz');
+            @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, xlg-screen-width), 2)}, 0, 0), 'webkit' 'moz');
         }
         // Display bottom bar in small size and push it from the size of the large sidebar
         &[data-behavior="2"] .post.pushed {
-            @include prefix(transform, translate3d(-#{map-get($sidebar, lg-screen-width) / 2}, 0, 0), 'webkit' 'moz');
+            @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, lg-screen-width), 2)}, 0, 0), 'webkit' 'moz');
         }
         // Display bottom bar in medium size and push it from the size of the medium sidebar
         &[data-behavior="3"] .post.pushed {
-            @include prefix(transform, translate3d(-#{map-get($sidebar, md-screen-width) / 2}, 0, 0), 'webkit' 'moz');
+            @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, md-screen-width), 2)}, 0, 0), 'webkit' 'moz');
         }
         // Display bottom bar in large size and push it from the size of the extra large sidebar
         &[data-behavior="4"] .post.pushed {
-            @include prefix(transform, translate3d(-#{map-get($sidebar, xlg-screen-width) / 2}, 0, 0), 'webkit' 'moz');
+            @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, xlg-screen-width), 2)}, 0, 0), 'webkit' 'moz');
         }
         // Display bottom bar in large size and push it from the size of the extra large sidebar
         &[data-behavior="5"] .post.pushed {
-            @include prefix(transform, translate3d(-#{map-get($sidebar, lg-screen-width) / 2}, 0, 0), 'webkit' 'moz');
+            @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, lg-screen-width), 2)}, 0, 0), 'webkit' 'moz');
         }
         // Display bottom bar in large size and push it from the size of the medium sidebar
         &[data-behavior="6"] .post.pushed {
-            @include prefix(transform, translate3d(-#{map-get($sidebar, md-screen-width) / 2}, 0, 0), 'webkit' 'moz');
+            @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, md-screen-width), 2)}, 0, 0), 'webkit' 'moz');
         }
     }
 }
diff --git a/src/scss/components/_tooltip.scss b/src/scss/components/_tooltip.scss
index c619199..4d178e5 100755
--- a/src/scss/components/_tooltip.scss
+++ b/src/scss/components/_tooltip.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // The default position of a tooltip is at the top of the focused element
 .tooltip {
     position: relative;
@@ -61,7 +63,7 @@
     }
     &:after {
         // Center tooltip with his arrow
-        margin-left: -#{(map-get($tooltip, min-width) / 2) + 1};
+        margin-left: -#{math.div(map-get($tooltip, min-width), 2) + 1};
     }
     &:before,
     &:after {
diff --git a/src/scss/utils/mixins/_header.scss b/src/scss/utils/mixins/_header.scss
index 81e3eaf..ab1bdeb 100755
--- a/src/scss/utils/mixins/_header.scss
+++ b/src/scss/utils/mixins/_header.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 /// Mixin helper to push header from medium sidebar size
 @mixin header-pushed-md {
     &.pushed {
@@ -6,7 +8,7 @@
     @media #{$small-and-up} {
         .header-title {
             &.pushed {
-                @include prefix(transform, translate3d(-#{(map-get($sidebar, md-screen-width) / 2) - 1}, 0, 0), 'webkit' 'moz');
+                @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, lg-screen-width), 2) - 1}, 0, 0), 'webkit' 'moz');
             }
         }
         .header-right-picture {
@@ -25,7 +27,7 @@
     @media #{$medium-and-up} {
         .header-title {
             &.pushed {
-                @include prefix(transform, translate3d(-#{(map-get($sidebar, lg-screen-width) / 2) - 1}, 0, 0), 'webkit' 'moz');
+                @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, lg-screen-width), 2) - 1}, 0, 0), 'webkit' 'moz');
             }
         }
         .header-right-picture {
@@ -43,7 +45,7 @@
     @media #{$xlarge-and-up} {
         .header-title {
             &.pushed {
-                @include prefix(transform, translate3d(-#{(map-get($sidebar, xlg-screen-width) / 2) - 1}, 0, 0), 'webkit' 'moz');
+                @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, xlg-screen-width), 2) - 1}, 0, 0), 'webkit' 'moz');
             }
         }
         .header-right-picture {