diff --git a/config.toml b/config.toml
index b68af075..a13abd6f 100644
--- a/config.toml
+++ b/config.toml
@@ -88,12 +88,9 @@ url = "/blog/"
 [[languages.en.menu.main]]
 name = "Posts"
 weight = 300
-url = "/posts/"
+url = "/post/"
+
 
-[[languages.en.menu.main]]
-name = "Snaps"
-weight = 400
-url = "/snaps/"
 
 [languages.jp]
 weight = 10
@@ -105,16 +102,11 @@ weight= 100
 url = "/jp/"
 
 [[languages.jp.menu.main]]
-name = "ブログ"
+name = "全部のブログ"
 weight = 200
 url = "/jp/blog/"
 
 [[languages.jp.menu.main]]
-name = "SNS"
+name = "記事"
 weight = 300
-url = "/jp/posts/"
-
-[[languages.jp.menu.main]]
-name = "写真"
-weight = 400
-url = "/jp/snaps/"
+url = "/jp/post/"
diff --git a/content/css/style.css b/content/css/style.css
index 3179b31e..3e255d9f 100644
--- a/content/css/style.css
+++ b/content/css/style.css
@@ -4,19 +4,79 @@ html { font-family: 'Inter', sans-serif; height:100%;}
 @supports (font-variation-settings: normal) {
   html { font-family: 'Inter var', sans-serif; }
 }
+:root {
+  --dark-link:#59ABE3;
+  --dark-text:#f8f8f8;
+  --dark-bg:#2b2b2b;
+  --dark-opacity: 0.75;
+  --light-text:#2b2b2b;
+  --light-bg:#f8f8f8;
+  --light-link:#0065BF;
+  --light-opacity:1;
+
+  --text-colour: var(--dark-text);
+  --bg-colour: var(--dark-bg);
+  --link-colour: var(--dark-link);
+  --opacity-img: var(--dark-opacity);
+}
+
+@media (prefers-color-scheme: light) {
+    --text-colour: var(--light-text);
+    --bg-colour: var(--light-bg);
+    --link-colour: var(--light-link);
+    --opacity-img: var(--light-opacity);
+
+}
+[data-theme="light"]{
+  --text-colour: var(--light-text);
+  --bg-colour: var(--light-bg);
+  --link-colour: var(--light-link);
+  --opacity-img: var(--light-opacity);
+}
+
+/* Switched mode */
+
+.theme-switch:checked + *,
+.theme-switch:checked + * + *{
+  --text-colour:var(--light-text);
+  --bg-colour:var(--light-bg);
+  --link-colour:var(--light-link);
+  --opacity-img: var(--light-opacity);
+}
+
+.theme-switch{
+  display:none;
+}
+
+.light{
+  display:inline;
+  float:right;
+  color:var(--text-colour);
+}
+
 html {
-  background-color: #fff;
-  -webkit-font-smoothing: antialiased;
+  -webkit-animation-fill-mode: forwards;
 }
 
 body {
-  color: rgba(0, 0, 0, 0.8);
+  color: var(--text-colour);
   font-size: 15px;
   width: 100%;
   margin: 0 auto 30px auto;
-  background-color: #2b2b2b;
+  background: var(--bg-colour);
+}
+#page{
+  display:block;
+  height:100%;
+  color: var(--text-colour);
+  background: var(--bg-colour);
+}
+.main, .content {
+  background: var(--bg-colour);
+  color: var(--text-colour);
+  height:100%;
+  display:block;
 }
