fix font size for text cards

css/flippy.css

@@ -66,7 +66,6 @@ flippy.fancy {
   float: left;
   margin: 0 10px 10px 0;
   position: relative;
-  font-size: .8em;
   cursor: pointer;
 }
 

css/pexeso.css

@@ -6,7 +6,6 @@ body {
 
 #mainContent {
 	font-family: Arial, Helvetica, sans-serif;
-	font-size: xx-large;
 	font-weight: bold;
 	border-radius: 4px;
 	
@@ -57,4 +56,12 @@ body {
 
 #levelTitle {
 	float:right;
-}
+}
+
+.textCard {
+	height: 100%;
+}
+
+.textCardLabel {
+	margin-top: 15%;
+}

index.html

@@ -68,7 +68,7 @@
     
             <flippy-back>
                 <span class="cardHelper" ng-show="card.cardType == 'picture'"></span><img ng-src="img/cards/{{card.image}}.png" ng-show="card.cardType == 'picture'">
-                <div ng-hide="card.cardType == 'picture'">{{card.label}}</div>
+                <div class="textCard" ng-hide="card.cardType == 'picture'"><div class="textCardLabel">{{card.label}}</div></div>
             </flippy-back>
             
     

js/level-data-service.js

@@ -55,7 +55,7 @@ var basicCards = {
 var mathCards = {
     'zero': {
         'arabic': '0',
-        'roman': 'nulla',
+        'roman': ' ',
         'math': '1-1',
         'japanese': '〇'
     },

js/pexeso-controller.js

@@ -332,9 +332,16 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete'])
      */
     $scope.computeCardSize = function(cardsPerRow) {
         var cardSize = Math.floor(Math.min(window.innerWidth, window.innerHeight) / cardsPerRow) - 20;
+        
+        var fontSize = Math.floor(cardSize * 0.6);
+        if (fontSize < 12) {
+            fontSize = 12;
+        }
+        
         $scope.cardStyle = {
             width: cardSize + "px",
-            height: cardSize + "px"
+            height: cardSize + "px",
+            "font-size": fontSize + "px"
         };
         
         var paddingLeft = Math.floor((window.innerWidth - (cardSize + 10) * cardsPerRow) / 2);