Merge pull request #46 from jdsteinbach/stylelint-refactor

Refactor styles & fix stylelint

.stylelintrc.json

@@ -9,11 +9,21 @@
   ],
   "rules": {
     "max-nesting-depth": 3,
-    "string-quotes": "double",
-    "function-parentheses-space-inside": "never-single-line",
+    "@stylistic/string-quotes": "double",
+    "@stylistic/function-parentheses-space-inside": "never-single-line",
+    "import-notation": "string",
+    "no-invalid-position-at-import-rule": null,
     "selector-class-pattern": "[a-z-_]+",
     "no-descending-specificity": null,
     "selector-no-qualifying-type": null,
+    "function-no-unknown": [
+      true,
+      {
+        "ignoreFunctions": [
+          "text-shadow"
+        ]
+      }
+    ],
     "at-rule-empty-line-before": [
       "always",
       {
@@ -24,7 +34,13 @@
         ]
       }
     ],
-    "color-hex-case": "upper",
+    "@stylistic/color-hex-case": "upper",
+    "value-keyword-case": [
+      "lower",
+      {
+        "camelCaseSvgKeywords": true
+      }
+    ],
     "order/order": [
       [
         "dollar-variables",
@@ -80,14 +96,14 @@
 
         {
           "properties": [
-            "box-sizing", "grid-template-columns", "grid-template-rows", "grid-template-areas", "grid-template", "grid-auto-columns", "grid-auto-rows", "grid-auto-flow", "grid", "grid-row-start", "grid-column-start", "grid-row-end", "grid-column-end", "grid-row", "grid-column", "grid-area", "grid-row-gap", "grid-column-gap", "grid-gap", "row-gap", "column-gap", "gap", "flex", "flex-basis", "flex-direction", "flex-flow", "flex-grow", "flex-shrink", "flex-wrap", "align-content", "align-items", "align-self", "justify-content", "justify-self", "place-items", "place-content", "order"
+            "box-sizing", "grid-template-columns", "grid-template-rows", "grid-template-areas", "grid-template", "grid-auto-columns", "grid-auto-rows", "grid-auto-flow", "grid", "grid-row-start", "grid-column-start", "grid-row-end", "grid-column-end", "grid-row", "grid-column", "grid-area", "grid-row-gap", "grid-column-gap", "grid-gap", "row-gap", "column-gap", "gap", "flex", "flex-basis", "flex-direction", "flex-flow", "flex-grow", "flex-shrink", "flex-wrap", "align-content", "align-items", "align-self", "justify-content", "justify-self", "place-items", "place-content", "order", "place-self"
           ],
           "order": "flexible"
         },
 
         {
           "properties": [
-            "float", "clear", "overflow", "overflow-x", "overflow-y",  "clip", "zoom", "columns", "column-gap", "column-fill", "column-rule", "column-span", "column-count", "column-width", "table-layout", "empty-cells", "caption-side", "border-spacing", "border-collapse", "position", "z-index", "top", "right", "bottom", "left"
+            "float", "clear", "overflow", "overflow-x", "overflow-y",  "clip", "zoom", "columns", "column-gap", "column-fill", "column-rule", "column-span", "column-count", "column-width", "table-layout", "empty-cells", "caption-side", "border-spacing", "border-collapse", "position", "z-index", "top", "right", "bottom", "left", "inset"
           ],
           "order": "flexible"
         },

src/assets/scss/_custom-props.scss

@@ -15,7 +15,7 @@
   --color-background-hero: var(--color-purple-dark);
   --color-background-dark: #{$color-gray};
   --color-background-code: #{rgba($color-gray, 0.15)};
-  --color-purple-dark: #{mix($color-purple, $color-gray)};
+  --color-purple-dark: #{color.mix($color-purple, $color-gray)};
 
   // Accent Colors
   --color-accent-1: #{$color-orange};
@@ -85,18 +85,18 @@
       --color-background-hero: var(--color-purple-dark);
       --color-background-dark: #{$color-gray};
       --color-background-code: #{rgba($color-goldenrod, 0.15)};
-      --color-purple-dark: #{mix($color-purple, $color-black, 35%)};
+      --color-purple-dark: #{color.mix($color-purple, $color-black, 35%)};
 
       // Accent Colors
-      --color-accent-1: #{mix($color-orange, $color-gray, 75%)};
-      --color-accent-2: #{mix($color-goldenrod, $color-gray, 75%)};
-      --color-accent-3: #{mix($color-yellow, $color-gray, 75%)};
+      --color-accent-1: #{color.mix($color-orange, $color-gray, 75%)};
+      --color-accent-2: #{color.mix($color-goldenrod, $color-gray, 75%)};
+      --color-accent-3: #{color.mix($color-yellow, $color-gray, 75%)};
 
       // Interaction Colors
       --color-link: #{rgba($color-yellow, 0.75)};
       --color-link-alt: #{$color-background-pale};
       --color-link-2: #{$color-pink};
-      --color-link-2-alt: #{mix($color-purple, $color-white)};
+      --color-link-2-alt: #{color.mix($color-purple, $color-white)};
       --color-focus: var(--color-link-alt);
       --blend-mode: lighten;
     }
@@ -115,18 +115,18 @@
     --color-background-hero: var(--color-purple-dark);
     --color-background-dark: #{$color-gray};
     --color-background-code: #{rgba($color-goldenrod, 0.15)};
-    --color-purple-dark: #{mix($color-purple, $color-black, 35%)};
+    --color-purple-dark: #{color.mix($color-purple, $color-black, 35%)};
 
     // Accent Colors
-    --color-accent-1: #{mix($color-orange, $color-gray, 75%)};
-    --color-accent-2: #{mix($color-goldenrod, $color-gray, 75%)};
-    --color-accent-3: #{mix($color-yellow, $color-gray, 75%)};
+    --color-accent-1: #{color.mix($color-orange, $color-gray, 75%)};
+    --color-accent-2: #{color.mix($color-goldenrod, $color-gray, 75%)};
+    --color-accent-3: #{color.mix($color-yellow, $color-gray, 75%)};
 
     // Interaction Colors
     --color-link: #{rgba($color-yellow, 0.75)};
     --color-link-alt: #{$color-background-pale};
     --color-link-2: #{$color-pink};
-    --color-link-2-alt: #{mix($color-purple, $color-white)};
+    --color-link-2-alt: #{color.mix($color-purple, $color-white)};
     --color-focus: var(--color-link-alt);
     --blend-mode: lighten;
   }

