From 98d50bed97d52d959f0430ffb11a7f79b9589f0e Mon Sep 17 00:00:00 2001 From: Tomasz Dudek Date: Wed, 16 Aug 2023 09:18:28 +0200 Subject: [PATCH] Improves pre compiler draft --- blocks/columns/columns.css | 2 +- blocks/columns/columns.scss | 28 +- blocks/form/form.css | 1 + blocks/form/form.js | 189 ++++++++ blocks/form/form.scss | 122 +++++ blocks/form/form.ts | 197 +++++++++ blocks/header/header.js | 3 + blocks/header/header.ts | 3 + blocks/hero/hero.scss | 5 +- blocks/myblock/myblock.scss | 4 +- package-lock.json | 734 ++++++++++++++++++++++--------- package.json | 7 +- scripts/lib-franklin.js | 10 +- scripts/scripts.js | 2 + styles/_common-dependencies.css | 0 styles/_common-dependencies.scss | 4 + styles/fonts.css | 18 +- styles/fonts.scss | 17 + styles/lazy-styles.css | 1 - styles/lazy-styles.scss | 1 + styles/styles.css | 252 +---------- styles/styles.scss | 262 +++++++++++ tsconfig.json | 8 +- 23 files changed, 1372 insertions(+), 498 deletions(-) create mode 100644 blocks/form/form.css create mode 100644 blocks/form/form.js create mode 100644 blocks/form/form.scss create mode 100644 blocks/form/form.ts create mode 100644 styles/_common-dependencies.css create mode 100644 styles/_common-dependencies.scss create mode 100644 styles/fonts.scss create mode 100644 styles/lazy-styles.scss create mode 100644 styles/styles.scss diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index ed76569..6a5652e 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -1 +1 @@ -.columns>div{flex-direction:column;display:flex}.columns img{width:100%}.columns>div>div{order:1}.columns>div>.columns-img-col{order:0}.columns>div>.columns-img-col img{display:block}@media(min-width: 900px){.columns>div{align-items:center;flex-direction:unset;gap:32px}.columns>div>div{flex:1;order:unset}} \ No newline at end of file +.columns>div{display:flex;flex-direction:column}@media(min-width: 900px){.columns>div{align-items:center;flex-direction:unset;gap:32px}}.columns img{width:100%}.columns>div>div{order:1}@media(min-width: 900px){.columns>div>div{flex:1;order:unset}}.columns>div>.columns-img-col{order:0}.columns>div>.columns-img-col img{display:block} \ No newline at end of file diff --git a/blocks/columns/columns.scss b/blocks/columns/columns.scss index d963737..7b36b2e 100644 --- a/blocks/columns/columns.scss +++ b/blocks/columns/columns.scss @@ -1,6 +1,14 @@ +@import '../../styles/common-dependencies'; + .columns > div { - flex-direction: column; display: flex; + flex-direction: column; + + @include breakpoint($bp-desktop) { + align-items: center; + flex-direction: unset; + gap: 32px; + } } .columns img { @@ -9,6 +17,11 @@ .columns > div > div { order: 1; + + @include breakpoint($bp-desktop) { + flex: 1; + order: unset; + } } .columns > div > .columns-img-col { @@ -18,16 +31,3 @@ .columns > div > .columns-img-col img { display: block; } - -@media (min-width: 900px) { - .columns > div { - align-items: center; - flex-direction: unset; - gap: 32px; - } - - .columns > div > div { - flex: 1; - order: unset; - } -} diff --git a/blocks/form/form.css b/blocks/form/form.css new file mode 100644 index 0000000..4ab3674 --- /dev/null +++ b/blocks/form/form.css @@ -0,0 +1 @@ +main .form{background-color:var(--color-white);padding:var(--spacing-s);border-radius:var(--card-border-radius-l);filter:var(--image-filter-drop-shadow-small);border:solid 1px var(--bg-color-grey)}main .form h2{padding:var(--spacing-s) 0;font-size:var(--type-heading-l-lh)}main .form h3{padding-top:var(--spacing-s);font-size:var(--type-heading-m-size)}main .form input,main .form textarea,main .form select{border:solid 1px var(--bg-color-grey);padding:var(--spacing-xxs) var(--spacing-xs);width:100%;max-width:50rem;box-sizing:border-box;border-radius:var(--input-border-radius);font-size:var(--type-body-s-size);line-height:var(--type-body-s-lh);font-family:var(--body-font-family)}main .form textarea{min-height:100px}main .form input:hover,main .form select:hover{border-color:var(--color-font-grey)}main .form label{display:block;padding-bottom:var(--spacing-xxs);box-sizing:border-box;font-size:var(--type-body-s-size);line-height:var(--type-body-s-lh)}main .form label.required::after{content:"*";color:var(--color-black);padding-left:var(--spacing-xxxs)}main .form .field-wrapper{margin-bottom:var(--spacing-m)}main .form .form-checkbox-wrapper{display:flex;align-items:center;margin:var(--spacing-xs) 0}main .form .form-checkbox-wrapper input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;height:20px;width:20px;position:relative;border:unset;padding:unset;margin-right:var(--spacing-xxs);margin-left:0}main .form .form-checkbox-wrapper input[type=checkbox]::after{display:block;position:absolute;top:0;left:0;height:20px;width:20px;content:" ";background-size:contain}main .form .form-checkbox-wrapper input[type=checkbox]:checked::after{background-size:contain;content:" "}main .form .form-checkbox-wrapper label{display:block;font-size:var(--type-body-xxs-size);line-height:var(--type-body-xxs-lh);padding-bottom:0}main .form-legal-wrapper p{font-size:var(--type-body-xxs-size);line-height:var(--type-body-xxs-lh);font-style:italic}main .form button{font-family:var(--body-font-family)}@media screen and (min-width: 900px){main .form{padding:var(--spacing-ml)}main .form .field-wrapper{display:flex}main .form label{width:72%}} \ No newline at end of file diff --git a/blocks/form/form.js b/blocks/form/form.js new file mode 100644 index 0000000..00802bb --- /dev/null +++ b/blocks/form/form.js @@ -0,0 +1,189 @@ +function createSelect(fd) { + const select = document.createElement('select'); + select.id = fd.Field; + if (fd.Placeholder) { + const ph = document.createElement('option'); + ph.textContent = fd.Placeholder; + ph.setAttribute('selected', ''); + ph.setAttribute('disabled', ''); + select.append(ph); + } + fd.Options.split(',').forEach((o) => { + const option = document.createElement('option'); + option.textContent = o.trim(); + option.value = o.trim(); + select.append(option); + }); + if (fd.Mandatory === 'x') { + select.setAttribute('required', 'required'); + } + return select; +} +function constructPayload(form) { + const payload = {}; + [...form.elements].forEach((fe) => { + if (fe.type === 'checkbox') { + if (fe.checked) + payload[fe.id] = fe.value; + } + else if (fe.id) { + payload[fe.id] = fe.value; + } + }); + return payload; +} +async function submitForm(form) { + const payload = constructPayload(form); + payload.timestamp = new Date().toJSON(); + const resp = await fetch(form.dataset.action, { + method: 'POST', + cache: 'no-cache', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ data: payload }), + }); + await resp.text(); + return payload; +} +function createButton(fd) { + const button = document.createElement('button'); + button.textContent = fd.Label; + button.classList.add('button'); + if (fd.Type === 'submit') { + button.addEventListener('click', async (event) => { + const form = button.closest('form'); + if (fd.Placeholder) + form.dataset.action = fd.Placeholder; + if (form.checkValidity()) { + event.preventDefault(); + button.setAttribute('disabled', ''); + await submitForm(form); + const redirectTo = fd.Extra; + window.location.href = redirectTo; + } + }); + } + return button; +} +function createHeading(fd, el) { + const heading = document.createElement(el); + heading.textContent = fd.Label; + return heading; +} +function createInput(fd) { + const input = document.createElement('input'); + input.type = fd.Type; + input.id = fd.Field; + input.setAttribute('placeholder', fd.Placeholder); + if (fd.Mandatory === 'x') { + input.setAttribute('required', 'required'); + } + return input; +} +function createTextArea(fd) { + const input = document.createElement('textarea'); + input.id = fd.Field; + input.setAttribute('placeholder', fd.Placeholder); + if (fd.Mandatory === 'x') { + input.setAttribute('required', 'required'); + } + return input; +} +function createLabel(fd) { + const label = document.createElement('label'); + label.setAttribute('for', fd.Field); + label.textContent = fd.Label; + if (fd.Mandatory === 'x') { + label.classList.add('required'); + } + return label; +} +function applyRules(form, rules) { + const payload = constructPayload(form); + rules.forEach((field) => { + const { type, condition: { key, operator, value } } = field.rule; + if (type === 'visible') { + if (operator === 'eq') { + if (payload[key] === value) { + form.querySelector(`.${field.fieldId}`).classList.remove('hidden'); + } + else { + form.querySelector(`.${field.fieldId}`).classList.add('hidden'); + } + } + } + }); +} +function fill(form) { + const { action } = form.dataset; + if (action === '/tools/bot/register-form') { + const loc = new URL(window.location.href); + form.querySelector('#owner').value = loc.searchParams.get('owner') || ''; + form.querySelector('#installationId').value = loc.searchParams.get('id') || ''; + } +} +async function createForm(formURL) { + console.log('formURL', formURL); // todo: remove before merge! + const { pathname } = new URL(formURL); + const resp = await fetch(pathname); + const json = await resp.json(); + const form = document.createElement('form'); + const rules = []; + // eslint-disable-next-line prefer-destructuring + form.dataset.action = pathname.split('.json')[0]; + json.data.forEach((fd) => { + fd.Type = fd.Type || 'text'; + const fieldWrapper = document.createElement('div'); + const style = fd.Style ? ` form-${fd.Style}` : ''; + const fieldId = `form-${fd.Type}-wrapper${style}`; + fieldWrapper.className = fieldId; + fieldWrapper.classList.add('field-wrapper'); + switch (fd.Type) { + case 'select': + fieldWrapper.append(createLabel(fd)); + fieldWrapper.append(createSelect(fd)); + break; + case 'heading': + fieldWrapper.append(createHeading(fd, 'h3')); + break; + case 'legal': + fieldWrapper.append(createHeading(fd, 'p')); + break; + case 'checkbox': + fieldWrapper.append(createInput(fd)); + fieldWrapper.append(createLabel(fd)); + break; + case 'text-area': + fieldWrapper.append(createLabel(fd)); + fieldWrapper.append(createTextArea(fd)); + break; + case 'submit': + fieldWrapper.append(createButton(fd)); + break; + default: + fieldWrapper.append(createLabel(fd)); + fieldWrapper.append(createInput(fd)); + } + if (fd.Rules) { + try { + rules.push({ fieldId, rule: JSON.parse(fd.Rules) }); + } + catch (e) { + // eslint-disable-next-line no-console + console.warn(`Invalid Rule ${fd.Rules}: ${e}`); + } + } + form.append(fieldWrapper); + }); + form.addEventListener('change', () => applyRules(form, rules)); + applyRules(form, rules); + fill(form); + return (form); +} +export default async function decorate(block) { + const form = block.querySelector('a[href$=".json"]'); + if (form) { + form.replaceWith(await createForm(form.href)); + } +} diff --git a/blocks/form/form.scss b/blocks/form/form.scss new file mode 100644 index 0000000..99cf345 --- /dev/null +++ b/blocks/form/form.scss @@ -0,0 +1,122 @@ +main .form { + background-color: var(--color-white); + padding: var(--spacing-s); + border-radius: var(--card-border-radius-l); + filter: var(--image-filter-drop-shadow-small); + border: solid 1px var(--bg-color-grey); +} + +main .form h2 { + padding: var(--spacing-s) 0; + font-size: var(--type-heading-l-lh); +} + +main .form h3 { + padding-top: var(--spacing-s); + font-size: var(--type-heading-m-size); +} + +main .form input, +main .form textarea, +main .form select { + border: solid 1px var(--bg-color-grey); + padding: var(--spacing-xxs) var(--spacing-xs); + width: 100%; + max-width: 50rem; + box-sizing: border-box; + border-radius: var(--input-border-radius); + font-size: var(--type-body-s-size); + line-height: var(--type-body-s-lh); + font-family: var(--body-font-family); +} + +main .form textarea { + min-height: 100px; +} + +main .form input:hover, +main .form select:hover { + border-color: var(--color-font-grey); +} + +main .form label { + display: block; + padding-bottom: var(--spacing-xxs); + box-sizing: border-box; + font-size: var(--type-body-s-size); + line-height: var(--type-body-s-lh); +} + +main .form label.required::after { + content: "*"; + color: var(--color-black); + padding-left: var(--spacing-xxxs); +} + +main .form .field-wrapper { + margin-bottom: var(--spacing-m); +} + +main .form .form-checkbox-wrapper { + display: flex; + align-items: center; + margin: var(--spacing-xs) 0; +} + +main .form .form-checkbox-wrapper input[type='checkbox'] { + appearance: none; + height: 20px; + width: 20px; + position: relative; + border: unset; + padding: unset; + margin-right: var(--spacing-xxs); + margin-left: 0; +} + +main .form .form-checkbox-wrapper input[type='checkbox']::after { + display: block; + position: absolute; + top: 0; + left: 0; + height: 20px; + width: 20px; + content: ' '; + background-size: contain; +} + +main .form .form-checkbox-wrapper input[type='checkbox']:checked::after { + background-size: contain; + content: ' '; +} + +main .form .form-checkbox-wrapper label { + display: block; + font-size: var(--type-body-xxs-size); + line-height: var(--type-body-xxs-lh); + padding-bottom: 0; +} + +main .form-legal-wrapper p { + font-size: var(--type-body-xxs-size); + line-height: var(--type-body-xxs-lh); + font-style: italic; +} + +main .form button { + font-family: var(--body-font-family); +} + +@media screen and (min-width: 900px) { + main .form { + padding: var(--spacing-ml); + } + + main .form .field-wrapper { + display: flex; + } + + main .form label { + width: 72%; + } +} diff --git a/blocks/form/form.ts b/blocks/form/form.ts new file mode 100644 index 0000000..c8e6c34 --- /dev/null +++ b/blocks/form/form.ts @@ -0,0 +1,197 @@ +function createSelect(fd) { + const select = document.createElement('select'); + select.id = fd.Field; + if (fd.Placeholder) { + const ph = document.createElement('option'); + ph.textContent = fd.Placeholder; + ph.setAttribute('selected', ''); + ph.setAttribute('disabled', ''); + select.append(ph); + } + fd.Options.split(',').forEach((o) => { + const option = document.createElement('option'); + option.textContent = o.trim(); + option.value = o.trim(); + select.append(option); + }); + if (fd.Mandatory === 'x') { + select.setAttribute('required', 'required'); + } + return select; +} + +function constructPayload(form) { + const payload:object = {}; + [...form.elements].forEach((fe) => { + if (fe.type === 'checkbox') { + if (fe.checked) payload[fe.id] = fe.value; + } else if (fe.id) { + payload[fe.id] = fe.value; + } + }); + return payload; +} + +async function submitForm(form) { + const payload = constructPayload(form); + payload.timestamp = new Date().toJSON(); + const resp = await fetch(form.dataset.action, { + method: 'POST', + cache: 'no-cache', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ data: payload }), + }); + await resp.text(); + return payload; +} + +function createButton(fd) { + const button = document.createElement('button'); + button.textContent = fd.Label; + button.classList.add('button'); + if (fd.Type === 'submit') { + button.addEventListener('click', async (event) => { + const form = button.closest('form'); + if (fd.Placeholder) form.dataset.action = fd.Placeholder; + if (form.checkValidity()) { + event.preventDefault(); + button.setAttribute('disabled', ''); + await submitForm(form); + const redirectTo = fd.Extra; + window.location.href = redirectTo; + } + }); + } + return button; +} + +function createHeading(fd, el) { + const heading = document.createElement(el); + heading.textContent = fd.Label; + return heading; +} + +function createInput(fd) { + const input = document.createElement('input'); + input.type = fd.Type; + input.id = fd.Field; + input.setAttribute('placeholder', fd.Placeholder); + if (fd.Mandatory === 'x') { + input.setAttribute('required', 'required'); + } + return input; +} + +function createTextArea(fd) { + const input = document.createElement('textarea'); + input.id = fd.Field; + input.setAttribute('placeholder', fd.Placeholder); + if (fd.Mandatory === 'x') { + input.setAttribute('required', 'required'); + } + return input; +} + +function createLabel(fd) { + const label = document.createElement('label'); + label.setAttribute('for', fd.Field); + label.textContent = fd.Label; + if (fd.Mandatory === 'x') { + label.classList.add('required'); + } + return label; +} + +function applyRules(form, rules) { + const payload = constructPayload(form); + rules.forEach((field) => { + const { type, condition: { key, operator, value } } = field.rule; + if (type === 'visible') { + if (operator === 'eq') { + if (payload[key] === value) { + form.querySelector(`.${field.fieldId}`).classList.remove('hidden'); + } else { + form.querySelector(`.${field.fieldId}`).classList.add('hidden'); + } + } + } + }); +} + +function fill(form) { + const { action } = form.dataset; + if (action === '/tools/bot/register-form') { + const loc = new URL(window.location.href); + form.querySelector('#owner').value = loc.searchParams.get('owner') || ''; + form.querySelector('#installationId').value = loc.searchParams.get('id') || ''; + } +} + +async function createForm(formURL) { + console.log('formURL', formURL); // todo: remove before merge! + const { pathname } = new URL(formURL); + const resp = await fetch(pathname); + const json = await resp.json(); + const form = document.createElement('form'); + const rules = []; + // eslint-disable-next-line prefer-destructuring + form.dataset.action = pathname.split('.json')[0]; + json.data.forEach((fd) => { + fd.Type = fd.Type || 'text'; + const fieldWrapper = document.createElement('div'); + const style = fd.Style ? ` form-${fd.Style}` : ''; + const fieldId = `form-${fd.Type}-wrapper${style}`; + fieldWrapper.className = fieldId; + fieldWrapper.classList.add('field-wrapper'); + switch (fd.Type) { + case 'select': + fieldWrapper.append(createLabel(fd)); + fieldWrapper.append(createSelect(fd)); + break; + case 'heading': + fieldWrapper.append(createHeading(fd, 'h3')); + break; + case 'legal': + fieldWrapper.append(createHeading(fd, 'p')); + break; + case 'checkbox': + fieldWrapper.append(createInput(fd)); + fieldWrapper.append(createLabel(fd)); + break; + case 'text-area': + fieldWrapper.append(createLabel(fd)); + fieldWrapper.append(createTextArea(fd)); + break; + case 'submit': + fieldWrapper.append(createButton(fd)); + break; + default: + fieldWrapper.append(createLabel(fd)); + fieldWrapper.append(createInput(fd)); + } + + if (fd.Rules) { + try { + rules.push({ fieldId, rule: JSON.parse(fd.Rules) }); + } catch (e) { + // eslint-disable-next-line no-console + console.warn(`Invalid Rule ${fd.Rules}: ${e}`); + } + } + form.append(fieldWrapper); + }); + + form.addEventListener('change', () => applyRules(form, rules)); + applyRules(form, rules); + fill(form); + return (form); +} + +export default async function decorate(block) { + const form = block.querySelector('a[href$=".json"]'); + if (form) { + form.replaceWith(await createForm(form.href)); + } +} diff --git a/blocks/header/header.js b/blocks/header/header.js index ca29245..9c0590b 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -130,5 +130,8 @@ export default async function decorate(block) { const navWrapper = createElement('div', 'nav-wrapper'); navWrapper.append(nav); block.append(navWrapper); + const search = block.querySelector('.icon-search'); + search.setAttribute('title', `${window.placeholders?.default?.searchTitle}`); + console.log('search', search); // todo: remove before merge! } } diff --git a/blocks/header/header.ts b/blocks/header/header.ts index aace2b9..348482d 100644 --- a/blocks/header/header.ts +++ b/blocks/header/header.ts @@ -138,5 +138,8 @@ export default async function decorate(block) { const navWrapper = createElement('div', 'nav-wrapper'); navWrapper.append(nav); block.append(navWrapper); + const search = block.querySelector('.icon-search'); + search.setAttribute('title', `${window.placeholders?.default?.searchTitle}`); + console.log('search', search); // todo: remove before merge! } } diff --git a/blocks/hero/hero.scss b/blocks/hero/hero.scss index 6a68382..bdd3316 100644 --- a/blocks/hero/hero.scss +++ b/blocks/hero/hero.scss @@ -25,10 +25,7 @@ main { .hero picture { position: absolute; z-index: -1; - top: 0; - left: 0; - bottom: 0; - right: 0; + inset: 0; object-fit: cover; box-sizing: border-box; } diff --git a/blocks/myblock/myblock.scss b/blocks/myblock/myblock.scss index 3b081bd..1e02bac 100644 --- a/blocks/myblock/myblock.scss +++ b/blocks/myblock/myblock.scss @@ -1,9 +1,11 @@ +@use "sass:color"; + .myblock { $myblock-background: mediumpurple; background-color: $myblock-background; border-radius: 2px; - border: 2px solid darken($myblock-background, 50%); + border: 2px solid color.adjust($myblock-background, -50%); &::after { color: white; diff --git a/package-lock.json b/package-lock.json index 5b6df4e..875e817 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,23 +15,24 @@ "@semantic-release/changelog": "6.0.3", "@semantic-release/exec": "6.0.3", "@semantic-release/git": "10.0.1", - "@types/node": "^20.4.5", - "@typescript-eslint/eslint-plugin": "^6.3.0", - "@typescript-eslint/parser": "^6.3.0", + "@types/node": "20.4.5", + "@typescript-eslint/eslint-plugin": "6.3.0", + "@typescript-eslint/parser": "6.3.0", "@web/test-runner": "0.15.1", "@web/test-runner-commands": "0.6.5", + "breakpoint-sass": "^3.0.0", "chai": "4.3.7", "eslint": "8.35.0", "eslint-config-airbnb-base": "15.0.0", - "eslint-config-prettier": "^9.0.0", + "eslint-config-prettier": "9.0.0", "eslint-plugin-import": "2.27.5", - "sass": "^1.64.2", + "sass": "1.64.2", "semantic-release": "21.0.5", "sinon": "15.0.1", - "stylelint": "^15.2.0", - "stylelint-config-standard": "30.0.1", - "stylelint-config-standard-scss": "^10.0.0", - "typescript": "^5.1.6" + "stylelint": "15.10.2", + "stylelint-config-standard": "34.0.0", + "stylelint-config-standard-scss": "10.0.0", + "typescript": "5.1.6" } }, "node_modules/@ampproject/remapping": { @@ -395,66 +396,89 @@ } }, "node_modules/@csstools/css-parser-algorithms": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.0.1.tgz", - "integrity": "sha512-B9/8PmOtU6nBiibJg0glnNktQDZ3rZnGn/7UmDfrm2vMtrdlXO3p7ErE95N0up80IRk9YEtB5jyj/TmQ1WH3dw==", + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.1.tgz", + "integrity": "sha512-xrvsmVUtefWMWQsGgFffqWSK03pZ1vfDki4IVIIUxxDKnGBzqNgv0A7SB1oXtVNEkcVO8xi1ZrTL29HhSu5kGA==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { - "@csstools/css-tokenizer": "^2.0.0" + "@csstools/css-tokenizer": "^2.2.0" } }, "node_modules/@csstools/css-tokenizer": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.1.0.tgz", - "integrity": "sha512-dtqFyoJBHUxGi9zPZdpCKP1xk8tq6KPHJ/NY4qWXiYo6IcSGwzk3L8x2XzZbbyOyBs9xQARoGveU2AsgLj6D2A==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.0.tgz", + "integrity": "sha512-wErmsWCbsmig8sQKkM6pFhr/oPha1bHfvxsUY5CYSQxwyhA9Ulrs8EqCgClhg4Tgg2XapVstGqSVcz0xOYizZA==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "engines": { "node": "^14 || ^16 || >=18" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" } }, "node_modules/@csstools/media-query-list-parser": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.0.1.tgz", - "integrity": "sha512-X2/OuzEbjaxhzm97UJ+95GrMeT29d1Ib+Pu+paGLuRWZnWRK9sI9r3ikmKXPWGA1C4y4JEdBEFpp9jEqCvLeRA==", + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.4.tgz", + "integrity": "sha512-V/OUXYX91tAC1CDsiY+HotIcJR+vPtzrX8pCplCpT++i8ThZZsq5F5dzZh/bDM3WUOjrvC1ljed1oSJxMfjqhw==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { - "@csstools/css-parser-algorithms": "^2.0.0", - "@csstools/css-tokenizer": "^2.0.0" + "@csstools/css-parser-algorithms": "^2.3.1", + "@csstools/css-tokenizer": "^2.2.0" } }, "node_modules/@csstools/selector-specificity": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.1.1.tgz", - "integrity": "sha512-jwx+WCqszn53YHOfvFMJJRd/B2GqkCBt+1MJSG6o5/s8+ytHMvDZXsJgUEWLk12UnLd7HYKac4BYU5i/Ron1Cw==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.0.tgz", + "integrity": "sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { - "postcss": "^8.4", - "postcss-selector-parser": "^6.0.10" + "postcss-selector-parser": "^6.0.13" } }, "node_modules/@eslint-community/eslint-utils": { @@ -2879,6 +2903,15 @@ "node": ">=8" } }, + "node_modules/breakpoint-sass": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/breakpoint-sass/-/breakpoint-sass-3.0.0.tgz", + "integrity": "sha512-qxJqSfTaOHI+RCGzvKWVRwwC2hMIaS0KV1b+asqWUFxdLv/yKNADF7AtT1uNnkt2VxSMZ2csM22CSc+Hez+EIg==", + "dev": true, + "peerDependencies": { + "sass": "^1.25" + } + }, "node_modules/browserslist": { "version": "4.21.4", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz", @@ -3578,9 +3611,9 @@ "dev": true }, "node_modules/cosmiconfig": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.1.0.tgz", - "integrity": "sha512-0tLZ9URlPGU7JsKq0DQOQ3FoRsYX8xDZ7xMiATQfaiGMz7EHowNkbU9u1coAOmnh9p/1ySpm0RB3JNWRXM5GCg==", + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.2.0.tgz", + "integrity": "sha512-3rTMnFJA1tCOPwRxtgF4wd7Ab2qvDbL8jX+3smjIbS4HlZBagTlpERbdN7iAbWlrfxE3M8c27kTwTawQ7st+OQ==", "dev": true, "dependencies": { "import-fresh": "^3.2.1", @@ -3646,9 +3679,9 @@ } }, "node_modules/css-functions-list": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.1.0.tgz", - "integrity": "sha512-/9lCvYZaUbBGvYUgYGFJ4dcYiyqdhSjG7IPVluoV8A1ILjkF7ilmhp1OGUz8n+nmBcu0RNrQAzgD8B6FJbrt2w==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.0.tgz", + "integrity": "sha512-d/jBMPyYybkkLVypgtGv12R+pIFw4/f/IHtCTxWpZc8ofTYOPigIgmA6vu5rMHartZC+WuXhBUHfnyNUIQSYrg==", "dev": true, "engines": { "node": ">=12.22" @@ -4770,9 +4803,9 @@ "dev": true }, "node_modules/fast-glob": { - "version": "3.2.12", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz", - "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz", + "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==", "dev": true, "dependencies": { "@nodelib/fs.stat": "^2.0.2", @@ -5477,9 +5510,9 @@ "dev": true }, "node_modules/html-tags": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz", - "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz", + "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==", "dev": true, "engines": { "node": ">=8" @@ -6408,9 +6441,9 @@ } }, "node_modules/known-css-properties": { - "version": "0.26.0", - "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.26.0.tgz", - "integrity": "sha512-5FZRzrZzNTBruuurWpvZnvP9pum+fe0HcK8z/ooo+U+Hmp4vtbyp1/QDsqmufirXy4egGzbaH/y2uCZf+6W5Kg==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.27.0.tgz", + "integrity": "sha512-uMCj6+hZYDoffuvAJjFAPz56E9uoowFHmTkqRtRq5WyC5Q6Cu/fTZKNQpX/RbzChBYLLl3lo8CjFZBAZXq9qFg==", "dev": true }, "node_modules/koa": { @@ -6926,24 +6959,78 @@ } }, "node_modules/meow": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz", - "integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==", + "version": "10.1.5", + "resolved": "https://registry.npmjs.org/meow/-/meow-10.1.5.tgz", + "integrity": "sha512-/d+PQ4GKmGvM9Bee/DPa8z3mXs/pkvJE2KEThngVNOqtmljC6K7NMPxtc2JeZYTmpWb9k/TmxjeL18ez3h7vCw==", "dev": true, "dependencies": { - "@types/minimist": "^1.2.0", - "camelcase-keys": "^6.2.2", - "decamelize": "^1.2.0", + "@types/minimist": "^1.2.2", + "camelcase-keys": "^7.0.0", + "decamelize": "^5.0.0", "decamelize-keys": "^1.1.0", "hard-rejection": "^2.1.0", "minimist-options": "4.1.0", - "normalize-package-data": "^3.0.0", - "read-pkg-up": "^7.0.1", - "redent": "^3.0.0", - "trim-newlines": "^3.0.0", - "type-fest": "^0.18.0", - "yargs-parser": "^20.2.3" + "normalize-package-data": "^3.0.2", + "read-pkg-up": "^8.0.0", + "redent": "^4.0.0", + "trim-newlines": "^4.0.2", + "type-fest": "^1.2.2", + "yargs-parser": "^20.2.9" + }, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/meow/node_modules/camelcase-keys": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-7.0.2.tgz", + "integrity": "sha512-Rjs1H+A9R+Ig+4E/9oyB66UC5Mj9Xq3N//vcLf2WzgdTi/3gUu3Z9KoqmlrEG4VuuLK8wJHofxzdQXz/knhiYg==", + "dev": true, + "dependencies": { + "camelcase": "^6.3.0", + "map-obj": "^4.1.0", + "quick-lru": "^5.1.1", + "type-fest": "^1.2.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/meow/node_modules/decamelize": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-5.0.1.tgz", + "integrity": "sha512-VfxadyCECXgQlkoEAjeghAr5gY3Hf+IKjKb+X8tGVDtveCjN+USwprd2q3QXBR9T1+x2DG0XZF5/w+7HAtSaXA==", + "dev": true, + "engines": { + "node": ">=10" }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/meow/node_modules/indent-string": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-5.0.0.tgz", + "integrity": "sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/meow/node_modules/quick-lru": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz", + "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==", + "dev": true, "engines": { "node": ">=10" }, @@ -6951,10 +7038,88 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/meow/node_modules/read-pkg": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-6.0.0.tgz", + "integrity": "sha512-X1Fu3dPuk/8ZLsMhEj5f4wFAF0DWoK7qhGJvgaijocXxBmSToKfbFtqbxMO7bVjNA1dmE5huAzjXj/ey86iw9Q==", + "dev": true, + "dependencies": { + "@types/normalize-package-data": "^2.4.0", + "normalize-package-data": "^3.0.2", + "parse-json": "^5.2.0", + "type-fest": "^1.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/meow/node_modules/read-pkg-up": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-8.0.0.tgz", + "integrity": "sha512-snVCqPczksT0HS2EC+SxUndvSzn6LRCwpfSvLrIfR5BKDQQZMaI6jPRC9dYvYFDRAuFEAnkwww8kBBNE/3VvzQ==", + "dev": true, + "dependencies": { + "find-up": "^5.0.0", + "read-pkg": "^6.0.0", + "type-fest": "^1.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/meow/node_modules/redent": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/redent/-/redent-4.0.0.tgz", + "integrity": "sha512-tYkDkVVtYkSVhuQ4zBgfvciymHaeuel+zFKXShfDnFP5SyVEP7qo70Rf1jTOTCx3vGNAbnEi/xFkcfQVMIBWag==", + "dev": true, + "dependencies": { + "indent-string": "^5.0.0", + "strip-indent": "^4.0.0" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/meow/node_modules/strip-indent": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-4.0.0.tgz", + "integrity": "sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==", + "dev": true, + "dependencies": { + "min-indent": "^1.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/meow/node_modules/trim-newlines": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-4.1.1.tgz", + "integrity": "sha512-jRKj0n0jXWo6kh62nA5TEh3+4igKDXLvzBJcPpiizP7oOolUrYIxmVBG9TOtHYFHoddUk6YvAkGeGoSVTXfQXQ==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/meow/node_modules/type-fest": { - "version": "0.18.1", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz", - "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz", + "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==", "dev": true, "engines": { "node": ">=10" @@ -7114,10 +7279,16 @@ "dev": true }, "node_modules/nanoid": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", - "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", + "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -11019,9 +11190,9 @@ } }, "node_modules/postcss": { - "version": "8.4.21", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz", - "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==", + "version": "8.4.27", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.27.tgz", + "integrity": "sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==", "dev": true, "funding": [ { @@ -11031,10 +11202,14 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "dependencies": { - "nanoid": "^3.3.4", + "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" }, @@ -12599,56 +12774,54 @@ "dev": true }, "node_modules/stylelint": { - "version": "15.2.0", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.2.0.tgz", - "integrity": "sha512-wjg5OLn8zQwjlj5cYUgyQpMWKzct42AG5dYlqkHRJQJqsystFFn3onqEc263KH4xfEI0W3lZCnlIhFfS64uwSA==", + "version": "15.10.2", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.10.2.tgz", + "integrity": "sha512-UxqSb3hB74g4DTO45QhUHkJMjKKU//lNUAOWyvPBVPZbCknJ5HjOWWZo+UDuhHa9FLeVdHBZXxu43eXkjyIPWg==", "dev": true, "dependencies": { - "@csstools/css-parser-algorithms": "^2.0.1", - "@csstools/css-tokenizer": "^2.0.1", - "@csstools/media-query-list-parser": "^2.0.1", - "@csstools/selector-specificity": "^2.1.1", + "@csstools/css-parser-algorithms": "^2.3.0", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/media-query-list-parser": "^2.1.2", + "@csstools/selector-specificity": "^3.0.0", "balanced-match": "^2.0.0", "colord": "^2.9.3", - "cosmiconfig": "^8.0.0", - "css-functions-list": "^3.1.0", + "cosmiconfig": "^8.2.0", + "css-functions-list": "^3.2.0", "css-tree": "^2.3.1", "debug": "^4.3.4", - "fast-glob": "^3.2.12", + "fast-glob": "^3.3.0", "fastest-levenshtein": "^1.0.16", "file-entry-cache": "^6.0.1", "global-modules": "^2.0.0", "globby": "^11.1.0", "globjoin": "^0.1.4", - "html-tags": "^3.2.0", + "html-tags": "^3.3.1", "ignore": "^5.2.4", "import-lazy": "^4.0.0", "imurmurhash": "^0.1.4", "is-plain-object": "^5.0.0", - "known-css-properties": "^0.26.0", + "known-css-properties": "^0.27.0", "mathml-tag-names": "^2.1.3", - "meow": "^9.0.0", + "meow": "^10.1.5", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", "picocolors": "^1.0.0", - "postcss": "^8.4.21", - "postcss-media-query-parser": "^0.2.3", + "postcss": "^8.4.25", "postcss-resolve-nested-selector": "^0.1.1", "postcss-safe-parser": "^6.0.0", - "postcss-selector-parser": "^6.0.11", + "postcss-selector-parser": "^6.0.13", "postcss-value-parser": "^4.2.0", "resolve-from": "^5.0.0", "string-width": "^4.2.3", "strip-ansi": "^6.0.1", "style-search": "^0.1.0", - "supports-hyperlinks": "^2.3.0", + "supports-hyperlinks": "^3.0.0", "svg-tags": "^1.0.0", "table": "^6.8.1", - "v8-compile-cache": "^2.3.0", - "write-file-atomic": "^5.0.0" + "write-file-atomic": "^5.0.1" }, "bin": { - "stylelint": "bin/stylelint.js" + "stylelint": "bin/stylelint.mjs" }, "engines": { "node": "^14.13.1 || >=16.0.0" @@ -12659,12 +12832,15 @@ } }, "node_modules/stylelint-config-recommended": { - "version": "10.0.1", - "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-10.0.1.tgz", - "integrity": "sha512-TQ4xQ48tW4QSlODcti7pgSRqBZcUaBzuh0jPpfiMhwJKBPkqzTIAU+IrSWL/7BgXlOM90DjB7YaNgFpx8QWhuA==", + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-13.0.0.tgz", + "integrity": "sha512-EH+yRj6h3GAe/fRiyaoO2F9l9Tgg50AOFhaszyfov9v6ayXJ1IkSHwTxd7lB48FmOeSGDPLjatjO11fJpmarkQ==", "dev": true, + "engines": { + "node": "^14.13.1 || >=16.0.0" + }, "peerDependencies": { - "stylelint": "^15.0.0" + "stylelint": "^15.10.0" } }, "node_modules/stylelint-config-recommended-scss": { @@ -12697,15 +12873,18 @@ } }, "node_modules/stylelint-config-standard": { - "version": "30.0.1", - "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-30.0.1.tgz", - "integrity": "sha512-NbeHOmpRQhjZh5XB1B/S4MLRWvz4xxAxeDBjzl0tY2xEcayNhLbaRGF0ZQzq+DQZLCcPpOHeS2Ru1ydbkhkmLg==", + "version": "34.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-34.0.0.tgz", + "integrity": "sha512-u0VSZnVyW9VSryBG2LSO+OQTjN7zF9XJaAJRX/4EwkmU0R2jYwmBSN10acqZisDitS0CLiEiGjX7+Hrq8TAhfQ==", "dev": true, "dependencies": { - "stylelint-config-recommended": "^10.0.1" + "stylelint-config-recommended": "^13.0.0" + }, + "engines": { + "node": "^14.13.1 || >=16.0.0" }, "peerDependencies": { - "stylelint": "^15.0.0" + "stylelint": "^15.10.0" } }, "node_modules/stylelint-config-standard-scss": { @@ -12769,6 +12948,15 @@ "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==", "dev": true }, + "node_modules/stylelint/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/stylelint/node_modules/resolve-from": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", @@ -12778,6 +12966,31 @@ "node": ">=8" } }, + "node_modules/stylelint/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/stylelint/node_modules/supports-hyperlinks": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-3.0.0.tgz", + "integrity": "sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0", + "supports-color": "^7.0.0" + }, + "engines": { + "node": ">=14.18" + } + }, "node_modules/supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -13367,12 +13580,6 @@ "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "dev": true }, - "node_modules/v8-compile-cache": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz", - "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==", - "dev": true - }, "node_modules/v8-to-istanbul": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.0.1.tgz", @@ -13573,18 +13780,30 @@ "dev": true }, "node_modules/write-file-atomic": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.0.tgz", - "integrity": "sha512-R7NYMnHSlV42K54lwY9lvW6MnSm1HSJqZL3xiSgi9E7//FYaI74r2G0rd+/X6VAMkHEdzxQaU5HUOXWUz5kA/w==", + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz", + "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==", "dev": true, "dependencies": { "imurmurhash": "^0.1.4", - "signal-exit": "^3.0.7" + "signal-exit": "^4.0.1" }, "engines": { "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } }, + "node_modules/write-file-atomic/node_modules/signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/ws": { "version": "8.5.0", "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz", @@ -13975,27 +14194,27 @@ "optional": true }, "@csstools/css-parser-algorithms": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.0.1.tgz", - "integrity": "sha512-B9/8PmOtU6nBiibJg0glnNktQDZ3rZnGn/7UmDfrm2vMtrdlXO3p7ErE95N0up80IRk9YEtB5jyj/TmQ1WH3dw==", + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.1.tgz", + "integrity": "sha512-xrvsmVUtefWMWQsGgFffqWSK03pZ1vfDki4IVIIUxxDKnGBzqNgv0A7SB1oXtVNEkcVO8xi1ZrTL29HhSu5kGA==", "dev": true }, "@csstools/css-tokenizer": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.1.0.tgz", - "integrity": "sha512-dtqFyoJBHUxGi9zPZdpCKP1xk8tq6KPHJ/NY4qWXiYo6IcSGwzk3L8x2XzZbbyOyBs9xQARoGveU2AsgLj6D2A==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.0.tgz", + "integrity": "sha512-wErmsWCbsmig8sQKkM6pFhr/oPha1bHfvxsUY5CYSQxwyhA9Ulrs8EqCgClhg4Tgg2XapVstGqSVcz0xOYizZA==", "dev": true }, "@csstools/media-query-list-parser": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.0.1.tgz", - "integrity": "sha512-X2/OuzEbjaxhzm97UJ+95GrMeT29d1Ib+Pu+paGLuRWZnWRK9sI9r3ikmKXPWGA1C4y4JEdBEFpp9jEqCvLeRA==", + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.4.tgz", + "integrity": "sha512-V/OUXYX91tAC1CDsiY+HotIcJR+vPtzrX8pCplCpT++i8ThZZsq5F5dzZh/bDM3WUOjrvC1ljed1oSJxMfjqhw==", "dev": true }, "@csstools/selector-specificity": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.1.1.tgz", - "integrity": "sha512-jwx+WCqszn53YHOfvFMJJRd/B2GqkCBt+1MJSG6o5/s8+ytHMvDZXsJgUEWLk12UnLd7HYKac4BYU5i/Ron1Cw==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.0.tgz", + "integrity": "sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==", "dev": true }, "@eslint-community/eslint-utils": { @@ -15782,6 +16001,12 @@ "fill-range": "^7.0.1" } }, + "breakpoint-sass": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/breakpoint-sass/-/breakpoint-sass-3.0.0.tgz", + "integrity": "sha512-qxJqSfTaOHI+RCGzvKWVRwwC2hMIaS0KV1b+asqWUFxdLv/yKNADF7AtT1uNnkt2VxSMZ2csM22CSc+Hez+EIg==", + "dev": true + }, "browserslist": { "version": "4.21.4", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz", @@ -16282,9 +16507,9 @@ "dev": true }, "cosmiconfig": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.1.0.tgz", - "integrity": "sha512-0tLZ9URlPGU7JsKq0DQOQ3FoRsYX8xDZ7xMiATQfaiGMz7EHowNkbU9u1coAOmnh9p/1ySpm0RB3JNWRXM5GCg==", + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.2.0.tgz", + "integrity": "sha512-3rTMnFJA1tCOPwRxtgF4wd7Ab2qvDbL8jX+3smjIbS4HlZBagTlpERbdN7iAbWlrfxE3M8c27kTwTawQ7st+OQ==", "dev": true, "requires": { "import-fresh": "^3.2.1", @@ -16331,9 +16556,9 @@ } }, "css-functions-list": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.1.0.tgz", - "integrity": "sha512-/9lCvYZaUbBGvYUgYGFJ4dcYiyqdhSjG7IPVluoV8A1ILjkF7ilmhp1OGUz8n+nmBcu0RNrQAzgD8B6FJbrt2w==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.0.tgz", + "integrity": "sha512-d/jBMPyYybkkLVypgtGv12R+pIFw4/f/IHtCTxWpZc8ofTYOPigIgmA6vu5rMHartZC+WuXhBUHfnyNUIQSYrg==", "dev": true }, "css-tree": { @@ -17174,9 +17399,9 @@ "dev": true }, "fast-glob": { - "version": "3.2.12", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz", - "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz", + "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==", "dev": true, "requires": { "@nodelib/fs.stat": "^2.0.2", @@ -17713,9 +17938,9 @@ "dev": true }, "html-tags": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz", - "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz", + "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==", "dev": true }, "http-assert": { @@ -18375,9 +18600,9 @@ "dev": true }, "known-css-properties": { - "version": "0.26.0", - "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.26.0.tgz", - "integrity": "sha512-5FZRzrZzNTBruuurWpvZnvP9pum+fe0HcK8z/ooo+U+Hmp4vtbyp1/QDsqmufirXy4egGzbaH/y2uCZf+6W5Kg==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.27.0.tgz", + "integrity": "sha512-uMCj6+hZYDoffuvAJjFAPz56E9uoowFHmTkqRtRq5WyC5Q6Cu/fTZKNQpX/RbzChBYLLl3lo8CjFZBAZXq9qFg==", "dev": true }, "koa": { @@ -18801,29 +19026,107 @@ "dev": true }, "meow": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz", - "integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==", + "version": "10.1.5", + "resolved": "https://registry.npmjs.org/meow/-/meow-10.1.5.tgz", + "integrity": "sha512-/d+PQ4GKmGvM9Bee/DPa8z3mXs/pkvJE2KEThngVNOqtmljC6K7NMPxtc2JeZYTmpWb9k/TmxjeL18ez3h7vCw==", "dev": true, "requires": { - "@types/minimist": "^1.2.0", - "camelcase-keys": "^6.2.2", - "decamelize": "^1.2.0", + "@types/minimist": "^1.2.2", + "camelcase-keys": "^7.0.0", + "decamelize": "^5.0.0", "decamelize-keys": "^1.1.0", "hard-rejection": "^2.1.0", "minimist-options": "4.1.0", - "normalize-package-data": "^3.0.0", - "read-pkg-up": "^7.0.1", - "redent": "^3.0.0", - "trim-newlines": "^3.0.0", - "type-fest": "^0.18.0", - "yargs-parser": "^20.2.3" + "normalize-package-data": "^3.0.2", + "read-pkg-up": "^8.0.0", + "redent": "^4.0.0", + "trim-newlines": "^4.0.2", + "type-fest": "^1.2.2", + "yargs-parser": "^20.2.9" }, "dependencies": { + "camelcase-keys": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-7.0.2.tgz", + "integrity": "sha512-Rjs1H+A9R+Ig+4E/9oyB66UC5Mj9Xq3N//vcLf2WzgdTi/3gUu3Z9KoqmlrEG4VuuLK8wJHofxzdQXz/knhiYg==", + "dev": true, + "requires": { + "camelcase": "^6.3.0", + "map-obj": "^4.1.0", + "quick-lru": "^5.1.1", + "type-fest": "^1.2.1" + } + }, + "decamelize": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-5.0.1.tgz", + "integrity": "sha512-VfxadyCECXgQlkoEAjeghAr5gY3Hf+IKjKb+X8tGVDtveCjN+USwprd2q3QXBR9T1+x2DG0XZF5/w+7HAtSaXA==", + "dev": true + }, + "indent-string": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-5.0.0.tgz", + "integrity": "sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==", + "dev": true + }, + "quick-lru": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz", + "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==", + "dev": true + }, + "read-pkg": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-6.0.0.tgz", + "integrity": "sha512-X1Fu3dPuk/8ZLsMhEj5f4wFAF0DWoK7qhGJvgaijocXxBmSToKfbFtqbxMO7bVjNA1dmE5huAzjXj/ey86iw9Q==", + "dev": true, + "requires": { + "@types/normalize-package-data": "^2.4.0", + "normalize-package-data": "^3.0.2", + "parse-json": "^5.2.0", + "type-fest": "^1.0.1" + } + }, + "read-pkg-up": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-8.0.0.tgz", + "integrity": "sha512-snVCqPczksT0HS2EC+SxUndvSzn6LRCwpfSvLrIfR5BKDQQZMaI6jPRC9dYvYFDRAuFEAnkwww8kBBNE/3VvzQ==", + "dev": true, + "requires": { + "find-up": "^5.0.0", + "read-pkg": "^6.0.0", + "type-fest": "^1.0.1" + } + }, + "redent": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/redent/-/redent-4.0.0.tgz", + "integrity": "sha512-tYkDkVVtYkSVhuQ4zBgfvciymHaeuel+zFKXShfDnFP5SyVEP7qo70Rf1jTOTCx3vGNAbnEi/xFkcfQVMIBWag==", + "dev": true, + "requires": { + "indent-string": "^5.0.0", + "strip-indent": "^4.0.0" + } + }, + "strip-indent": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-4.0.0.tgz", + "integrity": "sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==", + "dev": true, + "requires": { + "min-indent": "^1.0.1" + } + }, + "trim-newlines": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-4.1.1.tgz", + "integrity": "sha512-jRKj0n0jXWo6kh62nA5TEh3+4igKDXLvzBJcPpiizP7oOolUrYIxmVBG9TOtHYFHoddUk6YvAkGeGoSVTXfQXQ==", + "dev": true + }, "type-fest": { - "version": "0.18.1", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz", - "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz", + "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==", "dev": true } } @@ -18940,9 +19243,9 @@ "dev": true }, "nanoid": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", - "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", + "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", "dev": true }, "natural-compare": { @@ -21595,12 +21898,12 @@ } }, "postcss": { - "version": "8.4.21", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz", - "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==", + "version": "8.4.27", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.27.tgz", + "integrity": "sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==", "dev": true, "requires": { - "nanoid": "^3.3.4", + "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } @@ -22717,53 +23020,51 @@ "dev": true }, "stylelint": { - "version": "15.2.0", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.2.0.tgz", - "integrity": "sha512-wjg5OLn8zQwjlj5cYUgyQpMWKzct42AG5dYlqkHRJQJqsystFFn3onqEc263KH4xfEI0W3lZCnlIhFfS64uwSA==", + "version": "15.10.2", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.10.2.tgz", + "integrity": "sha512-UxqSb3hB74g4DTO45QhUHkJMjKKU//lNUAOWyvPBVPZbCknJ5HjOWWZo+UDuhHa9FLeVdHBZXxu43eXkjyIPWg==", "dev": true, "requires": { - "@csstools/css-parser-algorithms": "^2.0.1", - "@csstools/css-tokenizer": "^2.0.1", - "@csstools/media-query-list-parser": "^2.0.1", - "@csstools/selector-specificity": "^2.1.1", + "@csstools/css-parser-algorithms": "^2.3.0", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/media-query-list-parser": "^2.1.2", + "@csstools/selector-specificity": "^3.0.0", "balanced-match": "^2.0.0", "colord": "^2.9.3", - "cosmiconfig": "^8.0.0", - "css-functions-list": "^3.1.0", + "cosmiconfig": "^8.2.0", + "css-functions-list": "^3.2.0", "css-tree": "^2.3.1", "debug": "^4.3.4", - "fast-glob": "^3.2.12", + "fast-glob": "^3.3.0", "fastest-levenshtein": "^1.0.16", "file-entry-cache": "^6.0.1", "global-modules": "^2.0.0", "globby": "^11.1.0", "globjoin": "^0.1.4", - "html-tags": "^3.2.0", + "html-tags": "^3.3.1", "ignore": "^5.2.4", "import-lazy": "^4.0.0", "imurmurhash": "^0.1.4", "is-plain-object": "^5.0.0", - "known-css-properties": "^0.26.0", + "known-css-properties": "^0.27.0", "mathml-tag-names": "^2.1.3", - "meow": "^9.0.0", + "meow": "^10.1.5", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", "picocolors": "^1.0.0", - "postcss": "^8.4.21", - "postcss-media-query-parser": "^0.2.3", + "postcss": "^8.4.25", "postcss-resolve-nested-selector": "^0.1.1", "postcss-safe-parser": "^6.0.0", - "postcss-selector-parser": "^6.0.11", + "postcss-selector-parser": "^6.0.13", "postcss-value-parser": "^4.2.0", "resolve-from": "^5.0.0", "string-width": "^4.2.3", "strip-ansi": "^6.0.1", "style-search": "^0.1.0", - "supports-hyperlinks": "^2.3.0", + "supports-hyperlinks": "^3.0.0", "svg-tags": "^1.0.0", "table": "^6.8.1", - "v8-compile-cache": "^2.3.0", - "write-file-atomic": "^5.0.0" + "write-file-atomic": "^5.0.1" }, "dependencies": { "balanced-match": { @@ -22772,18 +23073,43 @@ "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==", "dev": true }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, "resolve-from": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + }, + "supports-hyperlinks": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-3.0.0.tgz", + "integrity": "sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==", + "dev": true, + "requires": { + "has-flag": "^4.0.0", + "supports-color": "^7.0.0" + } } } }, "stylelint-config-recommended": { - "version": "10.0.1", - "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-10.0.1.tgz", - "integrity": "sha512-TQ4xQ48tW4QSlODcti7pgSRqBZcUaBzuh0jPpfiMhwJKBPkqzTIAU+IrSWL/7BgXlOM90DjB7YaNgFpx8QWhuA==", + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-13.0.0.tgz", + "integrity": "sha512-EH+yRj6h3GAe/fRiyaoO2F9l9Tgg50AOFhaszyfov9v6ayXJ1IkSHwTxd7lB48FmOeSGDPLjatjO11fJpmarkQ==", "dev": true }, "stylelint-config-recommended-scss": { @@ -22806,12 +23132,12 @@ } }, "stylelint-config-standard": { - "version": "30.0.1", - "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-30.0.1.tgz", - "integrity": "sha512-NbeHOmpRQhjZh5XB1B/S4MLRWvz4xxAxeDBjzl0tY2xEcayNhLbaRGF0ZQzq+DQZLCcPpOHeS2Ru1ydbkhkmLg==", + "version": "34.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-34.0.0.tgz", + "integrity": "sha512-u0VSZnVyW9VSryBG2LSO+OQTjN7zF9XJaAJRX/4EwkmU0R2jYwmBSN10acqZisDitS0CLiEiGjX7+Hrq8TAhfQ==", "dev": true, "requires": { - "stylelint-config-recommended": "^10.0.1" + "stylelint-config-recommended": "^13.0.0" } }, "stylelint-config-standard-scss": { @@ -23295,12 +23621,6 @@ "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "dev": true }, - "v8-compile-cache": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz", - "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==", - "dev": true - }, "v8-to-istanbul": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.0.1.tgz", @@ -23454,13 +23774,21 @@ "dev": true }, "write-file-atomic": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.0.tgz", - "integrity": "sha512-R7NYMnHSlV42K54lwY9lvW6MnSm1HSJqZL3xiSgi9E7//FYaI74r2G0rd+/X6VAMkHEdzxQaU5HUOXWUz5kA/w==", + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz", + "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==", "dev": true, "requires": { "imurmurhash": "^0.1.4", - "signal-exit": "^3.0.7" + "signal-exit": "^4.0.1" + }, + "dependencies": { + "signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "dev": true + } } }, "ws": { diff --git a/package.json b/package.json index b50a29c..d4aef49 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "@typescript-eslint/parser": "6.3.0", "@web/test-runner": "0.15.1", "@web/test-runner-commands": "0.6.5", + "breakpoint-sass": "^3.0.0", "chai": "4.3.7", "eslint": "8.35.0", "eslint-config-airbnb-base": "15.0.0", @@ -40,9 +41,9 @@ "sass": "1.64.2", "semantic-release": "21.0.5", "sinon": "15.0.1", - "stylelint": "15.2.0", - "stylelint-config-standard": "30.0.1", - "stylelint-config-standard-scss": "^10.0.0", + "stylelint": "15.10.2", + "stylelint-config-standard": "34.0.0", + "stylelint-config-standard-scss": "10.0.0", "typescript": "5.1.6" } } diff --git a/scripts/lib-franklin.js b/scripts/lib-franklin.js index 4106fb4..a5956b9 100644 --- a/scripts/lib-franklin.js +++ b/scripts/lib-franklin.js @@ -222,6 +222,13 @@ export async function decorateIcons(element) { }); } +/** + * @returns language path portion for the current URL to be used to build language specific URLs + */ +export function getLanguagePath() { + return window.location.pathname === '/de' || window.location.pathname.startsWith('/de/') ? '/de' : ''; +} + /** * Gets placeholders object. * @param {string} [prefix] Location of placeholders @@ -230,9 +237,10 @@ export async function decorateIcons(element) { export async function fetchPlaceholders(prefix = 'default') { window.placeholders = window.placeholders || {}; const loaded = window.placeholders[`${prefix}-loaded`]; + const languagePath = getLanguagePath(); if (!loaded) { window.placeholders[`${prefix}-loaded`] = new Promise((resolve, reject) => { - fetch(`${prefix === 'default' ? '' : prefix}/placeholders.json`) + fetch(`${prefix === 'default' ? '' : prefix}${languagePath}/placeholders.json`) .then((resp) => { if (resp.ok) { return resp.json(); diff --git a/scripts/scripts.js b/scripts/scripts.js index 7d9d371..e2d29ca 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -11,6 +11,7 @@ import { waitForLCP, loadBlocks, loadCSS, + fetchPlaceholders, } from './lib-franklin.js'; const LCP_BLOCKS = []; // add your LCP blocks to the list @@ -74,6 +75,7 @@ export function decorateMain(main) { */ async function loadEager(doc) { document.documentElement.lang = 'en'; + await fetchPlaceholders(); decorateTemplateAndTheme(); const main = doc.querySelector('main'); if (main) { diff --git a/styles/_common-dependencies.css b/styles/_common-dependencies.css new file mode 100644 index 0000000..e69de29 diff --git a/styles/_common-dependencies.scss b/styles/_common-dependencies.scss new file mode 100644 index 0000000..697ece6 --- /dev/null +++ b/styles/_common-dependencies.scss @@ -0,0 +1,4 @@ +@import "../node_modules/breakpoint-sass/stylesheets/breakpoint"; + +$bp-tablet: 600px; +$bp-desktop: 900px; diff --git a/styles/fonts.css b/styles/fonts.css index bce7eb1..7364fc1 100644 --- a/styles/fonts.css +++ b/styles/fonts.css @@ -1,17 +1 @@ -@font-face { - font-family: roboto; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/roboto-bold.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; - } - - @font-face { - font-family: roboto; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url('../fonts/roboto-regular.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; - } \ No newline at end of file +@font-face{font-family:roboto;font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/roboto-bold.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:roboto;font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/roboto-regular.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} \ No newline at end of file diff --git a/styles/fonts.scss b/styles/fonts.scss new file mode 100644 index 0000000..789a9c7 --- /dev/null +++ b/styles/fonts.scss @@ -0,0 +1,17 @@ +@font-face { + font-family: roboto; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('../fonts/roboto-bold.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +@font-face { + font-family: roboto; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('../fonts/roboto-regular.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} diff --git a/styles/lazy-styles.css b/styles/lazy-styles.css index 3cb30e9..e69de29 100644 --- a/styles/lazy-styles.css +++ b/styles/lazy-styles.css @@ -1 +0,0 @@ -/* add global styles that can be loaded post LCP here */ \ No newline at end of file diff --git a/styles/lazy-styles.scss b/styles/lazy-styles.scss new file mode 100644 index 0000000..84e7d6c --- /dev/null +++ b/styles/lazy-styles.scss @@ -0,0 +1 @@ +/* add global styles that can be loaded post LCP here */ diff --git a/styles/styles.css b/styles/styles.css index 5ce098b..c65f7b9 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1,251 +1 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - - :root { - /* colors */ - --link-color: #035fe6; - --link-hover-color: #136ff6; - --background-color: #fff; - --overlay-background-color: #eee; - --highlight-background-color: #ccc; - --text-color: #000; - - /* fonts */ - --body-font-family: roboto, roboto-fallback; - --heading-font-family: var(--body-font-family); - --fixed-font-family: 'Roboto Mono', menlo, consolas, 'Liberation Mono', monospace; - - /* body sizes */ - --body-font-size-m: 22px; - --body-font-size-s: 18px; - --body-font-size-xs: 16px; - - /* heading sizes */ - --heading-font-size-xxl: 48px; - --heading-font-size-xl: 40px; - --heading-font-size-l: 32px; - --heading-font-size-m: 24px; - --heading-font-size-s: 20px; - --heading-font-size-xs: 18px; - - /* nav height */ - --nav-height: 64px; - -} - -@font-face { - font-family: roboto-fallback; - size-adjust: 100.06%; - ascent-override: 95%; - src: local('Arial'); -} - - -@media (min-width: 900px) { - :root { - --heading-font-size-xxl: 60px; - --heading-font-size-xl: 48px; - --heading-font-size-l: 36px; - --heading-font-size-m: 30px; - --heading-font-size-s: 24px; - --heading-font-size-xs: 22px; - } -} - -body { - font-size: var(--body-font-size-m); - margin: 0; - font-family: var(--body-font-family); - line-height: 1.6; - color: var(--text-color); - background-color: var(--background-color); - display: none; -} - -body.appear { - display: unset; -} - -header { - height: var(--nav-height); -} - -h1, h2, h3, -h4, h5, h6 { - font-family: var(--heading-font-family); - font-weight: 600; - line-height: 1.25; - margin-top: 1em; - margin-bottom: .5em; - scroll-margin: calc(var(--nav-height) + 1em); -} - -h1 { font-size: var(--heading-font-size-xxl) } -h2 { font-size: var(--heading-font-size-xl) } -h3 { font-size: var(--heading-font-size-l) } -h4 { font-size: var(--heading-font-size-m) } -h5 { font-size: var(--heading-font-size-s) } -h6 { font-size: var(--heading-font-size-xs) } - -p, dl, ol, ul, pre, blockquote { - margin-top: 1em; - margin-bottom: 1em; -} - -hr { - margin-top: 1.5em; - margin-bottom: 1.5em; - border: 0; - border-bottom: 1px solid var(--overlay-background-color); -} - -code, pre, samp { - font-family: var(--fixed-font-family); - font-size: var(--body-font-size-s); -} - -code, samp { - padding: .125em; -} - -pre { - overflow: scroll; -} - -main pre { - background-color: var(--overlay-background-color); - padding: 1em; - border-radius: .25em; - overflow-x: auto; - white-space: pre; -} - -a:any-link { - color: var(--link-color); - text-decoration: none; -} - -a:hover { - text-decoration: underline; - color: var(--link-hover-color); -} - -/* buttons */ -a.button:any-link, button { - font-family: var(--body-font-family); - display: inline-block; - box-sizing: border-box; - text-decoration: none; - border: 2px solid transparent; - padding: 5px 30px; - text-align: center; - font-style: normal; - font-weight: 600; - cursor: pointer; - color: var(--background-color); - background-color: var(--link-color); - margin: 16px 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - border-radius: 30px; -} - -a.button:hover, a.button:focus, button:hover, button:focus { - background-color: var(--link-hover-color); - cursor: pointer; -} - -button:disabled, button:disabled:hover { - background-color: var(--overlay-background-color); - cursor: unset; -} - -a.button.secondary, button.secondary { - background-color: unset; - border: 2px solid currentcolor; - color: var(--text-color) -} - -main input { - font-size: 1.25rem; - width: 100%; - max-width: 50rem; - display: block; - margin-bottom: 1rem; - padding: 0.75rem 0.6rem; - border-radius: 0.25rem; - box-sizing: border-box; - border: 1px solid var(--text-color); - color: var(--text-color); - background-color: var(--background-color); -} - -main input:hover { - border: 1px solid var(--text-color); -} - -main blockquote { - font-style: italic; - margin: 3rem; - text-indent: -1rem; - hanging-punctuation: first; -} - -main blockquote p::before { - content: "“"; - line-height: 0; -} - -main blockquote p::after { - content: "”"; - line-height: 0; -} - -main img { - max-width: 100%; - width: auto; - height: auto; -} - -.icon { - display: inline-block; - height: 24px; - width: 24px; -} - -.icon svg { - height: 100%; - width: 100%; -} - -main .section { - padding: 64px 16px; -} - -@media (min-width: 600px) { - main .section { - padding: 64px 32px; - } -} - -@media (min-width: 900px) { - .section > div { - max-width: 1200px; - margin: auto; - } -} - -/* section metadata */ -main .section.highlight { - background-color: var(--highlight-background-color); -} +:root{--link-color: #035fe6;--link-hover-color: #136ff6;--background-color: #fff;--overlay-background-color: #eee;--highlight-background-color: #ccc;--text-color: #000;--body-font-family: roboto, roboto-fallback;--heading-font-family: var(--body-font-family);--fixed-font-family: "Roboto Mono", menlo, consolas, "Liberation Mono", monospace;--body-font-size-m: 22px;--body-font-size-s: 18px;--body-font-size-xs: 16px;--heading-font-size-xxl: 48px;--heading-font-size-xl: 40px;--heading-font-size-l: 32px;--heading-font-size-m: 24px;--heading-font-size-s: 20px;--heading-font-size-xs: 18px;--nav-height: 64px}@media(min-width: 900px){:root{--heading-font-size-xxl: 60px;--heading-font-size-xl: 48px;--heading-font-size-l: 36px;--heading-font-size-m: 30px;--heading-font-size-s: 24px;--heading-font-size-xs: 22px}}@font-face{font-family:roboto-fallback;size-adjust:100.06%;ascent-override:95%;src:local("Arial")}body{font-size:var(--body-font-size-m);margin:0;font-family:var(--body-font-family);line-height:1.6;color:var(--text-color);background-color:var(--background-color);display:none}body.appear{display:unset}header{height:var(--nav-height)}h1,h2,h3,h4,h5,h6{font-family:var(--heading-font-family);font-weight:600;line-height:1.25;margin-top:1em;margin-bottom:.5em;scroll-margin:calc(var(--nav-height) + 1em)}h1{font-size:var(--heading-font-size-xxl)}h2{font-size:var(--heading-font-size-xl)}h3{font-size:var(--heading-font-size-l)}h4{font-size:var(--heading-font-size-m)}h5{font-size:var(--heading-font-size-s)}h6{font-size:var(--heading-font-size-xs)}p,dl,ol,ul,pre,blockquote{margin-top:1em;margin-bottom:1em}hr{margin-top:1.5em;margin-bottom:1.5em;border:0;border-bottom:1px solid var(--overlay-background-color)}code,pre,samp{font-family:var(--fixed-font-family);font-size:var(--body-font-size-s)}code,samp{padding:.125em}pre{overflow:scroll}main pre{background-color:var(--overlay-background-color);padding:1em;border-radius:.25em;overflow-x:auto;white-space:pre}a:any-link{color:var(--link-color);text-decoration:none}a:hover{text-decoration:underline;color:var(--link-hover-color)}a.button:any-link,button{font-family:var(--body-font-family);display:inline-block;box-sizing:border-box;text-decoration:none;border:2px solid rgba(0,0,0,0);padding:5px 30px;text-align:center;font-style:normal;font-weight:600;cursor:pointer;color:var(--background-color);background-color:var(--link-color);margin:16px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:30px}a.button:hover,a.button:focus,button:hover,button:focus{background-color:var(--link-hover-color);cursor:pointer}button:disabled,button:disabled:hover{background-color:var(--overlay-background-color);cursor:unset}a.button.secondary,button.secondary{background-color:unset;border:2px solid currentcolor;color:var(--text-color)}main input{font-size:1.25rem;width:100%;max-width:50rem;display:block;margin-bottom:1rem;padding:.75rem .6rem;border-radius:.25rem;box-sizing:border-box;border:1px solid var(--text-color);color:var(--text-color);background-color:var(--background-color)}main input:hover{border:1px solid var(--text-color)}main blockquote{font-style:italic;margin:3rem;text-indent:-1rem;hanging-punctuation:first}main blockquote p::before{content:"“";line-height:0}main blockquote p::after{content:"”";line-height:0}main img{max-width:100%;width:auto;height:auto}.icon{display:inline-block;height:24px;width:24px}.icon svg{height:100%;width:100%}main .section{padding:64px 16px}@media(min-width: 600px){main .section{padding:64px 32px}}@media(min-width: 900px){main .section{max-width:1200px;margin:auto}}main .section.highlight{background-color:var(--highlight-background-color)} \ No newline at end of file diff --git a/styles/styles.scss b/styles/styles.scss new file mode 100644 index 0000000..708aaf2 --- /dev/null +++ b/styles/styles.scss @@ -0,0 +1,262 @@ +/* + * Copyright 2020 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +@import 'common-dependencies'; + +:root { + /* colors */ + --link-color: #035fe6; + --link-hover-color: #136ff6; + --background-color: #fff; + --overlay-background-color: #eee; + --highlight-background-color: #ccc; + --text-color: #000; + + /* fonts */ + --body-font-family: roboto, roboto-fallback; + --heading-font-family: var(--body-font-family); + --fixed-font-family: 'Roboto Mono', menlo, consolas, 'Liberation Mono', monospace; + + /* body sizes */ + --body-font-size-m: 22px; + --body-font-size-s: 18px; + --body-font-size-xs: 16px; + + /* heading sizes */ + --heading-font-size-xxl: 48px; + --heading-font-size-xl: 40px; + --heading-font-size-l: 32px; + --heading-font-size-m: 24px; + --heading-font-size-s: 20px; + --heading-font-size-xs: 18px; + + /* nav height */ + --nav-height: 64px; + + @include breakpoint($bp-desktop) { + --heading-font-size-xxl: 60px; + --heading-font-size-xl: 48px; + --heading-font-size-l: 36px; + --heading-font-size-m: 30px; + --heading-font-size-s: 24px; + --heading-font-size-xs: 22px; + } +} + +@font-face { + font-family: roboto-fallback; + size-adjust: 100.06%; + ascent-override: 95%; + src: local('Arial'); +} + +body { + font-size: var(--body-font-size-m); + margin: 0; + font-family: var(--body-font-family); + line-height: 1.6; + color: var(--text-color); + background-color: var(--background-color); + display: none; + + &.appear { + display: unset; + } +} + +header { + height: var(--nav-height); +} + +h1, h2, h3, +h4, h5, h6 { + font-family: var(--heading-font-family); + font-weight: 600; + line-height: 1.25; + margin-top: 1em; + margin-bottom: .5em; + scroll-margin: calc(var(--nav-height) + 1em); +} + +h1 { + font-size: var(--heading-font-size-xxl) +} + +h2 { + font-size: var(--heading-font-size-xl) +} + +h3 { + font-size: var(--heading-font-size-l) +} + +h4 { + font-size: var(--heading-font-size-m) +} + +h5 { + font-size: var(--heading-font-size-s) +} + +h6 { + font-size: var(--heading-font-size-xs) +} + +p, dl, ol, ul, pre, blockquote { + margin-top: 1em; + margin-bottom: 1em; +} + +hr { + margin-top: 1.5em; + margin-bottom: 1.5em; + border: 0; + border-bottom: 1px solid var(--overlay-background-color); +} + +code, pre, samp { + font-family: var(--fixed-font-family); + font-size: var(--body-font-size-s); +} + +code, samp { + padding: .125em; +} + +pre { + overflow: scroll; +} + +main pre { + background-color: var(--overlay-background-color); + padding: 1em; + border-radius: .25em; + overflow-x: auto; + white-space: pre; +} + +a:any-link { + color: var(--link-color); + text-decoration: none; +} + +a:hover { + text-decoration: underline; + color: var(--link-hover-color); +} + +/* buttons */ +a.button:any-link, button { + font-family: var(--body-font-family); + display: inline-block; + box-sizing: border-box; + text-decoration: none; + border: 2px solid transparent; + padding: 5px 30px; + text-align: center; + font-style: normal; + font-weight: 600; + cursor: pointer; + color: var(--background-color); + background-color: var(--link-color); + margin: 16px 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + border-radius: 30px; +} + +a.button:hover, a.button:focus, button:hover, button:focus { + background-color: var(--link-hover-color); + cursor: pointer; +} + +button:disabled, button:disabled:hover { + background-color: var(--overlay-background-color); + cursor: unset; +} + +a.button.secondary, button.secondary { + background-color: unset; + border: 2px solid currentcolor; + color: var(--text-color) +} + +main input { + font-size: 1.25rem; + width: 100%; + max-width: 50rem; + display: block; + margin-bottom: 1rem; + padding: 0.75rem 0.6rem; + border-radius: 0.25rem; + box-sizing: border-box; + border: 1px solid var(--text-color); + color: var(--text-color); + background-color: var(--background-color); +} + +main input:hover { + border: 1px solid var(--text-color); +} + +main blockquote { + font-style: italic; + margin: 3rem; + text-indent: -1rem; + hanging-punctuation: first; +} + +main blockquote p::before { + content: "“"; + line-height: 0; +} + +main blockquote p::after { + content: "”"; + line-height: 0; +} + +main img { + max-width: 100%; + width: auto; + height: auto; +} + +.icon { + display: inline-block; + height: 24px; + width: 24px; + + svg { + height: 100%; + width: 100%; + } +} + +main .section { + padding: 64px 16px; + + @include breakpoint($bp-tablet) { + padding: 64px 32px; + } + + @include breakpoint($bp-desktop) { + max-width: 1200px; + margin: auto; + } +} + +/* section metadata */ +main .section.highlight { + background-color: var(--highlight-background-color); +} diff --git a/tsconfig.json b/tsconfig.json index 80f06fd..561eb44 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,8 +3,12 @@ "module": "NodeNext", "moduleResolution": "NodeNext", "target": "ES2020", - "sourceMap": false, + "sourceMap": false }, - "include": ["blocks/**/*", "scripts/**/*"], + "include": [ + "blocks/**/*", + "scripts/**/*", + "../../../../../Applications/WebStorm.app/Contents/plugins/JavaScriptLanguage/jsLanguageServicesImpl/external/lib.dom.d.ts" + ], "exclude": ["node_modules"] }