Skip to content

Commit 7cf86a9

Browse files
clhenrickclhenrick
authored
Merge pull request #178 from clhenrick/website-stylelint
add stylelint & css autoprefixer setup to website
2 parents 67c1db5 + 722bbf4 commit 7cf86a9

21 files changed

+1225
-454
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
**/coverage/
66
tmp/
77
.eslintcache
8+
.stylelintcache
89

910
# Local Netlify folder
1011
.netlify

‎website/.yarn/install-state.gz‎

94 KB
Binary file not shown.

‎website/package.json‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,15 @@
1515
"type": "module",
1616
"scripts": {
1717
"start": "run-p -l clean sass:build sass:watch js:watch eleventy:serve",
18-
"build": "run-s -l eleventy:build sass:build js:build",
18+
"build": "run-s -l eleventy:build sass:build prefix:css js:build",
1919
"clean": "rm -rf dist",
2020
"eleventy:serve": "yarn exec eleventy --serve --incremental --port=8080 --quiet",
2121
"eleventy:build": "yarn exec eleventy",
2222
"sass:watch": "sass --watch --update --color src/scss:dist/styles",
23-
"sass:build": "sass --style=compressed src/scss:dist/styles",
23+
"sass:build": "sass --style=compressed --no-source-map src/scss:dist/styles",
24+
"sass:lint": "stylelint src/scss/**/*.scss",
25+
"sass:lint-fix": "yarn sass:lint --fix",
26+
"prefix:css": "postcss dist/styles/**/*.css --no-map --use autoprefixer -r",
2427
"js:build": "node esbuild.config.js prod",
2528
"js:watch": "node esbuild.config.js",
2629
"js:lint": "eslint src/**/*.js",
@@ -54,6 +57,7 @@
5457
"@11ty/eleventy-plugin-handlebars": "^1.0.0",
5558
"@eslint/js": "^9.27.0",
5659
"@eslint/json": "^0.12.0",
60+
"autoprefixer": "^10.4.21",
5761
"browserslist": "^4.24.5",
5862
"browserslist-to-esbuild": "^2.1.1",
5963
"esbuild": "^0.25.4",
@@ -65,12 +69,16 @@
6569
"lint-staged": ">=10",
6670
"npm-run-all": "^4.1.5",
6771
"pinst": ">=2",
72+
"postcss": "^8.5.4",
73+
"postcss-cli": "^11.0.1",
6874
"prettier": "3.5.3",
69-
"sass": "^1.87.0"
75+
"sass": "^1.87.0",
76+
"stylelint": "^16.20.0",
77+
"stylelint-config-standard-scss": "^15.0.1"
7078
},
7179
"browserslist": {
7280
"production": [
73-
"> 0.25%",
81+
"> 0.2%",
7482
"not dead",
7583
"not op_mini all"
7684
],
@@ -83,6 +91,7 @@
8391
},
8492
"lint-staged": {
8593
"*.js": "eslint --cache --fix",
86-
"*.{js,css,md}": "prettier --write"
94+
"*.scss": "stylelint --cache --fix",
95+
"*.{js,css,scss,md}": "prettier --write"
8796
}
8897
}

‎website/src/scss/abstracts/_mixins.scss‎

Lines changed: 4 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -6,103 +6,28 @@
66
$darkblue: color.adjust(map.get($palette, "blue"), $lightness: -10%);
77
$inner-color: $darkblue;
88
$outer-color: map.get($palette, "white");
9+
910
@if $inverted {
1011
$inner-color: map.get($palette, "white");
1112
$outer-color: $darkblue;
1213
}
14+
1315
// meets 3:1 contrast for WCAG when over a white background
1416
outline: 3px solid $inner-color;
1517
box-shadow: 0 0 0 6px $outer-color;
1618
}
1719

