add stylelint

.stylelintrc

+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "max-line-length": null,
+    "comment-empty-line-before": null,
+    "no-descending-specificity": null,
+    "selector-id-pattern": null
+  }
+}

package.json

@@ -4,6 +4,7 @@
   "version": "1.0.0",
   "license": "EPL-2.0",
   "scripts": {
+    "lint": "stylelint 'pages/assets/**/*.css'",
     "build": "rollup -c --environment BUILD:production && eleventy --config .eleventy.js",
     "start": "rollup -c -w & eleventy --serve --config .eleventy.js"
   },
@@ -29,7 +30,9 @@
     "postcss-import": "^14.0.2",
     "postcss-preset-env": "^7.3.1",
     "rollup": "^2.67.0",
-    "rollup-plugin-terser": "^7.0.2"
+    "rollup-plugin-terser": "^7.0.2",
+    "stylelint": "^14.5.1",
+    "stylelint-config-standard": "^25.0.0"
   },
   "browserslist": [
     "defaults",

pages/assets/css/_base.css

@@ -12,14 +12,12 @@
   --brand-color-800: #195866;
   --brand-color-900: #194954;
   --brand-color-1000: #033844;
-
-  --gray-color-100: #F3F4F6;
-  --gray-color-200: #E5E7EB;
-  --gray-color-500: #6B7280;
+  --gray-color-100: #f3f4f6;
+  --gray-color-200: #e5e7eb;
+  --gray-color-500: #6b7280;
   --gray-color-600: #202020;
-
-  --brand-font-primary: "Inter", BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  --brand-font-secondary: "Urbanist", BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  --brand-font-primary: "Inter", blinkmacsystemfont, -apple-system, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  --brand-font-secondary: "Urbanist", blinkmacsystemfont, -apple-system, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 }
 
 html {
@@ -29,16 +27,16 @@ html {
 body {
   font-family: var(--brand-font-primary);
   color: var(--gray-color-600);
-  background: linear-gradient(#F9FAFB 0%, #ffffff 35%);
+  background: linear-gradient(#f9fafb 0%, #fff 35%);
   /* fallback */
-  background-color: #ffffff;
+  background-color: #fff;
 }
 
 @media screen and (min-width: 769px) {
   body {
-    background: linear-gradient(#eaeaea 0%, #F9FAFB 25%);
+    background: linear-gradient(#eaeaea 0%, #f9fafb 25%);
     /* fallback */
-    background-color: #F9FAFB;
+    background-color: #f9fafb;
   }
 }
 
@@ -178,7 +176,7 @@ header .logo > img {
 }
 
 .main > .hero .imageblock img {
-  filter: drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.1));
+  filter: drop-shadow(0 5px 20px rgb(0 0 0 / 10%));
 }
 
 .hero .paragraph {
@@ -220,9 +218,9 @@ header .logo > img {
   font-size: 0.875rem;
   text-transform: uppercase;
   padding-top: 2em;
-  padding-bottom: .75em;
+  padding-bottom: 0.75em;
   line-height: 1.15rem;
-  letter-spacing: .0625rem;
+  letter-spacing: 0.0625rem;
   font-weight: 600;
 }
 
@@ -241,7 +239,7 @@ section.users {
   line-height: normal;
   font-style: normal;
   font-weight: 700;
-  letter-spacing: 0em;
+  letter-spacing: 0;
   text-align: center;
   color: white;
   padding-top: 3.125rem;
@@ -287,6 +285,7 @@ section.users {
   .companies {
     margin-top: 4.25rem;
   }
+
   section.users {
     padding-right: 2rem;
     padding-left: 2rem;
@@ -298,6 +297,7 @@ section.users {
     margin-left: 0;
     margin-right: 0;
   }
+
   section.users {
     padding-right: 1rem;
     padding-left: 1rem;
@@ -312,7 +312,7 @@ section.about {
 
 @media screen and (min-width: 1024px) {
   section.about {
-    background-image: url(../img/grid-watermark.png);
+    background-image: url("../img/grid-watermark.png");
     background-repeat: no-repeat;
     background-position: right 2.595rem;
   }
@@ -321,7 +321,7 @@ section.about {
 section.about .columns {
   display: flex;
   flex-direction: column;
-  gap: 3rem
+  gap: 3rem;
 }
 
 @media screen and (min-width: 1024px) {
@@ -329,6 +329,7 @@ section.about .columns {
     padding-top: 9rem;
     padding-bottom: 9rem;
   }
+
   section.about .columns {
     flex-direction: row;
     justify-content: flex-end;
@@ -372,7 +373,7 @@ section.about .imageblock img {
   margin-top: 0.5rem;
   border-top-left-radius: 7px;
   border-top-right-radius: 7px;
-  filter: drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.1));
+  filter: drop-shadow(0 5px 20px rgb(0 0 0 / 10%));
 }
 
 section.about .tabset .content {
@@ -409,7 +410,7 @@ section h2 {
 }
 
 section.try h2 {
-  color: rgba(255, 255, 255, 0.7);
+  color: rgb(255 255 255 / 70%);
   padding-top: 0;
   max-width: 1120px;
   margin-left: auto;
@@ -426,11 +427,10 @@ section.try {
 @media screen and (min-width: 1024px) {
   section.try {
     padding-top: 5.75rem;
-    background-image: url(../img/grid-watermark-sm.png);
+    background-image: url("../img/grid-watermark-sm.png");
     background-repeat: no-repeat;
     background-position-y: -2rem;
-    background-position-x: calc(50% - 1120px/2 + 225px);
-
+    background-position-x: calc(50% - 1120px / 2 + 225px);
   }
 }
 
@@ -457,13 +457,6 @@ section.try .toggle {
   display: none;
 }
 
-#editor {
-  margin: 1rem auto;
-  background-color: #F9FAFB;
-  box-shadow: 0 7px 7px rgb(0 0 0 / 10%), 0 -2px 3px rgb(0 0 0 / 13%);
-  border-radius: 5px 5px 5px 5px;
-}
-
 #editorCode {
   color: var(--gray-color-600);
   display: flex;
@@ -483,13 +476,15 @@ section.try .toggle {
   border-radius: 5px;
 }
 
-#editorPreview h1, #editorPreview h2, #editorPreview h3 {
+#editorPreview h1,
+#editorPreview h2,
+#editorPreview h3 {
   color: var(--brand-color-700);
 }
 
 #editorPreview {
-  border-left: 5px solid #F0F0F0;
-  border-radius: 0px 5px 5px 0px;
+  border-left: 5px solid #f0f0f0;
+  border-radius: 0 5px 5px 0;
   color: var(--gray-color-600);
   padding-left: 1rem;
   padding-right: 1rem;
@@ -498,33 +493,33 @@ section.try .toggle {
 }
 
 #editorPreview * {
-  all: revert
+  all: revert;
 }
 
 #editorPreview .hljs {
-  color:#333;
+  color: #333;
   display: block;
   overflow-x: auto;
   padding: 0.5em;
   background: #ebebeb;
 }
 
+/* stylelint-disable selector-class-pattern */
 #editorPreview .hljs-doctag,
 #editorPreview .hljs-keyword,
-#editorPreview .hljs-meta
-#editorPreview .hljs-keyword,
+#editorPreview .hljs-meta #editorPreview .hljs-keyword,
 #editorPreview .hljs-template-tag,
 #editorPreview .hljs-template-variable,
 #editorPreview .hljs-type,
 #editorPreview .hljs-variable.language_ {
-  color: #d73a49
+  color: #d73a49;
 }
 
 #editorPreview .hljs-title,
 #editorPreview .hljs-title.class_,
 #editorPreview .hljs-title.class_.inherited__,
 #editorPreview .hljs-title.function_ {
-  color: #6f42c1
+  color: #6f42c1;
 }
 
 #editorPreview .hljs-attr,
@@ -537,67 +532,68 @@ section.try .toggle {
 #editorPreview .hljs-selector-class,
 #editorPreview .hljs-selector-id,
 #editorPreview .hljs-variable {
-  color: #005cc5
+  color: #005cc5;
 }
 
-#editorPreview .hljs-meta
-#editorPreview .hljs-string,
+#editorPreview .hljs-meta #editorPreview .hljs-string,
 #editorPreview .hljs-regexp,
 #editorPreview .hljs-string {
-  color: #718c00
+  color: #718c00;
 }
 
 #editorPreview .hljs-built_in,
 #editorPreview .hljs-symbol {
-  color: #e36209
+  color: #e36209;
 }
 
 #editorPreview .hljs-code,
 #editorPreview .hljs-comment,
 #editorPreview .hljs-formula {
-  color: #6a737d
+  color: #6a737d;
 }
 
 #editorPreview .hljs-name,
 #editorPreview .hljs-quote,
 #editorPreview .hljs-selector-pseudo,
 #editorPreview .hljs-selector-tag {
-  color: #22863a
+  color: #22863a;
 }
 
 #editorPreview .hljs-subst {
-  color: #24292e
+  color: #24292e;
 }
 
 #editorPreview .hljs-section {
   color: #005cc5;
-  font-weight: 700
+  font-weight: 700;
 }
 
 #editorPreview .hljs-bullet {
-  color: #735c0f
+  color: #735c0f;
 }
 
 #editorPreview .hljs-emphasis {
   color: #24292e;
-  font-style: italic
+  font-style: italic;
 }
 
 #editorPreview .hljs-strong {
   color: #24292e;
-  font-weight: 700
+  font-weight: 700;
 }
 
 #editorPreview .hljs-addition {
   color: #22863a;
