aboutsummaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/Body.hs35
-rw-r--r--css/Color.hs27
-rw-r--r--css/Header.hs53
-rw-r--r--css/IconLink.hs31
-rw-r--r--css/Link.hs23
-rw-r--r--css/Media.hs36
-rw-r--r--css/NotFound.hs20
-rw-r--r--css/Project.hs13
-rw-r--r--css/Resume.hs87
-rw-r--r--css/Section.hs43
-rw-r--r--css/Size.hs24
-rw-r--r--css/Skills.hs22
-rw-r--r--css/Style.hs58
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)")
+ ]
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-01 06:32:37 +0000