Apply sass-migrator migrations

``` sass-migrator calc-interpolation **/*.scss sass-migrator division **/*.scss sass-migrator strict-unary **/*.scs ```
radio-t · Nov 1, 2024 · 7d3cbda · 7d3cbda
1 parent 00ab0ca
commit 7d3cbda
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 43 deletions.
diff --git a/hugo/src/scss/_archives.scss b/hugo/src/scss/_archives.scss
@@ -94,8 +94,8 @@
     content: '';
     position: absolute;
     bottom: 0;
-    left: $grid-gutter-width / 2;
-    right: $grid-gutter-width / 2;
+    left: $grid-gutter-width * 0.5;
+    right: $grid-gutter-width * 0.5;
     height: 1px;
     background-color: $border-color;
   }

diff --git a/hugo/src/scss/_mixins.scss b/hugo/src/scss/_mixins.scss
@@ -1,12 +1,14 @@
+@use "sass:math";
+
 @function px($px) {
-  @return $px * 1rem / 15;
+  @return math.div($px * 1rem, 15);
 }
 
 @mixin logo-size($width) {
-  $logo-ar: 123/50; // width/height
+  $logo-ar: 123*0.02; // width/height
   width: $width;
-  height: $width / $logo-ar;
-  margin-top: -($width / 15);
+  height: math.div($width, $logo-ar);
+  margin-top: -(math.div($width, 15));
 }
 
 @mixin text-uppercase() {

diff --git a/hugo/src/scss/_navbar.scss b/hugo/src/scss/_navbar.scss
@@ -1,10 +1,12 @@
+@use "sass:math";
+
 .navbar {
   font-size: 1rem;
   white-space: nowrap;
   > .container-fluid,
   > .container {
-    padding-left: $grid-gutter-width / 2;
-    padding-right: $grid-gutter-width / 2;
+    padding-left: $grid-gutter-width * 0.5;
+    padding-right: $grid-gutter-width * 0.5;
   }
 }
 .navbar-nav {
@@ -24,7 +26,7 @@
     }
     .nav-link {
       position: relative;
-      padding: ($spacer * 2) ($spacer / 2) !important;
+      padding: ($spacer * 2) ($spacer * 0.5) !important;
       &:after {
         content: '';
         position: absolute;
@@ -49,7 +51,7 @@
   .navbar-btn-search {
     background-color: $white;
     font-weight: $font-weight-normal;
-    padding-left: ($spacer / 1.5);
+    padding-left: math.div($spacer, 1.5);
     border-color: transparent !important;
     display: flex;
     align-items: center;
@@ -62,8 +64,8 @@
 @media (min-width: (breakpoint-min('xl') + 100px)) {
   .navbar-nav {
     .nav-link {
-      padding-left: ($spacer / 1.5) !important;
-      padding-right: ($spacer / 1.5) !important;
+      padding-left: math.div($spacer, 1.5) !important;
+      padding-right: math.div($spacer, 1.5) !important;
     }
   }
 }
@@ -186,8 +188,8 @@
       &:after {
         content: '';
         position: absolute;
-        top: ($spacer / 2);
-        bottom: ($spacer / 2);
+        top: ($spacer * 0.5);
+        bottom: ($spacer * 0.5);
         left: 0;
         width: 0;
         background-color: $primary;

diff --git a/hugo/src/scss/_player.scss b/hugo/src/scss/_player.scss
@@ -99,7 +99,7 @@ $podcast-player-cover-margin: 0.5rem;
   background-color: currentColor;
   height: $podcast-player-seek-thumb-height;
   width: $podcast-player-seek-thumb-width;
-  margin: -($podcast-player-seek-thumb-height - $podcast-player-seek-height)/2 -2px;
+  margin: -($podcast-player-seek-thumb-height - $podcast-player-seek-height)*0.5 -2px;
 }
 .player-time {
   font-family: $font-family-monospace;

diff --git a/hugo/src/scss/_search.scss b/hugo/src/scss/_search.scss
@@ -1,5 +1,7 @@
+@use "sass:math";
+
 @function remVw($rem, $breakpoint: 'xl') {
-  @return (($rem / 1 * 16px) / map_get($grid-breakpoints, $breakpoint) * 100) * 1vw;
+  @return (math.div(math.div($rem, 1) * 16px, map_get($grid-breakpoints, $breakpoint)) * 100) * 1vw;
 }
 label[for='page-search-input'] {
   -webkit-appearance: none;
@@ -92,7 +94,7 @@ label[for='page-search-input'] {
   .podcast-cover {
     float: right;
     width: 4rem;
-    margin-left: $grid-gutter-width / 2;
+    margin-left: $grid-gutter-width * 0.5;
   }
 }
 .page-search-list {

diff --git a/hugo/src/scss/_variables-custom.scss b/hugo/src/scss/_variables-custom.scss
@@ -1,3 +1,3 @@
 $navbar-collapsed-height: 3rem;
-$navbar-collapsed-padding-x: $grid-gutter-width / 2;
+$navbar-collapsed-padding-x: $grid-gutter-width * 0.5;
 $topic-spacer: $line-height-base * 0.4em;
diff --git a/hugo/src/scss/_variables-dark.scss b/hugo/src/scss/_variables-dark.scss
@@ -3,6 +3,8 @@
 //// Variables should follow the `$component-state-property-size` formula for
 //// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 //
+@use "sass:math";
+
 $theme: 'dark';
 $theme-suffix: '-dark'; // Add suffix to filenames, eg logo-dark.svg
 //// Color system
@@ -292,7 +294,7 @@ $component-active-bg: $primary;
 //$font-family-base:            $font-family-sans-serif;
 //// stylelint-enable value-keyword-case
 //
-$font-size-base: 15/16 * 1rem; // Assumes the browser default, typically `16px`
+$font-size-base: math.div(15, 16) * 1rem; // Assumes the browser default, typically `16px`
 //$font-size-lg:                ($font-size-base * 1.25);
 //$font-size-sm:                ($font-size-base * .875);
 //
@@ -332,8 +334,8 @@ $display-line-height: 1.1; //$headings-line-height;
 //$lead-font-size:              ($font-size-base * 1.25);
 //$lead-font-weight:            300;
 //
-$small-font-size: 13/15 * 100%;
-$smaller-font-size: 12/15 * 100%;
+$small-font-size: math.div(13, 15) * 100%;
+$smaller-font-size: math.div(12, 15) * 100%;
 //
 $text-muted: $gray-500;
 //

diff --git a/hugo/src/scss/_variables.scss b/hugo/src/scss/_variables.scss
@@ -3,6 +3,8 @@
 //// Variables should follow the `$component-state-property-size` formula for
 //// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 //
+@use "sass:math";
+
 $theme: 'light';
 $theme-suffix: '';
 //// Color system
@@ -249,7 +251,7 @@ $link-hover-decoration: none; //underline;
 //$line-height-sm:              1.5;
 //
 //$border-width:                1px;
-$border-color: rgba($black, 1 - lightness($gray-300) / 100%);
+$border-color: rgba($black, 1 - math.div(lightness($gray-300), 100%));
 //
 //$border-radius:               .25rem;
 //$border-radius-lg:            .3rem;
@@ -292,7 +294,7 @@ $component-active-bg: $primary;
 //$font-family-base:            $font-family-sans-serif;
 //// stylelint-enable value-keyword-case
 //
-$font-size-base: 15/16 * 1rem; // Assumes the browser default, typically `16px`
+$font-size-base: math.div(15, 16) * 1rem; // Assumes the browser default, typically `16px`
 //$font-size-lg:                ($font-size-base * 1.25);
 //$font-size-sm:                ($font-size-base * .875);
 //
@@ -332,8 +334,8 @@ $display-line-height: 1.1; //$headings-line-height;
 //$lead-font-size:              ($font-size-base * 1.25);
 //$lead-font-weight:            300;
 //
-$small-font-size: 13/15 * 100%;
-$smaller-font-size: 12/15 * 100%;
+$small-font-size: math.div(13, 15) * 100%;
+$smaller-font-size: math.div(12, 15) * 100%;
 //
 $text-muted: $gray-600;
 //

diff --git a/hugo/src/scss/main.scss b/hugo/src/scss/main.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import 'player';
 @import 'navbar';
 @import 'sidebar';
@@ -186,7 +188,7 @@ $jumbotron-arc-height: 5%;
 $jumbotron-arc-width: 120%;
 .jumbotron {
   position: relative;
-  margin-bottom: ($jumbotron-arc-height / 2);
+  margin-bottom: ($jumbotron-arc-height * 0.5);
   padding-bottom: 3rem;
   h1 > small {
     font-size: 75%;
@@ -209,15 +211,15 @@ $jumbotron-arc-width: 120%;
   height: 0;
   bottom: 0;
   padding-bottom: $jumbotron-arc-height;
-  margin-bottom: -($jumbotron-arc-height / 2);
+  margin-bottom: -($jumbotron-arc-height * 0.5);
   &:before {
     content: '';
     position: absolute;
     width: $jumbotron-arc-width;
     height: 100%;
     background-color: $jumbotron-bg;
     border-radius: 50%;
-    margin: 0 (-($jumbotron-arc-width - 100) / 2);
+    margin: 0 (-($jumbotron-arc-width - 100) * 0.5);
   }
 }
 .jumbotron-logo {
@@ -226,7 +228,7 @@ $jumbotron-arc-width: 120%;
   max-width: 15vw;
   bottom: 0;
   left: 50%;
-  margin-bottom: -($jumbotron-arc-height / 2); // bottom of arc
+  margin-bottom: -($jumbotron-arc-height * 0.5); // bottom of arc
 }
 .jumbotron-logo-img {
   position: relative;
@@ -337,7 +339,7 @@ $jumbotron-arc-width: 120%;
 }
 .post-time {
   font-size: $smaller-font-size;
-  line-height: $line-height-base * (1/0.8);
+  line-height: $line-height-base * math.div(1, 0.8);
   .comments-counter + & {
     margin-top: $topic-spacer;
   }
@@ -462,7 +464,7 @@ $jumbotron-arc-width: 120%;
       }
       > div {
         flex-grow: 1;
-        margin-left: $grid-gutter-width / 2;
+        margin-left: $grid-gutter-width * 0.5;
       }
     }
     @include media-breakpoint-down('sm') {
@@ -485,7 +487,7 @@ $jumbotron-arc-width: 120%;
         }
         > div {
           margin-left: 0;
-          margin-right: $grid-gutter-width / 2;
+          margin-right: $grid-gutter-width * 0.5;
         }
       }
     }
@@ -556,8 +558,8 @@ $jumbotron-arc-width: 120%;
   left: 50%;
   width: $play-button-size;
   height: $play-button-size;
-  margin-top: (-$play-button-size) / 2;
-  margin-left: (-$play-button-size) / 2;
+  margin-top: (-$play-button-size) * 0.5;
+  margin-left: (-$play-button-size) * 0.5;
   padding: 0;
   background-color: rgba($link-hover-color, 0.65);
   backdrop-filter: $backdrop-filter;
@@ -581,7 +583,7 @@ $jumbotron-arc-width: 120%;
     box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgba($link-hover-color, 0.65);
   }
   .icon {
-    font-size: $play-button-size / 2;
+    font-size: $play-button-size * 0.5;
     cursor: pointer;
   }
   .play-icon {
@@ -621,13 +623,13 @@ $ripple-scale-out: 3.4;
   left: 50%;
   width: $dot-size;
   height: $dot-size;
-  margin-top: -($dot-size / 2);
-  margin-left: -($dot-size / 2);
+  margin-top: -($dot-size * 0.5);
+  margin-left: -($dot-size * 0.5);
   background-color: darken($primary, 15%);
   border: 3px solid #fff;
   border-radius: 50%;
-  animation: online-animation-dot ($online-animation-duration / 2) ease-out
-    ($online-animation-duration / 8 - $online-animation-duration) infinite alternate;
+  animation: online-animation-dot ($online-animation-duration * 0.5) ease-out
+    ($online-animation-duration * 0.125 - $online-animation-duration) infinite alternate;
 }
 .online-animation-ripple {
   position: absolute;
@@ -636,8 +638,8 @@ $ripple-scale-out: 3.4;
   left: 50%;
   width: $dot-size;
   height: $dot-size;
-  margin-top: -($dot-size / 2);
-  margin-left: -($dot-size / 2);
+  margin-top: -($dot-size * 0.5);
+  margin-left: -($dot-size * 0.5);
   //border: 1px solid #fff;
   background-image: radial-gradient(
     circle closest-side,
@@ -675,7 +677,7 @@ $ripple-scale-out: 3.4;
     opacity: 0.8;
   }
   30% {
-    transform: scale($ripple-scale-out / 2);
+    transform: scale($ripple-scale-out * 0.5);
     opacity: 0.4;
   }
   100% {
@@ -802,7 +804,7 @@ $ripple-scale-out: 3.4;
 .page-cover-image {
   display: block;
   width: 100%;
-  padding-bottom: (100% / 3);
+  padding-bottom: math.div(100%, 3);
   background-color: $gray-200;
   background-size: cover;
   background-position: center center;