From f018a5f3a32e6a86a6f9fda1684fd79608cdf9c4 Mon Sep 17 00:00:00 2001
From: Thaum <stefanzermatten@gmail.com>
Date: Fri, 28 Nov 2014 12:05:25 +0000
Subject: [PATCH] Finished colourful ability score cards

---
 rpg-docs/.meteor/versions                     |   2 -
 rpg-docs/Model/Character/Characters.js        | 105 +++++------
 rpg-docs/client/views/GeneralCSS/color.css    |  75 ++++++++
 rpg-docs/client/views/GeneralCSS/general.css  |  80 +++++++++
 .../client/views/GeneralCSS/typography.css    |  99 +++++++++++
 .../character/SideAbilities/skills/skills.css |  42 -----
 .../client/views/character/Stats/stats.css    |  22 ++-
 .../client/views/character/Stats/stats.html   | 148 +++++++--------
 .../character/abilityCards/abilityCards.css   |  30 ++++
 .../character/abilityCards/abilityCards.html  | 168 ++++++++++--------
 .../views/character/characterSheet.html       |   4 +-
 .../client/views/character/skills/skills.css  |  48 +++++
 .../{SideAbilities => }/skills/skills.html    |  12 +-
 .../{SideAbilities => }/skills/skills.js      |   0
 rpg-docs/client/views/general.css             | 119 -------------
 15 files changed, 579 insertions(+), 375 deletions(-)
 create mode 100644 rpg-docs/client/views/GeneralCSS/color.css
 create mode 100644 rpg-docs/client/views/GeneralCSS/general.css
 create mode 100644 rpg-docs/client/views/GeneralCSS/typography.css
 delete mode 100644 rpg-docs/client/views/character/SideAbilities/skills/skills.css
 create mode 100644 rpg-docs/client/views/character/skills/skills.css
 rename rpg-docs/client/views/character/{SideAbilities => }/skills/skills.html (52%)
 rename rpg-docs/client/views/character/{SideAbilities => }/skills/skills.js (100%)
 delete mode 100644 rpg-docs/client/views/general.css

diff --git a/rpg-docs/.meteor/versions b/rpg-docs/.meteor/versions
index 9e9f551f..34f08f31 100644
--- a/rpg-docs/.meteor/versions
+++ b/rpg-docs/.meteor/versions
@@ -21,8 +21,6 @@ cw4gn3r:jquery-event-drag@2.2.0
 dburles:collection-helpers@1.0.1
 ddp@1.0.11
 deps@1.0.5
-ecwyne:polymer-elements@1.0.4
-ecwyne:polymer@1.0.3
 ejson@1.0.4
 email@1.0.4
 fastclick@1.0.1
diff --git a/rpg-docs/Model/Character/Characters.js b/rpg-docs/Model/Character/Characters.js
index f2eeaec2..5bacf527 100644
--- a/rpg-docs/Model/Character/Characters.js
+++ b/rpg-docs/Model/Character/Characters.js
@@ -314,15 +314,14 @@ Characters.helpers({
 		var field = char[fieldName];
 		if(!field){
 			throw new Meteor.Error("getField failed", 
-								   "getField could not find field" + fieldName + " in character "+ char._id);
+								   "getField could not find field " + fieldName + " in character "+ char._id);
 		}
 		return field;
 	},
 	//returns the value of a field
 	fieldValue : function(fieldName){
 		if(!Schemas.Character.schema(fieldName)){
-			console.log("Character's schema does not contain a field called: " + fieldName);
-			return;
+			throw new Meteor.Error("Field not found", "Character's schema does not contain a field called: " + fieldName);
 		}
 		//duck typing to get the right value function
 		//.proficiency implies skill
@@ -353,14 +352,16 @@ Characters.helpers({
 			//we can't visit it again unless it returns first
 			visitedAttributes.push(attributeName);
 
-			var charId = this._id;
-			var attribute = this.getField(attributeName);
-			//base value
-			var value = attributeBase(charId, attribute);
-			value += attribute.adjustment;
-
-			//this attribute returns, pull it from the array, we may visit it again safely
-			visitedAttributes = _.without(visitedAttributes, attributeName);
+			try{
+				var charId = this._id;
+				var attribute = this.getField(attributeName);
+				//base value
+				var value = attributeBase(charId, attribute);
+				value += attribute.adjustment;
+			}finally{
+				//this attribute returns or fails, pull it from the array, we may visit it again safely
+				visitedAttributes = _.without(visitedAttributes, attributeName);
+			}
 			return value;
 		}
 	})(),
@@ -380,14 +381,15 @@ Characters.helpers({
 			//push this attribute to the list of visited attributes
 			//we can't visit it again unless it returns first
 			visitedAttributes.push(attributeName);
-
-			var charId = this._id;
-			var attribute = this.getField(attributeName);
-			//base value
-			var value = attributeBase(charId, attribute);
-
-			//this attribute returns, pull it from the array, we may visit it again safely
-			visitedAttributes = _.without(visitedAttributes, attributeName);
+			try{
+				var charId = this._id;
+				var attribute = this.getField(attributeName);
+				//base value
+				var value = attributeBase(charId, attribute);
+			}finally{
+				//this attribute returns or fails, pull it from the array, we may visit it again safely
+				visitedAttributes = _.without(visitedAttributes, attributeName);
+			}
 			return value;
 		}
 	})(),
