wip

generator/components-test.html

             <card-icon src="/icons/lorc/originals/svg/book-cover.svg"></card-icon>
         </card-title>
         <card-contents>
-            <card-subtitle>Mage spell</card-subtitle>
+            <card-subtitle>1st level evocation</card-subtitle>
             <card-rule></card-rule>
             <card-property><h4>Casting time</h4><p>1 action</p></card-property>
             <card-property><h4>Range</h4><p>Self (15ft cone)</p></card-property>
             <card-property><h4>Components</h4><p>V,S,Some obscure long named material</p></card-property>
             <card-rule></card-rule>
-            <card-description><h4>Mechanics</h4><p>Each creature in a 15-foot cone must make a Dexterity saving throw. A creature takes 3d6 fire damage on a failed save, or half as much damage on a successful one.</p></card-description>
+            <card-description><h4>Mechanics</h4><p>Each creature in a 15-foot cone must make a Dexterity saving throw. A creature takes <b>3d6 fire damage</b> on a failed save, or half as much damage on a successful one.</p></card-description>
+            <card-description><h4>Ignite</h4><p>The fire ignites any flammable objects in the area that aren't being worn or carried.</p></card-description>
             <card-fill size="2"></card-fill>
             <card-section>At higher levels</card-section>
             <card-description><p>+1d6 damage for each slot above 1st</p></card-description>
     <card-front class="card-size-25x35" color="saddlebrown">
         <card-title>
             <h1>Brown bear</h1>
-            <h2>1</h2>
+            <h2>2</h2>
             <card-icon src="/icons/lorc/originals/svg/pawprint.svg"></card-icon>
         </card-title>
         <card-contents>
             <card-subtitle>Medium beast</card-subtitle>
             <card-rule></card-rule>
-            <card-property>Test</card-property>
+            <card-property><h4>Armor class</h4><p>12 (natural armor)</p></card-property>
+            <card-property><h4>Hit points</h4><p>7 (2d6)</p></card-property>
+            <card-rule></card-rule>
+            <card-fill size="2"></card-fill>
         </card-contents>
+        <card-title>
+            <h1>Druid thingy</h1>
+            <card-icon src="/icons/lorc/originals/svg/stag-head.svg"></card-icon>
+        </card-title>
     </card-front>
 </body>
 </html>

generator/components/card-contents.html

 <template id="card-contents">
     <style>
-
         :host {
             padding: 6px;
+            padding-top: 4px;
             border-radius: 6px;
             background-color: white;
             border-color: inherit;
             flex: 1;
             font-size: inherit;
         }
-
     </style>
 
     <content></content>

generator/components/card-description.html

 
 <template id="card-description">
     <style>
-        div {
+        :host {
             margin-top: 0.5em;
             margin-bottom: 0.0em;
             font-size: inherit;
         }
     </style>
 
-    <div>
-        <content></content>
-    </div>
+    <content></content>
 </template>
 
 <script>

generator/components/card-front.html

             font-size: 8pt;
         }
 
-        ::content > card-title {
+        ::content > card-title:first-child {
             margin-top: -3px;
             margin-bottom: 3px;
         }
+
+        ::content > card-title:last-child {
+            margin-top: 3px;
+            margin-bottom: -3px;
+        }
     </style>
 
     <style type='text/css' id="color-style">

generator/components/card-property.html

 
 <template id="card-property">
     <style>
-        div {
+        :host {
             /* Indenting everything EXCEPT the first line. */
             text-indent: -1em;
             margin-left: 1em;
         }
     </style>
 
-    <div>
-        <content></content>
-    </div>
+    <content></content>
+
 </template>
 
 <script>

generator/components/card-rule.html

 
 <template id="card-rule">
     <style>
+        :host {
+            line-height: 0pt;
+            margin-top: 3px;
+            margin-bottom: 3px;
+        }
         #rule {
             width: 100%;
             height: 4px;
-            margin-top: 3px;
-            margin-bottom: 3px;
         }
     </style>