Prefix all CSS class names

To avoid conflicts with external style sheets like bootstrap

generator/css/cards.css

@@ -1,8 +1,3 @@
-.bg-color {
-    background-color: #600a15;
-    color: white;
-}
-
 .card {
     width:66mm;
     min-width:66mm;
@@ -16,7 +11,7 @@
     font-size: 8pt;
 }
 
-.content-container {
+.card-content-container {
     padding:2mm;
     padding-top:1mm;
     border-radius: 2mm;
@@ -50,7 +45,7 @@
     align-items: center;
 }
 
-.back-icon {
+.card-back-icon {
     width: 30mm;
     height: 30mm;
     border: 4mm solid;
@@ -60,7 +55,7 @@
     background-size: contain;
 }
 
-.title-icon {
+.card-title-icon {
     width: 12mm;
     height: 12mm;
     background-repeat: no-repeat;
@@ -68,7 +63,7 @@
     background-color: inherit;
     border-color: inherit;
 }
-.title-icon-container {
+.card-title-icon-container {
     position: absolute;
     right: -1mm;
     top: -1mm;
@@ -78,7 +73,7 @@
     border-color: inherit;
 }
 
-.title-inlineicon {
+.card-title-inlineicon {
     width: 7mm;
     height: 7mm;
     background-repeat: no-repeat;
@@ -86,7 +81,7 @@
     background-color: inherit;
     border-color: inherit;
 }
-.title-inlineicon-container {
+.card-title-inlineicon-container {
     position: absolute;
     right: -1mm;
     top: -1mm;
@@ -96,7 +91,7 @@
     border-color: inherit;
 }
 
-.title {
+.card-title {
     height: 8mm;
     padding-left: 2mm;
     font-family: Lora, 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
@@ -105,24 +100,24 @@
     background-color: inherit;
     color: white;
 }
-.title-big {
+.card-title-big {
     font-size: 6mm;
     line-height: 6mm;
 }
-.title-normal {
+.card-title-normal {
     font-size: 5mm;
     line-height: 6mm;
 }
-.title-small {
+.card-title-small {
     font-size: 4mm;
     line-height: 6.5mm;
 }
-.title-tiny {
+.card-title-tiny {
     font-size: 3.5mm;
     line-height: 6.75mm;
 }
 
-.subtitle {
+.card-subtitle {
     height: 18px;
     line-height: 18px;
     margin-bottom: 1mm;
@@ -131,19 +126,19 @@
     font-style: italic;
 }
 
-.property-line {
+.card-property-line {
     text-indent: -1em;
     margin-left: 1em;
 }
 
-.property-name {
+.card-property-name {
     display: inline;
 }
-.property-text {
+.card-property-text {
     display: inline;
 }
 
-h3 {
+.card-section {
     border-bottom: 1px solid;
     font-size: 10pt;
     font-variant: small-caps;
@@ -154,24 +149,24 @@ h3 {
     border-color: inherit;
 }
 
-p {
+.card-p {
     margin-top: 0.0em;
     margin-bottom: 0.5em;
 }
 
-.fill {flex:1;}
+.card-fill {flex:1;}
 
-.description-line {
+.card-description-line {
     margin-bottom: 0.5em;
 }
-.description-name {
+.card-description-name {
     display: inline;
 }
-.description-text {
+.card-description-text {
     display: inline;
 }
 
-.ruler {
+.card-ruler {
     width: 100%;
     height: 1.0mm;
     margin-top: 0.5em;

generator/css/page.css

@@ -24,6 +24,13 @@ page[size="A4"] {
     box-shadow: 0;
     background-color: white;
   }
+  #input-container {
+      display: none;
+  }
+  #output-container {
+      margin: 0;
+      padding: 0;
+  }
 }
 
 .input-button {

generator/js/cards.js

@@ -44,7 +44,7 @@ function card_data_split_params(value) {
 function card_element_title(card_data, options) {
     var title = card_data.title || "";
     var title_size = card_data.title_size || options.default_title_size || 'normal';
-    return '<div class="title title-' + title_size + '">' + title + '</div>';
+    return '<div class="card-title card-title-' + title_size + '">' + title + '</div>';
 }
 
 function card_element_icon(card_data, options) {
@@ -55,8 +55,8 @@ function card_element_icon(card_data, options) {
     }
 
     var result = "";
-    result += '<div class="title-'+classname+'-container">';
-    result += '    <div class="title-' + classname + ' icon-' + icon + '">';
+    result += '<div class="card-title-' + classname + '-container">';
+    result += '    <div class="card-title-' + classname + ' icon-' + icon + '">';
     result += '    </div>';
     result += '</div>';
     return result;
@@ -64,7 +64,7 @@ function card_element_icon(card_data, options) {
 
 function card_element_subtitle(params, card_data, options) {
     var subtitle = params[0] || "";
-    return '<div class="subtitle">' + subtitle + '</div>';
+    return '<div class="card-subtitle">' + subtitle + '</div>';
 }
 
 function card_element_ruler(params, card_data, options) {
@@ -73,7 +73,7 @@ function card_element_ruler(params, card_data, options) {
     var stroke = 'stroke="' + color + '"';
 
     var result = "";
-    result += '<svg class="ruler" height="1" width="100" viewbox="0 0 100 1" preserveaspectratio="none" xmlns="http://www.w3.org/2000/svg">';
+    result += '<svg class="card-ruler" height="1" width="100" viewbox="0 0 100 1" preserveaspectratio="none" xmlns="http://www.w3.org/2000/svg">';
     result += '    <polyline points="0,0 100,0.5 0,1" ' + fill + '></polyline>';
     result += '</svg>';
     return result;
@@ -81,26 +81,26 @@ function card_element_ruler(params, card_data, options) {
 
 function card_element_property(params, card_data, options) {
     var result = "";
-    result += '<div class="property-line">';
-    result += '   <h4 class="property-name">' + params[0] + '</h4>';
-    result += '   <p class="property-text">' + params[1] + '</p>';
+    result += '<div class="card-property-line">';
+    result += '   <h4 class="card-property-name">' + params[0] + '</h4>';
+    result += '   <p class="card-p card-property-text">' + params[1] + '</p>';
     result += '</div>';
     return result;
 }
 
 function card_element_description(params, card_data, options) {
     var result = "";
-    result += '<div class="description-line">';
-    result += '   <h4 class="description-name">' + params[0] + '</h4>';
-    result += '   <p class="description-text">' + params[1] + '</p>';
+    result += '<div class="card-description-line">';
+    result += '   <h4 class="card-description-name">' + params[0] + '</h4>';
+    result += '   <p class="card-p card-description-text">' + params[1] + '</p>';
     result += '</div>';
     return result;
 }
 
 function card_element_text(params, card_data, options) {
     var result = "";
-    result += '<div class="description-line">';
-    result += '   <p class="description-text">' + params[0] + '</p>';
+    result += '<div class="card-description-line">';
+    result += '   <p class="card-p card-description-text">' + params[0] + '</p>';
     result += '</div>';
     return result;
 }
@@ -108,12 +108,12 @@ function card_element_text(params, card_data, options) {
 function card_element_section(params, card_data, options) {
     var color = card_data_color_front(card_data, options);
     var section = params[0] || "";
-    return '<h3 style="color:' + color + '">' + section + '</h3>';
+    return '<h3 class="card-section" style="color:' + color + '">' + section + '</h3>';
 }
 
 function card_element_fill(params, card_data, options) {
     var flex = params[0] || "1";
-    return '<div class="fill" style="flex:' + flex + '"></div>';
+    return '<div class="card-fill" style="flex:' + flex + '"></div>';
 }
 
 function card_element_unknown(params, card_data, options) {
@@ -136,7 +136,7 @@ var card_element_generators = {
 
 function card_generate_contents(contents, card_data, options) {
     var result = "";
-    result += '<div class="content-container">';
+    result += '<div class="card-content-container">';
     result += contents.map(function (value) {
         var parts = card_data_split_params(value);
         var element_name = parts[0];
@@ -194,7 +194,7 @@ function card_generate_back(data, options) {
     result += '<div class="card" ' + style_color + '>';
     result += '  <div class="card-back" ' + style_gradient + '>';
     result += '    <div class="card-back-inner">';
-    result += '      <div class="back-icon icon-' + icon + '" ' + style_color + '></div>';
+    result += '      <div class="card-back-icon icon-' + icon + '" ' + style_color + '></div>';
     result += '    </div>';
     result += '  </div>';
     result += '</div>';