[5856] Update package.json in the blueprint (#102)

* Add package.json with sass build script

* Update outdated .scss files, remove old build.sh file, update style.css file

* Update version

craftercms-plugin.yaml

@@ -15,7 +15,7 @@ plugin:
   version:
     major: 2
     minor: 0
-    patch: 27
+    patch: 28
   description: |
     A versatile blog blueprint.
   website:

sources/scss/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "scss",
+  "version": "1.0.0",
+  "license": "GPL-3.0-only",
+  "scripts": {
+    "build": "sass src/style.scss ../../static-assets/css/style.css --no-source-map --style=compressed"
+  },
+  "devDependencies": {
+    "sass": "^1.56.1"
+  }
+}

sources/scss/_card.scss → sources/scss/src/_card.scss

@@ -43,7 +43,7 @@
 }
 
 .card-subtitle {
-  margin-top: -($card-spacer-y / 2);
+  margin-top: -($card-spacer-y * 0.5);
   margin-bottom: 0;
 }
 
@@ -98,15 +98,15 @@
 //
 
 .card-header-tabs {
-  margin-right: -($card-spacer-x / 2);
+  margin-right: -($card-spacer-x * 0.5);
   margin-bottom: -$card-spacer-y;
-  margin-left: -($card-spacer-x / 2);
+  margin-left: -($card-spacer-x * 0.5);
   border-bottom: 0;
 }
 
 .card-header-pills {
-  margin-right: -($card-spacer-x / 2);
-  margin-left: -($card-spacer-x / 2);
+  margin-right: -($card-spacer-x * 0.5);
+  margin-left: -($card-spacer-x * 0.5);
 }
 
 // Card image

sources/scss/_carousel.scss → sources/scss/src/_carousel.scss

