diff --git a/.stylelintrc.json b/.stylelintrc.json index 9c3ecb19d448..265bb31383e2 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -6,7 +6,7 @@ "stylelint-prettier/recommended", "stylelint-config-prettier" ], - "plugins": ["stylelint-scss"], + "plugins": ["stylelint-scss", "stylelint-order"], "rules": { "a11y/media-prefers-reduced-motion": null, "a11y/no-outline-none": null, @@ -18,6 +18,29 @@ "no-descending-specificity": null, "no-invalid-position-at-import-rule": null, "no-irregular-whitespace": null, + "order/order": [ + [ + "custom-properties", + "dollar-variables", + { + "type": "at-rule", + "name": "extend" + }, + { + "type": "at-rule", + "name": "include", + "hasBlock": false + }, + "declarations", + { + "type": "at-rule", + "name": "include", + "hasBlock": true + }, + "rules" + ] + ], + "order/properties-alphabetical-order": true, "property-no-vendor-prefix": null, "selector-class-pattern": null, "selector-max-compound-selectors": null, diff --git a/client/src/newsletter/index.scss b/client/src/newsletter/index.scss index 2d396bc32237..f4853ce71cea 100644 --- a/client/src/newsletter/index.scss +++ b/client/src/newsletter/index.scss @@ -1,6 +1,6 @@ .main-newsletter { - max-width: 35rem; margin: 0 auto; + max-width: 35rem; padding: 2rem; input[type="email"], diff --git a/client/src/ui/organisms/placement/index.scss b/client/src/ui/organisms/placement/index.scss index b9921070534d..d3c204fb5b10 100644 --- a/client/src/ui/organisms/placement/index.scss +++ b/client/src/ui/organisms/placement/index.scss @@ -64,6 +64,7 @@ section.place { } &.top { + align-items: center; display: grid; font-size: 0.625rem; @@ -71,7 +72,6 @@ section.place { height: var(--top-banner-height); margin: 0 auto; width: 100%; - align-items: center; @media screen and (min-width: $screen-md) { grid-template-areas: "pong cta note" "pong cta no"; @@ -110,21 +110,21 @@ section.place { color: var(--place-top-cta-color); font-size: var(--type-smaller-font-size); grid-area: cta; - padding: 0.25rem 1rem; - text-align: center; height: fit-content; margin-right: auto; + padding: 0.25rem 1rem; + text-align: center; } .pong-note { - grid-area: note; + background-color: var(--text-primary); border: 1px solid var(--border-primary); + border-radius: 0 0 0.5rem 0.5rem; border-top: none; - padding: 0 0.5rem 0.125rem; - margin: 0 0 auto auto; color: var(--background-secondary); - background-color: var(--text-primary); - border-radius: 0 0 0.5rem 0.5rem; + grid-area: note; + margin: 0 0 auto auto; + padding: 0 0.5rem 0.125rem; text-decoration: none; &:hover, @@ -136,8 +136,8 @@ section.place { } .no-pong { - grid-area: no; color: var(--place-top-color); + grid-area: no; margin: auto 0 0 2rem; width: initial; } diff --git a/package.json b/package.json index 0342e6370382..9fff83a51e4a 100644 --- a/package.json +++ b/package.json @@ -228,6 +228,7 @@ "stylelint-config-prettier": "^9.0.5", "stylelint-config-recommended": "^12.0.0", "stylelint-config-sass-guidelines": "^10.0.0", + "stylelint-order": "^6.0.3", "stylelint-prettier": "^3.0.0", "stylelint-scss": "^5.0.0", "swr": "^2.1.5", diff --git a/yarn.lock b/yarn.lock index eafd03bb6931..52c8ca1a6505 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10943,6 +10943,11 @@ postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11, postcss-select cssesc "^3.0.0" util-deprecate "^1.0.2" +postcss-sorting@^8.0.2: + version "8.0.2" + resolved "https://registry.yarnpkg.com/postcss-sorting/-/postcss-sorting-8.0.2.tgz#6393385ece272baf74bee9820fb1b58098e4eeca" + integrity sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q== + postcss-svgo@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-6.0.0.tgz#7b18742d38d4505a0455bbe70d52b49f00eaf69d" @@ -12699,6 +12704,14 @@ stylelint-config-sass-guidelines@^10.0.0: postcss-scss "^4.0.6" stylelint-scss "^4.4.0" +stylelint-order@^6.0.3: + version "6.0.3" + resolved "https://registry.yarnpkg.com/stylelint-order/-/stylelint-order-6.0.3.tgz#160b78650bd90463241b992581efee7159baefc2" + integrity sha512-1j1lOb4EU/6w49qZeT2SQVJXm0Ht+Qnq9GMfUa3pMwoyojIWfuA+JUDmoR97Bht1RLn4ei0xtLGy87M7d29B1w== + dependencies: + postcss "^8.4.21" + postcss-sorting "^8.0.2" + stylelint-prettier@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/stylelint-prettier/-/stylelint-prettier-3.0.0.tgz#57028b99866ed4c3ae045ddd891bf9a77d274726"