diff --git a/blog-rekahsoft-ca.cabal b/blog-rekahsoft-ca.cabal
index bee7e94..1d0139e 100644
--- a/blog-rekahsoft-ca.cabal
+++ b/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
diff --git a/clay/Header.hs b/clay/Header.hs
new file mode 100644
index 0000000..14e86dc
--- /dev/null
+++ b/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 .
+
+-- File: Header.hs
+-- Author: Collin J. Doering
+-- 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
diff --git a/clay/Main.hs b/clay/Main.hs
index 9b3d5e5..02a43ff 100644
--- a/clay/Main.hs
+++ b/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
diff --git a/clay/Util.hs b/clay/Util.hs
new file mode 100644
index 0000000..5c603ea
--- /dev/null
+++ b/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 .
+
+-- File: Util.hs
+-- Author: Collin J. Doering
+-- 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)