@@ -407,45 +409,46 @@ Characters.helpers({
 			//push this skill to the list of visited skills
 			//we can't visit it again unless it returns first
 			visitedSkills.push(skillName);
+			try{
+				var charId = this._id;
+				skill = this.getField(skillName);
+				//get the final value of the ability score
+				var ability = this.attributeValue(skill.ability);
 
-			var charId = this._id;
-			skill = this.getField(skillName);
-			//get the final value of the ability score
-			var ability = this.attributeValue(skill.ability);
+				//base modifier
+				var mod = +getMod(ability)
 
-			//base modifier
-			var mod = +getMod(ability)
+				//multiply proficiency bonus by largest value in proficiency array
+				var prof = this.proficiency(skill);
 
-			//multiply proficiency bonus by largest value in proficiency array
-			var prof = this.proficiency(skill);
+				//add multiplied proficiency bonus to modifier
+				mod += prof * this.attributeValue("proficiencyBonus");
 
-			//add multiplied proficiency bonus to modifier
-			mod += prof * this.attributeValue("proficiencyBonus");
+				//add all values in add array
+				_.each(skill.add, function(effect){
+					mod += evaluateEffect(charId, effect);
+				});
 
-			//add all values in add array
-			_.each(skill.add, function(effect){
-				mod += evaluateEffect(charId, effect);
-			});
+				//multiply all values in mul array
+				_.each(skill.mul, function(effect){
+					mod *= evaluateEffect(charId, effect);
+				});
 
-			//multiply all values in mul array
-			_.each(skill.mul, function(effect){
-				mod *= evaluateEffect(charId, effect);
-			});
+				//largest min
+				_.each(skill.min, function(effect){
+					var min = evaluateEffect(charId, effect);
+					mod = mod > min? mod : min;
+				});
 
-			//largest min
-			_.each(skill.min, function(effect){
-				var min = evaluateEffect(charId, effect);
-				mod = mod > min? mod : min;
-			});
-
-			//smallest max
-			_.each(skill.max, function(effect){
-				var max = evaluateEffect(charId, effect);
-				mod = mod < max? mod : max;
-			});
-
-			//done traversing the tree, this skill returns, pull it from the array
-			visitedSkills = _.without(visitedSkills, skillName);
+				//smallest max
+				_.each(skill.max, function(effect){
+					var max = evaluateEffect(charId, effect);
+					mod = mod < max? mod : max;
+				});
+			} finally{
+				//this skill returns or fails, pull it from the array
+				visitedSkills = _.without(visitedSkills, skillName);
+			}
 			return signedString(mod);
 		}
 	})(),
