Disable no-shorthand for certain props for better readability

.stylelintrc.json

@@ -21,6 +21,21 @@
     "import-notation": null,
     "custom-property-pattern": null,
     "keyframes-name-pattern": null,
-    "scss/operator-no-newline-after": null
+    "scss/operator-no-newline-after": null,
+    "declaration-block-no-redundant-longhand-properties": [
+      true,
+      {
+        "ignoreShorthands": [
+          "grid-template",
+          "margin",
+          "padding",
+          "border",
+          "border-width",
+          "border-style",
+          "border-color",
+          "border-radius"
+        ]
+      }
+    ]
   }
 }

src/App.scss

@@ -214,10 +214,8 @@ nav {
   grid-template-columns:
     var(--effectiveSidebarColumnWidth)
     var(--effectiveContentColumnWidth);
-  /* stylelint-disable declaration-block-no-redundant-longhand-properties */
   grid-template-areas: "sidebar content";
   grid-template-rows: 1fr;
-  /* stylelint-enable declaration-block-no-redundant-longhand-properties */
   box-sizing: border-box;
   margin: 0 auto;
   align-content: flex-start;

src/components/desktop_nav/desktop_nav.scss

@@ -14,11 +14,9 @@
 
   .inner-nav {
     display: grid;
-    /* stylelint-disable declaration-block-no-redundant-longhand-properties */
     grid-template-rows: var(--navbar-height);
     grid-template-columns: 2fr auto 2fr;
     grid-template-areas: "sitename logo actions";
-    /* stylelint-enable declaration-block-no-redundant-longhand-properties */
     box-sizing: border-box;
     padding: 0 1.2em;
     margin: auto;

src/components/user_card/user_card.scss

@@ -43,11 +43,10 @@
     mask-composite: exclude;
     background-size: cover;
     mask-size: 100% 60%;
-    border-radius:
-      calc(var(--__roundnessTop, --panelRadius) - 1px)
-      calc(var(--__roundnessTop, --panelRadius) - 1px)
-      calc(var(--__roundnessBottom, --panelRadius) - 1px)
-      calc(var(--__roundnessBottom, --panelRadius) - 1px);
+    border-top-left-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
+    border-top-right-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
+    border-bottom-left-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
+    border-bottom-right-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
     background-color: var(--profileBg);
     z-index: -2;