Devalloc informational website

This includes deployment and implementation.

As part of sprint-49, here are the startup progress questions:

- Are you on track?
  - Yes? I'm making progress toward a proper launch.
- Are you launched?
  - No
- How many weeks to launch?
  - I would say 4 but it's probably more like 8
- How many (prospective) users have you talked to in the last week?
  - 2, Kyle and his manager, see below
- What have you learned from them?
  - Kyle thought the metrics were interesting.
  - His manager thought the metrics were kinda useful but didn't think they
    really helped people ship higher quality code faster. So that's the rub: I
    have to show how this can make devs ship higher quality code faster; or,
    develop a set of features that improve those things.
  - Kyle pointed out that the clustering feature of devalloc will find optimal
    pairings *and* identify team silos that could be improved, so that's
    important to remember and might be a good angle in the future.
- On a scale of 1-10, what is your morale?
  - 6 maybe
- What most improved your primary metric?
  - Well I was able to deploy something within in the week, whereas before I had
    zero deploys per week. So that's an improvement.
- What is your biggest obstacle?
  - Finding customers to talk to.
  - Also the thing isn't really built yet, I just have a python script. I need
    to build  the real SaaS product
- What are your top 1-3 goals for next week?
  - Find a single customer I can work with on an ongoing basis
    - I should ask around my network to see if I have any second-order
      connections  that would be willing to work with me (Asher, Chad,
      previous bosses, etc)
  - Build out the front-end of the website (it's very simple, would just need a
    basic miso module and deployment)
  - Figure out how to connect/auth to the Github API so I can start building the
    SaaS version of the product

Some user feedback from my friend Kyle. This comes from his engineering manager:

> "Looks neat. If it were priced low enough I could see using it to run reports
> as part of an overall package. A lot of those metrics don't matter too much to
> me as a manager though A lot of these code quality tools are handy info but I
> don't feel like they make people ship code any faster or any higher quality
> Things like CodeClimate work well for Jrs though to avoid obvious static type
> mistakes"

Kyle provided some additional comments:

> he might have been an unusual case. Jared's not big into metrics, Pivotal
> Tracker point estimates, or things like that... He's far more into qualitative
> feedback, like retrospectives and 1:1s
>
> I think it's definitely neat data! I certainly like the collaboration analysis
>
> It's interesting, we recently had a pair where two devs didn't work well
> together, that could be represented here.  Though, we didn't want to avoid
> having them work together, we wanted them to find a work style that worked for
> both of them

And that's a good point: devalloc will find optimal pairings *and* points where
you could improve team cohesiveness.

1 files changed, 63 insertions, 12 deletions

diff --git a/Biz/Look.hs b/Biz/Look.hs
index 4315994..51224a9 100644
--- a/Biz/Look.hs
+++ b/Biz/Look.hs
@@ -5,36 +5,87 @@
 --
 -- https://leerob.io/blog/how-stripe-designs-beautiful-websites
 module Biz.Look
-  ( fontstack,
+  ( -- | Base stylesheets
+    fuckingStyle,
+    -- | Clay.Media extensions
+    prefersLight,
+    prefersDark,
+    noColorPreference,
+    -- | Font
+    fontStack,
+    -- | Elements
     hoverButton,
   )
 where
 
+import Alpha
 import Clay
+import qualified Clay.Stylesheet as Clay
 
-fontstack :: Css
-fontstack = do
+fontStack :: Css
+fontStack = do
   -- i like adobe source pro, maybe use that instead of camphor
   fontFamily ["Camphor", "Open Sans", "Segoe UI"] [sansSerif]
   textRendering optimizeLegibility
 
--- TODO: fontSmoothing is not yet implemented in clay
--- -webkit-font-smoothing: antialiased
--- -moz-osx-font-smoothing: grayscale
-
 hoverButton :: Css
-hoverButton = do
+hoverButton =
   button # hover ? do
     color "#7795f8"
-    transform $ translateY $ px (-1)
+    transform <| translateY <| px (-1)
     boxShadow
-      [ bsColor (rgba 50 50 93 0.1) $
-          shadow
+      [ bsColor (rgba 50 50 93 0.1)
+          <| shadow
             (px 7)
             (px 14),
         bsColor
           (rgba 0 0 0 0.08)
-          $ shadow
+          <| shadow
             (px 3)
             (px 6)
       ]
+
+prefersDark :: Clay.Feature
+prefersDark =
+  Clay.Feature "prefers-color-scheme" (Just (Clay.value ("dark" :: Text)))
+
+prefersLight :: Clay.Feature
+prefersLight =
+  Clay.Feature "prefers-color-scheme" (Just (Clay.value ("light" :: Text)))
+
+noColorPreference :: Clay.Feature
+noColorPreference =
+  Clay.Feature
+    "prefers-color-scheme"
+    (Just (Clay.value ("no-preference" :: Text)))
+
+-- | The stylesheet from <https://perfectmotherfuckingwebsite.com> ported to
+-- Clay.
+fuckingStyle :: Css
+fuckingStyle = do
+  "body" ? do
+    maxWidth (px 650)
+    margin (px 40) auto (px 40) auto
+    padding 0 (px 10) 0 (px 10)
+    color "#444"
+    fontSize (px 18)
+    lineHeight (em 1.5)
+    fontFamily
+      [ "Segoe UI",
+        "Roboto",
+        "Helvetica Neue",
+        "Arial",
+        "Noto Sans",
+        "Apple Color Emoji",
+        "Segoe UI Emoji",
+        "Segoe UI Symbol",
+        "Noto Color Emoji"
+      ]
+      [sansSerif]
+  "h1" <> "h2" <> "h3" ? lineHeight (em 1.2)
+  query Clay.all [prefersDark] <| do
+    "body" ? do
+      color white
+      background ("#444" :: Color)
+    "a:link" ? color ("#5bf" :: Color)
+    "a:visited" ? color ("#ccf" :: Color)