Move CSS into its own file

app/Main.hs

@@ -7,11 +7,13 @@
 {-# LANGUAGE OverloadedStrings #-}
 {-# LANGUAGE RankNTypes #-}
 {-# LANGUAGE ScopedTypeVariables #-}
+{-# LANGUAGE TemplateHaskell #-}
 {-# LANGUAGE TypeOperators #-}
 
 module Main (main) where
 
 import Data.Char (chr)
+import Data.FileEmbed (embedFile)
 import Data.Foldable (for_)
 import Data.List (intercalate)
 import Data.Maybe (fromMaybe, maybeToList)
@@ -106,7 +108,7 @@ instance MimeRender HTML BytesModel where
     H.head $ do
       H.meta ! A.charset "utf-8"
       H.title "utoy"
-      H.style "html { font-size: 32px; font-family: 'Noto Sans', sans-serif; } td { padding: 0.5em 1em; } pre { margin: 0; font-size: 0.5em; } body { display: flex; justify-content: center; }"
+      H.style $ H.toHtml $ Encoding.decodeUtf8 $(embedFile "utoy.css")
     H.body $ do
       H.table $ for_ model.codepoints $ \(bytes, eiC) -> do
         H.tr $ do

nix/haskell-deps.nix

@@ -2,6 +2,7 @@ haskellPackages: with haskellPackages; [
   attoparsec
   blaze-html
   bytestring
+  file-embed
   http-media
   servant-server
   text

package.yaml

@@ -10,6 +10,7 @@ copyright:           "2023 Paul Brinkmeier"
 
 extra-source-files:
 - README.md
+- utoy.css
 
 dependencies:
 - base >= 4.7 && < 5
@@ -42,6 +43,7 @@ executables:
     - utoy
     - blaze-html
     - bytestring
+    - file-embed
     - http-media
     - servant-server
     - text

src/UToy/Table.hs

@@ -1,5 +1,4 @@
 {-# LANGUAGE OverloadedStrings #-}
-{-# LANGUAGE RankNTypes #-}
 
 module UToy.Table (Cell, cl, cr, render) where
 

utoy.cabal

@@ -14,6 +14,7 @@ license-file:   LICENSE
 build-type:     Simple
 extra-source-files:
     README.md
+    utoy.css
 
 source-repository head
   type: git
@@ -45,6 +46,7 @@ executable utoy-exe
     , base >=4.7 && <5
     , blaze-html
     , bytestring
+    , file-embed
     , http-media
     , servant-server
     , text

utoy.css

@@ -0,0 +1,21 @@
+html {
+  font-size: 24px;
+  font-family: 'Noto Sans', sans-serif;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+}
+
+td {
+  padding: 0.5em 1em;
+}
+
+pre, code {
+  font-family: 'Noto Sans Mono', monospace;
+}
+
+pre {
+  margin: 0; font-size: 0.5em;
+}