sc: adjust styling to better fit this site

diff --git a/sc.plp b/sc.plp
index 7ae2805fc58fad916c881d676dbce00c3311aeb6..cd07f24738ee01855005f40e3caeac490da6b36c 100644 (file)
--- a/sc.plp
+++ b/sc.plp
@@ -1,7 +1,7 @@
 <(common.inc.plp)><:
 
 Html({
-       title => 'starcraft unit cheat sheets',
+       title => 'starcraft unit cheat sheet',
        version => 'v1.0',
        description => [
                'Reference of StarCraft unit properties,'
@@ -16,7 +16,7 @@ Html({
 });
 
 :>
-<h1>StarCraft unit cheat sheet</h1>
+<h1>StarCraft units</h1>
 
 <p>
 Unit properties as seen or measured in Brood War
@@ -25,15 +25,15 @@ Unit properties as seen or measured in Brood War
 
 <style type="text/css">
        .units {
+               border-collapse: separate;
                border-spacing: 0;
-               width: auto;
+               margin: 0 auto;
        }
        .units th, .units td {
-               border-top: 1px solid #040;
+               border: 0;
                padding: 0 0.2em;
-       }
-       .units {
-               border-bottom: 1px solid #040;
+               background: transparent;
+               text-align: left;
        }
        tr.alt td {
                font-size: 70%;
@@ -43,31 +43,25 @@ Unit properties as seen or measured in Brood War
                padding-left: 0;
        }
        .units tr:hover:not(.race) {
-               background: #030;
+               background: #EEE;
        }
 
-       table h3 {
+       table h2 {
                padding: 1ex 0;
                margin: 0;
+               text-align: center;
        }
        .units th.cat {
                font-size: 70%;
                text-transform: uppercase;
        }
-       .units td.cat {
-               border: 0;
-       }
        .units thead th, .units tfoot th {
-               border: 0;
                font-size: 70%;
                font-weight: normal;
        }
-       thead + * + tbody tr:first-child th {
-               border: 0; /* border below thead */
-       }
 
-       .unit-o {color: #FF8080} /* organic */
-       .unit-u {color: #8080FF} /* mechanic */
+       .unit-o {color: #C08} /* organic */
+       .unit-u {color: #44C} /* mechanic */
        img.unit-o, img.unit-u {
                margin-left: 0.2em;
                vertical-align: middle;
@@ -76,16 +70,16 @@ Unit properties as seen or measured in Brood War
                text-align: center;
                white-space: nowrap;
        }
-       .unit.unit-s {color: #CC7}
-       .unit.unit-m {color: #D86}
-       .unit.unit-l {color: #D77}
+       .unit.unit-s {color: #770}
+       .unit.unit-m {color: #C70}
+       .unit.unit-l {color: #D22}
        .hurt.unit-s::before {
                content: '~';
-               color: #CC9;
+               color: #773;
        }
        .hurt.unit-l::before {
                content: '*';
-               color: #D88;
+               color: #C66;
        }
        .hurt .unit-splash {
                position: absolute;
@@ -93,14 +87,14 @@ Unit properties as seen or measured in Brood War
        .hurtrel, .units .hurtrel {
                padding-left: 1em;
                font-size: 70%;
-               color: #AAA;
+               color: #778;
        }
        .unit-splash {
-               color: #8C8;
+               color: #4A0;
        }
        .unit-detect::before {
                content: '!';
-               color: #4A4;
+               color: #0A8;
                font-size: 70%;
                vertical-align: super;
        }
@@ -108,9 +102,29 @@ Unit properties as seen or measured in Brood War
                padding-left: 0.5em;
        }
 
-       .val {
+       .units .val {
                text-align: right;
        }
+
+       .legend dl {
+               text-align: left;
+               -moz-column-width: 20em;
+               -webkit-column-width: 20em;
+       }
+       .legend dt {
+               margin-top: 1ex;
+               font-weight: bold;
+       }
+       .legend dd:before {
+               content: '• ';
+       }
+       .legend dd {
+               text-indent: -1em;
+               margin-left: 2em;
+               break-before: avoid;
+               break-inside: avoid;
+               -webkit-column-break-before: avoid;
+       }
 </style>
 
 <:
@@ -240,7 +254,7 @@ sub showrange {
        my ($race, $cat) = ('', '');
        for (@rows) {
                $race = $_->{race},
-               printf '</tbody><tbody id="%s"><tr class="race"><th colspan="18"><h2>%1$s</h2>'."\n", $race
+               printf '</tbody><tbody id="%s"><tr class="race"><th colspan="18"><h2>%s</h2>'."\n", $race, ucfirst $race
                        if $grouped and $race ne $_->{race};
                $_->{cat} = $_->{race} if not $grouped;
                my $sizechar = [qw/? s m l/]->[$_->{size}];
@@ -296,9 +310,10 @@ sub showrange {
 </tbody>
 </table>
 
+<div class="legend">
 <h2>Legend</h2>
 
-<dl class="compact">
+<dl>
 <dt>cost
        <dd>minerals+gas required to create one unit
 <dt>build
@@ -339,7 +354,7 @@ sub showrange {
        <dd>relative speed of movement (when in full motion, startup speed ignored)
 <dt>specials
        <dd>special abilities
-       <dd>parentheses () indicated that it needs to be researched first
+       <dd>parentheses () indicate that it needs to be researched first
        <dd>hover for description
        <dd>range is maximum range required to activate
        <dd>cost is percentage of total energy lost
@@ -350,28 +365,5 @@ When two values are given (1-2), second value indicates attribute after all
 possible upgrades.
 </p>
 
-<: exit :>
-<h2>Magic</h2>
-
-<ul class="maps"><:
-for (@$units) {
-       print '<li>', $_->{name};
-       print '<br>';
-#      my $units = {qw/protoss W  zerg B  terran R/}->{$_->{race}} x int($_->{unit} + .5);
-#      my $cost = int(($_->{min} + $_->{gas}) / 50 - $_->{unit}) || '';
-       my $units = {qw/protoss W  zerg B  terran R/}->{$_->{race}} x int($_->{gas} / 50) || '';
-       my $cost = int($_->{min} / 50) || 0;
-       my @desc;
-       push @desc, "Flying" if $_->{flying};
-       push @desc, "Cloaking" if $_->{cloak};
-       push @desc, "First Strike" if $_->{range} and $_->{range} >= 4;
-       my $att = $_->{attack}->{ground};
-       push @desc, "Trample" if $att and $att->{splash};
-       $att = $att->{damage} if $att;
-       $att = $att->[0] if ref $att eq "ARRAY";
-       $att = int($att / 5);
-       my $def = int($_->{hp} / 45);
-       printf "%s<br>%s<br>%s/%s", $cost . $units, join(",", @desc), $att, $def;
-}
-:></ul>
+</div>