Use px instead of rem for borders

Author: Strappazzon

.stylelintrc.yml

@@ -4,7 +4,7 @@ extends:
 
 plugins:
   # TODO: stylelint-a11y
-  #   https://github.com/developer-stylechain/stylelint-a11y
+  # https://github.com/developer-stylechain/stylelint-a11y
   - stylelint-plugin-defensive-css
 
 # Default rules
@@ -121,18 +121,22 @@ rules:
   # Units blacklist, with exceptions
   unit-disallowed-list:
     - [ms, pt, px]
-    - ignoreProperties:
+    - ignoreFunctions:
+        - px2em
+        - px2rem
+      ignoreProperties:
         px:
+          - border
+          - border-bottom
+          - border-radius
+          - border-top
           - bottom
           - box-shadow
           - font-size
           - left
           - right
           - text-shadow
           - top
-      ignoreFunctions:
-        - px2em
-        - px2rem
 
   # Lowercase keywords, with exceptions
   value-keyword-case:

_sass/base/_base.scss

@@ -76,7 +76,7 @@ address {
 hr {
   margin: 1rem 0;
   border: 0;
-  border-top: px2rem(1px) solid var(--brand-color);
+  border-top: 1px solid var(--brand-color);
   box-shadow: 0 0 15px var(--brand-color--shadow);
 }
 

_sass/components/_terminal.scss

@@ -1,11 +1,13 @@
 .terminal {
-  $border-radius: px2rem(5px);
-  $scrollbar-w: px2rem(10px);
+  // stylelint-disable unit-disallowed-list
+  $border-radius: 5px;
+  $scrollbar-w: 10px;
+  // stylelint-enable unit-disallowed-list
   width: px2rem(650px);
   margin: 0 auto 1rem;
   font-size: 0.875rem;
-  border: px2rem(1px) solid var(--border-color);
-  border-radius: calc(#{$border-radius} + #{px2rem(1px)});
+  border: 1px solid var(--border-color);
+  border-radius: calc(#{$border-radius} + 1px);
   scrollbar-width: #{$scrollbar-w};
   @include respond-to('large') {
     width: 100%;
@@ -22,7 +24,7 @@
     padding: px2rem(2px) px2rem(6px);
     line-height: 1.2;
     background: linear-gradient(180deg, #{var(--gradient-color--from)} 25%, #{var(--gradient-color--to)} 75%);
-    border-bottom: px2rem(1px) solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
     border-top-left-radius: #{$border-radius};
     border-top-right-radius: #{$border-radius};
     .task {

_sass/components/admonitions/_index.scss

@@ -1,11 +1,12 @@
 .admonition {
-  $border-radius: px2rem(6px);
+  // stylelint-disable-next-line unit-disallowed-list
+  $border-radius: 6px;
   $padding: 0.66rem;
   max-width: px2rem(400px);
   margin: 0 auto 1rem;
   background-color: var(--bg-color--clearest);
-  border: px2rem(2px) solid var(--text-color);
-  border-radius: calc(#{$border-radius} + #{px2rem(1px)});
+  border: 2px solid var(--text-color);
+  border-radius: calc(#{$border-radius} + 1px);
   .header,
   .footer {
     background-color: var(--bg-color--light);

_sass/components/cards/_machine.scss

@@ -10,8 +10,8 @@
   // Project info
   &__machine {
     font-size: 1rem;
-    border: px2rem(2px) solid var(--text-color);
-    border-radius: px2rem(5px);
+    border: 2px solid var(--text-color);
+    border-radius: 5px;
     .title {
       margin-bottom: 0.5rem;
       font-size: 1.25rem;
@@ -70,14 +70,14 @@
       }
     }
     hr {
-      border-top: px2rem(1px) solid var(--text-color);
+      border-top: 1px solid var(--text-color);
       box-shadow: 0 0 15px var(--text-color--shadow);
     }
   }
   // Blog post
   &__machine-alt {
     padding: px2rem(6px) px2rem(12px);
-    border: px2rem(10px) solid var(--border-color--dark);
+    border: 10px solid var(--border-color--dark);
     .date {
       font-size: 0.825rem;
       color: var(--text-color--secondary);

_sass/components/cards/_samaritan.scss

@@ -103,8 +103,8 @@
       width: px2em(66px, $font-size-small);
     }
     .content {
-      border-top: px2em(2px, $font-size-small) solid var(--bg-color--lightest);
-      border-bottom: px2em(2px, $font-size-small) solid var(--bg-color--lightest);
+      border-top: 2px solid var(--bg-color--lightest);
+      border-bottom: 2px solid var(--bg-color--lightest);
       &__row {
         flex-flow: row nowrap;
         margin: px2em(5px, $font-size-small) px2em(10px, $font-size-small);
@@ -119,7 +119,7 @@
   }
   // Header, used in top artists page
   &__samaritan-header {
-    border: px2rem(2px) solid var(--text-color);
+    border: 2px solid var(--text-color);
     .title {
       display: flex;
       flex-flow: row nowrap;
@@ -163,7 +163,7 @@
       width: 100%;
       margin-top: px2rem(2px);
       content: "";
-      border-bottom: px2rem(2px) solid var(--border-color--dark);
+      border-bottom: 2px solid var(--border-color--dark);
     }
     // Card title
     /* stylelint-disable-next-line no-descending-specificity */
@@ -179,14 +179,14 @@
       flex-wrap: nowrap;
       padding: px2rem(6px);
       background-color: var(--bg-color--light);
-      border-top: px2rem(1px) solid var(--border-color--dark);
-      border-bottom: px2rem(1px) solid var(--border-color--dark);
+      border-top: 1px solid var(--border-color--dark);
+      border-bottom: 1px solid var(--border-color--dark);
       .image {
         padding: px2rem(4px);
         margin-right: px2rem(3px);
         background-color: var(--bg-color);
-        border: px2rem(1px) solid var(--border-color--clear);
-        border-radius: px2rem(4px);
+        border: 1px solid var(--border-color--clear);
+        border-radius: 4px;
         @include respond-to('smaller') {
           display: none;
         }
@@ -201,7 +201,7 @@
         width: 100%;
         padding: 0.75em;
         margin-left: px2rem(3px);
-        border: px2rem(1px) solid var(--border-color--clear);
+        border: 1px solid var(--border-color--clear);
         @include respond-to('smaller') {
           border: 0;
         }
@@ -228,7 +228,7 @@
         .container__list {
           hr {
             margin: 0.1em 0;
-            border-top: px2rem(1px) solid var(--border-color--clear);
+            border-top: 1px solid var(--border-color--clear);
             box-shadow: unset;
           }
           .title {

_sass/layout/_header.scss

@@ -13,7 +13,7 @@ header {
   // margin-bottom: 3rem;
   font-size: $font-size-small;
   background-color: var(--bg-color--clearer);
-  border-bottom: px2em(1px, $font-size-small) solid var(--text-color);
+  border-bottom: 1px solid var(--text-color);
   .logo {
     font-family: 'Acens', $font-stack-text-system;
     @include respond-to('small') {

_sass/pages/_404.scss

@@ -13,7 +13,7 @@ body {
     padding-bottom: px2rem(2px);
     font-size: px2rem(26px);
     text-decoration: none;
-    border-bottom: px2rem(2px) solid currentColor;
+    border-bottom: 2px solid currentColor;
   }
   img {
     width: px2rem(32px);

_sass/pages/_blog.scss

@@ -12,7 +12,7 @@ article {
   video {
     max-width: 100%;
     height: auto;
-    border: px2rem(1px) solid var(--bg-color--lighter);
+    border: 1px solid var(--bg-color--lighter);
   }
   figure {
     // Liquid tag {% highlight :lang %} puts code blocks inside a <figure> HTML tag
@@ -121,7 +121,7 @@ article {
         font-size: 1.15em;
         appearance: none;
         background-color: var(--table-bg-color--even);
-        border: px2rem(1px) solid var(--border-color--dark);
+        border: 1px solid var(--border-color--dark);
         &:checked {
           &::before {
             position: absolute;
@@ -163,7 +163,7 @@ article {
     overflow: auto;
     overscroll-behavior: contain;
     line-height: 1.2;
-    border: px2rem(1px) solid var(--border-color--dark);
+    border: 1px solid var(--border-color--dark);
     border-radius: 0;
     code {
       word-break: normal;
@@ -177,7 +177,7 @@ article {
       color: var(--text-color--secondary);
       word-wrap: break-word;
       background-color: var(--bg-color--light);
-      border: px2rem(1px) solid var(--border-color--dark);
+      border: 1px solid var(--border-color--dark);
     }
   }
 
@@ -199,7 +199,7 @@ article {
       text-transform: uppercase;
     }
     thead {
-      border-bottom: px2rem(1px) solid var(--border-color--dark);
+      border-bottom: 1px solid var(--border-color--dark);
     }
     tbody {
       tr {
@@ -212,7 +212,7 @@ article {
       }
     }
     tfoot {
-      border-top: px2rem(1px) solid var(--border-color--dark);
+      border-top: 1px solid var(--border-color--dark);
     }
     thead,
     tfoot {
@@ -233,7 +233,7 @@ article {
     margin: 1rem;
     color: var(--text-color--secondary);
     background-color: var(--bg-color--clear);
-    border: px2rem(8px) solid var(--border-color--dark);
+    border: 8px solid var(--border-color--dark);
     // stylelint-disable-next-line no-descending-specificity
     p {
       margin-bottom: 0;
@@ -245,7 +245,7 @@ article {
     &[title] {
       text-decoration: none;
       cursor: help;
-      border-bottom: px2rem(1px) solid var(--brand-color);
+      border-bottom: 1px solid var(--brand-color);
     }
   }
 
@@ -275,7 +275,7 @@ article {
       padding: px2rem(6px);
       text-transform: uppercase;
       user-select: none;
-      border-bottom: px2rem(2px) solid;
+      border-bottom: 2px solid;
       transition: 0.3s;
       & ~ div {
         display: flex;
@@ -284,7 +284,7 @@ article {
         padding: 0.75rem;
         overflow: auto;
         overscroll-behavior: contain;
-        border-bottom: px2rem(2px) solid var(--border-color--dark);
+        border-bottom: 2px solid var(--border-color--dark);
         p {
           &:last-of-type {
             margin-bottom: 0;
@@ -331,7 +331,7 @@ article {
   }
   .footnotes {
     padding-top: 1rem;
-    border-top: px2rem(1px) solid var(--brand-color);
+    border-top: 1px solid var(--brand-color);
     // stylelint-disable-next-line no-descending-specificity
     ol {
       margin: 0;