Use Clay CSS domain specific language instead of including a raw CSS file

data/assets/public/style.css

@@ -1,93 +0,0 @@
-html{background-color:#f1f6f0;color:#222323}
-a{text-decoration:none}
-p{margin:0.4em 0 0.4em 0}
-a{color:#6D92AD}
-
-body {
-  margin: 0 auto;
-  font-family: Monospace;
-  font-size: 1.25em;
-  font-weight: 300;
-  text-align: left
-}
-
-body strong {
-  font-weight: 600;
-}
-
-body li {
-  list-style-type: "~> ";
-}
-
-footer {
-  position: absolute;
-  margin: 0;
-  bottom: 0;
-  width: 100%;
-  background-color: rgba(109, 146, 173, 0.3);
-  text-align: center;
-  padding: 1em 0 0.9em 0;
-  box-sizing: border-box;
-}
-
-footer p {
-  font-size: 0.75em;
-  margin: 0 2em;
-  color: #f1f6f0;
-}
-
-footer p a {
-  color: #f1f6f0;
-}
-
-.main {
-  margin: 1em auto;
-  max-width: 60%;
-}
-
-.navContainer {
-  margin: 1.5em 0;
-  width: 100%;
-  text-align: center;
-}
-
-.mainNav {
-  margin: 0 auto;
-  padding: 0;
-  overflow: hidden;
-  box-shadow: 4px 4px 6px #ccc;
-  display: inline-flex;
-}
-
-.mainNav li {
-  list-style-type: none;
-}
-
-.mainNav li a {
-  display: block;
-  text-align: center;
-  padding: 0.25em 0.3em;
-  text-transform: lowercase;
-}
-
-.notFound {
-  margin: 0 auto;
-  text-align: center;
-}
-
-.notFound h1 {
-  font-size: 500%;
-  font-weight: 200;
-  color:#6D92AD
-}
-
-.postList {
-  font-size: 1.5em;
-}
-
-@media only screen and (max-width : 768px) {
-  .main {
-    margin: 1em auto;
-    max-width: 90%;
-  }
-}

sampu.cabal

@@ -1,6 +1,6 @@
 cabal-version:   3.0
 name:            sampu
-version:         0.3.0
+version:         0.5.0
 license:         ISC
 author:          James Eversole
 maintainer:      james@eversole.co
@@ -16,6 +16,7 @@ executable sampu
     ghc-options:        -threaded -rtsopts -with-rtsopts=-N -optl-pthread -fPIC
     build-depends:      base
                       , bytestring            >= 0.11.5.0
+                      , clay                  >= 0.14.0
                       , commonmark            >= 0.2.4
                       , directory             >= 1.3.7.0
                       , dotenv                >= 0.11.0.0
@@ -36,6 +37,7 @@ executable sampu
                         Core.Handlers
                         Core.HTTP
                         Core.Rendering
+                        Core.Styles
                         Fragments.Base
                         Fragments.NotFound
     default-language:   GHC2021

src/Core/HTTP.hs

@@ -25,9 +25,7 @@ main postNames = do
 
 -- These Middlewares are executed before any routes are reached.
 preProcessors :: [Middleware]
-preProcessors = [ logStdoutDev
+preProcessors = [ logStdoutDev ]
-                , staticPolicy $ noDots >-> addBase "data/assets/public"
-                ]
 
 -- These Middlewares are executed after all other routes are exhausted
 postProcessors :: [Middleware]
@@ -38,12 +36,13 @@ postProcessors = []
    automatically build an index of posts available to view. -}
 routes :: [FilePath] -> [Middleware]
 routes postNames  =
-  [ get "/"           Handle.index 
+  [ get "/"            Handle.index 
-  , get "/posts"    $ Handle.postsIndex postNames
+  , get "/posts"     $ Handle.postsIndex postNames
-  ]                ++ handleDynamicPosts ++
+  , get "/style.css" $ Handle.theme
-  [ get "/contact"    Handle.contact
+  ]                 ++ handleDynamicPosts ++
-  , get "/feed"     $ Handle.feed postNames
+  [ get "/contact"     Handle.contact
-  , get "/atom.xml" $ Handle.feed postNames
+  , get "/feed"      $ Handle.feed postNames
+  , get "/atom.xml"  $ Handle.feed postNames
   ] where 
       handleDynamicPosts = (buildMdRoutes postNames)
 

src/Core/Handlers.hs

@@ -1,8 +1,9 @@
 module Core.Handlers where
 
 import qualified Core.Configuration      as Conf
-import           Core.Rendering 
 import           Core.Feed               (Post(..), autoFeed, renderFeed)
+import           Core.Rendering 
+import           Core.Styles             as S
 import           Fragments.Base
 import           Fragments.NotFound
 
@@ -73,7 +74,7 @@ feed postNames = do
       -- YYYY-MM-DD HH:MM | 2024-02-24 16:36
       timeFormat :: UTCTime -> String
       timeFormat x = formatTime defaultTimeLocale "%Y-%m-%d %H:%M" x
-        
+
 -- Refer to index comments
 contact :: ResponderM a
 contact = do
@@ -82,6 +83,9 @@ contact = do
   footerMd  <- liftIO $ mdFileToLucid "./data/posts/footer.md"
   sendLucidFragment   $ basePage title (baseContact contactMd) footerMd
 
+-- Respond with primary processed CSS
+theme :: ResponderM a
+theme = send $ css $ LTE.encodeUtf8 $ S.cssRender S.composedStyles
 
 -- Helper function for responding in ResponderM from Html 
 sendLucidFragment :: Html () -> ResponderM a

src/Core/Styles.hs

@@ -0,0 +1,127 @@
+module Core.Styles where
+
+import           Clay           hiding (main_)
+import qualified Clay.Media         as M
+import           Data.Text.Lazy hiding (center)
+import           Prelude        hiding (div)
+
+cssRender :: Css -> Text
+cssRender css = renderWith compact [] css
+
+priColor, secColor, terColor :: Color
+priColor = "#f1f6f0"
+secColor = "#222323"
+terColor = "#6D92AD"
+
+composedStyles :: Css
+composedStyles = do
+  core_
+  main_
+  notFound_
+  postList_
+  nav_
+  mobileFriendly_
+
+core_ :: Css
+core_ = do
+  a_
+  body_
+  footer_
+  html_
+  p_
+
+a_ :: Css
+a_ = do
+  a      ? do
+    textDecoration    none
+    color             terColor
+
+body_ :: Css
+body_ = do
+  body   ? do
+    fontFamily   [] [monospace]
+    fontSize   $ em 1.25
+    fontWeight $ weight 300
+    textAlign    start
+    margin       (em 0) auto (em 0) auto
+    strong ? do
+      fontWeight $ weight 600
+    li ? do
+      listStyleType $ other "~> "
+
+footer_ :: Css
+footer_ = do
+  footer ? do
+    position          absolute
+    margin            (em 0) (em 0) (em 0) (em 0)
+    bottom            (em 0)
+    width           $ pct 100
+    backgroundColor $ rgba 109 146 173 0.3
+    textAlign         center  
+    padding           (em 1) (em 0) (em 1) (em 0)
+    boxSizing         borderBox
+    p ? do
+      fontSize $ em 0.75
+      margin     (em 0) (em 2) (em 0) (em 2)
+      color      priColor
+      a ? do
+        color priColor
+
+html_ :: Css
+html_ = do
+  html   ? do
+    backgroundColor priColor
+    color           secColor
+
+p_ :: Css
+p_ = do
+  p ? do
+    margin (em 0.4) (em 0) (em 0.4) (em 0)
+
+main_ :: Css
+main_ = do
+  ".main" ? do
+    margin     (em 0) auto (em 0) auto
+    maxWidth $ pct 60
+
+notFound_ :: Css
+notFound_ = do
+  ".notFound" ? do
+    margin    (em 0) auto (em 0) auto
+    textAlign center 
+    h1 ? do
+      fontSize   $ pct 500
+      fontWeight $ weight 200
+      color        terColor
+
+postList_ :: Css
+postList_ = do
+  ".postList" ? do
+    fontSize (em 1.5)
+
+nav_ :: Css
+nav_ = do
+  ".navContainer" ? do
+    margin      (em 1.5) (em 0) (em 1.5) (em 0)
+    width     $ pct 100
+    textAlign   center
+  ".mainNav" ? do
+    margin      (em 0) auto (em 0) auto
+    padding     (em 0) (em 0) (em 0) (em 0)
+    overflow    hidden
+    boxShadow . pure $ bsColor "#ccc" $ 
+      shadowWithBlur (px 4) (px 4) (px 6) 
+    display     inlineFlex
+    li ? do
+      listStyleType   none
+      a ? do
+        display       block
+        textAlign     center
+        padding       (em 0.25) (em 0.3) (em 0.25) (em 0.3)
+        textTransform lowercase
+
+mobileFriendly_ :: Css
+mobileFriendly_ = query M.screen [M.maxWidth 768] $ do
+  ".main" ? do
+    margin     (em 1) auto (em 1) auto
+    maxWidth $ pct 95