diff --git a/.stylelintrc b/.stylelintrc
index b02d783..36225c9 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -2,14 +2,12 @@
   "extends": [
     "stylelint-config-standard",
     "stylelint-config-css-modules",
-    "stylelint-prettier/recommended"
+    "./node_modules/prettier-stylelint/config.js"
   ],
   "syntax": "scss",
-  "plugins": ["stylelint-prettier"],
   "rules": {
-      "prettier/prettier": [true, {
-        "indentation": 4,
-        "no-descending-specificity": null
-      }]
+      "indentation": 4,
+      "number-leading-zero": "never",
+      "no-descending-specificity": null
   }
 }
diff --git a/package.json b/package.json
index 7209cda..d16fd97 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
     "lint": "npm run lint:js && npm run lint:css",
     "build": "./node_modules/gatsby/dist/bin/gatsby.js build",
     "dev": "./node_modules/gatsby/dist/bin/gatsby.js develop --host 0.0.0.0",
-    "format": "prettier --write 'src/**/*.{js,jsx,css,scss}'",
+    "format": "prettier --write 'src/**/*.{js,jsx}'",
+    "format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'",
     "test": "npm run lint && jest --coverage",
     "test:watch": "npm run lint && jest --coverage --watch",
     "deploy": "./scripts/deploy.sh",
@@ -73,16 +74,14 @@
     "jest-canvas-mock": "^2.0.0",
     "jest-dom": "^3.1.3",
     "ora": "^3.4.0",
-    "postcss-scss": "^2.0.0",
     "prepend": "^1.0.2",
     "prettier": "^1.17.0",
+    "prettier-stylelint": "^0.4.2",
     "react-testing-library": "^7.0.0",
     "slugify": "^1.3.4",
     "stylelint": "^10.0.1",
     "stylelint-config-css-modules": "^1.3.0",
-    "stylelint-config-prettier": "^5.1.0",
     "stylelint-config-standard": "^18.3.0",
