diff --git a/.stylelintrc b/.stylelintrc index a91ba1b..f88f894 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,10 +1,11 @@ { "ignoreDisables": true, - "extends": "stylelint-config-standard-scss", - "plugins": [ - "stylelint-scss", - "stylelint-order" + "extends": [ + "stylelint-config-standard-scss", + "stylelint-config-hudochenkov/order" ], + "plugins": ["stylelint-scss"] + , "rules": { "alpha-value-notation": "number", "at-rule-empty-line-before": null, @@ -13,83 +14,9 @@ "color-hex-case": "lower", "import-notation": null, "max-nesting-depth": 5, + "no-invalid-position-at-import-rule": null, "number-leading-zero": "never", "property-no-vendor-prefix": true, - "rule-empty-line-before": null, - "order/properties-alphabetical-order": null, - "order/properties-order": [ - "position", - "top", - "bottom", - "right", - "left", - "display", - "align-items", - "justify-content", - "float", - "clear", - "overflow", - "overflow-x", - "overflow-y", - "margin", - "margin-top", - "margin-right", - "margin-bogttom", - "margin-left", - "padding", - "padding-top", - "padding-right", - "padding-bottom", - "padding-left", - "width", - "min-width", - "max-width", - "height", - "min-height", - "max-height", - "font-size", - "font-family", - "font-weight", - "text-align", - "text-justify", - "text-indent", - "text-overflow", - "text-decoration", - "white-space", - "color", - "background", - "background-position", - "background-repeat", - "background-size", - "background-color", - "background-clip", - "border", - "border-style", - "border-width", - "border-color", - "border-top-style", - "border-top-width", - "border-top-color", - "border-right-style", - "border-right-width", - "border-right-color", - "border-bottom-style", - "border-bottom-width", - "border-bottom-color", - "border-left-style", - "border-left-width", - "border-left-color", - "border-radius", - "opacity", - "filter", - "list-style", - "outline", - "visibility", - "z-index", - "box-shadow", - "text-shadow", - "resize", - "transition" - ] + "rule-empty-line-before": null } } diff --git a/package-lock.json b/package-lock.json index 167cf4d..f111504 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,7 @@ "packages": { "": { "name": "x-markdown-css", - "version": "0.0.0-20230229.1", + "version": "0.0.0-20230302.2", "license": "MIT", "dependencies": { "coffeescript": "^2.7.0", @@ -23,8 +23,8 @@ "postcss": "^8.4.21", "postcss-preset-env": "^8.0.1", "stylelint": "^15.2.0", + "stylelint-config-hudochenkov": "^9.0.0", "stylelint-config-standard-scss": "^7.0.1", - "stylelint-order": "^6.0.2", "stylelint-scss": "^4.4.0" }, "engines": { @@ -4170,6 +4170,7 @@ "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-8.0.1.tgz", "integrity": "sha512-go9Zoxx7KQH+uLrJ9xa5wRErFeXu01ydA6O8m7koPXkmAN7Ts//eRcIqjo0stBR4+Nir2gMYDOWAOx7O5EPUZA==", "dev": true, + "peer": true, "peerDependencies": { "postcss": "^8.4.20" } @@ -4828,6 +4829,16 @@ "url": "https://opencollective.com/stylelint" } }, + "node_modules/stylelint-config-hudochenkov": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-hudochenkov/-/stylelint-config-hudochenkov-9.0.0.tgz", + "integrity": "sha512-IOiSA2URkeIxEbn/Vl7OnkovjFci2o5n4qdC8gMuVkygeqCt7y3JJvagbRGgBoIvr3ldus/WBIEHRr+y8ZLXMw==", + "dev": true, + "peerDependencies": { + "stylelint": "^15.0.0", + "stylelint-order": "^6.0.2" + } + }, "node_modules/stylelint-config-recommended": { "version": "10.0.1", "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-10.0.1.tgz", @@ -4893,6 +4904,7 @@ "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-6.0.2.tgz", "integrity": "sha512-yuac0BE6toHd27wUPvYVVQicAJthKFIv1HPQFH3Q0dExiO3Z6Uam7geoO0tUd5Z9ddsATYK++1qWNDX4RxMH5Q==", "dev": true, + "peer": true, "dependencies": { "postcss": "^8.4.21", "postcss-sorting": "^8.0.1" diff --git a/package.json b/package.json index 92df246..861032b 100644 --- a/package.json +++ b/package.json @@ -51,8 +51,8 @@ "postcss": "^8.4.21", "postcss-preset-env": "^8.0.1", "stylelint": "^15.2.0", + "stylelint-config-hudochenkov": "^9.0.0", "stylelint-config-standard-scss": "^7.0.1", - "stylelint-order": "^6.0.2", "stylelint-scss": "^4.4.0" } } diff --git a/src/scss/markdown.scss b/src/scss/markdown.scss index 4ff7636..9952212 100644 --- a/src/scss/markdown.scss +++ b/src/scss/markdown.scss @@ -1,6 +1,6 @@ .markdown-body { - font-family: var(--xm-font-regular) !important; color: var(--xm-c-general); + font-family: var(--xm-font-regular) !important; pre { &:not(.shiki, .highlight) { margin: 0; @@ -25,9 +25,9 @@ width: 100%; } a { + border-bottom: 1px solid var(--xm-c-link-border); font-weight: inherit; text-decoration: none; - border-bottom: 1px solid var(--xm-c-link-border); transition: border .3s ease-in-out; &:hover { border-bottom: 1px solid var(--xm-c-general); @@ -37,8 +37,8 @@ } } hr { - margin: 2rem auto; width: 50px; + margin: 2rem auto; } blockquote, q { @@ -83,9 +83,9 @@ html:not(.dark) .shiki-dark, margin-top: .125rem; margin-left: -1.2rem; padding-right: .5rem; - font-size: .85rem; - text-decoration: none; border: 0 !important; + font-size: .875rem; + text-decoration: none; opacity: 0; &:hover, &:focus { diff --git a/src/scss/partial/_container.scss b/src/scss/partial/_container.scss index 9220c65..12f3d42 100644 --- a/src/scss/partial/_container.scss +++ b/src/scss/partial/_container.scss @@ -1,6 +1,6 @@ @mixin container { max-width: fit-content; - font-size: 1rem; color: var(--xm-c-general); + font-size: 1rem; line-height: 1.75; } diff --git a/src/scss/partial/code.scss b/src/scss/partial/code.scss index 2241e0c..87a969e 100644 --- a/src/scss/partial/code.scss +++ b/src/scss/partial/code.scss @@ -1,8 +1,8 @@ code { - font-size: .85rem; - font-weight: 600; - font-family: var(--xm-font-code); color: var(--xm-c-dark); + font-weight: 600; + font-size: .875rem; + font-family: var(--xm-font-code); &::before, &::after { content: '`'; @@ -11,21 +11,21 @@ code { pre { overflow-x: auto; margin-top: 1.75rem; - padding-top: .85rem, 1.15rem; - font-size: .85rem; - color: var(--xm-c-pre); - line-height: 1.75; margin-bottom: 1.75rem; + padding-top: .875rem, 1.15rem; border-radius: .375rem; + color: var(--xm-c-pre); + font-size: .875rem; + line-height: 1.75; code { padding: 0; - font-size: inherit; - font-family: inherit; - font-weight: 400; - color: inherit; - background: transparent; border-width: 0; border-radius: 0; + background: transparent; + color: inherit; + font-weight: 400; + font-size: inherit; + font-family: inherit; line-height: inherit; &::before, &::after { diff --git a/src/scss/partial/figure.scss b/src/scss/partial/figure.scss index 3756129..7d126da 100644 --- a/src/scss/partial/figure.scss +++ b/src/scss/partial/figure.scss @@ -2,9 +2,9 @@ figure { margin-top: 2rem; margin-bottom: 2rem; figcaption { - margin-top: .85rem; - font-size: .85rem; + margin-top: .875rem; color: var(--xm-c-figcaption); + font-size: .875rem; line-height: 1.45; } > * { diff --git a/src/scss/partial/link.scss b/src/scss/partial/link.scss index f26b604..0d749cd 100644 --- a/src/scss/partial/link.scss +++ b/src/scss/partial/link.scss @@ -1,7 +1,7 @@ a { + color: var(--xm-c-darker); font-weight: 500; text-decoration: none; - color: var(--xm-c-darker); code { color: var(--xm-c-code); } diff --git a/src/scss/partial/list.scss b/src/scss/partial/list.scss index 025e695..ef73478 100644 --- a/src/scss/partial/list.scss +++ b/src/scss/partial/list.scss @@ -13,8 +13,8 @@ ol { content: counter(list-item, decimal) '.'; position: absolute; left: 0; - font-weight: 400; color: var(--xm-c-ol-counter); + font-weight: 400; } } } @@ -28,12 +28,12 @@ ul { &::before { content: ''; position: absolute; - top: .685rem; + top: .675rem; left: .25rem; width: .375rem; height: .375rem; - background-color: var(--xm-c-ul-counter); border-radius: 50%; + background-color: var(--xm-c-ul-counter); } } } diff --git a/src/scss/partial/quote.scss b/src/scss/partial/quote.scss index 472f6f8..8c56362 100644 --- a/src/scss/partial/quote.scss +++ b/src/scss/partial/quote.scss @@ -3,10 +3,10 @@ q { margin-top: 1.65rem; margin-bottom: 1.65rem; padding-left: 1rem; + border-left: .25rem solid var(--xm-c-blockquote-border); + color: inherit; font-weight: 500; font-style: italic; - color: inherit; - border-left: .25rem solid var(--xm-c-blockquote-border); quotes: '\201C''\201D''\2018''\2019'; p { &:first-of-type::before { diff --git a/src/scss/partial/table.scss b/src/scss/partial/table.scss index eb29cab..8f9dc8d 100644 --- a/src/scss/partial/table.scss +++ b/src/scss/partial/table.scss @@ -1,22 +1,20 @@ table { + width: 100%; margin-top: 2rem; margin-bottom: 2rem; - width: 100%; table-layout: auto; - font-size: .85rem; - text-align: left; + font-size: .875rem; line-height: 1.75; + text-align: left; } thead { - font-weight: 600; - color: var(--xm-c-thead); border-bottom-width: 1px; border-bottom-color: var(--xm-c-thead-border); + color: var(--xm-c-thead); + font-weight: 600; th { vertical-align: bottom; - padding-right: .575rem; - padding-bottom: .575rem; - padding-left: .575rem; + padding-left: auto .575rem .575rem; &:first-child { padding-left: 0; } diff --git a/src/scss/partial/text.scss b/src/scss/partial/text.scss index 165747b..a106f92 100644 --- a/src/scss/partial/text.scss +++ b/src/scss/partial/text.scss @@ -3,8 +3,8 @@ p { margin-bottom: 1.25rem; } strong { - font-weight: 600; color: var(--xm-c-dark); + font-weight: 600; } b { color: var(--xm-c-dark); diff --git a/src/scss/partial/title.scss b/src/scss/partial/title.scss index a04dece..ed68d6b 100644 --- a/src/scss/partial/title.scss +++ b/src/scss/partial/title.scss @@ -1,20 +1,20 @@ h1 { margin-top: 0; - margin-bottom: .8889rem; - font-size: 2.25rem; - font-weight: 800; + margin-bottom: .875rem; color: var(--xm-c-darker); + font-weight: 800; + font-size: 2.25rem; line-height: 1.15; } h2 { margin-top: 2rem; - font-size: 1.5rem; - font-weight: 700; - color: var(--xm-c-dark); margin-bottom: 1rem; + color: var(--xm-c-dark); + font-weight: 700; + font-size: 1.5rem; line-height: 1.35; code { - font-size: .85rem; + font-size: .875rem; } + * { margin-top: 0; @@ -22,10 +22,10 @@ h2 { } h3 { margin-top: 1.6rem; - font-size: 1.25rem; - font-weight: 600; - color: inherit; margin-bottom: .6rem; + color: inherit; + font-weight: 600; + font-size: 1.25rem; line-height: 1.6; opacity: .7; code { @@ -37,9 +37,9 @@ h3 { } h4 { margin-top: 1.5rem; - font-weight: 600; - color: inherit; margin-bottom: .5rem; + color: inherit; + font-weight: 600; line-height: 1.5; + * { margin-top: 0; @@ -47,17 +47,17 @@ h4 { } h5, h6 { - text-transform: uppercase; margin-top: 20px; margin-bottom: 10px; font-weight: 500; - opacity: .5; letter-spacing: 2px; + text-transform: uppercase; + opacity: .5; } hr { margin-top: 3rem; - border-color: var(--xm-c-hr-border); margin-bottom: 3rem; + border-color: var(--xm-c-hr-border); + * { margin-top: 0; }