Ported sass/_blog.sass to clay and modularized clay css files

* ported sass/_blog.sass to within clay/Header.hs (excluding use of
mixins - see comments in source)
* split up clay css into a few modules (Util, Header and Main)
* still missing any properties that were implemented as sass
  mixins (from sass/default.sass and sass/_blog.sass) as well as porting
  the following sass files (from sass/):
  * _home-page.sass
  * _contact-page.sass
  * _post-page.sass
  * _tag-page.sass
  * _src-highlight.sass

Signed-off-by: Collin J. Doering <collin.doering@rekahsoft.ca>

blog-rekahsoft-ca.cabal

@@ -79,7 +79,7 @@ executable blog-rekahsoft-ca
 
 executable gencss
   -- .hs or .lhs file containing the Main module.
-  main-is:             clay/Main.hs
+  main-is:             Main.hs
   Ghc-options: -Wall -O2
 
   -- Modules included in this executable, other than Main.
@@ -94,7 +94,7 @@ executable gencss
                        text >=1.2 && <1.3
   
   -- Directories containing source files.
-  -- hs-source-dirs:      
+  hs-source-dirs:      clay
   
   -- Base language which the package is written in.
   default-language:    Haskell2010

clay/Header.hs

@@ -0,0 +1,137 @@
+-- (C) Copyright Collin J. Doering 2015
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU General Public License as published by
+-- the Free Software Foundation, either version 3 of the License, or
+-- (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU General Public License for more details.
+--
+-- You should have received a copy of the GNU General Public License
+-- along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+-- File: Header.hs
+-- Author: Collin J. Doering <collin.doering@rekahsoft.ca>
+-- Date: Jan  9, 2015
+
+{-# LANGUAGE OverloadedStrings #-}
+
+module Header
+( logoHeader
+, navigation
+, theHeader
+) where
+
+import Clay hiding (i, s, id)
+import Prelude hiding (div, span, (**))
+
+theHeader :: Css
+theHeader = do
+  logoHeader
+  navigation
+
+logoHeader :: Css
+logoHeader = do
+  "#logo-background" ? do
+    -- @include background(linear-gradient(#cef, #cff), $fallback: #cef)
+    sym2 padding (em 0.75) nil
+
+  "#logo" ? do
+    backgroundImage $ url "/images/logo-banner.svg"
+    backgroundRepeat noRepeat
+    backgroundPosition $ positioned (pct 50) (pct 50)
+    backgroundSize contain
+    height (px 175)
+
+navigation :: Css
+navigation = do
+  "#nav" ? do
+    border solid (px 2) black
+    borderRightWidth 0
+    borderLeftWidth 0
+    backgroundImage $ url "/images/diagonal-stripes.png"
+    -- @include animation(nav-slide 5s linear infinite)
+    -- @include animation-play-state(paused)
+
+  -- "#nav" # ".loading" ?
+  --   -- @include animation-play-state(running)
+
+  "#nav-menu" ? do
+    textAlign $ alignSide sideCenter
+    marginBottom nil
+
+    li ? do
+      display inlineBlock
+      sym margin nil
+      sym2 padding (px 10) (em 3)
+
+      ".menuitem" ? do
+        display block
+        color "#eee"
+        fontSize (em 1.5)
+        fontWeight bold
+        textDecoration none
+        textShadow (px 1) (px 1) nil black
+        -- @include transition-property(transform)
+        -- @include transition-duration(20ms)
+
+      ".menuitem" # ":hover" ? do
+        color "#ddd"
+        -- @include transform(scale(1.1))
+
+      -- ".menuitem" # ":active" ? do
+      --   -- @include transform(scale(0.95))
+
+    li # ".active" ? do
+      ".menuitem" ? do
+        color "#fff"
+        textShadow (px 2) (px 2) nil black
+        -- @include transform(scale(1.2))
+
+      -- ".menuitem" # ":hover" ? do
+      --   -- @include transition(none)
+
+      -- ".menuitem" # ":active" ? do
+      --   -- @include transition(none)
+      --   -- @include transform(scale(1.1))
+
+    a # ".rss-icon" ? do
+      display inlineBlock
+      position absolute
+      backgroundImage $ url "/images/rss-icon.png"
+      backgroundSize contain
+      sym borderRadius (px 5)
+      minHeight (px 25)
+      minWidth (px 25)
+      sym margin nil
+      top (px 7)
+      right (px 10)
+
+    -- a # ".rss-icon" # ":hover" ?
+    --   -- @include transform(scale(1.1))
+
+    -- a # ".rss-icon" # ":active" ?
+    --   -- @include transform(scale(0.9))
+
+statusMessages :: Css
+statusMessages = do
+  "#status" ? do
+    display none
+    border solid (px 1) black
+    borderTop solid nil black
+    borderBottomRightRadius (px 5) (px 5)
+    borderBottomLeftRadius (px 5) (px 5)
+    backgroundColor $ rgb 146 208 240
+    -- boxShadow (px 2) (px 5) (px 5) (px 2) "#888888"
+    boxShadow (px 2) (px 5) (px 5) "#888888"
+    sym padding (px 8)
+    marginBottom (em 1.25)
+
+  "#status" # ".error" ?
+    backgroundColor "#FD6F6F"
+
+  "#status" # ".success" ? do
+    backgroundColor $ rgb 136 211 136

clay/Main.hs

@@ -21,14 +21,16 @@
 module Main where
 
 import Clay hiding (i, s, id)
-import Control.Monad
 import Data.Monoid
-import Prelude hiding (div, span)
+import Prelude hiding (div, span, (**))
 import System.Environment
 
 import qualified Clay.Media        as Media
 import qualified Data.Text.Lazy.IO as Text
 
+import Util
+import Header
+
 -- When running the stylesheet we allow the generation of compacted CSS by
 -- using 'compact' as the first argument. Otherwise we dump the default
 -- pretty printed version.
@@ -47,20 +49,72 @@ theStylesheet :: Css
 theStylesheet =
   do -- Overall site-wide styling rules.
     freeMonoFontFace
+
     body ? do
       backgroundColor "#efe"
       textFont
-    theHeadings
-    (ul <> ol) ? paddingLeft (em 1)
+
+    headings
+
+    ul <> ol ?
+      paddingLeft (em 1)
     hr ? marginBottom (em 0.5)
+
     --sup ? verticalAlign (VerticalAlignValue "super")
     sup ? do
       "vertical-align" -: "super"
     sub ? verticalAlign vAlignSub
 
-theHeadings :: Css
-theHeadings = do
-  (h1 <> h2 <> h3 <> h4 <> h5 <> h6) ? fontFamily ["FreeMono"] [monospace]
+    "#noscript-alert" ? do
+      -- @include border-box(0, #FCD4D4)
+      textAlign $ alignSide sideCenter
+      "text-align" -: "center"
+
+    "#page-content" ? do
+      opacity 1
+      -- @include transition(opacity 250ms ease-out)
+      marginTop (em 1)
+      overflow hidden
+
+      (ul <> ol) |> li ? do
+        marginBottom (em 0.02)
+
+    "#page-content" # ".loading" ?
+      opacity 0.35
+
+    "#page-content" # ".lading-done" ? do
+      -- @include transition(opacity 1s ease-in 0.5s)
+      opacity 1
+
+    "#page-content" # ".loading-error" ** p ? do
+      backgroundColor "#fd6f6f"
+      backgroundImage $ url "/images/error-loading.png"
+      backgroundRepeat noRepeat
+      backgroundPosition $ positioned (pct 50) (pct 50)
+      height (px 200)
+      fontWeight bold
+      lineHeight (px 200)
+      textAlign $ alignSide sideCenter
+
+    "#page-content" # ".init" # ".loading" ? do
+      backgroundImage $ url "/images/init-loading.gif"
+      backgroundRepeat noRepeat
+      backgroundPosition $ positioned (pct 50) (pct 50)
+      height (px 125)
+
+    "#footer-left" ? paddingLeft (em 1)
+
+    "#footer-right" ? do
+      textAlign $ alignSide sideRight
+
+    ".border-box" ? makeBorderBox Nothing Nothing
+
+    theHeader
+
+headings :: Css
+headings = do
+  h1 <> h2 <> h3 <> h4 <> h5 <> h6 ?
+    fontFamily ["FreeMono"] [monospace]
   h1 ? fontSize (em 2.5)
   h2 ? fontSize (em 2)
   h3 ? fontSize (em 1.75)
@@ -71,25 +125,25 @@ theHeadings = do
 freeMonoFontFace :: Css
 freeMonoFontFace = do
   fontFace $ do
-    fontFamily ["FreeMono"] []
+    fontFamily  ["FreeMono"] []
     fontFaceSrc [ FontFaceSrcUrl "/fonts/FreeMono.ttf" (Just TrueType)
                 , FontFaceSrcUrl "/fonts/FreeMono.woff" (Just WOFF)]
   fontFace $ do
-    fontFamily ["FreeMono"] []
+    fontFamily  ["FreeMono"] []
     fontFaceSrc [ FontFaceSrcUrl "/fonts/FreeMonoBold.ttf" (Just TrueType)
                 , FontFaceSrcUrl "/fonts/FreeMonoBold.woff" (Just WOFF)]
-    fontWeight bold
+    fontWeight  bold
   fontFace $ do
-    fontFamily ["FreeMono"] []
+    fontFamily  ["FreeMono"] []
     fontFaceSrc [ FontFaceSrcUrl "/fonts/FreeMonoOblique.ttf" (Just TrueType)
                 , FontFaceSrcUrl "/fonts/FreeMonoOblique.woff" (Just WOFF)]
-    fontStyle oblique
+    fontStyle   oblique
   fontFace $ do
-    fontFamily ["FreeMono"] []
+    fontFamily  ["FreeMono"] []
     fontFaceSrc [ FontFaceSrcUrl "/fonts/FreeMonoBoldOblique.ttf" (Just TrueType)
                 , FontFaceSrcUrl "/fonts/FreeMonoBoldOblique.woff" (Just WOFF)]
-    fontWeight bold
-    fontStyle oblique
+    fontWeight  bold
+    fontStyle   oblique
 
 textFont :: Css
 textFont = do

clay/Util.hs

@@ -0,0 +1,39 @@
+-- (C) Copyright Collin J. Doering 2015
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU General Public License as published by
+-- the Free Software Foundation, either version 3 of the License, or
+-- (at your option) any later version.
+-- 
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU General Public License for more details.
+-- 
+-- You should have received a copy of the GNU General Public License
+-- along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+-- File: Util.hs
+-- Author: Collin J. Doering <collin.doering@rekahsoft.ca>
+-- Date: Jan  9, 2015
+
+{-# LANGUAGE OverloadedStrings #-}
+module Util
+( makeBorderBox
+) where
+
+import Clay hiding (i, s, id)
+import Data.Maybe (fromMaybe)
+import Prelude hiding (div, span, (**))
+
+makeBorderBox :: Maybe (Size Abs) -> Maybe Color -> Css
+makeBorderBox pad backCol =
+  let pad' = fromMaybe (px 8) pad
+      backCol' = fromMaybe (rgba 250 250 255 165) backCol
+  in do
+    backgroundColor backCol'
+    border solid (px 1) "#888"
+    borderRadius (px 5) (px 5) (px 5) (px 5)
+    boxShadow (px 2) (px 5) (px 2) "#888"
+    sym padding pad'
+    marginBottom (em 1.25)