1820
@mixin columns($width, $number: 2, $gap: 0) {
19-
-webkit-columns: $width $number;
20-
-moz-columns: $width $number;
2121
columns: $width $number;
22-
-webkit-column-gap: $gap;
23-
-moz-column-gap: $gap;
2422
column-gap: $gap;
25-
-webkit-column-rule: 1px solid map.get($palette, "light-grey");
26-
-moz-column-rule: 1px solid map.get($palette, "light-grey");
2723
column-rule: 1px solid map.get($palette, "light-grey");
2824
}
2925

30-
@mixin translateY($value) {
31-
-ms-transform: translateY($value);
32-
-webkit-transform: translateY($value);
33-
-moz-transform: translateY($value);
34-
-o-transform: translateY($value);
35-
transform: translateY($value);
36-
}
37-
38-
// background size for images
39-
@mixin background-size($width, $height) {
40-
-webkit-background-size: $width $height;
41-
-moz-background-size: $width $height;
42-
background-size: $width $height;
43-
}
44-
4526
// animations
4627
@mixin animation($name, $interval: 0.8s, $steps: 10, $length: infinite) {
47-
-webkit-animation: $name $interval steps($steps) $length;
48-
-moz-animation: $name $interval steps($steps) $length;
49-
-ms-animation: $name $interval steps($steps) $length;
50-
-o-animation: $name $interval steps($steps) $length;
5128
animation: $name $interval steps($steps) $length;
5229
}
5330

