From 7d3cbdad62f735704b0bd20ed218bd97485aa7ef Mon Sep 17 00:00:00 2001 From: Dmitry Verkhoturov Date: Fri, 1 Nov 2024 15:40:25 +0100 Subject: [PATCH] Apply sass-migrator migrations ``` sass-migrator calc-interpolation **/*.scss sass-migrator division **/*.scss sass-migrator strict-unary **/*.scs ``` --- hugo/src/scss/_archives.scss | 4 +-- hugo/src/scss/_mixins.scss | 10 +++++--- hugo/src/scss/_navbar.scss | 18 +++++++------ hugo/src/scss/_player.scss | 2 +- hugo/src/scss/_search.scss | 6 +++-- hugo/src/scss/_variables-custom.scss | 2 +- hugo/src/scss/_variables-dark.scss | 8 +++--- hugo/src/scss/_variables.scss | 10 +++++--- hugo/src/scss/main.scss | 38 +++++++++++++++------------- 9 files changed, 55 insertions(+), 43 deletions(-) diff --git a/hugo/src/scss/_archives.scss b/hugo/src/scss/_archives.scss index 404d5b5b3..a9801e05e 100644 --- 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 index 87afe9e85..0b0615c43 100644 --- 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 index 139d028e9..2b0e814ef 100644 --- 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 index 43fa18f2c..d99add0b3 100644 --- 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 index 3f6061a02..04f303c9b 100644 --- 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 index ec76f3c1c..fe16d57a7 100644 --- 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 index 6f247448f..51e48012c 100644 --- 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 index 7ea75029c..e5297fe3e 100644 --- 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 index 422be47e7..f9b4667bb 100644 --- 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,7 +211,7 @@ $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; @@ -217,7 +219,7 @@ $jumbotron-arc-width: 120%; 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;