diff --git a/rpg-docs/client/views/GeneralCSS/color.css b/rpg-docs/client/views/GeneralCSS/color.css
new file mode 100644
index 00000000..fcbfde5e
--- /dev/null
+++ b/rpg-docs/client/views/GeneralCSS/color.css
@@ -0,0 +1,75 @@
+.red {
+	background-color: #F44336;
+}
+
+.pink {
+	background-color: #E91E63;
+}
+
+.purple {
+	background-color: #9C27B0;
+}
+
+.deep-purple {
+	background-color: #673AB7;
+}
+
+.indigo {
+	background-color: #3F51B5;
+}
+
+.blue {
+	background-color: #2196F3;
+}
+
+.light-blue {
+	background-color: #03A9F4;
+}
+
+.cyan {
+	background-color: #00BCD4;
+}
+
+.teal {
+	background-color: #009688;
+}
+
+.green {
+	background-color: #4CAF50;
+}
+
+.light-green {
+	background-color: #8BC34A;
+}
+
+.lime {
+	background-color: #CDDC39;
+}
+
+.yellow {
+	background-color: #FFEB3B;
+}
+
+.amber {
+	background-color: #FFC107;
+}
+
+.orange {
+	background-color: #FF9800;
+}
+
+.deep-orange {
+	background-color: #FF5722;
+}
+
+.brown {
+	background-color: #795548;
+}
+
+.grey {
+	background-color: #9E9E9E;
+}
+
+.blue-grey {
+	background-color: #607D8B;
+}
\ No newline at end of file
diff --git a/rpg-docs/client/views/GeneralCSS/general.css b/rpg-docs/client/views/GeneralCSS/general.css
new file mode 100644
index 00000000..03dc0f08
--- /dev/null
+++ b/rpg-docs/client/views/GeneralCSS/general.css
@@ -0,0 +1,80 @@
+root {
+	display: block;
+}
+
+body {
+	font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
+	margin: 0;
+	overflow-x: hidden;
+}
+
+body.core-narrow {
+	padding: 8px;
+}
+
+.calculatedValue {
+	color: #021C33;
+	font-weight: bold;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+td {
+	padding: 0;
+}
+
+table {
+	border-spacing: 0;
+}
+
+hr {
+	background-color: #444;
+	opacity: 0.12;
+	border-width: 0;
+	color: #444;
+	height: 1px;
+	line-height: 0;
+	margin: 0 -16px;
+	text-align: center;
+}
+
+paper-button {
+	font-size: 14px;
+	font-weight: 400;
+	text-transform: uppercase;
+	color: #000;
+	color: rgba(0,0,0,0.87);
+	letter-spacing: 0.010;
+}
+
+.listRow {
+	height: 32px;
+}
+
+.card {
+	width: 148px;
+	margin: 4px;
+	padding: 16px;
+	font-size: 14px;
+	border-radius: 2px;
+	background-color: white;
+}
+
+.card.double {
+	width: 304px;
+}
+
+.card paper-button {
+	font-size: 14px;
+	letter-spacing: 0.01em;
+}
+
+.grey-background, body {
+	background-color: #E0E0E0;
+}
+
+.center {
+	text-align: center;
+}
diff --git a/rpg-docs/client/views/GeneralCSS/typography.css b/rpg-docs/client/views/GeneralCSS/typography.css
new file mode 100644
index 00000000..d7d9d08e
--- /dev/null
+++ b/rpg-docs/client/views/GeneralCSS/typography.css
@@ -0,0 +1,99 @@
+.display2 {
+	font-size: 45px;
+	font-weight: 400;
+	color: #000;
+	color: rgba(0,0,0,0.54);
+	letter-spacing: 0;
+}
+
+.white-text .display2{
+	color: rgba(255,255,255,0.54);
+}
+
+.display1 {
+	font-size: 34px;
+	font-weight: 400;
+	color: #000;
+	color: rgba(0,0,0,0.54);
+	letter-spacing: 0;
+}
+
+.white-text .display1{
+	color: rgba(255,255,255,0.54);
+}
+
+h1, .headline {
+	font-size: 24px;
+	font-weight: 400;
+	margin: 0;
+	color: #000;
+	color: rgba(0,0,0,0.87);
+	letter-spacing: 0;
+}
+
+.white-text h1, .white-text .headline{
+	color: rgba(255,255,255,0.87);
+}
+
+h2, .title {
+	font-size: 20px;
+	font-weight: 500;
+	margin: 0;
+	color: #000;
+	color: rgba(0,0,0,0.87);
+	letter-spacing: 0.005em;
+}
+
+.white-text h2{
+	color: rgba(255,255,255,0.87);
+}
+
+h3, .subhead {
+	font-size: 16px;
+	font-weight: 400;
+	margin: 0;
+	color: #000;
+	color: rgba(0,0,0,0.87);
+	letter-spacing: 0.010em;
+}
+
+.white-text h3, .white-text .subhead{
+	color: rgba(255,255,255,0.87);
+}
+
+.body2 {
+	font-size: 14px;
+	font-weight: 500;
+	color: #000;
+	color: rgba(0,0,0,0.87);
+	letter-spacing: 0.010em;
+}
+
+.white-text .body2{
+	color: rgba(255,255,255,0.87);
+}
+
+p, .body1, body {
+	font-size: 14px;
+	font-weight: 400;
+	margin: 0;
+	color: #000;
+	color: rgba(0,0,0,0.87);
+	letter-spacing: 0.010em;
+}
+
+.white-text p{
+	color: rgba(255,255,255,0.87);
+}
+
+.caption{
+	font-size: 12px;
+	font-weight: 400;
+	color: #000;
+	color: rgba(0,0,0,0.54);
+	letter-spacing: 0.020em;
+}
+
+.white-text .caption{
+	color: rgba(255,255,255,0.54);
+}
\ No newline at end of file
diff --git a/rpg-docs/client/views/character/SideAbilities/skills/skills.css b/rpg-docs/client/views/character/SideAbilities/skills/skills.css
deleted file mode 100644
index 38644db4..00000000
--- a/rpg-docs/client/views/character/SideAbilities/skills/skills.css
+++ /dev/null
@@ -1,42 +0,0 @@
-.profIcon{
-  display: inline-block;
-  width: 23px;
-  height: 14px;
-  background-size: contain;
-  background-repeat: no-repeat;
-
-  position: relative;
-  top: 1px;
-
-  /*TODO fix the actual images and remove inversion*/
-  -webkit-filter: invert(100%);
-  opacity: 0.54;
-}
-
-table.skillTable td:nth-of-type(2) {
-  text-align: right;
-}
-
-table.skillTable td:nth-of-type(3) {
-  padding-left: 8px;
-}
-
-td.fail {
-  color: #AF0000;
-}
-
-.advantage{
-  background-image: url(/png/advantage/greenUp.png);
-  background-size: contain;
-  background-repeat: no-repeat;
-}
-
-.disadvantage{
-  background-image: url(/png/advantage/redDown.png);
-  background-size: contain;
-  background-repeat: no-repeat;
-}
-
-td.conditionals::after{
-  content: "*";
-}
diff --git a/rpg-docs/client/views/character/Stats/stats.css b/rpg-docs/client/views/character/Stats/stats.css
index b0b40c4c..316ee8e8 100644
--- a/rpg-docs/client/views/character/Stats/stats.css
+++ b/rpg-docs/client/views/character/Stats/stats.css
@@ -1,6 +1,22 @@
-#stats{
+#stats {
+	padding: 4px;
+}
+
+#stats, #stats .abilityFlex, #stats .statsFlex{
 	display: flex;
 	justify-content: center;
