From b4117ebc94b337a6d89212aa40bf863b57714cb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Tue, 13 Sep 2022 01:01:43 +0200
Subject: [PATCH] Fix SASS deprecation

This is a super annoying breaking change in sass (it also happens in `node-sass`/`node-scss`), but there seems to be no way around it.

context: https://sass-lang.com/documentation/breaking-changes/slash-div
---
 website/src/styles/aside.module.sass      | 7 ++++---
 website/src/styles/embed.module.sass      | 4 +++-
 website/src/styles/grid.module.sass       | 3 ++-
 website/src/styles/quickstart.module.sass | 3 ++-
 website/src/styles/sidebar.module.sass    | 9 +++++----
 5 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/website/src/styles/aside.module.sass b/website/src/styles/aside.module.sass
index 1ea3f970a..aca74a33a 100644
--- a/website/src/styles/aside.module.sass
+++ b/website/src/styles/aside.module.sass
@@ -1,3 +1,4 @@
+@use 'sass:math'
 @import base
 
 $triangle-size: 2rem
@@ -55,14 +56,14 @@ $border-radius: 6px
         // Banner effect
         &:after
             position: absolute
-            bottom: -$triangle-size / 2
-            left: $border-radius / 2
+            bottom: math.div(-$triangle-size, 2)
+            left: math.div($border-radius, 2)
             width: 0
             height: 0
             border-color: transparent
             border-style: solid
             border-top-color: var(--color-dark)
-            border-width: $triangle-size / 2 0 0 calc(#{$triangle-size} - #{$border-radius / 2})
+            border-width: math.div($triangle-size, 2) 0 0 calc(#{$triangle-size} - #{math.div($border-radius, 2)})
             content: ""
 
 @include breakpoint(max, sm)
diff --git a/website/src/styles/embed.module.sass b/website/src/styles/embed.module.sass
index d8b148317..fdb740951 100644
--- a/website/src/styles/embed.module.sass
+++ b/website/src/styles/embed.module.sass
@@ -1,3 +1,5 @@
+@use 'sass:math'
+
 .root
     margin-bottom: var(--spacing-md)
 
@@ -7,7 +9,7 @@
 
 @each $ratio1, $ratio2 in (16, 9), (4, 3)
     .ratio#{$ratio1}x#{$ratio2}
-        padding-bottom: (100% * $ratio2 / $ratio1)
+        padding-bottom: (100% * math.div($ratio2, $ratio1))
 
 .iframe
     position: absolute
diff --git a/website/src/styles/grid.module.sass b/website/src/styles/grid.module.sass
index 482ad03cf..7bf8ebd56 100644
--- a/website/src/styles/grid.module.sass
+++ b/website/src/styles/grid.module.sass
@@ -1,3 +1,4 @@
+@use 'sass:math'
 @import base
 
 $grid-gap-wide: 5rem
@@ -9,7 +10,7 @@ $flex-gap: 2rem
         @if $gap == 0
             flex: 0 0 100% / $cols
         @else
-            flex: 0 0 calc(#{100% / $cols} - #{$gap * ($cols - 1)})
+            flex: 0 0 calc(#{math.div(100%, $cols)} - #{$gap * ($cols - 1)})
 
 .root
     display: flex
diff --git a/website/src/styles/quickstart.module.sass b/website/src/styles/quickstart.module.sass
index d0f9db551..d89748d0c 100644
--- a/website/src/styles/quickstart.module.sass
+++ b/website/src/styles/quickstart.module.sass
@@ -1,3 +1,4 @@
+@use 'sass:math'
 @import base
 
 .root
@@ -82,7 +83,7 @@
         vertical-align: middle
         margin-right: 0.5rem
         cursor: pointer
-        border-radius: $size / 4
+        border-radius: math.div($size, 4)
         background: var(--color-back)
         position: relative
         top: -1px
diff --git a/website/src/styles/sidebar.module.sass b/website/src/styles/sidebar.module.sass
index ace19e6a4..36809dfbe 100644
--- a/website/src/styles/sidebar.module.sass
+++ b/website/src/styles/sidebar.module.sass
@@ -1,3 +1,4 @@
+@use 'sass:math'
 @import base
 
 $crumb-bullet: 14px
@@ -58,7 +59,7 @@ $crumb-bar: 2px
     position: relative
 
 .crumb
-    margin-bottom: $crumb-bullet / 2
+    margin-bottom: math.div($crumb-bullet, 2)
     position: relative
     padding-left: 2rem
     color: var(--color-theme)
@@ -71,7 +72,7 @@ $crumb-bar: 2px
         width: $crumb-bullet
         height: $crumb-bullet
         position: absolute
-        top: $crumb-bullet / 4
+        top: math.div($crumb-bullet, 4)
         left: 0
         content: ""
         border-radius: 50%
@@ -83,13 +84,13 @@ $crumb-bar: 2px
         height: 100%
         position: absolute
         top: $crumb-bullet
-        left: ($crumb-bullet - $crumb-bar) / 2
+        left: math.div(($crumb-bullet - $crumb-bar), 2)
         content: ""
         background: var(--color-subtle)
 
     &:first-child:before
         height: calc(100% + #{$crumb-bullet * 2})
-        top: -$crumb-bullet / 2
+        top: math.div(-$crumb-bullet, 2)
 
 .crumb-active
     color: var(--color-dark)