Add basic layout.svelte

.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"
 }

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",

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",

src/routes/+layout.svelte

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

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;
 	}
 </style>

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: '';
 			}
 		}
 	}

src/routes/info.component.svelte

@@ -21,6 +21,8 @@
 	$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);
@@ -28,16 +30,14 @@
 
 	#infoBody {
 		position: relative;
-		width: $outer-width;
-		height: $outer-height;
-
-		box-sizing: border-box;
-
-		padding: $padding;
-
 		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;
 
 		&.no-top {
 			padding-top: 0;
@@ -48,13 +48,15 @@
 		}
 
 		&::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>