From cd5ae7b65204b9cd565cd201bb98e686d3f552b9 Mon Sep 17 00:00:00 2001 From: "Collin J. Doering" Date: Sat, 10 Jan 2015 16:36:56 -0500 Subject: [PATCH] Finished porting css from sass to clay Signed-off-by: Collin J. Doering --- clay/Header.hs | 48 +++++---- clay/Main.hs | 189 ++++++++++++++++++++++------------- clay/PageComponents.hs | 221 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 367 insertions(+), 91 deletions(-) create mode 100644 clay/PageComponents.hs 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