add css

2 files changed, 100 insertions, 5 deletions

diff --git a/frontend/app/Main.hs b/frontend/app/Main.hs
index 356aa6e..9151705 100644
--- a/frontend/app/Main.hs
+++ b/frontend/app/Main.hs
@@ -26,6 +26,7 @@ import Form qualified as F
 import GHC.Generics (Generic)
 import Miso
 import Miso.String (toMisoString)
+import NeatInterpolation qualified as Q
 
 data Model = Model
   { schema :: Maybe (Either String Schema),
@@ -162,15 +163,108 @@ viewModel :: Model -> View Action
 viewModel model =
   let input = fromMaybe (A.Object AM.empty) model.input
    in div_ [] $
-        [ maybe (text "..") (either err viewSchema) model.schema,
-          maybe (text "..") (either err viewPosts) model.posts,
-          maybe (text "..") (either err (viewForm input)) model.schema,
-          viewInput input
+        [ viewCss,
+          viewHeader,
+          nav_ [] [viewCollections],
+          main_ [] $
+            [ maybe (text "..") (either err viewSchema) model.schema,
+              maybe (text "..") (either err viewPosts) model.posts,
+              maybe (text "..") (either err (viewForm input)) model.schema,
+              viewInput input
+            ]
         ]
 
+viewCss :: View Action
+viewCss =
+  node
+    HTML
+    "style"
+    Nothing
+    [type_ "text/css"]
+    [ text
+        ( toMisoString
+            [Q.text|
+/* normalize */
+* {
+  box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh; }
+
+/* typography */
+html {
+  font: Iosevka; }
+
+/* layout */
+body > div {
+  display: flex;
+  flex-flow: row nowrap;
+  min-height: 100vh;
+  padding-top: 64px;
+  align-items: stretch; }
+header {
+  position: fixed;
+  top: 0; left: 0;
+  width: 100%;
+  height: 64px; }
+nav, main {
+  min-height: 100%; }
+nav {
+  flex: 0 0 200px; }
+main {
+  flex: 1 1 auto; }
+
+/* borders */
+header {
+  border-bottom: 1px solid gray; }
+nav {
+  border-right: 1px solid gray; }
+
+/* padding */
+nav, header, main {
+  padding: 16px; }
+
+/* scrolling */
+body > div {
+  overflow: visible; }
+header {
+  overflow: visible; }
+nav, main {
+  overflow: auto; }
+
+/* header */
+header {
+  display: flex;
+  align-items: center; }
+header section {
+  margin-left: auto; }
+header section:first-child {
+  margin-left: 0; }
+|]
+        )
+    ]
+
 err :: String -> View Action
 err = text . toMisoString . ("err! " <>)
 
+viewHeader :: View Action
+viewHeader =
+  header_ [] $
+    [ section_ [] [h1_ [] [text "acms"]],
+      section_ [] [viewBranch]
+    ]
+
+viewBranch :: View Action
+viewBranch =
+  select_ [] [option_ [] [text "main"]]
+
+viewCollections :: View Action
+viewCollections =
+  section_ [] $
+    [ span_ [] [text "collections"],
+      ol_ [] [li_ [] [a_ [href_ "#"] [text "posts"]]]
+    ]
+
 viewSchema :: Schema -> View Action
 viewSchema schema =
   case schema.type_ of
diff --git a/frontend/frontend.cabal b/frontend/frontend.cabal
index e6cb113..8dfef5b 100644
--- a/frontend/frontend.cabal
+++ b/frontend/frontend.cabal
@@ -20,7 +20,7 @@ executable frontend
     default-extensions:
         CPP OverloadedStrings RecordWildCards DeriveAnyClass
         DuplicateRecordFields LambdaCase OverloadedRecordDot
-        NoFieldSelectors ViewPatterns
+        NoFieldSelectors ViewPatterns QuasiQuotes
 
     ghc-options:
         -Wall -fno-warn-name-shadowing -fno-warn-ambiguous-fields
@@ -34,6 +34,7 @@ executable frontend
         containers,
         data-default,
         miso,
+        neat-interpolation,
         text,
         utf8-string