Small design and style fixes

inventory.css

@@ -0,0 +1,49 @@
+#inventory {
+	padding: 4px;
+}
+
+.containers {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.container {
+	width: 332px;
+	flex-grow: 1;
+}
+
+.containerTop {
+	cursor: pointer;
+	margin: -16px -16px 0 -16px;
+	padding: 16px;
+}
+
+.equipmentTop {
+	margin: -16px -16px 0 -16px;
+	padding: 16px;
+}
+
+.containerMain {
+	margin: 0 -16px -16px -16px;
+	padding-bottom: 16px;
+}
+
+.equipmentMain {
+	margin: 0 -16px -16px -16px;
+	padding-bottom: 16px;
+}
+
+.inventoryItem {
+	background: white;
+	transition: box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+	margin: 1px 0 1px 0;
+}
+
+.inventoryItem[hero] {
+	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+}
+
+.itemSlot {
+	background-color: rgb(232, 232, 232);
+	background-color: rgba(0, 0, 0, 0.1);
+}

rpg-docs/client/views/GeneralCSS/general.css

@@ -96,6 +96,7 @@ paper-button {
 
 .fab-buffer {
 	height: 88px;
+	width: 100%;
 }
 
 *[hidden] {

rpg-docs/client/views/character/Stats/skillRow/skillRow.css

@@ -1,6 +1,6 @@
 .skillRow {
 	height: 32px;
-	margin: 0 -8px 0 -8px;
+	margin: 0 -16px 0 -16px;
 }
 
 .skillRow core-icon {

rpg-docs/client/views/character/Stats/stats.css

@@ -42,10 +42,6 @@
 	justify-content: center;
 }
 
-.card .subhead {
-	padding: 16px;
-}
-
 .editEffect > * {
 	vertical-align: bottom;
 }

rpg-docs/client/views/character/characterSheet.html

@@ -22,9 +22,9 @@
 			<swipe-detect touch-action="pan-y" flex>{{> stats}}</swipe-detect>
 			<swipe-detect touch-action="pan-y" flex>{{> features}}</swipe-detect>
 			<swipe-detect touch-action="pan-y" flex>{{> inventory}}</swipe-detect>
-			<swipe-detect touch-action="pan-y" flex>spellBook</swipe-detect>
-			<swipe-detect touch-action="pan-y" flex>persona</swipe-detect>
-			<swipe-detect touch-action="pan-y" flex>journal</swipe-detect>
+			<swipe-detect touch-action="pan-y" flex>{{> spells}}</swipe-detect>
+			<swipe-detect touch-action="pan-y" flex>Persona Under Construction</swipe-detect>
+			<swipe-detect touch-action="pan-y" flex>Journal Under Construction</swipe-detect>
 		</core-animated-pages>
 	</div>
 </template>

rpg-docs/client/views/character/inventory/inventory.html

@@ -3,7 +3,7 @@
 		<div id="inventory" class="scroll-y" fit>
 			<div class="containers">
 				<paper-shadow class="card container">
-					<div class="equipmentTop blue white-text" layout horizontal>
+					<div class="equipmentTop blue white-text" layout horizontal center>
 						<div class="containerName title" flex>Equipment</div>
 						<div class="caption" style="margin-right: 8px">(net Worth)</div>
 						<div class="caption">(weightCarried)lbs</div>
@@ -29,7 +29,7 @@
 				</paper-shadow>
 				{{#each containers}}
 					<paper-shadow class="card container"  hero-id="main" {{detailHero}}>
-						<div class="containerTop green white-text" hero-id="toolbar" layout horizontal {{detailHero}}>
+						<div class="containerTop green white-text" hero-id="toolbar" layout horizontal center {{detailHero}}>
 							<div class="containerName title" hero-id="title" flex {{detailHero}}>{{name}}</div>
 							<div class="caption" style="margin-right: 8px">{{valueString totalValue}}</div>
 							<div class="caption">{{round totalWeight}}lbs</div>
@@ -45,6 +45,7 @@
 						</div>
 					</paper-shadow>
 				{{/each}}
+				<div class="fab-buffer"></div>
 			</div>
 		</div>
 		<paper-fab-menu id="inventoryAddMenu" icon="add" closeIcon="close" duration="0.3">