Begin getting a layout that has some semblance of a character sheet working.

.css/mixins/sr-only.css

@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=sr-only.css.map */

.css/mixins/sr-only.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"sr-only.css"}

.css/root.css

@@ -0,0 +1,71 @@
+.dotdungeon {
+  container-type: size;
+}
+.dotdungeon.actor--pc {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-rows: repeat(12, minmax(0, 1fr));
+}
+.dotdungeon.actor--pc .panel--avatar {
+  grid-row: 1/span 2;
+}
+.dotdungeon.actor--pc .panel--stats {
+  grid-column: 2/span 2;
+}
+.dotdungeon.actor--pc .panel--skills {
+  grid-column: 2/span 2;
+}
+.dotdungeon.actor--pc .panel--backpack {
+  grid-row: 3/span 5;
+}
+.dotdungeon.actor--pc .panel--aspect {
+  grid-row: span 2;
+}
+.dotdungeon.actor--pc .panel--weapons {
+  grid-row: span 2;
+}
+.dotdungeon.actor--pc .panel--roles {
+  grid-row: span 3;
+}
+.dotdungeon.actor--pc .panel--spells {
+  grid-row: span 2;
+}
+.dotdungeon .panel {
+  background: white;
+  border: 2px solid black;
+}
+.dotdungeon .panel__header {
+  background: black;
+  color: white;
+  display: flex;
+  flex-direction: row;
+}
+.dotdungeon .panel__header h2 {
+  flex-grow: 1;
+}
+.dotdungeon .panel__header .icon {
+  height: 32px;
+  width: 32px;
+  aspect-ratio: 1;
+}
+
+@container (max-width: $breakpoint-medium) {
+  .dotdungeon.actor--pc {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-rows: repeat(12, minmax(0, 1fr));
+  }
+}
+@container (max-width: $breakpoint-small) {
+  .dotdungeon.actor--pc {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-rows: repeat(12, minmax(0, 1fr));
+  }
+}
+@container (max-width: $breakpoint-extra-small) {
+  .dotdungeon.actor--pc {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-rows: repeat(12, minmax(0, 1fr));
+  }
+}
+
+/*# sourceMappingURL=root.css.map */

.css/root.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../styles/root.scss"],"names":[],"mappings":"AAEA;EACC;;AAGC;EACC;EACA;EACA;;AAGC;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAGD;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAUJ;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EAEC,QADO;EAEP,OAFO;EAGP;;;AAMJ;EAGG;IACC;IACA;;;AAMJ;EAGG;IACC;IACA;;;AAMJ;EAGG;IACC;IACA","file":"root.css"}

langs/en-ca.json

