Setup personal page with Hakyll

13 files changed, 472 insertions, 0 deletions

diff --git a/css/Body.hs b/css/Body.hs
new file mode 100644
index 0000000..74aa969
--- /dev/null
+++ b/css/Body.hs
@@ -0,0 +1,35 @@
+{-# 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
+    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
new file mode 100644
index 0000000..bfc8134
--- /dev/null
+++ b/css/Color.hs
@@ -0,0 +1,27 @@
+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
new file mode 100644
index 0000000..ab58b0c
--- /dev/null
+++ b/css/Header.hs
@@ -0,0 +1,53 @@
+{-# 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
new file mode 100644
index 0000000..9abbb5d
--- /dev/null
+++ b/css/IconLink.hs
@@ -0,0 +1,31 @@
+{-# 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
new file mode 100644
index 0000000..ba3b090
--- /dev/null
+++ b/css/Link.hs
@@ -0,0 +1,23 @@
+{-# 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
new file mode 100644
index 0000000..f9b56e1
--- /dev/null
+++ b/css/Media.hs
@@ -0,0 +1,36 @@
+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
new file mode 100644
index 0000000..ee8a0af
--- /dev/null
+++ b/css/NotFound.hs
@@ -0,0 +1,20 @@
+{-# 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
new file mode 100644
index 0000000..99ddbd4
--- /dev/null
+++ b/css/Project.hs
@@ -0,0 +1,13 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Project
+  ( style
+  ) where
+
+import           Clay hiding (style)
+
+style :: Css
+style = do
+
+  ".Project__Body" ? do
+    marginTop (px 20)
diff --git a/css/Resume.hs b/css/Resume.hs
new file mode 100644
index 0000000..ec7af62
--- /dev/null
+++ b/css/Resume.hs
@@ -0,0 +1,87 @@
+{-# 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
new file mode 100644
index 0000000..4e236a3
--- /dev/null
+++ b/css/Section.hs
@@ -0,0 +1,43 @@
+{-# 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
new file mode 100644
index 0000000..1fc097b
--- /dev/null
+++ b/css/Size.hs
@@ -0,0 +1,24 @@
+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
new file mode 100644
index 0000000..96ef74e
--- /dev/null
+++ b/css/Skills.hs
@@ -0,0 +1,22 @@
+{-# 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
new file mode 100644
index 0000000..f53ca1e
--- /dev/null
+++ b/css/Style.hs
@@ -0,0 +1,58 @@
+{-# 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)")
+  ]