-    "stylelint-prettier": "^1.0.6",
     "why-did-you-update": "^1.0.6"
   },
   "browserslist": [
diff --git a/src/components/atoms/Button.module.scss b/src/components/atoms/Button.module.scss
index 82d502f..edb727d 100644
--- a/src/components/atoms/Button.module.scss
+++ b/src/components/atoms/Button.module.scss
@@ -5,11 +5,11 @@
     width: 100%;
     color: $brand-cyan;
     text-align: center;
-    border-radius: 0.25rem;
+    border-radius: .25rem;
     padding: $spacer / 4 $spacer / 2;
     transition-property: all;
-    background: rgba(#fff, 0.15);
-    border: 0.05rem solid rgba($brand-cyan, 0.75);
+    background: rgba(#fff, .15);
+    border: .05rem solid rgba($brand-cyan, .75);
     font-size: $font-size-small;
     text-transform: uppercase;
     cursor: pointer;
@@ -22,8 +22,8 @@
     svg {
         fill: $brand-grey-light;
         margin-right: $spacer / 3;
-        transition: 0.2s ease-out;
-        margin-bottom: -0.1rem;
+        transition: .2s ease-out;
+        margin-bottom: -.1rem;
         width: $font-size-small;
         height: $font-size-small;
     }
@@ -31,15 +31,15 @@
     &:hover,
     &:focus {
         color: lighten($brand-cyan, 10%);
-        border-color: rgba(lighten($brand-cyan, 10%), 0.75);
-        transform: translate3d(0, -0.1rem, 0);
-        box-shadow: 0 6px 10px rgba($brand-main, 0.1),
-            0 10px 25px rgba($brand-main, 0.05);
+        border-color: rgba(lighten($brand-cyan, 10%), .75);
+        transform: translate3d(0, -.1rem, 0);
+        box-shadow: 0 6px 10px rgba($brand-main, .1),
+            0 10px 25px rgba($brand-main, .05);
     }
 
     &:active {
         transition: none;
-        background: rgba(#fff, 0.15);
+        background: rgba(#fff, .15);
     }
 
     :global(.dark) & {
@@ -47,8 +47,8 @@
 
         &:hover,
         &:focus {
-            box-shadow: 0 6px 10px rgba(darken($brand-main, 20%), 0.1),
-                0 10px 25px rgba(darken($brand-main, 20%), 0.2);
+            box-shadow: 0 6px 10px rgba(darken($brand-main, 20%), .1),
+                0 10px 25px rgba(darken($brand-main, 20%), .2);
         }
     }
 }
diff --git a/src/components/atoms/HostnameCheck.module.scss b/src/components/atoms/HostnameCheck.module.scss
index 94557d4..58b6f61 100644
--- a/src/components/atoms/HostnameCheck.module.scss
+++ b/src/components/atoms/HostnameCheck.module.scss
@@ -7,10 +7,10 @@
     padding: $spacer / 3;
     font-size: $font-size-small;
     font-weight: bold;
-    background: rgba($brand-light, 0.8);
+    background: rgba($brand-light, .8);
 
     :global(.dark) & {
-        background: rgba($body-background-color--dark, 0.8);
+        background: rgba($body-background-color--dark, .8);
     }
 
     p {
diff --git a/src/components/atoms/Icons.module.scss b/src/components/atoms/Icons.module.scss
index a4b56c5..fdd5639 100644
--- a/src/components/atoms/Icons.module.scss
+++ b/src/components/atoms/Icons.module.scss
@@ -6,5 +6,5 @@
     fill: $brand-grey-light;
     stroke: none;
     vertical-align: baseline;
-    margin-bottom: -0.04rem;
+    margin-bottom: -.04rem;
 }
diff --git a/src/components/molecules/Availability.module.scss b/src/components/molecules/Availability.module.scss
index a63d541..7898fca 100644
--- a/src/components/molecules/Availability.module.scss
+++ b/src/components/molecules/Availability.module.scss
@@ -1,7 +1,7 @@
 @import 'variables';
 
 .availability {
-    border-radius: 0.25rem;
+    border-radius: .25rem;
     color: $text-color-light;
     z-index: 2;
     padding: $spacer / 2;
@@ -17,12 +17,12 @@
     }
 
     a {
-        border-bottom: 1px solid rgba($brand-cyan, 0.4);
+        border-bottom: 1px solid rgba($brand-cyan, .4);
     }
 }
 
 .available {
-    background: rgba($brand-light, 0.8);
+    background: rgba($brand-light, .8);
     color: $brand-main;
     position: fixed;
     bottom: $spacer;
@@ -30,7 +30,7 @@
     transform: translateX(-50%);
 
     :global(.dark) & {
-        background: rgba($body-background-color--dark, 0.8);
+        background: rgba($body-background-color--dark, .8);
         color: $brand-light;
     }
 }
diff --git a/src/components/molecules/LogoUnit.module.scss b/src/components/molecules/LogoUnit.module.scss
index 904abd2..5bfebcc 100644
--- a/src/components/molecules/LogoUnit.module.scss
+++ b/src/components/molecules/LogoUnit.module.scss
@@ -33,7 +33,7 @@
 
     &::before,
     &::after {
-        opacity: 0.4;
+        opacity: .4;
     }
 
     &::before {
@@ -46,7 +46,7 @@
 }
 
 .minimal {
-    transform: scale(0.7);
+    transform: scale(.7);
     transform-origin: top center;
     transform-box: border-box;
 
@@ -61,6 +61,6 @@
 
     .logo {
         margin-bottom: $spacer / 3;
-        opacity: 0.5;
+        opacity: .5;
     }
 }
diff --git a/src/components/molecules/Networks.module.scss b/src/components/molecules/Networks.module.scss
index f5b0695..6695269 100644
--- a/src/components/molecules/Networks.module.scss
+++ b/src/components/molecules/Networks.module.scss
@@ -15,8 +15,8 @@
     font-size: $font-size-mini;
     color: $brand-grey-light;
     opacity: 0;
-    transform: translate3d(0, 0.5rem, 0);
-    transition: 0.2s $easing;
+    transform: translate3d(0, .5rem, 0);
+    transition: .2s $easing;
 }
 
 .link {
@@ -28,7 +28,7 @@
 
     &,
     svg {
-        transition: 0.2s $easing;
+        transition: .2s $easing;
     }
 
     svg {
@@ -57,8 +57,8 @@
 
     /* stylelint-disable no-descending-specificity */
     svg {
-        width: 0.75rem;
-        height: 0.75rem;
-        opacity: 0.8;
+        width: .75rem;
+        height: .75rem;
+        opacity: .8;
     }
 }
diff --git a/src/components/molecules/ProjectImage.module.scss b/src/components/molecules/ProjectImage.module.scss
index 4366c16..1284614 100644
--- a/src/components/molecules/ProjectImage.module.scss
+++ b/src/components/molecules/ProjectImage.module.scss
@@ -4,18 +4,18 @@
     margin-left: auto;
     margin-right: auto;
     display: block;
-    box-shadow: 0 3px 5px rgba($brand-main, 0.15),
-        0 5px 16px rgba($brand-main, 0.15);
+    box-shadow: 0 3px 5px rgba($brand-main, .15),
+        0 5px 16px rgba($brand-main, .15);
 
     @media (min-width: $projectImageMaxWidth) {
         max-width: $projectImageMaxWidth;
-        border-radius: 0.25rem;
+        border-radius: .25rem;
         overflow: hidden;
     }
 
     :global(.dark) & {
-        box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), 0.15),
-            0 5px 16px rgba(darken($brand-main, 20%), 0.15);
+        box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), .15),
+            0 5px 16px rgba(darken($brand-main, 20%), .15);
     }
 
     img {
diff --git a/src/components/molecules/ProjectNav.module.scss b/src/components/molecules/ProjectNav.module.scss
index 9459b3c..0a81744 100644
--- a/src/components/molecules/ProjectNav.module.scss
+++ b/src/components/molecules/ProjectNav.module.scss
@@ -52,12 +52,12 @@
 
 .image {
     margin: 0;
-    box-shadow: 0 3px 5px rgba($brand-main, 0.15),
-        0 5px 16px rgba($brand-main, 0.15);
+    box-shadow: 0 3px 5px rgba($brand-main, .15),
+        0 5px 16px rgba($brand-main, .15);
 
     :global(.dark) & {
-        box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), 0.15),
-            0 5px 16px rgba(darken($brand-main, 20%), 0.15);
+        box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), .15),
+            0 5px 16px rgba(darken($brand-main, 20%), .15);
     }
 }
 
