.prettierrc

@@ -3,10 +3,8 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 80,
-	"plugins": ["prettier-plugin-svelte", "prettier-plugin-css-order"],
+	"plugins": ["prettier-plugin-svelte"],
 	"pluginSearchDirs": ["."],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
-	"svelteStrictMode": true,
-	"svelteSortOrder": "options-scripts-markup-styles",
-	"order": "concentric-css"
+	"svelteStrictMode": true
 }

package-lock.json

@@ -17,9 +17,7 @@
 				"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",
@@ -1210,18 +1208,6 @@
 				"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",
@@ -2410,18 +2396,6 @@
 				"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",
@@ -2526,24 +2500,6 @@
 				"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",
@@ -3051,12 +3007,6 @@
 				"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",

package.json

@@ -22,9 +22,7 @@
 		"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",

src/routes/+layout.svelte

@@ -1,7 +0,0 @@
-<header></header>
-
-<main>
-	<slot />
-</main>
-
-<footer></footer>

src/routes/+page.svelte

@@ -23,6 +23,6 @@
 		display: grid;
 		grid-template:
 			'a b' 1fr
-			'c b' auto / 1fr 3fr;
+			'c b' 2fr / 1fr 3fr;
 	}
 </style>

src/routes/info.article.component.svelte

@@ -17,31 +17,31 @@
 	$title-line-height: var(--padding);
 
 	article {
-		position: relative;
-		box-sizing: border-box;
 		border-top: $border-width;
+		box-sizing: border-box;
+		position: relative;
 
 		& > h2 {
+			text-align: center;
 			vertical-align: middle;
-			margin: 0;
 			line-height: $title-line-height;
-			text-align: center;
+			margin: 0;
 
 			& > span {
-				position: relative;
-				z-index: 2;
 				background-color: vars.$bg-color-main-d20;
 				padding: 0 16px;
+				position: relative;
+				z-index: 2;
 			}
 
 			&::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: '';
 			}
 		}
 	}

src/routes/info.component.svelte

@@ -21,8 +21,6 @@
 	$outer-width: 100%;
 	$outer-height: 100%;
 	$border-width: 1px;
-	$border-radius-inner: 16px;
-	$border-radius-outer: 32px;
 	$grid-area: b;
 	$padding: var(--padding);
 	$edge-to-border: calc(($padding - $border-width) / 2);
@@ -30,15 +28,17 @@
 
 	#infoBody {
 		position: relative;
-		grid-area: $grid-area;
-		box-sizing: border-box;
-		box-shadow: -4px 4px 16px -4px black;
-		border-radius: $border-radius-outer;
-		background-color: $bg-color;
-		padding: $padding;
 		width: $outer-width;
 		height: $outer-height;
 
+		box-sizing: border-box;
+
+		padding: $padding;
+
+		grid-area: $grid-area;
+
+		background-color: $bg-color;
+
 		&.no-top {
 			padding-top: 0;
 
@@ -48,15 +48,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;
-			border-bottom-right-radius: $border-radius-inner;
-			border-bottom-left-radius: $border-radius-inner;
-			content: '';
 		}
 	}
 </style>