diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index e8a34eb..12dd085 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -31,6 +31,9 @@ jobs:
-
name: Run JavaScript linter
run: npm run js:lint
+ -
+ name: Run Prettier
+ run: npm run prettier
-
name: Build website
run: npm run build
diff --git a/.prettierrc.yml b/.prettierrc.yml
index 92de971..3ab8ab3 100644
--- a/.prettierrc.yml
+++ b/.prettierrc.yml
@@ -1,4 +1,5 @@
-trailingComma: "es5"
tabWidth: 2
+printWidth: 120
semi: true
singleQuote: true
+trailingComma: "es5"
diff --git a/package.json b/package.json
index cdc986c..572afea 100644
--- a/package.json
+++ b/package.json
@@ -6,9 +6,10 @@
"js:lint": "npx eslint 'src/js/**'",
"js:fix": "npx eslint --fix 'src/js/**'",
"build": "npm-run-all dist:delete sass:compile eleventy:build",
+ "prettier": "npx prettier --check 'src/scss/**/*.scss'",
"sass:watch": "sass --watch --update --load-path=node_modules --no-source-map --style=expanded src/scss:src/css",
- "sass:fix": "stylelint src/scss/**/*.scss --fix",
- "sass:lint": "stylelint src/scss/**/*.scss",
+ "sass:fix": "stylelint 'src/scss/**/*.scss' --fix",
+ "sass:lint": "stylelint 'src/scss/**/*.scss'",
"sass:compile": "sass --load-path=node_modules --no-source-map --style=compressed src/scss:src/css",
"start": "npm-run-all --parallel sass:watch eleventy:serve"
},
diff --git a/src/scss/component/_code-tab.scss b/src/scss/component/_code-tab.scss
index 03ceb1f..40d1692 100644
--- a/src/scss/component/_code-tab.scss
+++ b/src/scss/component/_code-tab.scss
@@ -53,7 +53,9 @@
flex-wrap: wrap;
gap: spacer('xxs') spacer('xs');
- > * + * { margin-block-start: 0; }
+ > * + * {
+ margin-block-start: 0;
+ }
&--title {
gap: spacer('xxs') spacer('s');
diff --git a/src/scss/component/_cookie-consent.scss b/src/scss/component/_cookie-consent.scss
index f07f7e7..ec84be2 100644
--- a/src/scss/component/_cookie-consent.scss
+++ b/src/scss/component/_cookie-consent.scss
@@ -12,11 +12,13 @@
}
.cookie-consent {
- @include set-css-variable((
- --base-color-text: hsl(0deg 0% 97%),
- --base-color-link: color('primary', $only-color: true, $map: dark.$colors),
- --base-color-link-hover: color.scale(color('primary', $only-color: true, $map: dark.$colors), $lightness: 20%),
- ));
+ @include set-css-variable(
+ (
+ --base-color-text: hsl(0deg 0% 97%),
+ --base-color-link: color('primary', $only-color: true, $map: dark.$colors),
+ --base-color-link-hover: color.scale(color('primary', $only-color: true, $map: dark.$colors), $lightness: 20%),
+ )
+ );
align-items: center;
background-color: hsl(260deg 70% 6%);
diff --git a/src/scss/component/_ide.scss b/src/scss/component/_ide.scss
index e5ed2b0..6160660 100644
--- a/src/scss/component/_ide.scss
+++ b/src/scss/component/_ide.scss
@@ -97,7 +97,7 @@
}
}
- pre[class*=language-] {
+ pre[class*='language-'] {
border-radius: 0 0 var(--doc-border-radius-md);
padding: 2rem 2.25rem;
}
diff --git a/src/scss/component/_pagefind.scss b/src/scss/component/_pagefind.scss
index 95243db..7316814 100644
--- a/src/scss/component/_pagefind.scss
+++ b/src/scss/component/_pagefind.scss
@@ -23,10 +23,7 @@
&::before {
--size: 1em;
- @include field-icon(
- config('search', $form-icon, false),
- color('icon', 'search', true)
- );
+ @include field-icon(config('search', $form-icon, false), color('icon', 'search', true));
background-size: var(--size);
block-size: var(--size);
content: '';
diff --git a/src/scss/component/_pagination.scss b/src/scss/component/_pagination.scss
index 46dcb66..213b124 100644
--- a/src/scss/component/_pagination.scss
+++ b/src/scss/component/_pagination.scss
@@ -1,11 +1,6 @@
@use 'sprucecss/scss/spruce' as *;
-@include generate-btn(
- '.pagination a',
- null,
- false,
- true
-);
+@include generate-btn('.pagination a', null, false, true);
.pagination {
@include clear-list;
@@ -21,15 +16,17 @@
a {
@include btn-variant('pagination');
- @include set-css-variable((
- --padding: 1em 1.25em,
- ));
+ @include set-css-variable(
+ (
+ --padding: 1em 1.25em,
+ )
+ );
border-radius: var(--doc-border-radius-md);
font-size: 0.91375rem;
font-weight: 700;
text-transform: uppercase;
- &[aria-current="page"] {
+ &[aria-current='page'] {
background: color('pagination-background-hover', 'btn');
border-color: color('pagination-background-hover', 'btn');
color: color('pagination-foreground-hover', 'btn');
diff --git a/src/scss/component/_theme-switcher.scss b/src/scss/component/_theme-switcher.scss
index 1ec1852..c13d534 100644
--- a/src/scss/component/_theme-switcher.scss
+++ b/src/scss/component/_theme-switcher.scss
@@ -5,9 +5,15 @@
display: inline-flex;
position: relative;
- &[data-theme-mode='system'] &__system-mode { display: flex; }
- &[data-theme-mode='light'] &__light-mode { display: flex; }
- &[data-theme-mode='dark'] &__dark-mode { display: flex; }
+ &[data-theme-mode='system'] &__system-mode {
+ display: flex;
+ }
+ &[data-theme-mode='light'] &__light-mode {
+ display: flex;
+ }
+ &[data-theme-mode='dark'] &__dark-mode {
+ display: flex;
+ }
button {
display: none;
diff --git a/src/scss/component/card/_accordion.scss b/src/scss/component/card/_accordion.scss
index 9204f0c..a6cbafa 100644
--- a/src/scss/component/card/_accordion.scss
+++ b/src/scss/component/card/_accordion.scss
@@ -72,11 +72,11 @@
display: grid;
padding-inline: spacer('m');
- &[aria-hidden="true"] {
+ &[aria-hidden='true'] {
grid-template-rows: 0fr;
}
- &[aria-hidden="false"] {
+ &[aria-hidden='false'] {
grid-template-rows: 1fr;
padding-block-end: spacer('m');
}
diff --git a/src/scss/config/_config.scss b/src/scss/config/_config.scss
index 992318b..09eac11 100644
--- a/src/scss/config/_config.scss
+++ b/src/scss/config/_config.scss
@@ -77,7 +77,8 @@ $color-dark: hsl(260deg 70% 6%);
),
$dark-colors: dark.$colors,
$form-icon: (
- 'search': '',
+ 'search':
+ '',
),
$layout: (
'container-inline-size': 94rem,
@@ -85,5 +86,5 @@ $color-dark: hsl(260deg 70% 6%);
$settings: (
'css-custom-properties': true,
'html-smooth-scrolling': true,
- ),
+ )
);
diff --git a/src/scss/config/_dark-mode.scss b/src/scss/config/_dark-mode.scss
index 0899df7..67fa1fd 100644
--- a/src/scss/config/_dark-mode.scss
+++ b/src/scss/config/_dark-mode.scss
@@ -1,18 +1,12 @@
@use 'sprucecss/scss/spruce' as *;
-@include generate-color-variables(
- $dark-colors,
- ':root[data-theme-mode="dark"]'
-);
+@include generate-color-variables($dark-colors, ':root[data-theme-mode="dark"]');
[data-theme-mode='dark'] {
color-scheme: dark;
/* stylelint-disable-next-line selector-no-qualifying-type */
select.form-control:not([multiple]):not([size]) {
- @include field-icon(
- config('select', $form-icon, false),
- color('select-foreground', 'form', true, $dark-colors),
- );
+ @include field-icon(config('select', $form-icon, false), color('select-foreground', 'form', true, $dark-colors));
}
}
diff --git a/src/scss/config/_font.scss b/src/scss/config/_font.scss
index 2a4cd12..ec1750d 100644
--- a/src/scss/config/_font.scss
+++ b/src/scss/config/_font.scss
@@ -1,35 +1,13 @@
@use 'sprucecss/scss/spruce' as *;
-@include font-face(
- 'Inter',
- '../../font/inter-v13-latin-regular.woff2'
-);
+@include font-face('Inter', '../../font/inter-v13-latin-regular.woff2');
-@include font-face(
- 'Inter',
- '../../font/inter-v13-latin-500.woff2',
- 500
-);
+@include font-face('Inter', '../../font/inter-v13-latin-500.woff2', 500);
-@include font-face(
- 'Inter',
- '../../font/inter-v13-latin-700.woff2',
- 700
-);
+@include font-face('Inter', '../../font/inter-v13-latin-700.woff2', 700);
-@include font-face(
- 'Figtree',
- '../../font/figtree-v5-latin-regular.woff2'
-);
+@include font-face('Figtree', '../../font/figtree-v5-latin-regular.woff2');
-@include font-face(
- 'Figtree',
- '../../font/figtree-v5-latin-500.woff2',
- 500
-);
+@include font-face('Figtree', '../../font/figtree-v5-latin-500.woff2', 500);
-@include font-face(
- 'Figtree',
- '../../font/figtree-v5-latin-700.woff2',
- 700
-);
+@include font-face('Figtree', '../../font/figtree-v5-latin-700.woff2', 700);
diff --git a/src/scss/layout/_container.scss b/src/scss/layout/_container.scss
index ec033a8..c187d03 100644
--- a/src/scss/layout/_container.scss
+++ b/src/scss/layout/_container.scss
@@ -4,10 +4,7 @@
--inline-size: #{config('container-inline-size', $layout)};
--gap: #{spacer-clamp(m, l)};
- @include layout-center(
- var(--gap),
- var(--inline-size)
- );
+ @include layout-center(var(--gap), var(--inline-size));
&--narrow {
--inline-size: 60rem;
diff --git a/src/scss/layout/_templates.scss b/src/scss/layout/_templates.scss
index b633948..bcfe5a0 100644
--- a/src/scss/layout/_templates.scss
+++ b/src/scss/layout/_templates.scss
@@ -10,6 +10,8 @@
gap: spacer('l');
grid-template-columns: repeat(var(--columns), minmax(0, 2fr));
- @include breakpoint('sm') { --columns: 2; }
+ @include breakpoint('sm') {
+ --columns: 2;
+ }
}
}
diff --git a/src/scss/main.scss b/src/scss/main.scss
index e8e8877..95d8b59 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -5,15 +5,16 @@
@forward 'extend';
@forward 'helper';
-
@use 'sprucecss/scss/spruce' as *;
:root {
- @include set-css-variable((
- --section-gap: clamp(5rem, 8vw, 9rem),
- --section-gap-half: clamp(3.5rem, 8vw, 6rem),
- --duration: 0.15s,
- ));
+ @include set-css-variable(
+ (
+ --section-gap: clamp(5rem, 8vw, 9rem),
+ --section-gap-half: clamp(3.5rem, 8vw, 6rem),
+ --duration: 0.15s,
+ )
+ );
}
body {
@@ -36,4 +37,6 @@ h6 {
font-family: var(--doc-heading-font-family);
}
-[x-cloak] { display: none !important; }
+[x-cloak] {
+ display: none !important;
+}
diff --git a/src/scss/section/_hero.scss b/src/scss/section/_hero.scss
index 393cc87..818401d 100644
--- a/src/scss/section/_hero.scss
+++ b/src/scss/section/_hero.scss
@@ -2,11 +2,7 @@
@use 'sprucecss/scss/spruce' as *;
.hero-wrapper {
- background: linear-gradient(
- 0deg,
- color('gradient-start', 'hero') 0%,
- color('gradient-end', 'hero') 100%
- );
+ background: linear-gradient(0deg, color('gradient-start', 'hero') 0%, color('gradient-end', 'hero') 100%);
}
.hero {
diff --git a/src/scss/section/_post-content.scss b/src/scss/section/_post-content.scss
index 2d40123..57fc35b 100644
--- a/src/scss/section/_post-content.scss
+++ b/src/scss/section/_post-content.scss
@@ -8,7 +8,27 @@
}
&--blog {
- :is(dd, dl, dl, h1, h2, h3, h4, h5, h6, hr, ul, ol, p:not(p:has(img)), blockquote, form, pre, [class*=language-], .notification, .anchor-heading) {
+ :is(
+ dd,
+ dl,
+ dl,
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ hr,
+ ul,
+ ol,
+ p:not(p:has(img)),
+ blockquote,
+ form,
+ pre,
+ [class*='language-'],
+ .notification,
+ .anchor-heading
+ ) {
@include layout-center(null, 45rem);
}
}