-
 p {
   line-height: 1.9em;
   font-weight: 400;
@@ -27,25 +87,29 @@ a {
   text-decoration: none;
 }
 
+img {
+  opacity: var(--opacity-img);
+  transition: opacity .5s ease-in-out;
+}
+img:hover {
+  opacity: 1
+}
 .category {
   padding: 4px 6px;
   border-radius: 3px;
-  color: #fff;
-  background-color: #f9f9fd;
-  border: 1px solid #f2f2f2;
+  border: 1px solid var(--text-colour);
 }
 
 .blog {
   padding: 4px 6px;
   border-radius: 3px;
-  color: #fff;
-  background-color: #0065bf;
-  border: 1px solid #f2f2f2;
+  background: var(--link-colour);
+  border: 1px solid var(--text-colour);
 }
 
 .tag::before {
   content: "#";
-  opacity: .5;
+  opacity: .75;
 }
 
 .tag, .category {
@@ -56,7 +120,7 @@ a {
 }
 
 pre {
-  background-color: #f9f9fd;
+  background: var(--bg-colour);
   padding: 5px;
 }
 
@@ -72,99 +136,35 @@ a:link, a:visited {
   -o-transition: all .15s linear;
   -ms-transition: all .15s linear;
   transition: all .15s linear;
-  color: #424242;
+  color: var(--text-colour);
 }
 
 a:hover, a:active {
-  color: #0065BF;
-}
-
-/*basic styles ends*/
-/*animation starts*/
-.animated {
-  -webkit-animation-fill-mode: both;
-  -moz-animation-fill-mode: both;
-  -ms-animation-fill-mode: both;
-  -o-animation-fill-mode: both;
-  animation-fill-mode: both;
-  -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% {
-    opacity: 0;
-    -webkit-transform: translateY(-20px);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform: translateY(0);
-  }
-}
-@-moz-keyframes fadeInDown {
-  0% {
-    opacity: 0;
-    -moz-transform: translateY(-20px);
-  }
-  100% {
-    opacity: 1;
-    -moz-transform: translateY(0);
-  }
-}
-@-o-keyframes fadeInDown {
-  0% {
-    opacity: 0;
-    -o-transform: translateY(-20px);
-  }
-  100% {
-    opacity: 1;
-    -o-transform: translateY(0);
-  }
-}
-@keyframes fadeInDown {
-  0% {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-.fadeInDown {
-  -webkit-animation-name: fadeInDown;
-  -moz-animation-name: fadeInDown;
-  -o-animation-name: fadeInDown;
-  animation-name: fadeInDown;
+  color: var(--link-colour);
 }
 
-/*animation ends*/
 .content {
-  height: auto;
+  background: var(--bg-colour);
+  position:fixed;
+  left:30%;
+  height: 100%;
   float: right;
   width: 70%;
   margin-top: 60px;
+  overflow:auto;
+  -ms-overflow-style:none;
+}
+.content::-webkit-scrollbar{
+  display:none;
 }
-
 .page-top {
   width: 70%;
   position: fixed;
   right: 0;
   z-index: 3;
-  background-color: #fff;
   height: 60px;
-  border-bottom: 1px solid #f2f2f2;
+  border-bottom: 1px solid var(--text-colour);
+    background: var(--bg-colour);
 }
 .page-top .nav {
 width:90%;
@@ -173,21 +173,16 @@ width:90%;
   float: left;
   font-size: 14px;
 }
-.page-top .nav li, .page-top .language-selector li {
+.page-top .nav li{
   position: relative;
   display: initial;
   padding-right: 20px;
 }
 .page-top .nav a {
-  color: #5A5A5A;
+  color: var(--text-colour);
 }
 .page-top .nav a:hover {
-  color: #0065BF;
-}
-.page-top .nav a.current {
-  color: #5A5A5A;
-  padding-bottom: 22px;
-  border-bottom: 1px solid #5A5A5A;
+  color: var(--link-colour);
 }
 .page-top .information{
   float: right;
@@ -214,39 +209,42 @@ width:90%;
 .page-top .language-selector {
   float:right;
   position:relative;
-  top:-5px;
-  padding-bottom:22px;
-}
-.page-top .language-selector img{
-  display:inline;
-  position:fixed;
-  margin:0;
-  padding:10px;
-  top:0;
+  display:inline-flex;
+  top:-11px;
 }
 .page-top .language-selector ul{
-  display:inline;
   list-style:none;
-  position:relative;
-  margin-top:5px;
+  padding-bottom:0;
+  margin:0;
 }
 .page-top .language-selector li{
   vertical-align:top;
-  margin:10px;
+  margin:0;
+  padding-bottom:22px;
+}
+.page-top .language-selector li div{
+  position:relative;
+  height:50px;
+  display:inline;
+  top:-5px;
+  left:-5px;
+  margin-right:5px;
+}
+.page-top .language-selector i{
+  padding-bottom:15px;
+  margin-top:5px;
 }
-
 .sidebar {
   width: 30%;
+  background: var(--bg-colour);
   -webkit-background-size: cover;
   background-size: cover;
-  background-color: #fff;
   height: 100%;
-  transition: 0.8s;
   top: 0;
   left: 0;
   position: fixed;
   z-index: 4;
-  border-right: 1px solid #f2f2f2;
+  border-right: 1px solid var(--text-colour);
 }
 .sidebar #logo{
   max-width: 300px;
@@ -263,7 +261,7 @@ width:90%;
   font-size: 14px;
   width: 60%;
   margin: 0 auto;
-  color: #565654;
+  color: var(--text-colour);
   padding-bottom:10px;
 }
 .sidebar .logo-title .logo {
@@ -279,7 +277,7 @@ width:90%;
 }
 .sidebar .logo-title .title a {
   text-decoration: none;
-  color: #464646;
+  color: var(--text-colour);
   font-size: 2rem;
   font-weight: bold;
 }
@@ -298,14 +296,13 @@ width:90%;
   line-height: 0;
 }
 .sidebar .social-links a {
-  color: #565654;
+  color: var(--text-colour);
 }
 .sidebar .social-links a:hover {
-  color: #0065BF;
+  color: var(--link-colour);
 }
-
 .post {
-  background-color: #FFF;
+  background: var(--bg-colour);
   margin: 30px;
   width:80%;
   padding-left:20px;
@@ -328,28 +325,28 @@ width:90%;
   font-size: 28px;
   line-height: 1;
   font-weight: 600;
-  color: #5f5f5f;
+  color: var(--text-colour);
 }
 .post .post-title h3 {
   text-transform: uppercase;
   letter-spacing: 1px;
   line-height: 1;
   font-weight: 600;
-  color: #464646;
+  color: var(--text-colour);
   font-size: 22px;
   margin: 0;
 }
 .post .post-title a {
   text-decoration: none;
   letter-spacing: 1px;
-  color: #5f5f5f;
+  color: var(--text-colour);
 }
 .post .post-title a:hover {
   text-decoration: underline;
 }
 .post .post-content a {
   text-decoration: none;
-  color: #0065BF;
+  color: var(--link-colour);
 }
 
 .post .post-content table {
@@ -357,7 +354,7 @@ width:90%;
 }
 
 .post .post-content table,.post .post-content table td, .post .post-content table th{
-  border: 1px dashed #2b2b2b;
+  border: 1px dashed var(--text-colour);
 }
 
 .post .post-content table tr:nth-child(even) {
@@ -367,15 +364,15 @@ width:90%;
   padding: 15px
 }
 .post .post-content a:hover {
-  color: #2F69B3;
+  color: var(--link-colour);
 }
 .post .post-content h3 {
-  color: #5F5F5F;
+  color: var(--text-colour);
   font-size: 22px;
   font-weight: 600;
 }
 .post .post-content h4 {
-  color: #5F5F5F;
+  color: var(--text-colour);
   font-size: 16px;
 }
 .post .post-content img {
@@ -387,12 +384,12 @@ width:90%;
 }
 .post .post-footer {
   padding: 0 0 30px 0;
-  border-bottom: 1px solid #f2f2f2;
+  border-bottom: 1px solid var(--text-colour);
 }
 .post .post-footer .meta {
   max-width: 100%;
   height: 25px;
-  color: #bbbbbb;
+  color: var(--text-colour);
 }
 .post .post-footer .meta .info {
   float: left;
@@ -410,17 +407,17 @@ width:90%;
 }
 .post .post-footer .meta a {
   text-decoration: none;
-  color: #bbbbbb;
+  color: var(--text-colour);
   padding-right: 10px;
 }
 .post .post-footer .meta a:hover {
-  color: #0065BF;
+  color: var(--link-colour);
 }
 .post .post-footer .blog{
-  color: #f8f8f8;
+  color: var(--text-colour);
 }
 .post .post-footer .blog:hover{
-  color: #2b2b2b;
+  color: var(--text-colour);
 }
 .post .post-footer .meta i {
   margin-right: 6px;
@@ -443,7 +440,7 @@ width:90%;
 }
 .post .post-footer .tags a {
   text-decoration: none;
-  color: rgba(0, 0, 0, 0.44);
+  color: var(--text-colour);
   font-weight: 400;
 }
 .post .post-footer .tags a:hover {
@@ -453,7 +450,7 @@ width:90%;
 .pagination {
   margin: 30px;
   padding: 0px 0 56px 0;
-  border-bottom: 1px solid #f2f2f2;
+  border-bottom: 1px solid var(--text-colour);
 }
 .pagination ul {
   list-style: none;
@@ -496,11 +493,6 @@ width:90%;
   right: 6px;
 }
 
-#disqus_thread {
-  margin: 30px;
-  border-bottom: 1px solid #f2f2f2;
-}
-
 .footer {
   clear: both;
   text-align: center;
@@ -510,29 +502,34 @@ width:90%;
   position: absolute;
   width: 100%;
   padding-bottom: 20px;
-  background: #fff;
+  background: var(--bg-colour);
 }
 
 .footer a {
-  color: #A6A6A6;
+  color: var(--text-colour);
 }
 .footer a:hover {
-  color: #0065BF;
+  color: var(--link-colour);
 }
 
 /*for archive*/
 .archive {
   width: 80%;
 }
+.description {
+  color: var(--text-colour);
+}
 .list-title{
   margin:30px;
   font-size:30px;
   font-weight:bold;
+  color: var(--text-colour);
 }
 
 .list-title i{
   font-size:22px;
   vertical-align:middle;
+  color: var(--text-colour);
 }
 
 .list-with-title {
@@ -546,7 +543,7 @@ width:90%;
 }
 .list-with-title .listing-title {
   font-size: 24px;
-  color: #666666;
+  color: var(--text-colour);
   font-weight: 600;
   line-height: 2.2em;
 }
@@ -558,13 +555,13 @@ width:90%;
 }
 .list-with-title .listing .listing-post .post-time {
   float: right;
-  color: #C5C5C5;
+  color: var(--text-colour);
 }
 .list-with-title .listing .listing-post a {
-  color: #8F8F8F;
+  color: var(--text-colour);
 }
 .list-with-title .listing .listing-post a:hover {
-  color: #0065BF;
+  color: var(--link-colour);
 }
 
 /* share */
@@ -738,6 +735,7 @@ a.btn {
   margin:0 auto;
   display:block;
 }
+
 @media screen and (max-width: 960px) {
   .sidebar {
     width: 100%;
@@ -770,6 +768,8 @@ a.btn {
     width: 100%;
     z-index: 2;
     position: absolute;
+    left:0;
+    height:100%;
   }
 
   .about, .post{
diff --git a/content/favicons/android-chrome-144x144.png b/content/favicons/android-chrome-144x144.png
new file mode 100644
index 00000000..62bad264
Binary files /dev/null and b/content/favicons/android-chrome-144x144.png differ
diff --git a/content/favicons/apple-touch-icon.png b/content/favicons/apple-touch-icon.png
new file mode 100644
index 00000000..62706304
Binary files /dev/null and b/content/favicons/apple-touch-icon.png differ
diff --git a/content/favicons/browserconfig.xml b/content/favicons/browserconfig.xml
new file mode 100644
index 00000000..d469e489
--- /dev/null
+++ b/content/favicons/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/favicons/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/content/favicons/favicon-16x16.png b/content/favicons/favicon-16x16.png
new file mode 100644
index 00000000..f562aef7
Binary files /dev/null and b/content/favicons/favicon-16x16.png differ
diff --git a/content/favicons/favicon-32x32.png b/content/favicons/favicon-32x32.png
new file mode 100644
index 00000000..7ee6f636
Binary files /dev/null and b/content/favicons/favicon-32x32.png differ
diff --git a/content/favicons/favicon-48x48.png b/content/favicons/favicon-48x48.png
new file mode 100644
index 00000000..8c82b073
Binary files /dev/null and b/content/favicons/favicon-48x48.png differ
diff --git a/content/favicons/favicon.ico b/content/favicons/favicon.ico
new file mode 100644
index 00000000..9c0eba53
Binary files /dev/null and b/content/favicons/favicon.ico differ
diff --git a/content/favicons/mstile-150x150.png b/content/favicons/mstile-150x150.png
new file mode 100644
index 00000000..f27455a7
Binary files /dev/null and b/content/favicons/mstile-150x150.png differ
diff --git a/content/favicons/safari-pinned-tab.svg b/content/favicons/safari-pinned-tab.svg
new file mode 100644
index 00000000..ceb84cc0
--- /dev/null
+++ b/content/favicons/safari-pinned-tab.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="180.000000pt" height="180.000000pt" viewBox="0 0 180.000000 180.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,180.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M0 900 l0 -900 900 0 900 0 0 900 0 900 -900 0 -900 0 0 -900z"/>
+</g>
+</svg>
diff --git a/content/favicons/site.webmanifest b/content/favicons/site.webmanifest
new file mode 100644
index 00000000..c6af6485
--- /dev/null
+++ b/content/favicons/site.webmanifest
@@ -0,0 +1,14 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/favicons/android-chrome-144x144.png",
+            "sizes": "144x144",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
diff --git a/content/images/Language-Icons/icon24x24px-exported.png b/content/images/Language-Icons/icon24x24px-exported.png
new file mode 100644
index 00000000..5a5ac588
Binary files /dev/null and b/content/images/Language-Icons/icon24x24px-exported.png differ
diff --git a/content/post/beer-journal-introduction/index.jp.md b/content/post/beer-journal-introduction/index.jp.md
new file mode 100644
index 00000000..29003607
--- /dev/null
+++ b/content/post/beer-journal-introduction/index.jp.md
@@ -0,0 +1,36 @@
+---
+title: "Brewshido - A beer journal - Intro"
+date: 2019-03-25T13:20:07Z
+Blog: ["Brewshido"]
+categories: ["Homebrewing","自家製ビール","Craft Beer","クラフトビール"]
+tags: ["grainfather", "stewart brewing","グレーンファーザー","スチュワート・ブリューイング社"]
+draft: false
+image: ../images/img_20190126_162816.jpg
+---
+Some time ago, I made the decision that at some future point in my life I want to be a craft beer brewer.  For **reasons** this has not yet transpired but the dream still remains and recent plans to relocate to rural Japan in 4 years time provide potential opportunity for the wheels to be put in motion.
+
+以前からずっと、将来ビール醸造者になりたいと思っていました。まだまだ夢の段階ですが、4年後ぐらいに日本の田舎に引っ越す予定なので、達成可能な夢だと思います。
+
+My only experience thus far of brewing was when a few years ago, a friend invited myself and a few others to the [Stewart Brewing Craft Beer Kitchen](https://www.stewartbrewing.co.uk/craft-beer-kitchen/) where under the guidance of a resident brewer we had a fairly decent go at making a _milk stout_.  The day in the brew kitchen was excellent and really encouraged me to learn more about the process.
+
+今までにビールを作ったことが一度だけあります。その時は友達と一緒にStewart Brewing Craft Beer Kitchen(スチュワート・ブルーイング・クラフトビール・キッチン)でビール醸造者からミルクスタウトの作り方を学びました。それはとても面白い経験だったので、ビールの作り方についてもっと学ぶように励まされました。
+
+As it stands, in a room which was formerly a garage but hasn't quite finished it's conversion into anything resembling usable, sits a [Grainfather All Grain Brewing System](https://www.grainfather.com/) along with a conical fermenter, a large urn and various other brewing paraphernalia.  All as of yet, still boxed and awaiting their inaugural run.  I have a few other pieces to "invest" in before I'm ready to start brewing but the main barrier has been the unfinished room.. which will hopefully be finished soon.
+
+残念なことに、「Grainfather(グレーンファーザー）」というビール醸造機や円すい発酵槽、その他のいろいろな醸造の機器を買ったにもかかわらず、私はまだビールを醸造していません。できれば近いうちに最初のビールを作りたいです。
+
+I've been a member of the [Beer52](https://www.beer52.com) craft beer club since a month after its inception (_I think_) and have sampled many craft beers from around the planet and each month I learn a little more.  I initially started a paper journal, just recording the hop choices and tasting notes for the beers I was getting delivered, however that soon became tiresome and primarily delayed the drinking of the beer so I stopped. I still have a lot of learning to do and am hoping that recording my drinking and eventually brewing experiences will help me in this process.
+
+「Beer52]というクラフトビールクラブが始まってすぐの頃から、私は会員です。毎月いろいろな世界中からの新しいビールを試飲する度に、ビールについてもう少し深く学べています。でも、まだまだ勉強するつもりです。
+
+![Some reading materials](/images/img_20190325_140100.jpg)
+
+So, the purpose of this blog will be primarily self-education and note-taking but I hope that it provides some interesting reading for fellow enthusiasts who like myself don't necessarily have all the jargon knowledge of more seasoned professionals.
+
+このブログでビールの試飲や醸造の記録を書きながら、ビールの作り方について学んでいこうと思っています。このブログで他の方と興味を共有できれば幸いです。
+
+I'm categorising this journal under _brewshido_.. Bushido is the Japanese term for "way of the warrior" and I previously had a blog called bushidodreams (which can be found on this site).. so I'm coining the term _brewshido_ to mean the way of the brewer.  
+
+_I acknowledge that neither my brewing nor my Japanese language knowledge are of a sufficient level to warrant the brashness of coining a new word in my second language but it is what it is!_
+
+ところでビール醸造以外には、武士道と日本の歴史に興味があります。それで、Brewは「醸造」という意味なのです。でも私の日本語もビール醸造のレベルはまだまだですが、侍もビールも好きなので、ブログの名前をbrewshidoにしました。
diff --git a/content/post/beer-tasting-notes-op-and-top/index.jp.md b/content/post/beer-tasting-notes-op-and-top/index.jp.md
index 8ed12e44..2ae0f0aa 100644
--- a/content/post/beer-tasting-notes-op-and-top/index.jp.md
+++ b/content/post/beer-tasting-notes-op-and-top/index.jp.md
@@ -4,7 +4,7 @@ date: 2019-06-04T14:06:35Z
 Blog: ["Brewshido"]
 categories: ["Craft Beer","Tasting Notes"]
 tags: ["Brouwerij De Molen","Op & Top","sladek","amarillo","caramel malts","pils malts","English Bitter","Netherlands", "top fermenting yeast","イングランドのビッター","アマリロ","スラデック","上面発酵酵母","ピルスナーの大麦麦芽","キャラメルの大麦麦芽","オランダ"]
-image: /images/IMG_OpTop.jpg
+image: ../images/IMG_OpTop.jpg
 draft: false
 ---
 
diff --git a/content/post/chinook-what-i-made/index.jp.md b/content/post/chinook-what-i-made/index.jp.md
deleted file mode 100644
index 569273c9..00000000
--- a/content/post/chinook-what-i-made/index.jp.md
+++ /dev/null
@@ -1,141 +0,0 @@
----
-title: "Chinook What I Made"
-date: 2020-02-13T23:56:00+01:00
-Description: "Notes from brew day #3"
-Blog: ["Brewshido"]
-Categories: ["Homebrewing","自家製ビール","Craft Beer","クラフトビール"]
-Tags: ["brewstore", "grainfather", "グレーンファーザー","NEIPA","hop stand","late shift","fierce beer"]
-Image: /images/chinook-what-i-made/img_20200126_135830.jpg
-DisableComments: false
----
-After the [abject failure of my previous brew](/post/crying-tears-of-hazy-gold) determination was high.  Mistakes would not be made, at least not with regards to the most important stage of the process, sanitisation!  
-
-This was my first brew day with assistance, in the form of my dad, and having someone to "teach" really helped my focus throughout the day, not only were there considerably less mistakes there were also notable improvements throughout the steps compared to previous attempts.
-
-#### TL:DR I DIDN'T DESTROY THIS BEER!! WOOHOOO!!
-
-In my [summary of brew day ichi-ban](/post/and-so-it-begins) I described in detail (my understanding) of the steps involved so I'll not go into as much detail this time but will attempt to follow the same structure.
-
-#### The Beer Kit
-
-![19L New England IPA](/images/crying-tears-of-hazy-gold/19l_newenglandipa.jpg "New England IPA Beer Kit Label")
-
-The *[New England IPA 19L All Grain Beer Kit](https://www.brewstore.co.uk/19-l-new-england-ipa-all-grain-beer-kit)* was the same beer kit that I had used in the previous disastrous brew however due to issues with online payment I had to visit the [brew store](https://www.brewstore.co.uk/) to pick up, and the hops that were included in this kit were different from the previous kit.  I'm a novice so I didn't question this at the time but at various times during the brew I considered that perhaps I had been given the *wrong* hops.
-
-![Grain bill for brew 3](/images/crying-tears-of-hazy-gold/IMG_20191110_095159.jpg  "Grain bill for brew 3 - including oats")
-
-In the kit this time was a bag of mixed grains, 200 grams of *Chinook* hops as well as a sachet of *White Labs WLP066 London Fog Ale Yeast* (liquid).
-
-As previously ingredients were accompanied by some general brewing tips and the ...
-
-#### Brew Day Sheet
-
-This very handy two page guide split the brew into its composite stages and provided target temperatures, gravity readings and volumes as well as space for recording timings and measurements throughout the day. It was very useful and despite my occasional flapping it kept me pretty much on track. The composite parts of the sheet will be incorporated below in the stage sections.
-
-This was actually missing from the kit on this occasion but I had the previous brew's sheet and I noted all of the important steps and numbers in a notebook.
-
-#### Stage 0 - Prep!
-
-Not only did I clean and sanitise EVERYTHING immediately after the last brew, on the night before this one, I went through the whole process again!  This time however, on the advice of a [retired chemist](https://mastodon.social/users/wizardofosmium) on [the fediverse](/post/the-fediverse) I noted every measurement and each step down.  
-
-![Brewday 3 - Notes](/images/chinook-what-i-made/IMG_20200126_135322.jpg "Brewday 3 - Notes")
-
-In addition, to directly address the issue that wrecked my last beer, I bought accurate measuring devices in the form of a glass pipette set which enabled me to measure exactly 2ml of the 'no rinse' sanitiser in with 1 litre of water for the spray bottle.  
-
-![Brewday 3 - Pipettes](/images/chinook-what-i-made/IMG_20200126_095529.jpg "Brewday 3 - Pipettes")
-
-I also endeavoured to spray less enthusiastically, or rather less intensely.. enthusiasm levels were high regardless of the somewhat tedious task at hand.  The extra focus on preparation definitely provided a solid foundation for the next day's activities!
-
-#### Stage 1 - Striking & Mashing
-Another lesson learned from the previous brew was to heat the strike water as soon as I rolled out of bed, this meant that by the time the brew started the water was already at the correct temperature.. enabling me to spend just short of an extra hour with my daughter before I started in earnest.
-
-Previously, I had noted that the thermometer probe wasn't secure and had slipped out during the last brew.. this was firmly taped to the unit this time and didn't budge through the whole day.
-
-With the mash, we actually actively mashed and stirred the grain in for the entire duration of the water dropping from 76°C to 66°C.. this was tough work, I'm not entirely sure how long it took but my dad and I took turns, and in actively working the mash for the whole time we not only reduced the cool down time considerably but also released more sugars into the wort than previously.
-
-This stage was absolutely nailed, a marked improvement on previous attempts, and the benefits of having a brew buddy became very apparent, very quickly.
-
-#### Stage 2 - Lautering & Sparging
-
-According to the brew sheet for this NEIPA recipe, approximately 8-10 litres of 76°C water should be rinsed or *sparged* through the spent grains in order to hit a pre-boil wort volume of 25 litres.. I needed 12L which was the same as last time.  
-
-It could be that there are improvements that could be made to this part of the process so I'll maybe agitate the grain a bit more during this process to release more sugars and move the sparge water through, I suspect that of the 12L poured in a fair amount was still sitting within the grain cake.
-
-#### Stage 3 - Boiling
-
-Somewhat excitingly (likely to a very limited audience only) there was some proper protein build up as the wort hit the boiling point.  I had experienced this during a trip to the [Stewart Brewing Craft Beer Kitchen](https://www.stewartbrewing.co.uk/craft-beer-kitchen/) with friends a few years previous and was a little confused as to why it hadn't happened on my ealier brews.. but it seems that our increased activity during the mash stage was the reason.  What nice, natural, confirmatory feedback on our enhanced efforts!
-
-With the confidence that the thermometer probe was securely seated and accurately measuring temperature, after breaking up the protein with a paddle, the rest of the boil went very smoothly.  
-
-We filled the time reading brewing books and chatting about my future brewing plans in Japan.  As my dad was driving later in the day we weren't drinking.. my next brew buddy is a non-driver!
-
-![Brewday 3 - Books](/images/chinook-what-i-made/img_20200126_135830.jpg "Brewday 3 - Books")
-
-#### Stage 4 - Hop Additions
-
-There was an initial 50g of the *Chinook* hops as a 10 minute (from end of boil) addition, then the *hop stand* which involves lowering the temperature post-boil to 70-80°C, adding in another 50g of the hops and holding the hot *wort* at that temperature for 30-45 minutes, we went for 40 minutes at 76°C since 76 appears to be a special number.
-
-So far the *hop stand* seems to be a specific step for this style of beer and must contribute to the hazy or rather juicy look of the final beer.
-
-![Brewday 3 - Chinook Hops Label](/images/chinook-what-i-made/IMG_20200126_101634.jpg "Brewday 3 - Chinook Hops Label")
-
-Whilst we were reading in the previous stage, I had spotted a note attached to a recipe from [BrewDog's DIY DOG 2017](https://www.brewdog.com/blog/diy-dog-2017/) which stated that they get the best results when dry -hopping for 5 days (rather than 4 recommended elsewhere) at 14°C.  It wasn't overly clear if they meant specifically with the recipe the note was attached to or as a general rule of thumb but with my newly acquired chiller, I gave it a go.
-
-Hop schedule for this brew was:
-
-* 50g of hops at 10 minutes (50 minutes into boil)
-* 50g of hops post-boil in a hop stand
-* 100g of dry hops post-fermentation for 5 days at 14°C
-
-#### Stage 5 - Cooling
-
-Post-brew it occurred to me that I missed a step which could logically fit in this stage, I briefly mentioned it in [my first brew post](/post/and-so-it-begins) and will remember to do it next time.  
-
-The whirlpooling stage is primarily meant to separate *trub* (errant hops or grains which managed to escape the grain basket post-sparge) from the wort by dragging them down to the bottom of the .. boiling vessel.. but also the act of a 5 minute (yup!) whirlpool will also cool the wort a little, albeit slower than the cooling coil that comes with the *Grainfather*.
-
-We cooled the wort to 18°C and transferred into the fermenter at a higher elevation than before in previously in order to increase the oxygen in the wort for the hungry yeast.
-
-#### Stage 6 - Fermenting
-
-The target original gravity (OG) for this beer is 1.063 which on my previous disastrous brew I hit on the nose, this time though I missed it by a little, landing on 1.059.. There was about an extra litre of of pre-boil wort and it seems that this was extra sparge water resulting in a very slightly weaker final wort.
-
-![Brewday 3 - Hydrometer for measuring wort gravity](/images/chinook-what-i-made/IMG_20200126_135349.jpg "Brewday 3 - Hydrometer for measuring wort gravity")
-
-The fermentation of this beer was the most active (noisiest) so far.. even into day 8 there was still the occasional bubble through the airlock.  However, as previously experienced the active yeast increased the temperature of the wort in the fermenter, and it occurred to me finally that I had forgotten to buy a cooling system, so I ordered an inexpensive one and took immediate action whilst awaiting its delivery.
-
-On noticing the temperature creeping up to almost 23°C, my wife and I carefully moved the fermenter on to a worktop in the utility room, opened the window to a Scottish winter and watched the temperature drop.  The fermenter has a heating element so whenever it drops below the target temperature it slowly recovers.. so whilst there were a few periods where the temperature was slightly below 18°C, they were brief and the heat never exceeded 20°C for the remainder of the fermentation window.
-
-During the fermentation, I noted that the yeast dump deposits were a bit smaller than previously but this made sense because the yeast was .. expiring.. at a slower rate.  Where the fermenter previously went dormant after 4 days it stretched out twice as long this time before fermentation seemed to be done.
-
-Again though, my final gravity (FG) reading was higher than the target and this time I'm not sure why.  It was closer to the FG this time (1.026) than last time (1.033) so some progress is being made.  Perhaps I need to look into the pH levels of the water or perhaps it will improve upon the introduction of a 5 minute whirlpool.. This is a challenge I feel will take a bit of time to understand.
-
-As a result of missing both OG and FG targets my final ABV (according to the [Brewer's Friend Calculator](https://www.brewersfriend.com/abv-calculator/)) is 4.33% had I hit my OG this would have been 4.86%.
-
-For reference the following were my volume and gravity targets and final gravity (FG) results:
-
-* Desired Volume: 19L
-* Actual Volume: 19L
-* Desired OG: 1.063
-* Actual OG: 1.059
-* Desired FG: 1.013
-* Actual FG: 1.026
-* Desired ABV: 6.6%
-* Actual ABV: 4.3%
-
-#### Stage 7: Kegging & Carbonising
-
-I force-carbonated the beer for 2 days at 30PSI, brought it down to 12PSI for another 24 hours, hooked it up to the tap and lowered the pressure to 10PSI.  However, as I had noticed on my first brew this resulted in a slightly under-carbonated beer so I cranked up the PSI to 30 for another 24 hours.
-
-#### Stage 8: Drinking
-
-Vindication you taste awesome! OK, dialling it down a bit.. this is a tasty beer, I would be happy if I ordered this in a pub and would enjoy every last drop.  I wouldn't necessarily rush back to order it again though but that's an issue of personal taste..
-
-I like my NEIPAs to be almost fruit juice like, certain hops give off more fruity qualities that I think are better suited to a NEIPA than others.  *Chinook* has some of those qualities it seems but also some resin-y qualities, this is fine, [Fierce Beer](https://www.fiercebeer.com) make a very nice juicy beer which is quite resin-y ([Late Shift](https://www.fiercebeer.com/item/115/Late-Shift.html)) but it just isn't my personal preference.
-
-![Brewday 3 - NEIPA](/images/chinook-what-i-made/IMG_20200212_170526.jpg "Brewday 3 - NEIPA")
-
-As an exercise in brewing this was a fantastic experience and my confidence and enthusiasm has been restored.
-
-Will I drink this beer? Of course, with pride and I'll make it again, but next time I'll use *El Dorado* hops and see if they taste like I think they would taste without the accidental inclusion of sanitising chemicals.
-
-For the next brew, I have a friend joining me and whilst we enjoy this NEIPA, we'll be having a crack at an Imperial Stout.. arguably my favourite type of beer!
diff --git a/content/post/why-pixelfed/index.md b/content/post/why-pixelfed/index.md
index b3a46051..9c40cdac 100644
--- a/content/post/why-pixelfed/index.md
+++ b/content/post/why-pixelfed/index.md
@@ -57,9 +57,7 @@ This enables me to have a private account for photos of my daughter which are on
 
 Embedding! You can now embed photos and profiles into other blogs or web pages, which is nice!
 
-{{< pixelfed jk 10718986968773836 500 840 >}}
-
-<center><iframe src="https://px.nipponalba.scot/p/jk/107189869687738368/embed?caption=true&likes=false&layout=full" class="pixelfed__embed" style="max-width: 100%; border: 0" width="500" height=" 840px" allowfullscreen="allowfullscreen"></iframe><script async defer src="https://px.nipponalba.scot/embed.js"></script></center>
+{{< pixelfed jk 107189869687738368 500 840 >}}
 
 I like the developer(s). This is generally common for most of the open source apps that I use, the developers are generally very open to feedback and are excited that people are using their application. Marketing mogul and time-illusionary [@dansup](https://mastodon.social/@/dansup/) is no exception! I have had many interactions with him over the past 15 months or so, and whether it be a unique issue I was experiencing during initial set up, a feature suggestion or a bug report the interactions are always gratefully received and pleasantly handled, and wherever possible bugs are fixed as quickly as they are reported. This interaction means a great deal to me, it re-affirms my decision to leave faceless corporations in favour of people-oriented open source developers.
 
diff --git a/content/posts.en.md b/content/posts.en.md
deleted file mode 100644
index d212e8ed..00000000
--- a/content/posts.en.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: "Posts"
-description: "Hugo, the world’s fastest framework for building websites"
-date: "2018-02-11"
-aliases: ["about-us","about-hugo","contact"]
-author: "Hugo Authors"
----
-
-Written in Go, Hugo is an open source static site generator available under the [Apache Licence 2.0.](https://github.com/gohugoio/hugo/blob/master/LICENSE) Hugo supports TOML, YAML and JSON data file types, Markdown and HTML content files and uses shortcodes to add rich content. Other notable features are taxonomies, multilingual mode, image processing, custom output formats, HTML/CSS/JS minification and support for Sass SCSS workflows.
-
-Hugo makes use of a variety of open source projects including:
-
-* https://github.com/russross/blackfriday
-* https://github.com/alecthomas/chroma
-* https://github.com/muesli/smartcrop
-* https://github.com/spf13/cobra
-* https://github.com/spf13/viper
-
-Hugo is ideal for blogs, corporate websites, creative portfolios, online magazines, single page applications or even a website with thousands of pages.
-
-Hugo is for people who want to hand code their own website without worrying about setting up complicated runtimes, dependencies and databases.
-
-Websites built with Hugo are extremelly fast, secure and can be deployed anywhere including, AWS, GitHub Pages, Heroku, Netlify and any other hosting provider.
-
-Learn more and contribute on [GitHub](https://github.com/gohugoio).
diff --git a/content/posts.jp.md b/content/posts.jp.md
deleted file mode 100644
index c03167a1..00000000
--- a/content/posts.jp.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: "Posts"
-description: "Hugo, the world’s fastest framework for building websites"
-date: "2018-02-11"
-aliases: ["about-us","about-hugo","contact"]
-author: "Hugo Authors"
----
-日本語
-Written in Go, Hugo is an open source static site generator available under the [Apache Licence 2.0.](https://github.com/gohugoio/hugo/blob/master/LICENSE) Hugo supports TOML, YAML and JSON data file types, Markdown and HTML content files and uses shortcodes to add rich content. Other notable features are taxonomies, multilingual mode, image processing, custom output formats, HTML/CSS/JS minification and support for Sass SCSS workflows.
-
-Hugo makes use of a variety of open source projects including:
-
-* https://github.com/russross/blackfriday
-* https://github.com/alecthomas/chroma
-* https://github.com/muesli/smartcrop
-* https://github.com/spf13/cobra
-* https://github.com/spf13/viper
-
-Hugo is ideal for blogs, corporate websites, creative portfolios, online magazines, single page applications or even a website with thousands of pages.
-
-Hugo is for people who want to hand code their own website without worrying about setting up complicated runtimes, dependencies and databases.
-
-Websites built with Hugo are extremelly fast, secure and can be deployed anywhere including, AWS, GitHub Pages, Heroku, Netlify and any other hosting provider.
-
-Learn more and contribute on [GitHub](https://github.com/gohugoio).
diff --git a/content/snaps.md b/content/snaps.md
index a75d4a2b..6f2518cc 100644
--- a/content/snaps.md
+++ b/content/snaps.md
@@ -4,6 +4,7 @@ description: "Hugo, the world’s fastest framework for building websites"
 date: "2018-02-11"
 aliases: ["about-us","about-hugo","contact"]
 author: "Hugo Authors"
+menu: main
 ---
 
 Written in Go, Hugo is an open source static site generator available under the [Apache Licence 2.0.](https://github.com/gohugoio/hugo/blob/master/LICENSE) Hugo supports TOML, YAML and JSON data file types, Markdown and HTML content files and uses shortcodes to add rich content. Other notable features are taxonomies, multilingual mode, image processing, custom output formats, HTML/CSS/JS minification and support for Sass SCSS workflows.
diff --git a/themes/anatole/layouts/_default/baseof.html b/themes/anatole/layouts/_default/baseof.html
index 6c131fe6..e5c6f803 100644
--- a/themes/anatole/layouts/_default/baseof.html
+++ b/themes/anatole/layouts/_default/baseof.html
@@ -1,8 +1,10 @@
 <!DOCTYPE html>
 <html lang="{{- site.Language.Lang -}}">
     {{- partial "head.html" . -}}
+      <input type="checkbox" id="theme-switch" class="theme-switch" autocomplete="on">
     <body>
-        {{- partial "sidebar.html" . -}}
+      <div id="page">
+          {{- partial "sidebar.html" . -}}
         <div class="main">
             {{ partial "navbar.html" . }}
             <div class="autopagerize_page_element">
@@ -12,6 +14,4 @@
             </div>
         </div>
         {{- partial "footer.html" . -}}
-    </body>
-
-</html>
+      </div>
diff --git a/themes/anatole/layouts/_default/list.html b/themes/anatole/layouts/_default/list.html
index 904d2200..e4f864db 100644
--- a/themes/anatole/layouts/_default/list.html
+++ b/themes/anatole/layouts/_default/list.html
@@ -13,6 +13,6 @@
           </div>
     </ul>
     {{ end }}
-    {{ end }}
+    {{ end }}</ul>
   </div>
 {{ end }}
diff --git a/themes/anatole/layouts/_default/list.jp.html b/themes/anatole/layouts/_default/list.jp.html
index 5c69b05b..99308c6e 100644
--- a/themes/anatole/layouts/_default/list.jp.html
+++ b/themes/anatole/layouts/_default/list.jp.html
@@ -14,6 +14,6 @@
           </div>
     </ul>
     {{ end }}
-    {{ end }}
+    {{ end }}</ul>
   </div>
 {{ end }}
diff --git a/themes/anatole/layouts/_default/single.html b/themes/anatole/layouts/_default/single.html
index a7ec79b2..6fb018c6 100644
--- a/themes/anatole/layouts/_default/single.html
+++ b/themes/anatole/layouts/_default/single.html
@@ -3,12 +3,11 @@
     <div class="post-content">
       {{ with .Page.Params.Image }}{{ partial "taxonomy/image.html" . }}{{ end }}
       <div class="post-title">
-        <h3>{{ .Title }}
-        </h3>
+        <h3>{{ .Title }}</h3>
         {{ if eq .Type "post"}}
         <div class="info">
-          <i class="fa fa-sun-o"></i><span class="date">{{ .Date.Format "Mon, Jan 2, 2006" }}</span>
-          <i class="fa fa-clock-o"></i><span class="reading-time">{{ .ReadingTime }}-minute read</span>
+          <i class="fa fa-sun"></i><span class="date">{{ .Date.Format "Mon, Jan 2, 2006" }}</span>
+          <i class="fa fa-clock"></i><span class="reading-time">{{ .ReadingTime }}-minute read</span>
         </div>
         {{ end }}
         </div>
diff --git a/themes/anatole/layouts/index.html b/themes/anatole/layouts/index.html
index c3227997..73737233 100644
--- a/themes/anatole/layouts/index.html
+++ b/themes/anatole/layouts/index.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
 
 <div class="about animated fadeInDown">
-    {{ range first 10 .Site.RegularPages }}
+    {{ range first 8 .Site.RegularPages }}
         {{ if eq .Type "post"}}
         <div>
             <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
diff --git a/themes/anatole/layouts/partials/footer.html b/themes/anatole/layouts/partials/footer.html
index a783144b..4942dcdc 100644
--- a/themes/anatole/layouts/partials/footer.html
+++ b/themes/anatole/layouts/partials/footer.html
@@ -1,5 +1,19 @@
 
-</body>
 
+    <script>
+      // This code is only used to remember theme selection between page loads
+      const themeSwitch = document.querySelector('.theme-switch');
+      themeSwitch.checked = localStorage.getItem('switchedTheme') === 'true';
 
+      themeSwitch.addEventListener('change', function(e) {
+        if (e.currentTarget.checked === true) {
+          // Add item to localstorage
+          localStorage.setItem('switchedTheme', 'true');
+        } else {
+          // Remove item if theme is switched back to normal
+          localStorage.removeItem('switchedTheme');
+        }
+      });
+    </script>
+</body>
 </html>
diff --git a/themes/anatole/layouts/partials/head.html b/themes/anatole/layouts/partials/head.html
index c6ad29a7..be2d6822 100644
--- a/themes/anatole/layouts/partials/head.html
+++ b/themes/anatole/layouts/partials/head.html
@@ -9,9 +9,13 @@
     <base href="{{ .Site.BaseURL }}">
     <!-- Favicons -->
     <link rel="shortcut icon" href="{{ .Site.Params.favicon | absURL }}favicon.ico" type="image/x-icon">
-    <link rel="apple-touch-icon" sizes="180x180" href="{{ .Site.Params.favicon | absURL }}favicon-180x180.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ .Site.Params.favicon | absURL }}apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="{{ .Site.Params.favicon | absURL }}favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="{{ .Site.Params.favicon | absURL }}favicon-16x16.png">
+    <link rel="manifest" href="{{ .Site.Params.favicon | absURL }}site.webmanifest">
+    <link rel="mask-icon" href="{{ .Site.Params.favicon | absURL }}safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="theme-color" content="#ffffff">
 
     <link rel="canonical" href="{{ .Permalink }}">
 </head>
diff --git a/themes/anatole/layouts/partials/navbar.html b/themes/anatole/layouts/partials/navbar.html
index 3e8b635d..5cfea085 100644
--- a/themes/anatole/layouts/partials/navbar.html
+++ b/themes/anatole/layouts/partials/navbar.html
@@ -4,20 +4,21 @@
         {{ range .Site.Menus.main }}
         <li><a {{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}class="current"{{end}} href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a></li>
         {{ end }}
-  <div class="language-selector layout__language-selector">
+        <div class="language-selector layout__language-selector">
   <ul class="navbar">
-  {{ if .IsTranslated -}}
+  {{ if .IsTranslated }}
   {{ range .Translations }}
-  <li><a rel="alternate" href="{{ .RelPermalink }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .Language.LanguageName }} <img src="/images/Language-Icons/icon20x24px-exported-transparent.png"/></a></li>
-  {{ end -}}
-  {{ else -}}
-  {{ range .Site.Languages -}}
+  <li><a rel="alternate" href="{{ .RelPermalink }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}"><div>{{ .Language.LanguageName }}</div> <i class="fa fa-language fa-2x language" aria-hidden="true" title="Language"></i></a></li>
+  {{ end }}
+  {{ else }}
+  {{ range .Site.Languages }}
   {{ if ne $.Site.Language.Lang .Lang }}
-  <li><a rel="alternate" href="{{ .Lang | relURL }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .LanguageName }} <img src="/images/Language-Icons/icon20x24px-exported-transparent.png"/></a></li>
-  {{ end -}}
-  {{ end -}}
-  {{ end -}}
+    <li><a rel="alternate" href="{{ .Lang | relURL }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .LanguageName }} <i class="fa fa-language fa-2x language" aria-hidden="true" title="言語"></i></a></li>
+  {{ end }}
+  {{ end }}
+  {{ end }}
   </ul>
+  <label for="theme-switch"><i class="fa fa-adjust fa-2x light" aria-hidden="true" title="light/dark mode switch"></i></label>
+</div>
   </div>
-    </div>
 </div>
diff --git a/themes/anatole/static/css/backup_style.css b/themes/anatole/static/css/backup_style.css
new file mode 100644
index 00000000..9a84d440
--- /dev/null
+++ b/themes/anatole/static/css/backup_style.css
@@ -0,0 +1,815 @@
+@charset "UTF-8";
+@import url('https://rsms.me/inter/inter.css');
+html { font-family: 'Inter', sans-serif; height:100%;}
+@supports (font-variation-settings: normal) {
+  html { font-family: 'Inter var', sans-serif; }
+}
+:root {
+  --third-color:#0065BF;
+  --dark-text:#f8f8f8;
+  --dark-bg:#2b2b2b;
+  --light-text:#2b2b2b;
+  --light-bg:#f8f8f8;
+
+  --text-color: var(--dark-text);
+  --bg-color: var(--dark-bg);
+}
+
+/* Switched mode */
+.theme-switch:checked ~ #page {
+  --text-color:var(--light-text);
+  --bg-color:var(--light-bg);
+}
+.theme-switch{
+  display:none;
+}
+#page {
+  background: var(--bg-color);
+  color:var(--text-color);
+}
+html {
+  background: var(--bg-color);
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  color: var(--text-color);
+  font-size: 15px;
+  width: 100%;
+  margin: 0 auto 30px auto;
+}
+
+p {
+  line-height: 1.9em;
+  font-weight: 400;
+  font-size: 14px;
+}
+
+a {
+  text-decoration: none;
+}
+
+img {
+  opacity: .75;
+  transition: opacity .5s ease-in-out;
+}
+img:hover {
+  opacity: 1
+}
+.category {
+  padding: 4px 6px;
+  border-radius: 3px;
+  color: var(--bg-color);
+  background-color: var(--text-color);
+  border: 1px solid var(--bg-color);
+}
+
+.blog {
+  padding: 4px 6px;
+  border-radius: 3px;
+  color: var(--text-color);
+  background-color: var(--third-color);
+  border: 1px solid var(--text-color);
+}
+
+.tag::before {
+  content: "#";
+  opacity: .5;
+}
+
+.tag, .category {
+  display: inline-block;
+  font-size: 15px;
+  line-height: 1;
+  margin: 5px 8px 5px 0;
+}
+
+pre {
+  background-color: #f9f9fd;
+  padding: 5px;
+}
+
+.info i{
+  opacity: 0.5;
+  margin-right: 5px;
+}
+
+a:link, a:visited {
+  opacity: 1;
+  -webkit-transition: all .15s linear;
+  -moz-transition: all .15s linear;
+  -o-transition: all .15s linear;
+  -ms-transition: all .15s linear;
+  transition: all .15s linear;
+  color: var(--color);
+}
+
+a:hover, a:active {
+  color: var(--third-color);
+}
+
+/*basic styles ends*/
+/*animation starts*/
+.animated {
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  -ms-animation-fill-mode: both;
+  -o-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -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% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+  }
+}
+@-moz-keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -moz-transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    -moz-transform: translateY(0);
+  }
+}
+@-o-keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -o-transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    -o-transform: translateY(0);
+  }
+}
+@keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.fadeInDown {
+  -webkit-animation-name: fadeInDown;
+  -moz-animation-name: fadeInDown;
+  -o-animation-name: fadeInDown;
+  animation-name: fadeInDown;
+}
+
+/*animation ends*/
+.content {
+  height: auto;
+  float: right;
+  width: 70%;
+  margin-top: 60px;
+}
+
+.page-top {
+  width: 70%;
+  position: fixed;
+  right: 0;
+  z-index: 3;
+  background-color: var(--bg-color);
+  height: 60px;
+  border-bottom: 1px solid #f8f8f8;
+}
+.page-top .nav {
+width:90%;
+  list-style: none;
+  padding: 18px 30px;
+  float: left;
+  font-size: 14px;
+}
+.page-top .nav li, .page-top .language-selector li {
+  position: relative;
+  display: initial;
+  padding-right: 20px;
+}
+.page-top .nav a {
+  color: var(--text-color);
+}
+.page-top .nav a:hover {
+  color: var(--third-color);
+}
+.page-top .nav a.current {
+  color: var(--text-color);
+  padding-bottom: 22px;
+  border-bottom: 1px solid var(--text-color);
+}
+.page-top .information{
+  float: right;
+  padding-top: 12px;
+  padding-right: 20px;
+}
+.page-top .information .avatar {
+  float: right;
+}
+.page-top .information .avatar img {
+  width: 48px;
+  height: 48px;
+  border-radius: 300px;
+}
+.page-top .information .back_btn {
+  float: left;
+  padding-top: 5px;
+  margin-right: -10px;
+}
+.page-top .information .back_btn li {
+  display: initial;
+  padding-right: 40px;
+}
+.page-top .language-selector {
+  float:right;
+  position:relative;
+  top:-5px;
+  padding-bottom:22px;
+}
+.page-top .language-selector img{
+  display:inline;
+  position:fixed;
+  margin:0;
+  padding:10px;
+  top:0;
+  opacity:1;
+
+}
+.page-top .language-selector ul{
+  display:inline;
+  list-style:none;
+  position:relative;
+  margin-top:5px;
+}
+.page-top .language-selector li{
+  vertical-align:top;
+  margin:10px;
+}
+
+.sidebar {
+  width: 30%;
+  -webkit-background-size: cover;
+  background-size: cover;
+  background-color: var(--bg-color);
+  height: 100%;
+  transition: 0.8s;
+  top: 0;
+  left: 0;
+  position: fixed;
+  z-index: 4;
+  border-right: 1px solid var(--text-color);
+}
+.sidebar #logo{
+  max-width: 300px;
+  width: 80%;
+  margin: 0 auto;
+  display:block;
+  padding: 10px;
+}
+.sidebar .logo-title {
+  text-align: center;
+  padding-top: 240px;
+}
+.sidebar .logo-title .description {
+  font-size: 14px;
+  width: 60%;
+  margin: 0 auto;
+  color: var(--text-color);
+  padding-bottom:10px;
+}
+.sidebar .logo-title .logo {
+  margin: 0 auto;
+}
+.sidebar .logo-title .title h3 {
+  text-transform: uppercase;
+  font-size: 2rem;
+  font-weight: bold;
+  letter-spacing: 2px;
+  line-height: 1;
+  margin: 1em;
+}
+.sidebar .logo-title .title a {
+  text-decoration: none;
+  color: var(--text-color);
+  font-size: 2rem;
+  font-weight: bold;
+}
+.sidebar .social-links {
+  list-style: none;
+  padding: 0;
+  font-size: 14px;
+  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(--text-color);
+}
+.sidebar .social-links a:hover {
+  color: var(--third-color);
+}
+
+.post {
+  background-color: var(--bg-color);
+  margin: 30px;
+  width:80%;
+  padding-left:20px;
+}
+.post .banner{
+  width:100%;
+  max-height: 300px;
+  object-fit:scale-down;
+  object-position:top;
+}
+.post .post-title h1 {
+  text-transform: uppercase;
+  font-size: 30px;
+  letter-spacing: 5px;
+  line-height: 1;
+}
+.post .post-title h2 {
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-size: 28px;
+  line-height: 1;
+  font-weight: 600;
+  color: var(--text-color);
+}
+.post .post-title h3 {
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  line-height: 1;
+  font-weight: 600;
+  color: var(--text-color);
+  font-size: 22px;
+  margin: 0;
+}
+.post .post-title a {
+  text-decoration: none;
+  letter-spacing: 1px;
+  color: var(--text-color);
+}
+.post .post-title a:hover {
+  text-decoration: underline;
+}
+.post .post-content a {
+  text-decoration: none;
+  color: var(--third-color);
+}
+
+.post .post-content table {
+    border-collapse:collapse;
+}
+
+.post .post-content table,.post .post-content table td, .post .post-content table th{
+  border: 1px dashed var(--text-color);
+}
+
+.post .post-content table tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+.post .post-content table td, .post .post-content table th{
+  padding: 15px
+}
+.post .post-content a:hover {
+  color: var(--third-color);
+}
+.post .post-content h3 {
+  color: var(--text-color);
+  font-size: 22px;
+  font-weight: 600;
+}
+.post .post-content h4 {
+  color: var(--text-color)
+  font-size: 16px;
+}
+.post .post-content img {
+  max-width: 60%;
+  text-align: center;
+  margin: 0 auto;
+  display:block;
+  padding:10px;
+}
+.post .post-footer {
+  padding: 0 0 30px 0;
+  border-bottom: 1px solid var(--text-color);
+}
+.post .post-footer .meta {
+  max-width: 100%;
+  height: 25px;
+  color: var(--text-color);
+}
+.post .post-footer .meta .info {
+  float: left;
+  font-size: 12px;
+  margin-bottom: 1em;
+}
+.post .post-footer .info .separator a {
+  margin-right: 0.2em;
+}
+.post .post-footer .meta .info .date {
+  margin-right: 10px;
+}
+.info {
+  margin: 1em;
+}
+.post .post-footer .meta a {
+  text-decoration: none;
+  color: var(--text-color)
+  padding-right: 10px;
+}
+.post .post-footer .meta a:hover {
+  color: var(--third-color);
+}
+.post .post-footer .blog{
+  color: var(--text-color);
+}
+.post .post-footer .blog:hover{
+  color: var(--first-color);
+}
+.post .post-footer .meta i {
+  margin-right: 6px;
+}
+.post .post-footer .tags {
+  padding-bottom: 15px;
+  font-size: 13px;
+}
+.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(--text-color);
+  font-weight: 400;
+}
+.post .post-footer .tags a:hover {
+  text-decoration: none;
+}
+
+.pagination {
+  margin: 30px;
+  padding: 0px 0 56px 0;
+  border-bottom: 1px solid var(--text-color);
+}
+.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;
+}
+.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;
+}
+
+.footer {
+  clear: both;
+  text-align: center;
+  font-size: 14px;
+  margin: 0 auto;
+  bottom: 0;
+  position: absolute;
+  width: 100%;
+  padding-bottom: 20px;
+  background: var(--bg-color);
+}
+
+.footer a {
+  color: var(--text-color);
+}
+.footer a:hover {
+  color: var(--third-color);
+}
+
+/*for archive*/
+.archive {
+  width: 80%;
+}
+.list-title{
+  margin:30px;
+  font-size:30px;
+  font-weight:bold;
+  color: var(--text-color)
+}
+
+.list-title i{
+  font-size:22px;
+  vertical-align:middle;
+  color: var(--text-color)
+}
+
+.list-with-title {
+  font-size: 14px;
+  margin: 30px;
+  padding: 0;
+}
+.list-with-title li {
+  list-style-type: none;
+  padding: 0;
+}
+.list-with-title .listing-title {
+  font-size: 24px;
+  color: var(--text-color);
+  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;
+  color: var(--text-color);
+}
+.list-with-title .listing .listing-post a {
+  color: var(--text-color);
+}
+.list-with-title .listing .listing-post a:hover {
+  color: var(--third-color);
+}
+
+/* share */
+.share {
+  margin: 0px 30px;
+  display: inline-flex;
+}
+
+/* about */
+.about {
+  margin: 30px;
+  width:80%;
+}
+.about h3 {
+  font-size: 22px;
+}
+
+/* links*/
+.links {
+  margin: 30px;
+}
+.links h3 {
+  font-size: 22px;
+}
+.links a {
+  cursor: pointer;
+}
+
+/* Comments */
+.comment-count {
+  color: #666;
+}
+
+.tab-community {
+  color: #666;
+}
+
+.readmore {
+  font-size: 14px;
+  text-align:left;
+  padding:0;
+  text-decoration:underline;
+}
+
+.back-button {
+  padding-top: 30px;
+  max-width: 100px;
+  padding-left: 40px;
+  float: left;
+}
+
+/* Buttons */
+a.btn {
+  color: #868686;
+  font-weight: 400;
+}
+
+.btn {
+  display: inline-block;
+  position: relative;
+  outline: 0;
+  color: rgba(0, 0, 0, 0.44);
+  background: transparent;
+  font-size: 14px;
+  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;
+}
+
+.btn:hover {
+  display: inline-block;
+  position: relative;
+  outline: 0px;
+  color: #464545;
+  background: transparent;
+  font-size: 14px;
+  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;
+}
+
+/* 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: rgba(0, 0, 0, 0.44);
+  background: transparent;
+  font-size: 14px;
+  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 li a:hover {
+  position: relative;
+  padding: 0.5em 1.25em;
+  outline: 0;
+  color: #fff;
+  background: #3CBD10;
+  font-size: 14px;
+  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;
+}
+
+.pixelfed_embed {
+  margin:0 auto;
+  display:block;
+}
+
+@media screen and (max-width: 960px) {
+  .sidebar {
+    width: 100%;
+    position: absolute;
+    border-right: none;
+    z-index: 1;
+  }
+  .sidebar .logo-title {
+    padding-top: 100px;
+  }
+  .sidebar .logo-title .title img {
+    width: 70px;
+  }
+  .sidebar .logo-title .title h3 {
+    font-size: 20px;
+  }
+  .sidebar #logo{
+    padding-top:80px;
+  }
+  .page-top {
+    width: 100%;
+  }
+
+  .post-title h3 {
+    line-height: 1.6;
+  }
+
+  .content {
+    margin-top: 680px;
+    width: 100%;
+    z-index: 2;
+    position: absolute;
+  }
+
+  .about, .post{
+    width:90%;
+    margin-left:15px;
+  }
+  .footer {
+    display: none;
+  }
+
+  .share {
+    display: grid;
+  }
+}
diff --git a/themes/anatole/static/css/style.css b/themes/anatole/static/css/style.css
index 3179b31e..3e255d9f 100644
--- a/themes/anatole/static/css/style.css
+++ b/themes/anatole/static/css/style.css
@@ -4,19 +4,79 @@ html { font-family: 'Inter', sans-serif; height:100%;}
 @supports (font-variation-settings: normal) {
   html { font-family: 'Inter var', sans-serif; }
 }
+:root {
+  --dark-link:#59ABE3;
+  --dark-text:#f8f8f8;
+  --dark-bg:#2b2b2b;
+  --dark-opacity: 0.75;
+  --light-text:#2b2b2b;
+  --light-bg:#f8f8f8;
+  --light-link:#0065BF;
+  --light-opacity:1;
+
+  --text-colour: var(--dark-text);
+  --bg-colour: var(--dark-bg);
+  --link-colour: var(--dark-link);
+  --opacity-img: var(--dark-opacity);
+}
+
+@media (prefers-color-scheme: light) {
+    --text-colour: var(--light-text);
+    --bg-colour: var(--light-bg);
+    --link-colour: var(--light-link);
+    --opacity-img: var(--light-opacity);
+
+}
+[data-theme="light"]{
+  --text-colour: var(--light-text);
+  --bg-colour: var(--light-bg);
+  --link-colour: var(--light-link);
+  --opacity-img: var(--light-opacity);
+}
+
+/* Switched mode */
+
+.theme-switch:checked + *,
+.theme-switch:checked + * + *{
+  --text-colour:var(--light-text);
+  --bg-colour:var(--light-bg);
+  --link-colour:var(--light-link);
+  --opacity-img: var(--light-opacity);
+}
+
+.theme-switch{
+  display:none;
+}
+
+.light{
+  display:inline;
+  float:right;
+  color:var(--text-colour);
+}
+
 html {
-  background-color: #fff;
-  -webkit-font-smoothing: antialiased;
+  -webkit-animation-fill-mode: forwards;
 }
 
 body {
-  color: rgba(0, 0, 0, 0.8);
+  color: var(--text-colour);
   font-size: 15px;
   width: 100%;
   margin: 0 auto 30px auto;
-  background-color: #2b2b2b;
+  background: var(--bg-colour);
+}
+#page{
+  display:block;
+  height:100%;
+  color: var(--text-colour);
+  background: var(--bg-colour);
+}
+.main, .content {
+  background: var(--bg-colour);
+  color: var(--text-colour);
+  height:100%;
+  display:block;
 }
-
 p {
   line-height: 1.9em;
   font-weight: 400;
@@ -27,25 +87,29 @@ a {
   text-decoration: none;
 }
 
+img {
+  opacity: var(--opacity-img);
+  transition: opacity .5s ease-in-out;
+}
+img:hover {
+  opacity: 1
+}
 .category {
   padding: 4px 6px;
   border-radius: 3px;
-  color: #fff;
-  background-color: #f9f9fd;
-  border: 1px solid #f2f2f2;
+  border: 1px solid var(--text-colour);
 }
 
 .blog {
   padding: 4px 6px;
   border-radius: 3px;
-  color: #fff;
-  background-color: #0065bf;
-  border: 1px solid #f2f2f2;
+  background: var(--link-colour);
+  border: 1px solid var(--text-colour);
 }
 
 .tag::before {
   content: "#";
-  opacity: .5;
+  opacity: .75;
 }
 
 .tag, .category {
@@ -56,7 +120,7 @@ a {
 }
 
 pre {
-  background-color: #f9f9fd;
+  background: var(--bg-colour);
   padding: 5px;
 }
 
@@ -72,99 +136,35 @@ a:link, a:visited {
   -o-transition: all .15s linear;
   -ms-transition: all .15s linear;
   transition: all .15s linear;
-  color: #424242;
+  color: var(--text-colour);
 }
 
 a:hover, a:active {
-  color: #0065BF;
-}
-
-/*basic styles ends*/
-/*animation starts*/
-.animated {
-  -webkit-animation-fill-mode: both;
-  -moz-animation-fill-mode: both;
-  -ms-animation-fill-mode: both;
-  -o-animation-fill-mode: both;
-  animation-fill-mode: both;
-  -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% {
-    opacity: 0;
-    -webkit-transform: translateY(-20px);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform: translateY(0);
-  }
-}
-@-moz-keyframes fadeInDown {
-  0% {
-    opacity: 0;
-    -moz-transform: translateY(-20px);
-  }
-  100% {
-    opacity: 1;
-    -moz-transform: translateY(0);
-  }
-}
-@-o-keyframes fadeInDown {
-  0% {
-    opacity: 0;
-    -o-transform: translateY(-20px);
-  }
-  100% {
-    opacity: 1;
-    -o-transform: translateY(0);
-  }
-}
-@keyframes fadeInDown {
-  0% {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-.fadeInDown {
-  -webkit-animation-name: fadeInDown;
-  -moz-animation-name: fadeInDown;
-  -o-animation-name: fadeInDown;
-  animation-name: fadeInDown;
+  color: var(--link-colour);
 }
 
-/*animation ends*/
 .content {
-  height: auto;
+  background: var(--bg-colour);
+  position:fixed;
+  left:30%;
+  height: 100%;
   float: right;
   width: 70%;
   margin-top: 60px;
+  overflow:auto;
+  -ms-overflow-style:none;
+}
+.content::-webkit-scrollbar{
+  display:none;
 }
-
 .page-top {
   width: 70%;
   position: fixed;
   right: 0;
   z-index: 3;
-  background-color: #fff;
   height: 60px;
-  border-bottom: 1px solid #f2f2f2;
+  border-bottom: 1px solid var(--text-colour);
+    background: var(--bg-colour);
 }
 .page-top .nav {
 width:90%;
@@ -173,21 +173,16 @@ width:90%;
   float: left;
   font-size: 14px;
 }
-.page-top .nav li, .page-top .language-selector li {
+.page-top .nav li{
   position: relative;
   display: initial;
   padding-right: 20px;
 }
 .page-top .nav a {
-  color: #5A5A5A;
+  color: var(--text-colour);
 }
 .page-top .nav a:hover {
-  color: #0065BF;
-}
-.page-top .nav a.current {
-  color: #5A5A5A;
-  padding-bottom: 22px;
-  border-bottom: 1px solid #5A5A5A;
+  color: var(--link-colour);
 }
 .page-top .information{
   float: right;
@@ -214,39 +209,42 @@ width:90%;
 .page-top .language-selector {
   float:right;
   position:relative;
-  top:-5px;
-  padding-bottom:22px;
-}
-.page-top .language-selector img{
-  display:inline;
-  position:fixed;
-  margin:0;
-  padding:10px;
-  top:0;
+  display:inline-flex;
+  top:-11px;
 }
 .page-top .language-selector ul{
-  display:inline;
   list-style:none;
-  position:relative;
-  margin-top:5px;
+  padding-bottom:0;
+  margin:0;
 }
 .page-top .language-selector li{
   vertical-align:top;
-  margin:10px;
+  margin:0;
+  padding-bottom:22px;
+}
+.page-top .language-selector li div{
+  position:relative;
+  height:50px;
+  display:inline;
+  top:-5px;
+  left:-5px;
+  margin-right:5px;
+}
+.page-top .language-selector i{
+  padding-bottom:15px;
+  margin-top:5px;
 }
-
 .sidebar {
   width: 30%;
+  background: var(--bg-colour);
   -webkit-background-size: cover;
   background-size: cover;
-  background-color: #fff;
   height: 100%;
-  transition: 0.8s;
   top: 0;
   left: 0;
   position: fixed;
   z-index: 4;
-  border-right: 1px solid #f2f2f2;
+  border-right: 1px solid var(--text-colour);
 }
 .sidebar #logo{
   max-width: 300px;
@@ -263,7 +261,7 @@ width:90%;
   font-size: 14px;
   width: 60%;
   margin: 0 auto;
-  color: #565654;
+  color: var(--text-colour);
   padding-bottom:10px;
 }
 .sidebar .logo-title .logo {
@@ -279,7 +277,7 @@ width:90%;
 }
 .sidebar .logo-title .title a {
   text-decoration: none;
-  color: #464646;
+  color: var(--text-colour);
   font-size: 2rem;
   font-weight: bold;
 }
@@ -298,14 +296,13 @@ width:90%;
   line-height: 0;
 }
 .sidebar .social-links a {
-  color: #565654;
+  color: var(--text-colour);
 }
 .sidebar .social-links a:hover {
-  color: #0065BF;
+  color: var(--link-colour);
 }
-
 .post {
-  background-color: #FFF;
+  background: var(--bg-colour);
   margin: 30px;
   width:80%;
   padding-left:20px;
@@ -328,28 +325,28 @@ width:90%;
   font-size: 28px;
   line-height: 1;
   font-weight: 600;
-  color: #5f5f5f;
+  color: var(--text-colour);
 }
 .post .post-title h3 {
   text-transform: uppercase;
   letter-spacing: 1px;
   line-height: 1;
   font-weight: 600;
-  color: #464646;
+  color: var(--text-colour);
   font-size: 22px;
   margin: 0;
 }
 .post .post-title a {
   text-decoration: none;
   letter-spacing: 1px;
-  color: #5f5f5f;
+  color: var(--text-colour);
 }
 .post .post-title a:hover {
   text-decoration: underline;
 }
 .post .post-content a {
   text-decoration: none;
-  color: #0065BF;
+  color: var(--link-colour);
 }
 
 .post .post-content table {
@@ -357,7 +354,7 @@ width:90%;
 }
 
 .post .post-content table,.post .post-content table td, .post .post-content table th{
-  border: 1px dashed #2b2b2b;
+  border: 1px dashed var(--text-colour);
 }
 
 .post .post-content table tr:nth-child(even) {
@@ -367,15 +364,15 @@ width:90%;
   padding: 15px
 }
 .post .post-content a:hover {
-  color: #2F69B3;
+  color: var(--link-colour);
 }
 .post .post-content h3 {
-  color: #5F5F5F;
+  color: var(--text-colour);
   font-size: 22px;
   font-weight: 600;
 }
 .post .post-content h4 {
-  color: #5F5F5F;
+  color: var(--text-colour);
   font-size: 16px;
 }
 .post .post-content img {
@@ -387,12 +384,12 @@ width:90%;
 }
 .post .post-footer {
   padding: 0 0 30px 0;
-  border-bottom: 1px solid #f2f2f2;
+  border-bottom: 1px solid var(--text-colour);
 }
 .post .post-footer .meta {
   max-width: 100%;
   height: 25px;
-  color: #bbbbbb;
+  color: var(--text-colour);
 }
 .post .post-footer .meta .info {
   float: left;
@@ -410,17 +407,17 @@ width:90%;
 }
 .post .post-footer .meta a {
   text-decoration: none;
-  color: #bbbbbb;
+  color: var(--text-colour);
   padding-right: 10px;
 }
 .post .post-footer .meta a:hover {
-  color: #0065BF;
+  color: var(--link-colour);
 }
 .post .post-footer .blog{
-  color: #f8f8f8;
+  color: var(--text-colour);
 }
 .post .post-footer .blog:hover{
-  color: #2b2b2b;
+  color: var(--text-colour);
 }
 .post .post-footer .meta i {
   margin-right: 6px;
@@ -443,7 +440,7 @@ width:90%;
 }
 .post .post-footer .tags a {
   text-decoration: none;
-  color: rgba(0, 0, 0, 0.44);
+  color: var(--text-colour);
   font-weight: 400;
 }
 .post .post-footer .tags a:hover {
@@ -453,7 +450,7 @@ width:90%;
 .pagination {
   margin: 30px;
   padding: 0px 0 56px 0;
-  border-bottom: 1px solid #f2f2f2;
+  border-bottom: 1px solid var(--text-colour);
 }
 .pagination ul {
   list-style: none;
@@ -496,11 +493,6 @@ width:90%;
   right: 6px;
 }
 
-#disqus_thread {
-  margin: 30px;
-  border-bottom: 1px solid #f2f2f2;
-}
-
 .footer {
   clear: both;
   text-align: center;
@@ -510,29 +502,34 @@ width:90%;
   position: absolute;
   width: 100%;
   padding-bottom: 20px;
-  background: #fff;
+  background: var(--bg-colour);
 }
 
 .footer a {
-  color: #A6A6A6;
+  color: var(--text-colour);
 }
 .footer a:hover {
-  color: #0065BF;
+  color: var(--link-colour);
 }
 
 /*for archive*/
 .archive {
   width: 80%;
 }
+.description {
+  color: var(--text-colour);
+}
 .list-title{
   margin:30px;
   font-size:30px;
   font-weight:bold;
+  color: var(--text-colour);
 }
 
 .list-title i{
   font-size:22px;
   vertical-align:middle;
+  color: var(--text-colour);
 }
 
 .list-with-title {
@@ -546,7 +543,7 @@ width:90%;
 }
 .list-with-title .listing-title {
   font-size: 24px;
-  color: #666666;
+  color: var(--text-colour);
   font-weight: 600;
   line-height: 2.2em;
 }
@@ -558,13 +555,13 @@ width:90%;
 }
 .list-with-title .listing .listing-post .post-time {
   float: right;
-  color: #C5C5C5;
+  color: var(--text-colour);
 }
 .list-with-title .listing .listing-post a {
-  color: #8F8F8F;
+  color: var(--text-colour);
 }
 .list-with-title .listing .listing-post a:hover {
-  color: #0065BF;
+  color: var(--link-colour);
 }
 
 /* share */
@@ -738,6 +735,7 @@ a.btn {
   margin:0 auto;
   display:block;
 }
+
 @media screen and (max-width: 960px) {
   .sidebar {
     width: 100%;
@@ -770,6 +768,8 @@ a.btn {
     width: 100%;
     z-index: 2;
     position: absolute;
+    left:0;
+    height:100%;
   }
 
   .about, .post{