diff --git a/clay/Header.hs b/clay/Header.hs
index 14e86dc..96707af 100644
--- a/clay/Header.hs
+++ b/clay/Header.hs
@@ -32,11 +32,13 @@ theHeader :: Css
theHeader = do
logoHeader
navigation
+ statusMessage
logoHeader :: Css
logoHeader = do
"#logo-background" ? do
- -- @include background(linear-gradient(#cef, #cff), $fallback: #cef)
+ backgroundColor "#cef" -- fallback background color
+ backgroundImage $ vGradient "#cef" "#cff"
sym2 padding (em 0.75) nil
"#logo" ? do
@@ -48,16 +50,20 @@ logoHeader = do
navigation :: Css
navigation = do
+ keyframesFromTo "nav-slide"
+ (backgroundPosition $ positioned nil nil)
+ (backgroundPosition $ positioned (px 304) nil)
+
"#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)
+ animation "nav-slide" (sec 5) linear (sec 0) infinite normal none
+ animationPlayState paused
- -- "#nav" # ".loading" ?
- -- -- @include animation-play-state(running)
+ "#nav" # ".loading" ?
+ animationPlayState running
"#nav-menu" ? do
textAlign $ alignSide sideCenter
@@ -75,28 +81,28 @@ navigation = do
fontWeight bold
textDecoration none
textShadow (px 1) (px 1) nil black
- -- @include transition-property(transform)
- -- @include transition-duration(20ms)
+ transitionProperty "transform"
+ transitionDuration (ms 20)
".menuitem" # ":hover" ? do
color "#ddd"
- -- @include transform(scale(1.1))
+ transform $ scale 1.1 1.1
- -- ".menuitem" # ":active" ? do
- -- -- @include transform(scale(0.95))
+ ".menuitem" # ":active" ? do
+ transform $ scale 0.95 0.95
li # ".active" ? do
".menuitem" ? do
color "#fff"
textShadow (px 2) (px 2) nil black
- -- @include transform(scale(1.2))
+ transform $ scale 1.2 1.2
-- ".menuitem" # ":hover" ? do
- -- -- @include transition(none)
+ -- transitionProperty "none" -- WHY? this doesn't seem to be needed.
- -- ".menuitem" # ":active" ? do
- -- -- @include transition(none)
- -- -- @include transform(scale(1.1))
+ ".menuitem" # ":active" ? do
+ -- transitionProperty "none" -- WHY? this doesn't seem to be needed.
+ transform $ scale 1.1 1.1
a # ".rss-icon" ? do
display inlineBlock
@@ -110,14 +116,14 @@ navigation = do
top (px 7)
right (px 10)
- -- a # ".rss-icon" # ":hover" ?
- -- -- @include transform(scale(1.1))
+ a # ".rss-icon" # ":hover" ? do
+ transform $ scale 1.1 1.1
- -- a # ".rss-icon" # ":active" ?
- -- -- @include transform(scale(0.9))
+ a # ".rss-icon" # ":active" ? do
+ transform $ scale 0.9 0.9
-statusMessages :: Css
-statusMessages = do
+statusMessage :: Css
+statusMessage = do
"#status" ? do
display none
border solid (px 1) black
diff --git a/clay/Main.hs b/clay/Main.hs
index 02a43ff..87b4974 100644
--- a/clay/Main.hs
+++ b/clay/Main.hs
@@ -30,6 +30,7 @@ import qualified Data.Text.Lazy.IO as Text
import Util
import Header
+import PageComponents
-- When running the stylesheet we allow the generation of compacted CSS by
-- using 'compact' as the first argument. Otherwise we dump the default
@@ -50,77 +51,28 @@ theStylesheet =
do -- Overall site-wide styling rules.
freeMonoFontFace
- body ? do
- backgroundColor "#efe"
- textFont
-
- headings
-
- ul <> ol ?
- paddingLeft (em 1)
- hr ? marginBottom (em 0.5)
-
- --sup ? verticalAlign (VerticalAlignValue "super")
- sup ? do
- "vertical-align" -: "super"
- sub ? verticalAlign vAlignSub
+ -- Styles for miscellaneous elements (h1, ..., h6, body, ul, ol, li, etc..)
+ theElements
+ -- Style noscipt error message
"#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)
+ makeBorderBox (Just nil) (Just "#FCD4D4")
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
-
+ -- Site broken into three parts
theHeader
+ pageContent
+ theFooter
-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)
- h4 ? fontSize (em 1.5)
- h5 ? fontSize (em 1.25)
- h6 ? fontSize (em 1)
+ ".border-box" ?
+ makeBorderBox Nothing Nothing
+
+ -- Style page components (business card, posts, etc..)
+ pageComponents
+
+ -- Styles to make site reactive (@media queries)
+ reactiveStyles
freeMonoFontFace :: Css
freeMonoFontFace = do
@@ -145,9 +97,106 @@ freeMonoFontFace = do
fontWeight bold
fontStyle oblique
-textFont :: Css
-textFont = do
- fontSize (px 14)
- lineHeight (px 21)
- fontFamily ["FreeMono"] [monospace]
- textRendering optimizeLegibility
+theElements :: Css
+theElements = do
+ body ? do
+ backgroundColor "#efe"
+ fontSize (px 14)
+ lineHeight (px 21)
+ fontFamily ["FreeMono"] [monospace]
+ textRendering optimizeLegibility
+
+ h1 <> h2 <> h3 <> h4 <> h5 <> h6 ?
+ fontFamily ["FreeMono"] [monospace]
+ h1 ? fontSize (em 2.5)
+ h2 ? fontSize (em 2)
+ h3 ? fontSize (em 1.75)
+ h4 ? fontSize (em 1.5)
+ h5 ? fontSize (em 1.25)
+ h6 ? fontSize (em 1)
+
+ ul <> ol ?
+ paddingLeft (em 1)
+ hr ? marginBottom (em 0.5)
+
+ --sup ? verticalAlign (VerticalAlignValue "super")
+ sup ? do
+ "vertical-align" -: "super"
+ sub ? verticalAlign vAlignSub
+
+pageContent :: Css
+pageContent = do
+ "#page-content" ? do
+ opacity 1
+ transition "opacity" (ms 250) easeOut (sec 0)
+ marginTop (em 1)
+ overflow hidden
+
+ (ul <> ol) |> li ? do
+ marginBottom (em 0.02)
+
+ "#page-content" # ".loading" ?
+ opacity 0.35
+
+ "#page-content" # ".lading-done" ? do
+ transition "opacity" (sec 1) easeIn (sec 0.5)
+ 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)
+
+theFooter :: Css
+theFooter = do
+ "#footer-left" ?
+ paddingLeft (em 1)
+
+ "#footer-right" ? do
+ textAlign $ alignSide sideRight
+
+reactiveStyles :: Css
+reactiveStyles = do
+ -- Smaller than standard 960 (devices and browsers)
+ -- queryOnly Media.screen [Media.maxWidth (px 959) $ do { ... }
+
+ -- Tablet Portrait size to standard 960 (devices and browsers)
+ -- queryOnly Media.screen [Media.minWidth (px 768), Media.maxWidth (px 959)] $ do { ... }
+
+ -- All Mobile Sizes (devices and browser)
+ queryOnly Media.screen [Media.maxWidth (px 767)] $ do
+ "#footer-left" <> "#footer-right" ? do
+ textAlign $ alignSide sideCenter
+
+ "#logo" ?
+ height (px 130)
+
+ -- Mobile Landscape Size to Tablet Portrait (devices and browsers)
+ queryOnly Media.screen [Media.minWidth (px 480), Media.maxWidth (px 767)] $ do
+ "#logo-background" ?
+ sym2 padding (em 0.5) nil
+
+ "#nav-menu" ** li ?
+ sym2 padding (px 10) (em 1.5)
+
+ "#footer-left" ?
+ paddingLeft nil
+
+ -- Mobile Portrait Size to Mobile Landscape Size (devices and browsers)
+ queryOnly Media.screen [Media.maxWidth (px 476)] $ do
+ "#logo-background" ?
+ sym padding nil
+
+ "#nav-menu" ** li ?
+ sym2 padding (px 10) (px 5)
diff --git a/clay/PageComponents.hs b/clay/PageComponents.hs
new file mode 100644
index 0000000..fbc9e16
--- /dev/null
+++ b/clay/PageComponents.hs
@@ -0,0 +1,221 @@
+-- (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: PageCommon.hs
+-- Author: Collin J. Doering
+-- Date: Jan 10, 2015
+
+{-# LANGUAGE OverloadedStrings #-}
+
+module PageComponents
+( aPost
+, businessCard
+, tagPageHeading
+, pageComponents
+) where
+
+import Clay hiding (i, s, id)
+import Data.Monoid
+import Prelude hiding (div, span, (**))
+
+import Util
+
+pageComponents :: Css
+pageComponents = do
+ aPost
+ businessCard
+ tagPageHeading
+ srcCodeBlock
+
+aPost :: Css
+aPost = do
+ ".post" ? do
+ makeBorderBox Nothing Nothing
+
+ header ? do
+ marginBottom (em 0.8)
+ border solid (px 2) "#eee"
+ sym borderRadius (px 3)
+ sym padding (em 0.35)
+ paddingLeft (px 65)
+
+ ".title" ? do
+ fontSize (em 2)
+ fontWeight bold
+ textDecoration underline
+ marginBottom nil
+ lineHeight (px 35)
+
+ ".title" # ":before" ? do
+ content $ stringContent ""
+ display block
+ backgroundImage $ url "/images/post-icon.svg"
+ backgroundRepeat noRepeat
+ backgroundPosition $ positioned (pct 50) (pct 50)
+ backgroundSize contain
+ height (px 55)
+ width (px 65)
+ marginLeft (px (-65))
+ position absolute
+
+ ".info" ? do
+ marginBottom nil
+ textIndent $ indent (em 1)
+ fontSize (em 0.75)
+
+ ".date" ? fontWeight bold
+ ".author" ? fontStyle oblique
+
+ footer ? do
+ padding (em 0.75) nil (em 0.25) nil
+ borderTop solid (px 1) "#eee"
+
+ ".read-more" ? fontWeight bold
+ ".no-teaser" ? do
+ display block
+ content $ stringContent ""
+ height (px 1)
+
+ ".tags" # ":before" ? do
+ content $ stringContent ""
+ backgroundImage $ url "/images/tag.svg"
+ backgroundSize contain
+ backgroundRepeat noRepeat
+ backgroundPosition $ positioned (pct 50) (pct 50)
+ sym2 padding (px 3) (em 1.3)
+
+ ".tags" ? do
+ marginBottom nil
+ paddingRight (em 1.5)
+ float floatRight
+
+ ".post" |> p ? do
+ textIndent $ indent (em 1.5)
+ textAlign justify
+
+ "#pagination" ? makeBorderBox Nothing Nothing
+
+businessCard :: Css
+businessCard = do
+ "#business-card" ? do
+ border solid (px 2) black
+ sym borderRadius (px 5)
+ sym padding (px 10)
+ minHeight (px 215)
+ maxWidth (px 550)
+ sym2 margin nil auto
+
+ ".photo" ? do
+ backgroundImage $ url "/images/business-card.png"
+ border solid (px 1) black
+ sym borderRadius (px 10)
+ minHeight (px 215)
+ minWidth (px 150)
+ float floatLeft
+ marginRight (px 10)
+
+ ".info" ? do
+ borderTop solid (px 2) black
+ overflow hidden
+ paddingTop (px 8)
+
+ star ? display block
+ ".name" ? fontWeight bold
+
+tagPageHeading :: Css
+tagPageHeading = do
+ "#tag" ? do
+ textTransform capitalize
+ marginBottom (px 8)
+
+ "#tag" # ":before" ? do
+ content $ stringContent ""
+ backgroundImage $ url "/images/tagged.svg"
+ backgroundSize contain
+ backgroundRepeat noRepeat
+ backgroundPosition $ positioned (pct 50) (pct 50)
+ sym2 padding (px 24) (px 39)
+ margin nil (em 0.35) nil (em 0.1)
+
+srcCodeBlock :: Css
+srcCodeBlock = do
+ ".code-term" # ".sourceCode" ? do
+ display block
+ backgroundColor "#111"
+ color white
+ sym borderRadius (px 3)
+ sym2 padding (em 0.5) nil
+ marginBottom (em 0.75)
+ overflow auto
+ maxHeight (em 50)
+
+ (table # ".sourceCode") <>
+ (tr # ".sourceCode") <>
+ (td # ".lineNumbers") <>
+ (td # ".sourceCode") <>
+ (table # ".sourceCode" ** pre) ? do
+ sym margin nil
+ sym padding nil
+ border none nil black
+ verticalAlign baseline
+
+ td # ".lineNumbers" ? do
+ borderRight solid (px 1) "#AAAAAA"
+ textAlign $ alignSide sideRight
+ color "#AAAAAA"
+ paddingLeft (px 8)
+ paddingRight (px 8)
+
+ td # ".sourceCode" ?
+ paddingLeft (px 5)
+
+ (pre <> code) # ".sourceCode" ** span # ".kw" ? do
+ color "#007020"
+ fontWeight bold
+
+ (pre <> code) # ".sourceCode" ** span # ".dt" ?
+ color "#902000"
+
+ (pre <> code) # ".sourceCode" ** span # ".dv" ?
+ color "#40a070"
+
+ (pre <> code) # ".sourceCode" ** span # ".bn" ?
+ color "#40a070"
+
+ (pre <> code) # ".sourceCode" ** span # ".fl" ?
+ color "#40a070"
+
+ (pre <> code) # ".sourceCode" ** span # ".ch" ?
+ color "#4070a0"
+
+ (pre <> code) # ".sourceCode" ** span # ".st" ?
+ color "#4070a0"
+
+ (pre <> code) # ".sourceCode" ** span # ".co" ? do
+ color "#60a0b0"
+ fontStyle italic
+
+ (pre <> code) # ".sourceCode" ** span # ".al" ? do
+ color red
+ fontWeight bold
+
+ (pre <> code) # ".sourceCode" ** span # ".fu" ?
+ color "#06287e"
+
+ -- (pre <> code) # ".sourceCode" ** span # ".re"
+
+ (pre <> code) # ".sourceCode" ** span # ".er" ? do
+ color red
+ fontWeight bold