cssninjaStudio · driss-chelouati · Nov 2, 2021 · Nov 2, 2021 · Nov 2, 2021 · Nov 2, 2021
diff --git a/gulpfile.js b/gulpfile.js
@@ -91,6 +91,19 @@ function compileHTML() {
     .pipe(browserSync.stream());
 }
 
+//Concat JS
+function concatJs() {
+  console.log("\n\t" + logSymbols.info, "Compiling Vendor Js..\n");
+  return src([
+    'src/vendor/js/*',
+  ])
+    .pipe(sourcemaps.init())
+    .pipe(concat('app.js'))
+    .pipe(sourcemaps.write('./'))
+    .pipe(dest('dist/js'))
+    .pipe(browserSync.stream());
+}
+
 //Concat CSS Plugins
 function concatCssPlugins() {
   console.log("\n\t" + logSymbols.info, "Compiling Plugin styles..\n");
@@ -184,13 +197,31 @@ function devClean() {
   return del([options.paths.dist.base]);
 }
 
+const buildTasks = [
+  devClean, // Clean Dist Folder
+  resetPages,
+  parallel(
+    concatJs, 
+    concatCssPlugins, 
+    copyFonts, 
+    compileSCSS, 
+    javascriptBuild, 
+    devImages, 
+    compileHTML
+  ),
+]
 
 exports.setup = series(setupBulma);
 
+exports.prod = series(
+  ...buildTasks
+);
+
 exports.default = series(
   devClean, // Clean Dist Folder
   resetPages,
   parallel(copyFonts, concatCssPlugins, compileSCSS, javascriptBuild, devImages, compileHTML),
   livePreview, // Live Preview Build
   watchFiles // Watch for Live Changes
 );
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/layouts/ico.html b/src/layouts/ico.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Krypton</title>
+
+    <link rel="icon" type="image/png" href="img/favicon.png" />
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
+
+    <link rel="stylesheet" href="{{root}}/css/app.css">
+    <link rel="stylesheet" type="text/css" href="{{root}}/css/main.css">
+</head>
+
+<body>
+
+    {{> pageloader}}
+    {{> body}}
+    {{> footer}}
+    {{> backtotop}}
+
+    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+    <script src="./js/bundle.js"></script>
+
+</body>
+
+</html>
diff --git a/src/sass/sass/components/level.sass b/src/sass/sass/components/level.sass
@@ -1,4 +1,5 @@
-$level-item-spacing: ($block-spacing / 2) !default
+@use "sass:math"
+$level-item-spacing: math.div($block-spacing, 2) !default
 
 .level
   @extend %block

diff --git a/src/sass/sass/elements/button.sass b/src/sass/sass/elements/button.sass
@@ -1,3 +1,4 @@
+@use "sass:math"
 $button-color: $text-strong !default
 $button-background-color: $scheme-main !default
 $button-family: false !default
@@ -73,14 +74,14 @@ $button-colors: $colors !default
       height: 1.5em
       width: 1.5em
     &:first-child:not(:last-child)
-      +ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}), false)
-      +ltr-property("margin", $button-padding-horizontal / 4)
+      +ltr-property("margin", calc(#{math.div(1, 2) * $button-padding-horizontal} - #{$button-border-width}), false)
+      +ltr-property("margin", math.div($button-padding-horizontal, 4))
     &:last-child:not(:first-child)
-      +ltr-property("margin", $button-padding-horizontal / 4, false)
-      +ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}))
+      +ltr-property("margin", math.div($button-padding-horizontal, 4), false)
+      +ltr-property("margin", calc(#{math.div(1, 2) * $button-padding-horizontal} - #{$button-border-width}))
     &:first-child:last-child
-      margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
-      margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
+      margin-left: calc(#{math.div(1, 2) * $button-padding-horizontal} - #{$button-border-width})
+      margin-right: calc(#{math.div(1, 2) * $button-padding-horizontal} - #{$button-border-width})
   // States
   &:hover,
   &.is-hovered

diff --git a/src/sass/sass/grid/columns.sass b/src/sass/sass/grid/columns.sass
@@ -1,3 +1,4 @@
+@use "sass:math"
 $column-gap: 0.75rem !default
 
 .column
@@ -59,9 +60,9 @@ $column-gap: 0.75rem !default
   @for $i from 0 through 12
     .columns.is-mobile > &.is-#{$i}
       flex: none
-      width: percentage($i / 12)
+      width: percentage(math.div($i, 12))
     .columns.is-mobile > &.is-offset-#{$i}
-      margin-left: percentage($i / 12)
+      margin-left: percentage(math.div($i, 12))
   +mobile
     &.is-narrow-mobile
       flex: none
@@ -116,9 +117,9 @@ $column-gap: 0.75rem !default
     @for $i from 0 through 12
       &.is-#{$i}-mobile
         flex: none
-        width: percentage($i / 12)
+        width: percentage(math.div($i, 12))
       &.is-offset-#{$i}-mobile
-        margin-left: percentage($i / 12)
+        margin-left: percentage(math.div($i, 12))
   +tablet
     &.is-narrow,
     &.is-narrow-tablet
@@ -194,10 +195,10 @@ $column-gap: 0.75rem !default
       &.is-#{$i},
       &.is-#{$i}-tablet
         flex: none
-        width: percentage($i / 12)
+        width: percentage(math.div($i, 12))
       &.is-offset-#{$i},
       &.is-offset-#{$i}-tablet
-        margin-left: percentage($i / 12)
+        margin-left: percentage(math.div($i, 12))
   +touch
     &.is-narrow-touch
       flex: none
@@ -252,9 +253,9 @@ $column-gap: 0.75rem !default
     @for $i from 0 through 12
       &.is-#{$i}-touch
         flex: none
-        width: percentage($i / 12)
+        width: percentage(math.div($i, 12))
       &.is-offset-#{$i}-touch
-        margin-left: percentage($i / 12)
+        margin-left: percentage(math.div($i, 12))
   +desktop
     &.is-narrow-desktop
       flex: none
@@ -309,9 +310,9 @@ $column-gap: 0.75rem !default
     @for $i from 0 through 12
       &.is-#{$i}-desktop
         flex: none
-        width: percentage($i / 12)
+        width: percentage(math.div($i, 12))
       &.is-offset-#{$i}-desktop
-        margin-left: percentage($i / 12)
+        margin-left: percentage(math.div($i, 12))
   +widescreen
     &.is-narrow-widescreen
       flex: none
@@ -366,9 +367,9 @@ $column-gap: 0.75rem !default
     @for $i from 0 through 12
       &.is-#{$i}-widescreen
         flex: none
-        width: percentage($i / 12)
+        width: percentage(math.div($i, 12))
       &.is-offset-#{$i}-widescreen
-        margin-left: percentage($i / 12)
+        margin-left: percentage(math.div($i, 12))
   +fullhd
     &.is-narrow-fullhd
       flex: none
@@ -423,9 +424,9 @@ $column-gap: 0.75rem !default
     @for $i from 0 through 12
       &.is-#{$i}-fullhd
         flex: none
-        width: percentage($i / 12)
+        width: percentage(math.div($i, 12))
       &.is-offset-#{$i}-fullhd
-        margin-left: percentage($i / 12)
+        margin-left: percentage(math.div($i, 12))
 
 .columns
   margin-left: (-$column-gap)

diff --git a/src/sass/sass/grid/tiles.sass b/src/sass/sass/grid/tiles.sass
@@ -1,3 +1,4 @@
+@use "sass:math"
 $tile-spacing: 0.75rem !default
 
 .tile
@@ -31,4 +32,4 @@ $tile-spacing: 0.75rem !default
     @for $i from 1 through 12
       &.is-#{$i}
         flex: none
-        width: ($i / 12) * 100%
+        width: math.div($i, 12) * 100%
diff --git a/src/sass/sass/utilities/functions.sass b/src/sass/sass/utilities/functions.sass
@@ -1,3 +1,4 @@
+@use "sass:math"
 @function mergeColorMaps($bulma-colors, $custom-colors)
   // We return at least Bulma's hard-coded colors
   $merged-colors: $bulma-colors
@@ -67,11 +68,11 @@
   $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
   @each $name, $value in $color-rgb
     $adjusted: 0
-    $value: $value / 255
+    $value: math.div($value, 255)
     @if $value < 0.03928
-      $value: $value / 12.92
+      $value: math.div($value, 12.92)
     @else
-      $value: ($value + .055) / 1.055
+      $value: math.div(($value + .055), 1.055)
       $value: powerNumber($value, 2)
     $color-rgb: map-merge($color-rgb, ($name: $value))
   @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)