wip styles

assets/style/main.styl

@@ -1,6 +1,46 @@
 @import 'jeet'
+@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700);
 
 normalize-css()
 
+*
+  box-sizing border-box
+
 body
+  color #3C3A31
   center(1024px)
+  padding 1em
+  max-width 50em
+
+table, tr, td, th
+  border 1px solid #fff
+  word-break break-word
+
+table
+  width 100%
+  background #F8F8F8
+  font-family Inconsolata, monospace
+td, th
+  padding .5em
+
+.two-column
+  td, th
+    width: 50%;
+
+.three-column
+  td, th
+    width: 33.33%;
+
+td:first-child
+  font-weight bold
+
+.plugins > div
+  display none
+
+.plugins > :target + div
+  display block
+
+.hide-children
+  display none
+:target ~ .hide-children
+  display block

assets/views/connections.jade

@@ -10,37 +10,47 @@ each connection in connections || []
     span Labels
     span [#{connection.labels}]
     h4 Routes
-    div
+    table.three-column
+      tr
+        th HTTP Verb
+        th Path
+        th Plugin
       each route in connection.routes || []
-        div
-          div
-            span HTTP verb
-            spab #{route.method}
-          div
-            span Path
-            span #{route.path}
-          div
-            span Plugin
-            span #{route.plugin}
+        tr
+          td= route.method
+          td= route.path
+          td= route.plugin
+
     h4 Plugins
-    div
+    div.plugins
       each plug, name in connection.plugins || {}
+        h5(id='#{name}')
+         a(href='##{name}') #{name}
         div
-          h5 #{name}
-          div
-            span Version
-            span #{plug.version}
-          div
-            span Multiple
-            span #{plug.multiple}
+          table.two-column
+            tr
+              th Version
+              th Multiple
+            tr
+              td= plug.version
+              td= plug.multiple
           div
             h6 Options
-            +keyvalue(plug.options || {})
+            table.two-column
+              each key, value in plug.options || {}
+                tr
+                  td= value
+                  td= key
           if plug.attributes.pkg
             div
               h6 Package
-              +keyvalue(plug.attributes.pkg)
-          else 
+              table.two-column
+                each key, value in plug.attributes.pkg || {}
+                  tr
+                    td= value
+                    td= key
+
+          else
             div
               h6 Attributes
               +keyvalue(plug.attributes || {})

assets/views/runtime.jade

@@ -1,20 +1,35 @@
-h2 Runtime
+h2#runtime
+  a(href='#runtime') Runtime
+div.hide-children
+  table.two-column
+    tr
+      td Execution Path
+      td= runtime.execPath
+    tr
+      td Command Line Arguments
+      td= runtime.argv
+    tr
+      td Node Command Line Arguments
+      td= runtime.execArgv
+  div
+    h3 Versions
+    table.two-column
+      tr
+        th Name
+        th Version
+      each value, key in runtime.versions
+        tr
+          td= key
+          td= value
 div
-  span Execution Path
-  span #{runtime.execPath}
-div
-  span Command Line Arguments
-  span [#{runtime.argv}]
-div
-  span Node Command Line Arguments
-  span #{runtime.execArgv}
-div
-  h3 Versions
-  ul
-    each value, key in runtime.versions
-      li= key + ' version: ' + value
-div
-  h3 Environment
-  ul
-    each value, key in runtime.env
-      li= key + ' = ' + value
+  h2#environment
+    a(href='#environment') Environment
+  div.hide-children
+    table.two-column
+      tr
+        th Variable
+        th Value
+      each value, key in runtime.env
+        tr
+          td= key
+          td= value