From: Mischa POSLAWSKY <perl@shiar.org>
Date: Fri, 26 Mar 2010 00:10:34 +0000 (+0000)
Subject: sc: adjust styling to better fit this site
X-Git-Tag: v1.3~18
X-Git-Url: http://git.shiar.nl/sheet.git/commitdiff_plain/864eed9b3a51a0a7c0f21f7cf1fdf78c4b937676

sc: adjust styling to better fit this site
---

diff --git a/sc.plp b/sc.plp
index 7ae2805..cd07f24 100644
--- 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>