@@ -225,9 +225,9 @@
 
 .carousel-caption {
   position: absolute;
-  right: ((100% - $carousel-caption-width) / 2);
+  right: ((100% - $carousel-caption-width) * 0.5);
   bottom: 20px;
-  left: ((100% - $carousel-caption-width) / 2);
+  left: ((100% - $carousel-caption-width) * 0.5);
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;

sources/scss/_custom-forms.scss → sources/scss/src/_custom-forms.scss

@@ -63,7 +63,7 @@
   // Background-color and (when enabled) gradient
   &::before {
     position: absolute;
-    top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
+    top: (($font-size-base * $line-height-base - $custom-control-indicator-size) * 0.5);
     left: -$custom-control-gutter;
     display: block;
     width: $custom-control-indicator-size;
@@ -78,7 +78,7 @@
   // Foreground (icon)
   &::after {
     position: absolute;
-    top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
+    top: (($font-size-base * $line-height-base - $custom-control-indicator-size) * 0.5);
     left: -$custom-control-gutter;
     display: block;
     width: $custom-control-indicator-size;
@@ -335,7 +335,7 @@
   &::-webkit-slider-thumb {
     width: $custom-range-thumb-width;
     height: $custom-range-thumb-height;
-    margin-top: (($custom-range-track-height - $custom-range-thumb-height) / 2); // Webkit specific
+    margin-top: (($custom-range-track-height - $custom-range-thumb-height) * 0.5); // Webkit specific
     @include gradient-bg($custom-range-thumb-bg);
     border: $custom-range-thumb-border;
     @include border-radius($custom-range-thumb-border-radius);

sources/scss/_functions.scss → sources/scss/src/_functions.scss

@@ -54,7 +54,7 @@
   $g: green($color);
   $b: blue($color);
 
-  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) * 0.001;
 
   @if ($yiq >= $yiq-contrasted-threshold) {
     @return $yiq-text-dark;

sources/scss/_images.scss → sources/scss/src/_images.scss

@@ -32,7 +32,7 @@
 }
 
 .figure-img {
-  margin-bottom: ($spacer / 2);
+  margin-bottom: ($spacer * 0.5);
   line-height: 1;
 }
 

sources/scss/_jumbotron.scss → sources/scss/src/_jumbotron.scss

@@ -1,5 +1,5 @@
 .jumbotron {
-  padding: $jumbotron-padding ($jumbotron-padding / 2);
+  padding: $jumbotron-padding ($jumbotron-padding * 0.5);
   margin-bottom: $jumbotron-padding;
   background-color: $jumbotron-bg;
   @include border-radius($border-radius-lg);

sources/scss/_popover.scss → sources/scss/src/_popover.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .popover {
   position: absolute;
   top: 0;
@@ -44,7 +46,7 @@
 
   .arrow::before,
   .arrow::after {
-    border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+    border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 0;
   }
 
   .arrow::before {
@@ -70,7 +72,7 @@
 
   .arrow::before,
   .arrow::after {
-    border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+    border-width: ($popover-arrow-width * 0.5) $popover-arrow-height ($popover-arrow-width * 0.5) 0;
   }
 
   .arrow::before {
@@ -93,7 +95,7 @@
 
   .arrow::before,
   .arrow::after {
-    border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+    border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height ($popover-arrow-width * 0.5);
   }
 
   .arrow::before {
@@ -113,7 +115,7 @@
     left: 50%;
     display: block;
     width: $popover-arrow-width;
-    margin-left: ($popover-arrow-width / -2);
+    margin-left: math.div($popover-arrow-width, -2);
     content: "";
     border-bottom: $popover-border-width solid $popover-header-bg;
   }
@@ -131,7 +133,7 @@
 
   .arrow::before,
   .arrow::after {
-    border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+    border-width: ($popover-arrow-width * 0.5) 0 ($popover-arrow-width * 0.5) $popover-arrow-height;
   }
 
   .arrow::before {

sources/scss/_tooltip.scss → sources/scss/src/_tooltip.scss

@@ -37,7 +37,7 @@
 
     &::before {
       top: 0;
-      border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+      border-width: $tooltip-arrow-height ($tooltip-arrow-width * 0.5) 0;
       border-top-color: $tooltip-arrow-color;
     }
   }
@@ -53,7 +53,7 @@
 
     &::before {
       right: 0;
-      border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+      border-width: ($tooltip-arrow-width * 0.5) $tooltip-arrow-height ($tooltip-arrow-width * 0.5) 0;
       border-right-color: $tooltip-arrow-color;
     }
   }
@@ -67,7 +67,7 @@
 
     &::before {
       bottom: 0;
-      border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+      border-width: 0 ($tooltip-arrow-width * 0.5) $tooltip-arrow-height;
       border-bottom-color: $tooltip-arrow-color;
     }
   }
@@ -83,7 +83,7 @@
 
     &::before {
       left: 0;
-      border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+      border-width: ($tooltip-arrow-width * 0.5) 0 ($tooltip-arrow-width * 0.5) $tooltip-arrow-height;
       border-left-color: $tooltip-arrow-color;
     }
   }

sources/scss/_variables.scss → sources/scss/src/_variables.scss

@@ -272,7 +272,7 @@ $h4-font-size:                $font-size-base * 1.5 !default;
 $h5-font-size:                $font-size-base * 1.25 !default;
 $h6-font-size:                $font-size-base !default;
 
-$headings-margin-bottom:      ($spacer / 2) !default;
+$headings-margin-bottom:      ($spacer * 0.5) !default;
 $headings-font-family:        inherit !default;
 $headings-font-weight:        500 !default;
 $headings-line-height:        1.2 !default;
@@ -638,11 +638,11 @@ $nav-pills-link-active-color:       $component-active-color !default;
 $nav-pills-link-active-bg:          $component-active-bg !default;
 
 $nav-divider-color:                 $gray-200 !default;
-$nav-divider-margin-y:              ($spacer / 2) !default;
+$nav-divider-margin-y:              ($spacer * 0.5) !default;
 
 // Navbar
 
-$navbar-padding-y:                  ($spacer / 2) !default;
+$navbar-padding-y:                  ($spacer * 0.5) !default;
 $navbar-padding-x:                  $spacer !default;
 
 $navbar-nav-link-padding-x:         .5rem !default;
@@ -651,7 +651,7 @@ $navbar-brand-font-size:            $font-size-lg !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
 $nav-link-height:                   ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
 $navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
+$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * 0.5 !default;
 
 $navbar-toggler-padding-y:          .25rem !default;
 $navbar-toggler-padding-x:          .75rem !default;
@@ -722,7 +722,7 @@ $card-bg:                           $white !default;
 
 $card-img-overlay-padding:          1.25rem !default;
 
-$card-group-margin:                 ($grid-gutter-width / 2) !default;
+$card-group-margin:                 ($grid-gutter-width * 0.5) !default;
 $card-deck-margin:                  $card-group-margin !default;
 
 $card-columns-count:                3 !default;

sources/scss/mixins/_grid-framework.scss → sources/scss/src/mixins/_grid-framework.scss

@@ -9,8 +9,8 @@
     position: relative;
     width: 100%;
     min-height: 1px; // Prevent columns from collapsing when empty
-    padding-right: ($gutter / 2);
-    padding-left: ($gutter / 2);
+    padding-right: ($gutter * 0.5);
+    padding-left: ($gutter * 0.5);
   }
 
   @each $breakpoint in map-keys($breakpoints) {

sources/scss/mixins/_grid.scss → sources/scss/src/mixins/_grid.scss

@@ -2,10 +2,12 @@
 //
 // Generate semantic grid columns with these mixins.
 
+@use "sass:math";
+
 @mixin make-container() {
   width: 100%;
-  padding-right: ($grid-gutter-width / 2);
-  padding-left: ($grid-gutter-width / 2);
+  padding-right: ($grid-gutter-width * 0.5);
+  padding-left: ($grid-gutter-width * 0.5);
   margin-right: auto;
   margin-left: auto;
 }
@@ -23,8 +25,8 @@
 @mixin make-row() {
   display: flex;
   flex-wrap: wrap;
-  margin-right: ($grid-gutter-width / -2);
-  margin-left: ($grid-gutter-width / -2);
+  margin-right: math.div($grid-gutter-width, -2);
+  margin-left: math.div($grid-gutter-width, -2);
 }
 
 @mixin make-col-ready() {
@@ -34,19 +36,19 @@
   // later on to override this initial width.
   width: 100%;
   min-height: 1px; // Prevent collapsing
-  padding-right: ($grid-gutter-width / 2);
-  padding-left: ($grid-gutter-width / 2);
+  padding-right: ($grid-gutter-width * 0.5);
+  padding-left: ($grid-gutter-width * 0.5);
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
-  flex: 0 0 percentage($size / $columns);
+  flex: 0 0 percentage(math.div($size, $columns));
   // Add a `max-width` to ensure content within each column does not blow out
   // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
   // do not appear to require this.
-  max-width: percentage($size / $columns);
+  max-width: percentage(math.div($size, $columns));
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
-  $num: $size / $columns;
+  $num: math.div($size, $columns);
   margin-left: if($num == 0, 0, percentage($num));
 }

sources/scss/utilities/_embed.scss → sources/scss/src/utilities/_embed.scss

@@ -1,5 +1,7 @@
 // Credit: Nicolas Gallagher and SUIT CSS.
 
+@use "sass:math";
+
 .embed-responsive {
   position: relative;
   display: block;
@@ -29,24 +31,24 @@
 
 .embed-responsive-21by9 {
   &::before {
-    padding-top: percentage(9 / 21);
+    padding-top: percentage(math.div(9, 21));
   }
 }
 
 .embed-responsive-16by9 {
   &::before {
-    padding-top: percentage(9 / 16);
+    padding-top: percentage(math.div(9, 16));
   }
 }
 
 .embed-responsive-4by3 {
   &::before {
-    padding-top: percentage(3 / 4);
+    padding-top: percentage(3 * 0.25);
   }
 }
 
 .embed-responsive-1by1 {
   &::before {
-    padding-top: percentage(1 / 1);
+    padding-top: percentage(math.div(1, 1));
   }
 }