-  align-items: flex-start;
-  flex-wrap: wrap;
+	align-items: flex-start;
+	flex-wrap: wrap;
 }
+
+#stats .abilityFlex{
+	flex-basis: 642px;
+	flex-grow: 1;
+	flex-shrink: 1;
+}
+
+#stats .statsFlex{
+	min-width: 152px;
+	flex-basis: 0px;
+	flex-grow: 1;
+}
\ No newline at end of file
diff --git a/rpg-docs/client/views/character/Stats/stats.html b/rpg-docs/client/views/character/Stats/stats.html
index f163102a..a91846da 100644
--- a/rpg-docs/client/views/character/Stats/stats.html
+++ b/rpg-docs/client/views/character/Stats/stats.html
@@ -1,80 +1,84 @@
 <template name="stats">
-    <div id="stats">
-        {{> abilityCards}}
-        <paper-shadow class="card" id="armor">
-            <h1>{{attributeValue "armor"}}</h1>
-            <p class="caption">Armor</p>
-        </paper-shadow>
-        <paper-shadow class="card" id="initiative">
-           <h1>{{skillMod "initiative"}}</h1>
-            <p class="caption">Initiative</p>
-        </paper-shadow>
-        <paper-shadow class="card" id="proficiencyBonus">
-            <h1>{{attributeValue "proficiencyBonus"}}</h1>
-            <p class="caption">Proficiency Bonus</p>
-        </paper-shadow>
-        <paper-shadow class="card" id="speed">
-            <h1>{{attributeValue "speed"}}</h1>
-            <p class="caption">Speed</p>
-        </paper-shadow>
-        <paper-shadow class="card" id="passivePerception">
-            <h1>{{passiveSkill "perception"}}</h1>
-            <p class="caption">Passive Perception</p>
-        </paper-shadow>
-        <paper-shadow class="card" id="hitDice">
-            <h1>{{> hitDice hitDice="d6HitDice" d="6"}}</h1>
-            <h1>{{> hitDice hitDice="d8HitDice" d="8"}}</h1>
-            <h1>{{> hitDice hitDice="d10HitDice" d="10"}}</h1>
-            <h1>{{> hitDice hitDice="d12HitDice" d="12"}}</h1>
-           <p class="caption">Hit Dice</p>
-        </paper-shadow>
-        {{# if canCast}}
-            <paper-shadow class="card" id="spellSlots">
-                <h1>{{> spellSlots}}</h1>
-                <p class="caption">Spell Slots</p>
-            </paper-shadow>
-        {{/if}}
-        {{# if attributeBase "rages"}}
-            <paper-shadow class="card" id="rages">
-                <h1>{{attributeValue "rages"}}</h1>
-                <p class="caption">rages</p>
-            </paper-shadow>
-        {{/if}}
-        {{# if attributeBase "sorceryPoints"}}
-            <paper-shadow class="card" id="sorceryPoints">
-                <h1>{{attributeValue "sorceryPoints"}}</h1>
-                <p class="caption">Sorcery Points</p>
-            </paper-shadow>
-        {{/if}}
-        {{# if attributeBase "expertiseDice"}}
-            <paper-shadow class="card" id="expertiseDice">
-                <h1>{{attributeValue "expertiseDice"}}</h1>
-                <p class="caption">Expertise Dice</p>
-            </paper-shadow>
-        {{/if}}
-        {{# if attributeBase "superiorityDice"}}
-            <paper-shadow class="card" id="superiorityDice">
-                <h1>{{attributeValue "superiorityDice"}}</h1>
-                <p class="caption">Superiority Dice</p>
-            </paper-shadow>
-        {{/if}}
-    </div>
+	<div id="stats">
+		<div class="abilityFlex">
+			{{> abilityCards}}
+		</div>
+		<div class="statsFlex">
+			<paper-shadow class="card" id="armor">
+				<h1>{{attributeValue "armor"}}</h1>
+				<p class="caption">Armor</p>
+			</paper-shadow>
+			<paper-shadow class="card" id="initiative">
+				<h1>{{skillMod "initiative"}}</h1>
+				<p class="caption">Initiative</p>
+			</paper-shadow>
+			<paper-shadow class="card" id="proficiencyBonus">
+				<h1>{{attributeValue "proficiencyBonus"}}</h1>
+				<p class="caption">Proficiency Bonus</p>
+			</paper-shadow>
+			<paper-shadow class="card" id="speed">
+				<h1>{{attributeValue "speed"}}</h1>
+				<p class="caption">Speed</p>
+			</paper-shadow>
+			<paper-shadow class="card" id="passivePerception">
+				<h1>{{passiveSkill "perception"}}</h1>
+				<p class="caption">Passive Perception</p>
+			</paper-shadow>
+			<paper-shadow class="card" id="hitDice">
+				<h1>{{> hitDice hitDice="d6HitDice" d="6"}}</h1>
+				<h1>{{> hitDice hitDice="d8HitDice" d="8"}}</h1>
+				<h1>{{> hitDice hitDice="d10HitDice" d="10"}}</h1>
+				<h1>{{> hitDice hitDice="d12HitDice" d="12"}}</h1>
+				<p class="caption">Hit Dice</p>
+			</paper-shadow>
+			{{# if canCast}}
+			<paper-shadow class="card" id="spellSlots">
+				<h1>{{> spellSlots}}</h1>
+				<p class="caption">Spell Slots</p>
+			</paper-shadow>
+			{{/if}}
+			{{# if attributeBase "rages"}}
+			<paper-shadow class="card" id="rages">
+				<h1>{{attributeValue "rages"}}</h1>
+				<p class="caption">rages</p>
+			</paper-shadow>
+			{{/if}}
+			{{# if attributeBase "sorceryPoints"}}
+			<paper-shadow class="card" id="sorceryPoints">
+				<h1>{{attributeValue "sorceryPoints"}}</h1>
+				<p class="caption">Sorcery Points</p>
+			</paper-shadow>
+			{{/if}}
+			{{# if attributeBase "expertiseDice"}}
+			<paper-shadow class="card" id="expertiseDice">
+				<h1>{{attributeValue "expertiseDice"}}</h1>
+				<p class="caption">Expertise Dice</p>
+			</paper-shadow>
+			{{/if}}
+			{{# if attributeBase "superiorityDice"}}
+			<paper-shadow class="card" id="superiorityDice">
+				<h1>{{attributeValue "superiorityDice"}}</h1>
+				<p class="caption">Superiority Dice</p>
+			</paper-shadow>
+			{{/if}}	
+		</div>
+	</div>
 </template>
 
 <template name="hitDice">
-    {{# if ../attributeBase hitDice}}
-        {{../attributeValue hitDice}}d{{d}} + {{../abilityMod "constitution"}}
-    {{/if}}
+	{{# if ../attributeBase hitDice}}
+	{{../attributeValue hitDice}}d{{d}} + {{../abilityMod "constitution"}}
+	{{/if}}
 </template>
 
 <template name="spellSlots">
-    {{attributeValue "level1SpellSlots"}}
-    {{attributeValue "level2SpellSlots"}}
-    {{attributeValue "level3SpellSlots"}}
-    {{attributeValue "level4SpellSlots"}}
-    {{attributeValue "level5SpellSlots"}}
-    {{attributeValue "level6SpellSlots"}}
-    {{attributeValue "level7SpellSlots"}}
-    {{attributeValue "level8SpellSlots"}}
-    {{attributeValue "level9SpellSlots"}}
+	{{attributeValue "level1SpellSlots"}}
+	{{attributeValue "level2SpellSlots"}}
+	{{attributeValue "level3SpellSlots"}}
+	{{attributeValue "level4SpellSlots"}}
+	{{attributeValue "level5SpellSlots"}}
+	{{attributeValue "level6SpellSlots"}}
+	{{attributeValue "level7SpellSlots"}}
+	{{attributeValue "level8SpellSlots"}}
+	{{attributeValue "level9SpellSlots"}}
 </template>
diff --git a/rpg-docs/client/views/character/abilityCards/abilityCards.css b/rpg-docs/client/views/character/abilityCards/abilityCards.css
index e69de29b..12af8054 100644
--- a/rpg-docs/client/views/character/abilityCards/abilityCards.css
+++ b/rpg-docs/client/views/character/abilityCards/abilityCards.css
@@ -0,0 +1,30 @@
+.card.double {
+	display: flex;
+}
+.card.double > div{
+	vertical-align: top;
+	padding: 16px;
+}
+
+.abilityScore {
+	width: 70px;
+	text-align: center;
+	background-color: #D50000;
+	padding: 16px;
+}
+
+.abilityFlex .card {
+	padding: 0;
+}
+
+.abilityCardRight {
+	flex-grow: 1;
+}
+
+.abilityCardRight hr{
+	margin: 8px -16px;
+}
+
+.abilityCardRight h1{
+	margin-bottom: 8px;
+}
\ No newline at end of file
diff --git a/rpg-docs/client/views/character/abilityCards/abilityCards.html b/rpg-docs/client/views/character/abilityCards/abilityCards.html
index 214d362a..a2970246 100644
--- a/rpg-docs/client/views/character/abilityCards/abilityCards.html
+++ b/rpg-docs/client/views/character/abilityCards/abilityCards.html
@@ -1,98 +1,110 @@
 <template name="abilityCards">
-    {{> strengthCard}}
-    {{> dexterityCard}}
-    {{> constitutionCard}}
-    {{> intelligenceCard}}
-    {{> wisdomCard}}
-    {{> charismaCard}}
+	{{> strengthCard}}
+	{{> dexterityCard}}
+	{{> constitutionCard}}
+	{{> intelligenceCard}}
+	{{> wisdomCard}}
+	{{> charismaCard}}
 </template>
 
 <template name="strengthCard">
-    <paper-shadow class="card double">
-        <h1>Strength</h1>
-        <h1>{{attributeValue "strength"}}</h1>
-        <h2>{{abilityMod "strength"}}</h2>
-        <hr>
-        <table>
-            {{> skillRow name="Strength Save" skill="strengthSave"}}
-            {{> skillRow name="Athletics" skill="athletics"}}
-        </table>
-    </paper-shadow>
+	<paper-shadow class="card double">
+		<div class="abilityScore red white-text">
+			<h1 class="display1">{{attributeValue "strength"}}</h1>
+			<h2>{{abilityMod "strength"}}</h2>
+		</div>
+		<div class="abilityCardRight">
+			<h1>Strength</h1>
+			{{> skillRow name="Save" skill="strengthSave"}}
+			<hr>
+			{{> skillRow name="Athletics" skill="athletics"}}
+		</div>
+	</paper-shadow>
 </template>
 
 <template name="dexterityCard">
-    <paper-shadow class="card double">
-        <h1>Dexterity</h1>
-        <h1>{{attributeValue "dexterity"}}</h1>
-        <h2>{{abilityMod "dexterity"}}</h2>
-        <hr>
-        <table>
-            {{> skillRow name="Dexterity Save" skill="dexteritySave"}}
-            {{> skillRow name="Acrobatics" skill="acrobatics"}}
-            {{> skillRow name="Sleight of Hand" skill="sleightOfHand"}}
-            {{> skillRow name="Stealth" skill="stealth"}}
-        </table>
-    </paper-shadow>
+	<paper-shadow class="card double">
+		<div class="abilityScore green white-text">
+			<h1 class="display1">{{attributeValue "dexterity"}}</h1>
+			<h2>{{abilityMod "dexterity"}}</h2>
+		</div>
+		<div class="abilityCardRight">
+			<h1>Dexterity</h1>
+			{{> skillRow name="Save" skill="dexteritySave"}}
+			<hr>
+			{{> skillRow name="Acrobatics" skill="acrobatics"}}
+			{{> skillRow name="Sleight of Hand" skill="sleightOfHand"}}
+			{{> skillRow name="Stealth" skill="stealth"}}
+		</div>
+	</paper-shadow>
 </template>
 
 <template name="constitutionCard">
-    <paper-shadow class="card double">
-        <h1>Constitution</h1>
-        <h1>{{attributeValue "constitution"}}</h1>
-        <h2>{{abilityMod "constitution"}}</h2>
-        <hr>
-        <table>
-            {{> skillRow name="Constitution Save" skill="constitutionSave"}}
-        </table>
-    </paper-shadow>
+	<paper-shadow class="card double">
+		<div class="abilityScore deep-orange white-text">
+			<h1 class="display1">{{attributeValue "constitution"}}</h1>
+			<h2>{{abilityMod "constitution"}}</h2>
+		</div>
+		<div class="abilityCardRight">
+			<h1>Constitution</h1>
+			{{> skillRow name="Save" skill="constitutionSave"}}
+			<hr>
+		</div>
+	</paper-shadow>
 </template>
 
 <template name="intelligenceCard">
-    <paper-shadow class="card double">
-        <h1>Intelligence</h1>
-        <h1>{{attributeValue "intelligence"}}</h1>
-        <h2>{{abilityMod "intelligence"}}</h2>
-        <hr>
-        <table>
-            {{> skillRow name="Intelligence Save" skill="intelligenceSave"}}
-            {{> skillRow name="Arcana" skill="arcana"}}
-            {{> skillRow name="History" skill="history"}}
-            {{> skillRow name="Investigation" skill="investigation"}}
-            {{> skillRow name="Nature" skill="nature"}}
-            {{> skillRow name="Religion" skill="religion"}}
-        </table>
-    </paper-shadow>
+	<paper-shadow class="card double">
+		<div class="abilityScore indigo white-text">
+			<h1 class="display1">{{attributeValue "intelligence"}}</h1>
+			<h2>{{abilityMod "intelligence"}}</h2>
+		</div>
+		<div class="abilityCardRight">
+			<h1>Intelligence</h1>
+			{{> skillRow name="Save" skill="intelligenceSave"}}
+			<hr>
+			{{> skillRow name="Arcana" skill="arcana"}}
+			{{> skillRow name="History" skill="history"}}
+			{{> skillRow name="Investigation" skill="investigation"}}
+			{{> skillRow name="Nature" skill="nature"}}
+			{{> skillRow name="Religion" skill="religion"}}
+		</div>
+	</paper-shadow>
 </template>
 
 <template name="wisdomCard">
-    <paper-shadow class="card double">
-        <h1>Wisdom</h1>
-        <h1>{{attributeValue "wisdom"}}</h1>
-        <h2>{{abilityMod "wisdom"}}</h2>
-        <hr>
-        <table>
-            {{> skillRow name="Wisdom Save" skill="wisdomSave"}}
-            {{> skillRow name="Animal Handling" skill="animalHandling"}}
-            {{> skillRow name="Insight" skill="insight"}}
-            {{> skillRow name="Medicine" skill="medicine"}}
-            {{> skillRow name="Perception" skill="perception"}}
-            {{> skillRow name="Survival" skill="survival"}}
-        </table>
-    </paper-shadow>
+	<paper-shadow class="card double">
+		<div class="abilityScore purple white-text">
+			<h1 class="display1">{{attributeValue "wisdom"}}</h1>
+			<h2>{{abilityMod "wisdom"}}</h2>
+		</div>
+		<div class="abilityCardRight">
+			<h1>Wisdom</h1>
+			{{> skillRow name="Save" skill="wisdomSave"}}
+			<hr>
+			{{> skillRow name="Animal Handling" skill="animalHandling"}}
+			{{> skillRow name="Insight" skill="insight"}}
+			{{> skillRow name="Medicine" skill="medicine"}}
+			{{> skillRow name="Perception" skill="perception"}}
+			{{> skillRow name="Survival" skill="survival"}}
+		</div>
+	</paper-shadow>
 </template>
 
 <template name="charismaCard">
-    <paper-shadow class="card double">
-        <h1>Charisma</h1>
-        <h1>{{attributeValue "charisma"}}</h1>
-        <h2>{{abilityMod "charisma"}}</h2>
-        <hr>
-        <table>
-            {{> skillRow name="Charisma Save" skill="charismaSave"}}
-            {{> skillRow name="Deception" skill="deception"}}
-            {{> skillRow name="Intimidation" skill="intimidation"}}
-            {{> skillRow name="Performance" skill="performance"}}
-            {{> skillRow name="Persuasion" skill="persuasion"}}
-        </table>
-    </paper-shadow>
+	<paper-shadow class="card double">
+		<div class="abilityScore pink white-text">
+			<h1 class="display1">{{attributeValue "charisma"}}</h1>
+			<h2>{{abilityMod "charisma"}}</h2>
+		</div>
+		<div class="abilityCardRight">
+			<h1>Charisma</h1>
+			{{> skillRow name="Save" skill="charismaSave"}}
+			<hr>
+			{{> skillRow name="Deception" skill="deception"}}
+			{{> skillRow name="Intimidation" skill="intimidation"}}
+			{{> skillRow name="Performance" skill="performance"}}
+			{{> skillRow name="Persuasion" skill="persuasion"}}
+		</div>
+	</paper-shadow>
 </template>
diff --git a/rpg-docs/client/views/character/characterSheet.html b/rpg-docs/client/views/character/characterSheet.html
index 39457475..bca3a4b9 100644
--- a/rpg-docs/client/views/character/characterSheet.html
+++ b/rpg-docs/client/views/character/characterSheet.html
@@ -2,18 +2,18 @@
 	<paper-tabs id="characterSheetTabs" scrollable="true" selected={{selectedTab}}>
 		<paper-tab>Stats</paper-tab>
 		<paper-tab>Features</paper-tab>
-		<paper-tab>Persona</paper-tab>
 		<paper-tab>Inventory</paper-tab>
 		<paper-tab>Spellbook</paper-tab>
+		<paper-tab>Persona</paper-tab>
 		<paper-tab>Journal</paper-tab>
 	</paper-tabs>
 
 	<core-animated-pages selected={{selectedTab}} transitions="slide-from-right">
 		<div>{{> stats}}</div>
 		<div>features</div>
-		<div>persona</div>
 		<div>inventory</div>
 		<div>spellBook</div>
+		<div>persona</div>
 		<div>journal</div>
 	</core-animated-pages>
 </template>
diff --git a/rpg-docs/client/views/character/skills/skills.css b/rpg-docs/client/views/character/skills/skills.css
new file mode 100644
index 00000000..42f3adf7
--- /dev/null
+++ b/rpg-docs/client/views/character/skills/skills.css
@@ -0,0 +1,48 @@
+.skillRow {
+	height: 32px;
+	display: flex;
+	align-items: center;
+}
+
+.profIcon{
+	display: inline-block;
+	width: 40px;
+	height: 26px;
+	background-size: contain;
+	background-repeat: no-repeat;
+
+	/*TODO fix the actual images and remove inversion*/
+	-webkit-filter: invert(100%);
+	opacity: 0.54;
+}
+
+.skillMod {
+	width: 20px;
+	text-align: right;
+}
+
+.skillName, .skillMod{
+	display: inline-block;
+	vertical-align: top; 
+	margin-right: 8px;
+}
+
+.fail.skillMod {
+	color: #D50000;
+}
+
+.advantage{
+	background-image: url(/png/advantage/greenUp.png);
+	background-size: contain;
+	background-repeat: no-repeat;
+}
+
+.disadvantage{
+	background-image: url(/png/advantage/redDown.png);
+	background-size: contain;
+	background-repeat: no-repeat;
+}
+
+td.conditionals::after{
+	content: "*";
+}
diff --git a/rpg-docs/client/views/character/SideAbilities/skills/skills.html b/rpg-docs/client/views/character/skills/skills.html
similarity index 52%
rename from rpg-docs/client/views/character/SideAbilities/skills/skills.html
rename to rpg-docs/client/views/character/skills/skills.html
index 7200eabf..40205c83 100644
--- a/rpg-docs/client/views/character/SideAbilities/skills/skills.html
+++ b/rpg-docs/client/views/character/skills/skills.html
@@ -14,13 +14,13 @@
 </template>
 
 <template name="skillRow">
-	<tr>
-		<td><div class="profIcon" style="background-image: url(/png/profIcons/{{profIcon skill}})"></div></td>
+	<div class="subhead skillRow">
+		<div class="profIcon" style="background-image: url(/png/profIcons/{{profIcon skill}})"></div>
 		{{#if failSkill}}
-		<td class="fail">fail</td>
+		<div class="fail skillMod">fail</div>
 		{{else}}
-		<td class="{{advantage}}">{{../skillMod skill}}</td>
+		<div class="{{advantage}} skillMod">{{../skillMod skill}}</div>
 		{{/if}}
-		<td class={{conditionals}}>{{name}}</td>
-	</tr>
+		<div class="{{conditionals}} skillName">{{name}}</div>
+	</div>
 </template>
\ No newline at end of file
diff --git a/rpg-docs/client/views/character/SideAbilities/skills/skills.js b/rpg-docs/client/views/character/skills/skills.js
similarity index 100%
rename from rpg-docs/client/views/character/SideAbilities/skills/skills.js
rename to rpg-docs/client/views/character/skills/skills.js
diff --git a/rpg-docs/client/views/general.css b/rpg-docs/client/views/general.css
deleted file mode 100644
index b8d60674..00000000
--- a/rpg-docs/client/views/general.css
+++ /dev/null
@@ -1,119 +0,0 @@
-root {
-  display: block;
-}
-
-body {
-  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
-  margin: 0;
-  overflow-x: hidden;
-}
-
-body.core-narrow {
-  padding: 8px;
-}
-
-.calculatedValue {
-  color: #021C33;
-  font-weight: bold;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-h1, .headline {
-  font-size: 24px;
-  font-weight: 400;
-  margin: 0;
-  color: #000;
-  color: rgba(0,0,0,0.87);
-  letter-spacing: 0;
-}
-
-h2, .title {
-  font-size: 20px;
-  font-weight: 500;
-  margin: 0;
-  color: #000;
-  color: rgba(0,0,0,0.87);
-  letter-spacing: 0.005;
-}
-
-h3, .subhead {
-  font-size: 16px;
-  font-weight: 400;
-  margin: 0;
-  color: #000;
-  color: rgba(0,0,0,0.87);
-  letter-spacing: 0.010;
-}
-
-.body2 {
-  font-size: 14px;
-  font-weight: 500;
-  color: #000;
-  color: rgba(0,0,0,0.87);
-  letter-spacing: 0.010;
-}
-
-p, .body1, body {
-  font-size: 14px;
-  font-weight: 400;
-  color: #000;
-  color: rgba(0,0,0,0.87);
-  letter-spacing: 0.010;
-}
-
-.caption{
-  font-size: 12px;
-  font-weight: 400;
-  color: #000;
-  color: rgba(0,0,0,0.54);
-  letter-spacing: 0.020;
-}
-
-hr {
-  background-color: #444;
-  opacity: 0.12;
-  border-width: 0;
-  color: #444;
-  height: 1px;
-  line-height: 0;
-  margin: 0 -16px;
-  text-align: center;
-}
-
-paper-button {
-  font-size: 14px;
-  font-weight: 400;
-  text-transform: uppercase;
-  color: #000;
-  color: rgba(0,0,0,0.87);
-  letter-spacing: 0.010;
-}
-
-.card {
-  width: 148px;
-  margin: 4px;
-  padding: 16px;
-  font-size: 14px;
-  border-radius: 2px;
-  background-color: white;
-}
-
-.card.double {
-  width: 304px;
-}
-
-.card paper-button {
-  font-size: 14px;
-  letter-spacing: 0.01em;
-}
-
-.grey-background, body {
-  background-color: #E0E0E0;
-}
-
-.center {
-  text-align: center;
-}