From c363ea999b3e276840296599fe8eb4dc83aeb217 Mon Sep 17 00:00:00 2001
From: Ben Sima <ben@bsima.me>
Date: Mon, 4 Feb 2019 12:33:29 -0800
Subject: 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
---
ibb/Main.hs | 63 +++++++++++++++++++++++++++++++++++++++++++++--------------
ibb/ibb.cabal | 1 +
2 files changed, 49 insertions(+), 15 deletions(-)
(limited to 'ibb')
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
diff --git a/ibb/ibb.cabal b/ibb/ibb.cabal
index b245496..1dd20f9 100644
--- a/ibb/ibb.cabal
+++ b/ibb/ibb.cabal
@@ -22,4 +22,5 @@ executable ibb
, blaze-html
, blaze-markup
, text
+ , bytestring
default-language: Haskell2010
\ No newline at end of file
--
cgit v1.2.3