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>
This commit is contained in:
parent
c64af63d82
commit
7b08488815
|
@ -79,7 +79,7 @@ executable blog-rekahsoft-ca
|
||||||
|
|
||||||
executable gencss
|
executable gencss
|
||||||
-- .hs or .lhs file containing the Main module.
|
-- .hs or .lhs file containing the Main module.
|
||||||
main-is: clay/Main.hs
|
main-is: Main.hs
|
||||||
Ghc-options: -Wall -O2
|
Ghc-options: -Wall -O2
|
||||||
|
|
||||||
-- Modules included in this executable, other than Main.
|
-- Modules included in this executable, other than Main.
|
||||||
|
@ -94,7 +94,7 @@ executable gencss
|
||||||
text >=1.2 && <1.3
|
text >=1.2 && <1.3
|
||||||
|
|
||||||
-- Directories containing source files.
|
-- Directories containing source files.
|
||||||
-- hs-source-dirs:
|
hs-source-dirs: clay
|
||||||
|
|
||||||
-- Base language which the package is written in.
|
-- Base language which the package is written in.
|
||||||
default-language: Haskell2010
|
default-language: Haskell2010
|
||||||
|
|
|
@ -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
|
84
clay/Main.hs
84
clay/Main.hs
|
@ -21,14 +21,16 @@
|
||||||
module Main where
|
module Main where
|
||||||
|
|
||||||
import Clay hiding (i, s, id)
|
import Clay hiding (i, s, id)
|
||||||
import Control.Monad
|
|
||||||
import Data.Monoid
|
import Data.Monoid
|
||||||
import Prelude hiding (div, span)
|
import Prelude hiding (div, span, (**))
|
||||||
import System.Environment
|
import System.Environment
|
||||||
|
|
||||||
import qualified Clay.Media as Media
|
import qualified Clay.Media as Media
|
||||||
import qualified Data.Text.Lazy.IO as Text
|
import qualified Data.Text.Lazy.IO as Text
|
||||||
|
|
||||||
|
import Util
|
||||||
|
import Header
|
||||||
|
|
||||||
-- When running the stylesheet we allow the generation of compacted CSS by
|
-- When running the stylesheet we allow the generation of compacted CSS by
|
||||||
-- using 'compact' as the first argument. Otherwise we dump the default
|
-- using 'compact' as the first argument. Otherwise we dump the default
|
||||||
-- pretty printed version.
|
-- pretty printed version.
|
||||||
|
@ -47,20 +49,72 @@ theStylesheet :: Css
|
||||||
theStylesheet =
|
theStylesheet =
|
||||||
do -- Overall site-wide styling rules.
|
do -- Overall site-wide styling rules.
|
||||||
freeMonoFontFace
|
freeMonoFontFace
|
||||||
|
|
||||||
body ? do
|
body ? do
|
||||||
backgroundColor "#efe"
|
backgroundColor "#efe"
|
||||||
textFont
|
textFont
|
||||||
theHeadings
|
|
||||||
(ul <> ol) ? paddingLeft (em 1)
|
headings
|
||||||
|
|
||||||
|
ul <> ol ?
|
||||||
|
paddingLeft (em 1)
|
||||||
hr ? marginBottom (em 0.5)
|
hr ? marginBottom (em 0.5)
|
||||||
|
|
||||||
--sup ? verticalAlign (VerticalAlignValue "super")
|
--sup ? verticalAlign (VerticalAlignValue "super")
|
||||||
sup ? do
|
sup ? do
|
||||||
"vertical-align" -: "super"
|
"vertical-align" -: "super"
|
||||||
sub ? verticalAlign vAlignSub
|
sub ? verticalAlign vAlignSub
|
||||||
|
|
||||||
theHeadings :: Css
|
"#noscript-alert" ? do
|
||||||
theHeadings = do
|
-- @include border-box(0, #FCD4D4)
|
||||||
(h1 <> h2 <> h3 <> h4 <> h5 <> h6) ? fontFamily ["FreeMono"] [monospace]
|
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)
|
h1 ? fontSize (em 2.5)
|
||||||
h2 ? fontSize (em 2)
|
h2 ? fontSize (em 2)
|
||||||
h3 ? fontSize (em 1.75)
|
h3 ? fontSize (em 1.75)
|
||||||
|
@ -71,25 +125,25 @@ theHeadings = do
|
||||||
freeMonoFontFace :: Css
|
freeMonoFontFace :: Css
|
||||||
freeMonoFontFace = do
|
freeMonoFontFace = do
|
||||||
fontFace $ do
|
fontFace $ do
|
||||||
fontFamily ["FreeMono"] []
|
fontFamily ["FreeMono"] []
|
||||||
fontFaceSrc [ FontFaceSrcUrl "/fonts/FreeMono.ttf" (Just TrueType)
|
fontFaceSrc [ FontFaceSrcUrl "/fonts/FreeMono.ttf" (Just TrueType)
|
||||||
, FontFaceSrcUrl "/fonts/FreeMono.woff" (Just WOFF)]
|
, FontFaceSrcUrl "/fonts/FreeMono.woff" (Just WOFF)]
|
||||||
fontFace $ do
|
fontFace $ do
|
||||||
fontFamily ["FreeMono"] []
|
fontFamily ["FreeMono"] []
|
||||||
fontFaceSrc [ FontFaceSrcUrl "/fonts/FreeMonoBold.ttf" (Just TrueType)
|
fontFaceSrc [ FontFaceSrcUrl "/fonts/FreeMonoBold.ttf" (Just TrueType)
|
||||||
, FontFaceSrcUrl "/fonts/FreeMonoBold.woff" (Just WOFF)]
|
, FontFaceSrcUrl "/fonts/FreeMonoBold.woff" (Just WOFF)]
|
||||||
fontWeight bold
|
fontWeight bold
|
||||||
fontFace $ do
|
fontFace $ do
|
||||||
fontFamily ["FreeMono"] []
|
fontFamily ["FreeMono"] []
|
||||||
fontFaceSrc [ FontFaceSrcUrl "/fonts/FreeMonoOblique.ttf" (Just TrueType)
|
fontFaceSrc [ FontFaceSrcUrl "/fonts/FreeMonoOblique.ttf" (Just TrueType)
|
||||||
, FontFaceSrcUrl "/fonts/FreeMonoOblique.woff" (Just WOFF)]
|
, FontFaceSrcUrl "/fonts/FreeMonoOblique.woff" (Just WOFF)]
|
||||||
fontStyle oblique
|
fontStyle oblique
|
||||||
fontFace $ do
|
fontFace $ do
|
||||||
fontFamily ["FreeMono"] []
|
fontFamily ["FreeMono"] []
|
||||||
fontFaceSrc [ FontFaceSrcUrl "/fonts/FreeMonoBoldOblique.ttf" (Just TrueType)
|
fontFaceSrc [ FontFaceSrcUrl "/fonts/FreeMonoBoldOblique.ttf" (Just TrueType)
|
||||||
, FontFaceSrcUrl "/fonts/FreeMonoBoldOblique.woff" (Just WOFF)]
|
, FontFaceSrcUrl "/fonts/FreeMonoBoldOblique.woff" (Just WOFF)]
|
||||||
fontWeight bold
|
fontWeight bold
|
||||||
fontStyle oblique
|
fontStyle oblique
|
||||||
|
|
||||||
textFont :: Css
|
textFont :: Css
|
||||||
textFont = do
|
textFont = do
|
||||||
|
|
|
@ -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)
|
Loading…
Reference in New Issue