diff --git a/assets/img-slider.css b/assets/img-slider.css
deleted file mode 100644
index bae7dfe..0000000
--- a/assets/img-slider.css
+++ /dev/null
@@ -1,38 +0,0 @@
-div.image-slider {
-    position:relative;
-    display: inline-block;
-    line-height: 0;
-    margin: 16px 0;
-    filter: invert(1%) sepia(4%);
-}
-#theme-switch:checked ~ #page div.image-slider.invertible {
-    filter: invert(90%) hue-rotate(180deg) sepia(1%)
-}
-div.image-slider > div {
-    position: absolute;
-    top: 0; bottom: 0; left: 0;
-    width:50%;
-    max-width: 100%;
-    overflow: hidden;
-    resize: horizontal;
-    border-right: 1px solid #9993;
-}
-div.image-slider > div:active {
-    width:25px;
-}
-div.image-slider > div:before {
-    content: '';
-    position: absolute;
-    right: 0; bottom: 0;
-    width: 13px; height: 13px;
-    background: linear-gradient(-45deg, #aaaa 50%, transparent 0);
-    background-clip: content-box;
-    cursor: ew-resize;
-    -webkit-filter: drop-shadow(0 0 2px black);
-    filter: drop-shadow(0 0 2px black);
-}
-div.image-slider img {
-    user-select: none;
-    max-width: min(640px, 75vw);
-    filter: none;
-}
diff --git a/assets/img-slider.scss b/assets/img-slider.scss
new file mode 100644
index 0000000..50387f3
--- /dev/null
+++ b/assets/img-slider.scss
@@ -0,0 +1,38 @@
+div.image-slider {
+    position:relative;
+    display: inline-block;
+    line-height: 0;
+    margin: 16px 0;
+    filter: invert(1%) sepia(4%);
+    & > div {
+        position: absolute;
+        top: 0; bottom: 0; left: 0;
+        width:50%;
+        max-width: 100%;
+        overflow: hidden;
+        resize: horizontal;
+        border-right: 1px solid #9993;
+        &:active {
+            width:25px;
+        }
+        &:before {
+            content: '';
+            position: absolute;
+            right: 0; bottom: 0;
+            width: 13px; height: 13px;
+            background: linear-gradient(-45deg, #aaaa 50%, transparent 0);
+            background-clip: content-box;
+            cursor: ew-resize;
+            -webkit-filter: drop-shadow(0 0 2px black);
+            filter: drop-shadow(0 0 2px black);
+        }
+    }
+    & img {
+        user-select: none;
+        max-width: min(640px, 75vw);
+        filter: none;
+    }
+}
+#theme-switch:checked ~ #page div.image-slider.invertible {
+    filter: invert(90%) hue-rotate(180deg) sepia(1%)
+}