upgrade to stylelint release

website/.stylelintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  ...require('@hashicorp/nextjs-scripts/.stylelintrc.js'),
+  rules: {
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        ignoreAtRules: ['page'],
+      },
+    ],
+  },
+}

website/components/basic-hero/style.css

@@ -21,6 +21,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
+
     /*
      * Margins here compensate for extra 8px margin on buttons
      * which are needed to center and space properly regardless of whether

website/components/case-study-carousel/style.css

@@ -24,7 +24,7 @@
     width: 100%;
     height: var(--background-height);
     position: absolute;
-    bottom: 0px;
+    bottom: 0;
     z-index: -1;
   }
 
@@ -56,7 +56,7 @@
         max-height: 40px;
         width: 33.33%;
         padding: 0 30px;
-        margin: 24px 0px;
+        margin: 24px 0;
 
         @media (max-width: 800px) {
           padding: 0 20px;
@@ -68,7 +68,7 @@
         max-height: 40px;
         width: 33.33%;
         padding: 0 30px;
-        margin: 24px 0px;
+        margin: 24px 0;
 
         @media (max-width: 800px) {
           padding: 0 20px;
@@ -116,6 +116,7 @@
       outline: none !important;
     }
   }
+
   /* End `nuka-carousel` styles  */
 
   & .side-control {
@@ -150,7 +151,7 @@
     width: 100%;
     background: var(--white);
     padding: 64px;
-    box-shadow: 0px 8px 22px #dedede;
+    box-shadow: 0 8px 22px #dedede;
 
     @media (max-width: 800px) {
       box-shadow: none;
@@ -231,12 +232,13 @@
       & .person-name {
         & h5 {
           margin: 0;
+
+          @media (max-width: 400px) {
+            font-size: 16px;
+          }
         }
 
         @media (max-width: 400px) {
-          & h5 {
-            font-size: 16px;
-          }
           & p {
             font-size: 15px;
           }

website/components/learn-callout/style.css

@@ -69,9 +69,11 @@
       margin: 0 16px;
       width: 33.333%;
       transition: box-shadow 0.25s, transform 0.25s, -webkit-transform 0.25s;
+      display: flex;
+      cursor: pointer;
 
       &:hover {
-        box-shadow: 0px 16px 28px rgba(37, 38, 45, 0.12);
+        box-shadow: 0 16px 28px rgba(37, 38, 45, 0.12);
         transform: translateY(-4px);
       }
 
@@ -87,14 +89,8 @@
           margin-bottom: 48px;
         }
       }
-    }
 
-    & > a {
-      display: flex;
-      cursor: pointer;
-    }
-
-    & > a .course {
+      & .course {
         border: 1px solid var(--gray-6);
         display: flex;
         flex-direction: column;
@@ -140,7 +136,7 @@
           }
 
           & h4 {
-          margin: 24px 0px;
+            margin: 24px 0;
           }
         }
       }
@@ -173,3 +169,4 @@
       }
     }
   }
+}

website/layouts/use-cases/style.css

@@ -1,7 +1,7 @@
 #p-use-case {
   & .features-header {
     text-align: center;
-    margin-bottom: 0px;
+    margin-bottom: 0;
   }
 
   /* Overriding the g-text-split component to have

website/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.1",
   "author": "HashiCorp",
   "dependencies": {
-    "@hashicorp/nextjs-scripts": "^7.2.1",
+    "@hashicorp/nextjs-scripts": "^8.0.0",
     "@hashicorp/react-alert": "^2.0.0",
     "@hashicorp/react-alert-banner": "^3.1.0",
     "@hashicorp/react-button": "^2.2.0",

website/pages/style.css

@@ -121,17 +121,17 @@ footer .content {
 .g-section-block section {
   padding-top: 96px;
   padding-bottom: 96px;
-}
 
-.g-section-block section > .g-section-header + *,
-.g-section-block section > .g-container > .g-section-header + * {
+  & > .g-section-header + *,
+  & > .g-container > .g-section-header + * {
     margin-top: 72px;
   }
 
-.g-section-block section > * + *,
-.g-section-block section > .g-container > * + * {
+  & > * + *,
+  & > .g-container > * + * {
     margin-top: 96px;
   }
+}
 
 .g-section-block .button-container {
   display: -webkit-box;