Commit c678fe29 authored by Guillaume Grossetie's avatar Guillaume Grossetie 🎧
Browse files

add stylelint

parent 914fc652
{
"extends": "stylelint-config-standard",
"rules": {
"max-line-length": null,
"comment-empty-line-before": null,
"no-descending-specificity": null,
"selector-id-pattern": null
}
}
This diff is collapsed.
......@@ -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",
......
......@@ -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;