Get the layout for the general tab implemented (closes #142)

styles/v3/elements/panel.scss

@@ -0,0 +1,8 @@
+@use "../mixins/material" as material;
+
+.dotdungeon.style-v3 > .window-content {
+	.panel {
+		@include material.elevate(2);
+		border-radius: 4px;
+	}
+}

styles/v3/index.scss

@@ -8,10 +8,11 @@
 @use "./elements/hr.scss";
 @use "./elements/icons.scss";
 @use "./elements/nav.scss";
+@use "./elements/panel.scss";
 
 /* Sheet Layouts */
 @use "./layouts/datasheet.scss";
-@use "./layouts/items/untyped.scss";
+@use "./layouts/items/untyped/v2.scss";
 
 /* Sheet Options */
 .dotdungeon.style-v3 {

styles/v3/layouts/items/untyped.scss

@@ -1,23 +0,0 @@
-@use "../../mixins/material";
-
-.dotdungeon.style-v3 .item--untyped {
-	.nav-bar {
-		@include material.elevate(8);
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 6px;
-
-		nav {
-			display: flex;
-			flex-direction: row;
-			gap: 8px;
-			padding: 8px;
-		}
-	}
-
-	.page-content {
-		padding: 8px;
-		height: 100%;
-	}
-}

styles/v3/layouts/items/untyped/v2.scss

@@ -0,0 +1,38 @@
+@use "../../../mixins/material";
+@use "../../../mixins/utils";
+
+.dotdungeon.style-v3 .item--untyped {
+	.nav-bar {
+		@include material.elevate(8);
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 6px;
+
+		nav {
+			display: flex;
+			flex-direction: row;
+			gap: 8px;
+			padding: 8px;
+		}
+	}
+
+	.page-content {
+		padding: 8px;
+		padding-bottom: 60px;
+		height: 100%;
+	}
+
+	@include utils.tab("general") {
+		display: grid;
+		--height: 50px;
+		grid-template-columns: var(--height) 1fr;
+		grid-template-rows: var(--height) 1fr;
+		gap: 8px;
+		height: 100%;
+
+		.description {
+			grid-column: 1 / -1;
+		}
+	}
+}

styles/v3/mixins/_utils.scss

@@ -0,0 +1,5 @@
+@mixin tab($name) {
+	.tab.active[data-tab="#{$name}"] {
+		@content;
+	}
+}

templates/items/untyped/v2/tabs/general.v2.untyped.hbs

@@ -1,3 +1,5 @@
 <div class="tab" data-group="page" data-tab="general">
-	General Tab
+	<div class="photo panel" style="background: yellowgreen"></div>
+	<div class="name panel"></div>
+	<div class="description panel"></div>
 </div>