Merge pull request #162 from daviddeutsch/revamp

New website theme

README.md

@@ -49,6 +49,19 @@ Install dependencies and build:
 
 Done!
 
+### CSS Assets
+
+In `static/source`, run:
+
+    $ npm install
+    $ bower install
+
+to install all the source libraries locally (you need [nodejs](https://nodejs.org) installed). Then:
+
+    $ gulp css
+
+to create a new CSS file (automatically creates a minified version as well).
+
 ## Running
 
 It runs at: http://localhost:1990/

hl.cabal

@@ -21,7 +21,6 @@ data-files:          static/css/*.css
                      static/fonts/glyphicons-halflings-regular.svg
                      static/fonts/glyphicons-halflings-regular.eot
                      static/fonts/glyphicons-halflings-regular.woff
-                     static/css/haskell.font.css
                      static/img/*.ico
                      static/img/*.jpg
                      static/img/*.png

src/HL/View/Community.hs

@@ -17,7 +17,7 @@ communityV =
     (\url ->
        container_
          (row_
-            (span12_ [class_ "col-md-12"]
+            (span12_ [class_ "col-sm-12"]
                (do h1_ "Community"
                    p_
                      "Haskellers interact, talk and collaborate across several mediums \

src/HL/View/Documentation.hs

@@ -18,7 +18,7 @@ documentationV =
     (\url ->
        container_
          (row_
-            (span12_ [class_ "col-md-12"]
+            (span12_ [class_ "col-sm-12"]
                (do h1_ "Documentation"
                    books
                    courses

src/HL/View/Downloads.hs

@@ -12,7 +12,7 @@ import HL.View.Template
 downloadsFromMarkdown :: Html () -> FromLucid App
 downloadsFromMarkdown md =
   template [] "Downloads"
-    (\_ -> container_ (row_  (span12_ [class_ "col-md-12"]
+    (\_ -> container_ (row_  (span12_ [class_ "col-sm-12"]
                                       (do h1_ (toHtml ("Downloads" :: String))
                                           md))))
 
@@ -26,7 +26,7 @@ downloadsForV os autoInstall manualInstall =
     (\_ ->
        container_
          (row_
-            (span12_ [class_ "col-md-12"]
+            (span12_ [class_ "col-sm-12"]
                (do h1_ (toHtml ("Downloads for " <> toHuman os))
                    autoInstall
                    when (os == Linux)

src/HL/View/Home.hs

@@ -14,19 +14,21 @@ homeV :: [(Text, Text, Text)] -> FromLucid App
 homeV vids =
   skeleton
     "Haskell Language"
-    (\_ _ ->
-       linkcss "https://fonts.googleapis.com/css?family=Ubuntu:700")
+    (\_ _ -> return ())
     (\cur url ->
-       do navigation True [] Nothing url
+       do navigation False [] Nothing url
           header url
+          br_ []
+          br_ [class_ "hidden-xs hidden-sm"]
+          br_ [class_ "hidden-xs hidden-sm"]
           try url
+          br_ []
           community url vids
           features
+          br_ []
           sponsors
           transition
-          events
-          div_ [class_ "mobile"] $
-               (navigation False [] cur url))
+          events)
     (\_ url ->
        scripts url
                [js_jquery_console_js
@@ -38,20 +40,22 @@ header :: (Route App -> Text) -> Html ()
 header url =
   div_ [class_ "header"] $
   (container_
-     (row_ (do span6_ [class_ "col-md-6"]
+     (row_ (do span12_ [class_ "col-sm-12 hidden-xs"]
+                       (br_ [])
+               span6_ [class_ "col-md-6"]
                       (div_ [class_ "branding"]
                             (do branding
                                 summation))
                span6_ [class_ "col-md-6"]
-                      (div_ [class_ "branding"]
+                      (div_ [class_ "branding sample"]
                             (do tag
                                 sample)))))
-  where branding =
-          span_ [class_ "name",background url img_logo_png] "Haskell"
+  where branding = do br_ [class_ "hidden-xs"]
+                      img_ [src_ (url (StaticR img_haskell_logo_svg)), class_ "img-responsive"]
         summation =
-          span_ [class_ "summary"] "An advanced purely-functional programming language"
-        tag =
-          span_ [class_ "tag"] "Declarative, statically typed code."
+          h4_ [class_ "summary"] "An advanced purely-functional programming language"
+        tag = do br_ [class_ "visible-xs visible-sm"]
+                 h4_ [class_ "tag"] "Declarative, statically typed code."
         sample =
           div_ [class_ "code-sample",title_ "This example is contrived in order to demonstrate what Haskell looks like, including: (1) where syntax, (2) enumeration syntax, (3) pattern matching, (4) consing as an operator, (5) list comprehensions, (6) infix functions. Don't take it seriously as an efficient prime number generator."]
                (haskellPre codeSample)
@@ -67,13 +71,17 @@ codeSample =
 -- | Try Haskell section.
 try :: (Route App -> Text) -> Html ()
 try _ =
-  div_ [class_ "try",onclick_ "tryhaskell.controller.inner.click()"]
-       (container_
-          (row_ (do span6_ [class_ "col-md-6"] repl
-                    span6_ [class_ "col-md-6",id_ "guide"]
-                           (return ()))))
+  div_ [class_ "pattern-bg"] $
+    container_ $
+      do row_ (span12_ [class_ "col-sm-12"]
+                       (div_ [class_ "try",onclick_ "tryhaskell.controller.inner.click()"]
+                             (container_
+                                (row_ (do span6_ [class_ "col-sm-6"] repl
+                                          span6_ [class_ "col-sm-6",id_ "guide"] (return ())
+                                      )))))
+
   where repl =
-          do h2_ "Try it"
+          do h2_ "Try it!"
              noscript_ (span6_ (div_ [class_ "alert alert-warning"]
                     "Try haskell requires Javascript to be enabled."))
              span6_ [hidden_ "", id_ "cookie-warning"]
@@ -87,35 +95,32 @@ try _ =
 community :: (Route App -> Text) -> [(Text, Text, Text)] -> Html ()
 community url vids =
   div_ [id_ "community-wrapper"]
-       (do div_ [class_ "community",background url img_community_jpg]
-                (do container_
-                      [id_ "tagline"]
-                      (row_ (span8_ [class_ "col-md-8"]
-                                    (do h1_ "An open source community effort for over 20 years"
-                                        p_ [class_ "learn-more"]
-                                           (a_ [href_ (url CommunityR)] "Learn more"))))
-                    container_
-                      [id_ "video-description"]
-                      (row_ (span8_ [class_ "col-md-8"]
-                                    (do h1_ (a_ [id_ "video-anchor"] "<title here>")
-                                        p_ (a_ [id_ "video-view"] "View the video now \8594")))))
-           div_ [class_ "videos"]
-                (container_ (row_ (span12_ [class_ "col-md-12"]
-                                           (ul_ (forM_ vids vid))))))
+       (do div_ [class_ "videos"]
+                (container_ (row_ (span12_ [class_ "col-sm-12"]
+                                           (do h2_ "Videos"
+                                               br_ []
+                                               row_ (span12_ [class_ "col-sm-12"]
+                                                             (row_ [class_ "row-flex"] (forM_ vids vid)))
+                                           )))))
   where vid :: (Text,Text,Text) -> Html ()
         vid (n,u,thumb) =
-          li_ (a_ [class_ "vid-thumbnail",href_ u,title_ n]
-                  (img_ [src_ thumb]))
+          span3_ [class_ "col-xs-6 col-sm-3 col-md-2"]
+                 (a_ [class_ "thumbnail", href_ u, title_ n]
+                                    (do img_ [class_ "img-responsive", src_ thumb]
+                                        div_ [class_ "caption"]
+                                             (h5_ (toHtml (n :: Text)))))
 
 -- | Information for people to help transition from the old site to the new locations.
 transition :: Html ()
 transition =
   div_ [class_ "transition"]
        (container_
-          (row_ (span6_ [class_ "col-md-6"]
-                        (do h1_ "Psst! Looking for the wiki?"
+          (row_ (span6_ [class_ "col-sm-6"]
+                        (do br_ []
+                            h2_ "Psst! Looking for the wiki?"
                             p_ (do "This is the new Haskell home page! The wiki has moved to "
-                                   a_ [href_ "https://wiki.haskell.org"] "wiki.haskell.org.")))))
+                                   a_ [href_ "https://wiki.haskell.org"] "wiki.haskell.org.")
+                            br_ []))))
 
 -- | Events section.
 -- TODO: Take events section from Haskell News?
@@ -126,51 +131,51 @@ events =
 -- | List of sponsors.
 sponsors :: Html ()
 sponsors =
-  div_ [class_ "sponsors"] $
+  div_ [class_ "sponsors pattern-bg"] $
     container_ $
-      do row_ (span6_ [class_ "col-md-6"] (h1_ "Sponsors"))
-         row_ (do span6_ [class_ "col-md-6"]
+      do row_ (span6_ [class_ "col-sm-6"] (h2_ "Sponsors"))
+         row_ (do span6_ [class_ "col-sm-6"]
                          (p_ (do strong_ (a_ [href_ "https://www.datadoghq.com"] "DataDog")
                                  " provides powerful, customizable 24/7 metrics and monitoring \
                                  \integration for all of Haskell.org, and complains loudly for \
                                  \us when things go wrong."))
-                  span6_ [class_ "col-md-6"]
+                  span6_ [class_ "col-sm-6"]
                          (p_ (do strong_ (a_ [href_ "https://www.fastly.com"] "Fastly")
                                  "'s Next Generation CDN provides low latency access for all of \
                                  \Haskell.org's downloads and highest traffic services, including \
                                  \the primary Hackage server, Haskell Platform downloads, and more." )))
-         row_ (do span6_ [class_ "col-md-6"]
+         row_ (do span6_ [class_ "col-sm-6"]
                          (p_ (do strong_ (a_ [href_ "https://www.rackspace.com"] "Rackspace")
                                  " provides compute, storage, and networking resources, powering \
                                  \almost all of Haskell.org in several regions around the world."))
-                  span6_ [class_ "col-md-6"]
+                  span6_ [class_ "col-sm-6"]
                          (p_ (do strong_ (a_ [href_ "https://www.status.io"] "Status.io")
                                  " powers "
                                  a_ [href_ "https://status.haskell.org"] "https://status.haskell.org"
                                  ", and lets us easily tell you \
                                  \when we broke something." )))
-         row_ (do span6_ [class_ "col-md-6"]
+         row_ (do span6_ [class_ "col-sm-6"]
                          (p_ (do strong_ (a_ [href_ "http://www.galois.com"] "Galois")
                                  " provides infrastructure, funds, administrative resources and \
                                  \has historically hosted critical Haskell.org infrastructure, \
                                  \as well as helping the Haskell community at large with their work." ))
-                  span6_ [class_ "col-md-6"]
+                  span6_ [class_ "col-sm-6"]
                          (p_ (do strong_ (a_ [href_ "https://www.dreamhost.com"] "DreamHost")
                                  " has teamed up to provide Haskell.org with redundant, scalable object-storage \
                                  \through their Dream Objects service." )))
-         row_ (do span6_ [class_ "col-md-6"]
+         row_ (do span6_ [class_ "col-sm-6"]
                          (p_ (do strong_ (a_ [href_ "http://awakenetworks.com/"] "Awake Networks")
                                  " is building a next generation network security and analytics platform. They are \
                                  \a proud sponsor of the "
                                  (a_ [href_ "https://summer.haskell.org/"] "Summer of Haskell")
                                  " and contribute broadly to the Haskell community." ))
-                  span6_ [class_ "col-md-6"]
+                  span6_ [class_ "col-sm-6"]
                          (p_ (do strong_ (a_ [href_ "http://haskellbook.com/"] "Haskell Book")
                                  " is a proud sponsor of the "
                                  (a_ [href_ "https://summer.haskell.org/"] "Summer of Haskell")
                                  " and provides a complete and up-to-date resource for learning Haskell -- suitable \
                                  \whether you're completely new to Haskell or are at an intermediate level and want \
                                  \to deepen your understanding.")))
-         row_ (do span6_ [class_ "col-md-6"]
+         row_ (do span6_ [class_ "col-sm-6"]
                          (p_ (do strong_ (a_ [href_ "https://webmon.com"] "Webmon")
                                  " provides monitoring and escalation for core haskell.org infrastructure." )))

src/HL/View/Home/Features.hs

@@ -15,7 +15,7 @@ features :: Html ()
 features =
   div_ [class_ "features"]
        (container_
-          (do h1_ "Features"
+          (do h2_ "Features"
               row_ (do span6_ [class_ "col-md-6"] statically
                        span6_ [class_ "col-md-6"] purefunc)
               row_ (do span6_ [class_ "col-md-6"] inference
@@ -25,14 +25,14 @@ features =
 
 purefunc :: Html ()
 purefunc =
-  do h2_ "Purely functional"
+  do h3_ "Purely functional"
      p_ "Every function in Haskell is a function in the mathematical sense (i.e., \"pure\"). \
         \Even side-effecting IO operations are but a description of what to do, produced \
         \by pure code. There are no statements or instructions, only expressions which \
         \cannot mutate variables (local or global) nor access state like time or random \
         \numbers."
-     p_ [class_ "expand"] (a_ "Click to expand")
-     div_ [class_ "expandable"] $ do
+     p_ [class_ "text-center"] (a_ [data_ "toggle" "collapse", href_ "#collapse-functional", class_ "btn btn-xs btn-primary"] "Click to expand")
+     div_ [class_ "collapse", id_ "collapse-functional"] $ do
        p_ (do "The following function takes an integer and returns an integer. "
               "By the type it cannot do any side-effects whatsoever, it cannot\
               \ mutate any of its arguments.")
@@ -55,14 +55,14 @@ purefunc =
 
 statically :: Html ()
 statically =
-  do h2_ "Statically typed"
+  do h3_ "Statically typed"
      p_ "Every expression in Haskell has a type which is determined at compile time. \
        \All the types composed together by function application have to match up. If \
        \they don't, the program will be rejected by the compiler. Types become not \
        \only a form of guarantee, but a language for expressing the construction \
        \of programs."
-     p_ [class_ "expand"] (a_ "Click to expand")
-     div_ [class_ "expandable"] $ do
+     p_ [class_ "text-center"] (a_ [data_ "toggle" "collapse", href_ "#collapse-statically-typed", class_ "btn btn-xs btn-primary"] "Click to expand")
+     div_ [class_ "collapse", id_ "collapse-statically-typed"] $ do
        p_ "All Haskell values have a type:"
        haskellPre "char = 'a'    :: Char\n\
                   \int = 123     :: Int\n\
@@ -79,14 +79,14 @@ statically =
 
 concurrent :: Html ()
 concurrent =
-  do h2_ "Concurrent"
+  do h3_ "Concurrent"
      p_ "Haskell lends itself well to concurrent programming due to its explicit \
        \handling of effects. Its flagship compiler, GHC, comes with a high-\
        \performance parallel garbage collector and light-weight concurrency \
        \library containing a number of useful concurrency primitives and \
        \abstractions."
-     p_ [class_ "expand"] (a_ "Click to expand")
-     div_ [class_ "expandable"] $ do
+     p_ [class_ "text-center"] (a_ [data_ "toggle" "collapse", href_ "#collapse-concurrent", class_ "btn btn-xs btn-primary"] "Click to expand")
+     div_ [class_ "collapse", id_ "collapse-concurrent"] $ do
        p_ "Easily launch threads and communicate with the standard library:"
        haskellPre "main = do\n\
                   \  done <- newEmptyMVar\n\
@@ -114,13 +114,13 @@ concurrent =
 
 inference :: Html ()
 inference =
-  do h2_ "Type inference"
+  do h3_ "Type inference"
      p_ "You don't have to explicitly write out every type in a Haskell program. \
        \Types will be inferred by unifying every type bidirectionally. However, you \
        \can write out types if you choose, or ask the compiler to write them for you \
        \for handy documentation."
-     p_ [class_ "expand"] (a_ "Click to expand")
-     div_ [class_ "expandable"] $ do
+     p_ [class_ "text-center"] (a_ [data_ "toggle" "collapse", href_ "#collapse-type-inference", class_ "btn btn-xs btn-primary"] "Click to expand")
+     div_ [class_ "collapse", id_ "collapse-type-inference"] $ do
        p_ "This example has a type signature for every binding:"
        haskellPre "main :: IO ()\n\
                   \main = do line :: String <- getLine\n\
@@ -152,14 +152,14 @@ inference =
 
 lazy :: Html ()
 lazy =
-  do h2_ "Lazy"
+  do h3_ "Lazy"
      p_ "Functions don't evaluate their arguments. This means that programs \
        \can compose together very well, with the ability to write control \
        \constructs (such as if/else) just by writing normal functions. The purity \
        \of Haskell code makes it easy to fuse chains of functions together, allowing \
        \for performance benefits."
-     p_ [class_ "expand"] $ a_ "Click to expand"
-     div_ [class_ "expandable"] $ do
+     p_ [class_ "text-center"] (a_ [data_ "toggle" "collapse", href_ "#collapse-lazy", class_ "btn btn-xs btn-primary"] "Click to expand")
+     div_ [class_ "collapse", id_ "collapse-lazy"] $ do
        p_ "Define control structures easily:"
        haskellPre "when p m = if p then m else return ()\n\
                   \main = do args <- getArgs\n\
@@ -185,11 +185,11 @@ lazy =
 
 packages :: Html ()
 packages =
-  do h2_ "Packages"
+  do h3_ "Packages"
      p_ "Open source contribution to Haskell is very active with a wide range \
         \of packages available on the public package servers."
-     p_ [class_ "expand"] (a_ "Click to expand")
-     div_ [class_ "expandable"] $ do
+     p_ [class_ "text-center"] (a_ [data_ "toggle" "collapse", href_ "#collapse-packages", class_ "btn btn-xs btn-primary"] "Click to expand")
+     div_ [class_ "collapse", id_ "collapse-packages"] $ do
        p_ "There are 6,954 packages freely available. Here is a sample of the \
          \most common ones:"
        table_ [class_ "packages"] $

src/HL/View/Markdown.hs

@@ -10,4 +10,4 @@ import HL.View.Template
 -- | Render a simple page.
 markdownV :: [Route App] -> Text -> Html () -> FromLucid App
 markdownV routes t inner =
-  template routes t (const (container_ (row_ (span12_ [class_ "col-md-12"] inner))))
+  template routes t (const (container_ (row_ (span12_ [class_ "col-sm-12"] inner))))

src/HL/View/News.hs

@@ -15,5 +15,5 @@ newsV inner =
            "News"
            (\_ ->
               container_
-                (do row_ (span12_ [class_ "col-md-12"] (do h1_ "News"))
+                (do row_ (span12_ [class_ "col-sm-12"] (do h1_ "News"))
                     inner))