build: use stylelint

Author: bjohansebas

Diff for: .github/workflows/ci.yml

@@ -28,9 +28,9 @@ jobs:
     - name: Install Node.js dependencies
       run: npm install
 
-    - name: Run tests
+    - name: Run Lint
       shell: bash
-      run: npm test
+      run: npm lint
 
     - name: Jekyll Build
       run: bundle exec jekyll build

Diff for: .gitignore

@@ -10,3 +10,5 @@ _site
 .jekyll-metadata
 vendor
 .bundle
+
+.stylelintcache

Diff for: .stylelintignore

@@ -0,0 +1,3 @@
+css/font-awesome.min.css
+
+_site

Diff for: .stylelintrc.mjs

@@ -0,0 +1,12 @@
+  
+export default {
+  extends: ['stylelint-config-standard'],
+  plugins: ['stylelint-order'],
+  rules: {
+    // Enforces the order of the CSS properties to be in alphabetical order
+    'order/properties-alphabetical-order': true,
+    'no-descending-specificity': null,
+    // Disables the Level-4 Media Queries; Since they're more exotic and less known
+    'media-feature-range-notation': 'prefix',
+  },
+};

Diff for: css/langs/th.css

@@ -4,16 +4,16 @@
 }
 
 #description .description {
-    position: relative;
-    top: -5px;
-    font: 100 4.1em "TH SarabunNew", "Helvetica Neue", "Open Sans", sans-serif;
     color: #aeaeae;
+    font: 100 4.1em "TH SarabunNew", "Helvetica Neue", "Open Sans", sans-serif;
     line-height: .87;
     margin: unset;
+    position: relative;
+    top: -5px;
   }
 
   /* Non-English pages use pre and code tags for code blocks */
 .non-en-doc .page pre[class*="language-"] {
-  padding-top: 10px !important;
   padding-bottom: 10px !important;
+  padding-top: 10px !important;
 }

Diff for: css/search.css

@@ -6,8 +6,8 @@
 }
 
 .algolia-autocomplete {
-  min-width: 12em;
   max-width: 12em;
+  min-width: 12em;
   top: -0.2em;
 }
 

Diff for: css/sintax.css

@@ -24,8 +24,8 @@
 .highlight table pre { margin: 0; }
 
 .highlight, .highlight .w {
-  color: #24292f;
   background-color: var(--code-bg);
+  color: #24292f;
 }
 
 .highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
@@ -37,8 +37,8 @@
 }
 
 .highlight .gd {
-  color: var(--red-darker);
   background-color: #ffebe9;
+  color: var(--red-darker);
 }
 
 .highlight .nb,
@@ -57,8 +57,8 @@
 }
 
 .highlight .ges {
-  font-weight: bold;
   font-style: italic;
+  font-weight: bold;
 }
 
 .highlight .l, 
@@ -95,20 +95,24 @@
 .highlight .gh {
   font-weight: bold;
 }
+
 .highlight .gu {
   font-weight: bold;
 }
+
 .highlight .s, .highlight .sa, .highlight .sc, .highlight .sd,  .highlight .se, .highlight .sh, .highlight .sx, .highlight .ss {
   color: var(--blue-darker);
 }
+
 .highlight .nd, .highlight .nf, .highlight .fm {
   color: var(--pupple);
 }
 
 .highlight .err {
-  color: #f6f8fa;
   background-color: #82071e;
+  color: #f6f8fa;
 }
+
 .highlight .c, 
 .highlight .gl
 .highlight .ch,