sc: separate css to external file

diff --git a/sc.css b/sc.css
new file mode 100644 (file)
index 0000000..f85e7ac
--- /dev/null
+++ b/sc.css
@@ -0,0 +1,104 @@
+.units {
+       border-collapse: separate;
+       border-spacing: 0;
+       margin: 0 auto;
+       white-space: nowrap;
+}
+.units th, .units td {
+       border: 0;
+       padding: 0 0.2em;
+       background: transparent;
+       text-align: left;
+}
+tr.alt td {
+       font-size: 70%;
+       padding-left: 0.5em;
+}
+.units tr th:first-child {
+       padding-left: 0;
+}
+.units tbody tr:hover:not(.race) {
+       background: #EEE;
+}
+
+table h2 {
+       padding: 1ex 0;
+       margin: 0;
+       text-align: center;
+}
+.units thead th, .units tfoot th {
+       font-size: 70%;
+       font-weight: normal;
+}
+
+.unit-o {color: #C08} /* organic */
+.unit-u {color: #44C} /* mechanic */
+.unit-composed {
+       color: #C88;
+       font-size: 70%;
+}
+.unit.unit-s {color: #770}
+.unit.unit-m {color: #C70}
+.unit.unit-l {color: #D22}
+.hurt.unit-s::before {
+       content: '~';
+       color: #773;
+}
+.hurt.unit-l::before {
+       content: '*';
+       color: #C66;
+}
+.hurt .unit-splash {
+       position: absolute;
+}
+.hurtrel, .units .hurtrel {
+       padding-left: 1em;
+       font-size: 70%;
+       color: #778;
+}
+.unit-splash {
+       color: #4A0;
+}
+.unit-detect::before {
+       content: '!';
+       color: #0A8;
+       font-size: 70%;
+       vertical-align: super;
+}
+.unit-magic {
+       padding-left: 0.5em;
+}
+.magic-perma {
+       text-decoration: underline;
+}
+
+.units .val {
+       white-space: nowrap;
+       text-align: right;
+}
+
+.legend dt {
+       float: none;
+       text-align: left;
+       margin-top: 1ex;
+       font-weight: bold;
+}
+.legend dd:before {
+       content: '• ';
+}
+.legend dd {
+       text-indent: -1em;
+       margin-left: 1em;
+}
+
+.legend {
+       display: table-cell;
+       min-width: 20em;
+       text-align: left;
+}
+.units {
+       float: left;
+       padding-bottom: 1em;
+       margin-right: 2em;
+}
+

diff --git a/sc.plp b/sc.plp
index 5607a9a236f076e4ea4adefccb6e0aeb4df1b325..4706bbfb15f51df2d63a929de5d382a9fc5ee99b 100644 (file)
--- a/sc.plp
+++ b/sc.plp
@@ -18,6 +18,7 @@ Html({
                reference software attributes properties
        '],
        stylesheet => [qw'light'],
+       raw => '<link rel="stylesheet" type="text/css" media="all" href="/sc.css?1.1" title="light">',
        data => [$datafile],
 });
 
@@ -29,112 +30,6 @@ Unit properties as seen or measured in Brood War
 <span title="no known changes as of v1.16.1">version≥1.08</span>.
 </p>
 
-<style type="text/css">
-       .units {
-               border-collapse: separate;
-               border-spacing: 0;
-               margin: 0 auto;
-               white-space: nowrap;
-       }
-       .units th, .units td {
-               border: 0;
-               padding: 0 0.2em;
-               background: transparent;
-               text-align: left;
-       }
-       tr.alt td {
-               font-size: 70%;
-               padding-left: 0.5em;
-       }
-       .units tr th:first-child {
-               padding-left: 0;
-       }
-       .units tbody tr:hover:not(.race) {
-               background: #EEE;
-       }
-
-       table h2 {
-               padding: 1ex 0;
-               margin: 0;
-               text-align: center;
-       }
-       .units thead th, .units tfoot th {
-               font-size: 70%;
-               font-weight: normal;
-       }
-
-       .unit-o {color: #C08} /* organic */
-       .unit-u {color: #44C} /* mechanic */
-       .unit-composed {
-               color: #C88;
-               font-size: 70%;
-       }
-       .unit.unit-s {color: #770}
-       .unit.unit-m {color: #C70}
-       .unit.unit-l {color: #D22}
-       .hurt.unit-s::before {
-               content: '~';
-               color: #773;
-       }
-       .hurt.unit-l::before {
-               content: '*';
-               color: #C66;
-       }
-       .hurt .unit-splash {
-               position: absolute;
-       }
-       .hurtrel, .units .hurtrel {
-               padding-left: 1em;
-               font-size: 70%;
-               color: #778;
-       }
-       .unit-splash {
-               color: #4A0;
-       }
-       .unit-detect::before {
-               content: '!';
-               color: #0A8;
-               font-size: 70%;
-               vertical-align: super;
-       }
-       .unit-magic {
-               padding-left: 0.5em;
-       }
-       .magic-perma {
-               text-decoration: underline;
-       }
-
-       .units .val {
-               white-space: nowrap;
-               text-align: right;
-       }
-
-       .legend dt {
-               float: none;
-               text-align: left;
-               margin-top: 1ex;
-               font-weight: bold;
-       }
-       .legend dd:before {
-               content: '• ';
-       }
-       .legend dd {
-               text-indent: -1em;
-               margin-left: 1em;
-       }
-
-       .legend {
-               display: table-cell;
-               min-width: 20em;
-               text-align: left;
-       }
-       .units {
-               float: left;
-               padding-bottom: 1em;
-               margin-right: 2em;
-       }
-</style>
-
 <:
 sub coltoggle {
        my ($name, $id) = @_;