src/assets/scss/_variables.scss

@@ -7,10 +7,10 @@ $color-goldenrod: #FA6D26;
 $color-yellow: #FCA22B;
 
 $color-white: #FFF;
-$color-black: mix($color-gray, #000);
+$color-black: color.mix($color-gray, #000);
 
-$color-background: mix($color-yellow, $color-white);
-$color-background-pale: mix($color-yellow, $color-white, 33%);
+$color-background: color.mix($color-yellow, $color-white);
+$color-background-pale: color.mix($color-yellow, $color-white, 33%);
 
 // BORDERS
 $border-default: 1px solid $color-orange;

src/assets/scss/components/_archive-item.scss

@@ -48,10 +48,7 @@
     margin: auto;
     height: 3 * $base-spacing;
     position: absolute;
-    top: 0;
-    right: -$base-spacing;
-    bottom: 0;
-    left: -$base-spacing;
+    inset: 0 (-$base-spacing);
     z-index: 1;
     background-image:
       linear-gradient(

src/assets/scss/components/_header-nav.scss

@@ -18,10 +18,7 @@
     content: "";
     display: block;
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     background-color: var(--header-bg);
     opacity: var(--header-opacity, 1);
 
@@ -86,10 +83,7 @@
       content: "";
       display: block;
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 0;
       box-shadow: 0 0 0 2px currentColor;
       opacity: 0.5;
     }
@@ -98,10 +92,7 @@
   &::before {
     content: "";
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     z-index: 0;
     color: var(--color-accent-3);
     border-bottom: $tiny-spacing solid currentColor;

src/assets/scss/components/_pagination.scss

@@ -70,7 +70,6 @@
         var(--color-accent-3) 100%,
         transparent
       );
-    /* stylelint-disable-next-line length-zero-no-unit */
     transform: translateX(calc(var(--dir, 1) * var(--distance, 0px))) skewX(calc(var(--skew, 1) * var(--tilt)));
     transition: transform $duration $easing;
   }

src/assets/scss/components/_site-header.scss

@@ -16,10 +16,7 @@
     content: "";
     display: block;
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     background-color: var(--header-bg);
     opacity: var(--header-opacity, 1);
   }

src/assets/scss/functions/_text-shadow.scss

@@ -11,7 +11,7 @@
     $y-b: math.div($depth, $steps) * $i;
     $shadow-layer-a: $x $y-a $highlight-color;
     $shadow-layer-b: $x $y-b $shadow-color;
-    $shadow: append($shadow, ($shadow-layer-a, $shadow-layer-b), comma);
+    $shadow: list.append($shadow, ($shadow-layer-a, $shadow-layer-b), comma);
   }
 
   @return $shadow;

src/assets/scss/globals/_code.scss

@@ -72,9 +72,9 @@ $code-selectors: (
 @each $batch in $code-selectors {
   @each $s in $batch {
     .hljs-#{$s} {
-      $pct: math.div(100%, length($code-selectors)) * index($code-selectors, $batch);
+      $pct: math.div(100%, list.length($code-selectors)) * list.index($code-selectors, $batch);
 
-      color: mix($color-white, $color-goldenrod, $pct);
+      color: color.mix($color-white, $color-goldenrod, $pct);
     }
   }
 }

src/assets/scss/globals/_forms.scss

@@ -24,8 +24,7 @@
     "fname lname" auto
     "rewards submit" auto /
     1fr      1fr;
