Remove SCSS

Author: arqunis

index.html

@@ -23,9 +23,9 @@
             content="https://serenity-rs.github.io/logo.png"
         />
 
-        <link rel="stylesheet" href="/src/css/base.scss" />
+        <link rel="stylesheet" href="/src/css/base.css" />
 
-        <link rel="stylesheet" href="/src/css/style.scss" />
+        <link rel="stylesheet" href="/src/css/style.css" />
 
         <script>
             (function () {

package.json

@@ -25,11 +25,10 @@
   },
   "dependencies": {
     "browserslist-to-esbuild": "^2.1.1",
-    "sass-embedded": "^1.93.2",
-    "vite": "^7.1.7"
+    "vite": "^7.2.6"
   },
   "devDependencies": {
-    "@types/node": "^24.6.1",
+    "@types/node": "^24.10.1",
     "lightningcss": "^1.30.2",
     "oxfmt": "^0.16.0",
     "oxlint": "^1.31.0",

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-@forward "reset";
+@import url("./reset.css");
 
 :root {
     --bg-colour: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 10%));

src/css/base.scss renamed to src/css/base.css

@@ -11,15 +11,8 @@
 }
 
 html {
-    font-family:
-        ui-sans-serif,
-        system-ui,
-        sans-serif,
-        Apple Color Emoji,
-        Segoe UI Emoji,
-        Segoe UI Symbol,
-        Noto Color Emoji;
-
+    font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji,
+        Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 h1,
@@ -67,9 +60,7 @@ body {
 
     white-space: pre-wrap;
 
-    transition:
-        background-color 0.5s ease-in-out,
-        border-color 0.5s ease-in-out;
+    transition: background-color 0.5s ease-in-out, border-color 0.5s ease-in-out;
 }
 
 .button {
@@ -101,27 +92,26 @@ body {
     }
 
     transition: background-color 0.25s ease-in-out,
-    outline-color 0.25s ease-in-out,
-    box-shadow 0.25s ease-in-out;
+        outline-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
 }
 
 :root .github-icon,
 :root[data-scheme="light"] .github-icon {
-    &__black {
+    .github-icon__black {
         display: inline-block;
     }
 
-    &__white {
+    .github-icon__white {
         display: none;
     }
 }
 
 :root[data-scheme="dark"] .github-icon {
-    &__black {
+    .github-icon__black {
         display: none;
     }
 
-    &__white {
+    .github-icon__white {
         display: inline-block;
     }
 }
@@ -137,100 +127,90 @@ body {
     gap: 2em;
 }
 
-.navigation {
-    &__links {
-        margin: 0;
-        padding: 0;
+.navigation__links {
+    margin: 0;
+    padding: 0;
 
-        list-style: none;
+    list-style: none;
 
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        gap: 1em;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1em;
+}
 
-        &__link {
-            display: flex;
-            align-items: center;
-            gap: 0.5em;
+.navigation__links__link {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+}
 
-            &__icon {
-                &__image {
-                    block-size: 2em;
-                    inline-size: 2em;
-                }
-            }
+.navigation__links__link__icon__image {
+    block-size: 2em;
+    inline-size: 2em;
+}
 
-            &__label {
-                font-size: 1.25em;
-            }
-        }
-    }
+.navigation__links__link__label {
+    font-size: 1.25em;
 }
 
 .site-body {
     padding-block: 1em;
     padding-inline: 2em;
+}
 
-    &__header,
-    &__body,
-    &__footer {
-        padding-block: 0.5em;
+.site-body__header,
+.site-body__body,
+.site-body__footer {
+    padding-block: 0.5em;
 
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
 
-    &__header {
-        &__title {
-            text-align: center;
-        }
+.site-body__header__title {
+    text-align: center;
+}
 
-        &__logo {
-            margin-block: 0.5em;
-        }
+.site-body__header__logo {
+    margin-block: 0.5em;
+}
 
-        &__description {
-            text-align: center;
-        }
-    }
+.site-body__header__description {
+    text-align: center;
+}
 
-    &__footer {
-        gap: 0.5em;
+.site-body__footer {
+    gap: 0.5em;
+}
 
-        &__invite {
-            text-align: center;
-        }
+.site-body__footer__invite {
+    text-align: center;
+}
 
-        &__widget {
-            max-inline-size: 100%;
-        }
-    }
+.site-body__footer__widget {
+    max-inline-size: 100%;
 }
 
-.projects {
-    &__list {
-        margin-block-start: 0;
+.projects__list {
+    margin-block-start: 0;
 
-        padding-inline-start: 1em;
+    padding-inline-start: 1em;
 
-        list-style: none;
-    }
+    list-style: none;
 }
 
-.project {
-    &__heading {
-        margin-inline-start: -0.5em;
+.project__heading {
+    margin-inline-start: -0.5em;
 
-        border-block-end: 1px solid var(--border-colour);
+    border-block-end: 1px solid var(--border-colour);
 
-        transition: border-block-end-color 0.5s ease-in-out;
-    }
+    transition: border-block-end-color 0.5s ease-in-out;
+}
 
-    &__description {
-        max-inline-size: 70ch;
-    }
+.project__description {
+    max-inline-size: 70ch;
 }
 
 .site-footer {
@@ -239,10 +219,10 @@ body {
     border-block-start: 1px solid var(--border-colour);
 
     transition: border-block-start-color 0.5s ease-in-out;
+}
 
-    &__attribution {
-        margin: 0;
+.site-footer__attribution {
+    margin: 0;
 
-        text-indent: 0.5em;
-    }
+    text-indent: 0.5em;
 }