diff --git a/css/Default.hs b/css/Default.hs
new file mode 100644
index 0000000..14a2ffb
--- /dev/null
+++ b/css/Default.hs
@@ -0,0 +1,155 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Default (defaultCss) where
+import Prelude hiding (rem)
+
+import Clay
+import Clay.Media (maxWidth, minWidth)
+
+defaultCss :: Css
+defaultCss = do
+    html ? do
+        fontSize (pct 62.5)
+        fontFamily ["Source Sans Pro", "Noto Sans TC"] [sansSerif]
+
+    body ? do
+        fontSize (rem 1.6)
+        color black
+        backgroundColor "#F5F5F5"
+
+    code ? do
+        padding (px 0) (px 0.2) (px 0) (px 0)
+        fontFamily ["Roboto Mono"] [monospace]
+
+    header ? borderBottom (rem 0.2) solid black
+
+    nav ? textAlign (alignSide sideRight)
+
+    nav |> a ? do
+        fontSize (rem 1.8)
+        fontWeight bold
+        color black
+        textDecoration none
+        textTransform uppercase
+
+    ".contacts" |> a ? do
+        display inlineBlock
+        marginTop (rem 2.4)
+        padding (px 0.2) (px 0.2) (px 0.2) (px 0.2)
+        fontSize (rem 2.4)
+        color "#555"
+        textDecoration none
+
+    footer ? do
+        borderTop (px 0.2) solid black
+        padding (rem 1.2) (px 0) (px 0) (px 0)
+        fontSize (rem 1.2)
+        color "#555"
+
+    img ? do
+        display block
+        marginLeft auto
+        marginRight auto
+
+    h1 ? fontSize (rem 2.4)
+
+    h2 ? do
+        borderTop (px 1) solid "#E6E6E6"
+        paddingTop (px 20)
+        fontSize (rem 2)
+
+    h3 ? do
+        textAlign (alignSide sideLeft)
+
+    "article .header" ? do
+        fontSize (rem 1.4)
+        fontStyle italic
+        color "#555"
+
+    ".logo" |> a ? do
+        fontWeight bold
+        color black
+        textDecoration none
+
+    query Clay.all [Clay.Media.maxWidth (px 359)] $ do
+        body ? do
+            width $ pct 90
+            margin auto auto auto auto
+            paddingTop $ px 0
+            paddingRight $ pct 5
+            paddingBottom $ px 0
+            paddingLeft $ px 0
+        header ? margin (rem 4.2) (px 0) (px 0) (px 0)
+        nav ? do
+            margin (px 0) auto (rem 3) (px 0)
+            textAlign center
+        footer ? textAlign center
+        ".logo" ? do
+            textAlign center
+            margin (rem 1) auto (rem 3) (px 0)
+        ".logo" |> a ? fontSize (rem 2.4)
+        nav |> a ? do
+            display block
+            lineHeight (rem 1.6)
+        img ? do
+            border (px 20) solid none
+            width (px 200)
+
+    query Clay.all [Clay.Media.minWidth (px 360)] $ do
+        body ? do
+            width $ pct 90
+            margin auto auto auto auto
+            paddingTop $ px 0
+            paddingRight $ pct 5
+            paddingBottom $ px 0
+            paddingLeft $ px 0
+        header ? margin (rem 4.2) (px 0) (px 0) (px 0)
+        nav ? do
+            margin (px 0) auto (rem 3) (px 0)
+            textAlign center
+        footer ? textAlign center
+        ".logo" ? do
+            textAlign center
+            margin (rem 1) auto (rem 3) (px 0)
+        ".logo" |> a ? fontSize (rem 2.4)
+        nav |> a ? do
+            display inline
+            margin (px 0) (rem 0.6) (px 0) (px 0)
+        img ? do
+            border (px 40) solid none
+            width (px 320)
+
+    query Clay.all [Clay.Media.minWidth (px 640)] $ do
+        body ? do
+            width (pct 60)
+            margin auto auto auto auto
+            padding (px 0) (px 0) (px 0) (px 0)
+        header ? do
+            margin (px 0) (px 0) (rem 3) (px 0)
+            padding (rem 1.2) (px 0) (rem 1.2) (px 0)
+        nav ? do
+            margin (px 0) (px 0) (px 0) (px 0)
+            textAlign (alignSide sideRight)
+        nav |> a ? do
+            margin (px 0) (px 0) (px 0) (rem 1.2)
+            display inline
+        footer ? textAlign (alignSide sideRight)
+        img ? do
+            border (px 40) solid none
+            width (px 320)
+        "figcaption" ? do
+            textAlign center
+            marginTop (px 18)
+        ".logo" ? do
+            margin (px 0) (px 0) (px 0) (px 0)
+            textAlign (alignSide sideLeft)
+        ".logo" |> a ? do
+            float floatLeft
+            fontSize (rem 1.8)
+        ".comments" ? do
+            paddingTop (px 5)
+            borderTop (px 2) solid black
+            marginTop (px 60)
+
+main :: IO ()
+main = putCss defaultCss
\ No newline at end of file
diff --git a/css/default.css b/css/default.css
deleted file mode 100644
index a1887d7..0000000
--- a/css/default.css
+++ /dev/null
@@ -1,190 +0,0 @@
-html {
-  font-size: 62.5%;
-  font-family: 'Source Sans Pro', 'Noto Sans TC', sans-serif;
-}
-
-body {
-  font-size: 1.6rem;
-  color: #000;
-  background-color: #F5F5F5;
-}
-
-code {
-  padding: 0 0.2rem 0;
-  font-family: 'Roboto Mono', monospace;
-}
-
-header {
-  border-bottom: 0.2rem solid #000;
-}
-
-nav {
-  text-align: right;
-}
-
-nav a {
-  font-size: 1.8rem;
-  font-weight: bold;
-  color: black;
-  text-decoration: none;
-  text-transform: uppercase;
-}
-
-.contacts a {
-  display:inline-block;
-  margin-top: 2.4rem;
-  padding: 0.2rem;
-  font-size: 2.4rem;
-  color: #555;
-  text-decoration: none;
-}
-
-footer {
-  border-top: 0.2rem solid #000;
-  padding: 1.2rem 0;
-  font-size: 1.2rem;
-  color: #555;
-}
-
-img {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-h1 {
-  font-size: 2.4rem;
-}
-
-h2 {
-  border-top: 1px solid #E6E6E6;
-  padding-top: 20px;
-  font-size: 2rem;
-}
-
-h3 {
-  text-align: left;
-}
-
-article .header {
-  font-size: 1.4rem;
-  font-style: italic;
-  color: #555;
-}
-
-.logo a {
-  font-weight: bold;
-  color: #000;
-  text-decoration: none;
-}
-
-@media (max-width: 359px) {
-  body {
-    width: 90%;
-    margin: 0;
-    padding: 0 5%;
-  }
-  header {
-    margin: 4.2rem 0;
-  }
-  nav {
-    margin: 0 auto 3rem;
-    text-align: center;
-  }
-  footer {
-    text-align: center;
-  }
-  .logo {
-    text-align: center;
-    margin: 1rem auto 3rem;
-  }
-  .logo a {
-    font-size: 2.4rem;
-  }
-  nav a {
-    display: block;
-    line-height: 1.6;
-  }
-  img {
-    border: 20px;
-    width: 200px;
-  }
-}
-
-@media (min-width: 360px) {
-  body {
-    width: 90%;
-    margin: 0;
-    padding: 0 5%;
-  }
-  header {
-    margin: 4.2rem 0;
-  }
-  nav {
-    margin: 0 auto 3rem;
-    text-align: center;
-  }
-  footer {
-    text-align: center;
-  }
-  .logo {
-    text-align: center;
-    margin: 1rem auto 3rem;
-  }
-  .logo a {
-    font-size: 2.4rem;
-  }
-  nav a {
-    display: inline;
-    margin: 0 0.6rem;
-  }
-  img {
-    border: 40px;
-    width: 320px;
-  }
-}
-
-@media (min-width: 640px) {
-  body {
-    width: 60%;
-    margin: 0 auto;
-    padding: 0;
-  }
-  header {
-    margin: 0 0 3rem;
-    padding: 1.2rem 0;
-  }
-  nav {
-    margin: 0;
-    text-align: right;
-  }
-  nav a {
-    margin: 0 0 0 1.2rem;
-    display: inline;
-  }
-  footer {
-    text-align: right;
-  }
-  img {
-    border: 40px;
-    width: 320px;
-  }
-  figcaption {
-    text-align: center;
-    margin-top: 18px;
-  }
-  .logo {
-    margin: 0;
-    text-align: left;
-  }
-  .logo a {
-    float: left;
-    font-size: 1.8rem;
-  }
-  .comments {
-    padding-top: 5px;
-    border-top: 2px solid;
-    margin-top: 60px;
-  }
-}
-
diff --git a/css/syntax.css b/css/syntax.css
deleted file mode 100644
index cee8875..0000000
--- a/css/syntax.css
+++ /dev/null
@@ -1,61 +0,0 @@
-a.sourceLine { display: inline-block; line-height: 1.25; }
-a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
-a.sourceLine:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
-div.sourceCode { margin: 1em 0; }
-pre.sourceCode { margin: 0; }
-@media screen {
-div.sourceCode { overflow: auto; }
-}
-@media print {
-code.sourceCode { white-space: pre-wrap; }
-a.sourceLine { text-indent: -1em; padding-left: 1em; }
-}
-pre.numberSource a.sourceLine
-  { position: relative; left: -4em; }
-pre.numberSource a.sourceLine::before
-  { content: attr(title);
-    position: relative; left: -1em; text-align: right; vertical-align: baseline;
-    border: none; pointer-events: all; display: inline-block;
-    -webkit-touch-callout: none; -webkit-user-select: none;
-    -khtml-user-select: none; -moz-user-select: none;
-    -ms-user-select: none; user-select: none;
-    padding: 0 4px; width: 4em;
-    color: #aaaaaa;
-  }
-pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
-div.sourceCode
-  {  }
-@media screen {
-a.sourceLine::before { text-decoration: underline; }
-}
-code span.al { color: #ff0000; font-weight: bold; } /* Alert */
-code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
-code span.at { color: #7d9029; } /* Attribute */
-code span.bn { color: #40a070; } /* BaseN */
-code span.bu { } /* BuiltIn */
-code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
-code span.ch { color: #4070a0; } /* Char */
-code span.cn { color: #880000; } /* Constant */
-code span.co { color: #60a0b0; font-style: italic; } /* Comment */
-code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
-code span.do { color: #ba2121; font-style: italic; } /* Documentation */
-code span.dt { color: #902000; } /* DataType */
-code span.dv { color: #40a070; } /* DecVal */
-code span.er { color: #ff0000; font-weight: bold; } /* Error */
-code span.ex { } /* Extension */
-code span.fl { color: #40a070; } /* Float */
-code span.fu { color: #06287e; } /* Function */
-code span.im { } /* Import */
-code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
-code span.kw { color: #007020; font-weight: bold; } /* Keyword */
-code span.op { color: #666666; } /* Operator */
-code span.ot { color: #007020; } /* Other */
-code span.pp { color: #bc7a00; } /* Preprocessor */
-code span.sc { color: #4070a0; } /* SpecialChar */
-code span.ss { color: #bb6688; } /* SpecialString */
-code span.st { color: #4070a0; } /* String */
-code span.va { color: #19177c; } /* Variable */
-code span.vs { color: #4070a0; } /* VerbatimString */
-code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
diff --git a/docs/css/default.css b/docs/css/default.css
index bffd863..3046281 100644
--- a/docs/css/default.css
+++ b/docs/css/default.css
@@ -1 +1,268 @@
-html{font-size:62.5%;font-family:'Source Sans Pro','Noto Sans TC',sans-serif}body{font-size:1.6rem;color:#000;background-color:#F5F5F5}code{padding:0 0.2rem 0;font-family:'Roboto Mono',monospace}header{border-bottom:0.2rem solid #000}nav{text-align:right}nav a{font-size:1.8rem;font-weight:bold;color:black;text-decoration:none;text-transform:uppercase}.contacts a{display:inline-block;margin-top:2.4rem;padding:0.2rem;font-size:2.4rem;color:#555;text-decoration:none}footer{border-top:0.2rem solid #000;padding:1.2rem 0;font-size:1.2rem;color:#555}img{display:block;margin-left:auto;margin-right:auto}h1{font-size:2.4rem}h2{border-top:1px solid #E6E6E6;padding-top:20px;font-size:2rem}h3{text-align:left}article .header{font-size:1.4rem;font-style:italic;color:#555}.logo a{font-weight:bold;color:#000;text-decoration:none}@media (max-width:359px){body{width:90%;margin:0;padding:0 5%}header{margin:4.2rem 0}nav{margin:0 auto 3rem;text-align:center}footer{text-align:center}.logo{text-align:center;margin:1rem auto 3rem}.logo a{font-size:2.4rem}nav a{display:block;line-height:1.6}img{border:20px;width:200px}}@media (min-width:360px){body{width:90%;margin:0;padding:0 5%}header{margin:4.2rem 0}nav{margin:0 auto 3rem;text-align:center}footer{text-align:center}.logo{text-align:center;margin:1rem auto 3rem}.logo a{font-size:2.4rem}nav a{display:inline;margin:0 0.6rem}img{border:40px;width:320px}}@media (min-width:640px){body{width:60%;margin:0 auto;padding:0}header{margin:0 0 3rem;padding:1.2rem 0}nav{margin:0;text-align:right}nav a{margin:0 0 0 1.2rem;display:inline}footer{text-align:right}img{border:40px;width:320px}figcaption{text-align:center;margin-top:18px}.logo{margin:0;text-align:left}.logo a{float:left;font-size:1.8rem}.comments{padding-top:5px;border-top:2px solid;margin-top:60px}}
\ No newline at end of file
+
+html
+{
+  font-size   : 62.5%;
+  font-family : "Source Sans Pro","Noto Sans TC", sans-serif;
+}
+
+body
+{
+  font-size        : 1.6rem;
+  color            : #000000;
+  background-color : #f5f5f5;
+}
+
+code
+{
+  padding     : 0px 0.2px 0px 0px;
+  font-family : "Roboto Mono", monospace;
+}
+
+header
+{
+  border-bottom : 0.2rem solid #000000;
+}
+
+nav
+{
+  text-align : right;
+}
+
+nav > a
+{
+  font-size       : 1.8rem;
+  font-weight     : bold;
+  color           : #000000;
+  text-decoration : none;
+  text-transform  : uppercase;
+}
+
+.contacts > a
+{
+  display         : inline-block;
+  margin-top      : 2.4rem;
+  padding         : 0.2px 0.2px 0.2px 0.2px;
+  font-size       : 2.4rem;
+  color           : #555555;
+  text-decoration : none;
+}
+
+footer
+{
+  border-top : 0.2px solid #000000;
+  padding    : 1.2rem 0px 0px 0px;
+  font-size  : 1.2rem;
+  color      : #555555;
+}
+
+img
+{
+  display      : block;
+  margin-left  : auto;
+  margin-right : auto;
+}
+
+h1
+{
+  font-size : 2.4rem;
+}
+
+h2
+{
+  border-top  : 1px solid #e6e6e6;
+  padding-top : 20px;
+  font-size   : 2rem;
+}
+
+h3
+{
+  text-align : left;
+}
+
+article .header
+{
+  font-size  : 1.4rem;
+  font-style : italic;
+  color      : #555555;
+}
+
+.logo > a
+{
+  font-weight     : bold;
+  color           : #000000;
+  text-decoration : none;
+}
+
+@media all and (max-width: 359px)
+{
+
+body
+{
+  width          : 90%;
+  margin         : auto auto auto auto;
+  padding-top    : 0px;
+  padding-right  : 5%;
+  padding-bottom : 0px;
+  padding-left   : 0px;
+}
+
+header
+{
+  margin : 4.2rem 0px 0px 0px;
+}
+
+nav
+{
+  margin     : 0px auto 3rem 0px;
+  text-align : center;
+}
+
+footer
+{
+  text-align : center;
+}
+
+.logo
+{
+  text-align : center;
+  margin     : 1rem auto 3rem 0px;
+}
+
+.logo > a
+{
+  font-size : 2.4rem;
+}
+
+nav > a
+{
+  display     : block;
+  line-height : 1.6rem;
+}
+
+img
+{
+  border : 20px solid none;
+  width  : 200px;
+}
+
+}
+@media all and (min-width: 360px)
+{
+
+body
+{
+  width          : 90%;
+  margin         : auto auto auto auto;
+  padding-top    : 0px;
+  padding-right  : 5%;
+  padding-bottom : 0px;
+  padding-left   : 0px;
+}
+
+header
+{
+  margin : 4.2rem 0px 0px 0px;
+}
+
+nav
+{
+  margin     : 0px auto 3rem 0px;
+  text-align : center;
+}
+
+footer
+{
+  text-align : center;
+}
+
+.logo
+{
+  text-align : center;
+  margin     : 1rem auto 3rem 0px;
+}
+
+.logo > a
+{
+  font-size : 2.4rem;
+}
+
+nav > a
+{
+  display : inline;
+  margin  : 0px 0.6rem 0px 0px;
+}
+
+img
+{
+  border : 40px solid none;
+  width  : 320px;
+}
+
+}
+@media all and (min-width: 640px)
+{
+
+body
+{
+  width   : 60%;
+  margin  : auto auto auto auto;
+  padding : 0px 0px 0px 0px;
+}
+
+header
+{
+  margin  : 0px 0px 3rem 0px;
+  padding : 1.2rem 0px 1.2rem 0px;
+}
+
+nav
+{
+  margin     : 0px 0px 0px 0px;
+  text-align : right;
+}
+
+nav > a
+{
+  margin  : 0px 0px 0px 1.2rem;
+  display : inline;
+}
+
+footer
+{
+  text-align : right;
+}
+
+img
+{
+  border : 40px solid none;
+  width  : 320px;
+}
+
+figcaption
+{
+  text-align : center;
+  margin-top : 18px;
+}
+
+.logo
+{
+  margin     : 0px 0px 0px 0px;
+  text-align : left;
+}
+
+.logo > a
+{
+  float     : left;
+  font-size : 1.8rem;
+}
+
+.comments
+{
+  padding-top : 5px;
+  border-top  : 2px solid #000000;
+  margin-top  : 60px;
+}
+
+}
+
+/* Generated with Clay, http://fvisser.nl/clay */
\ No newline at end of file
diff --git a/hie.yaml b/hie.yaml
index 45ecc1d..5eb7e38 100644
--- a/hie.yaml
+++ b/hie.yaml
@@ -1,4 +1,6 @@
 cradle:
   stack:
-    - path: "././site.hs"
+    - path: "site.hs"
+      component: "my-site:exe:site"
+    - path: "css/Default.hs"
       component: "my-site:exe:site"
diff --git a/my-site.cabal b/my-site.cabal
index 52db2df..1196ce9 100644
--- a/my-site.cabal
+++ b/my-site.cabal
@@ -7,5 +7,7 @@ executable site
   main-is:          site.hs
   build-depends:    base == 4.*
                   , hakyll == 4.16.*
+                  , clay == 0.15.0
+                  , pandoc == 3.0.1
   ghc-options:      -threaded
   default-language: Haskell2010
diff --git a/site.hs b/site.hs
index 418ffcd..980cfd0 100644
--- a/site.hs
+++ b/site.hs
@@ -1,8 +1,10 @@
 --------------------------------------------------------------------------------
 {-# LANGUAGE OverloadedStrings #-}
-import           Data.Monoid (mappend)
+import           Data.Monoid              (mappend)
 import           Hakyll
-
+import           Text.Pandoc.Highlighting (Style, breezeDark, styleToCss)
+import           Text.Pandoc.Options      (ReaderOptions (..),
+                                           WriterOptions (..))
 
 --------------------------------------------------------------------------------
 myFeedConfiguration :: FeedConfiguration
@@ -31,15 +33,26 @@ config = defaultConfiguration {
     destinationDirectory = "docs"
 }
 
+pandocCodeStyle :: Style
+pandocCodeStyle = breezeDark
+
+pandocCompiler' :: Compiler (Item String)
+pandocCompiler' =
+  pandocCompilerWith
+    defaultHakyllReaderOptions
+    defaultHakyllWriterOptions
+      { writerHighlightStyle   = Just pandocCodeStyle
+      }
+
 main :: IO ()
 main = hakyllWith config $ do
     match "images/*" $ do
         route   idRoute
         compile copyFileCompiler
 
-    match "css/*" $ do
-        route   idRoute
-        compile compressCssCompiler
+    match "css/*.hs" $ do
+        route   $ setExtension "css"
+        compile $ getResourceString >>= withItemBody (unixFilter "runghc" [])
 
     match (fromList ["about.rst", "blogroll.markdown"]) $ do
         route   $ setExtension "html"
@@ -52,7 +65,7 @@ main = hakyllWith config $ do
 
     match "posts/*" $ do
         route $ setExtension "html"
-        compile $ pandocCompiler
+        compile $ pandocCompiler'
             >>= loadAndApplyTemplate "templates/post.html"    (postCtxWithTags tags)
             >>= saveSnapshot "content"
             >>= loadAndApplyTemplate "templates/default.html" (postCtxWithTags tags)
@@ -97,6 +110,11 @@ main = hakyllWith config $ do
         route idRoute
         compile (feedCompiler renderRss)
 
+    create ["css/syntax.css"] $ do
+        route idRoute
+        compile $ do
+            makeItem $ styleToCss pandocCodeStyle
+
     tagsRules tags $ \tag pattern -> do
         route idRoute
         compile $ do
diff --git a/stack.yaml b/stack.yaml
index ed0f9ae..3729c68 100644
--- a/stack.yaml
+++ b/stack.yaml
@@ -42,6 +42,8 @@ packages:
 extra-deps:
   - hakyll-4.16.6.0
   - lrucache-1.2.0.1@sha256:18fc3d7052012c7ab3cd395160f34b53c5e1ec5379cc45185baf35b90ffadc2e,1254
+  - clay-0.15.0
+  - pandoc-3.0.1
 
 # Override default flag values for local packages and extra-deps
 # flags: {}
diff --git a/stack.yaml.lock b/stack.yaml.lock
index aed86f5..133ec19 100644
--- a/stack.yaml.lock
+++ b/stack.yaml.lock
@@ -18,6 +18,20 @@ packages:
       size: 619
   original:
     hackage: lrucache-1.2.0.1@sha256:18fc3d7052012c7ab3cd395160f34b53c5e1ec5379cc45185baf35b90ffadc2e,1254
+- completed:
+    hackage: clay-0.15.0@sha256:71e2c2e1e3599ec62d69487091944bde57722907388ba6ab10604a4fb09f929c,2269
+    pantry-tree:
+      sha256: 8601aaab712e441253bd96a5de5ed49f6be6c7855535d3bc43af21a3dc684567
+      size: 2258
+  original:
+    hackage: clay-0.15.0
+- completed:
+    hackage: pandoc-3.0.1@sha256:b86cff1afae695247ee180ac66769881a4900ea4643c87820a9f653dd06d4cf2,37767
+    pantry-tree:
+      sha256: 4ceae05f232ec6e0a062b36d89da99ad071ef8f498b141ac748c219136b789d3
+      size: 141318
+  original:
+    hackage: pandoc-3.0.1
 snapshots:
 - completed:
     sha256: a81fb3877c4f9031e1325eb3935122e608d80715dc16b586eb11ddbff8671ecd