From be3218290dc63ba251bfd2fe4d4dccb2122f4bbe Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Mon, 21 Feb 2022 18:13:35 +0000
Subject: [PATCH] feat: refactor CSS to SCSS 

---
 assets/scss/main.scss                                                                                 |   27 
 assets/scss/partials/components/_archive.scss                                                         |   46 +
 layouts/partials/pagination.html                                                                      |   10 
 assets/scss/anatole.rtl.scss                                                                          |    4 
 assets/scss/partials/components/_sidebar.scss                                                         |   74 +
 layouts/_default/list.html                                                                            |   40 
 .prettierignore                                                                                       |    7 
 assets/scss/partials/components/_page404.scss                                                         |    4 
 layouts/portfolio/list.html                                                                           |  130 +-
 assets/js/anatole-theme-switcher.js                                                                   |   81 -
 layouts/partials/navbar.html                                                                          |  127 +-
 resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.content                 |    1 
 assets/css/markupHighlight.css                                                                        |    2 
 exampleSite/resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.content |    1 
 assets/scss/partials/layout/_html.scss                                                                |    4 
 layouts/partials/footer.html                                                                          |   55 
 layouts/_default/single.html                                                                          |   62 
 layouts/partials/sidebar.html                                                                         |   22 
 assets/scss/partials/components/_footer.scss                                                          |   45 +
 resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.json                |    1 
 exampleSite/resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.json        |    1 
 assets/scss/partials/components/_tag.scss                                                             |   20 
 assets/scss/partials/components/_wrapper.scss                                                         |   38 
 resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.json                    |    1 
 assets/scss/partials/layout/_header.scss                                                              |   21 
 assets/scss/partials/_hugo.scss                                                                       |   33 
 assets/scss/partials/components/_pagination.scss                                                      |   23 
 assets/scss/modules/_config.scss                                                                      |   39 
 exampleSite/resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.json    |    1 
 images/tn.png                                                                                         |    0 
 resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.content             |    1 
 layouts/partials/expirationnote.html                                                                  |    2 
 assets/scss/partials/components/_animated.scss                                                        |   52 +
 layouts/partials/head.html                                                                            |   45 
 exampleSite/config/_default/languages.toml                                                            |    2 
 exampleSite/resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.content     |    1 
 layouts/_default/baseof.html                                                                          |   23 
 layouts/partials/taxonomy/template.html                                                               |    2 
 .gitignore                                                                                            |    1 
 package-lock.json                                                                                     |  177 ++++
 assets/js/medium-zoom.js                                                                              |    2 
 assets/scss/modules/_variables.scss                                                                   |   23 
 assets/scss/partials/components/_navbarburger.scss                                                    |   40 +
 assets/scss/partials/vendors/_tableofcontents.scss                                                    |   23 
 exampleSite/content/english/post/series-part-2.md                                                     |    2 
 images/screenshot.png                                                                                 |    0 
 assets/scss/partials/components/_alert.scss                                                           |   27 
 assets/scss/partials/_base.scss                                                                       |   13 
 assets/scss/partials/components/_comment.scss                                                         |    6 
 images/screenshot_dark.png                                                                            |    0 
 assets/scss/partials/components/_post.scss                                                            |  219 +++++
 layouts/index.html                                                                                    |   78 -
 assets/css/spinner.css                                                                                |    2 
 assets/scss/partials/layout/_body.scss                                                                |   13 
 assets/scss/partials/components/_category.scss                                                        |   20 
 assets/scss/anatole.scss                                                                              |    4 
 assets/scss/partials/components/_themeswitch.scss                                                     |    4 
 assets/scss/modules/_color_theme.scss                                                                 |   46 +
 /dev/null                                                                                             |  128 ---
 assets/scss/partials/vendors/_mediumzoom.scss                                                         |   37 
 assets/scss/partials/vendors/_contactform.scss                                                        |   64 +
 assets/js/anatole-header.js                                                                           |   25 
 assets/scss/partials/components/_portfolio.scss                                                       |  172 ++++
 assets/scss/partials/layout/_nav.scss                                                                 |   73 +
 package.json                                                                                          |    5 
 assets/scss/partials/components/_languageswitch.scss                                                  |   81 ++
 exampleSite/content/english/post/markdown-syntax.md                                                   |   32 
 67 files changed, 1,851 insertions(+), 514 deletions(-)

diff --git a/.gitignore b/.gitignore
index 04e51e8..b3bfa3d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@
 .hugo_build.lock
 /node_modules
 .devcontainer
+exampleSite/public/
diff --git a/.prettierignore b/.prettierignore
index 9ffadf0..dcc6fbc 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1 +1,6 @@
-contact.html
\ No newline at end of file
+contact.html
+resources
+exampleSite/public
+exampleSite/resources
+anatole.scss
+anatole.rtl.scss
\ No newline at end of file
diff --git a/assets/css/markupHighlight.css b/assets/css/markupHighlight.css
index d7a9ca3..744c739 100644
--- a/assets/css/markupHighlight.css
+++ b/assets/css/markupHighlight.css
@@ -66,7 +66,7 @@
   --chr-cpf-color: #75715e;
 }
 
