New design on cards
This changes the layout drastically, pooling stats together in a single black bar on the card This change also adds icons instead of text for certain stats. There is also some cleanup.
This commit is contained in:
+72
-43
@@ -31,27 +31,24 @@
|
||||
|
||||
article {
|
||||
margin: 0.1mm 0.1mm;
|
||||
display: block;
|
||||
float: left;
|
||||
width: 5.6cm;
|
||||
height: 8.9cm;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 5fr 2fr;
|
||||
grid-template-rows: 2em 18mm 1.3em auto 1.5em;
|
||||
grid-template-rows: 2em 18mm 2.5em auto;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"figure figure"
|
||||
"cost cost"
|
||||
"info info"
|
||||
"power cp";
|
||||
"header"
|
||||
"figure"
|
||||
"bar"
|
||||
"info";
|
||||
|
||||
border-radius: 2mm;
|
||||
grid-gap: 1.5mm 1.5mm;
|
||||
border-style: solid;
|
||||
border-width: 2mm;
|
||||
border-color: #333;
|
||||
background-color: #333;
|
||||
border-color: #4a4a4a;
|
||||
background-color: #4a4a4a;
|
||||
cursor: pointer;
|
||||
}
|
||||
article.effects {
|
||||
@@ -59,9 +56,8 @@ article.effects {
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"figure effects"
|
||||
"cost cost"
|
||||
"info info"
|
||||
"power cp";
|
||||
"bar bar"
|
||||
"info info";
|
||||
}
|
||||
|
||||
article >* {
|
||||
@@ -82,7 +78,9 @@ article h1 {
|
||||
|
||||
article figure {
|
||||
grid-area: figure;
|
||||
background: none;
|
||||
background: #2f2f2f;
|
||||
border-radius: 0;
|
||||
margin: -1.5mm 1.5mm;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -90,8 +88,9 @@ article figure * {
|
||||
color: #999;
|
||||
}
|
||||
article figure img{
|
||||
padding: 1mm 0;
|
||||
display: block;
|
||||
height: 97%;
|
||||
height: calc(100% - 2mm);
|
||||
margin: auto auto;
|
||||
}
|
||||
article figure img.svg_filter{
|
||||
@@ -103,20 +102,75 @@ article figure img.svg_filter{
|
||||
article figure .mdi,
|
||||
article figure .fa,
|
||||
article figure .material-icons.figure {
|
||||
font-size: 1.7cm;
|
||||
line-height: 1.7cm;
|
||||
padding: 1mm 0;
|
||||
font-size: 19mm;
|
||||
line-height: 19mm;
|
||||
}
|
||||
|
||||
article ul {
|
||||
grid-area: effects;
|
||||
list-style-type: none;
|
||||
padding: 1mm 0;
|
||||
margin-left: -1.5mm;
|
||||
}
|
||||
|
||||
article section {
|
||||
grid-area: bar;
|
||||
background-color: #111;
|
||||
border-radius: 0;
|
||||
margin: 0 -2mm;
|
||||
color: #eee;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
article section .cost {
|
||||
align-self: center;
|
||||
margin: 0 1.5mm;
|
||||
line-height: 1.25em;
|
||||
}
|
||||
article section .costunit,
|
||||
article section .power,
|
||||
article section .cp,
|
||||
article section .gp {
|
||||
flex: none;
|
||||
padding-top: 1mm;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
line-height: 0.8em;
|
||||
margin: 0 1mm;
|
||||
}
|
||||
article section >* small {
|
||||
font-size: 0.8em;
|
||||
line-height: 0.8em;
|
||||
}
|
||||
|
||||
article section .fa,
|
||||
article section .mdi,
|
||||
article section .material-icons.figure {
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
article section .costunit small {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
article section >*:after {
|
||||
font-size: 0.5em;
|
||||
line-height: 0.8em;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
article section .power:after { content: "\APOWER";}
|
||||
article section .cp:after { content: "\A CP "; }
|
||||
article section .gp:after { content: "\AGold"; }
|
||||
|
||||
|
||||
article main {
|
||||
padding: 2mm 1mm;
|
||||
grid-area: info;
|
||||
position: relative;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
article main ol {
|
||||
margin-top: 1mm;
|
||||
@@ -127,7 +181,7 @@ article main ol li + li{
|
||||
margin-top: 0.5mm;
|
||||
}
|
||||
article main big{
|
||||
font-size: 1.5em;
|
||||
font-size: 1.65em;
|
||||
}
|
||||
article main .bottom {
|
||||
width: 100%;
|
||||
@@ -136,31 +190,6 @@ article main .bottom {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
article .power {
|
||||
grid-area: power;
|
||||
text-align: left;
|
||||
}
|
||||
article .power:before{
|
||||
content: "Power: ";
|
||||
font-size: 0.7em;
|
||||
}
|
||||
article .cost {
|
||||
grid-area: cost;
|
||||
}
|
||||
article .cp,
|
||||
article .gp {
|
||||
grid-area: cp;
|
||||
text-align: right;
|
||||
}
|
||||
article .cp:after{
|
||||
content: " CP";
|
||||
font-size: 0.7em;
|
||||
}
|
||||
article .gp:after{
|
||||
content: " Gold";
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
center.message {
|
||||
font-size: 1.3em;
|
||||
position: absolute;
|
||||
|
||||
+53
-15
@@ -33,26 +33,72 @@
|
||||
</big>
|
||||
#end
|
||||
#end
|
||||
#macro(statIcons $text)
|
||||
#foreach($word in $text.split())
|
||||
#if($word == "BODY")
|
||||
<i class="mdi mdi-human"></i>
|
||||
#elseif($word == "TEC")
|
||||
<i class="fa fa-wrench"></i>
|
||||
#elseif($word == "MAG")
|
||||
<i class="fa fa-magic"></i>
|
||||
#elseif($word == "ATT")
|
||||
<small>ATT</small>
|
||||
#else
|
||||
$word
|
||||
#end
|
||||
#end
|
||||
#end
|
||||
#macro(handleCostUnit $cost $match)
|
||||
<div class="costunit">
|
||||
$escape_html($strip_unit($cost, $match))<br/>
|
||||
<small>$escape_html($match)</small>
|
||||
</div>
|
||||
#end
|
||||
|
||||
<title>Cards</title>
|
||||
|
||||
#foreach($card in $cards)
|
||||
<article #if($card.effects) class="effects"#end onclick="location.href='creator?filename=$escape_html($card.filename)'">
|
||||
<h1>
|
||||
$escape_html($card.title)
|
||||
</h1>
|
||||
<h1>$escape_html($card.title)</h1>
|
||||
<figure>
|
||||
#figure($card)
|
||||
</figure>
|
||||
#if($card.effects)
|
||||
<ul>
|
||||
#foreach($item in $card.effects)
|
||||
#if($item)
|
||||
<li>$escape_html($item)</li>
|
||||
#foreach($effect in $card.effects)
|
||||
#if($effect)
|
||||
<li>$escape_html($effect)</li>
|
||||
#end
|
||||
#end
|
||||
</ul>
|
||||
#end
|
||||
|
||||
<section>
|
||||
#if($card.cp)
|
||||
<div class="cp">$escape_html($card.cp)</div>
|
||||
#elseif($card.gp)
|
||||
<div class="gp">$escape_html($card.gp)</div>
|
||||
#end
|
||||
#foreach($cost in $card.cost.split(","))
|
||||
#if($cost.upper().endswith(" ACT"))
|
||||
#handleCostUnit($cost, "ACT")
|
||||
#elseif($cost.upper().endswith(" OVERDRIVE"))
|
||||
#handleCostUnit($cost, "OVERDRIVE")
|
||||
#elseif($cost.upper().endswith(" COMBO"))
|
||||
#handleCostUnit($cost, "COMBO")
|
||||
#elseif($cost.upper().endswith(" DIFFICULTY"))
|
||||
#handleCostUnit($cost, "DIFFICULTY")
|
||||
#else
|
||||
#if($cost.strip())
|
||||
<div class="cost">$escape_html($cost.split())</div>
|
||||
#end
|
||||
#end
|
||||
#end
|
||||
#if($card.power)
|
||||
<div class="power">#statIcons($escape_html($card.power))</div>
|
||||
#end
|
||||
</section>
|
||||
|
||||
<main>
|
||||
$escape_html($card.description)
|
||||
#if($card.steps)
|
||||
@@ -82,15 +128,7 @@
|
||||
</div>
|
||||
#end
|
||||
</main>
|
||||
<div class="cost">$escape_html($card.cost)</div>
|
||||
#if($card.power)
|
||||
<div class="power">$escape_html($card.power)</div>
|
||||
#end
|
||||
#if($card.cp)
|
||||
<div class="cp">$escape_html($card.cp)</div>
|
||||
#elseif($card.gp)
|
||||
<div class="gp">$escape_html($card.gp)</div>
|
||||
#end
|
||||
|
||||
</article>
|
||||
#end
|
||||
|
||||
|
||||
Reference in New Issue
Block a user