wip

generator/components-test.html

@@ -62,6 +62,64 @@
                     <h4>Components</h4>
                     <p>V,S,Some obscure long named material</p></card-property>
                 <card-rule></card-rule>
+                <card-fill size="1"></card-fill>
+                <card-description>
+                    <h4>Effect</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-vspace></card-vspace>
+                <card-description>
+                    <h4>Ignite</h4>
+                    <p>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-contents>
+        </rpg-card>
+        <rpg-card class="card-size-25x35" color="maroon">
+            <card-title>
+                <h1>Burning Hands</h1>
+                <!--
+                <h2>1</h2>
+                <card-icon src="./icons/book-cover.svg"></card-icon>
+                -->
+            </card-title>
+            <card-contents style="flex: 0 1 auto">
+                <!--
+                <card-subtitle>1st level evocation</card-subtitle>
+                <div style="display:block; width:100%; height:1px; background-color:maroon; margin-top:4px; margin-bottom:4px"></div>
+                -->
+                <div style="display:flex; flex-direction:row">
+                    <div style="flex:0 1 auto; width:24px; height:24px; vertical-align:top; border:2px solid; border-radius:4px">
+                        <card-icon src="./icons/gears.svg"></card-icon>
+                    </div>
+                    <div style="flex:1 1 0px; padding-left:4px; height:24px; vertical-align:top; border:0px solid; border-radius:4px; text-align:left">
+                        Casting Time<br/>1 action
+                    </div>
+                    <div style="flex:1 1 0px; padding-right:4px; height:24px; vertical-align:top; border:0px solid; border-radius:4px; text-align:right">
+                        Range<br/>Self (15ft cone)
+                    </div>
+                    <div style="flex:0 1 auto; width:24px; height:24px; vertical-align:top; border:2px solid; border-radius:4px">
+                        <card-icon src="./icons/gears.svg"></card-icon>
+                    </div>
+                </div>
+                <div style="display:block; width:100%; height:4px"></div>
+                <div style="display:flex; flex-direction:row">
+                    <div style="flex:0 1 auto; width:24px; height:24px; vertical-align:top; border:2px solid; border-radius:4px">
+                        <card-icon src="./icons/gears.svg"></card-icon>
+                    </div>
+                    <div style="flex:1 1 0px; padding-left:4px; height:24px; vertical-align:top; border:0px solid; border-radius:4px; text-align:left">
+                        Components<br/>V,S,M
+                    </div>
+                    <div style="flex:1 1 0px; padding-right:4px; height:24px; vertical-align:top; border:0px solid; border-radius:4px; text-align:right">
+                        Duration<br/>&lt;10min
+                    </div>
+                    <div style="flex:0 1 auto; width:24px; height:24px; vertical-align:top; border:2px solid; border-radius:4px">
+                        <card-icon src="./icons/gears.svg"></card-icon>
+                    </div>
+                </div>
+            </card-contents>
+            <div style="height:6px"></div>
+            <card-contents>
                 <card-fill size="1"></card-fill>
                 <card-description>
                     <h4>Mechanics</h4>
@@ -73,6 +131,9 @@
                 <card-section>At higher levels</card-section>
                 <card-description><p>+1d6 damage for each slot above 1st</p></card-description>
             </card-contents>
+            <div style="height:14px;color:white;padding-top:4px">
+                1st level evocation
+            </div>
         </rpg-card>
         <rpg-card class="card-size-25x35" color="maroon">
             <card-title>