-html[data-theme='dark'] {
+body.theme--dark {
   /* Dark -> monokai */
   --chr-def-color: #f8f8f2;
   --chr-def-bg-color: #272822;
diff --git a/assets/css/spinner.css b/assets/css/spinner.css
index 6934282..b3d5127 100644
--- a/assets/css/spinner.css
+++ b/assets/css/spinner.css
@@ -3,7 +3,7 @@
   --sk-color: #333;
 }
 
-html[data-theme='dark'] {
+body.theme--dark {
   --sk-color: rgb(169, 169, 179);
 }
 
diff --git a/assets/css/style.css b/assets/css/style.css
deleted file mode 100644
index 5bd7b23..0000000
--- a/assets/css/style.css
+++ /dev/null
@@ -1,1500 +0,0 @@
-@charset "UTF-8";
-
-:root {
-  --bg-color: #fff;
-  --secondary-bg-color: #eeeeee;
-  --heading-color: #464646;
-  --body-color: rgba(0, 0, 0, 0.7);
-  --post-color: rgba(0, 0, 0, 0.44);
-  --border-color: rgba(0, 0, 0, 0.15);
-  --form-border-color: #9f9f9f;
-  --form-button-hover-border-color: #000;
-  --pre-bg-color: #f9f9fd;
-  --nav-text-color: #5a5a5a;
-  --tag-color: #424242;
-  --blockquote-text-color: #858585;
-  --blockquote-border-color: #dfe2e5;
-  --link-color: #0366d7;
-  --warning-alert-color: #ffc107;
-  --thumbnail-height: 15em;
-  scroll-padding-top: 100px;
-  --body-max-width: 1920px;
-  --sidebar-ratio: calc(1 - var(--content-ratio));
-  --content-max-width: calc(var(--body-max-width) * var(--content-ratio));
-  --sidebar-max-width: calc(var(--body-max-width) - var(--content-max-width));
-  --content-width: calc(var(--content-ratio) * 100%);
-  --sidebar-width: calc(var(--sidebar-ratio) * 100%);
-  /* prettier-ignore */
-  --content-ratio: {{ .Site.Params.contentratio | default 0.6 }}
-}
-
-html[data-theme='dark'] {
-  --bg-color: #010408;
-  --secondary-bg-color: rgb(56, 56, 56);
-  --heading-color: #c9d1d9;
-  --body-color: rgb(169, 169, 179);
-  --post-color: rgba(0, 0, 0, 0.44);
-  --border-color: #30363d;
-  --form-border-color: rgb(169, 169, 179);
-  --form-button-hover-border-color: #fff;
-  --pre-bg-color: rgb(33, 33, 45);
-  --nav-text-color: rgb(191, 191, 191);
-  --tag-color: rgb(191, 191, 191);
-  --blockquote-text-color: #808080;
-  --blockquote-border-color: #424242;
-  --link-color: #58a6fe;
-  --warning-alert-color: #4d00c9c7;
-}
-
-html {
-  background-color: var(--bg-color);
-  -webkit-font-smoothing: antialiased;
-  font-size: 62.5%;
-}
-
-body {
-  color: var(--body-color);
-  font-family: 'PingHei', 'PingFang SC', 'Helvetica Neue', 'Work Sans', 'Hiragino Sans GB', sans-serif;
-  font-size: 1.5rem;
-  width: 100%;
-  margin: 0 auto;
-  background-color: var(--bg-color);
-}
-
-p {
-  line-height: 1.9em;
-  font-weight: 400;
-  font-size: 1.4rem;
-}
-
-a {
-  text-decoration: none;
-  color: var(--link-color);
-}
-
-blockquote {
-  padding: 0 1em;
-  border-left: 0.25em solid var(--blockquote-border-color);
-  color: var(--blockquote-text-color);
-}
-
-.category {
-  padding: 4px 6px;
-  border-radius: 3px;
-  color: var(--tag-color) !important;
-  background-color: var(--secondary-bg-color);
-  border: 1px solid var(--border-color);
-}
-
-.tag::before {
-  content: '#';
-  opacity: 0.5;
-}
-
-.tag,
-.category {
-  display: inline-block;
-  font-size: 1.5rem;
-  line-height: 1;
-  margin: 5px 8px 5px 0;
-}
-
-pre {
-  background-color: var(--pre-bg-color);
-  padding: 5px;
-  display: block;
-  overflow-x: auto;
-}
-
-.info i {
-  opacity: 0.5;
-  margin-right: 5px;
-}
-
-a:link,
-a:visited {
-  opacity: 1;
-}
-
-a:hover,
-a:active {
-  color: var(--link-color);
-}
-
-/*basic styles ends*/
-/*animation starts*/
-
-.animated {
-  transition: top 0.8s linear;
-  -webkit-animation-duration: 1s;
-  -moz-animation-duration: 1s;
-  -ms-animation-duration: 1s;
-  -o-animation-duration: 1s;
-  animation-duration: 1s;
-}
-
-.animated.hinge {
-  -webkit-animation-duration: 1s;
-  -moz-animation-duration: 1s;
-  -ms-animation-duration: 1s;
-  -o-animation-duration: 1s;
-  animation-duration: 1s;
-}
-
-@-webkit-keyframes fadeInDown {
-  0% {
-    -webkit-transform: translateY(-20px);
-  }
-
-  100% {
-    -webkit-transform: translateY(0);
-  }
-}
-
-@-moz-keyframes fadeInDown {
-  0% {
-    -moz-transform: translateY(-20px);
-  }
-
-  100% {
-    -moz-transform: translateY(0);
-  }
-}
-
-@-o-keyframes fadeInDown {
-  0% {
-    -o-transform: translateY(-20px);
-  }
-
-  100% {
-    -o-transform: translateY(0);
-  }
-}
-
-@keyframes fadeInDown {
-  0% {
-    transform: translateY(-20px);
-  }
-
-  100% {
-    transform: translateY(0);
-  }
-}
-
-.fadeInDown {
-  -webkit-animation-name: fadeInDown;
-  -moz-animation-name: fadeInDown;
-  -o-animation-name: fadeInDown;
-  animation-name: fadeInDown;
-}
-
-/*animation ends*/
-.nav__list {
-  margin: 0;
-}
-
-main {
-  width: var(--content-width);
-}
-
-.content {
-  height: auto;
-  margin-top: 80px;
-}
-
-header {
-  width: var(--content-width);
-  position: fixed;
-  right: 0;
-  z-index: 3;
-  background-color: var(--bg-color);
-}
-
-header .nav__list {
-  list-style: none;
-  padding: 20px 30px;
-  font-size: 1.2rem;
-}
-
-header .nav__list li {
-  position: relative;
-  display: initial;
-}
-
-header .nav__list a {
-  color: var(--nav-text-color);
-}
-
-header .nav__list a:hover {
-  color: #2660ab;
-}
-
-header .nav__list a.current {
-  color: var(--nav-text-color);
-  padding-bottom: 22px;
-  border-bottom: 1px solid var(--nav-text-color);
-}
-
-.theme-switch {
-  margin-top: -5px;
-  color: var(--nav-text-color);
-  font-size: 1.75rem;
-}
-
-header .information {
-  float: right;
-  padding-top: 12px;
-  padding-right: 20px;
-}
-
-header .information .avatar {
-  float: right;
-}
-
-header .information .avatar img {
-  width: 32px;
-  height: 32px;
-  border-radius: 300px;
-}
-
-header .information .back_btn {
-  float: left;
-  padding-top: 5px;
-  margin-right: -10px;
-}
-
-header .information .back_btn li {
-  display: initial;
-  padding-right: 40px;
-}
-
-aside {
-  width: var(--sidebar-width);
-}
-
-/*
-Language Switch
-*/
-
-.sl-nav {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  position: relative;
-  display: inline-block;
-  padding-right: 20px;
-}
-
-.sl-nav li label {
-  cursor: pointer;
-}
-
-.sl-nav li .dropdown {
-  display: none;
-  position: absolute;
-  top: 29px;
-  right: -15px;
-  background: var(--pre-bg-color);
-  border-color: var(--border-color);
-  padding-left: 0;
-  padding-top: 0px;
-  z-index: 1;
-  border-radius: 5px;
-  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
-}
-
-#languagepicker:checked ~ .dropdown {
-  display: block;
-}
-
-.sl-nav li .dropdown li {
-  position: relative;
-  text-align: left;
-  background: transparent;
-  padding: 12px;
-  z-index: 2;
-  color: #3c3c3c;
-  display: block;
-}
-
-.sl-nav li .dropdown li span {
-  white-space: nowrap;
-}
-.sl-nav li .dropdown li span.active {
-  color: var(--tag-color);
-}
-
-#languagepicker:checked ~ .triangle {
-  position: absolute;
-  top: 15px;
-  right: -10px;
-  z-index: 10;
-  height: 14px;
-  overflow: hidden;
-  width: 30px;
-  background: transparent;
-}
-
-#languagepicker:checked ~ .triangle:after {
-  content: '';
-  display: block;
-  z-index: 20;
-  width: 15px;
-  transform: rotate(45deg) translateY(0px) translatex(10px);
-  height: 15px;
-  background: var(--pre-bg-color);
-  border-radius: 2px 0px 0px 0px;
-  border-color: var(--border-color);
-  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
-  float: left;
-  display: block;
-}
-
-.sidebar {
-  -webkit-background-size: cover;
-  background-size: cover;
-  background-color: var(--bg-color);
-  height: 100%;
-  left: 0;
-  z-index: 4;
-  border-right: 1px solid var(--border-color);
-}
-
-.sidebar .logo-title {
-  top: 40%;
-  text-align: center;
-}
-
-.sidebar .logo-title .description {
-  font-size: 1.4rem;
-  margin: 0 1em;
-}
-
-.sidebar .logo-title .logo {
-  margin: 0 auto;
-}
-
-.sidebar .logo-title .title img {
-  width: 127px;
-  height: 127px;
-  border-radius: 50%;
-}
-
-.sidebar .logo-title .title h3 {
-  text-transform: uppercase;
-  font-size: 2.2rem;
-  font-weight: bold;
-  letter-spacing: 2px;
-  line-height: 1;
-  margin: 1em;
-}
-
-.sidebar .logo-title .title a {
-  text-decoration: none;
-  color: var(--heading-color);
-  font-size: 3rem;
-  font-weight: bold;
-}
-
-.sidebar .social-links {
-  list-style: none;
-  padding: 0;
-  font-size: 1.4rem;
-  text-align: center;
-}
-
-.sidebar .social-links i {
-  margin-right: 3px;
-}
-
-.sidebar .social-links li {
-  display: inline;
-  padding: 0 4px;
-  line-height: 0;
-}
-
-.sidebar .social-links a {
-  color: var(--heading-color);
-}
-
-.sidebar .social-links a:hover {
-  color: #2660ab;
-}
-
-.post {
-  background-color: var(--bg-color);
-  margin: 30px;
-}
-
-.post .post-title h1 {
-  text-transform: uppercase;
-  font-size: 3em;
-  letter-spacing: 1px;
-  line-height: 1;
-}
-
-.post .post-title h2 {
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  font-size: 2.6rem;
-  line-height: 1;
-  font-weight: 600;
-  color: var(--heading-color);
-}
-
-.post .post-title h3 {
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  line-height: 1;
-  font-weight: 600;
-  color: var(--heading-color);
-  font-size: 2.2rem;
-  margin: 0;
-}
-
-.post .post-title a {
-  text-decoration: none;
-  letter-spacing: 1px;
-  color: var(--heading-color);
-}
-
-.post .post-title a:hover {
-  text-decoration: underline;
-}
-
-.post .post-content a {
-  text-decoration: none;
-  letter-spacing: 1px;
-  color: var(--link-color);
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-}
-
-.post .post-content a:hover {
-  color: var(--link-color);
-}
-
-.post .post-content h3 {
-  font-size: 2.2rem;
-  font-weight: 600;
-}
-
-.post .post-content h4 {
-  /* color: var(--heading-color); */
-  font-size: 1.6rem;
-}
-
-.post .post-content img {
-  max-width: 100%;
-}
-
-.post .post-content ul {
-  line-height: 1.9em;
-  font-weight: 400;
-  font-size: 1.4rem;
-}
-
-.post .post-content ol {
-  line-height: 1.9em;
-  font-weight: 400;
-  font-size: 1.4rem;
-}
-
-.post .post-footer {
-  padding: 0 0 10px 0;
-  border-bottom: 1px solid var(--border-color);
-}
-
-.post .post-footer .meta {
-  max-width: 100%;
-  display: flex;
-  color: #bbbbbb;
-}
-
-.post .post-footer .meta .info {
-  float: left;
-  font-size: 1.2rem;
-  margin-bottom: 1em;
-  color: var(--body-color);
-}
-
-.post .post-footer .info .separator a {
-  margin-right: 0.2em;
-}
-
-.post .post-footer .meta .info .date {
-  margin-right: 10px;
-  margin-left: 5px;
-}
-
-.post figure {
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-  text-align: center;
-}
-
-.post figure.right {
-  float: right;
-  margin-left: 1.5em;
-  max-width: 50%;
-}
-
-.post figure.left {
-  float: left;
-  margin-right: 1.5em;
-  max-width: 50%;
-}
-
-.post figure.big {
-  max-width: 100vw;
-}
-
-.info {
-  margin: 1em;
-}
-
-.info span {
-  margin-right: 0.5em;
-}
-
-.post .post-footer .meta a {
-  text-decoration: none;
-  color: var(--body-color);
-}
-
-.post .post-footer .meta a:hover {
-  color: #2660ab;
-}
-
-.post .post-footer .meta i {
-  margin-right: 6px;
-}
-
-.post .post-footer .tags {
-  padding-bottom: 15px;
-  font-size: 1.3rem;
-}
-
-.post .post-footer .tags ul {
-  list-style-type: none;
-  display: inline;
-  margin: 0;
-  padding: 0;
-}
-
-.post .post-footer .tags ul li {
-  list-style-type: none;
-  margin: 0;
-  padding-right: 5px;
-  display: inline;
-}
-
-.post .post-footer .tags a {
-  text-decoration: none;
-  color: var(--post-color);
-  font-weight: 400;
-}
-
-.post .post-footer .tags a:hover {
-  text-decoration: none;
-}
-
-.post .post-thumbnail {
-  width: 100%;
-  padding-bottom: 1em;
-  box-shadow: #000;
-  border-radius: 0.5em;
-  overflow: hidden;
-  transition: box-shadow 0.3s ease;
-}
-
-.post .post-thumbnail img {
-  width: 100%;
-  height: var(--thumbnail-height);
-  object-fit: cover;
-  border: 1px solid var(--border-color);
-  border-bottom: 0px;
-}
-
-.pagination {
-  margin: 30px;
-  padding: 0px 0 56px 0;
-  text-align: center;
-  font-size: 1.4rem;
-}
-
-.pagination ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  height: 13px;
-}
-
-.pagination ul li {
-  margin: 0 2px 0 2px;
-  display: inline;
-  line-height: 1;
-}
-
-.pagination ul li a {
-  text-decoration: none;
-  color: var(--body-color);
-}
-
-.pagination .pre {
-  float: left;
-}
-
-.pagination .next {
-  float: right;
-}
-
-.like-reblog-buttons {
-  float: right;
-}
-
-.like-button {
-  float: right;
-  padding: 0 0 0 10px;
-}
-
-.reblog-button {
-  float: right;
-  padding: 0;
-}
-
-#install-btn {
-  position: fixed;
-  bottom: 0px;
-  right: 6px;
-}
-
-#disqus_thread {
-  margin: 30px;
-  border-bottom: 1px solid var(--border-color);
-}
-
-.footer {
-  clear: both;
-  text-align: center;
-  font-size: 1rem;
-  margin: 0 auto;
-  bottom: 0;
-  width: 100%;
-  padding-bottom: 20px;
-  flex: 0;
-  position: relative;
-}
-
-.footer a {
-  color: #a6a6a6;
-}
-
-.footer a:hover {
-  color: #2660ab;
-}
-
-.footer__list {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  justify-content: center;
-}
-
-.footer__item:not(:first-of-type)::before {
-  content: '\00B7';
-  padding: 4px;
-}
-
-/*for archive*/
-.archive {
-  width: 100%;
-}
-
-.list-with-title {
-  font-size: 1.4rem;
-  margin: 30px;
-  padding: 0;
-}
-
-.list-with-title li {
-  list-style-type: none;
-  padding: 0;
-}
-
-.list-with-title .listing-title {
-  font-size: 2.4rem;
-  color: #666666;
-  font-weight: 600;
-  line-height: 2.2em;
-}
-
-.list-with-title .listing {
-  padding: 0;
-}
-
-.list-with-title .listing .listing-post {
-  padding-bottom: 5px;
-}
-
-.list-with-title .listing .listing-post .post-time {
-  float: right;
-  display: inline-block;
-  max-width: 10%;
-  text-align: right;
-  color: #c5c5c5;
-}
-
-.list-with-title .listing .listing-post a {
-  color: #8f8f8f;
-  width: 90%;
-  display: inline-block;
-}
-
-.list-with-title .listing .listing-post a:hover {
-  color: #2660ab;
-}
-
-/* share */
-.share {
-  margin: 0px 30px;
-  display: inline-flex;
-}
-
-.evernote {
-  width: 32px;
-  height: 32px;
-  border-radius: 300px;
-  background-color: #3e3e3e;
-  margin-right: 5px;
-}
-
-.evernote a {
-  color: #fff;
-  padding: 11px;
-  font-size: 1.2rem;
-}
-
-.evernote a:hover {
-  color: #ed6243;
-  padding: 11px;
-}
-
-.weibo {
-  width: 32px;
-  height: 32px;
-  border-radius: 300px;
-  background-color: #ed6243;
-  margin-right: 5px;
-}
-
-.weibo a {
-  color: #fff;
-  padding: 9px;
-}
-
-.weibo a:hover {
-  color: #bd4226;
-}
-
-.twitter {
-  width: 32px;
-  height: 32px;
-  border-radius: 300px;
-  background-color: #59c0fd;
-  margin-right: 5px;
-}
-
-.twitter a {
-  color: #fff;
-  padding: 9px;
-}
-
-.twitter a:hover {
-  color: #4b9ece;
-}
-
-/* about */
-.about {
-  margin: 30px;
-}
-
-.about h3 {
-  font-size: 2.2rem;
-}
-
-/* links*/
-.links {
-  margin: 30px;
-}
-
-.links h3 {
-  font-size: 2.2rem;
-}
-
-.links a {
-  cursor: pointer;
-}
-
-/* Comments */
-.comment-count {
-  color: #666;
-}
-
-.tab-community {
-  color: #666;
-}
-
-.read_more {
-  font-size: 1.4rem;
-}
-
-.back-button {
-  padding-top: 30px;
-  max-width: 100px;
-  padding-left: 40px;
-  float: left;
-}
-
-/* Facebook Comments */
-#fb_comments_container {
-  margin: 30px;
-}
-
-.utterances {
-  max-width: unset;
-}
-
-/* Buttons */
-a.btn {
-  color: #868686;
-  font-weight: 400;
-}
-
-.btn {
-  display: inline-block;
-  position: relative;
-  outline: 0;
-  color: var(--post-color);
-  background: transparent;
-  font-size: 1.4rem;
-  text-align: center;
-  text-decoration: none;
-  cursor: pointer;
-  border: 1px solid var(--border-color);
-  white-space: nowrap;
-  font-weight: 400;
-  font-style: normal;
-  border-radius: 999em;
-  padding: 10px;
-}
-
-.btn:hover {
-  display: inline-block;
-  position: relative;
-  outline: 0px;
-  color: #464545;
-  background: transparent;
-  font-size: 1.4rem;
-  text-align: center;
-  text-decoration: none;
-  cursor: pointer;
-  border: 1px solid #464545;
-  white-space: nowrap;
-  font-weight: 400;
-  font-style: normal;
-  border-radius: 999em;
-}
-
-[role='back'] {
-  padding: 0.5em 1.25em;
-  line-height: 1.666em;
-}
-
-[role='home'] {
-  padding: 0.5em 1.25em;
-  line-height: 1.666em;
-}
-
-[role='navigation'] {
-  padding: 0.5em 1.25em;
-  line-height: 1.666em;
-}
-
-[role='tags'] {
-  padding: 6px 12px;
-}
-
-/* Portfolio */
-.cta {
-  padding-bottom: 1em;
-}
-
-.box-wrapper {
-  padding: 48px;
-  position: relative;
-  z-index: 0;
-}
-
-.box-image {
-  display: block;
-  background-color: #fff;
-  position: relative;
-  z-index: 1;
-  overflow: hidden;
-}
-
-.box-image img {
-  min-width: 100%;
-  box-shadow: #000;
-  overflow: hidden;
-  transition: box-shadow 0.3s ease;
-  object-fit: cover;
-  border-bottom: 0px;
-  display: block;
-}
-
-.box-image--right,
-.box-image--left {
-  margin-right: auto;
-  margin-left: auto;
-  width: calc(100% - 64px);
-  background-color: var(--bg-color);
-  max-width: 400px;
-  z-index: -1;
-}
-
-.box {
-  background-color: var(--bg-color);
-  padding: 32px;
-}
-
-.box--left,
-.box--right {
-  margin-top: -24px;
-}
-
-/* Menu */
-.menu {
-  float: right;
-  padding-top: 30px;
-}
-
-.menu .btn-down {
-  margin: 0px;
-}
-
-.menu .btn-down li {
-  list-style: none;
-  width: 100px;
-}
-
-.menu .btn-down li a {
-  display: inline-block;
-  position: relative;
-  padding: 0.5em 1.25em;
-  outline: 0;
-  color: var(--post-color);
-  background: transparent;
-  font-size: 1.4rem;
-  text-align: center;
-  text-decoration: none;
-  cursor: pointer;
-  border: 1px solid var(--border-color);
-  white-space: nowrap;
-  font-weight: 400;
-  font-style: normal;
-  border-radius: 999em;
-  margin-top: 5px;
-}
-
-.menu .btn-down li a:hover {
-  position: relative;
-  padding: 0.5em 1.25em;
-  outline: 0;
-  color: #fff;
-  background: #3cbd10;
-  font-size: 1.4rem;
-  text-align: center;
-  text-decoration: none;
-  cursor: pointer;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  white-space: nowrap;
-  font-weight: 400;
-  font-style: normal;
-  border-radius: 999em;
-  margin-top: 5px;
-}
-
-.menu .btn-down div {
-  position: absolute;
-  visibility: hidden;
-  width: 100px;
-  float: right;
-}
-
-.page_404 {
-  text-align: center;
-  padding-top: 50px;
-}
-
-.navbar-burger {
-  display: none;
-}
-
-#TableOfContents {
-  display: block;
-  background: transparent;
-}
-
-#TableOfContents ul {
-  list-style: none;
-  line-height: 1.9em;
-  margin: 0;
-}
-
-#TableOfContents > ul {
-  padding-left: 0;
-}
-
-#TableOfContents li a {
-  display: inherit;
-  color: var(--link-color);
-}
-
-#TableOfContents li a:hover {
-  display: inherit;
-}
-
-.alert {
-  padding: 1rem;
-  border-radius: 1 px;
-  border-style: solid;
-  border-color: var(--warning-alert-color);
-  border-radius: 0.25rem;
-  border-width: 2px;
-}
-
-.alert #indicator {
-  background-color: var(--warning-alert-color);
-  display: inline-block;
-  border-radius: 9999px;
-  padding: 0.5rem;
-  height: 1.5rem;
-  width: 2.5rem;
-  height: 2.5rem;
-  text-align: center;
-  color: var(--body-color);
-  font-weight: 800;
-  margin-right: 0.75rem;
-}
-
-@media screen and (min-width: 961px), print {
-  header {
-    border-bottom: 1px solid var(--border-color);
-  }
-
-  .nav__links li:not(:last-of-type) {
-    padding-right: 20px;
-  }
-
-  .sidebar {
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    position: fixed;
-    width: var(--sidebar-width);
-  }
-
-  .sidebar__content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    flex-grow: 1;
-  }
-
-  .navbar {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-  }
-
-  .nav__list {
-    display: flex;
-    flex: 1;
-    justify-content: space-between;
-    align-items: center;
-    min-height: 0;
-  }
-
-  .wrapper {
-    display: flex;
-  }
-
-  .footer--base {
-    display: none;
-  }
-
-  .box {
-    padding: 48px;
-    box-shadow: 0 0 48px var(--border-color);
-    background-color: #fff;
-    border-radius: 0.5em;
-  }
-
-  .box-wrapper::before {
-    border: 1px solid var(--border-color);
-    content: '';
-    z-index: -1;
-    position: absolute;
-    top: 10%;
-    left: 10%;
-    bottom: 10%;
-    right: 10%;
-    background: transparent;
-    border-radius: 0.5em;
-  }
-
-  .box-image--right,
-  .box-image--left {
-    width: 60%;
-    object-fit: contain;
-    max-width: none;
-  }
-
-  .box-image--right {
-    margin-right: 0;
-    margin-left: auto;
-    border-top-right-radius: 0.5em;
-    border-top-left-radius: 0.5em;
-    border-bottom-right-radius: 0.5em;
-  }
-
-  .box-image--left {
-    margin-right: auto;
-    margin-left: 0;
-    border-top-left-radius: 0.5em;
-    border-top-right-radius: 0.5em;
-    border-bottom-left-radius: 0.5em;
-  }
-
-  .box--left,
-  .box--right {
-    width: 60%;
-    margin-top: -48px;
-    z-index: 3;
-    background: var(--blockquote-border-color);
-  }
-
-  .box--right {
-    margin-left: auto;
-  }
-}
-
-@media screen and (max-width: 960px) {
-  aside {
-    width: 100%;
-  }
-
-  .sidebar {
-    width: 100%;
-    border-right: none;
-    z-index: 1;
-    height: auto;
-    min-height: auto;
-  }
-
-  .sidebar .logo-title {
-    padding-top: 120px;
-  }
-
-  .sidebar .logo-title .title img {
-    width: 100px;
-    height: 100px;
-  }
-
-  .sidebar .logo-title .title h3 {
-    font-size: 2.2rem;
-  }
-
-  header {
-    width: 100%;
-  }
-
-  .post-title h3 {
-    line-height: 1.6;
-  }
-
-  main {
-    width: 100%;
-  }
-
-  .content {
-    z-index: 2;
-  }
-
-  .post figure.right {
-    float: unset;
-    max-width: 100%;
-    margin: 0;
-  }
-
-  .post figure.left {
-    float: unset;
-    max-width: 100%;
-    margin: 0;
-  }
-
-  .footer--sidebar {
-    display: none;
-  }
-
-  .share {
-    display: grid;
-  }
-
-  nav {
-    display: none;
-  }
-
-  header .nav__list {
-    background-color: var(--secondary-bg-color);
-    box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
-    padding: 0.5rem 0;
-    width: 100%;
-    margin-top: 0px;
-  }
-
-  header nav.is-active {
-    display: block;
-  }
-
-  header .nav__list li {
-    display: block;
-    flex-grow: 0;
-    flex-shrink: 0;
-    line-height: 2.5;
-    padding: 0.5rem 0.75rem;
-    position: relative;
-    text-transform: uppercase;
-    text-align: center;
-    font-size: 1.6rem;
-  }
-
-  header .nav__list ul {
-    padding: inherit;
-  }
-
-  header .nav__list a.current {
-    border-bottom: none;
-  }
-
-  .navbar-burger {
-    cursor: pointer;
-    display: block;
-    height: 3.25rem;
-    position: relative;
-    width: 3.25rem;
-    margin-left: auto;
-  }
-
-  .navbar-burger span {
-    background-color: var(--heading-color);
-    display: block;
-    height: 1px;
-    left: calc(50% - 8px);
-    position: absolute;
-    transform-origin: center;
-    transition-duration: 86ms;
-    transition-property: background-color, opacity, transform;
-    transition-timing-function: ease-out;
-    width: 16px;
-  }
-
-  .navbar-burger span:nth-child(1) {
-    top: calc(50% - 6px);
-  }
-
-  .navbar-burger span:nth-child(2) {
-    top: calc(50% - 1px);
-  }
-
-  .navbar-burger span:nth-child(3) {
-    top: calc(50% + 4px);
-  }
-
-  .list-with-title .listing .listing-post .post-time {
-    max-width: 20%;
-  }
-
-  .list-with-title .listing .listing-post a {
-    width: 80%;
-  }
-
-  .box--right,
-  .box--left {
-    border-bottom: 1px solid var(--border-color);
-  }
-
-  .box-image--left,
-  .box-image--right {
-    padding: 32px 32px 0px 32px;
-    max-width: inherit;
-  }
-
-  .box-wrapper {
-    padding-left: 0px;
-    padding-right: 0px;
-    padding-bottom: 0px;
-    padding-top: 48px;
-  }
-
-  .triangle {
-    display: none;
-  }
-
-  .sl-nav {
-    padding-right: inherit;
-  }
-
-  .sl-nav li .dropdown {
-    right: inherit;
-    position: relative;
-    top: inherit;
-    padding-right: 0px;
-    background: none;
-    border-color: inherit;
-    box-shadow: none;
-  }
-
-  .sl-nav li .dropdown li {
-    text-align: center;
-    padding: 0.5rem 0.75rem;
-  }
-
-  .sl-nav li .dropdown li span {
-    padding-left: initial;
-  }
-}
-
-/* Medium zoom */
-.medium-zoom-overlay {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  opacity: 0;
-  transition: opacity 300ms;
-  will-change: opacity;
-  background: var(--bg-color);
-}
-
-.medium-zoom--opened .medium-zoom-overlay {
-  cursor: pointer;
-  cursor: zoom-out;
-  opacity: 1;
-}
-
-.medium-zoom-image {
-  cursor: pointer;
-  cursor: zoom-in;
-  /*
-      The `transition` is marked as "!important" for the animation to happen
-      even though it's overriden by another inline `transition` style attribute.
-      This is problematic with frameworks that generate inline styles on their
-      images (e.g. Gatsby).
-      See https://github.com/francoischalifour/medium-zoom/issues/110
-     */
-  transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1) !important;
-  z-index: 100;
-}
-
-.medium-zoom-image--hidden {
-  visibility: hidden;
-}
-
-.medium-zoom-image--opened {
-  position: relative;
-  cursor: pointer;
-  cursor: zoom-out;
-  will-change: transform;
-}
-
-@media print {
-  header {
-    display: none;
-  }
-}
-
-/* (CONTACT) FORM */
-
-.contact-form {
-  margin-top: 30px;
-}
-.form-style {
-  width: 100%;
-}
-.form-style ul {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-.form-style ul li {
-  display: block;
-  margin-bottom: 10px;
-  min-height: 35px;
-}
-.form-style ul li .field-style {
-  box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  font-size: 1.4rem;
-  padding: 8px;
-  outline: none;
-  background-color: var(--bg-color);
-  border: 1px solid var(--form-border-color);
-  color: var(--body-color);
-  font-family: inherit;
-}
-.form-style ul li .field-style:focus {
-  box-shadow: 0 0 5px;
-  border: 1px solid;
-}
-.form-style ul li .field-split {
-  width: 49%;
-}
-.form-style ul li .field-full {
-  width: 100%;
-}
-.form-style ul li input.align-left {
-  float: left;
-}
-.form-style ul li input.align-right {
-  float: right;
-}
-.form-style ul li textarea {
-  background-color: var(--bg-color);
-  border: 1px solid var(--form-border-color);
-  color: var(--body-color);
-  width: 100%;
-  height: auto;
-}
-.form-style ul li input[type='button'],
-.form-style ul li input[type='submit'] {
-  background-color: var(--bg-color);
-  border: 1px solid var(--form-border-color);
-  display: inline-block;
-  cursor: pointer;
-  color: var(--body-color);
-  text-decoration: none;
-  width: 100%;
-}
-.form-style ul li input[type='button']:hover,
-.form-style ul li input[type='submit']:hover {
-  background-color: var(--bg-color);
-  border: 1px solid var(--form-button-hover-border-color);
-}
-
-/* (CONTACT) FORM END */
diff --git a/assets/css/style.rtl.css b/assets/css/style.rtl.css
deleted file mode 100644
index 9ab54b2..0000000
--- a/assets/css/style.rtl.css
+++ /dev/null
@@ -1,128 +0,0 @@
-@charset "UTF-8";
-
-body {
-  font-family: 'Tajawal', sans-serif;
-  font-size: 1.5rem;
-}
-
-blockquote {
-  border-right: 0.25em solid var(--blockquote-border-color);
-  border-left: inherit;
-}
-
-.tag,
-.category {
-  margin: 5px 0 5px 8px;
-}
-
-.info i {
-  margin-left: 5px;
-  margin-right: inherit;
-}
-
-.sidebar {
-  right: 0;
-  border-left: 1px solid var(--border-color);
-  border-right: inherit;
-}
-
-.sidebar .social-links i {
-  margin-left: 3px;
-  margin-right: inherit;
-}
-
-.sidebar .logo-title .title h3 {
-  text-transform: capitalize;
-  letter-spacing: 1.5px;
-}
-
-.post .post-title h1 {
-  text-transform: capitalize;
-}
-
-.post .post-title h3 {
-  text-transform: capitalize;
-}
-
-.post .post-footer .info .separator a {
-  margin-left: 0.2em;
-  margin-right: inherit;
-}
-.post .post-footer .meta .info .date {
-  margin-left: 10px;
-  margin-right: 5px;
-}
-
-.post figure.right {
-  float: left;
-  margin-right: 1.5em;
-  margin-left: inherit;
-}
-.post figure.left {
-  float: right;
-  margin-left: 1.5em;
-  margin-right: inherit;
-}
-
-.info span {
-  margin-left: 0.5em;
-  margin-right: inherit;
-}
-
-.post .post-footer .meta i {
-  margin-left: 6px;
-  margin-right: inherit;
-}
-
-.post .post-footer .tags ul li {
-  padding-left: 5px;
-  padding-right: inherit;
-}
-
-.pagination .pre {
-  float: right;
-}
-.pagination .next {
-  float: left;
-}
-
-.list-with-title .listing .listing-post .post-time {
-  float: left;
-  text-align: left;
-}
-
-.sl-nav li .dropdown {
-  padding-right: 0px;
-}
-
-.triangle {
-  display: none;
-}
-
-@media screen and (min-width: 961px), print {
-  header {
-    position: fixed;
-    left: 0;
-    right: auto;
-  }
-  header .nav__list li {
-    padding-left: 20px;
-  }
-  header .nav__list li:not(:last-of-type) {
-    padding-right: inherit;
-  }
-  .triangle {
-    display: inline-block;
-  }
-}
-
-@media (min-width: 1921px) {
-  .sidebar {
-    padding-right: 17%;
-    padding-left: 3%;
-  }
-  .content {
-    padding-right: inherit;
-    padding-left: 20%;
-  }
-}
diff --git a/assets/js/anatole-header.js b/assets/js/anatole-header.js
index 561e2ce..3780a06 100644
--- a/assets/js/anatole-header.js
+++ b/assets/js/anatole-header.js
@@ -1,18 +1,11 @@
-document.addEventListener('DOMContentLoaded', function () {
-  // Get all "navbar-burger" elements
-  var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
-  var nav = document.querySelector('nav');
-  // Check if there are any navbar burgers
-  if ($navbarBurgers.length > 0) {
-    // Add a click event on each of them
-    $navbarBurgers.forEach(function ($el) {
-      $el.addEventListener('click', function () {
-        var target = $el.dataset.target;
-        var $target = document.getElementById(target);
-        $el.classList.toggle('is-active');
-        $target.classList.toggle('is-active');
-        nav.classList.toggle('is-active');
-      });
+document.addEventListener('DOMContentLoaded', () => {
+  const navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+  const nav = document.querySelector('nav');
+  if (navbarBurgers.length < 1) return;
+  navbarBurgers.forEach((navbarBurger) => {
+    navbarBurger.addEventListener('click', () => {
+      navbarBurger.classList.toggle('nav--active');
+      nav.classList.toggle('nav--active');
     });
-  }
+  });
 });
diff --git a/assets/js/anatole-theme-switcher.js b/assets/js/anatole-theme-switcher.js
index 2df4e05..cccb905 100644
--- a/assets/js/anatole-theme-switcher.js
+++ b/assets/js/anatole-theme-switcher.js
@@ -1,58 +1,53 @@
-// initialize default value
-function getTheme() {
-  return localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
-}
+const getStoredThemeStyle = () => localStorage.getItem('theme');
 
-function setTheme(style) {
-  document.documentElement.setAttribute('data-theme', style);
+const setThemeClass = (style) => {
+  const body = document.body;
+  const prevTheme = [...body.classList].find((c) => c.match(/theme--(light|dark)/));
+  if (!prevTheme) return;
+  body.classList.remove(prevTheme);
+  body.classList.add(`theme--${style}`);
+};
+
+const setThemeStyle = (style) => {
   localStorage.setItem('theme', style);
-}
+  setThemeClass(style);
+};
 
-function init() {
-  // initialize default value
-  const theme = getTheme();
+const switchTheme = () => {
+  const currThemeStyle = getStoredThemeStyle();
+  switch (currThemeStyle) {
+    case 'light':
+      setThemeStyle('dark');
+      break;
+    case 'dark':
+      setThemeStyle('light');
+      break;
+    default:
+      setThemeStyle('light');
+      break;
+  }
+};
 
-  // check if a preferred color theme is set for users that have never been to our site
+const initTheme = () => {
+  const currThemeStyle = getStoredThemeStyle();
+  if (currThemeStyle) {
+    setThemeStyle(currThemeStyle);
+    return;
+  }
   const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-  if (theme === null) {
-    if (userPrefersDark) {
-      setTheme('dark');
-    } else if (!document.documentElement.getAttribute('data-theme')) {
-      setTheme('light');
-    } else {
-      setTheme(document.documentElement.getAttribute('data-theme'));
-    }
-  } else {
-    // load a stored theme
-    if (theme === 'light') {
-      document.documentElement.setAttribute('data-theme', 'light');
-    } else {
-      document.documentElement.setAttribute('data-theme', 'dark');
-    }
-  }
-}
+  if (!userPrefersDark) return;
+  setThemeStyle('dark');
+};
 
-// switch themes
-function switchTheme() {
-  const theme = getTheme();
-  if (theme === 'light') {
-    setTheme('dark');
-  } else {
-    setTheme('light');
-  }
-}
-
-// Manual Switch
 document.addEventListener(
   'DOMContentLoaded',
-  function () {
-    const themeSwitcher = document.querySelector('.theme-switch');
+  () => {
+    const themeSwitcher = document.querySelector('.themeswitch');
     themeSwitcher.addEventListener('click', switchTheme, false);
   },
   false,
 );
 
-// Automatic Switching
 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', switchTheme, false);
 
-init();
+document.addEventListener('DOMContentLoaded', () => initTheme());
diff --git a/assets/js/medium-zoom.js b/assets/js/medium-zoom.js
index 7a9a878..33fc200 100644
--- a/assets/js/medium-zoom.js
+++ b/assets/js/medium-zoom.js
@@ -504,4 +504,4 @@
   return mediumZoom;
 });
 
-mediumZoom(document.querySelectorAll('div.post-content img'));
+mediumZoom(document.querySelectorAll('div.post__content img'));
diff --git a/assets/scss/anatole.rtl.scss b/assets/scss/anatole.rtl.scss
new file mode 100644
index 0000000..f057af5
--- /dev/null
+++ b/assets/scss/anatole.rtl.scss
@@ -0,0 +1,4 @@
+$content-ratio: {{ .Site.Params.contentratio | default 0.6 }};
+$text-direction: "rtl";
+
+@import 'main.scss';
\ No newline at end of file
diff --git a/assets/scss/anatole.scss b/assets/scss/anatole.scss
new file mode 100644
index 0000000..1cbab65
--- /dev/null
+++ b/assets/scss/anatole.scss
@@ -0,0 +1,4 @@
+$content-ratio: {{ .Site.Params.contentratio | default 0.6 }};
+$text-direction: "ltr";
+
+@import 'main.scss';
\ No newline at end of file
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
new file mode 100644
index 0000000..ff403f3
--- /dev/null
+++ b/assets/scss/main.scss
@@ -0,0 +1,27 @@
+@import './modules/variables';
+@import './modules/config';
+@import './modules/color_theme';
+@import './partials/hugo';
+@import './partials/base';
+@import './partials/layout/html';
+@import './partials/layout/body';
+@import './partials/layout/header';
+@import './partials/layout/nav';
+@import './partials/components/animated';
+@import './partials/components/category';
+@import './partials/components/tag';
+@import './partials/components/wrapper';
+@import './partials/components/sidebar';
+@import './partials/components/footer';
+@import './partials/components/pagination';
+@import './partials/components/navbarburger';
+@import './partials/components/comment';
+@import './partials/components/languageswitch';
+@import './partials/components/post';
+@import './partials/components/alert';
+@import './partials/components/portfolio';
+@import './partials/components/page404';
+@import './partials/components/archive';
+@import './partials/vendors/mediumzoom';
+@import './partials/vendors/contactform';
+@import './partials/vendors/tableofcontents';
diff --git a/assets/scss/modules/_color_theme.scss b/assets/scss/modules/_color_theme.scss
new file mode 100644
index 0000000..5485862
--- /dev/null
+++ b/assets/scss/modules/_color_theme.scss
@@ -0,0 +1,46 @@
+$themes: (
+  light: (
+    accent: $accent--lightmode,
+    primary: $primary--lightmode,
+    primary-light: $primary-light--lightmode,
+    primary-lighter: $primary-lighter--lightmode,
+    info: $info,
+    shadow: $shadow--lightmode,
+    border: 1px solid $primary-lighter--lightmode,
+    alert: $alert,
+  ),
+  dark: (
+    accent: $accent--darkmode,
+    primary: $primary--darkmode,
+    primary-light: $primary-light--darkmode,
+    primary-lighter: $primary-lighter--darkmode,
+    info: $info,
+    shadow: $shadow--darkmode,
+    border: 1px solid $primary-lighter--darkmode,
+    alert: $alert,
+  ),
+);
+
+$theme-map: ();
+
+@mixin themed() {
+  @each $theme, $map in $themes {
+    .theme--#{$theme} & {
+      @each $key, $submap in $map {
+        $value: map-get(map-get($themes, $theme), '#{$key}');
+        $theme-map: map-merge(
+          $theme-map,
+          (
+            $key: $value,
+          )
+        ) !global;
+      }
+      @content;
+      $theme-map: ();
+    }
+  }
+}
+
+@function t($key) {
+  @return map-get($theme-map, $key);
+}
diff --git a/assets/scss/modules/_config.scss b/assets/scss/modules/_config.scss
new file mode 100644
index 0000000..92435d3
--- /dev/null
+++ b/assets/scss/modules/_config.scss
@@ -0,0 +1,39 @@
+@mixin desktop {
+  @media screen and (min-width: 961px) {
+    @content;
+  }
+}
+
+@mixin widescreen {
+  @media screen and (min-width: 1921px) {
+    @content;
+  }
+}
+
+@mixin print {
+  @media print {
+    @content;
+  }
+}
+
+@mixin desktop_and_print {
+  @include desktop {
+    @content;
+  }
+
+  @include print {
+    @content;
+  }
+}
+
+@mixin ltr {
+  @if $text-direction == ltr {
+    @content;
+  }
+}
+
+@mixin rtl {
+  @if $text-direction == rtl {
+    @content;
+  }
+}
diff --git a/assets/scss/modules/_variables.scss b/assets/scss/modules/_variables.scss
new file mode 100644
index 0000000..6b74842
--- /dev/null
+++ b/assets/scss/modules/_variables.scss
@@ -0,0 +1,23 @@
+$accent--lightmode: #fff;
+$primary--lightmode: #464646;
+$primary-light--lightmode: #9f9f9f;
+$primary-lighter--lightmode: #eeeeee;
+$shadow--lightmode: 0 8px 16px rgba(10, 10, 10, 0.1);
+
+$accent--darkmode: #152028;
+$primary--darkmode: #eeeeee;
+$primary-light--darkmode: #9f9f9f;
+$primary-lighter--darkmode: #464646;
+$shadow--darkmode: 0 8px 16px rgba(226, 226, 226, 0.1);
+
+$alert: #ffc107;
+$info: #0366d7;
+
+$thumbnail-height: 15em;
+$body-max-width: 1920px;
+
+$sidebar-ratio: calc(1 - #{$content-ratio});
+$content-max-width: calc(#{$body-max-width} * #{$content-ratio});
+$sidebar-max-width: calc(#{$body-max-width} - #{$content-max-width});
+$content-width: calc(#{$content-ratio} * 100%);
+$sidebar-width: calc(#{$sidebar-ratio} * 100%);
diff --git a/assets/scss/partials/_base.scss b/assets/scss/partials/_base.scss
new file mode 100644
index 0000000..1d74670
--- /dev/null
+++ b/assets/scss/partials/_base.scss
@@ -0,0 +1,13 @@
+@charset "UTF-8";
+
+* {
+  @include ltr {
+    font-family: 'PingHei', 'PingFang SC', 'Helvetica Neue', 'Work Sans', 'Hiragino Sans GB', sans-serif;
+    font-size: 1.6rem;
+  }
+
+  @include rtl {
+    font-family: 'Tajawal', sans-serif;
+    font-size: 1.5rem;
+  }
+}
diff --git a/assets/scss/partials/_hugo.scss b/assets/scss/partials/_hugo.scss
new file mode 100644
index 0000000..d46923d
--- /dev/null
+++ b/assets/scss/partials/_hugo.scss
@@ -0,0 +1,33 @@
+a {
+  text-decoration: none;
+
+  @include themed() {
+    color: t('primary');
+  }
+
+  &:hover {
+    @include themed() {
+      color: t('info');
+    }
+  }
+}
+
+blockquote {
+  padding: 0 1em;
+
+  @include themed() {
+    color: t('primary');
+
+    @include ltr {
+      border-left: t('border');
+    }
+
+    @include rtl {
+      border-right: t('border');
+    }
+  }
+}
+
+p {
+  line-height: 1.9em;
+}
diff --git a/assets/scss/partials/components/_alert.scss b/assets/scss/partials/components/_alert.scss
new file mode 100644
index 0000000..5612969
--- /dev/null
+++ b/assets/scss/partials/components/_alert.scss
@@ -0,0 +1,27 @@
+.alert {
+  padding: 1rem;
+  border-style: solid;
+  border-radius: 0.25rem;
+  border-width: 2px;
+  margin-top: 1rem;
+
+  @include themed() {
+    border-color: t('alert');
+  }
+
+  &__indicator {
+    display: inline-block;
+    border-radius: 9999px;
+    padding: 0.5rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    text-align: center;
+    font-weight: 800;
+    margin-right: 0.75rem;
+
+    @include themed() {
+      color: t('accent');
+      background-color: t('alert');
+    }
+  }
+}
diff --git a/assets/scss/partials/components/_animated.scss b/assets/scss/partials/components/_animated.scss
new file mode 100644
index 0000000..3ce3af4
--- /dev/null
+++ b/assets/scss/partials/components/_animated.scss
@@ -0,0 +1,52 @@
+.animated {
+  transition: top 0.8s linear;
+  animation-duration: 1s;
+  -webkit-animation-duration: 1s;
+  -moz-animation-duration: 1s;
+  -ms-animation-duration: 1s;
+  -o-animation-duration: 1s;
+  -webkit-animation-name: fadeInDown;
+  -moz-animation-name: fadeInDown;
+  -o-animation-name: fadeInDown;
+  animation-name: fadeInDown;
+
+  @-webkit-keyframes fadeInDown {
+    0% {
+      -webkit-transform: translateY(-20px);
+    }
+
+    100% {
+      -webkit-transform: translateY(0);
+    }
+  }
+
+  @-moz-keyframes fadeInDown {
+    0% {
+      -moz-transform: translateY(-20px);
+    }
+
+    100% {
+      -moz-transform: translateY(0);
+    }
+  }
+
+  @-o-keyframes fadeInDown {
+    0% {
+      -o-transform: translateY(-20px);
+    }
+
+    100% {
+      -o-transform: translateY(0);
+    }
+  }
+
+  @keyframes fadeInDown {
+    0% {
+      transform: translateY(-20px);
+    }
+
+    100% {
+      transform: translateY(0);
+    }
+  }
+}
diff --git a/assets/scss/partials/components/_archive.scss b/assets/scss/partials/components/_archive.scss
new file mode 100644
index 0000000..7a58f63
--- /dev/null
+++ b/assets/scss/partials/components/_archive.scss
@@ -0,0 +1,46 @@
+.archive {
+  margin: 30px;
+
+  &__heading {
+    font-size: 2.4rem;
+    font-weight: 600;
+    line-height: 2.2em;
+
+    @include themed() {
+      color: t('primary');
+    }
+  }
+
+  &__list {
+    padding: 0;
+
+    &-item {
+      display: flex;
+      justify-content: space-between;
+      padding-bottom: 5px;
+      list-style-type: none;
+    }
+
+    &-date {
+      text-align: right;
+
+      @include themed() {
+        color: t('primary-light');
+      }
+    }
+
+    &-title {
+      display: inline-block;
+      flex: 0.96;
+
+      @include themed() {
+        color: t('primary');
+      }
+      &:hover {
+        @include themed() {
+          color: t('info');
+        }
+      }
+    }
+  }
+}
diff --git a/assets/scss/partials/components/_category.scss b/assets/scss/partials/components/_category.scss
new file mode 100644
index 0000000..6ac891f
--- /dev/null
+++ b/assets/scss/partials/components/_category.scss
@@ -0,0 +1,20 @@
+.category {
+  padding: 4px 6px;
+  border-radius: 2px;
+  display: inline-block;
+  font-size: 1.4rem;
+
+  @include themed() {
+    border: t('border');
+    background-color: t('primary-lighter');
+    color: t('primary') !important;
+  }
+
+  @include ltr {
+    margin: 5px 8px 5px 0;
+  }
+
+  @include rtl {
+    margin: 5px 0 5px 8px;
+  }
+}
diff --git a/assets/scss/partials/components/_comment.scss b/assets/scss/partials/components/_comment.scss
new file mode 100644
index 0000000..81912cf
--- /dev/null
+++ b/assets/scss/partials/components/_comment.scss
@@ -0,0 +1,6 @@
+.comment {
+  margin: 30px;
+  .utterances {
+    max-width: unset;
+  }
+}
diff --git a/assets/scss/partials/components/_footer.scss b/assets/scss/partials/components/_footer.scss
new file mode 100644
index 0000000..91d8efc
--- /dev/null
+++ b/assets/scss/partials/components/_footer.scss
@@ -0,0 +1,45 @@
+.footer {
+  $font-size-footer: 1.4rem;
+
+  text-align: center;
+  margin: 0 auto;
+  bottom: 0;
+  width: 100%;
+  padding-bottom: 20px;
+  flex: 0;
+  position: relative;
+
+  &__list {
+    list-style: none;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  &__item {
+    font-size: $font-size-footer;
+
+    &:not(:first-of-type)::before {
+      content: '\00B7';
+      padding: 4px;
+    }
+
+    a {
+      font-size: $font-size-footer;
+    }
+  }
+
+  &__sidebar {
+    display: none;
+
+    @include desktop_and_print {
+      display: inline-block;
+    }
+  }
+
+  &__base {
+    @include desktop_and_print {
+      display: none;
+    }
+  }
+}
diff --git a/assets/scss/partials/components/_languageswitch.scss b/assets/scss/partials/components/_languageswitch.scss
new file mode 100644
index 0000000..4c60bba
--- /dev/null
+++ b/assets/scss/partials/components/_languageswitch.scss
@@ -0,0 +1,81 @@
+.languageswitch {
+  position: relative;
+
+  &__label {
+    cursor: pointer;
+    white-space: nowrap;
+  }
+
+  &__list {
+    display: none;
+    list-style: none;
+    padding: 0;
+    position: relative;
+
+    @include desktop {
+      border-radius: 5px;
+      position: absolute;
+      top: 32px;
+
+      @include themed() {
+        background: t('primary-lighter');
+        box-shadow: t('shadow');
+      }
+    }
+
+    &-item {
+      background: transparent;
+      display: block;
+      line-height: 1;
+      bottom: 0;
+      text-align: center;
+      white-space: nowrap;
+      padding-top: 24px;
+
+      @include themed() {
+        color: t('primary');
+      }
+
+      @include desktop {
+        padding: 12px;
+      }
+    }
+  }
+
+  &__triangle {
+    display: none;
+
+    &::before {
+      content: '';
+      border-radius: 2px 0px 0px 0px;
+      height: 14px;
+      left: calc(50% / 2);
+      overflow: hidden;
+      position: absolute;
+      transform: rotate(45deg) translateY(0px) translatex(10px);
+      width: 14px;
+
+      @include themed() {
+        background: t('primary-lighter');
+        box-shadow: t('shadow');
+        border-color: t('primary-lighter');
+      }
+    }
+  }
+
+  &__picker {
+    &:checked {
+      ~ .languageswitch {
+        &__list {
+          display: block;
+        }
+
+        &__triangle {
+          @include desktop {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/assets/scss/partials/components/_navbarburger.scss b/assets/scss/partials/components/_navbarburger.scss
new file mode 100644
index 0000000..9708482
--- /dev/null
+++ b/assets/scss/partials/components/_navbarburger.scss
@@ -0,0 +1,40 @@
+.navbar-burger {
+  cursor: pointer;
+  display: block;
+  height: 3.25rem;
+  position: relative;
+  width: 3.25rem;
+  margin-left: auto;
+
+  &__line {
+    display: block;
+    height: 1px;
+    left: calc(50% - 8px);
+    position: absolute;
+    transform-origin: center;
+    transition-duration: 86ms;
+    transition-property: background-color, opacity, transform;
+    transition-timing-function: ease-out;
+    width: 16px;
+
+    @include themed() {
+      background-color: t('primary');
+    }
+
+    &:nth-child(1) {
+      top: calc(50% - 6px);
+    }
+
+    &:nth-child(2) {
+      top: calc(50% - 1px);
+    }
+
+    &:nth-child(3) {
+      top: calc(50% + 4px);
+    }
+  }
+
+  @include desktop {
+    display: none;
+  }
+}
diff --git a/assets/scss/partials/components/_page404.scss b/assets/scss/partials/components/_page404.scss
new file mode 100644
index 0000000..7f38ac2
--- /dev/null
+++ b/assets/scss/partials/components/_page404.scss
@@ -0,0 +1,4 @@
+.page_404 {
+  text-align: center;
+  padding-top: 50px;
+}
diff --git a/assets/scss/partials/components/_pagination.scss b/assets/scss/partials/components/_pagination.scss
new file mode 100644
index 0000000..9b113b5
--- /dev/null
+++ b/assets/scss/partials/components/_pagination.scss
@@ -0,0 +1,23 @@
+.pagination {
+  margin: 30px;
+  padding: 0px 0 56px 0;
+  text-align: center;
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    height: 13px;
+
+    &-item {
+      margin: 0 2px 0 2px;
+      display: inline;
+      line-height: 1;
+      text-decoration: none;
+
+      @include themed() {
+        color: t('primary');
+      }
+    }
+  }
+}
diff --git a/assets/scss/partials/components/_portfolio.scss b/assets/scss/partials/components/_portfolio.scss
new file mode 100644
index 0000000..884ac56
--- /dev/null
+++ b/assets/scss/partials/components/_portfolio.scss
@@ -0,0 +1,172 @@
+.portfolio {
+  position: relative;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-bottom: 0px;
+  padding-top: 48px;
+
+  @include desktop_and_print {
+    padding: 48px;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    bottom: 10%;
+    right: 10%;
+    background: transparent;
+    border-radius: 0.5em;
+
+    @include desktop_and_print {
+      @include themed() {
+        border: t('border');
+      }
+    }
+  }
+
+  &__title {
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-size: 2.6rem;
+    line-height: 1;
+    font-weight: 600;
+  }
+
+  &__image {
+    max-width: 100%;
+    min-width: 100%;
+    box-shadow: t('shadow');
+    overflow: hidden;
+    transition: box-shadow 0.3s ease;
+    object-fit: cover;
+    border-bottom: 0px;
+    display: block;
+    position: relative;
+
+    &-wrapper {
+      display: block;
+      background-color: #fff;
+      position: relative;
+      overflow: hidden;
+
+      &--right,
+      &--left {
+        margin-right: auto;
+        margin-left: auto;
+        width: calc(100% - 64px);
+        padding: 32px 32px 0px 32px;
+        max-width: inherit;
+
+        @include themed() {
+          background-color: t('accent');
+        }
+
+        @include desktop_and_print {
+          width: 60%;
+          object-fit: contain;
+          max-width: none;
+          border-radius: 0.5em;
+          padding: 0;
+        }
+      }
+
+      &--left {
+        @include desktop_and_print {
+          margin-right: auto;
+          margin-left: 0;
+        }
+      }
+
+      &--right {
+        @include desktop_and_print {
+          margin-right: 0;
+          margin-left: auto;
+        }
+      }
+    }
+  }
+
+  &__description {
+    padding: 32px;
+    position: relative;
+
+    @include themed() {
+      background-color: t('accent');
+    }
+
+    @include desktop_and_print {
+      padding: 48px;
+      border-radius: 0.5em;
+
+      @include themed() {
+        box-shadow: t('shadow');
+      }
+    }
+
+    &--left,
+    &--right {
+      margin-top: -24px;
+
+      @include themed() {
+        border-bottom: t('border');
+      }
+
+      @include desktop_and_print {
+        @include themed() {
+          background: t('primary-lighter');
+        }
+        border-bottom: 0px;
+        width: 60%;
+        margin-top: -48px;
+      }
+    }
+
+    &--right {
+      @include desktop_and_print {
+        margin-left: auto;
+      }
+    }
+  }
+
+  &__button {
+    font-weight: 400;
+    display: inline-block;
+    position: relative;
+    outline: 0;
+    background: transparent;
+
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    white-space: nowrap;
+    font-style: normal;
+    border-radius: 999em;
+    padding: 10px;
+
+    @include themed() {
+      border: 1px solid t('primary-light');
+      color: t('info');
+    }
+
+    &:hover {
+      display: inline-block;
+      position: relative;
+      outline: 0px;
+      background: transparent;
+
+      text-align: center;
+      text-decoration: none;
+      cursor: pointer;
+      white-space: nowrap;
+      font-weight: 400;
+      font-style: normal;
+      border-radius: 999em;
+    }
+
+    &-wrapper {
+      padding-bottom: 1em;
+    }
+  }
+}
diff --git a/assets/scss/partials/components/_post.scss b/assets/scss/partials/components/_post.scss
new file mode 100644
index 0000000..5ac89be
--- /dev/null
+++ b/assets/scss/partials/components/_post.scss
@@ -0,0 +1,219 @@
+.post {
+  margin: 30px;
+
+  @include themed() {
+    background-color: t('accent');
+  }
+
+  &__meta {
+    display: flex;
+    list-style: none;
+    padding: 0;
+
+    &-item {
+      &:not(:last-child) {
+        margin-right: 1.25rem;
+      }
+    }
+
+    &-icon {
+      @include ltr {
+        margin-right: 2px;
+      }
+
+      @include rtl {
+        margin-left: 2px;
+      }
+    }
+
+    &-text {
+      &:not(:last-child) {
+        @include ltr {
+          margin-right: 4px;
+        }
+
+        @include rtl {
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+
+  &__thumbnail {
+    width: 100%;
+    height: $thumbnail-height;
+    object-fit: cover;
+    display: block;
+
+    &-wrapper {
+      border-radius: 2px;
+      width: 100%;
+      margin-bottom: 1em;
+      overflow: hidden;
+      transition: box-shadow 0.3s ease;
+
+      @include themed() {
+        box-shadow: t('shadow');
+      }
+    }
+  }
+
+  &__content {
+    a {
+      @include themed() {
+        color: t('info');
+      }
+    }
+
+    code {
+      font-family: monospace;
+      padding: 0 2px;
+
+      @include themed() {
+        background-color: t('primary-lighter');
+        border: 1px solid t('primary-lighter');
+        border-radius: 2px;
+      }
+    }
+
+    pre {
+      padding: 5px;
+      overflow-x: auto;
+
+      @include themed() {
+        background-color: t('primary-lighter');
+      }
+    }
+
+    h1 {
+      $font-size-h1: 3.6rem;
+
+      font-size: $font-size-h1;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      line-height: 1;
+
+      a {
+        font-size: $font-size-h1;
+
+        @include themed() {
+          color: t('primary');
+        }
+      }
+    }
+
+    h2 {
+      $font-size-h2: 2.4rem;
+
+      font-size: $font-size-h2;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      line-height: 1;
+
+      a {
+        font-size: $font-size-h2;
+
+        @include themed() {
+          color: t('primary');
+        }
+      }
+    }
+
+    h3 {
+      $font-size-h3: 2rem;
+
+      font-size: $font-size-h3;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      line-height: 1;
+
+      a {
+        font-size: $font-size-h3;
+
+        @include themed() {
+          color: t('primary');
+        }
+      }
+    }
+
+    ul,
+    ol {
+      line-height: 1.9em;
+      font-weight: 400;
+    }
+
+    img {
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+      max-width: 100%;
+    }
+
+    figure {
+      max-width: 100%;
+      height: auto;
+      margin: 0;
+      text-align: center;
+
+      &.big {
+        max-width: 100vw;
+      }
+
+      &.right {
+        @include desktop {
+          max-width: 50%;
+
+          @include ltr {
+            float: right;
+            margin-left: 1.5em;
+          }
+
+          @include rtl {
+            float: left;
+            margin-right: 1.5em;
+          }
+        }
+      }
+
+      &.left {
+        @include desktop {
+          max-width: 50%;
+
+          @include ltr {
+            float: left;
+            margin-right: 1.5em;
+          }
+
+          @include rtl {
+            float: right;
+            margin-left: 1.5em;
+          }
+        }
+      }
+    }
+  }
+
+  &__footer {
+    padding: 12px 0;
+
+    @include themed() {
+      border-bottom: t('border');
+    }
+
+    &-date {
+      font-size: 1.4rem;
+
+      @include ltr {
+        margin-right: 10px;
+        margin-left: 5px;
+      }
+
+      @include rtl {
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
diff --git a/assets/scss/partials/components/_sidebar.scss b/assets/scss/partials/components/_sidebar.scss
new file mode 100644
index 0000000..aad8b7e
--- /dev/null
+++ b/assets/scss/partials/components/_sidebar.scss
@@ -0,0 +1,74 @@
+.sidebar {
+  margin-top: 40px;
+
+  @include desktop_and_print {
+    z-index: 2;
+    position: fixed;
+    height: 100%;
+    margin-top: 0;
+    width: inherit;
+    display: flex;
+    flex-direction: column;
+
+    @include themed() {
+      @include ltr {
+        margin-right: 4px;
+        border-right: t('border');
+      }
+
+      @include rtl {
+        margin-left: 4px;
+        border-left: t('border');
+      }
+    }
+  }
+
+  &__content {
+    @include desktop_and_print {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      justify-content: center;
+    }
+  }
+
+  &__list {
+    list-style: none;
+    padding: 0;
+
+    text-align: center;
+
+    &-item {
+      display: inline;
+      padding: 0 4px;
+      line-height: 0;
+    }
+  }
+
+  &__introduction {
+    top: 40%;
+    text-align: center;
+
+    &-description {
+      margin: 0 1em;
+    }
+
+    &-profileimage {
+      width: 127px;
+      height: 127px;
+      border-radius: 50%;
+    }
+
+    &-title {
+      text-transform: uppercase;
+      font-weight: bold;
+      letter-spacing: 2px;
+      line-height: 1;
+      margin: 1em;
+
+      a {
+        font-size: 3.2rem;
+      }
+    }
+  }
+}
diff --git a/assets/scss/partials/components/_tag.scss b/assets/scss/partials/components/_tag.scss
new file mode 100644
index 0000000..5f02e5b
--- /dev/null
+++ b/assets/scss/partials/components/_tag.scss
@@ -0,0 +1,20 @@
+.tag {
+  display: inline-block;
+  font-size: 1.4rem;
+
+  @include themed() {
+    color: t('primary-light');
+  }
+
+  @include ltr {
+    margin: 5px 8px 5px 0;
+  }
+
+  @include rtl {
+    margin: 5px 0 5px 8px;
+  }
+
+  &::before {
+    content: '#';
+  }
+}
diff --git a/assets/scss/partials/components/_themeswitch.scss b/assets/scss/partials/components/_themeswitch.scss
new file mode 100644
index 0000000..023476f
--- /dev/null
+++ b/assets/scss/partials/components/_themeswitch.scss
@@ -0,0 +1,4 @@
+.themeswitch {
+  margin-top: -5px;
+  font-size: 1.75rem;
+}
diff --git a/assets/scss/partials/components/_wrapper.scss b/assets/scss/partials/components/_wrapper.scss
new file mode 100644
index 0000000..aa6648b
--- /dev/null
+++ b/assets/scss/partials/components/_wrapper.scss
@@ -0,0 +1,38 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+
+  @include desktop {
+    flex-direction: row;
+  }
+
+  @include widescreen {
+    justify-content: center;
+  }
+
+  &__main {
+    width: 100%;
+
+    @include desktop_and_print {
+      width: $content-width;
+    }
+
+    @include widescreen {
+      width: calc(#{$content-ratio} * 80%);
+    }
+  }
+
+  &__sidebar {
+    width: 100%;
+    padding: 16px 0;
+
+    @include desktop_and_print {
+      width: $sidebar-width;
+      padding: 0;
+    }
+
+    @include widescreen {
+      width: calc(#{$sidebar-ratio} * 80%);
+    }
+  }
+}
diff --git a/assets/scss/partials/layout/_body.scss b/assets/scss/partials/layout/_body.scss
new file mode 100644
index 0000000..654bb2b
--- /dev/null
+++ b/assets/scss/partials/layout/_body.scss
@@ -0,0 +1,13 @@
+.body {
+  width: 100%;
+  margin: 0 auto;
+  // work around to style body
+  &.theme--dark {
+    color: $primary--darkmode;
+    background-color: $accent--darkmode;
+  }
+  &.theme--light {
+    color: $primary--lightmode;
+    background-color: $accent--lightmode;
+  }
+}
diff --git a/assets/scss/partials/layout/_header.scss b/assets/scss/partials/layout/_header.scss
new file mode 100644
index 0000000..3a6520e
--- /dev/null
+++ b/assets/scss/partials/layout/_header.scss
@@ -0,0 +1,21 @@
+.header {
+  @include themed() {
+    background-color: t('accent');
+  }
+  width: 100%;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+
+  @include desktop {
+    position: sticky;
+
+    @include themed() {
+      border-bottom: t('border');
+    }
+  }
+
+  @include print {
+    display: none;
+  }
+}
diff --git a/assets/scss/partials/layout/_html.scss b/assets/scss/partials/layout/_html.scss
new file mode 100644
index 0000000..e3d46c2
--- /dev/null
+++ b/assets/scss/partials/layout/_html.scss
@@ -0,0 +1,4 @@
+.html {
+  -webkit-font-smoothing: antialiased;
+  font-size: 62.5%;
+}
diff --git a/assets/scss/partials/layout/_nav.scss b/assets/scss/partials/layout/_nav.scss
new file mode 100644
index 0000000..fad72f6
--- /dev/null
+++ b/assets/scss/partials/layout/_nav.scss
@@ -0,0 +1,73 @@
+.nav {
+  $py-desktop: 24px;
+
+  display: none;
+
+  @include desktop_and_print {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: none;
+  }
+
+  &__list {
+    margin: 0;
+    list-style: none;
+    padding: 0;
+    width: 100%;
+
+    @include themed() {
+      background-color: t('primary-lighter');
+    }
+
+    @include desktop_and_print {
+      display: flex;
+      padding: $py-desktop 30px;
+
+      @include themed() {
+        background-color: t('accent');
+      }
+
+      &--end {
+        flex-shrink: 1;
+        justify-content: flex-end;
+      }
+    }
+
+    &-item {
+      padding: 16px 0;
+      text-transform: uppercase;
+      text-align: center;
+
+      @include desktop {
+        padding-top: 0;
+        padding-bottom: 0;
+
+        &:not(:last-child) {
+          @include ltr {
+            padding-right: 20px;
+          }
+          @include rtl {
+            padding-left: 20px;
+          }
+        }
+      }
+    }
+  }
+
+  &__link {
+    &--active {
+      padding-bottom: $py-desktop;
+
+      @include desktop {
+        @include themed() {
+          border-bottom: 1px solid t('primary');
+        }
+      }
+    }
+  }
+
+  &--active {
+    display: block;
+  }
+}
diff --git a/assets/scss/partials/vendors/_contactform.scss b/assets/scss/partials/vendors/_contactform.scss
new file mode 100644
index 0000000..988d89a
--- /dev/null
+++ b/assets/scss/partials/vendors/_contactform.scss
@@ -0,0 +1,64 @@
+/* (CONTACT) FORM */
+
+.contact-form {
+  margin-top: 30px;
+}
+.form-style {
+  width: 100%;
+}
+.form-style ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.form-style ul li {
+  @include themed() {
+    background-color: t('accent');
+    color: t('primary');
+  }
+  display: block;
+  margin-bottom: 10px;
+  min-height: 35px;
+}
+.form-style ul li .field-style {
+  @include themed() {
+    border: t('border');
+    background-color: t('accent');
+    color: t('primary');
+  }
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+
+  padding: 8px;
+  outline: none;
+  font-family: inherit;
+}
+.form-style ul li .field-style:focus {
+  box-shadow: 0 0 5px;
+  border: 1px solid;
+}
+.form-style ul li .field-split {
+  width: 49%;
+}
+.form-style ul li .field-full {
+  width: 100%;
+}
+.form-style ul li input.align-left {
+  float: left;
+}
+.form-style ul li input.align-right {
+  float: right;
+}
+.form-style ul li textarea {
+  width: 100%;
+  height: auto;
+}
+.form-style ul li input[type='button'],
+.form-style ul li input[type='submit'] {
+  display: inline-block;
+  cursor: pointer;
+  text-decoration: none;
+  width: 100%;
+}
+/* (CONTACT) FORM END */
diff --git a/assets/scss/partials/vendors/_mediumzoom.scss b/assets/scss/partials/vendors/_mediumzoom.scss
new file mode 100644
index 0000000..527e5c4
--- /dev/null
+++ b/assets/scss/partials/vendors/_mediumzoom.scss
@@ -0,0 +1,37 @@
+.medium-zoom-overlay {
+  @include themed() {
+    background: t('accent');
+  }
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity 300ms;
+  will-change: opacity;
+}
+
+.medium-zoom--opened .medium-zoom-overlay {
+  cursor: pointer;
+  cursor: zoom-out;
+  opacity: 1;
+}
+
+.medium-zoom-image {
+  cursor: pointer;
+  cursor: zoom-in;
+  transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1) !important;
+  z-index: 100;
+}
+
+.medium-zoom-image--hidden {
+  visibility: hidden;
+}
+
+.medium-zoom-image--opened {
+  position: relative;
+  cursor: pointer;
+  cursor: zoom-out;
+  will-change: transform;
+}
diff --git a/assets/scss/partials/vendors/_tableofcontents.scss b/assets/scss/partials/vendors/_tableofcontents.scss
new file mode 100644
index 0000000..7785c55
--- /dev/null
+++ b/assets/scss/partials/vendors/_tableofcontents.scss
@@ -0,0 +1,23 @@
+#TableOfContents {
+  display: block;
+  background: transparent;
+}
+
+#TableOfContents ul {
+  list-style: none;
+  line-height: 1.9em;
+  margin: 0;
+}
+
+#TableOfContents > ul {
+  padding-left: 0;
+}
+
+#TableOfContents li a {
+  display: inherit;
+  color: $info;
+}
+
+#TableOfContents li a:hover {
+  display: inherit;
+}
diff --git a/exampleSite/config/_default/languages.toml b/exampleSite/config/_default/languages.toml
index f8823c1..e048469 100644
--- a/exampleSite/config/_default/languages.toml
+++ b/exampleSite/config/_default/languages.toml
@@ -10,4 +10,4 @@
 contentDir = "content/arabic" 
 weight = 2
 LanguageDirection = "rtl" 
-LanguageName = "AR"
\ No newline at end of file
+LanguageName = "AR"
diff --git a/exampleSite/content/english/post/markdown-syntax.md b/exampleSite/content/english/post/markdown-syntax.md
index 5f3560b..637e53a 100644
--- a/exampleSite/content/english/post/markdown-syntax.md
+++ b/exampleSite/content/english/post/markdown-syntax.md
@@ -92,30 +92,30 @@
 
 #### Code block indented with four spaces
 
-    <!doctype html>
+    <!DOCTYPE html>
     <html lang="en">
-    <head>
-      <meta charset="utf-8">
-      <title>Example HTML5 Document</title>
-    </head>
-    <body>
-      <p>Test</p>
-    </body>
+      <head>
+        <meta charset="utf-8" />
+        <title>Example HTML5 Document</title>
+      </head>
+      <body>
+        <p>Test</p>
+      </body>
     </html>
 
 #### Code block with Hugo's internal highlight shortcode
 
 {{< highlight html >}}
 
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Example HTML5 Document</title>
-</head>
-<body>
-  <p>Test</p>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Example HTML5 Document</title>
+  </head>
+  <body>
+    <p>Test</p>
+  </body>
 </html>
 {{< /highlight >}}
 
diff --git a/exampleSite/content/english/post/series-part-2.md b/exampleSite/content/english/post/series-part-2.md
index 8a65463..be8d5eb 100644
--- a/exampleSite/content/english/post/series-part-2.md
+++ b/exampleSite/content/english/post/series-part-2.md
@@ -14,4 +14,4 @@
 When you created a series, you'll probably want to link to the full set of blogposts.  
 In this example we used `series-setup` as our series name.
 
-This means we can now go to `http://localhost:1313/series/series-setup/` to see all the blog posts of this serie.
+This means we can now go to [http://localhost:1313/series/series-setup/](http://localhost:1313/series/series-setup/) to see all the blog posts of this serie.
diff --git a/exampleSite/resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.content b/exampleSite/resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.content
new file mode 100644
index 0000000..ec25c6e
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.content
@@ -0,0 +1 @@
+a{text-decoration:none}.theme--light a{color:#464646}.theme--dark a{color:#eee}.theme--light a:hover{color:#0366d7}.theme--dark a:hover{color:#0366d7}blockquote{padding:0 1em}.theme--light blockquote{color:#464646;border-right:1px solid #eee}.theme--dark blockquote{color:#eee;border-right:1px solid #464646}p{line-height:1.9em}*{font-family:tajawal,sans-serif;font-size:1.5rem}.html{-webkit-font-smoothing:antialiased;font-size:62.5%}.body{width:100%;margin:0 auto}.body.theme--dark{color:#eee;background-color:#152028}.body.theme--light{color:#464646;background-color:#fff}.header{width:100%;position:fixed;z-index:1;top:0}.theme--light .header{background-color:#fff}.theme--dark .header{background-color:#152028}@media screen and (min-width:961px){.header{position:sticky}.theme--light .header{border-bottom:1px solid #eee}.theme--dark .header{border-bottom:1px solid #464646}}@media print{.header{display:none}}.nav{display:none}@media screen and (min-width:961px){.nav{display:flex;justify-content:space-between;align-items:center;box-shadow:none}}@media print{.nav{display:flex;justify-content:space-between;align-items:center;box-shadow:none}}.nav__list{margin:0;list-style:none;padding:0;width:100%}.theme--light .nav__list{background-color:#eee}.theme--dark .nav__list{background-color:#464646}@media screen and (min-width:961px){.nav__list{display:flex;padding:24px 30px}.theme--light .nav__list{background-color:#fff}.theme--dark .nav__list{background-color:#152028}.nav__list--end{flex-shrink:1;justify-content:flex-end}}@media print{.nav__list{display:flex;padding:24px 30px}.theme--light .nav__list{background-color:#fff}.theme--dark .nav__list{background-color:#152028}.nav__list--end{flex-shrink:1;justify-content:flex-end}}.nav__list-item{padding:16px 0;text-transform:uppercase;text-align:center}@media screen and (min-width:961px){.nav__list-item{padding-top:0;padding-bottom:0}.nav__list-item:not(:last-child){padding-left:20px}}.nav__link--active{padding-bottom:24px}@media screen and (min-width:961px){.theme--light .nav__link--active{border-bottom:1px solid #464646}.theme--dark .nav__link--active{border-bottom:1px solid #eee}}.nav--active{display:block}.animated{transition:top .8s linear;animation-duration:1s;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;-webkit-animation-name:fadeInDown;-moz-animation-name:fadeInDown;-o-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDown{0%{-webkit-transform:translateY(-20px)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes fadeInDown{0%{-moz-transform:translateY(-20px)}100%{-moz-transform:translateY(0)}}@-o-keyframes fadeInDown{0%{-o-transform:translateY(-20px)}100%{-o-transform:translateY(0)}}@keyframes fadeInDown{0%{transform:translateY(-20px)}100%{transform:translateY(0)}}.category{padding:4px 6px;border-radius:2px;display:inline-block;font-size:1.4rem;margin:5px 0 5px 8px}.theme--light .category{border:1px solid #eee;background-color:#eee;color:#464646!important}.theme--dark .category{border:1px solid #464646;background-color:#464646;color:#eee!important}.tag{display:inline-block;font-size:1.4rem;margin:5px 0 5px 8px}.theme--light .tag{color:#9f9f9f}.theme--dark .tag{color:#9f9f9f}.tag::before{content:'#'}.wrapper{display:flex;flex-direction:column}@media screen and (min-width:961px){.wrapper{flex-direction:row}}@media screen and (min-width:1921px){.wrapper{justify-content:center}}.wrapper__main{width:100%}@media screen and (min-width:961px){.wrapper__main{width:calc(.6 * 100%)}}@media print{.wrapper__main{width:calc(.6 * 100%)}}@media screen and (min-width:1921px){.wrapper__main{width:calc(.6 * 80%)}}.wrapper__sidebar{width:100%;padding:16px 0}@media screen and (min-width:961px){.wrapper__sidebar{width:calc(calc(1 - .6) * 100%);padding:0}}@media print{.wrapper__sidebar{width:calc(calc(1 - .6) * 100%);padding:0}}@media screen and (min-width:1921px){.wrapper__sidebar{width:calc(calc(1 - .6) * 80%)}}.sidebar{margin-top:40px}@media screen and (min-width:961px){.sidebar{z-index:2;position:fixed;height:100%;margin-top:0;width:inherit;display:flex;flex-direction:column}.theme--light .sidebar{margin-left:4px;border-left:1px solid #eee}.theme--dark .sidebar{margin-left:4px;border-left:1px solid #464646}}@media print{.sidebar{z-index:2;position:fixed;height:100%;margin-top:0;width:inherit;display:flex;flex-direction:column}.theme--light .sidebar{margin-left:4px;border-left:1px solid #eee}.theme--dark .sidebar{margin-left:4px;border-left:1px solid #464646}}@media screen and (min-width:961px){.sidebar__content{display:flex;flex-direction:column;flex-grow:1;justify-content:center}}@media print{.sidebar__content{display:flex;flex-direction:column;flex-grow:1;justify-content:center}}.sidebar__list{list-style:none;padding:0;text-align:center}.sidebar__list-item{display:inline;padding:0 4px;line-height:0}.sidebar__introduction{top:40%;text-align:center}.sidebar__introduction-description{margin:0 1em}.sidebar__introduction-profileimage{width:127px;height:127px;border-radius:50%}.sidebar__introduction-title{text-transform:uppercase;font-weight:700;letter-spacing:2px;line-height:1;margin:1em}.sidebar__introduction-title a{font-size:3.2rem}.footer{text-align:center;margin:0 auto;bottom:0;width:100%;padding-bottom:20px;flex:0;position:relative}.footer__list{list-style:none;padding:0;display:flex;justify-content:center}.footer__item{font-size:1.4rem}.footer__item:not(:first-of-type)::before{content:'\00B7';padding:4px}.footer__item a{font-size:1.4rem}.footer__sidebar{display:none}@media screen and (min-width:961px){.footer__sidebar{display:inline-block}}@media print{.footer__sidebar{display:inline-block}}@media screen and (min-width:961px){.footer__base{display:none}}@media print{.footer__base{display:none}}.pagination{margin:30px;padding:0 0 56px;text-align:center}.pagination__list{list-style:none;margin:0;padding:0;height:13px}.pagination__list-item{margin:0 2px;display:inline;line-height:1;text-decoration:none}.theme--light .pagination__list-item{color:#464646}.theme--dark .pagination__list-item{color:#eee}.navbar-burger{cursor:pointer;display:block;height:3.25rem;position:relative;width:3.25rem;margin-left:auto}.navbar-burger__line{display:block;height:1px;left:calc(50% - 8px);position:absolute;transform-origin:center;transition-duration:86ms;transition-property:background-color,opacity,transform;transition-timing-function:ease-out;width:16px}.theme--light .navbar-burger__line{background-color:#464646}.theme--dark .navbar-burger__line{background-color:#eee}.navbar-burger__line:nth-child(1){top:calc(50% - 6px)}.navbar-burger__line:nth-child(2){top:calc(50% - 1px)}.navbar-burger__line:nth-child(3){top:calc(50% + 4px)}@media screen and (min-width:961px){.navbar-burger{display:none}}.comment{margin:30px}.comment .utterances{max-width:unset}.languageswitch{position:relative}.languageswitch__label{cursor:pointer;white-space:nowrap}.languageswitch__list{display:none;list-style:none;padding:0;position:relative}@media screen and (min-width:961px){.languageswitch__list{border-radius:5px;position:absolute;top:32px}.theme--light .languageswitch__list{background:#eee;box-shadow:0 8px 16px rgba(10,10,10,.1)}.theme--dark .languageswitch__list{background:#464646;box-shadow:0 8px 16px rgba(226,226,226,.1)}}.languageswitch__list-item{background:0 0;display:block;line-height:1;bottom:0;text-align:center;white-space:nowrap;padding-top:24px}.theme--light .languageswitch__list-item{color:#464646}.theme--dark .languageswitch__list-item{color:#eee}@media screen and (min-width:961px){.languageswitch__list-item{padding:12px}}.languageswitch__triangle{display:none}.languageswitch__triangle::before{content:'';border-radius:2px 0 0 0;height:14px;left:calc(50%/2);overflow:hidden;position:absolute;transform:rotate(45deg)translateY(0)translatex(10px);width:14px}.theme--light .languageswitch__triangle::before{background:#eee;box-shadow:0 8px 16px rgba(10,10,10,.1);border-color:#eee}.theme--dark .languageswitch__triangle::before{background:#464646;box-shadow:0 8px 16px rgba(226,226,226,.1);border-color:#464646}.languageswitch__picker:checked~.languageswitch__list{display:block}@media screen and (min-width:961px){.languageswitch__picker:checked~.languageswitch__triangle{display:block}}.post{margin:30px}.theme--light .post{background-color:#fff}.theme--dark .post{background-color:#152028}.post__meta{display:flex;list-style:none;padding:0}.post__meta-item:not(:last-child){margin-right:1.25rem}.post__meta-icon{margin-left:2px}.post__meta-text:not(:last-child){margin-left:4px}.post__thumbnail{width:100%;height:15em;object-fit:cover;display:block}.post__thumbnail-wrapper{border-radius:2px;width:100%;margin-bottom:1em;overflow:hidden;transition:box-shadow .3s ease}.theme--light .post__thumbnail-wrapper{box-shadow:0 8px 16px rgba(10,10,10,.1)}.theme--dark .post__thumbnail-wrapper{box-shadow:0 8px 16px rgba(226,226,226,.1)}.theme--light .post__content a{color:#0366d7}.theme--dark .post__content a{color:#0366d7}.post__content code{font-family:monospace;padding:0 2px}.theme--light .post__content code{background-color:#eee;border:1px solid #eee;border-radius:2px}.theme--dark .post__content code{background-color:#464646;border:1px solid #464646;border-radius:2px}.post__content pre{padding:5px;overflow-x:auto}.theme--light .post__content pre{background-color:#eee}.theme--dark .post__content pre{background-color:#464646}.post__content h1{font-size:3.6rem;text-transform:uppercase;letter-spacing:1px;line-height:1}.post__content h1 a{font-size:3.6rem}.theme--light .post__content h1 a{color:#464646}.theme--dark .post__content h1 a{color:#eee}.post__content h2{font-size:2.4rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;line-height:1}.post__content h2 a{font-size:2.4rem}.theme--light .post__content h2 a{color:#464646}.theme--dark .post__content h2 a{color:#eee}.post__content h3{font-size:2rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;line-height:1}.post__content h3 a{font-size:2rem}.theme--light .post__content h3 a{color:#464646}.theme--dark .post__content h3 a{color:#eee}.post__content ul,.post__content ol{line-height:1.9em;font-weight:400}.post__content img{display:block;margin-left:auto;margin-right:auto;max-width:100%}.post__content figure{max-width:100%;height:auto;margin:0;text-align:center}.post__content figure.big{max-width:100vw}@media screen and (min-width:961px){.post__content figure.right{max-width:50%;float:left;margin-right:1.5em}}@media screen and (min-width:961px){.post__content figure.left{max-width:50%;float:right;margin-left:1.5em}}.post__footer{padding:12px 0}.theme--light .post__footer{border-bottom:1px solid #eee}.theme--dark .post__footer{border-bottom:1px solid #464646}.post__footer-date{font-size:1.4rem;margin-left:10px;margin-right:5px}.alert{padding:1rem;border-style:solid;border-radius:.25rem;border-width:2px;margin-top:1rem}.theme--light .alert{border-color:#ffc107}.theme--dark .alert{border-color:#ffc107}.alert__indicator{display:inline-block;border-radius:9999px;padding:.5rem;width:2.5rem;height:2.5rem;text-align:center;font-weight:800;margin-right:.75rem}.theme--light .alert__indicator{color:#fff;background-color:#ffc107}.theme--dark .alert__indicator{color:#152028;background-color:#ffc107}.portfolio{position:relative;padding-left:0;padding-right:0;padding-bottom:0;padding-top:48px}@media screen and (min-width:961px){.portfolio{padding:48px}}@media print{.portfolio{padding:48px}}.portfolio::before{content:'';position:absolute;top:10%;left:10%;bottom:10%;right:10%;background:0 0;border-radius:.5em}@media screen and (min-width:961px){.theme--light .portfolio::before{border:1px solid #eee}.theme--dark .portfolio::before{border:1px solid #464646}}@media print{.theme--light .portfolio::before{border:1px solid #eee}.theme--dark .portfolio::before{border:1px solid #464646}}.portfolio__title{text-transform:uppercase;letter-spacing:1px;font-size:2.6rem;line-height:1;font-weight:600}.portfolio__image{max-width:100%;min-width:100%;box-shadow:0 8px 16px rgba(226,226,226,.1);overflow:hidden;transition:box-shadow .3s ease;object-fit:cover;border-bottom:0;display:block;position:relative}.portfolio__image-wrapper{display:block;background-color:#fff;position:relative;overflow:hidden}.portfolio__image-wrapper--right,.portfolio__image-wrapper--left{margin-right:auto;margin-left:auto;width:calc(100% - 64px);padding:32px 32px 0;max-width:inherit}.theme--light .portfolio__image-wrapper--right,.theme--light .portfolio__image-wrapper--left{background-color:#fff}.theme--dark .portfolio__image-wrapper--right,.theme--dark .portfolio__image-wrapper--left{background-color:#152028}@media screen and (min-width:961px){.portfolio__image-wrapper--right,.portfolio__image-wrapper--left{width:60%;object-fit:contain;max-width:none;border-radius:.5em;padding:0}}@media print{.portfolio__image-wrapper--right,.portfolio__image-wrapper--left{width:60%;object-fit:contain;max-width:none;border-radius:.5em;padding:0}}@media screen and (min-width:961px){.portfolio__image-wrapper--left{margin-right:auto;margin-left:0}}@media print{.portfolio__image-wrapper--left{margin-right:auto;margin-left:0}}@media screen and (min-width:961px){.portfolio__image-wrapper--right{margin-right:0;margin-left:auto}}@media print{.portfolio__image-wrapper--right{margin-right:0;margin-left:auto}}.portfolio__description{padding:32px;position:relative}.theme--light .portfolio__description{background-color:#fff}.theme--dark .portfolio__description{background-color:#152028}@media screen and (min-width:961px){.portfolio__description{padding:48px;border-radius:.5em}.theme--light .portfolio__description{box-shadow:0 8px 16px rgba(10,10,10,.1)}.theme--dark .portfolio__description{box-shadow:0 8px 16px rgba(226,226,226,.1)}}@media print{.portfolio__description{padding:48px;border-radius:.5em}.theme--light .portfolio__description{box-shadow:0 8px 16px rgba(10,10,10,.1)}.theme--dark .portfolio__description{box-shadow:0 8px 16px rgba(226,226,226,.1)}}.portfolio__description--left,.portfolio__description--right{margin-top:-24px}.theme--light .portfolio__description--left,.theme--light .portfolio__description--right{border-bottom:1px solid #eee}.theme--dark .portfolio__description--left,.theme--dark .portfolio__description--right{border-bottom:1px solid #464646}@media screen and (min-width:961px){.portfolio__description--left,.portfolio__description--right{border-bottom:0;width:60%;margin-top:-48px}.theme--light .portfolio__description--left,.theme--light .portfolio__description--right{background:#eee}.theme--dark .portfolio__description--left,.theme--dark .portfolio__description--right{background:#464646}}@media print{.portfolio__description--left,.portfolio__description--right{border-bottom:0;width:60%;margin-top:-48px}.theme--light .portfolio__description--left,.theme--light .portfolio__description--right{background:#eee}.theme--dark .portfolio__description--left,.theme--dark .portfolio__description--right{background:#464646}}@media screen and (min-width:961px){.portfolio__description--right{margin-left:auto}}@media print{.portfolio__description--right{margin-left:auto}}.portfolio__button{font-weight:400;display:inline-block;position:relative;outline:0;background:0 0;text-align:center;text-decoration:none;cursor:pointer;white-space:nowrap;font-style:normal;border-radius:999em;padding:10px}.theme--light .portfolio__button{border:1px solid #9f9f9f;color:#0366d7}.theme--dark .portfolio__button{border:1px solid #9f9f9f;color:#0366d7}.portfolio__button:hover{display:inline-block;position:relative;outline:0;background:0 0;text-align:center;text-decoration:none;cursor:pointer;white-space:nowrap;font-weight:400;font-style:normal;border-radius:999em}.portfolio__button-wrapper{padding-bottom:1em}.page_404{text-align:center;padding-top:50px}.archive{margin:30px}.archive__heading{font-size:2.4rem;font-weight:600;line-height:2.2em}.theme--light .archive__heading{color:#464646}.theme--dark .archive__heading{color:#eee}.archive__list{padding:0}.archive__list-item{display:flex;justify-content:space-between;padding-bottom:5px;list-style-type:none}.archive__list-date{text-align:right}.theme--light .archive__list-date{color:#9f9f9f}.theme--dark .archive__list-date{color:#9f9f9f}.archive__list-title{display:inline-block;flex:.96}.theme--light .archive__list-title{color:#464646}.theme--dark .archive__list-title{color:#eee}.theme--light .archive__list-title:hover{color:#0366d7}.theme--dark .archive__list-title:hover{color:#0366d7}.medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity 300ms;will-change:opacity}.theme--light .medium-zoom-overlay{background:#fff}.theme--dark .medium-zoom-overlay{background:#152028}.medium-zoom--opened .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform 300ms cubic-bezier(.2,0,.2,1)!important;z-index:100}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}.contact-form{margin-top:30px}.form-style{width:100%}.form-style ul{padding:0;margin:0;list-style:none}.form-style ul li{display:block;margin-bottom:10px;min-height:35px}.theme--light .form-style ul li{background-color:#fff;color:#464646}.theme--dark .form-style ul li{background-color:#152028;color:#eee}.form-style ul li .field-style{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:8px;outline:none;font-family:inherit}.theme--light .form-style ul li .field-style{border:1px solid #eee;background-color:#fff;color:#464646}.theme--dark .form-style ul li .field-style{border:1px solid #464646;background-color:#152028;color:#eee}.form-style ul li .field-style:focus{box-shadow:0 0 5px;border:1px solid}.form-style ul li .field-split{width:49%}.form-style ul li .field-full{width:100%}.form-style ul li input.align-left{float:left}.form-style ul li input.align-right{float:right}.form-style ul li textarea{width:100%;height:auto}.form-style ul li input[type=button],.form-style ul li input[type=submit]{display:inline-block;cursor:pointer;text-decoration:none;width:100%}#TableOfContents{display:block;background:0 0}#TableOfContents ul{list-style:none;line-height:1.9em;margin:0}#TableOfContents>ul{padding-left:0}#TableOfContents li a{display:inherit;color:#0366d7}#TableOfContents li a:hover{display:inherit}
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.json b/exampleSite/resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.json
new file mode 100644
index 0000000..977f486
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.json
@@ -0,0 +1 @@
+{"Target":"scss/main.rtl.min.79afeb76fb7090c6dd3ff92152f75d08176cddfa5665720c8ce158111570612c.css","MediaType":"text/css","Data":{"Integrity":"sha256-ea/rdvtwkMbdP/khUvddCBds3fpWZXIMjOFYERVwYSw="}}
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.content b/exampleSite/resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.content
new file mode 100644
index 0000000..25f7b03
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.content
@@ -0,0 +1 @@
+a{text-decoration:none}.theme--light a{color:#464646}.theme--dark a{color:#eee}.theme--light a:hover{color:#0366d7}.theme--dark a:hover{color:#0366d7}blockquote{padding:0 1em}.theme--light blockquote{color:#464646;border-left:1px solid #eee}.theme--dark blockquote{color:#eee;border-left:1px solid #464646}p{line-height:1.9em}*{font-family:pinghei,pingfang sc,helvetica neue,work sans,hiragino sans gb,sans-serif;font-size:1.6rem}.html{-webkit-font-smoothing:antialiased;font-size:62.5%}.body{width:100%;margin:0 auto}.body.theme--dark{color:#eee;background-color:#152028}.body.theme--light{color:#464646;background-color:#fff}.header{width:100%;position:fixed;z-index:1;top:0}.theme--light .header{background-color:#fff}.theme--dark .header{background-color:#152028}@media screen and (min-width:961px){.header{position:sticky}.theme--light .header{border-bottom:1px solid #eee}.theme--dark .header{border-bottom:1px solid #464646}}@media print{.header{display:none}}.nav{display:none}@media screen and (min-width:961px){.nav{display:flex;justify-content:space-between;align-items:center;box-shadow:none}}@media print{.nav{display:flex;justify-content:space-between;align-items:center;box-shadow:none}}.nav__list{margin:0;list-style:none;padding:0;width:100%}.theme--light .nav__list{background-color:#eee}.theme--dark .nav__list{background-color:#464646}@media screen and (min-width:961px){.nav__list{display:flex;padding:24px 30px}.theme--light .nav__list{background-color:#fff}.theme--dark .nav__list{background-color:#152028}.nav__list--end{flex-shrink:1;justify-content:flex-end}}@media print{.nav__list{display:flex;padding:24px 30px}.theme--light .nav__list{background-color:#fff}.theme--dark .nav__list{background-color:#152028}.nav__list--end{flex-shrink:1;justify-content:flex-end}}.nav__list-item{padding:16px 0;text-transform:uppercase;text-align:center}@media screen and (min-width:961px){.nav__list-item{padding-top:0;padding-bottom:0}.nav__list-item:not(:last-child){padding-right:20px}}.nav__link--active{padding-bottom:24px}@media screen and (min-width:961px){.theme--light .nav__link--active{border-bottom:1px solid #464646}.theme--dark .nav__link--active{border-bottom:1px solid #eee}}.nav--active{display:block}.animated{transition:top .8s linear;animation-duration:1s;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;-webkit-animation-name:fadeInDown;-moz-animation-name:fadeInDown;-o-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDown{0%{-webkit-transform:translateY(-20px)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes fadeInDown{0%{-moz-transform:translateY(-20px)}100%{-moz-transform:translateY(0)}}@-o-keyframes fadeInDown{0%{-o-transform:translateY(-20px)}100%{-o-transform:translateY(0)}}@keyframes fadeInDown{0%{transform:translateY(-20px)}100%{transform:translateY(0)}}.category{padding:4px 6px;border-radius:2px;display:inline-block;font-size:1.4rem;margin:5px 8px 5px 0}.theme--light .category{border:1px solid #eee;background-color:#eee;color:#464646!important}.theme--dark .category{border:1px solid #464646;background-color:#464646;color:#eee!important}.tag{display:inline-block;font-size:1.4rem;margin:5px 8px 5px 0}.theme--light .tag{color:#9f9f9f}.theme--dark .tag{color:#9f9f9f}.tag::before{content:'#'}.wrapper{display:flex;flex-direction:column}@media screen and (min-width:961px){.wrapper{flex-direction:row}}@media screen and (min-width:1921px){.wrapper{justify-content:center}}.wrapper__main{width:100%}@media screen and (min-width:961px){.wrapper__main{width:calc(.6 * 100%)}}@media print{.wrapper__main{width:calc(.6 * 100%)}}@media screen and (min-width:1921px){.wrapper__main{width:calc(.6 * 80%)}}.wrapper__sidebar{width:100%;padding:16px 0}@media screen and (min-width:961px){.wrapper__sidebar{width:calc(calc(1 - .6) * 100%);padding:0}}@media print{.wrapper__sidebar{width:calc(calc(1 - .6) * 100%);padding:0}}@media screen and (min-width:1921px){.wrapper__sidebar{width:calc(calc(1 - .6) * 80%)}}.sidebar{margin-top:40px}@media screen and (min-width:961px){.sidebar{z-index:2;position:fixed;height:100%;margin-top:0;width:inherit;display:flex;flex-direction:column}.theme--light .sidebar{margin-right:4px;border-right:1px solid #eee}.theme--dark .sidebar{margin-right:4px;border-right:1px solid #464646}}@media print{.sidebar{z-index:2;position:fixed;height:100%;margin-top:0;width:inherit;display:flex;flex-direction:column}.theme--light .sidebar{margin-right:4px;border-right:1px solid #eee}.theme--dark .sidebar{margin-right:4px;border-right:1px solid #464646}}@media screen and (min-width:961px){.sidebar__content{display:flex;flex-direction:column;flex-grow:1;justify-content:center}}@media print{.sidebar__content{display:flex;flex-direction:column;flex-grow:1;justify-content:center}}.sidebar__list{list-style:none;padding:0;text-align:center}.sidebar__list-item{display:inline;padding:0 4px;line-height:0}.sidebar__introduction{top:40%;text-align:center}.sidebar__introduction-description{margin:0 1em}.sidebar__introduction-profileimage{width:127px;height:127px;border-radius:50%}.sidebar__introduction-title{text-transform:uppercase;font-weight:700;letter-spacing:2px;line-height:1;margin:1em}.sidebar__introduction-title a{font-size:3.2rem}.footer{text-align:center;margin:0 auto;bottom:0;width:100%;padding-bottom:20px;flex:0;position:relative}.footer__list{list-style:none;padding:0;display:flex;justify-content:center}.footer__item{font-size:1.4rem}.footer__item:not(:first-of-type)::before{content:'\00B7';padding:4px}.footer__item a{font-size:1.4rem}.footer__sidebar{display:none}@media screen and (min-width:961px){.footer__sidebar{display:inline-block}}@media print{.footer__sidebar{display:inline-block}}@media screen and (min-width:961px){.footer__base{display:none}}@media print{.footer__base{display:none}}.pagination{margin:30px;padding:0 0 56px;text-align:center}.pagination__list{list-style:none;margin:0;padding:0;height:13px}.pagination__list-item{margin:0 2px;display:inline;line-height:1;text-decoration:none}.theme--light .pagination__list-item{color:#464646}.theme--dark .pagination__list-item{color:#eee}.navbar-burger{cursor:pointer;display:block;height:3.25rem;position:relative;width:3.25rem;margin-left:auto}.navbar-burger__line{display:block;height:1px;left:calc(50% - 8px);position:absolute;transform-origin:center;transition-duration:86ms;transition-property:background-color,opacity,transform;transition-timing-function:ease-out;width:16px}.theme--light .navbar-burger__line{background-color:#464646}.theme--dark .navbar-burger__line{background-color:#eee}.navbar-burger__line:nth-child(1){top:calc(50% - 6px)}.navbar-burger__line:nth-child(2){top:calc(50% - 1px)}.navbar-burger__line:nth-child(3){top:calc(50% + 4px)}@media screen and (min-width:961px){.navbar-burger{display:none}}.comment{margin:30px}.comment .utterances{max-width:unset}.languageswitch{position:relative}.languageswitch__label{cursor:pointer;white-space:nowrap}.languageswitch__list{display:none;list-style:none;padding:0;position:relative}@media screen and (min-width:961px){.languageswitch__list{border-radius:5px;position:absolute;top:32px}.theme--light .languageswitch__list{background:#eee;box-shadow:0 8px 16px rgba(10,10,10,.1)}.theme--dark .languageswitch__list{background:#464646;box-shadow:0 8px 16px rgba(226,226,226,.1)}}.languageswitch__list-item{background:0 0;display:block;line-height:1;bottom:0;text-align:center;white-space:nowrap;padding-top:24px}.theme--light .languageswitch__list-item{color:#464646}.theme--dark .languageswitch__list-item{color:#eee}@media screen and (min-width:961px){.languageswitch__list-item{padding:12px}}.languageswitch__triangle{display:none}.languageswitch__triangle::before{content:'';border-radius:2px 0 0 0;height:14px;left:calc(50%/2);overflow:hidden;position:absolute;transform:rotate(45deg)translateY(0)translatex(10px);width:14px}.theme--light .languageswitch__triangle::before{background:#eee;box-shadow:0 8px 16px rgba(10,10,10,.1);border-color:#eee}.theme--dark .languageswitch__triangle::before{background:#464646;box-shadow:0 8px 16px rgba(226,226,226,.1);border-color:#464646}.languageswitch__picker:checked~.languageswitch__list{display:block}@media screen and (min-width:961px){.languageswitch__picker:checked~.languageswitch__triangle{display:block}}.post{margin:30px}.theme--light .post{background-color:#fff}.theme--dark .post{background-color:#152028}.post__meta{display:flex;list-style:none;padding:0}.post__meta-item:not(:last-child){margin-right:1.25rem}.post__meta-icon{margin-right:2px}.post__meta-text:not(:last-child){margin-right:4px}.post__thumbnail{width:100%;height:15em;object-fit:cover;display:block}.post__thumbnail-wrapper{border-radius:2px;width:100%;margin-bottom:1em;overflow:hidden;transition:box-shadow .3s ease}.theme--light .post__thumbnail-wrapper{box-shadow:0 8px 16px rgba(10,10,10,.1)}.theme--dark .post__thumbnail-wrapper{box-shadow:0 8px 16px rgba(226,226,226,.1)}.theme--light .post__content a{color:#0366d7}.theme--dark .post__content a{color:#0366d7}.post__content code{font-family:monospace;padding:0 2px}.theme--light .post__content code{background-color:#eee;border:1px solid #eee;border-radius:2px}.theme--dark .post__content code{background-color:#464646;border:1px solid #464646;border-radius:2px}.post__content pre{padding:5px;overflow-x:auto}.theme--light .post__content pre{background-color:#eee}.theme--dark .post__content pre{background-color:#464646}.post__content h1{font-size:3.6rem;text-transform:uppercase;letter-spacing:1px;line-height:1}.post__content h1 a{font-size:3.6rem}.theme--light .post__content h1 a{color:#464646}.theme--dark .post__content h1 a{color:#eee}.post__content h2{font-size:2.4rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;line-height:1}.post__content h2 a{font-size:2.4rem}.theme--light .post__content h2 a{color:#464646}.theme--dark .post__content h2 a{color:#eee}.post__content h3{font-size:2rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;line-height:1}.post__content h3 a{font-size:2rem}.theme--light .post__content h3 a{color:#464646}.theme--dark .post__content h3 a{color:#eee}.post__content ul,.post__content ol{line-height:1.9em;font-weight:400}.post__content img{display:block;margin-left:auto;margin-right:auto;max-width:100%}.post__content figure{max-width:100%;height:auto;margin:0;text-align:center}.post__content figure.big{max-width:100vw}@media screen and (min-width:961px){.post__content figure.right{max-width:50%;float:right;margin-left:1.5em}}@media screen and (min-width:961px){.post__content figure.left{max-width:50%;float:left;margin-right:1.5em}}.post__footer{padding:12px 0}.theme--light .post__footer{border-bottom:1px solid #eee}.theme--dark .post__footer{border-bottom:1px solid #464646}.post__footer-date{font-size:1.4rem;margin-right:10px;margin-left:5px}.alert{padding:1rem;border-style:solid;border-radius:.25rem;border-width:2px;margin-top:1rem}.theme--light .alert{border-color:#ffc107}.theme--dark .alert{border-color:#ffc107}.alert__indicator{display:inline-block;border-radius:9999px;padding:.5rem;width:2.5rem;height:2.5rem;text-align:center;font-weight:800;margin-right:.75rem}.theme--light .alert__indicator{color:#fff;background-color:#ffc107}.theme--dark .alert__indicator{color:#152028;background-color:#ffc107}.portfolio{position:relative;padding-left:0;padding-right:0;padding-bottom:0;padding-top:48px}@media screen and (min-width:961px){.portfolio{padding:48px}}@media print{.portfolio{padding:48px}}.portfolio::before{content:'';position:absolute;top:10%;left:10%;bottom:10%;right:10%;background:0 0;border-radius:.5em}@media screen and (min-width:961px){.theme--light .portfolio::before{border:1px solid #eee}.theme--dark .portfolio::before{border:1px solid #464646}}@media print{.theme--light .portfolio::before{border:1px solid #eee}.theme--dark .portfolio::before{border:1px solid #464646}}.portfolio__title{text-transform:uppercase;letter-spacing:1px;font-size:2.6rem;line-height:1;font-weight:600}.portfolio__image{max-width:100%;min-width:100%;box-shadow:0 8px 16px rgba(226,226,226,.1);overflow:hidden;transition:box-shadow .3s ease;object-fit:cover;border-bottom:0;display:block;position:relative}.portfolio__image-wrapper{display:block;background-color:#fff;position:relative;overflow:hidden}.portfolio__image-wrapper--right,.portfolio__image-wrapper--left{margin-right:auto;margin-left:auto;width:calc(100% - 64px);padding:32px 32px 0;max-width:inherit}.theme--light .portfolio__image-wrapper--right,.theme--light .portfolio__image-wrapper--left{background-color:#fff}.theme--dark .portfolio__image-wrapper--right,.theme--dark .portfolio__image-wrapper--left{background-color:#152028}@media screen and (min-width:961px){.portfolio__image-wrapper--right,.portfolio__image-wrapper--left{width:60%;object-fit:contain;max-width:none;border-radius:.5em;padding:0}}@media print{.portfolio__image-wrapper--right,.portfolio__image-wrapper--left{width:60%;object-fit:contain;max-width:none;border-radius:.5em;padding:0}}@media screen and (min-width:961px){.portfolio__image-wrapper--left{margin-right:auto;margin-left:0}}@media print{.portfolio__image-wrapper--left{margin-right:auto;margin-left:0}}@media screen and (min-width:961px){.portfolio__image-wrapper--right{margin-right:0;margin-left:auto}}@media print{.portfolio__image-wrapper--right{margin-right:0;margin-left:auto}}.portfolio__description{padding:32px;position:relative}.theme--light .portfolio__description{background-color:#fff}.theme--dark .portfolio__description{background-color:#152028}@media screen and (min-width:961px){.portfolio__description{padding:48px;border-radius:.5em}.theme--light .portfolio__description{box-shadow:0 8px 16px rgba(10,10,10,.1)}.theme--dark .portfolio__description{box-shadow:0 8px 16px rgba(226,226,226,.1)}}@media print{.portfolio__description{padding:48px;border-radius:.5em}.theme--light .portfolio__description{box-shadow:0 8px 16px rgba(10,10,10,.1)}.theme--dark .portfolio__description{box-shadow:0 8px 16px rgba(226,226,226,.1)}}.portfolio__description--left,.portfolio__description--right{margin-top:-24px}.theme--light .portfolio__description--left,.theme--light .portfolio__description--right{border-bottom:1px solid #eee}.theme--dark .portfolio__description--left,.theme--dark .portfolio__description--right{border-bottom:1px solid #464646}@media screen and (min-width:961px){.portfolio__description--left,.portfolio__description--right{border-bottom:0;width:60%;margin-top:-48px}.theme--light .portfolio__description--left,.theme--light .portfolio__description--right{background:#eee}.theme--dark .portfolio__description--left,.theme--dark .portfolio__description--right{background:#464646}}@media print{.portfolio__description--left,.portfolio__description--right{border-bottom:0;width:60%;margin-top:-48px}.theme--light .portfolio__description--left,.theme--light .portfolio__description--right{background:#eee}.theme--dark .portfolio__description--left,.theme--dark .portfolio__description--right{background:#464646}}@media screen and (min-width:961px){.portfolio__description--right{margin-left:auto}}@media print{.portfolio__description--right{margin-left:auto}}.portfolio__button{font-weight:400;display:inline-block;position:relative;outline:0;background:0 0;text-align:center;text-decoration:none;cursor:pointer;white-space:nowrap;font-style:normal;border-radius:999em;padding:10px}.theme--light .portfolio__button{border:1px solid #9f9f9f;color:#0366d7}.theme--dark .portfolio__button{border:1px solid #9f9f9f;color:#0366d7}.portfolio__button:hover{display:inline-block;position:relative;outline:0;background:0 0;text-align:center;text-decoration:none;cursor:pointer;white-space:nowrap;font-weight:400;font-style:normal;border-radius:999em}.portfolio__button-wrapper{padding-bottom:1em}.page_404{text-align:center;padding-top:50px}.archive{margin:30px}.archive__heading{font-size:2.4rem;font-weight:600;line-height:2.2em}.theme--light .archive__heading{color:#464646}.theme--dark .archive__heading{color:#eee}.archive__list{padding:0}.archive__list-item{display:flex;justify-content:space-between;padding-bottom:5px;list-style-type:none}.archive__list-date{text-align:right}.theme--light .archive__list-date{color:#9f9f9f}.theme--dark .archive__list-date{color:#9f9f9f}.archive__list-title{display:inline-block;flex:.96}.theme--light .archive__list-title{color:#464646}.theme--dark .archive__list-title{color:#eee}.theme--light .archive__list-title:hover{color:#0366d7}.theme--dark .archive__list-title:hover{color:#0366d7}.medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity 300ms;will-change:opacity}.theme--light .medium-zoom-overlay{background:#fff}.theme--dark .medium-zoom-overlay{background:#152028}.medium-zoom--opened .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform 300ms cubic-bezier(.2,0,.2,1)!important;z-index:100}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}.contact-form{margin-top:30px}.form-style{width:100%}.form-style ul{padding:0;margin:0;list-style:none}.form-style ul li{display:block;margin-bottom:10px;min-height:35px}.theme--light .form-style ul li{background-color:#fff;color:#464646}.theme--dark .form-style ul li{background-color:#152028;color:#eee}.form-style ul li .field-style{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:8px;outline:none;font-family:inherit}.theme--light .form-style ul li .field-style{border:1px solid #eee;background-color:#fff;color:#464646}.theme--dark .form-style ul li .field-style{border:1px solid #464646;background-color:#152028;color:#eee}.form-style ul li .field-style:focus{box-shadow:0 0 5px;border:1px solid}.form-style ul li .field-split{width:49%}.form-style ul li .field-full{width:100%}.form-style ul li input.align-left{float:left}.form-style ul li input.align-right{float:right}.form-style ul li textarea{width:100%;height:auto}.form-style ul li input[type=button],.form-style ul li input[type=submit]{display:inline-block;cursor:pointer;text-decoration:none;width:100%}#TableOfContents{display:block;background:0 0}#TableOfContents ul{list-style:none;line-height:1.9em;margin:0}#TableOfContents>ul{padding-left:0}#TableOfContents li a{display:inherit;color:#0366d7}#TableOfContents li a:hover{display:inherit}
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.json b/exampleSite/resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.json
new file mode 100644
index 0000000..01f99ad
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.json
@@ -0,0 +1 @@
+{"Target":"scss/main.min.701fd2854a758b1d755397addb7c7ad9c94f550c78a1265670472d42bc80cb11.css","MediaType":"text/css","Data":{"Integrity":"sha256-cB/ShUp1ix11U5et23x62clPVQx4oSZWcEctQryAyxE="}}
\ No newline at end of file
diff --git a/images/screenshot.png b/images/screenshot.png
index 94b4025..1340ea3 100644
--- a/images/screenshot.png
+++ b/images/screenshot.png
Binary files differ
diff --git a/images/screenshot_dark.png b/images/screenshot_dark.png
index 5c9bfce..b47bfbe 100644
--- a/images/screenshot_dark.png
+++ b/images/screenshot_dark.png
Binary files differ
diff --git a/images/tn.png b/images/tn.png
index b68fe3d..4b1e9ef 100644
--- a/images/tn.png
+++ b/images/tn.png
Binary files differ
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 4bb4d5e..cd973a8 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -3,20 +3,25 @@
   dir="{{ .Site.Language.LanguageDirection | default "ltr" }}"
   lang="{{- site.Language.Lang -}}"
   data-theme="{{- .Site.Params.displayMode -}}"
+  class="html"
 >
   {{- partial "head.html" . -}}
-  <body>
-    <header>{{ partial "navbar.html" . }}</header>
+  <body
+    {{ if eq .Params.displayMode "dark" }}
+      class="body theme--dark"
+
+    {{ else }}
+      class="body theme--light"
+
+    {{ end }}
+  >
     <div class="wrapper">
-      <aside>
+      <aside class="wrapper__sidebar">
         {{- partial "sidebar.html" . -}}
       </aside>
-      <main>
-        <div class="autopagerize_page_element">
-          <div class="content">
-            {{- block "main" . }}{{- end }}
-          </div>
-        </div>
+      <main class="wrapper__main">
+        <header class="header">{{ partial "navbar.html" . }}</header>
+        {{- block "main" . }}{{- end }}
       </main>
     </div>
 
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 8240697..8e0e67b 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -8,36 +8,30 @@
 
     {{ end }}"
   >
-    <ul class="list-with-title">
-      {{ range .Data.Pages.GroupByDate "2006" }}
-        <div class="listing-title">{{ .Key }}</div>
-        {{ range .Pages }}
-          <ul class="listing">
-            <div class="listing-item">
-              <div class="listing-post">
-                <a href="{{ .RelPermalink }}" title="{{ .Title }}">{{ .Title }}</a>
-                <div class="post-time">
-                  <span class="date"
-                    >{{ if isset .Site.Params "listdateformat" }}
-                      {{ .Date.Format .Site.Params.listDateFormat }}
+    {{ range .Data.Pages.GroupByDate "2006" }}
+      <div class="archive__heading">{{ .Key }}</div>
+      {{ range .Pages }}
+        <ul class="archive__list">
+          <li class="archive__list-item">
+            <a class="archive__list-title" href="{{ .RelPermalink }}" title="{{ .Title }}">{{ .Title }}</a>
+            <div class="archive__list-date">
+              {{ if isset .Site.Params "listdateformat" }}
+                {{ .Date.Format .Site.Params.listDateFormat }}
 
 
-                    {{ else }}
-                      {{ .Date.Format "Jan 2" }}
+              {{ else }}
+                {{ .Date.Format "Jan 2" }}
 
 
-                    {{ end }}</span
-                  >
-                </div>
-              </div>
+              {{ end }}
             </div>
-          </ul>
-
-        {{ end }}
-
+          </li>
+        </ul>
 
       {{ end }}
-    </ul>
+
+
+    {{ end }}
   </div>
 
 {{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index dffa69b..e6482e6 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -8,17 +8,19 @@
 
     {{ end }}"
   >
-    <div class="post-content">
-      {{ if .Params.thumbnail }}
-        <img class="post-thumbnail" src="{{ .Params.thumbnail | relURL }}" alt="Thumbnail image" />
+    {{ if .Params.thumbnail }}
+      <div class="post__thumbnail-wrapper">
+        <img class="post__thumbnail" src="{{ .Params.thumbnail | relURL }}" alt="Thumbnail image" />
+      </div>
 
-      {{ end }}
-      <div class="post-title">
-        <h1>{{ .Title }}</h1>
-        {{ if or (eq .Type "post") (eq .Type .Site.Params.postSectionName) }}
-          <div class="info">
-            <em class="fas fa-calendar-day"></em>
-            <span class="date"
+    {{ end }}
+    <div class="post__content">
+      <h1>{{ .Title }}</h1>
+      {{ if or (eq .Type "post") (eq .Type .Site.Params.postSectionName) }}
+        <ul class="post__meta">
+          <li class="post__meta-item">
+            <em class="fas fa-calendar-day post__meta-icon"></em>
+            <span class="post__meta-text"
               >{{ if isset .Site.Params "singledateformat" }}
                 {{ .Date.Format .Site.Params.singleDateFormat }}
 
@@ -27,14 +29,16 @@
                 {{ .Date.Format "Mon, Jan 2, 2006" }}
 
 
-              {{ end }}</span
-            >
-            <em class="fas fa-stopwatch"></em>
-            <span class="reading-time">{{ i18n "reading_time" .ReadingTime }}</span>
-          </div>
+              {{ end }}
+            </span>
+          </li>
+          <li class="post__meta-item">
+            <em class="fas fa-stopwatch post__meta-icon"></em>
+            <span class="post__meta-text">{{ i18n "reading_time" .ReadingTime }}</span>
+          </li>
+        </ul>
 
-        {{ end }}
-      </div>
+      {{ end }}
 
       {{- partial "expirationnote.html" . -}}
 
@@ -59,46 +63,44 @@
 
       {{- end -}}
     </div>
-    <div class="post-footer">
-      <div class="info">
-        {{ with .Page.Params.Categories }}
-          {{ partial "taxonomy/categories.html" . }}
+    <div class="post__footer">
+      {{ with .Page.Params.Categories }}
+        {{ partial "taxonomy/categories.html" . }}
 
 
-        {{ end }}
+      {{ end }}
 
-        {{ with .Page.Params.Tags }}
-          {{ partial "taxonomy/tags.html" . }}
+      {{ with .Page.Params.Tags }}
+        {{ partial "taxonomy/tags.html" . }}
 
 
-        {{ end }}
-      </div>
+      {{ end }}
     </div>
 
     {{ if and (or (eq .Type "post") (eq .Type .Site.Params.postSectionName)) (ne .Page.Params.disableComments true) }}
       {{- if .Site.DisqusShortname -}}
-        <div id="fb_comments_container">
+        <div id="comment">
           <h2>{{ i18n "comments" }}</h2>
           {{ template "_internal/disqus.html" . }}
         </div>
 
       {{- end -}}
       {{- if .Site.Params.utterances.repo -}}
-        <div id="fb_comments_container">
+        <div id="comment">
           <h2>{{ i18n "comments" }}</h2>
           {{ partial "comments/utterances.html" . }}
         </div>
 
       {{- end -}}
       {{- if .Site.Params.CommentoURL -}}
-        <div id="fb_comments_container">
+        <div id="comment">
           <h2>{{ i18n "comments" }}</h2>
           {{ partial "comments/commento.html" . }}
         </div>
 
       {{- end -}}
       {{- if .Site.Params.gitalk.repo -}}
-        <div id="fb_comments_container">
+        <div id="comment">
           <h2>{{ i18n "comments" }}</h2>
           {{ partial "comments/gitalk.html" . }}
         </div>
diff --git a/layouts/index.html b/layouts/index.html
index aa74958..82ece0a 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -8,16 +8,16 @@
 
     {{ end }}"
   >
-    <div class="post-title post-content">
+    <div class="post__content">
       {{ .Content }}
     </div>
 
     <!-- (Optional) Home
-            -- on top of `mainSections` content (aka posts) ;
-            -- as declared in content/_index.md
+          -- on top of `mainSections` content (aka posts) ;
+          -- as declared in content/_index.md
 
-            One can set `mainSections = [""]` and have the content/_index.md specified here
-        -->
+          One can set `mainSections = [""]` and have the content/_index.md specified here
+      -->
   </div>
 
   {{ if .Params.mainSectionsTitle }}
@@ -30,7 +30,7 @@
 
       {{ end }}"
     >
-      <div class="post-title post-content">
+      <div class="post__content">
         <h2>{{ .Params.mainSectionsTitle }}</h2>
       </div>
     </div>
@@ -49,66 +49,58 @@
       {{ end }}"
     >
       {{ if .Params.thumbnail }}
-        <div class="post-thumbnail">
+        <div class="post__thumbnail-wrapper">
           <a href="{{ .RelPermalink }}">
-            <img src="{{ .Params.thumbnail | relURL }}" alt="Thumbnail image" loading="lazy" />
+            <img class="post__thumbnail" src="{{ .Params.thumbnail | relURL }}" alt="Thumbnail image" loading="lazy" />
           </a>
         </div>
 
       {{ end }}
-      <div class="post-title">
+      <div class="post__content">
         <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
-      </div>
-      <div class="post-content">
-        <div class="p_part">
-          <p>
-            {{ if .Site.Params.fullPostContent }}
-              {{ .Content }}
+        <p>
+          {{ if .Site.Params.fullPostContent }}
+            {{ .Content }}
 
 
-            {{ else }}
-              {{ .Summary }}
+          {{ else }}
+            {{ .Summary }}
 
 
-            {{ end }}
-          </p>
-          <!-- add read more -->
-          {{- if and (.Truncated) (.Site.Params.readMore) -}}
-            <a href="{{ .RelPermalink }}" class="read_more">{{ i18n "read_more" }}</a>
+          {{ end }}
+        </p>
+        <!-- add read more -->
+        {{- if and (.Truncated) (.Site.Params.readMore) -}}
+          <a href="{{ .RelPermalink }}">{{ i18n "read_more" }}</a>
 
-          {{- end -}}
-        </div>
+        {{- end -}}
       </div>
 
       <!--  -->
-      <div class="post-footer">
-        <div class="meta">
-          <div class="info">
-            <em class="fas fa-calendar-day"></em>
-            <span class="date"
-              >{{ if isset .Site.Params "indexdateformat" }}
-                {{ .Date.Format .Site.Params.indexDateFormat }}
+      <div class="post__footer">
+        <em class="fas fa-calendar-day"></em>
+        <span class="post__footer-date"
+          >{{ if isset .Site.Params "indexdateformat" }}
+            {{ .Date.Format .Site.Params.indexDateFormat }}
 
 
-              {{ else }}
-                {{ .Date.Format "Mon, Jan 2, 2006" }}
+          {{ else }}
+            {{ .Date.Format "Mon, Jan 2, 2006" }}
 
 
-              {{ end }}</span
-            >
-            {{ with .Page.Params.Categories }}
-              {{ partial "taxonomy/categories.html" . }}
+          {{ end }}</span
+        >
+        {{ with .Page.Params.Categories }}
+          {{ partial "taxonomy/categories.html" . }}
 
 
-            {{ end }}
+        {{ end }}
 
-            {{ with .Page.Params.Tags }}
-              {{ partial "taxonomy/tags.html" . }}
+        {{ with .Page.Params.Tags }}
+          {{ partial "taxonomy/tags.html" . }}
 
 
-            {{ end }}
-          </div>
-        </div>
+        {{ end }}
       </div>
     </div>
 
diff --git a/layouts/partials/expirationnote.html b/layouts/partials/expirationnote.html
index 134c3a1..00b6f6b 100644
--- a/layouts/partials/expirationnote.html
+++ b/layouts/partials/expirationnote.html
@@ -16,7 +16,7 @@
 
   {{- if and (gt $ageDays $duration) (ne $duration 0) -}}
     <div class="alert">
-      <div id="indicator">!</div>
+      <div class="alert__indicator">!</div>
       {{ i18n "old_content_warning" (dict "Count" $duration) }}
     </div>
 
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 87e46ba..c7f4202 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,35 +1,34 @@
-<footer class="footer footer--{{ .footerClassModifier }}">
-  <div class="by_farbox">
-    <ul class="footer__list">
-      <li class="footer__item">
-        &copy;
-        {{ if isset .context.Site.Params "copyright" }}
-          {{ replace .context.Site.Params.copyright "{{ YEAR }}" (now.Format "2006") | markdownify }}
+<footer class="footer footer__{{ .footerClassModifier }}">
+  <ul class="footer__list">
+    <li class="footer__item">
+      &copy;
+      {{ if isset .context.Site.Params "copyright" }}
+        {{ replace .context.Site.Params.copyright "{{ YEAR }}" (now.Format "2006") | markdownify }}
 
-        {{ else }}
-          {{ .context.Site.Params.author }}
-          {{ now.Format "2006" }}
+      {{ else }}
+        {{ .context.Site.Params.author }}
+        {{ now.Format "2006" }}
 
 
-        {{ end }}
-      </li>
-      {{ range .context.Site.Menus.footer }}
-        <li class="footer__item">
-          <a
-            href="{{ .URL }}"
-            {{ if strings.HasPrefix .URL "http" }}
-              target="_blank" rel="noopener noreferrer"
-
-            {{ end }}
-            title="{{ .Title }}"
-          >
-            {{ .Name }}
-          </a>
-        </li>
-
       {{ end }}
-    </ul>
-  </div>
+    </li>
+    {{ range .context.Site.Menus.footer }}
+      <li class="footer__item">
+        <a
+          class="link"
+          href="{{ .URL }}"
+          {{ if strings.HasPrefix .URL "http" }}
+            target="_blank" rel="noopener noreferrer"
+
+          {{ end }}
+          title="{{ .Title }}"
+        >
+          {{ .Name }}
+        </a>
+      </li>
+
+    {{ end }}
+  </ul>
 </footer>
 {{- partial "medium-zoom.html" .context -}}
 {{- partial "math.html" .context -}}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 2da1c09..6ce8aa5 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -45,34 +45,29 @@
 
   {{- end -}}
 
-
   <!-- CSS -->
-  {{ $templateStyle := resources.Get "css/style.css" }}
-  {{ $style := $templateStyle  | resources.ExecuteAsTemplate "css/main.css" . | resources.Minify | resources.Fingerprint }}
-  <link
-    rel="stylesheet"
-    href="{{ $style.RelPermalink }}"
-    integrity="{{ $style.Data.Integrity }}"
-    crossorigin="anonymous"
-    type="text/css"
-  />
   {{ if eq .Site.Language.LanguageDirection "rtl" }}
-    <!-- Arabic font -->
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Tajawal:300,500,700&display=swap&subset=arabic"
-    />
-    {{ $templateStyle := resources.Get "css/style.rtl.css" }}
-    {{ $style := $templateStyle  | resources.ExecuteAsTemplate "css/main.rtl.css" . | resources.Minify | resources.Fingerprint }}
-    <link
-      rel="stylesheet"
-      href="{{ $style.RelPermalink }}"
-      integrity="{{ $style.Data.Integrity }}"
-      crossorigin="anonymous"
-      type="text/css"
-    />
-
+  {{ $sassTemplate := resources.Get "scss/anatole.rtl.scss" }}
+  {{ $style := $sassTemplate | resources.ExecuteAsTemplate "scss/main.rtl.scss" . | resources.ToCSS | resources.Minify | resources.Fingerprint }}
+  <link
+  rel="stylesheet"
+  href="{{ $style.RelPermalink }}"
+  integrity="{{ $style.Data.Integrity }}"
+  crossorigin="anonymous"
+  type="text/css"
+/>
+  {{ else }}
+  {{ $sassTemplate := resources.Get "scss/anatole.scss" }}
+  {{ $style := $sassTemplate | resources.ExecuteAsTemplate "scss/main.scss" . | resources.ToCSS | resources.Minify | resources.Fingerprint }}
+  <link
+  rel="stylesheet"
+  href="{{ $style.RelPermalink }}"
+  integrity="{{ $style.Data.Integrity }}"
+  crossorigin="anonymous"
+  type="text/css"
+/>
   {{ end }}
+
   {{ $markupHighlightStyle := resources.Get "css/markupHighlight.css" | resources.Minify | resources.Fingerprint }}
   <link
     rel="stylesheet"
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 6e0f482..7734624 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -1,5 +1,5 @@
 <div
-  class="page-top {{ with .Site.Params.doNotLoadAnimations }}
+  class="{{ with .Site.Params.doNotLoadAnimations }}
     .
 
   {{ else }}
@@ -8,76 +8,79 @@
   {{ end }}"
 >
   <a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
-    <span aria-hidden="true"></span>
-    <span aria-hidden="true"></span>
-    <span aria-hidden="true"></span>
+    <span aria-hidden="true" class="navbar-burger__line"></span>
+    <span aria-hidden="true" class="navbar-burger__line"></span>
+    <span aria-hidden="true" class="navbar-burger__line"></span>
   </a>
-  <nav>
+  <nav class="nav">
     <ul class="nav__list" id="navMenu">
-      <div class="nav__links">
-        {{ $url := .RelPermalink }}
-        {{ range .Site.Menus.main }}
-          {{ $active := eq $url .URL }}
-          <li>
-            <a
-              {{ if $active }}
-                class="current"
+      {{ $url := .RelPermalink }}
+      {{ range .Site.Menus.main }}
+        {{ $active := eq $url .URL }}
+        <li class="nav__list-item">
+          <a
+            {{ if $active }}
+              class="nav__link--active"
+
+            {{ end }}
+            href="{{ .URL }}"
+            {{ if strings.HasPrefix .URL "http" }}
+              target="_blank" rel="noopener noreferrer"
+
+            {{ end }}
+            title="{{ .Title }}"
+            >{{ .Name }}</a
+          >
+        </li>
+
+      {{ end }}
+    </ul>
+    <ul class="nav__list nav__list--end">
+      {{ if and .IsTranslated .Site.IsMultiLingual }}
+        <li class="nav__list-item">
+          <div class="languageswitch">
+            <input
+              class="languageswitch__picker"
+              type="checkbox"
+              id="languagepicker"
+              aria-label="switch language"
+              hidden
+            />
+            <label class="languageswitch__label" for="languagepicker"
+              >{{ .Site.Language.LanguageName }} <i class="fa fa-angle-down" aria-hidden="true"></i
+            ></label>
+            <div class="languageswitch__triangle"></div>
+            <ul class="languageswitch__list">
+              {{ range $.Translations }}
+                <li class="languageswitch__list-item">
+                  <a href="{{ .RelPermalink }}" title="{{ .Language.LanguageName }}"
+                    ><span
+                      {{ if eq . $.Site.Language }}
+                        class="active"
+
+                      {{ end }}
+                      aria-label="{{ i18n "ariaLanguage" }}{{ .Language.LanguageName }}"
+                      >{{ .Language.LanguageName }}</span
+                    >
+                  </a>
+                </li>
 
               {{ end }}
-              href="{{ .URL }}"
-              {{ if strings.HasPrefix .URL "http" }}
-                target="_blank" rel="noopener noreferrer"
-
-              {{ end }}
-              title="{{ .Title }}"
-              >{{ .Name }}</a
-            >
-          </li>
-
-        {{ end }}
-      </div>
-      <ul>
-        {{ if and .IsTranslated .Site.IsMultiLingual }}
-          <li>
-            <ul class="sl-nav" aria-label="Language switcher">
-              <li>
-                <input type="checkbox" id="languagepicker" aria-label="switch language" hidden />
-                <label for="languagepicker">{{ .Site.Language.LanguageName }}</label>
-                <label for="languagepicker"><i class="fa fa-angle-down" aria-hidden="true"></i></label>
-                <div class="triangle"></div>
-
-                <ul class="dropdown">
-                  {{ range $.Translations }}
-
-                    <li>
-                      <a href="{{ .RelPermalink }}" title="{{ .Language.LanguageName }}"
-                        ><span
-                          {{ if eq . $.Site.Language }}
-                            class="active"
-
-                          {{ end }}
-                          aria-label="{{ i18n "ariaLanguage" }}{{ .Language.LanguageName }}"
-                          >{{ .Language.LanguageName }}</span
-                        ></a
-                      >
-                    </li>
-
-                  {{ end }}
-                </ul>
-              </li>
             </ul>
-          </li>
+          </div>
+        </li>
 
-        {{ end }}
-        {{ if not .Site.Params.disableThemeSwitcher }}
-          <li>
-            <a class="theme-switch" title="Switch Theme">
+      {{ end }}
+      {{ if not .Site.Params.disableThemeSwitcher }}
+        <li class="nav__list-item">
+          <div class="themeswitch">
+            <a title="Switch Theme">
               <i class="fas fa-adjust fa-fw" aria-hidden="true"></i>
             </a>
-          </li>
+          </div>
+        </li>
 
-        {{ end }}
-      </ul>
+      {{ end }}
     </ul>
   </nav>
 </div>
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
index 7fc8e44..4fb4841 100644
--- a/layouts/partials/pagination.html
+++ b/layouts/partials/pagination.html
@@ -1,9 +1,9 @@
 {{ if gt .Paginator.TotalPages 1 }}
-  <ul class="pagination">
+  <ul class="pagination__list">
     {{ $.Scratch.Set "hasPrevDots" false }}
     {{ $.Scratch.Set "hasNextDots" false }}
     {{ if .Paginator.HasPrev }}
-      <li class="page-item">
+      <li class="pagination__list-item">
         <a class="page-link" href="{{ .Paginator.Prev.URL }}">
           <i class="fa fa-angle-left" aria-label="Previous"></i>
         </a>
@@ -12,14 +12,14 @@
     {{ end }}
     {{ range .Paginator.Pagers }}
       {{ if eq . $.Paginator }}
-        <li class="page-item">
+        <li class="pagination__list-item">
           <span class="page-link current">
             {{- .PageNumber -}}
           </span>
         </li>
 
       {{ else if or (or (eq . $.Paginator.First) (eq . $.Paginator.Prev)) (or  (eq . $.Paginator.Next) (eq . $.Paginator.Last )) }}
-        <li class="page-item">
+        <li class="pagination__list-item">
           <a class="page-link" href="{{ .URL }}">
             {{- .PageNumber -}}
           </a>
@@ -42,7 +42,7 @@
 
     {{ end }}
     {{ if .Paginator.HasNext }}
-      <li class="page-item">
+      <li class="pagination__list-item">
         <a class="page-link" href="{{ .Paginator.Next.URL }}">
           <i class="fa fa-angle-right" aria-label="Next"></i>
         </a>
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index c7b8360..e22ea1b 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -8,18 +8,22 @@
   {{ end }}"
 >
   <div class="sidebar__content">
-    <div class="logo-title">
-      <div class="title">
-        <img src="{{ .Site.Params.profilePicture | relURL }}" alt="profile picture" />
-        <h3 title=""><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Params.Title }}</a></h3>
-        <div class="description">
-          <p>{{ replace .Site.Params.description "\n" "<br />" | safeHTML }}</p>
-        </div>
+    <div class="sidebar__introduction">
+      <img
+        class="sidebar__introduction-profileimage"
+        src="{{ .Site.Params.profilePicture | relURL }}"
+        alt="profile picture"
+      />
+      <h1 class="sidebar__introduction-title">
+        <a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Params.Title }}</a>
+      </h1>
+      <div class="sidebar__introduction-description">
+        <p>{{ replace .Site.Params.description "\n" "<br />" | safeHTML }}</p>
       </div>
     </div>
-    <ul class="social-links">
+    <ul class="sidebar__list">
       {{ range $item := .Site.Params.socialIcons }}
-        <li>
+        <li class="sidebar__list-item">
           <a href="{{ $item.url }}" rel="me" aria-label="{{ $item.title }}" title="{{ $item.title }}">
             <i class="{{ $item.icon }} fa-2x" aria-hidden="true"></i>
           </a>
diff --git a/layouts/partials/taxonomy/template.html b/layouts/partials/taxonomy/template.html
index 407910e..6be7b11 100644
--- a/layouts/partials/taxonomy/template.html
+++ b/layouts/partials/taxonomy/template.html
@@ -2,7 +2,7 @@
 {{- $linkBase := .linkBase -}}
 
 
-<span class="separator">
+<span>
   {{- range $index, $el := .items -}}
     <!-- Replace certain special characters with their URL encoded counterparts -->
     {{- $item := replace . "#" "%23" -}}
diff --git a/layouts/portfolio/list.html b/layouts/portfolio/list.html
index 27906e6..12fede9 100644
--- a/layouts/portfolio/list.html
+++ b/layouts/portfolio/list.html
@@ -1,5 +1,4 @@
 {{ define "main" }}
-
   {{ range $index, $elemen:= .Site.Data.portfolio.portfolioitems }}
     <div
       class="post {{ with .Site.Params.doNotLoadAnimations }}
@@ -10,88 +9,83 @@
 
       {{ end }}"
     >
-      <div class="post-content">
-        <div class="post-title">
-          <h2>{{ .title }}</h2>
-        </div>
-
-        {{ range $i, $p := .portfolioitem }}
-          <div class="box-wrapper">
-            {{ if .image }}
-              <div
-                class="box-image {{ if (modBool $i 2) }}
-                  box-image--right
-
-                {{ else }}
-                  box-image--left
-
-                {{ end }}"
-              >
-                <a href="{{ .link | safeURL }}" target="_blank" rel="noopener">
-                  <img src="{{ .image | relURL }}" alt="{{ .name | markdownify }}" />
-                </a>
-              </div>
-
-            {{ end }}
+      <h2 class="portfolio__title">{{ .title }}</h2>
+      {{ range $i, $p := .portfolioitem }}
+        <div class="portfolio">
+          {{ if .image }}
             <div
-              class="box {{ if (modBool $i 2) }}
-                box--left
+              class="portfolio__image-wrapper {{ if (modBool $i 2) }}
+                portfolio__image-wrapper--right
 
               {{ else }}
-                box--right
+                portfolio__image-wrapper--left
 
               {{ end }}"
             >
-              <h2>{{ .name | markdownify }}</h2>
+              <a href="{{ .link | safeURL }}" target="_blank" rel="noopener">
+                <img class="portfolio__image" src="{{ .image | relURL }}" alt="{{ .name | markdownify }}" />
+              </a>
+            </div>
+
+          {{ end }}
+          <div
+            class="portfolio__description {{ if (modBool $i 2) }}
+              portfolio__description--left
+
+            {{ else }}
+              portfolio__description--right
+
+            {{ end }}"
+          >
+            <h2>{{ .name | markdownify }}</h2>
+            <div class="info">
+              {{ if .status }}
+                <em class="fas fa-flag-checkered"></em>
+                <span>{{ .status }}</span>
+
+              {{ end }}
+              {{ if .venue }}
+                <em class="fas fa-map-marker-alt"></em>
+                <span>{{ .venue }}</span>
+
+              {{ end }}
+              {{ if .start }}
+                <span>Start:</span>
+                <span>{{ .start }}</span>
+
+              {{ end }}
+              {{ if .end }}
+                <span>End:</span>
+                <span>{{ .end }}</span>
+
+              {{ end }}
+            </div>
+            {{ if .authors }}
               <div class="info">
-                {{ if .status }}
-                  <em class="fas fa-flag-checkered"></em>
-                  <span>{{ .status }}</span>
-
-                {{ end }}
-                {{ if .venue }}
-                  <em class="fas fa-map-marker-alt"></em>
-                  <span>{{ .venue }}</span>
-
-                {{ end }}
-                {{ if .start }}
-                  <span>Start:</span>
-                  <span>{{ .start }}</span>
-
-                {{ end }}
-                {{ if .end }}
-                  <span>End:</span>
-                  <span>{{ .end }}</span>
+                {{ range .authors }}
+                  <span>{{ . }}</span>
 
                 {{ end }}
               </div>
-              {{ if .authors }}
-                <div class="info">
-                  {{ range .authors }}
-                    <span>{{ . }}</span>
 
-                  {{ end }}
-                </div>
-
-              {{ end }}
-              <p>{{ .description | markdownify }}</p>
-              {{ if .link }}
-                <div class="cta">
-                  <a class="btn" href="{{ .link | safeURL }}" target="_blank" rel="noopener">Visit Site</a>
-                </div>
-
-              {{ end }}
-              <div class="seperator">
-                {{ range .tags }}
-                  <p class="tag">{{ . }}</p>
-
-                {{ end }}
+            {{ end }}
+            <p>{{ .description | markdownify }}</p>
+            {{ if .link }}
+              <div class="portfolio__button-wrapper">
+                <a class="portfolio__button" href="{{ .link | safeURL }}" target="_blank" rel="noopener">Visit Site</a>
               </div>
+
+            {{ end }}
+            <div class="seperator">
+              {{ range .tags }}
+                <p class="tag">{{ . }}</p>
+
+              {{ end }}
             </div>
           </div>
+        </div>
 
-        {{ end }}
-      </div>
+      {{ end }}
     </div>
 
   {{ end }}
diff --git a/package-lock.json b/package-lock.json
index cd87733..334ba98 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,130 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
+    "glob": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
+      "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "interpret": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
+      "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
+      "dev": true
+    },
+    "is-core-module": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz",
+      "integrity": "sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "dev": true
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
     "prettier": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz",
@@ -19,11 +143,64 @@
         "ulid": "^2.3.0"
       }
     },
+    "rechoir": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+      "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
+      "dev": true,
+      "requires": {
+        "resolve": "^1.1.6"
+      }
+    },
+    "resolve": {
+      "version": "1.22.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
+      "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==",
+      "dev": true,
+      "requires": {
+        "is-core-module": "^2.8.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      }
+    },
+    "shelljs": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz",
+      "integrity": "sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.0.0",
+        "interpret": "^1.0.0",
+        "rechoir": "^0.6.2"
+      }
+    },
+    "shx": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/shx/-/shx-0.3.4.tgz",
+      "integrity": "sha512-N6A9MLVqjxZYcVn8hLmtneQWIJtp8IKzMP4eMnx+nqkvXoqinUPCbUFLp2UcWTEIUONhlk0ewxr/jaVGlc+J+g==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.3",
+        "shelljs": "^0.8.5"
+      }
+    },
+    "supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true
+    },
     "ulid": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/ulid/-/ulid-2.3.0.tgz",
       "integrity": "sha512-keqHubrlpvT6G2wH0OEfSW4mquYRcbe/J8NMmveoQOjUqmo+hXtO+ORCpWhdbZ7k72UtY61BL7haGxW6enBnjw==",
       "dev": true
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
     }
   }
 }
diff --git a/package.json b/package.json
index 32238a9..7deb5fa 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,8 @@
   "version": "1.1.0",
   "description": "Anatole is a beautiful minimalist two-column hugo theme based on farbox-theme-Anatole.",
   "scripts": {
+    "build": "hugo --themesDir=../.. --source=exampleSite && shx rm -rf ./resources && shx cp -r ./exampleSite/resources ./resources && shx echo Done building resources.",
+    "dev": "hugo serve --themesDir=../.. --source=exampleSite",
     "prettier": "npx prettier --write ."
   },
   "repository": {
@@ -24,6 +26,7 @@
   "dependencies": {},
   "devDependencies": {
     "prettier": "~2.2.1",
-    "prettier-plugin-go-template": "^0.0.11-beta.13"
+    "prettier-plugin-go-template": "^0.0.11-beta.13",
+    "shx": "^0.3.4"
   }
 }
diff --git a/resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.content b/resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.content
new file mode 100644
index 0000000..ec25c6e
--- /dev/null
+++ b/resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.content
@@ -0,0 +1 @@
+a{text-decoration:none}.theme--light a{color:#464646}.theme--dark a{color:#eee}.theme--light a:hover{color:#0366d7}.theme--dark a:hover{color:#0366d7}blockquote{padding:0 1em}.theme--light blockquote{color:#464646;border-right:1px solid #eee}.theme--dark blockquote{color:#eee;border-right:1px solid #464646}p{line-height:1.9em}*{font-family:tajawal,sans-serif;font-size:1.5rem}.html{-webkit-font-smoothing:antialiased;font-size:62.5%}.body{width:100%;margin:0 auto}.body.theme--dark{color:#eee;background-color:#152028}.body.theme--light{color:#464646;background-color:#fff}.header{width:100%;position:fixed;z-index:1;top:0}.theme--light .header{background-color:#fff}.theme--dark .header{background-color:#152028}@media screen and (min-width:961px){.header{position:sticky}.theme--light .header{border-bottom:1px solid #eee}.theme--dark .header{border-bottom:1px solid #464646}}@media print{.header{display:none}}.nav{display:none}@media screen and (min-width:961px){.nav{display:flex;justify-content:space-between;align-items:center;box-shadow:none}}@media print{.nav{display:flex;justify-content:space-between;align-items:center;box-shadow:none}}.nav__list{margin:0;list-style:none;padding:0;width:100%}.theme--light .nav__list{background-color:#eee}.theme--dark .nav__list{background-color:#464646}@media screen and (min-width:961px){.nav__list{display:flex;padding:24px 30px}.theme--light .nav__list{background-color:#fff}.theme--dark .nav__list{background-color:#152028}.nav__list--end{flex-shrink:1;justify-content:flex-end}}@media print{.nav__list{display:flex;padding:24px 30px}.theme--light .nav__list{background-color:#fff}.theme--dark .nav__list{background-color:#152028}.nav__list--end{flex-shrink:1;justify-content:flex-end}}.nav__list-item{padding:16px 0;text-transform:uppercase;text-align:center}@media screen and (min-width:961px){.nav__list-item{padding-top:0;padding-bottom:0}.nav__list-item:not(:last-child){padding-left:20px}}.nav__link--active{padding-bottom:24px}@media screen and (min-width:961px){.theme--light .nav__link--active{border-bottom:1px solid #464646}.theme--dark .nav__link--active{border-bottom:1px solid #eee}}.nav--active{display:block}.animated{transition:top .8s linear;animation-duration:1s;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;-webkit-animation-name:fadeInDown;-moz-animation-name:fadeInDown;-o-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDown{0%{-webkit-transform:translateY(-20px)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes fadeInDown{0%{-moz-transform:translateY(-20px)}100%{-moz-transform:translateY(0)}}@-o-keyframes fadeInDown{0%{-o-transform:translateY(-20px)}100%{-o-transform:translateY(0)}}@keyframes fadeInDown{0%{transform:translateY(-20px)}100%{transform:translateY(0)}}.category{padding:4px 6px;border-radius:2px;display:inline-block;font-size:1.4rem;margin:5px 0 5px 8px}.theme--light .category{border:1px solid #eee;background-color:#eee;color:#464646!important}.theme--dark .category{border:1px solid #464646;background-color:#464646;color:#eee!important}.tag{display:inline-block;font-size:1.4rem;margin:5px 0 5px 8px}.theme--light .tag{color:#9f9f9f}.theme--dark .tag{color:#9f9f9f}.tag::before{content:'#'}.wrapper{display:flex;flex-direction:column}@media screen and (min-width:961px){.wrapper{flex-direction:row}}@media screen and (min-width:1921px){.wrapper{justify-content:center}}.wrapper__main{width:100%}@media screen and (min-width:961px){.wrapper__main{width:calc(.6 * 100%)}}@media print{.wrapper__main{width:calc(.6 * 100%)}}@media screen and (min-width:1921px){.wrapper__main{width:calc(.6 * 80%)}}.wrapper__sidebar{width:100%;padding:16px 0}@media screen and (min-width:961px){.wrapper__sidebar{width:calc(calc(1 - .6) * 100%);padding:0}}@media print{.wrapper__sidebar{width:calc(calc(1 - .6) * 100%);padding:0}}@media screen and (min-width:1921px){.wrapper__sidebar{width:calc(calc(1 - .6) * 80%)}}.sidebar{margin-top:40px}@media screen and (min-width:961px){.sidebar{z-index:2;position:fixed;height:100%;margin-top:0;width:inherit;display:flex;flex-direction:column}.theme--light .sidebar{margin-left:4px;border-left:1px solid #eee}.theme--dark .sidebar{margin-left:4px;border-left:1px solid #464646}}@media print{.sidebar{z-index:2;position:fixed;height:100%;margin-top:0;width:inherit;display:flex;flex-direction:column}.theme--light .sidebar{margin-left:4px;border-left:1px solid #eee}.theme--dark .sidebar{margin-left:4px;border-left:1px solid #464646}}@media screen and (min-width:961px){.sidebar__content{display:flex;flex-direction:column;flex-grow:1;justify-content:center}}@media print{.sidebar__content{display:flex;flex-direction:column;flex-grow:1;justify-content:center}}.sidebar__list{list-style:none;padding:0;text-align:center}.sidebar__list-item{display:inline;padding:0 4px;line-height:0}.sidebar__introduction{top:40%;text-align:center}.sidebar__introduction-description{margin:0 1em}.sidebar__introduction-profileimage{width:127px;height:127px;border-radius:50%}.sidebar__introduction-title{text-transform:uppercase;font-weight:700;letter-spacing:2px;line-height:1;margin:1em}.sidebar__introduction-title a{font-size:3.2rem}.footer{text-align:center;margin:0 auto;bottom:0;width:100%;padding-bottom:20px;flex:0;position:relative}.footer__list{list-style:none;padding:0;display:flex;justify-content:center}.footer__item{font-size:1.4rem}.footer__item:not(:first-of-type)::before{content:'\00B7';padding:4px}.footer__item a{font-size:1.4rem}.footer__sidebar{display:none}@media screen and (min-width:961px){.footer__sidebar{display:inline-block}}@media print{.footer__sidebar{display:inline-block}}@media screen and (min-width:961px){.footer__base{display:none}}@media print{.footer__base{display:none}}.pagination{margin:30px;padding:0 0 56px;text-align:center}.pagination__list{list-style:none;margin:0;padding:0;height:13px}.pagination__list-item{margin:0 2px;display:inline;line-height:1;text-decoration:none}.theme--light .pagination__list-item{color:#464646}.theme--dark .pagination__list-item{color:#eee}.navbar-burger{cursor:pointer;display:block;height:3.25rem;position:relative;width:3.25rem;margin-left:auto}.navbar-burger__line{display:block;height:1px;left:calc(50% - 8px);position:absolute;transform-origin:center;transition-duration:86ms;transition-property:background-color,opacity,transform;transition-timing-function:ease-out;width:16px}.theme--light .navbar-burger__line{background-color:#464646}.theme--dark .navbar-burger__line{background-color:#eee}.navbar-burger__line:nth-child(1){top:calc(50% - 6px)}.navbar-burger__line:nth-child(2){top:calc(50% - 1px)}.navbar-burger__line:nth-child(3){top:calc(50% + 4px)}@media screen and (min-width:961px){.navbar-burger{display:none}}.comment{margin:30px}.comment .utterances{max-width:unset}.languageswitch{position:relative}.languageswitch__label{cursor:pointer;white-space:nowrap}.languageswitch__list{display:none;list-style:none;padding:0;position:relative}@media screen and (min-width:961px){.languageswitch__list{border-radius:5px;position:absolute;top:32px}.theme--light .languageswitch__list{background:#eee;box-shadow:0 8px 16px rgba(10,10,10,.1)}.theme--dark .languageswitch__list{background:#464646;box-shadow:0 8px 16px rgba(226,226,226,.1)}}.languageswitch__list-item{background:0 0;display:block;line-height:1;bottom:0;text-align:center;white-space:nowrap;padding-top:24px}.theme--light .languageswitch__list-item{color:#464646}.theme--dark .languageswitch__list-item{color:#eee}@media screen and (min-width:961px){.languageswitch__list-item{padding:12px}}.languageswitch__triangle{display:none}.languageswitch__triangle::before{content:'';border-radius:2px 0 0 0;height:14px;left:calc(50%/2);overflow:hidden;position:absolute;transform:rotate(45deg)translateY(0)translatex(10px);width:14px}.theme--light .languageswitch__triangle::before{background:#eee;box-shadow:0 8px 16px rgba(10,10,10,.1);border-color:#eee}.theme--dark .languageswitch__triangle::before{background:#464646;box-shadow:0 8px 16px rgba(226,226,226,.1);border-color:#464646}.languageswitch__picker:checked~.languageswitch__list{display:block}@media screen and (min-width:961px){.languageswitch__picker:checked~.languageswitch__triangle{display:block}}.post{margin:30px}.theme--light .post{background-color:#fff}.theme--dark .post{background-color:#152028}.post__meta{display:flex;list-style:none;padding:0}.post__meta-item:not(:last-child){margin-right:1.25rem}.post__meta-icon{margin-left:2px}.post__meta-text:not(:last-child){margin-left:4px}.post__thumbnail{width:100%;height:15em;object-fit:cover;display:block}.post__thumbnail-wrapper{border-radius:2px;width:100%;margin-bottom:1em;overflow:hidden;transition:box-shadow .3s ease}.theme--light .post__thumbnail-wrapper{box-shadow:0 8px 16px rgba(10,10,10,.1)}.theme--dark .post__thumbnail-wrapper{box-shadow:0 8px 16px rgba(226,226,226,.1)}.theme--light .post__content a{color:#0366d7}.theme--dark .post__content a{color:#0366d7}.post__content code{font-family:monospace;padding:0 2px}.theme--light .post__content code{background-color:#eee;border:1px solid #eee;border-radius:2px}.theme--dark .post__content code{background-color:#464646;border:1px solid #464646;border-radius:2px}.post__content pre{padding:5px;overflow-x:auto}.theme--light .post__content pre{background-color:#eee}.theme--dark .post__content pre{background-color:#464646}.post__content h1{font-size:3.6rem;text-transform:uppercase;letter-spacing:1px;line-height:1}.post__content h1 a{font-size:3.6rem}.theme--light .post__content h1 a{color:#464646}.theme--dark .post__content h1 a{color:#eee}.post__content h2{font-size:2.4rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;line-height:1}.post__content h2 a{font-size:2.4rem}.theme--light .post__content h2 a{color:#464646}.theme--dark .post__content h2 a{color:#eee}.post__content h3{font-size:2rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;line-height:1}.post__content h3 a{font-size:2rem}.theme--light .post__content h3 a{color:#464646}.theme--dark .post__content h3 a{color:#eee}.post__content ul,.post__content ol{line-height:1.9em;font-weight:400}.post__content img{display:block;margin-left:auto;margin-right:auto;max-width:100%}.post__content figure{max-width:100%;height:auto;margin:0;text-align:center}.post__content figure.big{max-width:100vw}@media screen and (min-width:961px){.post__content figure.right{max-width:50%;float:left;margin-right:1.5em}}@media screen and (min-width:961px){.post__content figure.left{max-width:50%;float:right;margin-left:1.5em}}.post__footer{padding:12px 0}.theme--light .post__footer{border-bottom:1px solid #eee}.theme--dark .post__footer{border-bottom:1px solid #464646}.post__footer-date{font-size:1.4rem;margin-left:10px;margin-right:5px}.alert{padding:1rem;border-style:solid;border-radius:.25rem;border-width:2px;margin-top:1rem}.theme--light .alert{border-color:#ffc107}.theme--dark .alert{border-color:#ffc107}.alert__indicator{display:inline-block;border-radius:9999px;padding:.5rem;width:2.5rem;height:2.5rem;text-align:center;font-weight:800;margin-right:.75rem}.theme--light .alert__indicator{color:#fff;background-color:#ffc107}.theme--dark .alert__indicator{color:#152028;background-color:#ffc107}.portfolio{position:relative;padding-left:0;padding-right:0;padding-bottom:0;padding-top:48px}@media screen and (min-width:961px){.portfolio{padding:48px}}@media print{.portfolio{padding:48px}}.portfolio::before{content:'';position:absolute;top:10%;left:10%;bottom:10%;right:10%;background:0 0;border-radius:.5em}@media screen and (min-width:961px){.theme--light .portfolio::before{border:1px solid #eee}.theme--dark .portfolio::before{border:1px solid #464646}}@media print{.theme--light .portfolio::before{border:1px solid #eee}.theme--dark .portfolio::before{border:1px solid #464646}}.portfolio__title{text-transform:uppercase;letter-spacing:1px;font-size:2.6rem;line-height:1;font-weight:600}.portfolio__image{max-width:100%;min-width:100%;box-shadow:0 8px 16px rgba(226,226,226,.1);overflow:hidden;transition:box-shadow .3s ease;object-fit:cover;border-bottom:0;display:block;position:relative}.portfolio__image-wrapper{display:block;background-color:#fff;position:relative;overflow:hidden}.portfolio__image-wrapper--right,.portfolio__image-wrapper--left{margin-right:auto;margin-left:auto;width:calc(100% - 64px);padding:32px 32px 0;max-width:inherit}.theme--light .portfolio__image-wrapper--right,.theme--light .portfolio__image-wrapper--left{background-color:#fff}.theme--dark .portfolio__image-wrapper--right,.theme--dark .portfolio__image-wrapper--left{background-color:#152028}@media screen and (min-width:961px){.portfolio__image-wrapper--right,.portfolio__image-wrapper--left{width:60%;object-fit:contain;max-width:none;border-radius:.5em;padding:0}}@media print{.portfolio__image-wrapper--right,.portfolio__image-wrapper--left{width:60%;object-fit:contain;max-width:none;border-radius:.5em;padding:0}}@media screen and (min-width:961px){.portfolio__image-wrapper--left{margin-right:auto;margin-left:0}}@media print{.portfolio__image-wrapper--left{margin-right:auto;margin-left:0}}@media screen and (min-width:961px){.portfolio__image-wrapper--right{margin-right:0;margin-left:auto}}@media print{.portfolio__image-wrapper--right{margin-right:0;margin-left:auto}}.portfolio__description{padding:32px;position:relative}.theme--light .portfolio__description{background-color:#fff}.theme--dark .portfolio__description{background-color:#152028}@media screen and (min-width:961px){.portfolio__description{padding:48px;border-radius:.5em}.theme--light .portfolio__description{box-shadow:0 8px 16px rgba(10,10,10,.1)}.theme--dark .portfolio__description{box-shadow:0 8px 16px rgba(226,226,226,.1)}}@media print{.portfolio__description{padding:48px;border-radius:.5em}.theme--light .portfolio__description{box-shadow:0 8px 16px rgba(10,10,10,.1)}.theme--dark .portfolio__description{box-shadow:0 8px 16px rgba(226,226,226,.1)}}.portfolio__description--left,.portfolio__description--right{margin-top:-24px}.theme--light .portfolio__description--left,.theme--light .portfolio__description--right{border-bottom:1px solid #eee}.theme--dark .portfolio__description--left,.theme--dark .portfolio__description--right{border-bottom:1px solid #464646}@media screen and (min-width:961px){.portfolio__description--left,.portfolio__description--right{border-bottom:0;width:60%;margin-top:-48px}.theme--light .portfolio__description--left,.theme--light .portfolio__description--right{background:#eee}.theme--dark .portfolio__description--left,.theme--dark .portfolio__description--right{background:#464646}}@media print{.portfolio__description--left,.portfolio__description--right{border-bottom:0;width:60%;margin-top:-48px}.theme--light .portfolio__description--left,.theme--light .portfolio__description--right{background:#eee}.theme--dark .portfolio__description--left,.theme--dark .portfolio__description--right{background:#464646}}@media screen and (min-width:961px){.portfolio__description--right{margin-left:auto}}@media print{.portfolio__description--right{margin-left:auto}}.portfolio__button{font-weight:400;display:inline-block;position:relative;outline:0;background:0 0;text-align:center;text-decoration:none;cursor:pointer;white-space:nowrap;font-style:normal;border-radius:999em;padding:10px}.theme--light .portfolio__button{border:1px solid #9f9f9f;color:#0366d7}.theme--dark .portfolio__button{border:1px solid #9f9f9f;color:#0366d7}.portfolio__button:hover{display:inline-block;position:relative;outline:0;background:0 0;text-align:center;text-decoration:none;cursor:pointer;white-space:nowrap;font-weight:400;font-style:normal;border-radius:999em}.portfolio__button-wrapper{padding-bottom:1em}.page_404{text-align:center;padding-top:50px}.archive{margin:30px}.archive__heading{font-size:2.4rem;font-weight:600;line-height:2.2em}.theme--light .archive__heading{color:#464646}.theme--dark .archive__heading{color:#eee}.archive__list{padding:0}.archive__list-item{display:flex;justify-content:space-between;padding-bottom:5px;list-style-type:none}.archive__list-date{text-align:right}.theme--light .archive__list-date{color:#9f9f9f}.theme--dark .archive__list-date{color:#9f9f9f}.archive__list-title{display:inline-block;flex:.96}.theme--light .archive__list-title{color:#464646}.theme--dark .archive__list-title{color:#eee}.theme--light .archive__list-title:hover{color:#0366d7}.theme--dark .archive__list-title:hover{color:#0366d7}.medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity 300ms;will-change:opacity}.theme--light .medium-zoom-overlay{background:#fff}.theme--dark .medium-zoom-overlay{background:#152028}.medium-zoom--opened .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform 300ms cubic-bezier(.2,0,.2,1)!important;z-index:100}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}.contact-form{margin-top:30px}.form-style{width:100%}.form-style ul{padding:0;margin:0;list-style:none}.form-style ul li{display:block;margin-bottom:10px;min-height:35px}.theme--light .form-style ul li{background-color:#fff;color:#464646}.theme--dark .form-style ul li{background-color:#152028;color:#eee}.form-style ul li .field-style{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:8px;outline:none;font-family:inherit}.theme--light .form-style ul li .field-style{border:1px solid #eee;background-color:#fff;color:#464646}.theme--dark .form-style ul li .field-style{border:1px solid #464646;background-color:#152028;color:#eee}.form-style ul li .field-style:focus{box-shadow:0 0 5px;border:1px solid}.form-style ul li .field-split{width:49%}.form-style ul li .field-full{width:100%}.form-style ul li input.align-left{float:left}.form-style ul li input.align-right{float:right}.form-style ul li textarea{width:100%;height:auto}.form-style ul li input[type=button],.form-style ul li input[type=submit]{display:inline-block;cursor:pointer;text-decoration:none;width:100%}#TableOfContents{display:block;background:0 0}#TableOfContents ul{list-style:none;line-height:1.9em;margin:0}#TableOfContents>ul{padding-left:0}#TableOfContents li a{display:inherit;color:#0366d7}#TableOfContents li a:hover{display:inherit}
\ No newline at end of file
diff --git a/resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.json b/resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.json
new file mode 100644
index 0000000..977f486
--- /dev/null
+++ b/resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.json
@@ -0,0 +1 @@
+{"Target":"scss/main.rtl.min.79afeb76fb7090c6dd3ff92152f75d08176cddfa5665720c8ce158111570612c.css","MediaType":"text/css","Data":{"Integrity":"sha256-ea/rdvtwkMbdP/khUvddCBds3fpWZXIMjOFYERVwYSw="}}
\ No newline at end of file
diff --git a/resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.content b/resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.content
new file mode 100644
index 0000000..25f7b03
--- /dev/null
+++ b/resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.content
@@ -0,0 +1 @@
+a{text-decoration:none}.theme--light a{color:#464646}.theme--dark a{color:#eee}.theme--light a:hover{color:#0366d7}.theme--dark a:hover{color:#0366d7}blockquote{padding:0 1em}.theme--light blockquote{color:#464646;border-left:1px solid #eee}.theme--dark blockquote{color:#eee;border-left:1px solid #464646}p{line-height:1.9em}*{font-family:pinghei,pingfang sc,helvetica neue,work sans,hiragino sans gb,sans-serif;font-size:1.6rem}.html{-webkit-font-smoothing:antialiased;font-size:62.5%}.body{width:100%;margin:0 auto}.body.theme--dark{color:#eee;background-color:#152028}.body.theme--light{color:#464646;background-color:#fff}.header{width:100%;position:fixed;z-index:1;top:0}.theme--light .header{background-color:#fff}.theme--dark .header{background-color:#152028}@media screen and (min-width:961px){.header{position:sticky}.theme--light .header{border-bottom:1px solid #eee}.theme--dark .header{border-bottom:1px solid #464646}}@media print{.header{display:none}}.nav{display:none}@media screen and (min-width:961px){.nav{display:flex;justify-content:space-between;align-items:center;box-shadow:none}}@media print{.nav{display:flex;justify-content:space-between;align-items:center;box-shadow:none}}.nav__list{margin:0;list-style:none;padding:0;width:100%}.theme--light .nav__list{background-color:#eee}.theme--dark .nav__list{background-color:#464646}@media screen and (min-width:961px){.nav__list{display:flex;padding:24px 30px}.theme--light .nav__list{background-color:#fff}.theme--dark .nav__list{background-color:#152028}.nav__list--end{flex-shrink:1;justify-content:flex-end}}@media print{.nav__list{display:flex;padding:24px 30px}.theme--light .nav__list{background-color:#fff}.theme--dark .nav__list{background-color:#152028}.nav__list--end{flex-shrink:1;justify-content:flex-end}}.nav__list-item{padding:16px 0;text-transform:uppercase;text-align:center}@media screen and (min-width:961px){.nav__list-item{padding-top:0;padding-bottom:0}.nav__list-item:not(:last-child){padding-right:20px}}.nav__link--active{padding-bottom:24px}@media screen and (min-width:961px){.theme--light .nav__link--active{border-bottom:1px solid #464646}.theme--dark .nav__link--active{border-bottom:1px solid #eee}}.nav--active{display:block}.animated{transition:top .8s linear;animation-duration:1s;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;-webkit-animation-name:fadeInDown;-moz-animation-name:fadeInDown;-o-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDown{0%{-webkit-transform:translateY(-20px)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes fadeInDown{0%{-moz-transform:translateY(-20px)}100%{-moz-transform:translateY(0)}}@-o-keyframes fadeInDown{0%{-o-transform:translateY(-20px)}100%{-o-transform:translateY(0)}}@keyframes fadeInDown{0%{transform:translateY(-20px)}100%{transform:translateY(0)}}.category{padding:4px 6px;border-radius:2px;display:inline-block;font-size:1.4rem;margin:5px 8px 5px 0}.theme--light .category{border:1px solid #eee;background-color:#eee;color:#464646!important}.theme--dark .category{border:1px solid #464646;background-color:#464646;color:#eee!important}.tag{display:inline-block;font-size:1.4rem;margin:5px 8px 5px 0}.theme--light .tag{color:#9f9f9f}.theme--dark .tag{color:#9f9f9f}.tag::before{content:'#'}.wrapper{display:flex;flex-direction:column}@media screen and (min-width:961px){.wrapper{flex-direction:row}}@media screen and (min-width:1921px){.wrapper{justify-content:center}}.wrapper__main{width:100%}@media screen and (min-width:961px){.wrapper__main{width:calc(.6 * 100%)}}@media print{.wrapper__main{width:calc(.6 * 100%)}}@media screen and (min-width:1921px){.wrapper__main{width:calc(.6 * 80%)}}.wrapper__sidebar{width:100%;padding:16px 0}@media screen and (min-width:961px){.wrapper__sidebar{width:calc(calc(1 - .6) * 100%);padding:0}}@media print{.wrapper__sidebar{width:calc(calc(1 - .6) * 100%);padding:0}}@media screen and (min-width:1921px){.wrapper__sidebar{width:calc(calc(1 - .6) * 80%)}}.sidebar{margin-top:40px}@media screen and (min-width:961px){.sidebar{z-index:2;position:fixed;height:100%;margin-top:0;width:inherit;display:flex;flex-direction:column}.theme--light .sidebar{margin-right:4px;border-right:1px solid #eee}.theme--dark .sidebar{margin-right:4px;border-right:1px solid #464646}}@media print{.sidebar{z-index:2;position:fixed;height:100%;margin-top:0;width:inherit;display:flex;flex-direction:column}.theme--light .sidebar{margin-right:4px;border-right:1px solid #eee}.theme--dark .sidebar{margin-right:4px;border-right:1px solid #464646}}@media screen and (min-width:961px){.sidebar__content{display:flex;flex-direction:column;flex-grow:1;justify-content:center}}@media print{.sidebar__content{display:flex;flex-direction:column;flex-grow:1;justify-content:center}}.sidebar__list{list-style:none;padding:0;text-align:center}.sidebar__list-item{display:inline;padding:0 4px;line-height:0}.sidebar__introduction{top:40%;text-align:center}.sidebar__introduction-description{margin:0 1em}.sidebar__introduction-profileimage{width:127px;height:127px;border-radius:50%}.sidebar__introduction-title{text-transform:uppercase;font-weight:700;letter-spacing:2px;line-height:1;margin:1em}.sidebar__introduction-title a{font-size:3.2rem}.footer{text-align:center;margin:0 auto;bottom:0;width:100%;padding-bottom:20px;flex:0;position:relative}.footer__list{list-style:none;padding:0;display:flex;justify-content:center}.footer__item{font-size:1.4rem}.footer__item:not(:first-of-type)::before{content:'\00B7';padding:4px}.footer__item a{font-size:1.4rem}.footer__sidebar{display:none}@media screen and (min-width:961px){.footer__sidebar{display:inline-block}}@media print{.footer__sidebar{display:inline-block}}@media screen and (min-width:961px){.footer__base{display:none}}@media print{.footer__base{display:none}}.pagination{margin:30px;padding:0 0 56px;text-align:center}.pagination__list{list-style:none;margin:0;padding:0;height:13px}.pagination__list-item{margin:0 2px;display:inline;line-height:1;text-decoration:none}.theme--light .pagination__list-item{color:#464646}.theme--dark .pagination__list-item{color:#eee}.navbar-burger{cursor:pointer;display:block;height:3.25rem;position:relative;width:3.25rem;margin-left:auto}.navbar-burger__line{display:block;height:1px;left:calc(50% - 8px);position:absolute;transform-origin:center;transition-duration:86ms;transition-property:background-color,opacity,transform;transition-timing-function:ease-out;width:16px}.theme--light .navbar-burger__line{background-color:#464646}.theme--dark .navbar-burger__line{background-color:#eee}.navbar-burger__line:nth-child(1){top:calc(50% - 6px)}.navbar-burger__line:nth-child(2){top:calc(50% - 1px)}.navbar-burger__line:nth-child(3){top:calc(50% + 4px)}@media screen and (min-width:961px){.navbar-burger{display:none}}.comment{margin:30px}.comment .utterances{max-width:unset}.languageswitch{position:relative}.languageswitch__label{cursor:pointer;white-space:nowrap}.languageswitch__list{display:none;list-style:none;padding:0;position:relative}@media screen and (min-width:961px){.languageswitch__list{border-radius:5px;position:absolute;top:32px}.theme--light .languageswitch__list{background:#eee;box-shadow:0 8px 16px rgba(10,10,10,.1)}.theme--dark .languageswitch__list{background:#464646;box-shadow:0 8px 16px rgba(226,226,226,.1)}}.languageswitch__list-item{background:0 0;display:block;line-height:1;bottom:0;text-align:center;white-space:nowrap;padding-top:24px}.theme--light .languageswitch__list-item{color:#464646}.theme--dark .languageswitch__list-item{color:#eee}@media screen and (min-width:961px){.languageswitch__list-item{padding:12px}}.languageswitch__triangle{display:none}.languageswitch__triangle::before{content:'';border-radius:2px 0 0 0;height:14px;left:calc(50%/2);overflow:hidden;position:absolute;transform:rotate(45deg)translateY(0)translatex(10px);width:14px}.theme--light .languageswitch__triangle::before{background:#eee;box-shadow:0 8px 16px rgba(10,10,10,.1);border-color:#eee}.theme--dark .languageswitch__triangle::before{background:#464646;box-shadow:0 8px 16px rgba(226,226,226,.1);border-color:#464646}.languageswitch__picker:checked~.languageswitch__list{display:block}@media screen and (min-width:961px){.languageswitch__picker:checked~.languageswitch__triangle{display:block}}.post{margin:30px}.theme--light .post{background-color:#fff}.theme--dark .post{background-color:#152028}.post__meta{display:flex;list-style:none;padding:0}.post__meta-item:not(:last-child){margin-right:1.25rem}.post__meta-icon{margin-right:2px}.post__meta-text:not(:last-child){margin-right:4px}.post__thumbnail{width:100%;height:15em;object-fit:cover;display:block}.post__thumbnail-wrapper{border-radius:2px;width:100%;margin-bottom:1em;overflow:hidden;transition:box-shadow .3s ease}.theme--light .post__thumbnail-wrapper{box-shadow:0 8px 16px rgba(10,10,10,.1)}.theme--dark .post__thumbnail-wrapper{box-shadow:0 8px 16px rgba(226,226,226,.1)}.theme--light .post__content a{color:#0366d7}.theme--dark .post__content a{color:#0366d7}.post__content code{font-family:monospace;padding:0 2px}.theme--light .post__content code{background-color:#eee;border:1px solid #eee;border-radius:2px}.theme--dark .post__content code{background-color:#464646;border:1px solid #464646;border-radius:2px}.post__content pre{padding:5px;overflow-x:auto}.theme--light .post__content pre{background-color:#eee}.theme--dark .post__content pre{background-color:#464646}.post__content h1{font-size:3.6rem;text-transform:uppercase;letter-spacing:1px;line-height:1}.post__content h1 a{font-size:3.6rem}.theme--light .post__content h1 a{color:#464646}.theme--dark .post__content h1 a{color:#eee}.post__content h2{font-size:2.4rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;line-height:1}.post__content h2 a{font-size:2.4rem}.theme--light .post__content h2 a{color:#464646}.theme--dark .post__content h2 a{color:#eee}.post__content h3{font-size:2rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;line-height:1}.post__content h3 a{font-size:2rem}.theme--light .post__content h3 a{color:#464646}.theme--dark .post__content h3 a{color:#eee}.post__content ul,.post__content ol{line-height:1.9em;font-weight:400}.post__content img{display:block;margin-left:auto;margin-right:auto;max-width:100%}.post__content figure{max-width:100%;height:auto;margin:0;text-align:center}.post__content figure.big{max-width:100vw}@media screen and (min-width:961px){.post__content figure.right{max-width:50%;float:right;margin-left:1.5em}}@media screen and (min-width:961px){.post__content figure.left{max-width:50%;float:left;margin-right:1.5em}}.post__footer{padding:12px 0}.theme--light .post__footer{border-bottom:1px solid #eee}.theme--dark .post__footer{border-bottom:1px solid #464646}.post__footer-date{font-size:1.4rem;margin-right:10px;margin-left:5px}.alert{padding:1rem;border-style:solid;border-radius:.25rem;border-width:2px;margin-top:1rem}.theme--light .alert{border-color:#ffc107}.theme--dark .alert{border-color:#ffc107}.alert__indicator{display:inline-block;border-radius:9999px;padding:.5rem;width:2.5rem;height:2.5rem;text-align:center;font-weight:800;margin-right:.75rem}.theme--light .alert__indicator{color:#fff;background-color:#ffc107}.theme--dark .alert__indicator{color:#152028;background-color:#ffc107}.portfolio{position:relative;padding-left:0;padding-right:0;padding-bottom:0;padding-top:48px}@media screen and (min-width:961px){.portfolio{padding:48px}}@media print{.portfolio{padding:48px}}.portfolio::before{content:'';position:absolute;top:10%;left:10%;bottom:10%;right:10%;background:0 0;border-radius:.5em}@media screen and (min-width:961px){.theme--light .portfolio::before{border:1px solid #eee}.theme--dark .portfolio::before{border:1px solid #464646}}@media print{.theme--light .portfolio::before{border:1px solid #eee}.theme--dark .portfolio::before{border:1px solid #464646}}.portfolio__title{text-transform:uppercase;letter-spacing:1px;font-size:2.6rem;line-height:1;font-weight:600}.portfolio__image{max-width:100%;min-width:100%;box-shadow:0 8px 16px rgba(226,226,226,.1);overflow:hidden;transition:box-shadow .3s ease;object-fit:cover;border-bottom:0;display:block;position:relative}.portfolio__image-wrapper{display:block;background-color:#fff;position:relative;overflow:hidden}.portfolio__image-wrapper--right,.portfolio__image-wrapper--left{margin-right:auto;margin-left:auto;width:calc(100% - 64px);padding:32px 32px 0;max-width:inherit}.theme--light .portfolio__image-wrapper--right,.theme--light .portfolio__image-wrapper--left{background-color:#fff}.theme--dark .portfolio__image-wrapper--right,.theme--dark .portfolio__image-wrapper--left{background-color:#152028}@media screen and (min-width:961px){.portfolio__image-wrapper--right,.portfolio__image-wrapper--left{width:60%;object-fit:contain;max-width:none;border-radius:.5em;padding:0}}@media print{.portfolio__image-wrapper--right,.portfolio__image-wrapper--left{width:60%;object-fit:contain;max-width:none;border-radius:.5em;padding:0}}@media screen and (min-width:961px){.portfolio__image-wrapper--left{margin-right:auto;margin-left:0}}@media print{.portfolio__image-wrapper--left{margin-right:auto;margin-left:0}}@media screen and (min-width:961px){.portfolio__image-wrapper--right{margin-right:0;margin-left:auto}}@media print{.portfolio__image-wrapper--right{margin-right:0;margin-left:auto}}.portfolio__description{padding:32px;position:relative}.theme--light .portfolio__description{background-color:#fff}.theme--dark .portfolio__description{background-color:#152028}@media screen and (min-width:961px){.portfolio__description{padding:48px;border-radius:.5em}.theme--light .portfolio__description{box-shadow:0 8px 16px rgba(10,10,10,.1)}.theme--dark .portfolio__description{box-shadow:0 8px 16px rgba(226,226,226,.1)}}@media print{.portfolio__description{padding:48px;border-radius:.5em}.theme--light .portfolio__description{box-shadow:0 8px 16px rgba(10,10,10,.1)}.theme--dark .portfolio__description{box-shadow:0 8px 16px rgba(226,226,226,.1)}}.portfolio__description--left,.portfolio__description--right{margin-top:-24px}.theme--light .portfolio__description--left,.theme--light .portfolio__description--right{border-bottom:1px solid #eee}.theme--dark .portfolio__description--left,.theme--dark .portfolio__description--right{border-bottom:1px solid #464646}@media screen and (min-width:961px){.portfolio__description--left,.portfolio__description--right{border-bottom:0;width:60%;margin-top:-48px}.theme--light .portfolio__description--left,.theme--light .portfolio__description--right{background:#eee}.theme--dark .portfolio__description--left,.theme--dark .portfolio__description--right{background:#464646}}@media print{.portfolio__description--left,.portfolio__description--right{border-bottom:0;width:60%;margin-top:-48px}.theme--light .portfolio__description--left,.theme--light .portfolio__description--right{background:#eee}.theme--dark .portfolio__description--left,.theme--dark .portfolio__description--right{background:#464646}}@media screen and (min-width:961px){.portfolio__description--right{margin-left:auto}}@media print{.portfolio__description--right{margin-left:auto}}.portfolio__button{font-weight:400;display:inline-block;position:relative;outline:0;background:0 0;text-align:center;text-decoration:none;cursor:pointer;white-space:nowrap;font-style:normal;border-radius:999em;padding:10px}.theme--light .portfolio__button{border:1px solid #9f9f9f;color:#0366d7}.theme--dark .portfolio__button{border:1px solid #9f9f9f;color:#0366d7}.portfolio__button:hover{display:inline-block;position:relative;outline:0;background:0 0;text-align:center;text-decoration:none;cursor:pointer;white-space:nowrap;font-weight:400;font-style:normal;border-radius:999em}.portfolio__button-wrapper{padding-bottom:1em}.page_404{text-align:center;padding-top:50px}.archive{margin:30px}.archive__heading{font-size:2.4rem;font-weight:600;line-height:2.2em}.theme--light .archive__heading{color:#464646}.theme--dark .archive__heading{color:#eee}.archive__list{padding:0}.archive__list-item{display:flex;justify-content:space-between;padding-bottom:5px;list-style-type:none}.archive__list-date{text-align:right}.theme--light .archive__list-date{color:#9f9f9f}.theme--dark .archive__list-date{color:#9f9f9f}.archive__list-title{display:inline-block;flex:.96}.theme--light .archive__list-title{color:#464646}.theme--dark .archive__list-title{color:#eee}.theme--light .archive__list-title:hover{color:#0366d7}.theme--dark .archive__list-title:hover{color:#0366d7}.medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity 300ms;will-change:opacity}.theme--light .medium-zoom-overlay{background:#fff}.theme--dark .medium-zoom-overlay{background:#152028}.medium-zoom--opened .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform 300ms cubic-bezier(.2,0,.2,1)!important;z-index:100}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}.contact-form{margin-top:30px}.form-style{width:100%}.form-style ul{padding:0;margin:0;list-style:none}.form-style ul li{display:block;margin-bottom:10px;min-height:35px}.theme--light .form-style ul li{background-color:#fff;color:#464646}.theme--dark .form-style ul li{background-color:#152028;color:#eee}.form-style ul li .field-style{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:8px;outline:none;font-family:inherit}.theme--light .form-style ul li .field-style{border:1px solid #eee;background-color:#fff;color:#464646}.theme--dark .form-style ul li .field-style{border:1px solid #464646;background-color:#152028;color:#eee}.form-style ul li .field-style:focus{box-shadow:0 0 5px;border:1px solid}.form-style ul li .field-split{width:49%}.form-style ul li .field-full{width:100%}.form-style ul li input.align-left{float:left}.form-style ul li input.align-right{float:right}.form-style ul li textarea{width:100%;height:auto}.form-style ul li input[type=button],.form-style ul li input[type=submit]{display:inline-block;cursor:pointer;text-decoration:none;width:100%}#TableOfContents{display:block;background:0 0}#TableOfContents ul{list-style:none;line-height:1.9em;margin:0}#TableOfContents>ul{padding-left:0}#TableOfContents li a{display:inherit;color:#0366d7}#TableOfContents li a:hover{display:inherit}
\ No newline at end of file
diff --git a/resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.json b/resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.json
new file mode 100644
index 0000000..01f99ad
--- /dev/null
+++ b/resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.json
@@ -0,0 +1 @@
+{"Target":"scss/main.min.701fd2854a758b1d755397addb7c7ad9c94f550c78a1265670472d42bc80cb11.css","MediaType":"text/css","Data":{"Integrity":"sha256-cB/ShUp1ix11U5et23x62clPVQx4oSZWcEctQryAyxE="}}
\ No newline at end of file

--
Gitblit v1.10.0