aboutsummaryrefslogtreecommitdiff
path: root/src/Design
diff options
context:
space:
mode:
Diffstat (limited to 'src/Design')
-rw-r--r--src/Design/Color.hs27
-rw-r--r--src/Design/Global.hs66
-rw-r--r--src/Design/Header.hs56
-rw-r--r--src/Design/Media.hs36
-rw-r--r--src/Design/Name.hs15
-rw-r--r--src/Design/NotFound.hs20
-rw-r--r--src/Design/Projects.hs51
-rw-r--r--src/Design/Resume.hs125
-rw-r--r--src/Design/Size.hs28
9 files changed, 424 insertions, 0 deletions
diff --git a/src/Design/Color.hs b/src/Design/Color.hs
new file mode 100644
index 0000000..bbe20c4
--- /dev/null
+++ b/src/Design/Color.hs
@@ -0,0 +1,27 @@
+module Design.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/src/Design/Global.hs b/src/Design/Global.hs
new file mode 100644
index 0000000..379d612
--- /dev/null
+++ b/src/Design/Global.hs
@@ -0,0 +1,66 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.Global
+ ( compactDesign
+ ) where
+
+import qualified Data.Text.Lazy as T
+import Data.Monoid ((<>))
+
+import Clay
+
+import qualified Design.Color as Color
+import qualified Design.Media as Media
+import Design.Header (headerCss)
+import Design.Resume (resumeCss)
+import Design.Projects (projectsCss)
+import Design.NotFound (notFoundCss)
+
+compactDesign :: T.Text
+compactDesign = renderWith compact [] $ global
+
+global :: Css
+global =
+ body ? do
+ color Color.black
+ marginBottom (px 40)
+ Media.mobile $ fontSize (px 16)
+ Media.tabletDesktop $ fontSize (px 18)
+
+ h1 ? do
+ fontFamily [] [monospace]
+ fontWeight bold
+ color Color.red
+
+ Media.mobile $ do
+ lineHeight (px 30)
+ fontSize (px 22)
+ marginBottom (px 20)
+ marginTop (px 35)
+
+ Media.tablet $ do
+ lineHeight (px 40)
+ fontSize (px 27)
+ marginBottom (px 35)
+ marginTop (px 45)
+
+ Media.desktop $ do
+ lineHeight (px 50)
+ fontSize (px 30)
+ marginBottom (px 40)
+ marginTop (px 55)
+
+ a ? do
+ textDecoration none
+ color Color.link
+ transition "color" (sec 0.3) easeOut (sec 0)
+ focus & outline solid (px 0) Color.white
+
+ (a # hover) <> (a # focus) ? do
+ textDecoration underline
+ color Color.blue
+
+ headerCss
+ resumeCss
+ projectsCss
+ notFoundCss
diff --git a/src/Design/Header.hs b/src/Design/Header.hs
new file mode 100644
index 0000000..d2bbace
--- /dev/null
+++ b/src/Design/Header.hs
@@ -0,0 +1,56 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.Header
+ ( headerCss
+ ) where
+
+import Data.Monoid ((<>))
+
+import Clay
+import Clay.Display (displayTable)
+
+import qualified Design.Color as Color
+import qualified Design.Media as Media
+
+headerCss :: Css
+headerCss = do
+ ".header" ? do
+ backgroundColor Color.red
+ color Color.white
+ fontSize (px 28)
+
+ ul ? do
+ width (pct 100)
+ display displayTable
+ "table-layout" -: "fixed"
+
+ li ? do
+ display tableCell
+
+ a ? do
+ display block
+ 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)
+
+ i ? marginRight (em 0.5)
+
+ Media.mobile $ do
+ i ? display none
+ fontSize (em 0.6)
+
+ Media.tablet $ fontSize (em 0.8)
+
+ (a # hover <> a # focus <> a # ".currentHeader") ? 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)
diff --git a/src/Design/Media.hs b/src/Design/Media.hs
new file mode 100644
index 0000000..77220ee
--- /dev/null
+++ b/src/Design/Media.hs
@@ -0,0 +1,36 @@
+module Design.Media
+ ( mobile
+ , mobileTablet
+ , tablet
+ , tabletDesktop
+ , desktop
+ ) where
+
+import Clay hiding (query)
+import qualified Clay
+import Clay.Stylesheet (Feature)
+import qualified Clay.Media as Media
+
+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/src/Design/Name.hs b/src/Design/Name.hs
new file mode 100644
index 0000000..84c91fb
--- /dev/null
+++ b/src/Design/Name.hs
@@ -0,0 +1,15 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.Name
+ ( nameCss
+ ) where
+
+import Clay
+
+nameCss :: Css
+nameCss = do
+ fontWeight bold
+ letterSpacing (px 10)
+ margin (px 100) (px 0) (px 80) (px 0)
+ lineHeight (em 1.2)
+ fontSize (px 48)
diff --git a/src/Design/NotFound.hs b/src/Design/NotFound.hs
new file mode 100644
index 0000000..ee8a0af
--- /dev/null
+++ b/src/Design/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/src/Design/Projects.hs b/src/Design/Projects.hs
new file mode 100644
index 0000000..311b7f8
--- /dev/null
+++ b/src/Design/Projects.hs
@@ -0,0 +1,51 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.Projects
+ ( projectsCss
+ ) where
+
+import Prelude hiding ((**))
+
+import Data.Monoid ((<>))
+
+import Clay
+import qualified Clay.Flexbox as CF
+
+import qualified Design.Color as Color
+import qualified Design.Media as Media
+import qualified Design.Size as Size
+
+projectsCss :: Css
+projectsCss =
+ ".project" ? do
+ margin (pct 0) (pct 10) (pct 0) (pct 10)
+
+ h1 ? ".separator" ? color Color.black
+
+ ".body" ? do
+ Size.indentation
+
+ ".technologies" <> ".pageLink" ? do
+ i ? marginRight (em 0.5)
+ Size.lineHeight
+ marginBottom (px 10)
+
+ ".technologies" ? do
+ Media.mobile $ fontSize (pct 90)
+ ul ? do
+ display flex
+ flexWrap CF.wrap
+ li ? do
+ backgroundColor Color.orange
+ color Color.white
+ borderRadius (px 2) (px 2) (px 2) (px 2)
+ margin (px 0) (px 10) (px 5) (px 0)
+ ":last-child:after" & marginRight (px 0)
+
+ Media.desktop $ padding (px 0) (px 10) (px 0) (px 10)
+ Media.mobileTablet $ padding (px 0) (px 5) (px 0) (px 5)
+
+ ".description" ? do
+ Size.lineHeight
+ marginTop (px 10)
+ Media.desktop $ width (pct 50)
diff --git a/src/Design/Resume.hs b/src/Design/Resume.hs
new file mode 100644
index 0000000..d668987
--- /dev/null
+++ b/src/Design/Resume.hs
@@ -0,0 +1,125 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.Resume
+ ( resumeCss
+ ) where
+
+import Prelude hiding ((**))
+
+import Clay
+import qualified Clay.Flexbox as CF
+
+import qualified Design.Color as Color
+import qualified Design.Media as Media
+import qualified Design.Size as Size
+
+resumeCss :: Css
+resumeCss =
+ ".section" ? do
+ position relative
+ margin (pct 0) (pct 10) (pct 0) (pct 10)
+
+ h1 ? textTransform capitalize
+
+ ".identity" ? do
+ ".mail" <> ".git" ? do
+ Size.indentation
+ i ? marginRight (em 0.5)
+
+ Media.mobile $ do
+ fontSize (px 14)
+ marginBottom (px 15)
+
+ Media.tablet $ do
+ fontSize (px 18)
+ marginBottom (px 25)
+
+ Media.desktop $ do
+ fontSize (px 20)
+ marginBottom (px 30)
+
+ ".pdf" ? do
+ position absolute
+ right (px 0)
+ top (px 0)
+ color Color.red
+ transition "all" (ms 100) ease (sec 0)
+ i ? marginRight (px 0)
+ hover & transform (scale 1.2 1.2)
+
+ Media.mobile $ do
+ lineHeight (px 30)
+ height (px 30)
+ fontSize (px 20)
+
+ Media.tablet $ do
+ lineHeight (px 40)
+ height (px 40)
+ fontSize (px 30)
+
+ Media.desktop $ do
+ lineHeight (px 50)
+ height (px 50)
+ fontSize (px 40)
+
+ ".item" ? do
+ marginBottom (px 40)
+ Size.indentation
+ Media.mobile $ marginBottom (px 25)
+
+ ".title" <> ".location" <> ".description" ? do
+ Size.lineHeight
+
+ ".title" ? do
+ Media.desktop $ do
+ display flex
+ marginBottom (px 10)
+
+ ".skills" & do
+ Size.tabletMarginBottom
+
+ ".text" ? do
+ backgroundColor Color.orange
+ color Color.white
+ padding (px 0) (px 10) (px 0) (px 10)
+ sym borderRadius (px 2)
+ Media.mobileTablet $ marginBottom (px 10)
+
+ ".date" ? do
+ fontStyle italic
+ Media.mobile $ fontSize (pct 90)
+ Media.desktop $ marginLeft (px 15)
+
+ ".description" ? ".detail" ?
+ marginTop Size.listItemSep
+
+ ".location" ? do
+ color Color.green
+ Media.mobile $ do
+ fontSize (pct 90)
+ marginBottom (px 10)
+ Size.tabletMarginBottom
+
+ ".itemList" ? marginTop (px 5)
+
+ ".bullets" |> ".detail" ? do
+ Media.mobile $ marginBottom Size.listItemSep
+ Size.tabletMarginBottom
+
+ ".bullets" |> li ? do
+ Size.lineHeight
+ before & do
+ content (stringContent "•")
+ color Color.red
+ display inlineBlock
+ marginRight (px 10)
+
+ ".technos" ? do
+ display flex
+ flexWrap CF.wrap
+ sym2 margin (px 5) (px 0)
+
+ ".technos" |> ".techno" ? do
+ lineHeight normal
+ borderBottom solid (px 2) lightgray
+ margin (px 10) (px 15) (px 5) (px 0)
diff --git a/src/Design/Size.hs b/src/Design/Size.hs
new file mode 100644
index 0000000..8b323bf
--- /dev/null
+++ b/src/Design/Size.hs
@@ -0,0 +1,28 @@
+module Design.Size
+ ( indentation
+ , lineHeight
+ , listItemSep
+ , tabletMarginBottom
+ ) where
+
+import Clay hiding (lineHeight)
+import qualified Clay
+
+import qualified Design.Media as Media
+
+indentation :: Css
+indentation = do
+ Media.tablet $ marginLeft (px 10)
+ Media.desktop $ marginLeft (px 20)
+
+lineHeight :: Css
+lineHeight = do
+ Media.mobile $ Clay.lineHeight (px 30)
+ Media.tablet $ Clay.lineHeight (px 35)
+ Media.desktop $ Clay.lineHeight (px 40)
+
+listItemSep :: Size LengthUnit
+listItemSep = px 8
+
+tabletMarginBottom :: Css
+tabletMarginBottom = Media.tablet $ marginBottom (px 15)
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-01 06:37:16 +0000