wip

generator/components/rpg-card.html

 <template id="rpg-card">
     <style type='text/css'>
         :host {
-            /* Fill the whole area of the shadow root */
-            width: 100%;
-            height: 100%;
             /* Border */
             padding: 6px;
             border-radius: 4px;
     <style type='text/css' id="color-style">
     </style>
 
+    <style type='text/css' id="card-size">
+        :host{width: 2.5in;height: 3.5in;}
+    </style>
+
     <content></content>
 
 </template>
                 ";
             }
         });
+        Object.defineProperty(proto, "size", {
+            get: function () {
+                return "";
+            },
+            set: function (value) {
+                var root = this.shadowRoot;
+                var style = root.getElementById("card-size");
+                switch (value) {
+                    case "full": style.innerHTML = ":host{width:100%;height:100%;}"; break;
+                    case "25x35": style.innerHTML = ":host{width: 2.5in;height: 3.5in;}"; break;
+                    case "225x35": style.innerHTML = ":host{width: 2.25in;height: 3.5in;}"; break;
+                    case "25x50": style.innerHTML = ":host{width: 2.5in;height: 5.0in;}"; break;
+                    case "35x50": style.innerHTML = ":host{width: 3.5in;height: 5.0in;}"; break;
+                    case "75x50": style.innerHTML = ":host{width: 7.5in;height: 5.0in;}"; break;
+                }
+                
+            }
+        });
         proto.createdCallback = function () {
             var template = importDoc.getElementById(elemName);
             var clone = mainDoc.importNode(template.content, true);
             root.appendChild(clone);
 
             this.color = this.getAttribute('color') || "black";
+            this.size = this.getAttribute('size') || "25x35";
         }
         proto.attributeChangedCallback = function (name, oldValue, newValue) {
             switch (name) {
                 case "color": this.color = newValue; break;
+                case "size": this.size = newValue; break;
             }
         }
 

generator/js/cards.js

     result += ' int="' + (parseInt(params[3], 10) || "") + '"';
     result += ' wis="' + (parseInt(params[4], 10) || "") + '"';
     result += ' cha="' + (parseInt(params[5], 10) || "") + '"';
-    result += '><card-dndstats>';
+    result += '></card-dndstats>';
     return result;
 }
 
     var color = card_data_color_front(data, options);
 
     var result = "";
-    result += '<rpg-card color="' + color + '" class="card-size-' + options.card_size + '">';
+    result += '<rpg-card color="' + color + '" size="' + options.card_size + '">';
     result += card_element_title(data, options);
     result += card_generate_contents(data.contents, data, options);
     result += '</rpg-card>';
     var icon = card_data_icon_back(data, options) + ".svg";
 
     var result = "";
-    result += '<rpg-card color="' + color + '">';
+    result += '<rpg-card color="' + color + '" size="' + options.card_size + '">';
     result += '   <card-back>';
     result += '       <card-icon src="/icons/' + icon + '"></card-icon>';
     result += '   </card-back>';
     var style_color = card_generate_color_style("white");
 
     var result = "";
-    result += '<rpg-card color="' + color + '">';
+    result += '<rpg-card color="' + color + '" size="' + options.card_size + '">';
     result += '</rpg-card>';
     return card_repeat(result, count);
 }

generator/output.html

     <script type="text/javascript" src="js/output.js"></script>
     <!-- CSS -->
     <link rel=" stylesheet" type="text/css" href="css/output.css">
-    <link rel="stylesheet" type="text/css" href="css/cards.css">
     <link rel="stylesheet" type="text/css" href="css/card-size.css">
-    <link rel="stylesheet" type="text/css" href="css/icons.css">
-    <link rel="stylesheet" type="text/css" href="css/custom-icons.css">
-    <!-- Fonts -->
-    <link href='https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
-    <link href='https://fonts.googleapis.com/css?family=Lora:700' rel='stylesheet' type='text/css'>
+    <!-- Components -->
+    <link rel="import" href="components/card.html">
 </head>
 <body class="page-background">
 </body>