@@ -1,5 +1,19 @@
 {
 	"dotdungeon.CharacterSheet": "PC Sheet",
+
+	"dotdungeon.panel.avatar": "Avatar",
+	"dotdungeon.panel.statistics": "Statistics",
+	"dotdungeon.panel.skills": "Skills",
+	"dotdungeon.panel.backpack": "Backpack",
+	"dotdungeon.panel.sync": "Sync",
+	"dotdungeon.panel.aspect": "Aspect",
+	"dotdungeon.panel.weapons": "Weapons",
+	"dotdungeon.panel.roles": "Roles",
+	"dotdungeon.panel.spells": "Spells",
+	"dotdungeon.panel.mounts": "Mounts",
+	"dotdungeon.panel.summons": "Summons",
+	"dotdungeon.panel.storage": "Storage",
+
 	"stat.title": "Stats",
 	"stat.build": "Build",
 	"stat.meta": "Meta",

module/handlebars.js

@@ -11,6 +11,7 @@ export async function preloadHandlebarsTemplates() {
 		"actors/char-sheet-mvp/partials/dice_choice.hbs",
 		"actors/char-sheet-mvp/partials/stat.hbs",
 		"actors/char-sheet-mvp/partials/skill.hbs",
+		"actors/char-sheet-mvp/partials/panel.hbs",
 	];
 
 	const paths = {};

styles/root.scss

@@ -1,9 +1,101 @@
 @use "./vars/_colours.scss" as *;
-@use "./mixins/sr-only.scss" as *;
 
-.screenreader {
+.dotdungeon {
-	background-color: $background;
+	container-type: size;
-	color: $background;
 
-	@include sr-only;
+	&.actor {
+		&--pc {
+			display: grid;
+			grid-template-columns: repeat(3, minmax(0, 1fr));
+			grid-template-rows: repeat(12, minmax(0, 1fr));
+
+			.panel {
+				&--avatar {
+					grid-row: 1 / span 2;
+				}
+				&--stats {
+					grid-column: 2 / span 2;
+				}
+				&--skills {
+					grid-column: 2 / span 2;
+				}
+				&--backpack {
+					grid-row: 3 / span 5;
+				}
+				&--sync {}
+				&--aspect {
+					grid-row: span 2;
+				}
+				&--weapons {
+					grid-row: span 2;
+				}
+				&--roles {
+					grid-row: span 3;
+				}
+				&--spells {
+					grid-row: span 2;
+				}
+				&--mounts {}
+				&--summons {}
+				&--notes {}
+				&--storage {}
+			}
+		}
+	}
+
+	.panel {
+		background: white;
+		border: 2px solid black;
+
+		&__header {
+			background: black;
+			color: white;
+			display: flex;
+			flex-direction: row;
+
+			h2 {
+				flex-grow: 1;
+			}
+
+			.icon {
+				$size: 32px;
+				height: $size;
+				width: $size;
+				aspect-ratio: 1;
+			}
+		}
+	}
+}
+
+@container (max-width: $breakpoint-medium) {
+	.dotdungeon {
+		&.actor {
+			&--pc {
+				grid-template-columns: repeat(3, minmax(0, 1fr));
+				grid-template-rows: repeat(12, minmax(0, 1fr));
+			}
+		}
+	}
+}
+
+@container (max-width: $breakpoint-small) {
+	.dotdungeon {
+		&.actor {
+			&--pc {
+				grid-template-columns: repeat(3, minmax(0, 1fr));
+				grid-template-rows: repeat(12, minmax(0, 1fr));
+			}
+		}
+	}
+}
+
+@container (max-width: $breakpoint-extra-small) {
+	.dotdungeon {
+		&.actor {
+			&--pc {
+				grid-template-columns: repeat(3, minmax(0, 1fr));
+				grid-template-rows: repeat(12, minmax(0, 1fr));
+			}
+		}
+	}
 }

styles/vars/_breakpoints.scss

@@ -0,0 +1,3 @@
+$breakpoint-medium: 700px;
+$breakpoint-small: 550px;
+$breakpoint-extra-small: 400px

templates/actors/char-sheet-mvp/partials/panel.hbs

@@ -0,0 +1,13 @@
+<div class="panel panel--{{class}}">
+	<div class="panel__title">
+		<h2>
+			{{ localize title }}
+		</h2>
+		<div class="icon icon--minimize"></div>
+		<div class="icon icon--maximize"></div>
+		<div class="icon icon--close"></div>
+	</div>
+	<div class="panel__content">
+		{{> @partial-block }}
+	</div>
+</div>

templates/actors/char-sheet-mvp/sheet.hbs

@@ -1,36 +1,38 @@
-<form autocomplete="off">
+<form autocomplete="off" class="dotdungeon actor--pc">
-	<h2>{{localize "stat.title"}}</h2>
+	{{#> dotdungeon.panel class="avatar" title="dotdungeon.panel.avatar"}}
-	{{> dotdungeon.stat stat="build" }}
+		Avatar Content
-	{{> dotdungeon.stat stat="meta" }}
+	{{/ dotdungeon.panel}}
-	{{> dotdungeon.stat stat="presence" }}
+	{{#> dotdungeon.panel class="stats" title="dotdungeon.panel.statistics"}}
-	{{> dotdungeon.stat stat="hands" }}
+		Statistics
-	{{> dotdungeon.stat stat="tilt" }}
+	{{/ dotdungeon.panel}}
-	{{> dotdungeon.stat stat="rng" }}
+	{{#> dotdungeon.panel class="skills" title="dotdungeon.panel.skills"}}
-	<br>
+		Skills
-
+	{{/ dotdungeon.panel}}
-	<h2>{{localize "skills.header"}}</h2>
+	{{#> dotdungeon.panel class="backpack" title="dotdungeon.panel.backpack"}}
-	<h3>{{localize "skills.build"}}</h3>
+		Backpack
-	{{> dotdungeon.skill name="defense" }}
+	{{/ dotdungeon.panel}}
-	{{> dotdungeon.skill name="magic" }}
+	{{#> dotdungeon.panel class="sync" title="dotdungeon.panel.sync"}}
-	{{> dotdungeon.skill name="melee" }}
+		Sync
-	{{> dotdungeon.skill name="platforming" }}
+	{{/ dotdungeon.panel}}
-	{{> dotdungeon.skill name="strength" }}
+	{{#> dotdungeon.panel class="aspect" title="dotdungeon.panel.aspect"}}
-	<h3>{{localize "skills.meta"}}</h3>
+		Aspect
-	{{> dotdungeon.skill name="alchemy" }}
+	{{/ dotdungeon.panel}}
-	{{> dotdungeon.skill name="arcanum" }}
+	{{#> dotdungeon.panel class="weapons" title="dotdungeon.panel.weapons"}}
-	{{> dotdungeon.skill name="dreams" }}
+		Weapons
-	{{> dotdungeon.skill name="lore" }}
+	{{/ dotdungeon.panel}}
-	{{> dotdungeon.skill name="navigation" }}
+	{{#> dotdungeon.panel class="spells" title="dotdungeon.panel.spells"}}
-	<h3>{{localize "skills.presence"}}</h3>
+		Spells
-	{{> dotdungeon.skill name="animal_handling" }}
+	{{/ dotdungeon.panel}}
-	{{> dotdungeon.skill name="perception" }}
+	{{#> dotdungeon.panel class="roles" title="dotdungeon.panel.roles"}}
-	{{> dotdungeon.skill name="sneak" }}
+		Roles
-	{{> dotdungeon.skill name="speech" }}
+	{{/ dotdungeon.panel}}
-	{{> dotdungeon.skill name="vibes" }}
+	{{#> dotdungeon.panel class="mounts" title="dotdungeon.panel.mounts"}}
-	<h3>{{localize "skills.hands"}}</h3>
+		Mounts
-	{{> dotdungeon.skill name="accuracy" }}
+	{{/ dotdungeon.panel}}
-	{{> dotdungeon.skill name="crafting" }}
+	{{#> dotdungeon.panel class="summons" title="dotdungeon.panel.summons"}}
-	{{> dotdungeon.skill name="engineering" }}
+		Summons
-	{{> dotdungeon.skill name="explosives" }}
+	{{/ dotdungeon.panel}}
-	{{> dotdungeon.skill name="piloting" }}
+	{{#> dotdungeon.panel class="storage" title="dotdungeon.panel.storage"}}
+		Storage
+	{{/ dotdungeon.panel}}
 </form>