diff --git a/src/components/molecules/ProjectTechstack.module.scss b/src/components/molecules/ProjectTechstack.module.scss
index 30a30d4..200fd80 100644
--- a/src/components/molecules/ProjectTechstack.module.scss
+++ b/src/components/molecules/ProjectTechstack.module.scss
@@ -14,9 +14,9 @@
         justify-content: center;
         padding: $spacer / 4;
         text-align: center;
-        background: rgba(#fff, 0.15);
-        border-radius: 0.25rem;
-        border: 0.05rem solid transparent;
+        background: rgba(#fff, .15);
+        border-radius: .25rem;
+        border: .05rem solid transparent;
         color: $brand-grey-light;
         font-size: $font-size-small;
 
diff --git a/src/components/molecules/ThemeSwitch.module.scss b/src/components/molecules/ThemeSwitch.module.scss
index 5ac2517..45f6fc6 100644
--- a/src/components/molecules/ThemeSwitch.module.scss
+++ b/src/components/molecules/ThemeSwitch.module.scss
@@ -7,15 +7,15 @@
     z-index: 10;
 
     svg {
-        width: 0.8rem;
-        height: 0.8rem;
-        margin-top: -0.05rem;
+        width: .8rem;
+        height: .8rem;
+        margin-top: -.05rem;
         fill: $brand-grey-light;
 
         &:last-child {
-            margin-top: -0.1rem;
-            width: 0.7rem;
-            height: 0.7rem;
+            margin-top: -.1rem;
+            width: .7rem;
+            height: .7rem;
         }
     }
 }
@@ -47,7 +47,7 @@ $knob-space: 1px;
         height: $knob-size;
         background-color: $brand-grey-light;
         border-radius: 15rem;
-        transition: transform 0.2s $easing;
+        transition: transform .2s $easing;
         transform: translate3d(0, 0, 0);
     }
 }