54-
@mixin keyframes($name, $to, $from: 0) {
55-
@-webkit-keyframes $name {
56-
from {
57-
background-position: $from;
58-
}
59-
60-
to {
61-
background-position: $to;
62-
}
63-
}
64-
65-
@-moz-keyframes $name {
66-
from {
67-
background-position: $from;
68-
}
69-
70-
to {
71-
background-position: $to;
72-
}
73-
}
74-
75-
@-ms-keyframes $name {
76-
from {
77-
background-position: $from;
78-
}
79-
80-
to {
81-
background-position: $to;
82-
}
83-
}
84-
85-
@-o-keyframes $name {
86-
from {
87-
background-position: $from;
88-
}
89-
90-
to {
91-
background-position: $to;
92-
}
93-
}
94-
95-
@keyframes $name {
96-
from {
97-
background-position: $from;
98-
}
99-
100-
to {
101-
background-position: $to;
102-
}
103-
}
104-
}
105-
10631
// media queries for screen width
10732
@mixin responsive($width) {
10833
@if $width == medium-screens {
@@ -121,7 +46,7 @@
12146
}
12247

12348
// media queries for screen height
124-
@mixin responsive_height($height) {
49+
@mixin responsive-height($height) {
12550
@if $height == tall-screens {
12651
@media only screen and (max-height: $height-lg) {
12752
@content;
@@ -137,7 +62,7 @@
13762
}
13863
}
13964

140-
@mixin responsive_mobile_landscape() {
65+
@mixin responsive-mobile-landscape() {
14166
@media only screen and (orientation: landscape) and (height <= $height-sm) {
14267
@content;
14368
}

‎website/src/scss/base/_base.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
--fs-xxl: #{map.get($fs, "mobile-xxl")};
2828
--fs-xxxl: #{map.get($fs, "mobile-xxxl")};
2929
}
30-
@media screen and (min-width: 1280px) {
30+
31+
@media screen and (width >= 1280px) {
3132
:root {
3233
--fs-sm: #{map.get($fs, "sm")};
3334
--fs-base: #{map.get($fs, "base")};
@@ -41,7 +42,7 @@
4142
}
4243

4344
*:focus-visible {
44-
@include focus-indicator();
45+
@include focus-indicator;
4546
}
4647

4748
html {

‎website/src/scss/base/_reset.scss‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,18 @@
1717

1818
// Prevent font size inflation
1919
html {
20-
-moz-text-size-adjust: none;
21-
-webkit-text-size-adjust: none;
2220
text-size-adjust: none;
2321
}
2422

25-
// disable subpixel antialiasing
26-
// see: https://www.joshwcomeau.com/css/custom-css-reset/#five-improve-text-rendering-6
2723
body {
24+
// disable subpixel antialiasing
25+
// see: https://www.joshwcomeau.com/css/custom-css-reset/#five-improve-text-rendering-6
2826
-webkit-font-smoothing: antialiased;
27+
28+
// Set core body defaults
29+
min-height: 100vh;
30+
min-height: -webkit-fill-available;
31+
line-height: $normal-text-line-height;
2932
}
3033

3134
// Remove default margin in favour of better control in authored CSS
@@ -49,13 +52,6 @@
4952
list-style: none;
5053
}
5154

52-
// Set core body defaults
53-
body {
54-
min-height: 100vh;
55-
min-height: -webkit-fill-available;
56-
line-height: $normal-text-line-height;
57-
}
58-
5955
// Set shorter line heights on headings and interactive elements
6056
h1,
6157
h2,
@@ -86,7 +82,7 @@
8682
// A elements that don't have a class get default styles
8783
a:not([class]) {
8884
text-decoration-skip-ink: auto;
89-
color: currentColor;
85+
color: currentcolor;
9086
}
9187

9288
// Make media easier to work with

‎website/src/scss/components/_address_form.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ $input-border-width: 3px;
3939

4040
&:focus-visible {
4141
@include focus-indicator(true);
42+
4243
outline-offset: 0;
4344
}
4445

‎website/src/scss/components/_buttons.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
// orange rounded buttons
3333
&--primary {
3434
@extend .button;
35+
3536
min-width: 170px;
3637
background-color: map.get($palette, "darkorange");
3738
margin: 0 auto;
@@ -46,6 +47,7 @@
4647
// secondary rounded buttons
4748
&--secondary {
4849
@extend .button;
50+
4951
padding: map.get($spacing, "sm") map.get($spacing, "med2");
5052
border-radius: map.get($border-radius, "xl");
5153
border: 2px solid map.get($palette, "green");
@@ -61,6 +63,7 @@
6163
// the "Next" buttons with the downward facing chevron icon
6264
&--go-next {
6365
@extend .button;
66+
6467
color: map.get($palette, "darkorange");
6568
display: flex;
6669
flex-direction: column;

‎website/src/scss/components/_checking-sprite.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
}
2222
}
2323

24-
@include responsive_height(medium-screens) {
24+
@include responsive-height(medium-screens) {
2525
background: url("../../../assets/png/checking-sprite-sm.png");
2626
width: 128px;
2727
height: 288px;

‎website/src/scss/components/_language_toggle.scss‎

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,6 @@
1212
left: map.get($spacing, "xs");
1313
z-index: $z-index-min;
1414

15-
// sidebar on info pages
16-
aside.info-pages & {
17-
position: static;
18-
}
19-
2015
// buttons for "mobile" width viewports on homepage
2116
.mobile & {
2217
display: none;
@@ -25,22 +20,6 @@
2520
left: map.get($spacing, "sm");
2621
}
2722

28-
ul {
29-
display: flex;
30-
flex-direction: column;
31-
align-items: flex-start;
32-
}
33-
34-
aside.info-pages & {
35-
ul {
36-
flex-direction: row;
37-
}
38-
}
39-
40-
li {
41-
margin-block-end: 0;
42-
}
43-
4423
a[lang] {
4524
display: inline-block;
4625
font-weight: 300;
@@ -58,7 +37,24 @@
5837
}
5938
}
6039

40+
ul {
41+
display: flex;
42+
flex-direction: column;
43+
align-items: flex-start;
44+
}
45+
46+
li {
47+
margin-block-end: 0;
48+
}
49+
50+
// sidebar on info pages
6151
aside.info-pages & {
52+
position: static;
53+
54+
ul {
55+
flex-direction: row;
56+
}
57+
6258
a[lang] {
6359
padding-inline: 0;
6460
}

0 commit comments

Comments
 (0)