Make documentation prettier, and abstract out the sites color scheme.

public/Website/ColorScheme.elm

@@ -0,0 +1,13 @@
+
+module Website.ColorScheme where 
+
+accent0 = rgb 90 99 120
+
+accent1 = rgb 96 181 204
+accent2 = rgb 240 173 0
+accent3 = rgb 234 21 122
+accent4 = rgb 127 209 59
+
+lightGrey  = rgb 245 245 245
+mediumGrey = rgb 216 221 225
+

public/Website/Docs.elm

@@ -1,14 +1,24 @@
 
 module Website.Docs (createDocs) where
 
-import Data.List (intersperse)
+import Data.List (intersperse,zipWith)
+import Website.ColorScheme
 
-lightGrey  = rgb 245 245 245
-mediumGrey = rgb 216 221 225
+accents = [accent0,accent1,accent2,accent3,accent4]
+
+topBar k n =
+    let { n' = toFloat n
+        ; k' = toFloat k
+        ; segs = map (\i -> round (n' * toFloat i / k')) [1..k]
+        ; ws = zipWith (-) segs (0:segs)
+        ; accentCycle = concatMap (\_ -> accents) [ 0 .. k `div` 5 ]
+        }
+    in  flow right $ zipWith (\c w -> color c $ spacer w 5) accentCycle ws
 
 skeleton body outer =
   let content = body (outer - 80) in
-  flow down [ spacer outer 15
+  flow down [ topBar 10 outer 
+            , spacer outer 15
             , container outer (heightOf content) midTop content
             , container outer 50 midBottom . text . Text.color mediumGrey $
                 toText "© 2011-2012 Evan Czaplicki" 
@@ -19,10 +29,11 @@ addSpaces px = intersperse (spacer 1 px)
 section s = bold . Text.height s . toText
 
 entry w (name, typ, desc) =
-  let tipe = if length typ > 0 then " :: " ++ typ else "" in
+  let colons = Text.color accent1 $ toText " :: " in
+  let tipe = if length typ > 0 then colons ++ toText typ else toText "" in
   flow down
     [ color mediumGrey $ spacer w 1
-    , width w . color lightGrey . text . monospace $ bold (toText name) ++ toText tipe
+    , width w . color lightGrey . text . monospace $ bold (toText name) ++ tipe
     , spacer 1 10
     , flow right [ spacer 50 10, width (w-50) $ plainText desc ]
     , spacer 1 20

public/Website/Skeleton.elm

@@ -1,26 +1,18 @@
 
 module Website.Skeleton (skeleton) where
 
-a0 = rgb 90 99 120
-
-a1 = rgb 96 181 204
-a2 = rgb 240 173 0
-a3 = rgb 234 21 122
-a4 = rgb 127 209 59 --212 212 214
+import Website.ColorScheme
 
 button (name, href, clr) =
     let accent = color clr (spacer 100 2) in
     let butn = container 100 58 middle $ text . Text.color black $ toText name in
     link href $ accent `below` butn
 
 buttons = flow right . map button $
-  [ ("Home"    , "/"                 , a1)
-  , ("Examples", "/Examples.elm"     , a2)
-  , ("Docs"    , "/Documentation.elm", a3)
-  , ("Download", "/Download.elm"     , a4) ]
-
-lightGrey  = rgb 245 245 245
-mediumGrey = rgb 216 221 225
+  [ ("Home"    , "/"                 , accent1)
+  , ("Examples", "/Examples.elm"     , accent2)
+  , ("Docs"    , "/Documentation.elm", accent3)
+  , ("Download", "/Download.elm"     , accent4) ]
 
 title w = container w 60 midLeft . text . Text.height 2 . bold $ toText "Elm"