Finished porting css from sass to clay
Signed-off-by: Collin J. Doering <collin.doering@rekahsoft.ca>
This commit is contained in:
parent
81c675f7b4
commit
cd5ae7b652
|
|
@ -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
|
||||
|
|
|
|||
189
clay/Main.hs
189
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)
|
||||
|
|
|
|||
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
|
||||
-- File: PageCommon.hs
|
||||
-- Author: Collin J. Doering <collin.doering@rekahsoft.ca>
|
||||
-- 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
|
||||
Loading…
Reference in New Issue