convert stylus to sass

Signed-off-by: weru <fromweru@gmail.com>

26 files changed, 1729 insertions, 0 deletions

diff --git a/assets/sass/_extend.sass b/assets/sass/_extend.sass
new file mode 100644
index 0000000..18395ec
--- /dev/null
+++ b/assets/sass/_extend.sass
@@ -0,0 +1,116 @@
+// $base-style
+h1, .h1
+  display: block
+  margin-top: 3rem
+  margin-bottom: 1rem
+  color: $color-accent-1
+  letter-spacing: .01em
+  font-weight: 700
+  font-style: normal
+  font-size: 1.5em
+
+  @include antialias()
+
+h2, .h2
+  position: relative
+  display: block
+  margin-top: 2rem
+  margin-bottom: .5rem
+  color: $color-accent-2
+  text-transform: none
+  letter-spacing: normal
+  font-weight: bold
+  font-size: 1rem
+
+h3
+  color: $color-accent-2
+  text-decoration: underline
+  font-weight: bold
+  font-size: .9rem
+
+h4
+h5
+h6
+  display: inline
+  text-decoration: none
+  color: $color-accent-3
+  font-weight: bold
+  font-size: .9rem
+
+h3
+h4
+h5
+h6
+  margin-top: .9rem
+  margin-bottom: .5rem
+
+hr
+  border: .5px dashed $color-accent-3
+  opacity: .5
+  margin: 0
+  margin-top: 20px
+  margin-bottom: 20px
+
+strong
+  font-weight: bold
+
+em
+cite
+  font-style: italic
+
+sup
+sub
+  position: relative
+  vertical-align: baseline
+  font-size: .75em
+  line-height: 0
+
+sup
+  top: -.5em
+
+sub
+  bottom: -.2em
+
+small
+  font-size: .85em
+
+acronym
+abbr
+  border-bottom: 1px dotted
+
+ul
+ol
+dl
+  line-height: $line-height
+
+ul
+ol
+  ul
+  ol
+    margin-top: 0
+    margin-bottom: 0
+
+ol
+  list-style: decimal
+
+dt
+  font-weight: bold
+
+table
+  width: 100%
+  border-collapse: collapse
+  text-align: left
+  font-size: $font-size - 2px
+  overflow: auto
+  display: block
+
+th
+  padding: 8px
+  border-bottom: 1px dashed $color-border
+  color: $color-accent-2
+  font-weight: bold
+  font-size: $font-size - 1px
+
+td
+  padding: 0 8px
+  border-bottom: none
diff --git a/assets/sass/_fonts.sass b/assets/sass/_fonts.sass
new file mode 100644
index 0000000..4037b1b
--- /dev/null
+++ b/assets/sass/_fonts.sass
@@ -0,0 +1,9 @@
+@font-face
+  font-style: normal
+  font-family: "Meslo LG"
+  src: local("Meslo LG S"), url("../lib/meslo-LG/MesloLGS-Regular.ttf") format("truetype")
+
+@font-face
+  font-style: normal
+  font-family: "JetBrains Mono"
+  src: local("JetBrains Mono"), url("../lib/JetBrainsMono/ttf/JetBrainsMono-Regular.ttf") format("truetype")
diff --git a/assets/sass/_mixins.sass b/assets/sass/_mixins.sass
new file mode 100644
index 0000000..70a93d3
--- /dev/null
+++ b/assets/sass/_mixins.sass
@@ -0,0 +1,19 @@
+@mixin antialias()
+  -moz-osx-font-smoothing: grayscale
+  -webkit-font-smoothing: antialiased
+
+@mixin hyphens($value)
+  hyphens: $value
+  -moz-hyphens: $value
+  -ms-hyphens: $value
+  -webkit-hyphens: $value
+
+@mixin underline($size, $color)
+  background-image: linear-gradient(transparent, transparent $size, $color $size, $color)
+  background-position: bottom
+  background-size: 100% 6px
+  background-repeat: repeat-x
+
+@mixin no-select()
+  user-select: none
+  -khtml-user-select: none
diff --git a/assets/sass/_util.sass b/assets/sass/_util.sass
new file mode 100644
index 0000000..b6e3f87
--- /dev/null
+++ b/assets/sass/_util.sass
@@ -0,0 +1,317 @@
+/* Basscss */
+.inline
+  display: inline
+
+.block
+  display: block
+
+.inline-block
+  display: inline-block
+
+.table
+  display: table
+
+.table-cell
+  display: table-cell
+
+.overflow-hidden
+  overflow: hidden
+
+.overflow-scroll
+  overflow: scroll
+
+.overflow-auto
+  overflow: auto
+
+.clearfix:before, .clearfix:after
+  display: table
+  content: " "
+
+.clearfix:after
+  clear: both
+
+.left
+  float: left
+
+.right
+  float: right
+
+.fit
+  max-width: 100%
+
+.truncate
+  display: inline-block
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+
+.max-width-1
+  max-width: 24rem
+
+.max-width-2
+  max-width: 32rem
+
+.max-width-3
+  max-width: 48rem
+
+.max-width-4
+  max-width: 64rem
+
+.border-box
+  box-sizing: border-box
+
+.m0
+  margin: 0
+
+.mt0
+  margin-top: 0
+
+.mr0
+  margin-right: 0
+
+.mb0
+  margin-bottom: 0
+
+.ml0
+  margin-left: 0
+
+.mx0
+  margin-right: 0
+  margin-left: 0
+
+.my0
+  margin-top: 0
+  margin-bottom: 0
+
+.m1
+  margin: .5rem
+
+.mt1
+  margin-top: .5rem
+
+.mr1
+  margin-right: .5rem
+
+.mb1
+  margin-bottom: .5rem
+
+.ml1
+  margin-left: .5rem
+
+.mx1
+  margin-right: .5rem
+  margin-left: .5rem
+
+.my1
+  margin-top: .5rem
+  margin-bottom: .5rem
+
+.m2
+  margin: 1rem
+
+.mt2
+  margin-top: 1rem
+
+.mr2
+  margin-right: 1rem
+
+.mb2
+  margin-bottom: 1rem
+
+.ml2
+  margin-left: 1rem
+
+.mx2
+  margin-right: 1rem
+  margin-left: 1rem
+
+.my2
+  margin-top: 1rem
+  margin-bottom: 1rem
+
+.m3
+  margin: 2rem
+
+.mt3
+  margin-top: 2rem
+
+.mr3
+  margin-right: 2rem
+
+.mb3
+  margin-bottom: 2rem
+
+.ml3
+  margin-left: 2rem
+
+.mx3
+  margin-right: 2rem
+  margin-left: 2rem
+
+.my3
+  margin-top: 2rem
+  margin-bottom: 2rem
+
+.m4
+  margin: 4rem
+
+.mt4
+  margin-top: 4rem
+
+.mr4
+  margin-right: 4rem
+
+.mb4
+  margin-bottom: 4rem
+
+.ml4
+  margin-left: 4rem
+
+.mx4
+  margin-right: 4rem
+  margin-left: 4rem
+
+.my4
+  margin-top: 4rem
+  margin-bottom: 4rem
+
+.mxn1
+  margin-right: -.5rem
+  margin-left: -.5rem
+
+.mxn2
+  margin-right: -1rem
+  margin-left: -1rem
+
+.mxn3
+  margin-right: -2rem
+  margin-left: -2rem
+
+.mxn4
+  margin-right: -4rem
+  margin-left: -4rem
+
+.ml-auto
+  margin-left: auto
+
+.mr-auto
+  margin-right: auto
+
+.mx-auto
+  margin-right: auto
+  margin-left: auto
+
+.p0
+  padding: 0
+
+.pt0
+  padding-top: 0
+
+.pr0
+  padding-right: 0
+
+.pb0
+  padding-bottom: 0
+
+.pl0
+  padding-left: 0
+
+.px0
+  padding-right: 0
+  padding-left: 0
+
+.py0
+  padding-top: 0
+  padding-bottom: 0
+
+.p1
+  padding: .5rem
+
+.pt1
+  padding-top: .5rem
+
+.pr1
+  padding-right: .5rem
+
+.pb1
+  padding-bottom: .5rem
+
+.pl1
+  padding-left: .5rem
+
+.py1
+  padding-top: .5rem
+  padding-bottom: .5rem
+
+.px1
+  padding-right: .5rem
+  padding-left: .5rem
+
+.p2
+  padding: 1rem
+
+.pt2
+  padding-top: 1rem
+
+.pr2
+  padding-right: 1rem
+
+.pb2
+  padding-bottom: 1rem
+
+.pl2
+  padding-left: 1rem
+
+.py2
+  padding-top: 1rem
+  padding-bottom: 1rem
+
+.px2
+  padding-right: 1rem
+  padding-left: 1rem
+
+.p3
+  padding: 2rem
+
+.pt3
+  padding-top: 2rem
+
+.pr3
+  padding-right: 2rem
+
+.pb3
+  padding-bottom: 2rem
+
+.pl3
+  padding-left: 2rem
+
+.py3
+  padding-top: 2rem
+  padding-bottom: 2rem
+
+.px3
+  padding-right: 2rem
+  padding-left: 2rem
+
+.p4
+  padding: 4rem
+
+.pt4
+  padding-top: 4rem
+
+.pr4
+  padding-right: 4rem
+
+.pb4
+  padding-bottom: 4rem
+
+.pl4
+  padding-left: 4rem
+
+.py4
+  padding-top: 4rem
+  padding-bottom: 4rem
+
+.px4
+  padding-right: 4rem
+  padding-left: 4rem
diff --git a/assets/sass/_variables.sass b/assets/sass/_variables.sass
new file mode 100644
index 0000000..a935f1d
--- /dev/null
+++ b/assets/sass/_variables.sass
@@ -0,0 +1,13 @@
+// Fonts
+$font-family-body: "JetBrains Mono", monospace
+$font-family-mono: "JetBrains Mono", monospace
+$font-family-tt: "Inconsolata", monospace
+$font-size: 14px
+$line-height: 1.725
+$page-width: 48rem
+// Logo
+$logo-width: 50px
+$logo-height: 50px
+$logo-grayout: true
+// Colors
+$colors: "dark" // white dark light classic
diff --git a/assets/sass/colors/classic.sass b/assets/sass/colors/classic.sass
new file mode 100644
index 0000000..36839f8
--- /dev/null
+++ b/assets/sass/colors/classic.sass
@@ -0,0 +1,13 @@
+$color-background: #fafafa
+$color-footer-mobile-1: darken($color-background, 2%)
+$color-footer-mobile-2: darken($color-background, 10%)
+$color-background-code: darken($color-background, 2%)
+$color-border: #666
+$color-meta: #666
+$color-meta-code: lighten($color-meta, 10%)
+$color-link: rgba(86, 124, 119, .4)
+$color-text: #22272a
+$color-accent-1: #cc2a41
+$color-accent-2: rgba(86, 124, 119, .8)
+$color-accent-3: #666
+$color-quote: #cc2a41
diff --git a/assets/sass/colors/dark.sass b/assets/sass/colors/dark.sass
new file mode 100644
index 0000000..f6b1b2a
--- /dev/null
+++ b/assets/sass/colors/dark.sass
@@ -0,0 +1,13 @@
+$color-background: #1d1f21
+$color-footer-mobile-1: lighten($color-background, 2%)
+$color-footer-mobile-2: lighten($color-background, 10%)
+$color-background-code: lighten($color-background, 2%)
+$color-border: #666
+$color-meta: #666
+$color-meta-code: #666
+$color-link: rgba(212, 128, 170, 1)
+$color-text: #c9cacc
+$color-accent-3: #cccccc
+$color-accent-2: #eeeeee
+$color-accent-1: #2bbc8a
+$color-quote: #ccffb6
diff --git a/assets/sass/colors/light.sass b/assets/sass/colors/light.sass
new file mode 100644
index 0000000..18c9a09
--- /dev/null
+++ b/assets/sass/colors/light.sass
@@ -0,0 +1,14 @@
+// by @GabiThume (https://github.com/gabithume)
+$color-background: #e2e0de
+$color-footer-mobile-1: darken($color-background, 2%)
+$color-footer-mobile-2: darken($color-background, 10%)
+$color-background-code: darken($color-background, 2%)
+$color-border: #666
+$color-meta: #666
+$color-meta-code: lighten($color-meta, 10%)
+$color-link: rgba(43, 188, 138, 1)
+$color-text: #363533
+$color-accent-3: #666666
+$color-accent-2: #111111
+$color-accent-1: #d44375
+$color-quote: #ab2251
diff --git a/assets/sass/colors/white.sass b/assets/sass/colors/white.sass
new file mode 100644
index 0000000..d0d5e80
--- /dev/null
+++ b/assets/sass/colors/white.sass
@@ -0,0 +1,14 @@
+// by @sergodeeva (https://github.com/sergodeeva)
+$color-background: #FFFFFF
+$color-footer-mobile-1: darken($color-background, 2%)
+$color-footer-mobile-2: darken($color-background, 10%)
+$color-background-code: darken($color-background, 2%)
+$color-border: #666
+$color-meta: #666
+$color-meta-code: lighten($color-meta, 10%)
+$color-link: rgba(212, 128, 170, 1)
+$color-text: #383838
+$color-accent-3: #8c8c8c
+$color-accent-2: #383838
+$color-accent-1: #2bbc8a
+$color-quote: #2bbc8a
\ No newline at end of file
diff --git a/assets/sass/partial/archive.sass b/assets/sass/partial/archive.sass
new file mode 100644
index 0000000..9865351
--- /dev/null
+++ b/assets/sass/partial/archive.sass
@@ -0,0 +1,25 @@
+#archive
+  .post-list
+    padding: 0
+
+    .post-item
+      margin-bottom: 1rem
+      margin-left: 0
+      list-style-type: none
+
+      .meta
+        display: block
+        margin-right: 16px
+        min-width: 100px
+        color: $color-meta
+        font-size: 14px
+
+  @media (min-width: 480px)
+    .post-list
+      .post-item
+        display: flex
+        margin-bottom: 5px
+        margin-left: 1rem
+
+        .meta
+          text-align: left
diff --git a/assets/sass/partial/article.sass b/assets/sass/partial/article.sass
new file mode 100644
index 0000000..c61798d
--- /dev/null
+++ b/assets/sass/partial/article.sass
@@ -0,0 +1,138 @@
+article
+  header
+    .posttitle
+      margin-top: 0
+      margin-bottom: 0
+      text-transform: none
+      font-size: 1.5em
+      line-height: 1.25
+
+    .meta
+      margin-top: 0
+      margin-bottom: 1rem
+
+    .meta *
+      color: $color-accent-3
+      font-size: .85rem
+
+    .author
+      text-transform: uppercase
+      letter-spacing: .01em
+      font-weight: 700
+
+    .postdate
+      display: inline
+
+  .content
+    h2:before
+      position: absolute
+      top: -4px
+      left: -1rem
+      color: $color-accent-1
+      content: "#"
+      font-weight: bold
+      font-size: 1.2rem
+
+    img
+    video
+      display: block
+      margin: auto
+      max-width: 100%
+      height: auto
+
+    /* http://webdesignerwall.com/tutorials/css-elastic-videos */
+    .video-container
+      position: relative
+      overflow: hidden
+      padding-top: 56.25% e
+      // (9/16 * 100)% // 16:9 ratio
+      height: 0
+
+      iframe, object, embed
+        position: absolute
+        top: 0
+        left: 0
+        margin-top: 0
+        width: 100%
+        height: 100%
+
+    blockquote
+      margin: 1rem 10px
+      padding: .5em 10px
+      background: inherit
+      color: $color-quote
+      quotes: "\201C" "\201D" "\2018" "\2019"
+      font-weight: bold
+
+      p
+        margin: 0
+
+      &:before
+        margin-right: .25em
+        color: $color-quote
+        content: "\201C"
+        vertical-align: -.4em
+        font-size: 2em
+        line-height: .1em
+
+      footer
+        margin: line-height 0
+        color: $color-meta
+        font-size: 11px
+
+        a
+          background-image: linear-gradient(transparent, transparent 5px, $color-meta 5px, $color-meta)
+          color: $color-meta
+
+        a:hover
+          background-image: linear-gradient(transparent, transparent 4px, lighten($color-meta, 20%) 4px, lighten($color-meta, 20%))
+          color: lighten($color-meta, 20%)
+
+        cite
+          &:before
+            padding: 0 .5em
+            content: "—"
+
+    .pullquote
+      margin: 0
+      width: 45%
+      text-align: left
+
+      &.left
+        margin-right: 1em
+        margin-left: .5em
+
+      &.right
+        margin-right: .5em
+        margin-left: 1em
+
+    .caption
+      position: relative
+      display: block
+      margin-top: .5em
+      color: $color-meta
+      text-align: center
+      font-size: .9em
+
+.posttitle
+  text-transform: none
+  font-size: 1.5em
+  line-height: 1.25
+
+.article-tag
+  .tag-link
+    &:before
+      content: "#"
+      @include underline(10px, $color-link)
+
+.article-category
+  .category-link
+    @include underline(10px, $color-link)
+
+@media (min-width: 480px)
+  .article-tag,
+  .article-category
+    display: inline
+
+    &:before
+      content: "|"
diff --git a/assets/sass/partial/categories.sass b/assets/sass/partial/categories.sass
new file mode 100644
index 0000000..fcc179c
--- /dev/null
+++ b/assets/sass/partial/categories.sass
@@ -0,0 +1,11 @@
+#categories
+  .category-list-title
+    color: $color-meta
+  .category-list
+    .category-list-item
+      .category-list-count
+        color: $color-meta
+      .category-list-count:before
+        content: " ("
+      .category-list-count:after
+        content: ")"
diff --git a/assets/sass/partial/comments.sass b/assets/sass/partial/comments.sass
new file mode 100644
index 0000000..49a1ef0
--- /dev/null
+++ b/assets/sass/partial/comments.sass
@@ -0,0 +1,2 @@
+.blog-post-comments
+  margin-top: 4rem
diff --git a/assets/sass/partial/footer.sass b/assets/sass/partial/footer.sass
new file mode 100644
index 0000000..14cb999
--- /dev/null
+++ b/assets/sass/partial/footer.sass
@@ -0,0 +1,60 @@
+#footer
+  position: absolute
+  bottom: 0
+  margin-bottom: 10px
+  width: 100%
+  color: $color-meta
+  vertical-align: top
+  text-align: center
+  font-size: 11px
+
+  ul
+    margin: 0
+    padding: 0
+    list-style: none
+
+  li
+    display: inline-block
+    margin-right: 15px
+    border-right: 1px solid
+    border-color: $color-border
+    vertical-align: middle
+
+    a
+      margin-right: 15px
+
+  li:last-child
+    margin-right: 0
+    border-right: 0
+
+    a
+      margin-right: 0
+
+  a
+    color: $color-meta
+    text-decoration: underline
+    background-image: none
+
+  a:hover
+    color: lighten($color-meta, 20%)
+
+  .footer-left
+    height: 20px
+    vertical-align: middle
+    line-height: 20px
+
+@media (min-width: 39rem)
+  #footer
+    display: flex
+    flex-flow: row wrap
+    justify-content: space-between
+    align-items: center
+    align-content: center
+    margin-bottom: 20px
+
+    .footer-left
+      align-self: flex-start
+      margin-right: 20px
+
+    .footer-right
+      align-self: flex-end
diff --git a/assets/sass/partial/header.sass b/assets/sass/partial/header.sass
new file mode 100644
index 0000000..45bcee5
--- /dev/null
+++ b/assets/sass/partial/header.sass
@@ -0,0 +1,109 @@
+#header
+  margin: 0 auto 2rem
+  width: 100%
+
+  h1, .h1
+    margin-top: 0
+    margin-bottom: 0
+    color: $color-text
+    letter-spacing: .01em
+    font-weight: 700
+    font-style: normal
+    font-size: 1.5rem
+    line-height: 2rem
+
+    @include antialias()
+
+  a
+    background: none
+    color: inherit
+    text-decoration: none
+
+  #logo
+    display: inline-block
+    float: left
+    margin-right: 20px
+    width: $logo-width
+    height: $logo-height
+    border-radius: 5px
+    background-size: $logo-width $logo-height
+    background-repeat: no-repeat
+    if $logo-grayout
+      filter: grayscale(100%)
+      -webkit-filter: grayscale(100%)
+
+  #nav
+    color: $color-accent-1
+    letter-spacing: .01em
+    font-weight: 200
+    font-style: normal
+    font-size: .8rem
+
+    ul
+      margin: 0
+      padding: 0
+      list-style-type: none
+      line-height: 15px
+
+      a
+        margin-right: 15px
+        color: $color-accent-1
+
+      a:hover
+        @include underline(5px, $color-accent-1)
+
+      li
+        display: inline-block
+        margin-right: 15px
+        border-right: 1px dotted
+        border-color: $color-accent-1
+        vertical-align: middle
+
+      .icon
+        display: none
+
+      li:last-child
+        margin-right: 0
+        border-right: 0
+
+        a
+          margin-right: 0
+
+if $logo-grayout
+  #header:hover
+    #logo
+      filter: none
+      -webkit-filter: none
+
+@media screen and (max-width: 480px)
+  #header #title
+    display: table
+    margin-right: 5rem
+    min-height: $logo-height
+    h1
+      display: table-cell
+      vertical-align: middle
+
+  #header #nav
+    ul
+      a:hover
+        background: none
+
+      li
+        display: none
+        border-right: 0
+
+      li.icon
+        position: absolute
+        top: 77px
+        right: 1rem
+        display: inline-block
+
+    ul.responsive
+      li
+        display: block
+
+    li:not(:first-child)
+      padding-top: 1rem
+      padding-left: $logo-width + 20px
+      font-size: 1rem
diff --git a/assets/sass/partial/index.sass b/assets/sass/partial/index.sass
new file mode 100644
index 0000000..aa15aca
--- /dev/null
+++ b/assets/sass/partial/index.sass
@@ -0,0 +1,32 @@
+.post-list
+  padding: 0
+
+  .post-item
+    margin-bottom: 1rem
+    margin-left: 0
+    list-style-type: none
+
+    .meta
+      display: block
+      margin-right: 16px
+      min-width: 100px
+      color: $color-meta
+      font-size: 14px
+
+@media (min-width: 480px)
+  .post-list
+    .post-item
+      display: flex
+      margin-bottom: 5px
+
+      .meta
+        text-align: left
+
+.project-list
+  padding: 0
+  list-style: none
+
+  .project-item
+    margin-bottom: 5px
+    p
+      display: inline
diff --git a/assets/sass/partial/pagination.sass b/assets/sass/partial/pagination.sass
new file mode 100644
index 0000000..5f53dc6
--- /dev/null
+++ b/assets/sass/partial/pagination.sass
@@ -0,0 +1,23 @@
+.pagination
+  display: inline-block
+  margin-top: 2rem
+  width: 100%
+  text-align: center
+
+  .page-number
+    color: $color-text
+    font-size: .8rem
+
+  a
+    padding: 4px 6px
+    border-radius: 5px
+    // background-color: $color-accent-1
+    background-image: none
+    color: $color-text
+    text-decoration: none
+
+  a:hover
+    background-image: none
+
+  a:hover:not(.active)
+    color: $color-accent-2
diff --git a/assets/sass/partial/post/actions_desktop.sass b/assets/sass/partial/post/actions_desktop.sass
new file mode 100644
index 0000000..e2be2dd
--- /dev/null
+++ b/assets/sass/partial/post/actions_desktop.sass
@@ -0,0 +1,221 @@
+#header-post
+  position: fixed
+  top: 2rem
+  right: 0
+  display: inline-block
+  float: right
+  z-index: 100
+
+  a
+    background: none
+    color: inherit
+    text-decoration: none
+
+  a.icon
+    background: none
+
+    &:hover
+      color: $color-link
+
+  nav
+    ul
+      display: block;
+      list-style-image: none;
+      list-style-position: outside;
+      list-style-type: none;
+      list-style-type: none;
+      padding-inline-start: 40px;
+      li
+        display: list-item;
+        margin-right: 0px;
+
+  nav > ul
+    margin-block-end: 1em;
+    margin-block-start: 1em;
+
+  ul
+    display: inline-block
+    margin: 0
+    padding: 0
+    list-style-type: none
+
+    li
+      display: inline-block
+      margin-right: 15px
+      vertical-align: middle
+
+    li:last-child
+      margin-right: 0
+
+  #menu-icon
+    float: right
+    margin-right: 2rem
+    margin-left: 15px
+
+    &:hover
+      color: $color-accent-1
+
+  #menu-icon-tablet
+    float: right
+    margin-right: 2rem
+    margin-left: 15px
+
+    &:hover
+      color: $color-accent-1
+
+  #top-icon-tablet
+    position: fixed
+    right: 2rem
+    bottom: 2rem
+    margin-right: 2rem
+    margin-left: 15px
+
+    &:hover
+      color: $color-accent-1
+
+  .active
+    color: $color-accent-1
+
+  #menu
+    visibility: hidden
+    margin-right: 2rem
+
+  #nav
+    color: $color-accent-1
+    letter-spacing: .01em
+    font-weight: 200
+    font-style: normal
+    font-size: .8rem
+
+    ul
+      line-height: 15px
+
+      a
+        margin-right: 15px
+        color: $color-accent-1
+
+      a:hover
+        @include underline(5px, $color-accent-1)
+
+      li
+        border-right: 1px dotted $color-accent-1
+
+      li:last-child
+        margin-right: 0
+        border-right: 0
+
+        a
+          margin-right: 0
+
+  #actions
+    float: right
+    margin-top: 2rem
+    margin-right: 2rem
+    width: 100%
+    text-align: right
+
+    ul
+      display: block
+
+    .info
+      display: block
+      font-style: italic
+
+  #share
+    clear: both
+    padding-top: 1rem
+    padding-right: 2rem
+    text-align: right
+
+    li
+      display: block
+      margin: 0
+
+  #toc
+    float: right
+    clear: both
+    overflow: auto
+    margin-top: 1rem
+    padding-right: 2rem
+    max-width: 20em
+    max-height: calc(95vh - 7rem)
+    text-align: right
+
+    a:hover
+      color: $color-link
+
+    // .toc-level-1 > .toc-link
+    //   display: none
+
+    nav > ul > li
+      color: $color-text
+      font-size: .8rem
+
+      &:before
+        color: $color-accent-1
+        content: "#"
+        margin-right: 8px
+
+    nav > ul > li > ul > li
+      color: $color-meta
+      font-size: .7rem
+
+      &:before
+        color: $color-accent-1
+        content: "·"
+        font-weight: bold
+        margin-right: 3px
+
+    nav > ul > li > ul > li > ul > li
+      color: darken($color-meta, 20%)
+      font-size: .4rem
+
+    .toc-level-5
+      display: none
+
+    .toc-level-6
+      display: none
+
+    .toc-number
+      display: none
+
+// smartphone + phapblet
+@media screen and (max-width: 500px)
+  #header-post
+    display: none
+
+@media screen and (max-width: 900px)
+  #header-post
+    #menu-icon
+      display: none
+
+    #actions
+      display: none
+
+@media screen and (max-width: 1199px)
+  #header-post
+    #toc
+      display: none
+
+@media screen and (min-width: 900px)
+  #header-post
+    #menu-icon-tablet
+      display: none !important
+
+    #top-icon-tablet
+      display: none !important
+
+@media screen and (min-width: 1199px)
+  #header-post
+    #actions
+      width: auto
+
+      ul
+        display: inline-block
+        float: right
+
+      .info
+        display: inline
+        float: left
+        margin-right: 2rem
+        font-style: italic
diff --git a/assets/sass/partial/post/actions_mobile.sass b/assets/sass/partial/post/actions_mobile.sass
new file mode 100644
index 0000000..8a602ac
--- /dev/null
+++ b/assets/sass/partial/post/actions_mobile.sass
@@ -0,0 +1,139 @@
+#footer-post
+  position: fixed
+  right: 0
+  bottom: 0
+  left: 0
+  z-index: 5000000
+  width: 100%
+  border-top: 1px solid $color-border
+  background: $color-footer-mobile-1
+  transition: opacity .2s
+
+  a
+    background: none
+    color: inherit
+    text-decoration: none
+
+  a.icon
+    background: none
+
+    &:hover
+      color: $color-link
+
+  #nav-footer
+    padding-right: 1rem
+    padding-left: 1rem
+    background: $color-footer-mobile-2
+    text-align: center
+
+    a
+      color: $color-accent-1
+      font-size: 1em
+
+    a:hover
+      @include underline(5px, $color-accent-1)
+
+    ul
+      display: table
+      margin: 0
+      padding: 0
+      width: 100%
+      list-style-type: none
+
+      li
+        display: inline-table
+        padding: 10px
+        width: 20%
+        vertical-align: middle
+
+  #actions-footer
+    overflow: auto
+    margin-top: 1rem
+    margin-bottom: 1rem
+    padding-right: 1rem
+    padding-left: 1rem
+    width: 100%
+    text-align: center
+    white-space: nowrap
+
+    a
+      display: inline-block
+      padding-left: 1rem
+      color: $color-accent-1
+
+  #share-footer
+    padding-right: 1rem
+    padding-left: 1rem
+    background: $color-footer-mobile-2
+    text-align: center
+
+    ul
+      display: table
+      margin: 0
+      padding: 0
+      width: 100%
+      list-style-type: none
+
+      li
+        display: inline-table
+        padding: 10px
+        width: 20%
+        vertical-align: middle
+
+  #toc-footer
+    clear: both
+    padding-top: 1rem
+    padding-bottom: 1rem
+    background: $color-footer-mobile-2
+    text-align: left
+
+    #TableOfContents
+      ul
+        margin: 0
+        padding-left: 20px
+        list-style-type: none
+
+        li
+          line-height: 30px
+
+    a:hover
+      color: $color-link
+
+    // .toc-level-1 > .toc-link
+    //   display: none
+
+    #TableOfContents > ul > li
+      color: $color-text
+      font-size: .8rem
+
+      &:before
+        color: $color-accent-1
+        content: "#"
+        margin-right: 8px;
+
+    #TableOfContents > ul > li > ul > li
+      color: $color-meta
+      font-size: .7rem
+      line-height: 15px
+
+      &:before
+        color: $color-accent-1
+        content: "·";
+        font-weight: bold;
+        margin-right: 3px;
+
+    #TableOfContents > ul > li > ul > li > ul > li
+      display: none
+
+    // .toc-level-5
+    //   display: none
+
+    // .toc-level-6
+    //   display: none
+
+    // .toc-number
+    //   display: none
+
+@media screen and (min-width: 500px)
+  #footer-post-container
+    display: none
diff --git a/assets/sass/partial/search.sass b/assets/sass/partial/search.sass
new file mode 100644
index 0000000..589bff7
--- /dev/null
+++ b/assets/sass/partial/search.sass
@@ -0,0 +1,46 @@
+.search-input
+  padding: 4px 7px
+  width: 100%
+  outline: none
+  border: solid 1px $color-accent-3
+  border-radius: 5px
+  background-color: $color-background
+  color: $color-text
+  font-size: 1.2rem
+  -webkit-border-radius: 5px
+  -moz-border-radius: 5px
+
+  &:focus
+    border: solid 1px $color-accent-1
+
+#search-result
+  ul.search-result-list
+    padding: 0
+    list-style-type: none
+
+  li
+    margin: 2em auto
+
+  a.search-result-title
+    background-image: none
+    color: $color-text
+    text-transform: capitalize
+    font-weight: bold
+    line-height: 1.2
+
+  p.search-result
+    overflow: hidden
+    margin: .4em auto
+    max-height: 13em
+    text-align: justify
+    font-size: .8em
+
+  em.search-keyword
+    border-bottom: 1px dashed $color-link
+    color: $color-link
+    font-weight: bold
+
+.search-no-result
+  display: none
+  padding-bottom: .5em
+  color: $color-text
diff --git a/assets/sass/partial/tags.sass b/assets/sass/partial/tags.sass
new file mode 100644
index 0000000..41522e6
--- /dev/null
+++ b/assets/sass/partial/tags.sass
@@ -0,0 +1,9 @@
+#tag-cloud
+  .tag-cloud-title
+    color: $color-meta
+  .tag-cloud-tags
+    clear: both
+    text-align: center
+    a
+      display: inline-block
+      margin: 10px
diff --git a/assets/sass/partial/tooltip.sass b/assets/sass/partial/tooltip.sass
new file mode 100644
index 0000000..1d35faf
--- /dev/null
+++ b/assets/sass/partial/tooltip.sass
@@ -0,0 +1,78 @@
+// ref: https://github.com/primer/primer/blob/master/modules/primer-tooltips/lib/tooltips.scss
+.tooltipped
+  position: relative
+  
+// This is the tooltip bubble
+.tooltipped::after
+  position: absolute
+  z-index: 1000000
+  display: none
+  padding: .2em .5em
+  -webkit-font-smoothing: subpixel-antialiased
+  color: $color-background
+  font-display: swap // @stylint ignore
+  font-weight: 400
+  font-size: $font-size * 0.8
+  font-family: $font-family-body
+  line-height: $line-height
+  text-rendering: geometricPrecision
+  text-align: center
+  word-wrap: break-word
+  white-space: pre
+  content: attr(aria-label)
+  background: $color-text
+  border-radius: 3px
+  opacity: 0
+  
+// This is the tooltip arrow
+.tooltipped::before
+  position: absolute
+  z-index: 1000001
+  display: none
+  width: 0
+  height: 0
+  color: $color-text
+  pointer-events: none
+  content: ''
+  border: 6px solid transparent
+  opacity: 0
+  
+// delay animation for tooltip
+@keyframes tooltip-appear
+  from
+    opacity: 0
+  to
+    opacity: 1
+    
+// This will indicate when we'll activate the tooltip
+.tooltipped:hover,
+.tooltipped:active,
+.tooltipped:focus
+  &::before,
+  &::after
+    display: inline-block
+    text-decoration: none
+    animation-name: tooltip-appear
+    animation-duration: 0.1s
+    animation-fill-mode: forwards
+    animation-timing-function: ease-in
+    
+// Tooltipped south
+.tooltipped-s,
+.tooltipped-sw
+  &::after
+    top: 100%
+    right: 50%
+    margin-top: 6px
+  &::before
+    top: auto
+    right: 50%
+    bottom: -7px
+    margin-right: -6px
+    border-bottom-color: $color-text
+.tooltipped-sw::after
+  margin-right: -16px
+  
+// Move the tooltip body to the center of the object.
+.tooltipped-s::after
+  transform: translateX(50%)
\ No newline at end of file
diff --git a/assets/sass/rtl.sass b/assets/sass/rtl.sass
new file mode 100644
index 0000000..6d9f5bb
--- /dev/null
+++ b/assets/sass/rtl.sass
@@ -0,0 +1,93 @@
+@font-face
+  font-family: Vazir
+  src: url('../lib/vazir-font/Vazir.eot')
+  src: url('../lib/vazir-font/Vazir.eot?#iefix') format('embedded-opentype'),
+       url('../lib/vazir-font/Vazir.woff2') format('woff2'),
+       url('../lib/vazir-font/Vazir.woff') format('woff'),
+       url('../lib/vazir-font/Vazir.ttf') format('truetype')
+  font-weight: normal
+
+@font-face
+  font-family: Vazir
+  src: url('../lib/vazir-font/Vazir-Bold.eot')
+  src: url('../lib/vazir-font/Vazir-Bold.eot?#iefix') format('embedded-opentype'),
+       url('../lib/vazir-font/Vazir-Bold.woff2') format('woff2'),
+       url('../lib/vazir-font/Vazir-Bold.woff') format('woff'),
+       url('../lib/vazir-font/Vazir-Bold.ttf') format('truetype')
+  font-weight: bold
+
+@font-face
+  font-family: Vazir
+  src: url('../lib/vazir-font/Vazir-Light.eot')
+  src: url('../lib/vazir-font/Vazir-Light.eot?#iefix') format('embedded-opentype'),
+       url('../lib/vazir-font/Vazir-Light.woff2') format('woff2'),
+       url('../lib/vazir-font/Vazir-Light.woff') format('woff'),
+       url('../lib/vazir-font/Vazir-Light.ttf') format('truetype')
+  font-weight: 300
+
+.rtl
+  font-family: Vazir, sans-serif
+  direction: rtl
+
+  #nav
+    li
+      margin-right: 0px !important // @stylint ignore
+      padding-left: 15px
+      border-right: 0px !important // @stylint ignore
+      border-left: 1px dotted
+
+    li:last-child
+      margin-right: 15px !important // @stylint ignore
+      border-left: 0 !important // @stylint ignore
+
+  #header
+    #logo
+      float: right
+      margin-right: 0
+      margin-left: 20px
+
+  #footer
+    li
+      margin-right: 0px
+      padding-left: 15px
+      border-right: 0px
+      border-left: 1px dotted
+
+    li:last-child
+      margin-right: 15px !important // @stylint ignore
+      border-left: 0 !important // @stylint ignore
+
+    #logo
+      float: right
+
+  article
+    .content
+      h2:before
+        right: -1rem
+
+  .post-list
+    .post-item
+      .meta
+        margin-left: 16px
+        margin-right: inherit
+        
+@media screen and (min-width: 480px)
+  .rtl
+    .post-list
+      .post-item
+        .meta
+          text-align: left
+ 
+@media screen and (max-width: 480px)
+  .rtl
+    #header
+      #title
+        margin-left: 5rem
+        margin-right: 0
+
+      #nav
+        ul
+          li
+            left: 1rem
+            right: auto
+            border: 0
\ No newline at end of file
diff --git a/assets/sass/style.sass b/assets/sass/style.sass
new file mode 100644
index 0000000..1562eb4
--- /dev/null
+++ b/assets/sass/style.sass
@@ -0,0 +1,211 @@
+@import "variables"
+@import "colors/{{ site.Params.colortheme }}"
+@import "util"
+@import "mixins"
+@import "extend"
+@import "fonts"
+
+// global-reset()
+
+*, *:before, *:after
+  box-sizing: border-box
+
+html
+  margin: 0
+  padding: 0
+  height: 100%
+  border-top: 2px solid $color-text
+  -webkit-text-size-adjust: 100%
+  -ms-text-size-adjust: 100%
+
+body
+  margin: 0
+  height: 100%
+  background-color: $color-background
+  color: $color-text
+  font-display: swap // @stylint ignore
+  font-weight: 400
+  font-size: $font-size
+  font-family: $font-family-body
+  line-height: $line-height
+  text-rendering: geometricPrecision
+  flex: 1
+
+  @include antialias()
+
+  @extend $base-style !optional
+
+.content
+  position: relative
+  display: flex
+  flex-direction: column
+  min-height: 100%
+  overflow-wrap: break-word
+
+  p
+    @include hyphens(auto)
+
+  code
+    @include hyphens(manual)
+
+  a
+    color: $color-text
+    text-decoration: none
+
+    @include underline(5px, $color-text)
+
+    &:hover
+      background-image: linear-gradient(transparent, transparent 4px, $color-link 4px, $color-link)
+
+  a.icon
+    background: none
+
+    &:hover
+      color: $color-link
+
+  h1 a, .h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
+    background: none
+    color: inherit
+    text-decoration: none
+
+  h1 a:hover, .h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
+    @include underline(6px, $color-link)
+
+  h6
+    a
+      background: none
+      color: inherit
+      text-decoration: none
+
+  h6
+    a:hover
+      @include underline(6px, $color-link)
+
+@media (min-width: 540px)
+  .image-wrap
+    flex-direction: row
+    margin-bottom: 2rem
+
+    .image-block
+      flex: 1 0 35%
+      margin-right: 2rem
+
+    p
+      flex: 1 0 65%
+
+.max-width
+  max-width: $page-width
+
+@media (max-width: 480px)
+  // smaller margins at smaller screen widths
+  .px3
+    padding-right: 1rem
+    padding-left: 1rem
+
+  .my4
+    margin-top: 2rem
+    margin-bottom: 2rem
+
+@media (min-width: 480px)
+  p
+    text-align: justify
+
+@import "partial/header"
+@import "partial/post/actions_desktop"
+@import "partial/post/actions_mobile"
+@import "partial/index"
+@import "partial/article"
+@import "partial/archive"
+@import "partial/comments"
+@import "partial/footer"
+@import "partial/pagination"
+@import "partial/search"
+@import "partial/tags"
+@import "partial/tooltip"
+@import "partial/categories"
+// Code
+// @import "highlight/" + $highlight
+
+pre
+  overflow-x: auto
+  padding: 10px 15px
+  padding-bottom: 0
+  border: 1px dotted $color-border
+  border-radius: 4px
+  font-size: 13px
+  font-family: $font-family-mono
+  line-height: 22px
+  -webkit-border-radius: 4px
+
+  code
+    display: block
+    padding: 0
+    border: none
+
+code
+  padding: 0 5px
+  border: 1px dotted $color-border
+  border-radius: 2px
+  -webkit-border-radius: 2px
+
+.highlight
+  overflow-x: auto
+  margin: 1rem 0
+  padding: 10px 15px
+  border-radius: 4px
+  background: $color-background-code
+  font-family: $font-family-mono
+  // color: $color-accent-3
+  -webkit-border-radius: 4px
+
+  figcaption
+    margin: -5px 0 5px
+    color: $color-meta-code
+    font-size: .9em
+    zoom: 1
+
+    a
+      float: right
+      color: $color-meta-code
+      font-style: italic
+      font-size: .8em
+      @include underline(10px, $color-link)
+
+    a:hover
+      color: lighten($color-meta-code,20%)
+
+    &:before
+      content: ""
+      display: table
+
+    &:after
+      clear: both
+
+  &:hover 
+    .btn-copy
+      opacity: 1
+
+  .btn-copy
+    font-size: 1.2rem
+    position: absolute
+    right: 20px
+    opacity: 0
+    transition: opacity 0.2s ease-in
+    &:hover
+      color: $color-accent-1
+
+  pre
+    margin: 0
+    padding: 0
+    border: none
+    background: none
+
+  table
+    width: auto
+
+  td.gutter
+    text-align: right
+    opacity: .2
+
+  .line
+    height: 22px
diff --git a/exampleSite/resources/_gen/assets/sass/sass/style.sass_59447018c644f9722e171f6b04eb2a50.content b/exampleSite/resources/_gen/assets/sass/sass/style.sass_59447018c644f9722e171f6b04eb2a50.content
new file mode 100644
index 0000000..7874cd1
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/sass/sass/style.sass_59447018c644f9722e171f6b04eb2a50.content
@@ -0,0 +1,3 @@
+.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.table{display:table}.table-cell{display:table-cell}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.clearfix:before,.clearfix:after{display:table;content:" "}.clearfix:after{clear:both}.left{float:left}.right{float:right}.fit{max-width:100%}.truncate{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.max-width-1{max-width:24rem}.max-width-2{max-width:32rem}.max-width-3{max-width:48rem}.max-width-4{max-width:64rem}.border-box{box-sizing:border-box}.m0{margin:0}.mt0{margin-top:0}.mr0{margin-right:0}.mb0{margin-bottom:0}.ml0{margin-left:0}.mx0{margin-right:0;margin-left:0}.my0{margin-top:0;margin-bottom:0}.m1{margin:.5rem}.mt1{margin-top:.5rem}.mr1{margin-right:.5rem}.mb1{margin-bottom:.5rem}.ml1{margin-left:.5rem}.mx1{margin-right:.5rem;margin-left:.5rem}.my1{margin-top:.5rem;margin-bottom:.5rem}.m2{margin:1rem}.mt2{margin-top:1rem}.mr2{margin-right:1rem}.mb2{margin-bottom:1rem}.ml2{margin-left:1rem}.mx2{margin-right:1rem;margin-left:1rem}.my2{margin-top:1rem;margin-bottom:1rem}.m3{margin:2rem}.mt3{margin-top:2rem}.mr3{margin-right:2rem}.mb3{margin-bottom:2rem}.ml3{margin-left:2rem}.mx3{margin-right:2rem;margin-left:2rem}.my3{margin-top:2rem;margin-bottom:2rem}.m4{margin:4rem}.mt4{margin-top:4rem}.mr4{margin-right:4rem}.mb4{margin-bottom:4rem}.ml4{margin-left:4rem}.mx4{margin-right:4rem;margin-left:4rem}.my4{margin-top:4rem;margin-bottom:4rem}.mxn1{margin-right:-.5rem;margin-left:-.5rem}.mxn2{margin-right:-1rem;margin-left:-1rem}.mxn3{margin-right:-2rem;margin-left:-2rem}.mxn4{margin-right:-4rem;margin-left:-4rem}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.mx-auto{margin-right:auto;margin-left:auto}.p0{padding:0}.pt0{padding-top:0}.pr0{padding-right:0}.pb0{padding-bottom:0}.pl0{padding-left:0}.px0{padding-right:0;padding-left:0}.py0{padding-top:0;padding-bottom:0}.p1{padding:.5rem}.pt1{padding-top:.5rem}.pr1{padding-right:.5rem}.pb1{padding-bottom:.5rem}.pl1{padding-left:.5rem}.py1{padding-top:.5rem;padding-bottom:.5rem}.px1{padding-right:.5rem;padding-left:.5rem}.p2{padding:1rem}.pt2{padding-top:1rem}.pr2{padding-right:1rem}.pb2{padding-bottom:1rem}.pl2{padding-left:1rem}.py2{padding-top:1rem;padding-bottom:1rem}.px2{padding-right:1rem;padding-left:1rem}.p3{padding:2rem}.pt3{padding-top:2rem}.pr3{padding-right:2rem}.pb3{padding-bottom:2rem}.pl3{padding-left:2rem}.py3{padding-top:2rem;padding-bottom:2rem}.px3{padding-right:2rem;padding-left:2rem}.p4{padding:4rem}.pt4{padding-top:4rem}.pr4{padding-right:4rem}.pb4{padding-bottom:4rem}.pl4{padding-left:4rem}.py4{padding-top:4rem;padding-bottom:4rem}.px4{padding-right:4rem;padding-left:4rem}h1,.h1{display:block;margin-top:3rem;margin-bottom:1rem;color:#2bbc8a;letter-spacing:.01em;font-weight:700;font-style:normal;font-size:1.5em;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h2,.h2{position:relative;display:block;margin-top:2rem;margin-bottom:.5rem;color:#eee;text-transform:none;letter-spacing:normal;font-weight:bold;font-size:1rem}h3{color:#eee;text-decoration:underline;font-weight:bold;font-size:.9rem}h6{display:inline;text-decoration:none;color:#ccc;font-weight:bold;font-size:.9rem}h6{margin-top:.9rem;margin-bottom:.5rem}hr{border:0.5px dashed #ccc;opacity:.5;margin:0;margin-top:20px;margin-bottom:20px}strong{font-weight:bold}cite{font-style:italic}sub{position:relative;vertical-align:baseline;font-size:.75em;line-height:0}sup{top:-.5em}sub{bottom:-.2em}small{font-size:.85em}abbr{border-bottom:1px dotted}dl{line-height:1.725}ol ol{margin-top:0;margin-bottom:0}ol{list-style:decimal}dt{font-weight:bold}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px;overflow:auto;display:block}th{padding:8px;border-bottom:1px dashed #666;color:#eee;font-weight:bold;font-size:13px}td{padding:0 8px;border-bottom:none}@font-face{font-style:normal;font-family:"Meslo LG";src:local("Meslo LG S"),url("../lib/meslo-LG/MesloLGS-Regular.ttf") format("truetype")}@font-face{font-style:normal;font-family:"JetBrains Mono";src:local("JetBrains Mono"),url("../lib/JetBrainsMono/ttf/JetBrainsMono-Regular.ttf") format("truetype")}*,*:before,*:after{box-sizing:border-box}html{margin:0;padding:0;height:100%;border-top:2px solid #c9cacc;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0;height:100%;background-color:#1d1f21;color:#c9cacc;font-display:swap;font-weight:400;font-size:14px;font-family:"JetBrains Mono",monospace;line-height:1.725;text-rendering:geometricPrecision;flex:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.content{position:relative;display:flex;flex-direction:column;min-height:100%;overflow-wrap:break-word}.content p{hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;-webkit-hyphens:auto}.content code{hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual;-webkit-hyphens:manual}.content a{color:#c9cacc;text-decoration:none;background-image:linear-gradient(transparent, transparent 5px, #c9cacc 5px, #c9cacc);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x}.content a:hover{background-image:linear-gradient(transparent, transparent 4px, #d480aa 4px, #d480aa)}.content a.icon{background:none}.content a.icon:hover{color:#d480aa}.content h1 a,.content .h1 a,.content h2 a,.content h3 a,.content h4 a,.content h5 a,.content h6 a{background:none;color:inherit;text-decoration:none}.content h1 a:hover,.content .h1 a:hover,.content h2 a:hover,.content h3 a:hover,.content h4 a:hover,.content h5 a:hover,.content h6 a:hover{background-image:linear-gradient(transparent, transparent 6px, #d480aa 6px, #d480aa);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x}.content h6 a{background:none;color:inherit;text-decoration:none}.content h6 a:hover{background-image:linear-gradient(transparent, transparent 6px, #d480aa 6px, #d480aa);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x}@media (min-width: 540px){.image-wrap{flex-direction:row;margin-bottom:2rem}.image-wrap .image-block{flex:1 0 35%;margin-right:2rem}.image-wrap p{flex:1 0 65%}}.max-width{max-width:48rem}@media (max-width: 480px){.px3{padding-right:1rem;padding-left:1rem}.my4{margin-top:2rem;margin-bottom:2rem}}@media (min-width: 480px){p{text-align:justify}}#header{margin:0 auto 2rem;width:100%}#header h1,#header .h1{margin-top:0;margin-bottom:0;color:#c9cacc;letter-spacing:.01em;font-weight:700;font-style:normal;font-size:1.5rem;line-height:2rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}#header a{background:none;color:inherit;text-decoration:none}#header #logo{display:inline-block;float:left;margin-right:20px;width:50px;height:50px;border-radius:5px;background-size:50px 50px;background-repeat:no-repeat}#header #logo if $logo-grayout{filter:grayscale(100%);-webkit-filter:grayscale(100%)}#header #nav{color:#2bbc8a;letter-spacing:.01em;font-weight:200;font-style:normal;font-size:.8rem}#header #nav ul{margin:0;padding:0;list-style-type:none;line-height:15px}#header #nav ul a{margin-right:15px;color:#2bbc8a}#header #nav ul a:hover{background-image:linear-gradient(transparent, transparent 5px, #2bbc8a 5px, #2bbc8a);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x}#header #nav ul li{display:inline-block;margin-right:15px;border-right:1px dotted;border-color:#2bbc8a;vertical-align:middle}#header #nav ul .icon{display:none}#header #nav ul li:last-child{margin-right:0;border-right:0}#header #nav ul li:last-child a{margin-right:0}if $logo-grayout #header:hover #logo{filter:none;-webkit-filter:none}@media screen and (max-width: 480px){#header #title{display:table;margin-right:5rem;min-height:50px}#header #title h1{display:table-cell;vertical-align:middle}#header #nav ul a:hover{background:none}#header #nav ul li{display:none;border-right:0}#header #nav ul li.icon{position:absolute;top:77px;right:1rem;display:inline-block}#header #nav ul.responsive li{display:block}#header #nav li:not(:first-child){padding-top:1rem;padding-left:70px;font-size:1rem}}#header-post{position:fixed;top:2rem;right:0;display:inline-block;float:right;z-index:100}#header-post a{background:none;color:inherit;text-decoration:none}#header-post a.icon{background:none}#header-post a.icon:hover{color:#d480aa}#header-post nav ul{display:block;list-style-image:none;list-style-position:outside;list-style-type:none;list-style-type:none;padding-inline-start:40px}#header-post nav ul li{display:list-item;margin-right:0px}#header-post nav>ul{margin-block-end:1em;margin-block-start:1em}#header-post ul{display:inline-block;margin:0;padding:0;list-style-type:none}#header-post ul li{display:inline-block;margin-right:15px;vertical-align:middle}#header-post ul li:last-child{margin-right:0}#header-post #menu-icon{float:right;margin-right:2rem;margin-left:15px}#header-post #menu-icon:hover{color:#2bbc8a}#header-post #menu-icon-tablet{float:right;margin-right:2rem;margin-left:15px}#header-post #menu-icon-tablet:hover{color:#2bbc8a}#header-post #top-icon-tablet{position:fixed;right:2rem;bottom:2rem;margin-right:2rem;margin-left:15px}#header-post #top-icon-tablet:hover{color:#2bbc8a}#header-post .active{color:#2bbc8a}#header-post #menu{visibility:hidden;margin-right:2rem}#header-post #nav{color:#2bbc8a;letter-spacing:.01em;font-weight:200;font-style:normal;font-size:.8rem}#header-post #nav ul{line-height:15px}#header-post #nav ul a{margin-right:15px;color:#2bbc8a}#header-post #nav ul a:hover{background-image:linear-gradient(transparent, transparent 5px, #2bbc8a 5px, #2bbc8a);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x}#header-post #nav ul li{border-right:1px dotted #2bbc8a}#header-post #nav ul li:last-child{margin-right:0;border-right:0}#header-post #nav ul li:last-child a{margin-right:0}#header-post #actions{float:right;margin-top:2rem;margin-right:2rem;width:100%;text-align:right}#header-post #actions ul{display:block}#header-post #actions .info{display:block;font-style:italic}#header-post #share{clear:both;padding-top:1rem;padding-right:2rem;text-align:right}#header-post #share li{display:block;margin:0}#header-post #toc{float:right;clear:both;overflow:auto;margin-top:1rem;padding-right:2rem;max-width:20em;max-height:calc(95vh - 7rem);text-align:right}#header-post #toc a:hover{color:#d480aa}#header-post #toc nav>ul>li{color:#c9cacc;font-size:.8rem}#header-post #toc nav>ul>li:before{color:#2bbc8a;content:"#";margin-right:8px}#header-post #toc nav>ul>li>ul>li{color:#666;font-size:.7rem}#header-post #toc nav>ul>li>ul>li:before{color:#2bbc8a;content:"·";font-weight:bold;margin-right:3px}#header-post #toc nav>ul>li>ul>li>ul>li{color:#333;font-size:.4rem}#header-post #toc .toc-level-5{display:none}#header-post #toc .toc-level-6{display:none}#header-post #toc .toc-number{display:none}@media screen and (max-width: 500px){#header-post{display:none}}@media screen and (max-width: 900px){#header-post #menu-icon{display:none}#header-post #actions{display:none}}@media screen and (max-width: 1199px){#header-post #toc{display:none}}@media screen and (min-width: 900px){#header-post #menu-icon-tablet{display:none !important}#header-post #top-icon-tablet{display:none !important}}@media screen and (min-width: 1199px){#header-post #actions{width:auto}#header-post #actions ul{display:inline-block;float:right}#header-post #actions .info{display:inline;float:left;margin-right:2rem;font-style:italic}}#footer-post{position:fixed;right:0;bottom:0;left:0;z-index:5000000;width:100%;border-top:1px solid #666;background:#222426;transition:opacity .2s}#footer-post a{background:none;color:inherit;text-decoration:none}#footer-post a.icon{background:none}#footer-post a.icon:hover{color:#d480aa}#footer-post #nav-footer{padding-right:1rem;padding-left:1rem;background:#35393c;text-align:center}#footer-post #nav-footer a{color:#2bbc8a;font-size:1em}#footer-post #nav-footer a:hover{background-image:linear-gradient(transparent, transparent 5px, #2bbc8a 5px, #2bbc8a);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x}#footer-post #nav-footer ul{display:table;margin:0;padding:0;width:100%;list-style-type:none}#footer-post #nav-footer ul li{display:inline-table;padding:10px;width:20%;vertical-align:middle}#footer-post #actions-footer{overflow:auto;margin-top:1rem;margin-bottom:1rem;padding-right:1rem;padding-left:1rem;width:100%;text-align:center;white-space:nowrap}#footer-post #actions-footer a{display:inline-block;padding-left:1rem;color:#2bbc8a}#footer-post #share-footer{padding-right:1rem;padding-left:1rem;background:#35393c;text-align:center}#footer-post #share-footer ul{display:table;margin:0;padding:0;width:100%;list-style-type:none}#footer-post #share-footer ul li{display:inline-table;padding:10px;width:20%;vertical-align:middle}#footer-post #toc-footer{clear:both;padding-top:1rem;padding-bottom:1rem;background:#35393c;text-align:left}#footer-post #toc-footer #TableOfContents ul{margin:0;padding-left:20px;list-style-type:none}#footer-post #toc-footer #TableOfContents ul li{line-height:30px}#footer-post #toc-footer a:hover{color:#d480aa}#footer-post #toc-footer #TableOfContents>ul>li{color:#c9cacc;font-size:.8rem}#footer-post #toc-footer #TableOfContents>ul>li:before{color:#2bbc8a;content:"#";margin-right:8px}#footer-post #toc-footer #TableOfContents>ul>li>ul>li{color:#666;font-size:.7rem;line-height:15px}#footer-post #toc-footer #TableOfContents>ul>li>ul>li:before{color:#2bbc8a;content:"·";font-weight:bold;margin-right:3px}#footer-post #toc-footer #TableOfContents>ul>li>ul>li>ul>li{display:none}@media screen and (min-width: 500px){#footer-post-container{display:none}}.post-list{padding:0}.post-list .post-item{margin-bottom:1rem;margin-left:0;list-style-type:none}.post-list .post-item .meta{display:block;margin-right:16px;min-width:100px;color:#666;font-size:14px}@media (min-width: 480px){.post-list .post-item{display:flex;margin-bottom:5px}.post-list .post-item .meta{text-align:left}}.project-list{padding:0;list-style:none}.project-list .project-item{margin-bottom:5px}.project-list .project-item p{display:inline}article header .posttitle{margin-top:0;margin-bottom:0;text-transform:none;font-size:1.5em;line-height:1.25}article header .meta{margin-top:0;margin-bottom:1rem}article header .meta *{color:#ccc;font-size:.85rem}article header .author{text-transform:uppercase;letter-spacing:.01em;font-weight:700}article header .postdate{display:inline}article .content h2:before{position:absolute;top:-4px;left:-1rem;color:#2bbc8a;content:"#";font-weight:bold;font-size:1.2rem}article .content video{display:block;margin:auto;max-width:100%;height:auto}article .content .video-container{position:relative;overflow:hidden;padding-top:56.25% e;height:0}article .content .video-container iframe,article .content .video-container object,article .content .video-container embed{position:absolute;top:0;left:0;margin-top:0;width:100%;height:100%}article .content blockquote{margin:1rem 10px;padding:.5em 10px;background:inherit;color:#ccffb6;quotes:"\201C" "\201D" "\2018" "\2019";font-weight:bold}article .content blockquote p{margin:0}article .content blockquote:before{margin-right:.25em;color:#ccffb6;content:"\201C";vertical-align:-.4em;font-size:2em;line-height:.1em}article .content blockquote footer{margin:line-height 0;color:#666;font-size:11px}article .content blockquote footer a{background-image:linear-gradient(transparent, transparent 5px, #666 5px, #666);color:#666}article .content blockquote footer a:hover{background-image:linear-gradient(transparent, transparent 4px, #999 4px, #999);color:#999}article .content blockquote footer cite:before{padding:0 .5em;content:"—"}article .content .pullquote{margin:0;width:45%;text-align:left}article .content .pullquote.left{margin-right:1em;margin-left:.5em}article .content .pullquote.right{margin-right:.5em;margin-left:1em}article .content .caption{position:relative;display:block;margin-top:.5em;color:#666;text-align:center;font-size:.9em}.posttitle{text-transform:none;font-size:1.5em;line-height:1.25}.article-tag .tag-link:before{content:"#";background-image:linear-gradient(transparent, transparent 10px, #d480aa 10px, #d480aa);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x}.article-category .category-link{background-image:linear-gradient(transparent, transparent 10px, #d480aa 10px, #d480aa);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x}@media (min-width: 480px){.article-tag,.article-category{display:inline}.article-tag:before,.article-category:before{content:"|"}}#archive .post-list{padding:0}#archive .post-list .post-item{margin-bottom:1rem;margin-left:0;list-style-type:none}#archive .post-list .post-item .meta{display:block;margin-right:16px;min-width:100px;color:#666;font-size:14px}@media (min-width: 480px){#archive .post-list .post-item{display:flex;margin-bottom:5px;margin-left:1rem}#archive .post-list .post-item .meta{text-align:left}}.blog-post-comments{margin-top:4rem}#footer{position:absolute;bottom:0;margin-bottom:10px;width:100%;color:#666;vertical-align:top;text-align:center;font-size:11px}#footer ul{margin:0;padding:0;list-style:none}#footer li{display:inline-block;margin-right:15px;border-right:1px solid;border-color:#666;vertical-align:middle}#footer li a{margin-right:15px}#footer li:last-child{margin-right:0;border-right:0}#footer li:last-child a{margin-right:0}#footer a{color:#666;text-decoration:underline;background-image:none}#footer a:hover{color:#999}#footer .footer-left{height:20px;vertical-align:middle;line-height:20px}@media (min-width: 39rem){#footer{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center;align-content:center;margin-bottom:20px}#footer .footer-left{align-self:flex-start;margin-right:20px}#footer .footer-right{align-self:flex-end}}.pagination{display:inline-block;margin-top:2rem;width:100%;text-align:center}.pagination .page-number{color:#c9cacc;font-size:.8rem}.pagination a{padding:4px 6px;border-radius:5px;background-image:none;color:#c9cacc;text-decoration:none}.pagination a:hover{background-image:none}.pagination a:hover:not(.active){color:#eee}.search-input{padding:4px 7px;width:100%;outline:none;border:solid 1px #ccc;border-radius:5px;background-color:#1d1f21;color:#c9cacc;font-size:1.2rem;-webkit-border-radius:5px;-moz-border-radius:5px}.search-input:focus{border:solid 1px #2bbc8a}#search-result ul.search-result-list{padding:0;list-style-type:none}#search-result li{margin:2em auto}#search-result a.search-result-title{background-image:none;color:#c9cacc;text-transform:capitalize;font-weight:bold;line-height:1.2}#search-result p.search-result{overflow:hidden;margin:.4em auto;max-height:13em;text-align:justify;font-size:.8em}#search-result em.search-keyword{border-bottom:1px dashed #d480aa;color:#d480aa;font-weight:bold}.search-no-result{display:none;padding-bottom:.5em;color:#c9cacc}#tag-cloud .tag-cloud-title{color:#666}#tag-cloud .tag-cloud-tags{clear:both;text-align:center}#tag-cloud .tag-cloud-tags a{display:inline-block;margin:10px}.tooltipped{position:relative}.tooltipped::after{position:absolute;z-index:1000000;display:none;padding:.2em .5em;-webkit-font-smoothing:subpixel-antialiased;color:#1d1f21;font-display:swap;font-weight:400;font-size:11.2px;font-family:"JetBrains Mono",monospace;line-height:1.725;text-rendering:geometricPrecision;text-align:center;word-wrap:break-word;white-space:pre;content:attr(aria-label);background:#c9cacc;border-radius:3px;opacity:0}.tooltipped::before{position:absolute;z-index:1000001;display:none;width:0;height:0;color:#c9cacc;pointer-events:none;content:'';border:6px solid transparent;opacity:0}@keyframes tooltip-appear{from{opacity:0}to{opacity:1}}.tooltipped:hover::before,.tooltipped:hover::after,.tooltipped:active::before,.tooltipped:active::after,.tooltipped:focus::before,.tooltipped:focus::after{display:inline-block;text-decoration:none;animation-name:tooltip-appear;animation-duration:0.1s;animation-fill-mode:forwards;animation-timing-function:ease-in}.tooltipped-s::after,.tooltipped-sw::after{top:100%;right:50%;margin-top:6px}.tooltipped-s::before,.tooltipped-sw::before{top:auto;right:50%;bottom:-7px;margin-right:-6px;border-bottom-color:#c9cacc}.tooltipped-sw::after{margin-right:-16px}.tooltipped-s::after{transform:translateX(50%)}#categories .category-list-title{color:#666}#categories .category-list .category-list-item .category-list-count{color:#666}#categories .category-list .category-list-item .category-list-count:before{content:" ("}#categories .category-list .category-list-item .category-list-count:after{content:")"}pre{overflow-x:auto;padding:10px 15px;padding-bottom:0;border:1px dotted #666;border-radius:4px;font-size:13px;font-family:"JetBrains Mono",monospace;line-height:22px;-webkit-border-radius:4px}pre code{display:block;padding:0;border:none}code{padding:0 5px;border:1px dotted #666;border-radius:2px;-webkit-border-radius:2px}.highlight{overflow-x:auto;margin:1rem 0;padding:10px 15px;border-radius:4px;background:#222426;font-family:"JetBrains Mono",monospace;-webkit-border-radius:4px}.highlight figcaption{margin:-5px 0 5px;color:#666;font-size:.9em;zoom:1}.highlight figcaption a{float:right;color:#666;font-style:italic;font-size:.8em;background-image:linear-gradient(transparent, transparent 10px, #d480aa 10px, #d480aa);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x}.highlight figcaption a:hover{color:#999}.highlight figcaption:before{content:"";display:table}.highlight figcaption:after{clear:both}.highlight:hover .btn-copy{opacity:1}.highlight .btn-copy{font-size:1.2rem;position:absolute;right:20px;opacity:0;transition:opacity 0.2s ease-in}.highlight .btn-copy:hover{color:#2bbc8a}.highlight pre{margin:0;padding:0;border:none;background:none}.highlight table{width:auto}.highlight td.gutter{text-align:right;opacity:.2}.highlight .line{height:22px}
+
+/*# sourceMappingURL=styles.css.map */
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/sass/sass/style.sass_59447018c644f9722e171f6b04eb2a50.json b/exampleSite/resources/_gen/assets/sass/sass/style.sass_59447018c644f9722e171f6b04eb2a50.json
new file mode 100644
index 0000000..f068a6e
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/sass/sass/style.sass_59447018c644f9722e171f6b04eb2a50.json
@@ -0,0 +1 @@
+{"Target":"css/styles.786c6791b1b13068aa063a890816799a862e428ac8008eb7192cd5019cf9be4ffb5a9c0328dc34769f7e01eeb5e189e660bac7405bc6ac4adc03ff47832931e8.css","MediaType":"text/css","Data":{"Integrity":"sha512-eGxnkbGxMGiqBjqJCBZ5moYuQorIAI63GSzVAZz5vk/7WpwDKNw0dp9+Ae614YnmYLrHQFvGrErcA/9Hgykx6A=="}}
\ No newline at end of file