diff --git a/src/pages/404.module.scss b/src/pages/404.module.scss
index ef42c21..2b86fbc 100644
--- a/src/pages/404.module.scss
+++ b/src/pages/404.module.scss
@@ -11,8 +11,8 @@
         display: block;
         width: auto;
         height: 300px;
-        box-shadow: 0 3px 5px rgba($brand-main, 0.15),
-            0 5px 16px rgba($brand-main, 0.15);
+        box-shadow: 0 3px 5px rgba($brand-main, .15),
+            0 5px 16px rgba($brand-main, .15);
         margin: $spacer / 4 auto $spacer / 2 auto;
     }
 }
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index a8b2d24..61515ad 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -22,29 +22,9 @@
     margin: 0;
     z-index: 2;
     padding: $spacer / 3 $spacer;
-    background: rgba($brand-cyan, 0.9);
+    background: rgba($brand-cyan, .9);
     transform: translate3d(0, -1rem, 0);
-    transition: transform 0.2s ease-out;
-}
-
-.imageCount {
-    position: absolute;
-    bottom: 10%;
-    right: 0;
-    color: $brand-grey-dimmed;
-    font-size: $font-size-small;
-    padding: $spacer / 6 $spacer / 2;
-    background: rgba($brand-cyan, 0.9);
-    z-index: 10;
-    opacity: 0;
-    transform: translate3d(0, $spacer / 2, 0);
-    transition: transform 0.25s ease-out;
-
-    svg {
-        fill: $brand-grey-dimmed;
-        width: $font-size-mini;
-        height: $font-size-mini;
-    }
+    transition: transform .2s ease-out;
 }
 
 .project {
@@ -63,13 +43,13 @@
             bottom: 0;
             z-index: 1;
             background: transparent;
-            transition: background 0.2s ease-out;
+            transition: background .2s ease-out;
         }
 
         &:hover,
         &:focus {
             &::after {
-                background: rgba($brand-cyan, 0.05);
+                background: rgba($brand-cyan, .05);
             }
 
             .title {
@@ -85,3 +65,23 @@
         }
     }
 }
+
+.imageCount {
+    position: absolute;
+    bottom: 10%;
+    right: 0;
+    color: $brand-grey-dimmed;
+    font-size: $font-size-small;
+    padding: $spacer / 6 $spacer / 2;
+    background: rgba($brand-cyan, .9);
+    z-index: 10;
+    opacity: 0;
+    transform: translate3d(0, $spacer / 2, 0);
+    transition: transform .25s ease-out;
+
+    svg {
+        fill: $brand-grey-dimmed;
+        width: $font-size-mini;
+        height: $font-size-mini;
+    }
+}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 5528464..52a4acc 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,5 +1,5 @@
 $projectImageMaxWidth: 1200px;
-$easing: cubic-bezier(0.75, 0, 0.08, 1);
+$easing: cubic-bezier(.75, 0, .08, 1);
 
 // Colors
 /////////////////////////////////////
@@ -35,8 +35,8 @@ $font-size-root: 18px;
 
 $font-size-base: 1rem;
 $font-size-large: 1.2rem;
-$font-size-small: 0.8rem;
-$font-size-mini: 0.7rem;
+$font-size-small: .8rem;
+$font-size-mini: .7rem;
 
 $font-size-h1: 2.5rem;
 $font-size-h2: 2rem;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 280f895..289bcbb 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -29,7 +29,7 @@ body {
     -moz-osx-font-smoothing: grayscale;
     min-height: 100vh;
     background: $body-background-color;
-    transition: background 0.2s $easing;
+    transition: background .2s $easing;
 
     &.dark {
         background-color: $body-background-color--dark;
@@ -93,12 +93,12 @@ h6 {
 a {
     color: $brand-cyan;
     text-decoration: none;
-    transition: 0.2s ease-out;
+    transition: .2s ease-out;
 
     &:hover,
     &:focus {
         color: lighten($brand-cyan, 10%);
-        transform: translate3d(0, -0.1rem, 0);
+        transform: translate3d(0, -.1rem, 0);
     }
 }