✨

less/character-sheet.less

@@ -16,8 +16,13 @@
         height: 100px;
 
         display: flex;
+        justify-content: flex-start;
     };
 
+    .charInfo {
+        width: 500px
+    }
+
     .inputText {
         background-color: #30da0c;
         color: black;
@@ -58,9 +63,14 @@
         width: 60%;
     }
 
+    .advancementBox {
+        margin-left: 20px;
+    }
+
     .lvlBox {
-        width: 50px;
+        width: 60px;
-        height: 50px;
+        height: 60px;
+        background-color: #30da0c;
         color: black;
         border: black;
 
@@ -73,12 +83,22 @@
         -webkit-border-radius: 10px;
         -moz-border-radius: 10px;
         -o-border-radius: 10px;
+
+        margin-bottom: 10px;
+        padding: 5px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
     }
 
     .expBox {
         display: flex;
-        width: 50px;
+        justify-content: flex-start;
+        align-items: center;
+        width: 60px;
         height: 30px;
+        background-color: #30da0c;
         color: black;
         border: black;
 

pokemon.css

@@ -17,6 +17,10 @@
   width: 100%;
   height: 100px;
   display: flex;
+  justify-content: flex-start;
+}
+.pokemon.sheet.characterSheet .charInfo {
+  width: 500px;
 }
 .pokemon.sheet.characterSheet .inputText {
   background-color: #30da0c;
@@ -49,9 +53,13 @@
   margin-top: 5px;
   width: 60%;
 }
+.pokemon.sheet.characterSheet .advancementBox {
+  margin-left: 20px;
+}
 .pokemon.sheet.characterSheet .lvlBox {
-  width: 50px;
+  width: 60px;
-  height: 50px;
+  height: 60px;
+  background-color: #30da0c;
   color: black;
   border: black;
   box-shadow: 0 0 20px #003300 inset;
@@ -62,11 +70,20 @@
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -o-border-radius: 10px;
+  margin-bottom: 10px;
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
 }
 .pokemon.sheet.characterSheet .expBox {
   display: flex;
-  width: 50px;
+  justify-content: flex-start;
+  align-items: center;
+  width: 60px;
   height: 30px;
+  background-color: #30da0c;
   color: black;
   border: black;
   box-shadow: 0 0 20px #003300 inset;

system.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.0.14",
+    "version": "0.0.15",
     "id": "pokemon",
     "title": "Pokémon TTRPG",
     "description": "A Pokémon TTRPG",

templates/sheets/character/header.hbs

@@ -1,7 +1,7 @@
 <div class="headerBox">
     <div class="charInfo">
         <input class="inputText bigInputText" type="text" name="name" value="{{actor.name}}">
-        <input class="inputText smallInputText" type="text" name="species" value="{{actor.species}}">
+        <input class="inputText smallInputText" type="text" name="species" value="{{system.species}}">
     </div>
     <div class="advancementBox">
         <div class="lvlBox">