Migration to Milligram CSS framework

43 files changed, 435 insertions, 873 deletions

diff --git a/.gitignore b/.gitignore
index 6618a0d..4c66aea 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 assets/node_modules
 exampleSite/public
 exampleSite/resources
+exampleSite/themes
diff --git a/assets/package.json b/assets/package.json
index b1d1725..457cbb3 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "baguettebox.js": "^1.11.0",
     "headroom.js": "^0.9.4",
+    "milligram": "^1.3.0",
     "normalize.css": "^8.0.0",
     "vanilla-lazyload": "^10.18.0"
   }
diff --git a/assets/src/scripts/main.js b/assets/src/scripts/main.js
index b6a2622..f27140a 100644
--- a/assets/src/scripts/main.js
+++ b/assets/src/scripts/main.js
@@ -1,31 +1,22 @@
 document.addEventListener('DOMContentLoaded', function(event) {
   // LazdyLoad
-  const myLazyLoad = new LazyLoad();
+  const myLazyLoad = new LazyLoad()
 
   // Lightbox
   baguetteBox.run('main', {})
 
   // Hide header
-  const navbar = document.querySelector('nav');
-  const headroom = new Headroom(navbar, {
-    'offset': 205,
-    'tolerance': 5,
-    'classes': {
-      'initial': 'animated',
-      'pinned': 'slideDown',
-      'unpinned': 'slideUp'
-    }
-  })
-  headroom.init()
-
-  // Article progress bar
-  const progressBar = document.getElementsByClassName('progress-bar')
-  if (progressBar.length) {
-    window.onscroll = function () {
-      const winScroll = document.body.scrollTop || document.documentElement.scrollTop
-      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight
-      const scrolled = (winScroll / height) * 100
-      document.getElementsByClassName('progress-bar')[0].style.width = scrolled + '%'
-    }
+  const navbar = document.querySelector('nav')
+  if (navbar) {
+    const headroom = new Headroom(navbar, {
+      'offset': 205,
+      'tolerance': 5,
+      'classes': {
+        'initial': 'animated',
+        'pinned': 'slideDown',
+        'unpinned': 'slideUp'
+      }
+    })
+    headroom.init()
   }
 })
diff --git a/assets/src/styles/_chroma_friendly.scss b/assets/src/styles/_chroma_friendly.scss
new file mode 100644
index 0000000..91b9449
--- /dev/null
+++ b/assets/src/styles/_chroma_friendly.scss
@@ -0,0 +1,68 @@
+/* Background */ .chroma { background-color: #f0f0f0 }
+/* Error */ .chroma .err {  }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
+/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
+/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
+/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
+/* Keyword */ .chroma .k { color: #007020; font-weight: bold }
+/* KeywordConstant */ .chroma .kc { color: #007020; font-weight: bold }
+/* KeywordDeclaration */ .chroma .kd { color: #007020; font-weight: bold }
+/* KeywordNamespace */ .chroma .kn { color: #007020; font-weight: bold }
+/* KeywordPseudo */ .chroma .kp { color: #007020 }
+/* KeywordReserved */ .chroma .kr { color: #007020; font-weight: bold }
+/* KeywordType */ .chroma .kt { color: #902000 }
+/* NameAttribute */ .chroma .na { color: #4070a0 }
+/* NameBuiltin */ .chroma .nb { color: #007020 }
+/* NameClass */ .chroma .nc { color: #0e84b5; font-weight: bold }
+/* NameConstant */ .chroma .no { color: #60add5 }
+/* NameDecorator */ .chroma .nd { color: #555555; font-weight: bold }
+/* NameEntity */ .chroma .ni { color: #d55537; font-weight: bold }
+/* NameException */ .chroma .ne { color: #007020 }
+/* NameFunction */ .chroma .nf { color: #06287e }
+/* NameLabel */ .chroma .nl { color: #002070; font-weight: bold }
+/* NameNamespace */ .chroma .nn { color: #0e84b5; font-weight: bold }
+/* NameTag */ .chroma .nt { color: #062873; font-weight: bold }
+/* NameVariable */ .chroma .nv { color: #bb60d5 }
+/* LiteralString */ .chroma .s { color: #4070a0 }
+/* LiteralStringAffix */ .chroma .sa { color: #4070a0 }
+/* LiteralStringBacktick */ .chroma .sb { color: #4070a0 }
+/* LiteralStringChar */ .chroma .sc { color: #4070a0 }
+/* LiteralStringDelimiter */ .chroma .dl { color: #4070a0 }
+/* LiteralStringDoc */ .chroma .sd { color: #4070a0; font-style: italic }
+/* LiteralStringDouble */ .chroma .s2 { color: #4070a0 }
+/* LiteralStringEscape */ .chroma .se { color: #4070a0; font-weight: bold }
+/* LiteralStringHeredoc */ .chroma .sh { color: #4070a0 }
+/* LiteralStringInterpol */ .chroma .si { color: #70a0d0; font-style: italic }
+/* LiteralStringOther */ .chroma .sx { color: #c65d09 }
+/* LiteralStringRegex */ .chroma .sr { color: #235388 }
+/* LiteralStringSingle */ .chroma .s1 { color: #4070a0 }
+/* LiteralStringSymbol */ .chroma .ss { color: #517918 }
+/* LiteralNumber */ .chroma .m { color: #40a070 }
+/* LiteralNumberBin */ .chroma .mb { color: #40a070 }
+/* LiteralNumberFloat */ .chroma .mf { color: #40a070 }
+/* LiteralNumberHex */ .chroma .mh { color: #40a070 }
+/* LiteralNumberInteger */ .chroma .mi { color: #40a070 }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #40a070 }
+/* LiteralNumberOct */ .chroma .mo { color: #40a070 }
+/* Operator */ .chroma .o { color: #666666 }
+/* OperatorWord */ .chroma .ow { color: #007020; font-weight: bold }
+/* Comment */ .chroma .c { color: #60a0b0; font-style: italic }
+/* CommentHashbang */ .chroma .ch { color: #60a0b0; font-style: italic }
+/* CommentMultiline */ .chroma .cm { color: #60a0b0; font-style: italic }
+/* CommentSingle */ .chroma .c1 { color: #60a0b0; font-style: italic }
+/* CommentSpecial */ .chroma .cs { color: #60a0b0; background-color: #fff0f0 }
+/* CommentPreproc */ .chroma .cp { color: #007020 }
+/* CommentPreprocFile */ .chroma .cpf { color: #007020 }
+/* GenericDeleted */ .chroma .gd { color: #a00000 }
+/* GenericEmph */ .chroma .ge { font-style: italic }
+/* GenericError */ .chroma .gr { color: #ff0000 }
+/* GenericHeading */ .chroma .gh { color: #000080; font-weight: bold }
+/* GenericInserted */ .chroma .gi { color: #00a000 }
+/* GenericOutput */ .chroma .go { color: #888888 }
+/* GenericPrompt */ .chroma .gp { color: #c65d09; font-weight: bold }
+/* GenericStrong */ .chroma .gs { font-weight: bold }
+/* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold }
+/* GenericTraceback */ .chroma .gt { color: #0044dd }
+/* GenericUnderline */ .chroma .gl { text-decoration: underline }
+/* TextWhitespace */ .chroma .w { color: #bbbbbb }
diff --git a/assets/src/styles/_chroma_native.scss b/assets/src/styles/_chroma_native.scss
deleted file mode 100644
index 2733e99..0000000
--- a/assets/src/styles/_chroma_native.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-/* Background */ .chroma { color: #d0d0d0; background-color: #202020 }
-/* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }
-/* LineTableTD */ .chroma .lntd { ; vertical-align: top; padding: 0; margin: 0; border: 0; }
-/* LineTable */ .chroma .lntable { ; border-spacing: 0; padding: 0; margin: 0; border: 0; width: 100%; overflow: auto; display: block; }
-/* LineHighlight */ .chroma .hl { background-color: #ffffcc; display: block; width: 100% }
-/* LineNumbersTable */ .chroma .lnt { ; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; display: block; }
-/* LineNumbers */ .chroma .ln { ; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
-/* Keyword */ .chroma .k { color: #6ab825; font-weight: bold }
-/* KeywordConstant */ .chroma .kc { color: #6ab825; font-weight: bold }
-/* KeywordDeclaration */ .chroma .kd { color: #6ab825; font-weight: bold }
-/* KeywordNamespace */ .chroma .kn { color: #6ab825; font-weight: bold }
-/* KeywordPseudo */ .chroma .kp { color: #6ab825 }
-/* KeywordReserved */ .chroma .kr { color: #6ab825; font-weight: bold }
-/* KeywordType */ .chroma .kt { color: #6ab825; font-weight: bold }
-/* NameAttribute */ .chroma .na { color: #bbbbbb }
-/* NameBuiltin */ .chroma .nb { color: #24909d }
-/* NameClass */ .chroma .nc { color: #447fcf }
-/* NameConstant */ .chroma .no { color: #40ffff }
-/* NameDecorator */ .chroma .nd { color: #ffa500 }
-/* NameException */ .chroma .ne { color: #bbbbbb }
-/* NameFunction */ .chroma .nf { color: #447fcf }
-/* NameNamespace */ .chroma .nn { color: #447fcf }
-/* NameTag */ .chroma .nt { color: #6ab825; font-weight: bold }
-/* NameVariable */ .chroma .nv { color: #40ffff }
-/* LiteralString */ .chroma .s { color: #ed9d13 }
-/* LiteralStringAffix */ .chroma .sa { color: #ed9d13 }
-/* LiteralStringBacktick */ .chroma .sb { color: #ed9d13 }
-/* LiteralStringChar */ .chroma .sc { color: #ed9d13 }
-/* LiteralStringDelimiter */ .chroma .dl { color: #ed9d13 }
-/* LiteralStringDoc */ .chroma .sd { color: #ed9d13 }
-/* LiteralStringDouble */ .chroma .s2 { color: #ed9d13 }
-/* LiteralStringEscape */ .chroma .se { color: #ed9d13 }
-/* LiteralStringHeredoc */ .chroma .sh { color: #ed9d13 }
-/* LiteralStringInterpol */ .chroma .si { color: #ed9d13 }
-/* LiteralStringOther */ .chroma .sx { color: #ffa500 }
-/* LiteralStringRegex */ .chroma .sr { color: #ed9d13 }
-/* LiteralStringSingle */ .chroma .s1 { color: #ed9d13 }
-/* LiteralStringSymbol */ .chroma .ss { color: #ed9d13 }
-/* LiteralNumber */ .chroma .m { color: #3677a9 }
-/* LiteralNumberBin */ .chroma .mb { color: #3677a9 }
-/* LiteralNumberFloat */ .chroma .mf { color: #3677a9 }
-/* LiteralNumberHex */ .chroma .mh { color: #3677a9 }
-/* LiteralNumberInteger */ .chroma .mi { color: #3677a9 }
-/* LiteralNumberIntegerLong */ .chroma .il { color: #3677a9 }
-/* LiteralNumberOct */ .chroma .mo { color: #3677a9 }
-/* OperatorWord */ .chroma .ow { color: #6ab825; font-weight: bold }
-/* Comment */ .chroma .c { color: #999999; font-style: italic }
-/* CommentHashbang */ .chroma .ch { color: #999999; font-style: italic }
-/* CommentMultiline */ .chroma .cm { color: #999999; font-style: italic }
-/* CommentSingle */ .chroma .c1 { color: #999999; font-style: italic }
-/* CommentSpecial */ .chroma .cs { color: #e50808; background-color: #520000; font-weight: bold }
-/* CommentPreproc */ .chroma .cp { color: #cd2828; font-weight: bold }
-/* CommentPreprocFile */ .chroma .cpf { color: #cd2828; font-weight: bold }
-/* GenericDeleted */ .chroma .gd { color: #d22323 }
-/* GenericEmph */ .chroma .ge { font-style: italic }
-/* GenericError */ .chroma .gr { color: #d22323 }
-/* GenericHeading */ .chroma .gh { color: #ffffff; font-weight: bold }
-/* GenericInserted */ .chroma .gi { color: #589819 }
-/* GenericOutput */ .chroma .go { color: #cccccc }
-/* GenericPrompt */ .chroma .gp { color: #aaaaaa }
-/* GenericStrong */ .chroma .gs { font-weight: bold }
-/* GenericSubheading */ .chroma .gu { color: #ffffff }
-/* GenericTraceback */ .chroma .gt { color: #d22323 }
-/* TextWhitespace */ .chroma .w { color: #666666 }
diff --git a/assets/src/styles/_components/adsense.scss b/assets/src/styles/_components/adsense.scss
deleted file mode 100644
index 46f33c6..0000000
--- a/assets/src/styles/_components/adsense.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-ins.adsbygoogle {
-  @include element-margin($itemMargin * 2, false, true);
-}
diff --git a/assets/src/styles/_components/base.scss b/assets/src/styles/_components/base.scss
index 00a0ec8..d213dfc 100644
--- a/assets/src/styles/_components/base.scss
+++ b/assets/src/styles/_components/base.scss
@@ -1,9 +1,6 @@
 html, body {
   background-color: $base-background-color;
-  color: $base-font-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: $base-font-size;
-  line-height: $base-line-height;
+  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   height: 100%;
   margin: 0;
   text-rendering: optimizeLegibility;
@@ -12,13 +9,13 @@ html, body {
 body {
   display: grid;
   grid-gap: 1rem;
-  height: 100%;
-  grid-template-columns: 1fr;
   grid-template-areas: "nav" "main" "footer";
+  grid-template-columns: 1fr;
+  height: 100%;
 
-  grid-template-rows: 5rem 1fr 3rem;
+  grid-template-rows: $navbar-height 1fr 3rem;
   @media screen and (max-width: $breakpoint) {
-    grid-template-rows: 5rem 1fr 6rem;
+    grid-template-rows: $navbar-height 1fr 5rem;
   }
 
   a {
@@ -30,13 +27,6 @@ body {
     }
   }
 
-  hr {
-    border: 0;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-    height: 0;
-  }
-
   nav {
     grid-area: nav;
   }
@@ -45,8 +35,17 @@ body {
     grid-area: main;
     justify-self: center;
     grid-column: 1 / -1;
-    max-width: 900px;
-    width: 90%;
+    max-width: 80rem !important;
+    padding-bottom: 3rem !important;
+    padding-top: 3rem !important;
+
+    &.home {
+      align-items: center;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      text-align: center;
+    }
   }
 
   footer {
diff --git a/assets/src/styles/_components/content.scss b/assets/src/styles/_components/content.scss
index 4c7d195..181908a 100644
--- a/assets/src/styles/_components/content.scss
+++ b/assets/src/styles/_components/content.scss
@@ -2,38 +2,16 @@ body {
   main {
     article {
       header {
-        @include bottom-margin($itemMargin * 2);
-
+        margin-bottom: 5rem;
         text-align: center;
 
-        h1 {
-          font-size: 2.5rem;
-          margin-top: 0;
-        }
-
         time {
           color: $color-silver;
-          font-size: 0.8rem;
         }
       }
 
       section {
-        // text-align: justify;
-
-        blockquote {
-          @include element-margin($itemMargin * 2, false, true);
-
-          border-left: 0.1rem $color-black solid;
-          font-style: italic;
-          width: 60%;
-          padding: 1rem;
-        }
-
         figure {
-          @include element-margin($itemMargin * 2, false, true);
-
-          padding: 0;
-
           &.full {
             left: 50%;
             margin-left: -50vw;
@@ -61,58 +39,43 @@ body {
           }
 
           figcaption {
-            font-size: 0.8rem;
-            font-style: italic;
             text-align: center;
           }
         }
 
-        h1 {
-          @include bottom-margin($itemMargin * 1.3);
-
-          font-size: 2.5rem;
-        }
-
-        h2 {
-          @include bottom-margin($itemMargin * 1.2);
-
-          font-size: 2rem;
-        }
-
-        h3 {
-          @include bottom-margin($itemMargin * 1.1);
-
-          font-size: 1.5rem;
-        }
-
-        h4 {
-          @include bottom-margin($itemMargin);
-
-          font-size: 1rem;
-        }
-
-        h5 {
-          @include bottom-margin($itemMargin * 0.9);
-
-          font-size: 0.8rem;
+        table {
+          tbody {
+            tr {
+              td {
+                &[align="left"] {
+                  text-align: left;
+                }
+                &[align="right"] {
+                  text-align: right;
+                }
+                &[align="center"] {
+                  text-align: center;
+                }
+              }
+            }
+          }
         }
 
-        h6 {
-          @include bottom-margin($itemMargin * 0.8);
-
-          font-size: 0.6rem;
+        div.highlight {
+          pre {
+            border-left: 0.3rem solid $links-color;
+          }
         }
 
         iframe.instagram-media {
-          @include element-margin($itemMargin * 2, true, true);
+          margin-left: auto !important;
+          margin-right: auto !important;
         }
 
         img {
-          @include element-margin($itemMargin * 2, false, true);
-
           display: block;
           height: auto;
-          margin: 0 auto;
+          margin: $itemMargin auto;
           max-width: 100%;
           padding: 0;
 
@@ -126,74 +89,14 @@ body {
             }
         }
 
-        ol {
-          @include bottom-margin($itemMargin);
-
-          padding: 0 0 0 20px;
-        }
-
         p {
-          @include bottom-margin($itemMargin);
-
           code {
             background-color: $color-zhen-zhu-bai-pearl;
             color: $color-bara-red;
-            padding: 0.2rem 0.3rem;
-          }
-        }
-
-        pre {
-          @include element-margin($itemMargin * 2, false, false);
-
-          background-color: $color-lead;
-          color: $color-ancestral-water;
-          display: grid;
-          overflow: auto;
-          padding: 0.5rem;
-
-          code {
-            color: $color-ancestral-water;
-            background-color: $color-lead;
-            font-size: $base-font-size * 0.8;
-            min-width: 0;
-          }
-        }
-
-        table:not(.highlight) {  // disable for table inside Github gist
-          @include element-margin($itemMargin * 2, false, false);
-
-          border-collapse: collapse;
-          border-style: hidden;
-          width: 100%;
-
-          thead {
-            tr {
-              th {
-                border: 1px solid $color-silver;
-                font-weight: bold;
-                padding: 0.5rem;
-                text-align: left;
-                vertical-align: middle;
-              }
-            }
-          }
-
-          tbody {
-            tr {
-              td {
-                border: 1px solid $color-silver;
-                padding: 0.5rem;
-                vertical-align: middle;
-              }
-            }
           }
         }
 
         ul {
-          @include bottom-margin($itemMargin);
-
-          padding: 0 0 0 20px;
-
           &.task-list {
             list-style: none;
             padding: 0;
@@ -201,15 +104,11 @@ body {
         }
 
         video {
-          @include element-margin($itemMargin * 2, false, true);
-
           display: block;
           width: 100%
         }
 
         .embed-container {
-          @include element-margin($itemMargin * 2, false, true);
-
           height: 0;
           max-width: 100%;
           overflow: hidden;
@@ -225,47 +124,25 @@ body {
           }
         }
 
-        .gist {
-          @include element-margin($itemMargin * 2, false, true);
-        }
-
         .speakerdeck {
-           @include element-margin($itemMargin * 2, false, true);
+          margin-left: auto !important;
+          margin-right: auto !important;
         }
 
         .twitter-tweet {
-          @include element-margin($itemMargin * 2, true, true);
-
           @media (max-width: 550px) {
             width: 0 !important;
           }
+
+          margin-left: auto !important;
+          margin-right: auto !important;
         }
       }
 
       footer {
-        @include element-margin($itemMargin * 2, false, false);
-
         text-align: center;
 
         .meta {
-          align-items: center;
-          display: flex;
-          justify-content: space-between;
-          padding: 0.1rem 1rem;
-
-          @media screen and (max-width: $breakpoint) {
-            flex-direction: column;
-          }
-
-          .categories {
-            a {
-              background-color: $color-brilliant-azure;
-              border-radius: 0.2rem;
-              color: $color-zhen-zhu-bai-pearl;
-              padding: 0.2rem 0.5rem;
-            }
-          }
-
           .tags {
             a {
               span {
@@ -276,9 +153,10 @@ body {
         }
 
         #disqus_thread {
-          @include element-margin($itemMargin * 2, false, true);
+          margin-left: auto !important;
+          margin-right: auto !important;
         }
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/assets/src/styles/_components/elements.scss b/assets/src/styles/_components/elements.scss
index cf6249b..005ad8f 100644
--- a/assets/src/styles/_components/elements.scss
+++ b/assets/src/styles/_components/elements.scss
@@ -1,20 +1,26 @@
-ol.decimal-list {
+ul.posts-list {
   list-style: none;
-  counter-reset: li;
 
   li {
-    counter-increment: li;
+    .date {
+      color: $color-silver;
+      font-size: 0.8em;
+      display: block;
+    }
 
-    &::before {
-      content: counter(li, decimal);
+    .lang {
       color: $color-silver;
-      direction: rtl;
-      display: inline-block;
-      font-size: 0.8rem;
-      margin-left: -1.5rem;
-      margin-right: 0.5rem;
-      text-align: right;
-      width: 1rem;
+      font-size: 0.7em;
+      text-transform: uppercase;
+
+      a {
+        color: $color-silver;
+        text-decoration: none;
+
+        &:hover, &:active, &:visited {
+          text-decoration: underline;
+        }
+      }
     }
   }
 }
diff --git a/assets/src/styles/_components/footer.scss b/assets/src/styles/_components/footer.scss
index bfcd67e..a8aa6c9 100644
--- a/assets/src/styles/_components/footer.scss
+++ b/assets/src/styles/_components/footer.scss
@@ -1,14 +1,22 @@
 body {
   > footer {
-    align-items: center;
-    background-color: $navbar-background-color;
+    align-items: right;
     color: $navbar-text-color;
     display: flex;
-    font-size: $base-font-size * 0.8;
+    font-size: 0.8em;
     justify-content: space-between;
-    padding: 0.1rem 1rem;
+    padding: 0.5rem;
     text-align: center;
 
+    p {
+      margin-bottom: 0;
+    }
+
+    // height: 3rem;
+    // @media screen and (max-width: $breakpoint) {
+    //   height: 5rem;
+    // }
+
     @media screen and (max-width: $breakpoint) {
       flex-direction: column;
 
diff --git a/assets/src/styles/_components/homepage.scss b/assets/src/styles/_components/homepage.scss
index 45e2d12..2f7d9dd 100644
--- a/assets/src/styles/_components/homepage.scss
+++ b/assets/src/styles/_components/homepage.scss
@@ -1,61 +1,8 @@
 body {
   main {
     .homepage-avatar {
-      @include element-margin($itemMargin, false, false);
-
       border-radius: 50%;
-    }
-
-    .social-icons {
-      a {
-        background-color: $color-silver;
-        display: inline-block;
-        height: 20px;
-        margin: 0.1rem;
-        padding: 5px;
-        width: 20px;
-
-        svg {
-          fill: #fff;
-        }
-
-        &.email {
-          background-color: #D14836;
-        }
-        &.telegram {
-          background-color: #2CA5E0;
-        }
-        &.twitter {
-          background-color: #1DA1F2;
-        }
-        &.github {
-          background-color: #181717;
-        }
-        &.stackoverflow {
-          background-color: #FE7A16;
-        }
-        &.spotify {
-          background-color: #1ED760;
-        }
-        &.google-plus {
-          background-color: #DC4E41;
-        }
-        &.linkedin {
-          background-color: #0077B5;
-        }
-        &.messenger {
-          background-color: #0084FF;
-        }
-        &.facebook {
-          background-color: #3B5998;
-        }
-        &.rss {
-          background-color: #FFA500;
-        }
-        &.gitlab {
-          background-color: #E24329;
-        }
-      }
+      margin-bottom: 2rem;
     }
   }
 }
diff --git a/assets/src/styles/_components/navbar.scss b/assets/src/styles/_components/navbar.scss
index 937ae85..eca794f 100644
--- a/assets/src/styles/_components/navbar.scss
+++ b/assets/src/styles/_components/navbar.scss
@@ -1,7 +1,7 @@
 body {
   nav {
     align-items: center;
-    background-color: $navbar-background-color;
+    background-color: #f4f5f6;
     color: $navbar-text-color;
     display: flex;
     height: $navbar-height;
@@ -12,6 +12,7 @@ body {
     right: 0;
     top: 0;
     z-index: 10;
+    border-bottom: .1rem solid #d1d1d1;
 
     a {
       color: $navbar-text-color;
@@ -22,17 +23,6 @@ body {
       }
     }
 
-    a.homePageIcon {
-      height: 1.5rem;
-      width: 1.5rem;
-
-      svg {
-        fill: $navbar-icon-color;
-        height: 1.5rem;
-        width: 1.5rem;
-      }
-    }
-
     &.animated {
       animation-duration: 0.5s;
       animation-fill-mode: both;
diff --git a/assets/src/styles/_components/posts_list.scss b/assets/src/styles/_components/posts_list.scss
deleted file mode 100644
index 31edee9..0000000
--- a/assets/src/styles/_components/posts_list.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-body {
-  main {
-    .svg-icon {
-      align-self: center;
-      display: inline-flex;
-
-      svg {
-        fill: $color-silver;
-        height: 1rem;
-        width: 1rem;
-      }
-
-      &.baseline {
-        position: relative;
-        top: -0.1rem;
-      }
-    }
-  }
-}
diff --git a/assets/src/styles/_components/progress_bar.scss b/assets/src/styles/_components/progress_bar.scss
deleted file mode 100644
index 6be75d3..0000000
--- a/assets/src/styles/_components/progress_bar.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.progress-container {
-  background: transparent;
-  height: 0.1rem;
-  left: 0;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 1000;
-
-  .progress-bar {
-    background: $links-color;
-    height: 0.1rem;
-    width: 0;
-  }
-}
diff --git a/assets/src/styles/_components/taxonomies.scss b/assets/src/styles/_components/taxonomies.scss
deleted file mode 100644
index bd607bb..0000000
--- a/assets/src/styles/_components/taxonomies.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-ul.taxonomies {
-  li {
-    color: $color-silver;
-  }
-}
diff --git a/assets/src/styles/_mixins.scss b/assets/src/styles/_mixins.scss
deleted file mode 100644
index ffa1821..0000000
--- a/assets/src/styles/_mixins.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-@mixin element-margin($rem, $important: false, $auto: true) {
-  @media (min-width: 0) {
-    @if $important == true {
-      margin-bottom: $rem * 0.5 !important;
-      margin-top: $rem * 0.5 !important;
-    }
-    @else {
-      margin-bottom: $rem * 0.5;
-      margin-top: $rem * 0.5;
-    }
-  }
-
-  @media (min-width: 576px) {
-    @if $important == true {
-      margin-bottom: $rem * 0.6 !important;
-      margin-top: $rem * 0.6 !important;
-    }
-    @else {
-      margin-bottom: $rem * 0.6;
-      margin-top: $rem * 0.6;
-    }
-  }
-
-  // Medium devices (tablets, 768px and up)
-  @media (min-width: 768px) {
-    @if $important == true {
-      margin-bottom: $rem * 0.7 !important;
-      margin-top: $rem * 0.7 !important;
-    }
-    @else {
-      margin-bottom: $rem * 0.7;
-      margin-top: $rem * 0.7;
-    }
-  }
-
-  // Large devices (desktops, 992px and up)
-  @media (min-width: 992px) {
-    @if $important == true {
-      margin-bottom: $rem * 0.8 !important;
-      margin-top: $rem * 0.8 !important;
-    }
-    @else {
-      margin-bottom: $rem * 0.8;
-      margin-top: $rem * 0.8;
-    }
-  }
-
-  // Extra large devices (large desktops, 1200px and up)
-  @media (min-width: 1200px) {
-    @if $important == true {
-      margin-bottom: $rem * 0.9 !important;
-      margin-top: $rem * 0.9 !important;
-    }
-    @else {
-      margin-bottom: $rem * 0.9;
-      margin-top: $rem * 0.9;
-    }
-  }
-
-  @media (min-width: 1920px) {
-    @if $important == true {
-      margin-bottom: $rem !important;
-      margin-top: $rem !important;
-    }
-    @else {
-      margin-bottom: $rem;
-      margin-top: $rem;
-    }
-  }
-
-  @if $auto == true {
-    @if $important == true {
-      margin-left: auto !important;
-      margin-right: auto !important;
-    }
-    @else {
-      margin-left: auto;
-      margin-right: auto;
-    }
-  }
-}
-
-@mixin bottom-margin($rem) {
-  @media (min-width: 0) {
-    margin-bottom: $rem * 0.5;
-  }
-
-  @media (min-width: 576px) {
-    margin-bottom: $rem * 0.6;
-  }
-
-  // Medium devices (tablets, 768px and up)
-  @media (min-width: 768px) {
-    margin-bottom: $rem * 0.7;
-  }
-
-  // Large devices (desktops, 992px and up)
-  @media (min-width: 992px) {
-    margin-bottom: $rem * 0.8;
-  }
-
-  // Extra large devices (large desktops, 1200px and up)
-  @media (min-width: 1200px) {
-    margin-bottom: $rem * 0.9;
-  }
-
-  @media (min-width: 1920px) {
-    margin-bottom: $rem;
-  }
-}
diff --git a/assets/src/styles/_settings.scss b/assets/src/styles/_settings.scss
index 6ab02a4..583bd8e 100644
--- a/assets/src/styles/_settings.scss
+++ b/assets/src/styles/_settings.scss
@@ -1,48 +1,17 @@
-$base-font-size: 18px;
-$base-line-height: 1.5;
 $breakpoint: 800px;
-$itemMargin: 1.5rem;
+$itemMargin: 2.5rem;
 
-$color-ancestral-water: #d0d0d0;
 $color-brilliant-azure: #39f;
 $color-bara-red: #f0506e;
 $color-black: #000;
-$color-lead: #202020;
-$color-machinegun-metal: #454545;
 $color-pale-grey: #fefefe;
 $color-silver: #c0c0c0;
 $color-zhen-zhu-bai-pearl: #f8f8f8;
 
 $base-background-color: $color-pale-grey;
-$base-font-color: $color-machinegun-metal;
 
 $navbar-background-color: $color-zhen-zhu-bai-pearl;
-$navbar-height: 3rem;
-$navbar-icon-color: $color-black;
+$navbar-height: 5rem;
 $navbar-text-color: $color-black;
 
 $links-color: $color-brilliant-azure;
-
-// $breakpoints: (
-//   small: 600px,
-//   large: 1200px
-// );
-
-// $typi: (
-//   base: (
-//     null: (16px, 1.4),
-//     small: (18px),
-//     large: (20px)
-//   ),
-//   h1: (
-//     null: (24px, 1.3),
-//     small: (2.369em, 1.2),
-//   )
-//   // Other font maps here
-// );
-
-// @include typi-init;
-
-// h1 {
-//   @include typi('h1');
-// }
\ No newline at end of file
diff --git a/assets/src/styles/styles.scss b/assets/src/styles/styles.scss
index 02de3c2..f1c0b3f 100644
--- a/assets/src/styles/styles.scss
+++ b/assets/src/styles/styles.scss
@@ -1,19 +1,9 @@
-// @import "typi/scss/typi";
 @import "baguetteBox.js/src/baguetteBox";
-
+@import "chroma_friendly";
 @import "settings";
-
-@import "chroma_native";
-
-@import "_mixins";
-
-@import "_components/adsense";
 @import "_components/base";
 @import "_components/content";
 @import "_components/elements";
 @import "_components/footer";
 @import "_components/homepage";
 @import "_components/navbar";
-@import "_components/posts_list";
-@import "_components/progress_bar";
-@import "_components/taxonomies";
diff --git a/assets/yarn.lock b/assets/yarn.lock
index a4e1390..02c6213 100644
--- a/assets/yarn.lock
+++ b/assets/yarn.lock
@@ -12,15 +12,22 @@ headroom.js@^0.9.4:
   resolved "https://registry.yarnpkg.com/headroom.js/-/headroom.js-0.9.4.tgz#0c4e6b4563bb69df55aecdefaba3227566f2df5a"
   integrity sha1-DE5rRWO7ad9Vrs3vq6MidWby31o=
 
+milligram@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/milligram/-/milligram-1.3.0.tgz#a5d980ef8eaf79337c96a8d7c7e176764931042c"
+  integrity sha1-pdmA746veTN8lqjXx+F2dkkxBCw=
+  dependencies:
+    normalize.css "~5.0.0"
+
 normalize.css@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.0.tgz#14ac5e461612538a4ce9be90a7da23f86e718493"
   integrity sha512-iXcbM3NWr0XkNyfiSBsoPezi+0V92P9nj84yVV1/UZxRUrGczgX/X91KMAGM0omWLY2+2Q1gKD/XRn4gQRDB2A==
 
-typi@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/typi/-/typi-3.2.0.tgz#2d8c3852192d8b8d7021ea10f703de6442849a7f"
-  integrity sha1-LYw4Uhkti41wIeoQ9wPeZEKEmn8=
+normalize.css@~5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-5.0.0.tgz#7cec875ce8178a5333c4de80b68ea9c18b9d7c37"
+  integrity sha1-fOyHXOgXilMzxN6Ato6pwYudfDc=
 
 vanilla-lazyload@^10.18.0:
   version "10.18.0"
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 7e4d468..0ec8438 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -1,4 +1,4 @@
-baseURL = "https://example.org/"
+baseURL = "https://example.com"
 defaultContentLanguage = "en"
 disqusShortname = "test"
 enableEmoji = true
@@ -11,20 +11,10 @@ pygmentsUseClasses =  true
 theme = "simplicity"
 title = "Simplicity - Hugo theme"
 [author]
-  email = "#"
-  facebook = "#"
-  github = "#"
-  google_plus = "#"
   gravatarEmail = "test@example.com"
   homepageText = "Simplicity"
-  linkedin = "#"
-  messenger = "#"
   name = "Przemysław `eshlox` Kołodziejczyk"
   rss = "/posts/index.xml"
-  spotify = "#"
-  stackoverflow = "#"
-  telegram = "#"
-  twitter = "#"
 [imaging]
   anchor = "smart"
   resampleFilter = "box"
@@ -50,6 +40,7 @@ title = "Simplicity - Hugo theme"
   adsenseSlot = ''
   description = "A blog about everything."
   licence = "[Some Rights Reserved](http://creativecommons.org/licenses/by-sa/4.0/)."
+  displayPostLanguage = true
 [permalinks]
   posts = "/:year/:month/:day/:slug/"
 [pygmentsOptions]
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index 1978687..295b940 100644
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -7,3 +7,7 @@ slug: /
 # Simplicity, Hugo theme.
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+[Posts](/posts/) • [Categories](/categories/) • [Tags](/tags/)
+
+[Photos](/photos/) • [Projects](/projects/)
diff --git a/exampleSite/content/posts/2017/code.md b/exampleSite/content/posts/2017/code.md
new file mode 100644
index 0000000..d29c7de
--- /dev/null
+++ b/exampleSite/content/posts/2017/code.md
@@ -0,0 +1,44 @@
+---
+title: Code
+date: 2017-01-09T10:15:01+02:00
+categories: [writing]
+tags: [typography, elements]
+language: en
+slug: code
+---
+
+```
+import os
+
+# Very long line, very long line, very long line, very long line, very long line, very long line, very long line, very long line.
+filename = os.environ.get('PYTHONSTARTUP')
+if filename and os.path.isfile(filename):
+    with open(filename) as fobj:
+        startup_file = fobj.read()
+    exec(startup_file)
+```
+
+---
+
+```python
+import os
+
+filename = os.environ.get('PYTHONSTARTUP')
+if filename and os.path.isfile(filename):
+    with open(filename) as fobj:
+        startup_file = fobj.read()
+    exec(startup_file)
+```
+
+---
+
+{{< highlight html >}}
+<section id="main">
+    <div>
+        <h1 id="title">{{ .Title }}</h1>
+        {{ range .Data.Pages }}
+            {{ .Render "summary"}}
+        {{ end }}
+    </div>
+</section>
+{{< /highlight >}}
diff --git a/exampleSite/content/posts/2017/gist.md b/exampleSite/content/posts/2017/gist.md
new file mode 100644
index 0000000..8a13dbb
--- /dev/null
+++ b/exampleSite/content/posts/2017/gist.md
@@ -0,0 +1,14 @@
+---
+title: Gist
+date: 2017-02-09T10:15:01+02:00
+categories: [writing]
+tags: [typography, elements]
+language: en
+slug: gist
+---
+
+```markdown
+{{</* gist spf13 7896402 */>}}
+```
+
+{{< gist spf13 7896402 >}}
diff --git a/exampleSite/content/posts/2017/images.md b/exampleSite/content/posts/2017/images.md
index 003d987..9595d5b 100644
--- a/exampleSite/content/posts/2017/images.md
+++ b/exampleSite/content/posts/2017/images.md
@@ -1,6 +1,6 @@
 ---
 title: Images
-date: 2017-11-11T10:15:01+02:00
+date: 2017-03-11T10:15:01+02:00
 categories: ["writing"]
 tags: ["images", "lightbox"]
 language: en
diff --git a/exampleSite/content/posts/2017/instagram.md b/exampleSite/content/posts/2017/instagram.md
new file mode 100644
index 0000000..bc28a6c
--- /dev/null
+++ b/exampleSite/content/posts/2017/instagram.md
@@ -0,0 +1,20 @@
+---
+title: Instagram
+date: 2017-04-09T10:15:01+02:00
+categories: [writing]
+tags: [typography, elements]
+language: en
+slug: instagram
+---
+
+```markdown
+{{</* instagram BbTLbYSH59J */>}}
+```
+
+{{< instagram BbTLbYSH59J >}}
+
+```markdown
+{{</* instagram BahBaqvnv5N hidecaption */>}}
+```
+
+{{< instagram BahBaqvnv5N hidecaption >}}
\ No newline at end of file
diff --git a/exampleSite/content/posts/2017/speakerdeck.md b/exampleSite/content/posts/2017/speakerdeck.md
new file mode 100644
index 0000000..d84fd0a
--- /dev/null
+++ b/exampleSite/content/posts/2017/speakerdeck.md
@@ -0,0 +1,14 @@
+---
+title: Speakerdeck
+date: 2017-07-09T10:15:01+02:00
+categories: [writing]
+tags: [typography, elements]
+language: en
+slug: speakerdeck
+---
+
+```markdown
+{{</* speakerdeck 50021f75cf1db900020005e7 */>}}
+```
+
+{{< speakerdeck 50021f75cf1db900020005e7 >}}
\ No newline at end of file
diff --git a/exampleSite/content/posts/2017/tables.md b/exampleSite/content/posts/2017/tables.md
new file mode 100644
index 0000000..6943940
--- /dev/null
+++ b/exampleSite/content/posts/2017/tables.md
@@ -0,0 +1,34 @@
+---
+title: Tables
+date: 2018-01-09T10:15:01+02:00
+categories: [writing]
+tags: [typography, elements]
+language: en
+slug: tables
+---
+
+First Header | Second Header | Third Header
+------------ | ------------- | ------------
+Content Cell | Content Cell  | Content Cell
+Content Cell | Content Cell  | Content Cell
+
+---
+
+| First Header  | Second Header |
+| ------------- | ------------- |
+| Content Cell  | Content Cell  |
+| Content Cell  | Content Cell  |
+
+---
+
+First Header | Second Header | Third Header
+:----------- | :-----------: | -----------:
+Left         | Center        | Right
+Left         | Center        | Right
+
+---
+
+&nbsp;       | &nbsp;        | &nbsp;
+:----------- | :-----------: | -----------:
+Left         | Center        | Right
+Left         | Center        | Right
diff --git a/exampleSite/content/posts/2017/twitter.md b/exampleSite/content/posts/2017/twitter.md
new file mode 100644
index 0000000..049bbe2
--- /dev/null
+++ b/exampleSite/content/posts/2017/twitter.md
@@ -0,0 +1,14 @@
+---
+title: Twitter
+date: 2018-02-09T10:15:01+02:00
+categories: [writing]
+tags: [typography, elements]
+language: en
+slug: twitter
+---
+
+```markdown
+{{</* tweet 935115588166471680 */>}}
+```
+
+{{< tweet 935115588166471680 >}}
diff --git a/exampleSite/content/posts/2017/typography.md b/exampleSite/content/posts/2017/typography.md
index e87d977..617846b 100644
--- a/exampleSite/content/posts/2017/typography.md
+++ b/exampleSite/content/posts/2017/typography.md
@@ -1,6 +1,6 @@
 ---
-title: Typography - all elements with examples
-date: 2017-11-09T10:15:01+02:00
+title: Typography
+date: 2018-03-09T10:15:01+02:00
 categories: [writing]
 tags: [typography, elements]
 language: en
@@ -11,8 +11,12 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lore
 
 Ut dolor nunc, dictum vitae molestie pulvinar, condimentum quis dui. Mauris ullamcorper tincidunt magna, quis tristique ligula laoreet fringilla. Nam dapibus tellus vel est vehicula, sed mattis sapien tempus. Aenean suscipit erat in lacus luctus lacinia. Donec in justo arcu. Nunc nibh lorem, ultricies in nunc ac, posuere feugiat ligula. In convallis, urna dapibus vehicula gravida, justo massa aliquam nunc, vitae gravida justo metus non felis. Mauris sed augue risus. Quisque commodo quam in risus porttitor ultrices. Fusce pellentesque eget eros vitae pulvinar. Maecenas nec felis tortor. Etiam dictum felis eget augue congue finibus. Etiam nibh sapien, cursus sit amet feugiat non, posuere tincidunt dui.
 
+---
+
 Ã ¾ Ķ Ŀ Ƿ ע ऋ ਉ ጇ ᚙ ឿ ظ ę Ó Ą Ś
 
+---
+
 # H1
 ## H2
 ### H3
@@ -20,6 +24,8 @@ Ut dolor nunc, dictum vitae molestie pulvinar, condimentum quis dui. Mauris ulla
 ##### H5
 ###### H6
 
+---
+
 # This is H1
 
 Maecenas nec felis tortor. Etiam dictum felis eget augue congue finibus. Etiam nibh sapien, cursus sit amet feugiat non, posuere tincidunt dui.
@@ -48,6 +54,8 @@ Maecenas nec felis tortor. Etiam dictum felis eget augue congue finibus. Etiam n
 
 Use the `printf()` function. You can use also ```print()```.
 
+---
+
 *italics*
 
 **bold**
@@ -60,23 +68,23 @@ Use the `printf()` function. You can use also ```print()```.
 :boom:
 :smiling_imp:
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
+---
 
 > Blockquote: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac dolor elementum, consectetur tortor in, lacinia velit. Aenean dignissim tellus justo, sit amet suscipit tortor lacinia non.
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
+---
 
 *   Red
 *   Green
 *   Blue
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
+---
 
 1.  Red
 2. 	Green
 3.	Blue
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
+---
 
 - [ ] Red
 - [ ] Green
@@ -84,66 +92,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lore
 - [ ] Yellow
 - [x] Orange
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
-
-```
-import os
-
-# Very long line, very long line, very long line, very long line, very long line, very long line, very long line, very long line.
-filename = os.environ.get('PYTHONSTARTUP')
-if filename and os.path.isfile(filename):
-    with open(filename) as fobj:
-        startup_file = fobj.read()
-    exec(startup_file)
-```
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
-
-```python
-import os
-
-filename = os.environ.get('PYTHONSTARTUP')
-if filename and os.path.isfile(filename):
-    with open(filename) as fobj:
-        startup_file = fobj.read()
-    exec(startup_file)
-```
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
-
-{{< highlight html >}}
-<section id="main">
-    <div>
-        <h1 id="title">{{ .Title }}</h1>
-        {{ range .Data.Pages }}
-            {{ .Render "summary"}}
-        {{ end }}
-    </div>
-</section>
-{{< /highlight >}}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
-
-First Header | Second Header | Third Header
------------- | ------------- | ------------
-Content Cell | Content Cell  | Content Cell
-Content Cell | Content Cell  | Content Cell
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
-
-| First Header  | Second Header |
-| ------------- | ------------- |
-| Content Cell  | Content Cell  |
-| Content Cell  | Content Cell  |
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
-
-First Header | Second Header | Third Header
-:----------- | :-----------: | -----------:
-Left         | Center        | Right
-Left         | Center        | Right
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
+---
 
 You can create footnotes like this[^footnote].
 
@@ -153,56 +102,6 @@ This is [an example](http://example.com/ "Title") link.
 
 An email <example@example.com> link.
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
-
-{{< image src="media/image-1.jpg" title="Photo by Ales Krivec on Unsplash" >}}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
-
-{{< image src="media/image-1.jpg" title="Photo by Ales Krivec on Unsplash" full="true">}}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
-
-{{< image src="media/image-1.jpg" lightbox="true" >}}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
-
-{{< image src="media/image-1.jpg" title="Photo by Ales Krivec on Unsplash" lightbox="true" >}}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
-
-{{< instagram BbTLbYSH59J >}}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
-
-{{< instagram BahBaqvnv5N hidecaption >}}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
-
-{{< speakerdeck 50021f75cf1db900020005e7 >}}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
-
-{{< tweet 935115588166471680 >}}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
-
-{{< youtube wwKBHrMy-Wc >}}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
-
-{{< vimeo 265143954 >}}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
-
-{{< video src="media/video.mp4" >}}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
-
-{{< gist spf13 7896402 >}}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit :wink:. Nullam nibh lorem, porta ut urna ut, scelerisque consequat magna. Pellentesque vel massa sed tortor cursus tempus at eget ligula. Duis leo odio, luctus eget suscipit vel, pharetra id velit. Mauris arcu enim, mollis placerat porta in, sagittis a nisl. Nam et augue eu justo porta tincidunt. In luctus nisl dolor, sed aliquet augue elementum eget. Vivamus laoreet, mauris vitae aliquam faucibus, tellus dolor feugiat felis, ac facilisis diam eros eget est.
-
 # Table of Contents
   * [Chapter 1](#chapter-1)
   * [Chapter 2](#chapter-2)
diff --git a/exampleSite/content/posts/2017/video.md b/exampleSite/content/posts/2017/video.md
new file mode 100644
index 0000000..68ba84d
--- /dev/null
+++ b/exampleSite/content/posts/2017/video.md
@@ -0,0 +1,14 @@
+---
+title: Video
+date: 2018-06-09T10:15:01+02:00
+categories: [writing]
+tags: [typography, elements]
+language: en
+slug: video
+---
+
+```markdown
+{{</* video src="media/video.mp4" */>}}
+```
+
+{{< video src="media/video.mp4" >}}
diff --git a/exampleSite/content/posts/2017/vimeo.md b/exampleSite/content/posts/2017/vimeo.md
new file mode 100644
index 0000000..19a498a
--- /dev/null
+++ b/exampleSite/content/posts/2017/vimeo.md
@@ -0,0 +1,14 @@
+---
+title: Vimeo
+date: 2018-09-09T10:15:01+02:00
+categories: [writing]
+tags: [typography, elements]
+language: en
+slug: vimeo
+---
+
+```markdown
+{{</* vimeo 265143954 */>}}
+```
+
+{{< vimeo 265143954 >}}
diff --git a/exampleSite/content/posts/2017/youtube.md b/exampleSite/content/posts/2017/youtube.md
new file mode 100644
index 0000000..e314ae3
--- /dev/null
+++ b/exampleSite/content/posts/2017/youtube.md
@@ -0,0 +1,14 @@
+---
+title: Youtube
+date: 2018-10-09T10:15:01+02:00
+categories: [writing]
+tags: [typography, elements]
+language: en
+slug: youtube
+---
+
+```markdown
+{{</* youtube wwKBHrMy-Wc */>}}
+```
+
+{{< youtube wwKBHrMy-Wc >}}
diff --git a/exampleSite/content/projects.md b/exampleSite/content/projects.md
index d71fba6..07ca67c 100644
--- a/exampleSite/content/projects.md
+++ b/exampleSite/content/projects.md
@@ -6,6 +6,8 @@ slug: projects
 
 # Projects.
 
+---
+
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum lectus ornare ornare ultrices. Vivamus suscipit fringilla interdum. Nullam nisl dui, semper a sollicitudin vel, euismod eu risus. Pellentesque dignissim vel nunc nec condimentum. Nunc molestie ligula nec molestie faucibus. Aenean tincidunt sit amet leo quis cursus. Cras convallis lectus tincidunt pharetra condimentum. Aenean cursus consectetur massa sit amet volutpat. Aenean at arcu eget ligula dapibus volutpat in a sapien. Integer sed ex ex.
 
 1. Project 1.
diff --git a/i18n/en.toml b/i18n/en.toml
index 93c031e..297bc5b 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -7,23 +7,11 @@ other = "List of posts"
 [homePage]
 other = "Homepage"
 
-[previous]
-other = "previous"
-
-[next]
-other = "next"
-
 [categories]
 other = "Categories"
 
 [tags]
 other = "Tags"
 
-[loggedAs]
-other = "You're logged in as"
-
-[404Page]
-other = "Just kidding. This page does not exist (404)."
-
 [pages]
 other = "Pages"
diff --git a/i18n/pl.toml b/i18n/pl.toml
index 8c3079a..b6c773f 100644
--- a/i18n/pl.toml
+++ b/i18n/pl.toml
@@ -7,23 +7,11 @@ other = "Lista postów"
 [homePage]
 other = "Strona główna"
 
-[previous]
-other = "poprzednie"
-
-[next]
-other = "następne"
-
 [categories]
 other = "Kategorie"
 
 [tags]
 other = "Tagi"
 
-[loggedAs]
-other = "Jesteś zalogowany jako"
-
-[404Page]
-other = "Żartuję. Ta strona nie istnieje (404)."
-
 [pages]
 other = "Strony"
diff --git a/layouts/404.html b/layouts/404.html
index 5752b7c..feb4fdc 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,4 +1,3 @@
 {{ define "main" }}
-  <p>{{ i18n "loggedAs" . }} <strong>admin</strong>.</p>
-  <p>{{ i18n "404Page" . }}</p>
+  :no_entry_sign: 404 :cry:
 {{ end }}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 459bf80..99f7352 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -2,18 +2,22 @@
 <html lang="{{ or .Params.language .Site.LanguageCode }}">
   {{ partial "head.html" . }}
   <body>
-    {{ partial "navbar.html" . }}
-    <main>
+    {{ if not .IsHome }}
+      {{ partial "navbar.html" . }}
+    {{ end }}
+    <main class="container{{ if .IsHome }} home{{ end }}">
       {{ block "main" . -}}{{- end }}
     </main>
-    {{ partial "footer.html" . }}
+    {{ if not .IsHome }}
+      {{ partial "footer.html" . }}
+    {{ end }}
     <!-- JS -->
     {{ $baguetteBox := resources.Get "/node_modules/baguetteBox.js/src/baguetteBox.js" }}
     {{ $headroom := resources.Get "/node_modules/headroom.js/dist/headroom.js" }}
     {{ $lazyload := resources.Get "/node_modules/vanilla-lazyload/dist/lazyload.js" }}
     {{ $main := resources.Get "/src/scripts/main.js" }}
     {{ $scripts := slice $baguetteBox $headroom $lazyload $main | resources.Concat "assets/js/scripts.js" | resources.Minify }}
-    <script src="{{ $scripts.Permalink }}"></script>
+    <script src="{{ $scripts.RelPermalink }}"></script>
     {{ template "_internal/google_analytics_async.html" . }}
   </body>
 </html>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index c08f79f..fd072dd 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,12 +1,18 @@
 {{ define "main" }}
-  <div class="progress-container">
-    <div class="progress-bar"></div>
-  </div>
   <article>
     <header>
-      <time datetime="{{ .Date.Format "2006-01-02 03:04" }}">
-        {{- .Date.Format "2006-01-02" -}}
-      </time>
+      <small>
+        <time datetime="{{ .Date.Format "2006-01-02 03:04" }}">
+          {{- .Date.Format "2006-01-02" -}}
+        </time>
+        &bull;
+        {{- if .Params.categories }}
+          {{ range $index, $category := .Params.categories }}
+            {{ if gt $index 0 }}, {{ end }}
+            <a href="{{ $.LanguagePrefix }}{{ "/categories/" | relURL }}{{ . | urlize }}">{{- upper . -}}</a>
+          {{ end }}
+        {{- end -}}
+      </small>
       <h1>{{- .Title -}}</h1>
     </header>
     <section>
@@ -15,14 +21,6 @@
     <footer>
       <hr>
       <div class="meta">
-        <p class="categories">
-          {{- if .Params.categories }}
-            {{ range $index, $category := .Params.categories }}
-              {{ if gt $index 0 }}, {{ end }}
-              <a href="{{ $.LanguagePrefix }}{{ "/categories/" | relURL }}{{ . | urlize }}">{{- upper . -}}</a>
-            {{ end }}
-          {{- end -}}
-        </p>
         <p class="tags">
           {{ if .Params.tags }}
             {{ range $index, $tag := .Params.tags }}
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
index 2da7473..ddf1271 100644
--- a/layouts/_default/terms.html
+++ b/layouts/_default/terms.html
@@ -1,12 +1,15 @@
 {{ define "main" }}
-  <h1>{{ i18n (lower .Data.Plural) . }}</h1>
-  <ol class="decimal-list">
+  <h2>{{ i18n (lower .Data.Plural) . }}</h2>
+  <hr>
+  <ol>
     {{ range .Data.Terms.Alphabetical }}
       <li>
         <a href="{{ $.LanguagePrefix }}/{{ $.Data.Plural }}/{{ .Term | urlize }}">
           {{ .Term }}
         </a>
-        <sup>{{ .Count }}</sup>
+        <sup>
+          {{ .Count }}
+        </sup>
       </li>
     {{ end }}
   </ol>
diff --git a/layouts/index.html b/layouts/index.html
index c032921..5054f0f 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,130 +1,11 @@
 {{ define "main" }}
-  <img
-    class="homepage-avatar"
-    src="https://www.gravatar.com/avatar/{{ md5 .Site.Author.gravataremail }}?s=100&d=identicon"
-  >
-  {{ .Content }}
-  <div class="social-icons">
-    {{ if .Site.Author.email }}
-      <a href="mailto:{{ .Site.Author.email }}" class="email" title="E-mail">
-        <svg aria-labelledby="simpleicons-gmail-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <title id="simpleicons-gmail-icon">E-mail</title>
-          <path d="M24 4.5v15c0 .85-.65 1.5-1.5 1.5H21V7.387l-9 6.463-9-6.463V21H1.5C.649 21 0 20.35 0 19.5v-15c0-.425.162-.8.431-1.068C.7 3.16 1.076 3 1.5 3H2l10 7.25L22 3h.5c.425 0 .8.162 1.069.432.27.268.431.643.431 1.068z"/>
-        </svg>
-      </a>
-    {{ end }}
-    {{ if .Site.Author.telegram }}
-      <a href="{{ .Site.Author.telegram }}" class="telegram" title="Telegram">
-        <svg aria-labelledby="simpleicons-telegram-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-          <title id="simpleicons-telegram-icon">Telegram</title>
-          <path d="M9.028 20.837c-.714 0-.593-.271-.839-.949l-2.103-6.92L22.263 3.37"/>
-          <path d="M9.028 20.837c.552 0 .795-.252 1.105-.553l2.941-2.857-3.671-2.214"/>
-          <path d="M9.403 15.213l8.89 6.568c1.015.56 1.748.271 2-.942l3.62-17.053c.372-1.487-.564-2.159-1.534-1.72L1.125 10.263c-1.45.582-1.443 1.392-.264 1.753l5.455 1.7L18.94 5.753c.595-.36 1.143-.167.694.232"/>
-        </svg>
-      </a>
-    {{ end }}
-    {{ if .Site.Author.twitter }}
-      <a href="{{ .Site.Author.twitter }}" class="twitter" title="Twitter">
-        <svg aria-labelledby="simpleicons-twitter-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <title id="simpleicons-twitter-icon">Twitter</title>
-          <path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/>
-        </svg>
-      </a>
-    {{ end }}
-    {{ if .Site.Author.gitlab }}
-      <a href="{{ .Site.Author.gitlab }}" class="gitlab" title="Gitlab">
-        <svg aria-labelledby="simpleicons-gitlab-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <title id="simpleicons-gitlab-icon">GitLab icon</title>
-          <path d="M23.955 13.587l-1.342-4.135-2.664-8.189c-.135-.423-.73-.423-.867 0L16.418 9.45H7.582L4.919 1.263C4.783.84 4.185.84 4.05 1.26L1.386 9.449.044 13.587c-.121.375.014.789.331 1.023L12 23.054l11.625-8.443c.318-.235.453-.647.33-1.024"/>
-        </svg>
-      </a>
-    {{ end }}
-    {{ if .Site.Author.github }}
-      <a href="{{ .Site.Author.github }}" class="github" title="GitHub">
-        <svg aria-labelledby="simpleicons-github-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <title id="simpleicons-github-icon">GitHub</title>
-          <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
-        </svg>
-      </a>
-    {{ end }}
-    {{ if .Site.Author.stackoverflow }}
-      <a href="{{ .Site.Author.stackoverflow }}" class="stackoverflow" title="Stack Overflow">
-        <svg aria-labelledby="simpleicons-stackoverflow-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <title id="simpleicons-stackoverflow-icon">Stack Overflow</title>
-          <path d="M18.986 21.865v-6.404h2.134V24H1.844v-8.539h2.13v6.404h15.012zM6.111 19.731H16.85v-2.137H6.111v2.137zm.259-4.852l10.48 2.189.451-2.07-10.478-2.187-.453 2.068zm1.359-5.056l9.705 4.53.903-1.95-9.706-4.53-.902 1.936v.014zm2.715-4.785l8.217 6.855 1.359-1.62-8.216-6.853-1.35 1.617-.01.001zM15.751 0l-1.746 1.294 6.405 8.604 1.746-1.294L15.749 0h.002z"/>
-        </svg>
-      </a>
-    {{ end }}
-    {{ if .Site.Author.spotify }}
-      <a href="{{ .Site.Author.spotify }}" class="spotify" title="Spotify">
-        <svg aria-labelledby="simpleicons-spotify-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <title id="simpleicons-spotify-icon">Spotify</title>
-          <path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/>
-        </svg>
-      </a>
-    {{ end }}
-    {{ if .Site.Author.google_plus }}
-      <a href="{{ .Site.Author.google_plus }}" class="google-plus" title="Google+">
-        <svg aria-labelledby="simpleicons-googleplus-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <title id="simpleicons-googleplus-icon">Google+</title>
-          <path d="M7.635 10.909v2.619h4.335c-.173 1.125-1.31 3.295-4.331 3.295-2.604 0-4.731-2.16-4.731-4.823 0-2.662 2.122-4.822 4.728-4.822 1.485 0 2.479.633 3.045 1.178l2.073-1.994c-1.33-1.245-3.056-1.995-5.115-1.995C3.412 4.365 0 7.785 0 12s3.414 7.635 7.635 7.635c4.41 0 7.332-3.098 7.332-7.461 0-.501-.054-.885-.12-1.265H7.635zm16.365 0h-2.183V8.726h-2.183v2.183h-2.182v2.181h2.184v2.184h2.189V13.09H24"/>
-        </svg>
-      </a>
-    {{ end }}
-    {{ if .Site.Author.linkedin }}
-      <a href="{{ .Site.Author.linkedin }}" class="linkedin" title="LinkedIn">
-        <svg aria-labelledby="simpleicons-linkedin-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <title id="simpleicons-linkedin-icon">LinkedIn</title>
-          <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
-        </svg>
-      </a>
-    {{ end }}
-    {{ if .Site.Author.messenger }}
-      <a href="{{ .Site.Author.messenger }}" class="messenger" title="Messenger">
-        <svg aria-labelledby="simpleicons-messenger-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <title id="simpleicons-messenger-icon">Messenger</title>
-          <path d="M12 0C5.373 0 0 4.974 0 11.111c0 3.498 1.744 6.614 4.469 8.654V24l4.088-2.242c1.092.3 2.246.464 3.443.464 6.627 0 12-4.975 12-11.11S18.627 0 12 0zm1.191 14.963l-3.055-3.26-5.963 3.26L10.732 8l3.131 3.259L19.752 8l-6.561 6.963z"/>
-        </svg>
-      </a>
-    {{ end }}
-    {{ if .Site.Author.facebook }}
-      <a href="{{ .Site.Author.facebook }}" class="facebook" title="Facebook">
-        <svg aria-labelledby="simpleicons-facebook-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <title id="simpleicons-facebook-icon">Facebook</title>
-          <path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0"/>
-        </svg>
-      </a>
-    {{ end }}
-    {{ if .Site.Author.rss }}
-      <a href="{{ .Site.Author.rss }}" class="rss" title="RSS">
-        <svg aria-labelledby="simpleicons-rss-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <title id="simpleicons-rss-icon">RSS</title>
-          <path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/>
-        </svg>
-      </a>
-    {{ end }}
-  </div>
-  <h2>Blog</h2>
-  <ul>
-    <li>
-      <a href="/posts/">{{ i18n "postsList" . }}</a></li>
-    <li>
-      <a href="/categories/">{{ i18n "categories" . }}</a>
-    </li>
-    <li>
-      <a href="/tags/">{{ i18n "tags" . }}</a>
-    </li>
-  </ul>
-  {{ if .Site.Menus.pages }}
-    <h2>{{ i18n "pages" . }}</h2>
-    <ul>
-      {{ range .Site.Menus.pages }}
-        <li>
-          <a href="{{ .URL | relURL }}">
-            {{ .Name }}
-          </a>
-        </li>
-      {{ end }}
-    </ul>
-  {{ end }}
+  <article>
+    <section>
+      <img
+      class="homepage-avatar"
+      src="https://www.gravatar.com/avatar/{{ md5 .Site.Author.gravataremail }}?s=100&d=identicon"
+      >
+      {{ .Content }}
+    </section>
+  </article>
 {{ end }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index fe41bc8..ca98d6e 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -8,12 +8,14 @@
   {{ .Hugo.Generator }}
 
   <!-- CSS -->
+  {{ $normalize := slice (resources.Get "/node_modules/normalize.css/normalize.css") | resources.Concat "assets/css/normalize.css" | resources.Minify }}
+  {{ $milligram := resources.Get "/node_modules/milligram/src/milligram.sass" | resources.ToCSS (dict "targetPath" "assets/css/milligram.css" "outputStyle" "compressed" "enableSourceMap" true) }}
   {{ $options := (dict "targetPath" "assets/css/styles.css" "outputStyle" "compressed" "enableSourceMap" true "includePaths" (slice "assets/node_modules")) }}
   {{ $styles := resources.Get "/src/styles/styles.scss" | resources.ToCSS $options }}
-  {{ $normalize := slice (resources.Get "/node_modules/normalize.css/normalize.css") | resources.Concat "assets/css/normalize.css" | resources.Minify }}
   <link href="//fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet">
-  <link rel="stylesheet" href="{{ $normalize.Permalink }}" media="screen">
-  <link rel="stylesheet" href="{{ $styles.Permalink }}" media="screen">
+  <link rel="stylesheet" href="{{ $normalize.RelPermalink }}" media="screen">
+  <link rel="stylesheet" href="{{ $milligram.RelPermalink }}" media="screen">
+  <link rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen">
 
   <!-- Icons -->
   <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ print "/assets/img/apple-touch-icon.png" | relURL }}">
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 61db8fc..e790747 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -2,12 +2,4 @@
   <a href="{{ $.LanguagePrefix }}{{ "/" | relURL }}" title="{{ i18n "homePage" }}">
     {{ .Site.Author.homepagetext }}
   </a>
-  {{ if not .IsHome }}
-    <a class="homePageIcon" href="{{ $.LanguagePrefix }}{{ "/" | relURL }}" title="{{ i18n "homePage" }}">
-      <svg fill="#000000" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
-        <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
-        <path d="M0 0h24v24H0z" fill="none"/>
-      </svg>
-    </a>
-  {{ end }}
 </nav>
diff --git a/layouts/partials/posts_list.html b/layouts/partials/posts_list.html
index ac2aff2..c49b71b 100644
--- a/layouts/partials/posts_list.html
+++ b/layouts/partials/posts_list.html
@@ -4,32 +4,22 @@
   {{ else }}
     {{ i18n "postsAbout" }} {{ .Title }}
   {{ end }}
-  <div class="svg-icon baseline">
-    <a href="{{ .RSSLink | relURL }}" class="rss" title="RSS">
-      <svg aria-labelledby="simpleicons-rss-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <title id="simpleicons-rss-icon">RSS</title>
-        <path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/>
-      </svg>
-    </a>
-  </div>
+  <small>
+    - <a href="{{ .RSSLink | relURL }}" class="rss" title="RSS">RSS</a>
+  </small>
 </h2>
 <hr>
-
 {{ range (where .Data.Pages "Type" "posts").GroupByDate "2006" }}
-  <h2 id="{{ .Key }}">
-    <div class="svg-icon baseline">
-      <svg fill="#000000" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
-        <path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"/>
-        <path d="M0 0h24v24H0z" fill="none"/>
-      </svg>
-    </div>
+  <h3 id="{{ .Key }}">
     {{ .Key }}
-  </h2>
-  <ol class="decimal-list">
+  </h3>
+  <ul class="posts-list">
     {{ range .Pages }}
       <li>
-        <a href="{{ .Permalink | relURL }}" title="{{ .Title }}">{{ .Title }}</a>
+        <span class="date">{{ .Date.Format "January 2, 2006" }}</span>
+        <a href="{{ .RelPermalink | relURL }}" title="{{ .Title }}">{{ .Title }}</a>
+        {{ if .Site.Params.displayPostLanguage }}<span class="lang">/ {{ .Lang }}</span>{{ end }}
       </li>
     {{ end }}
-  </ol>
+  </ul>
 {{ end }}