Add the Aspect sheet and update some translation keys for the actor sheet

styles/_vars.scss

@@ -1,2 +1,3 @@
 $title-font: 'Pixelify Sans', sans-serif;
+$body-font: sans-serif;
 $background: #f2f2f2;

styles/mixins/_breakpoints.scss

@@ -1,16 +1,10 @@
 @mixin bp-m {
-	@container (max-width: 700px) {
+	@container (max-width: 620px) {
 		@content
 	};
 };
 
 @mixin bp-s {
-	@container (max-width: 550px) {
-		@content
-	};
-};
-
-@mixin bp-xs {
 	@container (max-width: 400px) {
 		@content
 	};

styles/mixins/_foundry.scss

@@ -1,3 +1,5 @@
 @mixin fvtt_reset {
 	all: initial;
+	display: block;
+	box-sizing: border-box;
 }

styles/mixins/_partials.scss

@@ -0,0 +1,12 @@
+@mixin input-generic {
+	border-width: 2px;
+	border-radius: 4px;
+	border-style: solid;
+	border-color: rgba(0,0,0, 0.4);
+	background-color: rgba(0,0,0, 0.1);
+
+	&:focus,
+	&:active {
+		border-color: rgba(0,0,0, 1);
+	}
+}

styles/root.scss

@@ -1,3 +1,4 @@
+@use "./mixins/partials" as *;
 @use "./mixins/foundry" as *;
 @use "./vars.scss" as *;
 
@@ -5,6 +6,14 @@
 
 // Reset the parts of Foundry's styling which gets in the way of what I want
 .dotdungeon > .window-content {
+
+	::-webkit-scrollbar {
+		width: 10px;
+	}
+	::-webkit-scrollbar-thumb {
+		border-radius: 5px;
+	}
+
 	h2, h3, h4, h5, h6 {
 		@include fvtt_reset;
 		display: block;
@@ -12,12 +21,24 @@
 		margin: 0;
 	}
 
+	label {
+		display: block;
+	}
+
 	button, button:hover {
 		@include fvtt_reset;
 		font-family: inherit;
 		cursor: pointer;
 	}
 
+	input[type="text"],
+	input[type="number"],
+	textarea {
+		@include fvtt_reset;
+		padding: 5px 7px;
+		@include input-generic;
+	}
+
 	select, select:hover {
 		cursor: pointer;
 	}
@@ -36,4 +57,5 @@
 @import "./sheets/partials/stat.scss";
 @import "./sheets/partials/skill.scss";
 
-@import "./sheets/actor/mvp.scss";
+@import "./sheets/actor/mvp.scss";
+@import "./sheets/items/aspect.scss";

styles/sheets/actor/mvp.scss

@@ -105,7 +105,7 @@
 }
 
 
-@include bp-s {
+@include bp-m {
 	.dotdungeon {
 		.actor--pc {
 			grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -140,16 +140,34 @@
 	}
 }
 
-@include bp-xs {
+@include bp-s {
 	.dotdungeon {
 		.actor--pc {
 			grid-template-columns: 1fr;
+			grid-template-rows: repeat(12, min-content);
 			grid-template-areas:
+				"avatar"
 				"stats"
-				"skills";
+				"sync"
+				"skills"
+				"aspect"
+				"roles"
+				"backpack"
+				"weapons"
+				"spells"
+				"mounts"
+				"summons"
+				"storage";
 		}
 		.panel {
 			background: blueviolet;
+
+			&__header {
+				.icon {
+					display: none;
+					visibility: hidden;
+				}
+			}
 		}
 	}
 }

styles/sheets/items/aspect.scss

@@ -0,0 +1,18 @@
+@use "../../vars" as *;
+
+.dotdungeon .item--aspect {
+	padding: 4px;
+
+	input[type=text] {
+		font-family: $body-font;
+		font-size: 1.5em;
+		height: 1.5em;
+		width: 100%;
+	}
+
+	textarea {
+		font-family: $body-font;
+		width: 100%;
+		resize: vertical;
+	}
+}