enforce logical properties with stylelint, fix all violations

Author: keithamus

css/blog.css

@@ -5,14 +5,14 @@ main {
 main > h1 {
   font-weight: normal;
   font-size: var(--font-size-7);
-  border-bottom: var(--border-size-2) solid var(--brand-color-dark);
+  border-block-end: var(--border-size-2) solid var(--brand-color-dark);
   padding-block-end: var(--size-2);
   display: block;
   max-inline-size: 100%;
 }
 
 main > header {
-  border-bottom: var(--border-size-2) solid var(--brand-color-dark);
+  border-block-end: var(--border-size-2) solid var(--brand-color-dark);
   margin-block-end: var(--size-4);
   max-inline-size: 100ch;
 }
@@ -53,7 +53,7 @@ main > header > h1 {
 }
 
 .author-block .avatar {
-  float: left;
+  float: inline-start;
   margin-inline-end: var(--size-3);
 }
 

css/global.css

@@ -155,7 +155,7 @@ page-search svg {
   inline-size: var(--size-4);
 
   /* XXX: alignment tweak */
-  margin-top: -2px;
+  margin-block-start: -2px;
 }
 
 .page-head {
@@ -165,7 +165,7 @@ page-search svg {
   block-size: var(--header-block-size);
   padding-inline: var(--size-2);
   background: var(--surface-1);
-  border-bottom: 1px solid var(--surface-3);
+  border-block-end: 1px solid var(--surface-3);
   grid-area: nav;
   display: flex;
   place-items: center;

css/index.css

@@ -59,7 +59,6 @@ hero-header > [slot="title"] {
   place-self: center;
   background: var(--brand-gradient) 200%;
   background-clip: text;
-  background-clip: text;
   -webkit-text-fill-color: transparent;
   font-size: var(--font-size-fluid-3) !important;
 }
@@ -124,7 +123,6 @@ advantage-item h2 {
   margin-block-end: var(--size-3);
   background: linear-gradient(to bottom right, var(--brand-color-medium), var(--brand-color-dark)) 200%;
   background-clip: text;
-  background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 

css/learn.css

@@ -7,7 +7,7 @@ main {
 
 main > h1 {
   font-weight: normal;
-  border-bottom: var(--border-size-2) solid var(--brand-color-dark);
+  border-block-end: var(--border-size-2) solid var(--brand-color-dark);
   padding-block-end: var(--size-2);
   margin-block-end: var(--size-8);
   display: block;

css/pagination.css

@@ -6,7 +6,7 @@
 .pagination :where([slot="next"], [slot="prev"]) {
   flex: 1;
   display: block;
-  border-bottom: var(--border-size-2) solid var(--brand);
+  border-block-end: var(--border-size-2) solid var(--brand);
   padding: var(--size-3);
 }
 
@@ -24,7 +24,7 @@
 }
 
 .pagination [slot="next"] {
-  text-align: right;
+  text-align: end;
 }
 
 .pagination [slot="prev"] svg {

css/tutorials.css

@@ -7,7 +7,7 @@ main {
 
 main > h1 {
   font-weight: normal;
-  border-bottom: var(--border-size-2) solid var(--brand-color-dark);
+  border-block-end: var(--border-size-2) solid var(--brand-color-dark);
   padding-block-end: var(--size-2);
   margin-block-end: var(--size-8);
   display: block;
@@ -16,7 +16,7 @@ main > h1 {
 }
 
 main > header {
-  border-bottom: var(--border-size-2) solid var(--brand-color-dark);
+  border-block-end: var(--border-size-2) solid var(--brand-color-dark);
   padding-block-end: var(--size-4);
   margin-block-end: var(--size-4);
   max-inline-size: 100ch;

package-lock.json

@@ -18,11 +18,18 @@
     "start": "eleventy --serve",
     "test": "npm run check",
     "remark": "remark . --quiet --frail",
+    "lint": "stylelint css/*",
     "check": "prettier --check . && npm run remark",
     "format": "prettier --write ."
   },
   "stylelint": {
-    "extends": "stylelint-config-standard"
+    "extends": "stylelint-config-standard",
+    "plugins": [
+      "stylelint-use-logical"
+    ],
+    "rules": {
+      "csstools/use-logical": "always"
+    }
   },
   "prettier": {
     "printWidth": 120,
@@ -87,6 +94,7 @@
     "retext-simplify": "^7.2.0",
     "retext-spell": "^5.3.0",
     "stylelint": "^14.16.0",
-    "stylelint-config-standard": "^29.0.0"
+    "stylelint-config-standard": "^29.0.0",
+    "stylelint-use-logical": "^2.0.0"
   }
 }