diff --git a/.prettierrc b/.prettierrc index e256e50..fc2a316 100644 --- a/.prettierrc +++ b/.prettierrc @@ -3,8 +3,10 @@ "singleQuote": true, "trailingComma": "none", "printWidth": 80, - "plugins": ["prettier-plugin-svelte"], + "plugins": ["prettier-plugin-svelte", "prettier-plugin-css-order"], "pluginSearchDirs": ["."], "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }], - "svelteStrictMode": true + "svelteStrictMode": true, + "svelteSortOrder": "options-scripts-markup-styles", + "order": "concentric-css" } diff --git a/package-lock.json b/package-lock.json index 2d894ef..79abd9b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,9 @@ "eslint": "^8.28.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-svelte": "^2.30.0", + "postcss": "^8.4.25", "prettier": "^2.8.0", + "prettier-plugin-css-order": "^1.3.1", "prettier-plugin-svelte": "^2.10.1", "sass": "^1.63.6", "svelte": "^4.0.0", @@ -1208,6 +1210,18 @@ "node": ">= 8" } }, + "node_modules/css-declaration-sorter": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-7.0.2.tgz", + "integrity": "sha512-iulo5tHbu/5vm5GZaG+EoVTGCTW7ZxPmVzSThYzC0SODEzTcu51ARSAjVwubK/C7zHopckjBljDsHX+k7n38rA==", + "dev": true, + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss": "^8.0.9" + } + }, "node_modules/css-tree": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", @@ -2396,6 +2410,18 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-less": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-6.0.0.tgz", + "integrity": "sha512-FPX16mQLyEjLzEuuJtxA8X3ejDLNGGEG503d2YGZR5Ask1SpDN8KmZUMpzCvyalWRywAn1n1VOA5dcqfCLo5rg==", + "dev": true, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "postcss": "^8.3.5" + } + }, "node_modules/postcss-load-config": { "version": "3.1.4", "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz", @@ -2500,6 +2526,24 @@ "url": "https://github.com/prettier/prettier?sponsor=1" } }, + "node_modules/prettier-plugin-css-order": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/prettier-plugin-css-order/-/prettier-plugin-css-order-1.3.1.tgz", + "integrity": "sha512-c8rtt5MLDDoMvutJHXT5t/bKO/bbHHnRI/UKzGGqKyskoHXpDn58SiNNW7ot2eCBFh5iLSy+0nUYArfvFWs57A==", + "dev": true, + "dependencies": { + "css-declaration-sorter": "^7.0.0", + "postcss-less": "^6.0.0", + "postcss-scss": "^4.0.3", + "sync-threads": "^1.0.1" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "prettier": "2.x" + } + }, "node_modules/prettier-plugin-svelte": { "version": "2.10.1", "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.10.1.tgz", @@ -3007,6 +3051,12 @@ "node": ">=12" } }, + "node_modules/sync-threads": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/sync-threads/-/sync-threads-1.0.1.tgz", + "integrity": "sha512-hIdwt/c/e1ONnr2RJmfBxEAj/J6KQQWKdToF3Qw8ZNRsTNNteGkOe63rQy9I7J5UNlr8Yl0wkzIr9wgLY94x0Q==", + "dev": true + }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", diff --git a/package.json b/package.json index f75f39b..d2cdb28 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,9 @@ "eslint": "^8.28.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-svelte": "^2.30.0", + "postcss": "^8.4.25", "prettier": "^2.8.0", + "prettier-plugin-css-order": "^1.3.1", "prettier-plugin-svelte": "^2.10.1", "sass": "^1.63.6", "svelte": "^4.0.0", diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 7a637a5..e7904ac 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -23,6 +23,6 @@ display: grid; grid-template: 'a b' 1fr - 'c b' 2fr / 1fr 3fr; + 'c b' auto / 1fr 3fr; } diff --git a/src/routes/info.article.component.svelte b/src/routes/info.article.component.svelte index 3ca2280..36dfb81 100644 --- a/src/routes/info.article.component.svelte +++ b/src/routes/info.article.component.svelte @@ -17,31 +17,31 @@ $title-line-height: var(--padding); article { - border-top: $border-width; - box-sizing: border-box; position: relative; + box-sizing: border-box; + border-top: $border-width; & > h2 { - text-align: center; vertical-align: middle; - line-height: $title-line-height; margin: 0; + line-height: $title-line-height; + text-align: center; & > span { - background-color: vars.$bg-color-main-d20; - padding: 0 16px; position: relative; z-index: 2; + background-color: vars.$bg-color-main-d20; + padding: 0 16px; } &::after { - content: ''; - border-top: 1px solid silver; position: absolute; + top: calc((($title-line-height - $border-width) / 2)); right: calc((($title-line-height - $border-width) / 2) * -1); left: calc((($title-line-height - $border-width) / 2) * -1); - top: calc((($title-line-height - $border-width) / 2)); z-index: 1; + border-top: 1px solid silver; + content: ''; } } } diff --git a/src/routes/info.component.svelte b/src/routes/info.component.svelte index 545c3d1..6bbecd8 100644 --- a/src/routes/info.component.svelte +++ b/src/routes/info.component.svelte @@ -28,16 +28,12 @@ #infoBody { position: relative; - width: $outer-width; - height: $outer-height; - - box-sizing: border-box; - - padding: $padding; - grid-area: $grid-area; - + box-sizing: border-box; background-color: $bg-color; + padding: $padding; + width: $outer-width; + height: $outer-height; &.no-top { padding-top: 0; @@ -48,13 +44,13 @@ } &::before { - content: ''; position: absolute; top: $edge-to-border; - left: $edge-to-border; right: $edge-to-border; bottom: $edge-to-border; + left: $edge-to-border; border: $border-width solid vars.$text-color-main; + content: ''; } }