index.xsl in cobench-0.0.4

- old
+ new
@@ -40,36 +40,58 @@
         <script type="text/javascript">
           $(function() {
             $("#metrics").tablesorter();
           });
         </script>
+        <style>
+          td, th { text-align: right; font-family: monospace; font-size: 18px; }
+          .left { border-bottom: 0; }
+          header { text-align: center; }
+          footer { text-align: center; font-size: 0.8em; }
+          article { width: 60em; border: 0; }
+          .sorter { cursor: pointer; }
+        </style>
       </head>
       <body>
-        <xsl:apply-templates select="cobench/coders"/>
-        <p>
-          <xsl:text>The page was generated by on </xsl:text>
-          <a href="https://github.com/yegor256/cobench">
-            <xsl:text>cobench</xsl:text>
-          </a>
-          <xsl:text> on </xsl:text>
-          <xsl:value-of select="cobench/@time"/>
-          <xsl:text>. The numbers you see reflect the activity of the last </xsl:text>
-          <b>
-            <xsl:value-of select="cobench/@days"/>
-            <xsl:text> days</xsl:text>
-          </b>
-          <xsl:text>.</xsl:text>
-        </p>
+        <section>
+          <header>
+            <p>
+              <img src="https://raw.githubusercontent.com/yegor256/cobench/master/logo.svg" style="width:64px"/>
+            </p>
+          </header>
+          <article>
+            <xsl:apply-templates select="cobench/coders"/>
+          </article>
+          <footer>
+            <p>
+              <xsl:text>The page was generated by </xsl:text>
+              <a href="https://github.com/yegor256/cobench">
+                <xsl:text>cobench</xsl:text>
+              </a>
+              <xsl:text> on </xsl:text>
+              <xsl:value-of select="cobench/@time"/>
+              <xsl:text>.</xsl:text>
+            </p>
+            <p>
+              <xsl:text>The numbers you see reflect the activity of the last </xsl:text>
+              <b>
+                <xsl:value-of select="cobench/@days"/>
+                <xsl:text> days</xsl:text>
+              </b>
+              <xsl:text>.</xsl:text>
+            </p>
+          </footer>
+        </section>
       </body>
     </html>
   </xsl:template>
   <xsl:template match="cobench/coders">
     <table id="metrics">
       <thead>
         <tr>
           <th/>
           <xsl:for-each select="coder/metrics/m[generate-id() = generate-id(key('metrics', @id)[1])]">
-            <th>
+            <th class="sorter">
               <xsl:value-of select="@id"/>
             </th>
           </xsl:for-each>
         </tr>
       </thead>