diff options
| author | Ben Sima <ben@bsima.me> | 2019-02-04 12:33:29 -0800 |
|---|---|---|
| committer | Ben Sima <ben@bsima.me> | 2019-02-04 12:35:27 -0800 |
| commit | c363ea999b3e276840296599fe8eb4dc83aeb217 (patch) | |
| tree | 8a6557a4d97c247b506a630da7b37713a82a28d4 /ibb/Main.hs | |
| parent | 46c5df1f920ae260cdd673f87c4d64170c821170 (diff) | |
Upgrade design
- correctly using .card-body, .card-title, .card-subtitle
- add more spacing overall
- add jumbotron callout/info banner
- add separate css file for custom css
Diffstat (limited to 'ibb/Main.hs')
| -rw-r--r-- | ibb/Main.hs | 63 |
1 files changed, 48 insertions, 15 deletions
diff --git a/ibb/Main.hs b/ibb/Main.hs index 2c5bb1b..8607278 100644 --- a/ibb/Main.hs +++ b/ibb/Main.hs @@ -3,19 +3,26 @@ module Main where -import Data.Text (Text) +import Data.ByteString.Lazy (ByteString) +import Data.Text.Lazy (Text) +import Data.Text.Lazy.Encoding (encodeUtf8) import Text.Blaze (Markup) import Text.Blaze.Html (Html) import Text.Blaze.Html.Renderer.Text (renderHtml) import Text.Hamlet (shamlet) -import Web.Scotty (ActionM, scotty, get, html) +import Text.Lucius (lucius, renderCss) +import Web.Scotty (ActionM, scotty, get, html, raw, setHeader) render :: Html -> ActionM () render = html . renderHtml +css :: ByteString -> ActionM () +css src = setHeader "content-type" "text/css" >> raw src + main :: IO () -main = scotty 3000 $ +main = scotty 3000 $ do get "/" $ render homepage + get "/custom.css" $ css stylesheet data Person = Person { _name :: Text @@ -98,26 +105,52 @@ allPeople = displayPerson :: Person -> Markup displayPerson person = [shamlet| -<div .card .ml-3 .mb-3 style=width:22rem;> +<div .card .mx-3 .my-5 .w-25 .h-25> <img .card-img .img-fluid src=#{_pic person}> - <h4>#{_name person} - <ul> - $forall book <- (_books person) - <li> - <a target=_blank .text-dark href="https://www.amazon.com/dp/#{_amznref book}"> - #{_title book} - <div .card-footer> - <a target=_blank .btn href=#{_website person}>Personal Website + <div .card-body> + <h4 .card-title> + #{_name person} + <h6 .card-subtitle> + <a target=_blank href=#{_website person}>Website + <p .card-text> + <ul> + $forall book <- (_books person) + <li> + <a target=_blank .text-dark href="https://www.amazon.com/dp/#{_amznref book}"> + #{_title book} |] +title, subtitle :: Text +title = "Influenced by books" +subtitle = "Influential people and the books that made them." + homepage :: Markup homepage = [shamlet| <!doctype html> <head> - <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> + <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" + rel="stylesheet" + integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" + crossorigin="anonymous"> + <link href="/all.css" rel="stylesheet"> + <title>#{title} | #{subtitle} <body> - <div .container> - <div .row> + <div .container.mt-5> + <div .jumbotron> + <h1 .display-4> + #{title} + <p .lead> + #{subtitle} + + <div .d-flex .flex-wrap .justify-content-around> $forall person <- allPeople #{displayPerson person} |] + +stylesheet :: ByteString +stylesheet = encodeUtf8 . renderCss $ [lucius| +.jumbotron +{ background: #fff +; text-align: center +} +|] undefined |