-  row-gap: $base-spacing;
-  column-gap: $small-spacing;
+  gap: $base-spacing $small-spacing;
   border-bottom: $border-default;
 
   @include bp(medium) {
@@ -129,8 +128,7 @@
 .form__submit {
   margin: 0;
   grid-area: submit;
-  align-self: flex-start;
-  justify-self: flex-end;
+  place-self: flex-start flex-end;
 
   .form--mailchimp & {
     width: 100%;

src/assets/scss/main.scss

@@ -1,4 +1,10 @@
+@use "sass:color";
+@use "sass:list";
 @use "sass:math";
+@use "sass:map";
+@use "sass:meta";
+
+// Start CSS
 
 @charset "utf-8";
 
@@ -30,7 +36,6 @@
 @import "globals/buttons";
 @import "globals/media";
 @import "globals/forms";
-
 // Layout Styles
 
 @import "layout";

src/assets/scss/mixins/_bp.scss

@@ -1,17 +1,18 @@
+/* stylelint-disable media-query-no-invalid */
 // Breakpoint MQ function
 
 @mixin bp($name) {
   @if $name == "default" {
     @content;
   }
 
-  @else if index(map-keys($breakpoints), $name) {
-    @media (min-width: map-get($breakpoints, $name)) {
+  @else if list.index(map.keys($breakpoints), $name) {
+    @media (min-width: map.get($breakpoints, $name)) {
       @content;
     }
   }
 
-  @else if type-of($name) == number {
+  @else if meta.type-of($name) == number {
     @media (min-width: #{$name}) {
       @content;
     }
@@ -21,3 +22,4 @@
     @warn "Invalid breakpoint `#{$name}`.";
   }
 }
+/* stylelint-enable media-query-no-invalid */

src/posts/2020-10-27-logical-properties.md

@@ -141,7 +141,8 @@ categories:
 <p>We’ve created a simple job posting card layout with CSS Grid. The column containing the title and department will take up as much room as is available, and the column with the location and hours will be only as wide as it needs to be. We’ll need to align both the location and hours to the end of their column.</p>
 <p>Let’s find the logical properties here. First, in <code class="inline">justify-content</code> - the grid columns will all be shifted to the <code class="inline">start</code> of the inline axis. In LTR, they’ll be at the left; in RTL, they’ll be at the right. Second, we’re overriding that <code class="inline">start</code> value for the location and hours. We always want that text to be aligned to the end of the grid, so we justify it with <code class="inline">end</code>. In the past, you might’ve just put <code class="inline">text-align: right</code> on that element (and then needed more CSS to override that in RTL mode). However, using Grid with <code class="inline">justify-self: end</code>, we get the same visual effect <em>and</em> it automatically switches for non-LTR writing modes.</p>
 <p>And yes, <code class="inline">text-align: end</code> would produce the same effect as <code class="inline">justify-self: end</code> in this context.</p>
-<p><iframe src="https://codepen.io/team/DockYard/pen/b3958c0e1702efe87f91b94a861603bb?editors=1100#0" width="100%" height="500"></iframe></p>
+<p><iframe src="https://codepen.io/jdsteinbach/pen/LYKxXKz?editors=1100#0" width="100%" height="500"></iframe></p>
+
 <h3>Absolutely-Positioned Buttons</h3>
 <p>I recently worked on a project with horizontally-scrollable rows. Each row had scroll-left / scroll-right buttons absolutely positioned at the left and right edges. The row used Grid layout, so as soon as we went RTL, it flipped automatically, but the buttons stayed put. Let’s use logical properties to solve that problem.</p>
 
@@ -179,7 +180,7 @@ categories:
 ```
 
 <p>Using <code class="inline">left</code> and <code class="inline">right</code> would have caused RTL problems, but using <code class="inline">inset-inline-*</code> creates positioning that responds correctly to changes in writing mode.</p>
-<p><iframe src="https://codepen.io/team/DockYard/pen/feec89c6d776e2bdc2cce623ada3b752?editors=1100#0" width="100%" height="500"></iframe></p>
+<p><iframe src="https://codepen.io/jdsteinbach/pen/XWLpyvN?editors=1100#0" width="100%" height="500"></iframe></p>
 <h3>Floated Images</h3>
 <p>You can use logical properties to make sure floated images are positioned correctly as well. With the existing physical properties, it was common to float images like this:</p>
 
@@ -217,7 +218,7 @@ img.end {
 }
 ```
 
-<p><iframe src="https://codepen.io/team/DockYard/pen/b468a48420bbef653b2c63fdfb6efee8?editors=1100#0" width="100%" height="500"></iframe></p>
+<p><iframe src="https://codepen.io/jdsteinbach/pen/vYqgQor?editors=1100#0" width="100%" height="500"></iframe></p>
 <h2>Conclusion</h2>
 <h3>Browser Support</h3>
 <p>Logical properties appear to have remarkably good browser support. According to caniuse, <a href="https://caniuse.com/#search=logical%20properties">logical property support</a> is as good as Grid support: all major desktop browsers, Mobile Safari, and modern Android browsers.</p>