Add stylelint

.stylelintignore

@@ -0,0 +1 @@
+./.gitignore

.stylelintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"]
+}

package.json

@@ -11,9 +11,11 @@
     "build": "npm-run-all build:*",
     "lint:eslint": "eslint --ext js --report-unused-disable-directives .",
     "lint:prettier": "prettier --check static/src",
+    "lint:scss": "stylelint static/src/scss",
     "lint": "npm-run-all lint:*",
     "format:prettier": "prettier --write static/src",
     "format:eslint": "npm run lint:eslint -- --fix",
+    "format:scss": "npm run lint:scss -- --fix",
     "format": "npm-run-all format:*"
   },
   "author": "Jake Howard",
@@ -22,7 +24,10 @@
     "eslint": "^8.21.0",
     "npm-run-all": "^4.1.5",
     "prettier": "2.6.2",
-    "sass": "^1.52.3"
+    "sass": "^1.52.3",
+    "stylelint": "^14.9.1",
+    "stylelint-config-prettier-scss": "^0.0.1",
+    "stylelint-config-standard-scss": "^5.0.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.1.1",

static/src/scss/_blocks.scss

@@ -1,7 +1,6 @@
 @mixin center-block($width: 85%, $mobile-width: 90%) {
   width: $width;
   margin: 0 auto;
-
   max-width: $width;
   min-width: $width;
 

static/src/scss/_bulma_overrides.scss

@@ -3,12 +3,13 @@
 $container-max-width: $widescreen;
 $pre-background: unset;
 $family-code: "Fira Code", monospace;
-$dropdown-content-radius: 0px;
-$dropdown-content-offset: 0px;
+$dropdown-content-radius: 0;
+$dropdown-content-offset: 0;
 $primary: #e85537;
 $link: $primary;
 $dark: #17181c;
 
+// Navbar overrides
 $navbar-item-color: $grey-light;
 $navbar-background-color: $dark;
 $navbar-item-hover-color: $grey-lighter;
@@ -17,5 +18,5 @@ $navbar-colors: (); // Disable other variants to keep the size down
 
 $code-background: none;
 $pre-background: none;
-$code-padding: 0px;
+$code-padding: 0;
 $code: inherit;

static/src/scss/_homepage.scss

@@ -23,7 +23,7 @@ body.page-homepage {
   .latest {
     padding: 0.25rem 0.5rem;
     margin-top: 2rem;
-    background-color: transparentize($dark, 0.2);
+    background-color: color.adjust($dark, $alpha: -0.2);
     border-radius: $input-radius;
     max-width: 75%;
     overflow-x: hidden;
@@ -41,11 +41,11 @@ body.page-homepage {
     width: 85%;
     margin-top: 15px;
     text-align: center;
-    background-color: transparentize($dark, 0.2) !important;
+    background-color: color.adjust($dark, $alpha: -0.2) !important;
     color: $white !important;
 
     &::placeholder {
-      color: rgba(214, 210, 205, 0.8) !important;
+      color: rgba(214 210 205 / 80%) !important;
     }
 
     &:focus {

static/src/scss/_search.scss

@@ -2,6 +2,7 @@
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }

static/src/scss/base.scss

@@ -1,6 +1,6 @@
 @use "sass:math";
+@use "sass:color";
 
-@use "variables" as *;
 @use "bulma_overrides" as *;
 
 @import "bulma/bulma";