Linting, so much linting

I installed and configured stylelint and eslint, and added an editorconfig as well as a vscode recommended extensions file.

The reason the diff is so large is I ran the linters and fixed all the linting issues.

src/builds/dark.css

@@ -9,5 +9,4 @@
 
 @import '../variables-dark.css';
 @import '../variables-light.css' (prefers-color-scheme: light);
-
 @import '../parts/_core.css';

src/builds/light.css

@@ -9,6 +9,4 @@
 
 @import '../variables-light.css';
 @import '../variables-dark.css' (prefers-color-scheme: dark);
-
-
-@import '../parts/_core.css';
+@import '../parts/_core.css';

src/parts/_base.css

@@ -1,22 +1,22 @@
 body {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   line-height: 1.4;
-
   max-width: 800px;
   margin: 20px auto;
   padding: 0 10px;
   word-wrap: break-word;
-
   color: var(--text-main);
   background: var(--background-body);
-
   text-rendering: optimizeLegibility;
 }
 
-button, input, textarea {
-  transition: background-color var(--animation-duration) linear,
-              border-color var(--animation-duration) linear,
-              color var(--animation-duration) linear,
-              box-shadow var(--animation-duration) linear,
-              transform var(--animation-duration) ease;
+button,
+input,
+textarea {
+  transition:
+    background-color var(--animation-duration) linear,
+    border-color var(--animation-duration) linear,
+    color var(--animation-duration) linear,
+    box-shadow var(--animation-duration) linear,
+    transform var(--animation-duration) ease;
 }

src/parts/_code.css

@@ -1,5 +1,7 @@
-code, samp, time {
-  background:  var(--background);
+code,
+samp,
+time {
+  background: var(--background);
   color: var(--code);
   padding: 2.5px 5px;
   border-radius: 6px;
@@ -24,4 +26,4 @@ kbd {
   border-radius: 2px;
   color: var(--text-main);
   padding: 2px 4px 2px 4px;
-}
+}

src/parts/_core.css

@@ -4,4 +4,4 @@
 @import '_range.css';
 @import '_links.css';
 @import '_code.css';
-@import '_misc.css';
+@import '_misc.css';

src/parts/_forms.css

@@ -1,4 +1,5 @@
-button, select,
+button,
+select,
 input[type='submit'],
 input[type='button'],
 input[type='checkbox'],
@@ -11,25 +12,6 @@ select {
   display: block;
 }
 
-input,
-button,
-textarea,
-select {
-  color: var(--form-text);
-  background-color: var(--background);
-
-  font-family: inherit;
-  font-size: inherit;
-
-  margin-right: 6px;
-  margin-bottom: 6px;
-  padding: 10px;
-
-  border: none;
-  border-radius: 6px;
-  outline: none;
-}
-
 input:not([type='checkbox']):not([type='radio']),
 input[type='range'],
 select,
@@ -112,4 +94,4 @@ fieldset {
 legend {
   font-size: 0.9em;
   font-weight: 600;
-}
+}

src/parts/_links.css

@@ -5,4 +5,4 @@ a {
 
 a:hover {
   text-decoration: underline;
-}
+}

src/parts/_misc.css

@@ -98,4 +98,4 @@ footer {
   padding-top: 10px;
   font-size: 0.8em;
   color: var(--text-muted);
-}
+}

src/parts/_range.css

@@ -17,7 +17,7 @@ input[type='range']::-webkit-slider-runnable-track {
 }
 
 input[type='range']::-webkit-slider-thumb {
-  box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d;
   height: 20px;
   width: 20px;
   border-radius: 50%;
@@ -39,7 +39,7 @@ input[type='range']::-moz-range-track {
 }
 
 input[type='range']::-moz-range-thumb {
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
   height: 20px;
   width: 20px;
   border-radius: 50%;
@@ -59,19 +59,19 @@ input[type='range']::-ms-fill-lower {
   background: var(--background);
   border: 0.2px solid #010101;
   border-radius: 3px;
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
 }
 
 input[type='range']::-ms-fill-upper {
   background: var(--background);
   border: 0.2px solid #010101;
   border-radius: 3px;
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
 }
 
 input[type='range']::-ms-thumb {
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-  border: 1px solid #000000;
+  box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+  border: 1px solid #000;
   height: 20px;
   width: 20px;
   border-radius: 50%;
@@ -84,4 +84,4 @@ input[type='range']:focus::-ms-fill-lower {
 
 input[type='range']:focus::-ms-fill-upper {
   background: var(--background);
-}
+}

src/parts/_typography.css

@@ -35,16 +35,17 @@ th {
 }
 
 q::before {
-   content: none;
+  content: none;
 }
 
 q::after {
-   content: none;
+  content: none;
 }
 
-blockquote, q {
+blockquote,
+q {
   border-left: 4px solid var(--focus);
-  margin: 1.5em 0em;
+  margin: 1.5em 0;
   padding: 0.5em 1em;
   font-style: italic;
 }
@@ -77,6 +78,6 @@ a[href^='sms\:']::before {
 mark {
   background-color: var(--highlight);
   border-radius: 2px;
-  padding: 0px 2px 0px 2px;
-  color: #000000;
+  padding: 0 2px 0 2px;
+  color: #000;
 }