From 1e167679f6827c7119d616633b21fffef269cd75 Mon Sep 17 00:00:00 2001 From: Joris Date: Sat, 31 Oct 2020 15:24:26 +0100 Subject: Use only HTML and CSS --- css/Body.hs | 36 ------------------------ css/Color.hs | 27 ------------------ css/Header.hs | 53 ----------------------------------- css/IconLink.hs | 31 -------------------- css/Link.hs | 23 --------------- css/Media.hs | 36 ------------------------ css/NotFound.hs | 20 ------------- css/Project.hs | 19 ------------- css/Resume.hs | 87 --------------------------------------------------------- css/Section.hs | 43 ---------------------------- css/Size.hs | 24 ---------------- css/Skills.hs | 22 --------------- css/Style.hs | 58 -------------------------------------- 13 files changed, 479 deletions(-) delete mode 100644 css/Body.hs delete mode 100644 css/Color.hs delete mode 100644 css/Header.hs delete mode 100644 css/IconLink.hs delete mode 100644 css/Link.hs delete mode 100644 css/Media.hs delete mode 100644 css/NotFound.hs delete mode 100644 css/Project.hs delete mode 100644 css/Resume.hs delete mode 100644 css/Section.hs delete mode 100644 css/Size.hs delete mode 100644 css/Skills.hs delete mode 100644 css/Style.hs (limited to 'css') diff --git a/css/Body.hs b/css/Body.hs deleted file mode 100644 index 0ff8df0..0000000 --- a/css/Body.hs +++ /dev/null @@ -1,36 +0,0 @@ -{-# LANGUAGE OverloadedStrings #-} - -module Body - ( style - ) where - -import Clay hiding (style) -import Prelude hiding ((**)) - -import qualified Color -import qualified Link -import qualified Media -import qualified Size - -style :: Css -style = do - - ".Body__Container" ** p ? do - Media.desktop $ marginRight (pct 20) - lineHeight (px 28) - - ".Body__Container" ** ul ? do - paddingLeft (px 0) - Media.desktop $ margin (px 20) (px 0) (px 20) (px 30) - Media.tablet $ margin (px 15) (px 0) (px 15) (px 20) - Media.mobile $ marginBottom Size.listItemSep - - ".Body__Container" ** li ? do - Size.lineHeight - before & do - content (stringContent "•") - color Color.red - display inlineBlock - marginRight (px 10) - - Link.style (".Body__Container" ** a) diff --git a/css/Color.hs b/css/Color.hs deleted file mode 100644 index bfc8134..0000000 --- a/css/Color.hs +++ /dev/null @@ -1,27 +0,0 @@ -module Color where - -import qualified Clay.Color as C - -white :: C.Color -white = C.white - -red :: C.Color -red = C.rgb 170 57 57 - -orange :: C.Color -orange = C.rgb 182 119 25 - -green :: C.Color -green = C.rgb 0 93 0 - -blue :: C.Color -blue = C.rgb 79 182 187 - -black :: C.Color -black = C.rgb 0 0 0 - -link :: C.Color -link = blue C.-. 70 - -gray :: C.Color -gray = C.rgb 100 100 100 diff --git a/css/Header.hs b/css/Header.hs deleted file mode 100644 index ab58b0c..0000000 --- a/css/Header.hs +++ /dev/null @@ -1,53 +0,0 @@ -{-# LANGUAGE OverloadedStrings #-} - -module Header - ( style - ) where - -import Data.Monoid ((<>)) - -import Clay hiding (style) -import Clay.Display (displayTable) - -import qualified Color as Color -import qualified Media as Media - -style :: Css -style = do - - ".Header__Container" ? do - backgroundColor Color.red - color Color.white - fontSize (px 28) - display flex - - ".Header__Link" ? do - display flex - justifyContent center - alignItems center - flexGrow 1 - flexBasis (px 0) - height (em 3) - lineHeight (em 3) - textDecoration none - padding (px 0) (px 0) (px 0) (px 0) - textAlign (alignSide sideCenter) - color Color.white - textTransform capitalize - transition "background-color" (ms 500) ease (sec 0) - Media.tablet $ fontSize (em 0.8) - Media.mobile $ fontSize (em 0.6) - - (".Header__Link" # hover <> ".Header__Link" # focus <> ".Header__LinkCurrent") ? do - backgroundColor Color.red - borderBottomStyle solid - borderBottomColor (Color.red +. 40) - Media.mobile $ borderBottomWidth (px 6) - Media.tablet $ borderBottomWidth (px 8) - Media.desktop $ borderBottomWidth (px 10) - - ".Header__Icon" ? do - display flex - height (px 40) - marginRight (px 20) - Media.mobile $ display none diff --git a/css/IconLink.hs b/css/IconLink.hs deleted file mode 100644 index 9abbb5d..0000000 --- a/css/IconLink.hs +++ /dev/null @@ -1,31 +0,0 @@ -{-# LANGUAGE OverloadedStrings #-} - -module IconLink - ( style - ) where - -import Clay hiding (style) - -import qualified Link -import qualified Media - -style :: Css -style = do - - Link.style ".IconLink__Link" - - ".IconLink__Link" ? do - display inlineFlex - alignItems center - marginBottom (px 15) - - Media.desktop $ fontSize (px 18) - Media.tablet $ fontSize (px 16) - Media.mobile $ fontSize (px 14) - - ".IconLink__Icon" ? do - marginRight (px 12) - - Media.desktop $ height (px 20) - Media.tablet $ height (px 16) - Media.mobile $ height (px 14) diff --git a/css/Link.hs b/css/Link.hs deleted file mode 100644 index ba3b090..0000000 --- a/css/Link.hs +++ /dev/null @@ -1,23 +0,0 @@ -{-# LANGUAGE OverloadedStrings #-} - -module Link - ( style - ) where - -import Clay hiding (style) -import Clay.Selector (Fix, SelectorF (SelectorF)) - -import qualified Color - -style :: (Fix SelectorF) -> Css -style selector = do - - selector ? do - textDecoration none - color Color.link - transition "color" (sec 0.3) easeOut (sec 0) - focus & outline solid (px 0) Color.white - - (selector # hover) <> (selector # focus) ? do - textDecoration underline - color Color.blue diff --git a/css/Media.hs b/css/Media.hs deleted file mode 100644 index f9b56e1..0000000 --- a/css/Media.hs +++ /dev/null @@ -1,36 +0,0 @@ -module Media - ( mobile - , mobileTablet - , tablet - , tabletDesktop - , desktop - ) where - -import Clay hiding (query) -import qualified Clay -import qualified Clay.Media as Media -import Clay.Stylesheet (Feature) - -mobile :: Css -> Css -mobile = query [Media.maxWidth mobileTabletLimit] - -mobileTablet :: Css -> Css -mobileTablet = query [Media.maxWidth tabletDesktopLimit] - -tablet :: Css -> Css -tablet = query [Media.minWidth mobileTabletLimit, Media.maxWidth tabletDesktopLimit] - -tabletDesktop :: Css -> Css -tabletDesktop = query [Media.minWidth mobileTabletLimit] - -desktop :: Css -> Css -desktop = query [Media.minWidth tabletDesktopLimit] - -query :: [Feature] -> Css -> Css -query = Clay.query Media.screen - -mobileTabletLimit :: Size LengthUnit -mobileTabletLimit = (px 520) - -tabletDesktopLimit :: Size LengthUnit -tabletDesktopLimit = (px 950) diff --git a/css/NotFound.hs b/css/NotFound.hs deleted file mode 100644 index ee8a0af..0000000 --- a/css/NotFound.hs +++ /dev/null @@ -1,20 +0,0 @@ -{-# LANGUAGE OverloadedStrings #-} - -module Design.NotFound - ( notFoundCss - ) where - -import Clay - -notFoundCss :: Css -notFoundCss = - - ".notFoundPage" ? do - - h1 ? do - fontSize (px 40) - fontWeight bold - margin (px 20) (px 20) (px 20) (px 20) - - p ? - margin (px 20) (px 20) (px 20) (px 20) diff --git a/css/Project.hs b/css/Project.hs deleted file mode 100644 index 4d17e42..0000000 --- a/css/Project.hs +++ /dev/null @@ -1,19 +0,0 @@ -{-# LANGUAGE OverloadedStrings #-} - -module Project - ( style - ) where - -import qualified Color -import Clay hiding (style) - -style :: Css -style = do - - ".Project__Body" ? do - marginTop (px 20) - - ".Project__Body" ? img ? do - border solid (px 1) Color.gray - sym borderRadius (px 8) - width (pct 100) diff --git a/css/Resume.hs b/css/Resume.hs deleted file mode 100644 index ec7af62..0000000 --- a/css/Resume.hs +++ /dev/null @@ -1,87 +0,0 @@ -{-# LANGUAGE OverloadedStrings #-} - -module Resume - ( style - ) where - -import Clay hiding (style) - -import qualified Color -import qualified Media -import qualified Size - -style :: Css -style = do - - ".Resume__NameAndPrint" ? do - display flex - justifyContent spaceBetween - - ".Resume__Print" ? do - color Color.red - transition "all" (ms 100) ease (sec 0) - hover & transform (scale 1.2 1.2) - marginLeft (px 10) - - Media.desktop $ do - lineHeight (px 50) - height (px 50) - fontSize (px 40) - - Media.tablet $ do - lineHeight (px 40) - height (px 40) - fontSize (px 30) - - Media.mobile $ do - lineHeight (px 30) - height (px 30) - fontSize (px 20) - - ".Resume__GitLabLink" ? do - Media.desktop $ marginLeft (px 30) - Media.tablet $ marginLeft (px 20) - - ".Resume__Container" ? do - Media.desktop $ do - marginBottom (px 40) - marginLeft (px 30) - Media.tablet $ do - marginBottom (px 40) - marginLeft (px 20) - Media.mobile $ - marginBottom (px 25) - - ".Resume__Name" <> ".Resume__Location" <> ".Resume__Description" ? do - Size.lineHeight - - ".Resume__Name" ? do - backgroundColor Color.orange - color Color.white - padding (px 0) (px 10) (px 0) (px 10) - sym borderRadius (px 2) - - Media.desktop $ do - display inlineBlock - marginBottom (px 10) - - Media.mobileTablet $ - marginBottom (px 10) - - ".Resume__Time" ? do - fontStyle italic - marginBottom (px 10) - - Media.desktop $ do - display inlineBlock - marginLeft (px 15) - - Media.mobile $ - fontSize (pct 90) - - ".Resume__Location" ? do - color Color.green - Size.tabletMarginBottom - Media.mobile $ do - fontSize (pct 90) - marginBottom (px 10) diff --git a/css/Section.hs b/css/Section.hs deleted file mode 100644 index 4e236a3..0000000 --- a/css/Section.hs +++ /dev/null @@ -1,43 +0,0 @@ -{-# LANGUAGE OverloadedStrings #-} - -module Section - ( style - ) where - -import Clay hiding (style) - -import qualified Color -import qualified Media - -style :: Css -style = do - - ".Section__Container" ? do - position relative - margin (pct 0) (pct 10) (pct 0) (pct 10) - - ".Section__Title" ? do - color Color.red - fontFamily [] [monospace] - fontWeight bold - - Media.desktop $ do - lineHeight (px 50) - fontSize (px 30) - marginBottom (px 40) - marginTop (px 55) - - Media.tablet $ do - lineHeight (px 40) - fontSize (px 27) - marginBottom (px 35) - marginTop (px 45) - - Media.mobile $ do - lineHeight (px 30) - fontSize (px 22) - marginBottom (px 20) - marginTop (px 35) - - ".Section__Entries" ? do - paddingLeft (px 0) diff --git a/css/Size.hs b/css/Size.hs deleted file mode 100644 index 1fc097b..0000000 --- a/css/Size.hs +++ /dev/null @@ -1,24 +0,0 @@ -module Size - ( lineHeight - , listItemSep - , tabletMarginBottom - ) where - -import Clay hiding (lineHeight) -import qualified Clay - -import qualified Media - -lineHeight :: Css -lineHeight = do - Media.desktop $ Clay.lineHeight (px 40) - Media.tablet $ Clay.lineHeight (px 35) - Media.mobile $ Clay.lineHeight (px 30) - -listItemSep :: Size LengthUnit -listItemSep = - px 8 - -tabletMarginBottom :: Css -tabletMarginBottom = - Media.tablet $ marginBottom (px 15) diff --git a/css/Skills.hs b/css/Skills.hs deleted file mode 100644 index 96ef74e..0000000 --- a/css/Skills.hs +++ /dev/null @@ -1,22 +0,0 @@ -{-# LANGUAGE OverloadedStrings #-} - -module Skills - ( style - ) where - -import Clay hiding (style) -import qualified Clay.Flexbox as CF - -style :: Css -style = do - - ".Skills__List" ? do - display flex - flexWrap CF.wrap - sym2 margin (px 5) (px 0) - paddingLeft (px 0) - - ".Skills__Item" ? do - lineHeight normal - borderBottom solid (px 2) lightgray - margin (px 10) (px 15) (px 5) (px 0) diff --git a/css/Style.hs b/css/Style.hs deleted file mode 100644 index f53ca1e..0000000 --- a/css/Style.hs +++ /dev/null @@ -1,58 +0,0 @@ -{-# LANGUAGE OverloadedStrings #-} - -import Clay -import qualified Data.Text.Lazy.IO as T - -import qualified Body -import qualified Color -import qualified Header -import qualified IconLink -import qualified Media -import qualified Project -import qualified Resume -import qualified Section -import qualified Skills - -main :: IO () -main = T.putStrLn . renderWith compact [] $ do - - appearKeyframes - - body ? do - overflowX hidden - color Color.black - margin (px 0) (px 0) (px 40) (px 0) - Media.mobile $ fontSize (px 16) - Media.tabletDesktop $ fontSize (px 18) - - ".Main__Container" ? do - animationName "appear" - animationDuration (sec 0.2) - animationTimingFunction easeIn - animationIterationCount (iterationCount 1.0) - - svg ? do - width inherit - height inherit - - ul ? do - listStyleType none - paddingLeft (px 0) - - Body.style - Header.style - IconLink.style - Project.style - Resume.style - Section.style - Skills.style - -appearKeyframes :: Css -appearKeyframes = keyframes - "appear" - [ (0, do - "transform" -: "translateX(10px)" - opacity 0 - ) - , (100, "transform" -: "translateX(0px)") - ] -- cgit v1.2.3