-  background-color: #f0fff4
+  background-color: #f0fff4;
 }
 
 #editorPreview .hljs-deletion {
   color: #b31d28;
-  background-color: #ffeef0
+  background-color: #ffeef0;
 }
 
+/* stylelint-enable selector-class-pattern */
+
 #editorPreview .listingblock > .content {
   position: relative
 }
@@ -653,6 +649,10 @@ section.try .toggle {
 
 #editor {
   padding: 0.5rem;
+  margin: 1rem auto;
+  background-color: #f9fafb;
+  box-shadow: 0 7px 7px rgb(0 0 0 / 10%), 0 -2px 3px rgb(0 0 0 / 13%);
+  border-radius: 5px;
 }
 
 #editor .cm-content {
@@ -684,7 +684,7 @@ section.try .toggle {
 @media screen and (max-width: 919px) {
   #editorPreview {
     border-left: none;
-    border-top: 5px solid #F0F0F0;
+    border-top: 5px solid #f0f0f0;
     padding-top: 0.5rem;
     margin-top: 1rem;
   }
@@ -700,6 +700,8 @@ section.try .toggle {
     display: flex;
     justify-content: center;
     padding: 0.75rem 0;
+    border-top: 1px solid white;
+    border-bottom: 1px solid white;
   }
 
   section.try .toggle > a.is-active {
@@ -707,11 +709,6 @@ section.try .toggle {
     color: var(--gray-color-600);
   }
 
-  section.try .toggle > a {
-    border-top: 1px solid white;
-    border-bottom: 1px solid white;
-  }
-
   section.try .toggle > a:first-child {
     border-bottom-left-radius: 5px;
     border-top-left-radius: 5px;
@@ -740,7 +737,7 @@ section.try .toggle {
 }
 
 span.attn {
-  border-bottom: 1px dotted currentColor;
+  border-bottom: 1px dotted currentcolor;
 }
 
 /* compare */
@@ -763,6 +760,7 @@ section.compare h2 {
   section.compare h2 {
     padding-top: 7rem;
   }
+
   section.compare {
     padding-bottom: 6rem;
   }
@@ -813,7 +811,7 @@ section.compare .tabset > .content .title {
   font-family: var(--brand-font-secondary);
   line-height: 1.5rem;
   font-size: 1.9rem;
-  letter-spacing: .015em;
+  letter-spacing: 0.015em;
   font-weight: 700;
   padding-bottom: 1.5rem;
 }
@@ -844,6 +842,7 @@ section.specifications {
     margin-right: 2rem;
   }
 }
+
 @media (min-width: 1024px) {
   section.specifications {
     padding-left: 7.5rem;
@@ -866,11 +865,10 @@ section.specifications h2 {
 }
 
 section.specifications h3 {
-  color: white;
   font-size: 2.25rem;
   font-style: normal;
   font-weight: 700;
-  letter-spacing: 0em;
+  letter-spacing: 0;
   color: white;
   text-transform: none;
   line-height: normal;
@@ -933,7 +931,7 @@ section a.action {
 
 section a.action::after {
   content: "";
-  background-image: url(../img/arrow-right-long.svg);
+  background-image: url("../img/arrow-right-long.svg");
   display: flex;
   background-repeat: no-repeat;
   background-position: center;
@@ -943,7 +941,7 @@ section a.action::after {
 }
 
 .specifications a.action::after {
-  background-image: url(../img/arrow-right-long-white.svg);
+  background-image: url("../img/arrow-right-long-white.svg");
 }
 
 .specifications a.action {
@@ -971,10 +969,10 @@ section.tools .cards {
 }
 
 section.tools .cards > .card {
-  background: #FFFFFF;
-  box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.1);
+  background: #fff;
+  box-shadow: 0 4px 40px rgb(0 0 0 / 10%);
   border-radius: 5px;
-  padding:  4.1875rem 1.75rem;
+  padding: 4.1875rem 1.75rem;
   z-index: 1;
   overflow: hidden;
   position: relative;
@@ -989,6 +987,7 @@ section.tools .cards > .card p {
   section.tools .cards > .card {
     padding: 4.1875rem 7.625rem 2.5rem 3.8125rem;
   }
+
   section.tools .cards {
     row-gap: 2rem;
   }
@@ -1003,10 +1002,7 @@ section.tools .cards > .card p {
   }
 
   section.tools .cards > .card {
-    padding-top: 3.75rem;
-    padding-left: 2.5rem;
-    padding-right: 2.5rem;
-    padding-bottom: 2.5rem;
+    padding: 3.75rem 2.5rem 2.5rem;
   }
 }
 
@@ -1021,13 +1017,13 @@ section.tools .cards > .card p {
   }
 }
 
-section.tools .cards > .card:after {
+section.tools .cards > .card::after {
   content: "";
   position: absolute;
   width: 144%;
   height: 135%;
   z-index: -1;
-  /*background: url(../img/asciidoc-logo.svg) #fafafa;*/
+  /* background: url(../img/asciidoc-logo.svg) #fafafa; */
   background-repeat: no-repeat;
   background-size: cover;
   top: -61px;
@@ -1039,7 +1035,7 @@ section.tools .cards > .card svg {
   margin-bottom: 3.5rem;
 }
 
-section.tools .cards > .card h3:before {
+section.tools .cards > .card h3::before {
   content: "";
   height: 2rem;
   width: 2rem;
@@ -1048,16 +1044,16 @@ section.tools .cards > .card h3:before {
   background-position: center;
 }
 
-section.tools .cards > .card:nth-child(1) h3:before {
-  background-image: url(../img/convert.svg);
+section.tools .cards > .card:nth-child(1) h3::before {
+  background-image: url("../img/convert.svg");
 }
 
-section.tools .cards > .card:nth-child(2) h3:before {
-  background-image: url(../img/author.svg);
+section.tools .cards > .card:nth-child(2) h3::before {
+  background-image: url("../img/author.svg");
 }
 
-section.tools .cards > .card:nth-child(3) h3:before {
-  background-image: url(../img/publish.svg);
+section.tools .cards > .card:nth-child(3) h3::before {
+  background-image: url("../img/publish.svg");
 }
 
 section.tools .cards > .card h3 {
@@ -1066,7 +1062,7 @@ section.tools .cards > .card h3 {
   line-height: 1.75rem;
   padding-bottom: 1rem;
   font-family: var(--brand-font-primary);
-  color: #3E3E3E;
+  color: #3e3e3e;
   display: grid;
   gap: 3rem;
   justify-content: start;
@@ -1080,6 +1076,7 @@ section.tools .cards > .card a {
   section.tools h2 {
     text-align: center;
   }
+
   section.tools h3 {
     text-align: center;
   }
@@ -1092,6 +1089,7 @@ section.tools .cards > .card a {
     margin-left: auto;
     margin-right: auto;
   }
+
   section.tools h3 {
     padding-bottom: 5.75rem;
   }
@@ -1108,7 +1106,7 @@ section.docs h2 {
   font-size: 2.125rem;
   font-style: normal;
   font-weight: 700;
-  letter-spacing: 0em;
+  letter-spacing: 0;
   color: var(--gray-color-600);
   padding-top: 4rem;
   padding-bottom: 2.625rem;
@@ -1138,41 +1136,36 @@ section.docs a {
   display: block;
   border: 1px solid var(--brand-color-700);
   border-radius: 5px;
-  padding: 1rem;
+  padding: 0.875rem 1.5rem;
   text-decoration: none;
   background-color: var(--brand-color-700);
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.5rem;
-  padding: 0.875rem 1.5rem;
   font-family: var(--brand-font-secondary);
 }
 
 .main h3 {
   font-family: var(--brand-font-secondary);
-  font-size: 1.7rem;
+  font-size: 2.25rem;
   font-weight: 700;
   padding-bottom: 0.5em;
-  font-size: 2.25rem;
 }
 
 .main a.button {
   font-size: 1.15rem;
   text-decoration: none;
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
   background-color: white;
-  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 10%), 0 1px 2px rgb(0 0 0 / 6%);
   color: var(--brand-color-700);
   cursor: pointer;
   text-align: center;
   white-space: nowrap;
-  border-radius: .375em;
+  border-radius: 0.375em;
   display: flex;
   justify-content: center;
-  padding-bottom: calc(1.25rem - 1px);
-  padding-left: calc(2.5rem - 1px);
-  padding-right: calc(2.5rem - 1px);
-  padding-top: calc(1.25rem - 1px);
+  padding: calc(1.25rem - 1px) calc(2.5rem - 1px) calc(1.25rem - 1px) calc(2.5rem - 1px);
   font-weight: 500;
   font-family: var(--brand-font-primary);
 }
@@ -1230,7 +1223,7 @@ section.docs a {
 .footer .eclipse::before {
   content: "";
   display: block;
-  border-top: 1.5px solid rgba(255, 255, 255, 0.4);
+  border-top: 1.5px solid rgb(255 255 255 / 40%);
   width: calc(100% - 4rem);
   position: absolute;
   margin: 0 auto;
@@ -1262,7 +1255,7 @@ section.docs a {
   color: var(--gray-color-100);
 }
 
-@media screen and (min-width: 480px) and (max-width: 767px)  {
+@media screen and (min-width: 480px) and (max-width: 767px) {
   .footer .eclipse,
   .footer .asciidoc {
     grid-template-columns: 175px 175px;
@@ -1287,28 +1280,34 @@ section.docs a {
   .footer .category.ecosystem {
     grid-row: 2;
   }
+
   .footer .category.documentation {
     grid-row: 3;
     grid-column: span 2;
   }
+
   .footer .category.links,
   .footer .category.other {
     grid-row: 2;
   }
+
   .footer .eclipse {
     row-gap: 2rem;
   }
+
   .footer .eclipse .copyright {
     grid-row: 3;
     max-width: 225px;
     line-height: 1.75rem;
     padding-top: 0.25rem;
   }
+
   .footer .eclipse .social {
     grid-row: 4;
     grid-column: span 2;
     justify-content: start;
   }
+
   .footer .social ul {
     column-gap: 1rem;