fix: demo

13 files changed, 507 insertions, 535 deletions

diff --git a/Makefile b/Makefile
index fd508ba..e980db5 100644
--- a/Makefile
+++ b/Makefile
@@ -26,9 +26,9 @@ build-rtl:
 	$(call build_less,$(LESS_RTL_FILE),$(CSS_RTL_FILE))
 
 demo: build
-	mkdir -p demo/themes/coder
+	mkdir -p demo/themes/coder-portfolio
 	rsync -av exampleSite/* demo
-	rsync -av --exclude='demo' --exclude='exampleSite' --exclude='.git' . demo/themes/coder
+	rsync -av --exclude='demo' --exclude='exampleSite' --exclude='.git' . demo/themes/coder-portfolio
 	cd demo && hugo serve -D
 
 clean:
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 846db28..07175f8 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -1,5 +1,5 @@
 baseurl = "http://www.example.com"
-title = "johndoe"
+title = "Yusuke Ishimi"
 
 theme = "coder-portfolio"
 
@@ -16,10 +16,10 @@ pygmentsUseClasses = true
 disqusShortname = "yourdiscussshortname"
 
 [params]
-    author = "John Doe"
-    description = "John Doe's personal website"
+    author = "Yusuke Ishimi"
+    description = "Yusuke Ishimi's personal website"
     keywords = "blog,developer,personal"
-    info = "Full Stack DevOps and Magician"
+    info = "WEB AND APPS ENGINEER"
     avatarurl = "images/avatar.jpg"
     footercontent = "Enter a text here."
     fixedbarContent = "Do you want to know me more private?→"
@@ -30,7 +30,7 @@ disqusShortname = "yourdiscussshortname"
 
     snsShare = true
 
-    thumbnail = "image/thumbnail.png"
+    thumbnail = "images/tn.png"
 
     # Custom CSS
     custom_css = []
@@ -46,15 +46,15 @@ disqusShortname = "yourdiscussshortname"
 [[params.social]]
     name = "Github"
     weight = 1
-    url = "https://github.com/johndoe/"
+    url = "https://github.com/naro143/"
 [[params.social]]
     name = "Twitter"
     weight = 2
-    url = "https://twitter.com/johndoe/"
+    url = "https://twitter.com/naro143/"
 [[params.social]]
     name = "LinkedIn"
     weight = 3
-    url = "https://www.linkedin.com/in/johndoe/"
+    url = "https://www.linkedin.com/in/naro143/"
 
 [[menu.main]]
     name = "Blog"
@@ -76,13 +76,13 @@ disqusShortname = "yourdiscussshortname"
 [languages]
     [languages.en]
         languagename = "English" # The language name to be displayed in the selector.
-        title = "John Doe"
+        title = "Yusuke Ishimi"
 
         # You can configure the theme parameter for each language.
         [languages.en.params]
-        author = "John Doe"
-        info = "Full Stack DevOps and Magician"
-        description = "John Doe's personal website"
+        author = "Yusuke Ishimi"
+        info = "WEB AND APPS ENGINEER"
+        description = "Yusuke Ishimi's personal website"
         keywords = "blog,developer,personal"
 
         [languages.en.menu] # It is possible to change the menu too.
@@ -107,33 +107,30 @@ disqusShortname = "yourdiscussshortname"
         url = "/contact/"
 
 
-    [languages.pl]
-        languagename = "Polski"
-        title = "John Doe po polsku"
+    [languages.ja]
+        languagename = "Japanese"
+        title = "石見 優丞"
 
-        [languages.pl.params]
-            author = "John Doe"
-            description = "Strona domowa John'a Doe"
+        [languages.ja.params]
+            author = "石見 優丞"
+            description = "石見のサイト"
             keywords = "blog,developer,strona domowa"
-            info = "Full Stack DevOps i Magik"
+            info = "WEBとアプリのエンジニア"
 
-        [languages.pl.menu]
-
-            [[languages.pl.menu.main]]
-            name = "O mnie"
+        [languages.ja.menu]
+            [[languages.ja.menu.main]]
+            name = "石見とは"
             weight = 1.0
-            url = "/pl/about/"
-
-            [[languages.pl.menu.main]]
-            name = "Blog"
+            url = "/ja/about/"
+            [[languages.ja.menu.main]]
+            name = "ブログ"
             weight = 2.0
-            url = "/pl/posts/"
-
-            [[languages.pl.menu.main]]
-            name = "projektowanie"
+            url = "/ja/posts/"
+            [[languages.ja.menu.main]]
+            name = "プロジェクト"
             weight = 3
-            url = "/projektowanie/"
-            [[languages.pl.menu.main]]
-            name = "kontakt"
+            url = "/ja/projects/"
+            [[languages.ja.menu.main]]
+            name = "お問い合わせ"
             weight = 5
-            url = "/kontakt/"
+            url = "/ja/contact/"
diff --git a/exampleSite/content/about.md b/exampleSite/content/about.md
index 934c38c..6dea3ac 100644
--- a/exampleSite/content/about.md
+++ b/exampleSite/content/about.md
@@ -4,10 +4,11 @@ slug = "about"
 +++
 
 ---------------------------
-This theme is created based on "hugo-coder".
-I made it possible to tell myself more by my change.  
+This theme is created based on "hugo-coder".  
+I made it possible to tell yourself more by my change.   
 Please see "FeaturesOfCoderPortfolio" in the post about the change.
-Regarding other demo contents, it is hugo-coder's thing.
+Regarding other demo contents, it is hugo-coder's thing.  
+Have questions or suggestions? Feel free to [open an issue on GitHub](https://github.com/naro143/hugo-coder-portfolio/issues/new) or [ask me on Twitter](https://twitter.com/naro143).
 
 ---------------------------
 
diff --git a/exampleSite/content/posts/FeaturesOfCoderPortfolio.md b/exampleSite/content/posts/FeaturesOfCoderPortfolio.md
index 8cdc47b..1b1aab3 100644
--- a/exampleSite/content/posts/FeaturesOfCoderPortfolio.md
+++ b/exampleSite/content/posts/FeaturesOfCoderPortfolio.md
@@ -1,6 +1,6 @@
 +++
 date = "2018-08-03"
-title = "Theme Demo"
+title = "Features Of CoderPortfolio"
 math = "true"
 
 +++
diff --git a/exampleSite/content/posts/theme-demo.md b/exampleSite/content/posts/theme-demo.md
index 1dc1947..c7148bb 100644
--- a/exampleSite/content/posts/theme-demo.md
+++ b/exampleSite/content/posts/theme-demo.md
@@ -77,11 +77,12 @@ console.log(foo(5));
 
 You can create private content with this short code  
 
-```
-{{% private %}}
+
+{% private %}
 Write private content here
-{{% /private %}}
-```
+{% /private %}
+
+When using for inspection, please add "{}" so that you can see the notation of shortcode
 
 ## Private Content Demo
 
diff --git a/images/avatar.jpg b/images/avatar.jpg
new file mode 100644
index 0000000..0431831
--- /dev/null
+++ b/images/avatar.jpg
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 8d851a6..d65de0c 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -14,10 +14,10 @@
     <meta property="og:description" content="{{ if .IsPage }}{{ .Params.description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
     <meta property="og:type" content="website">
     <meta property="og:url" content="{{ .Permalink }}">
-    <meta property="og:image" content="{{ if .IsPage }}{{ .Site.BaseURL }}{{ .Params.thumbnail }}{{ else }}{{ .Site.Params.thumbnail }}{{ end }}">
+    <meta property="og:image" content="{{ if .IsPage }}{{ .Site.BaseURL }}{{ .Params.thumbnail }}{{ else }}{{ .Site.BaseURL }}{{ .Site.Params.thumbnail }}{{ end }}">
     <meta name="twitter:card" content="summary">
     <meta name="twitter:site" content="{{ .Permalink }}">
-    <meta name="twitter:image" content="{{ if .IsPage }}{{ .Site.BaseURL }}{{ .Params.thumbnail }}{{ else }}{{ .Site.Params.thumbnail }}{{ end }}">
+    <meta name="twitter:image" content="{{ if .IsPage }}{{ .Site.BaseURL }}{{ .Params.thumbnail }}{{ else }}{{ .Site.BaseURL }}{{ .Site.Params.thumbnail }}{{ end }}">
 
     <base href="{{ .Site.BaseURL }}">
     <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
@@ -29,7 +29,6 @@
     <link  rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Mono:400,700">
     <link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
     <link rel="stylesheet" href="{{ "css/style.min.css" | absURL }}">
-    <link rel="stylesheet" href="{{ "css/app.css" | absURL }}">
 
     {{ if .Site.Params.rtl}}
       <link rel="stylesheet" href="{{ "css/style-rtl.min.css" | absURL }}">
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index f09c7e0..98ab722 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -11,7 +11,7 @@
     {{ with .Site.Params.footercontent }}
       <p>{{.}}</p>
     {{ end }}
-    {{ if not .Site.Params.hideCopyright }} © {{ .Site.LastChange.Format "2006" }} {{ end }} {{ if not .Site.Params.hideCredits}} {{ if not .Site.Params.hideCopyright }} · {{ end }} Powered by <a href="https://gohugo.io/">Hugo</a> & <a href="https://github.com/luizdepra/hugo-coder/">Coder</a>. {{ end }}
+    {{ if not .Site.Params.hideCopyright }} © {{ .Site.LastChange.Format "2006" }} {{ end }} {{ if not .Site.Params.hideCredits}} {{ if not .Site.Params.hideCopyright }} · {{ end }} Powered by <a href="https://gohugo.io/">Hugo</a> & <a href="https://github.com/luizdepra/hugo-coder/">CoderPortfolio</a>. {{ end }}
 
   </section>
 </footer>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index f89ab4f..c113191 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -3,32 +3,42 @@
     <a class="navigation-title" href="{{ print "/" | absLangURL }}">
       {{ .Site.Title }}
     </a>
-    <ul class="navigation-list {{ if $.Site.Params.rtl }} float-left {{ else }} float-right {{ end }}">
-      {{ with .Site.Menus.main}}
-        {{ range sort . }}
-          <li class="navigation-item">
-            <a class="navigation-link" href="{{ .URL | absLangURL }}">{{ .Name }}</a>
-          </li>
+    <input type="checkbox" id="menu-control"/>
+    <label class="menu-mobile {{ if $.Site.Params.rtl }} float-left {{ else }} float-right {{ end }}" for="menu-control">
+      <span class="btn-mobile {{ if $.Site.Params.rtl }} float-left {{ else }} float-right {{ end }}">&#9776;</span>
+      <ul class="navigation-list">
+        {{ with .Site.Menus.main}}
+          {{ range sort . }}
+            <li class="navigation-item {{ if $.Site.Params.itemscentered }} align-center {{ else }} {{ if $.Site.Params.rtl }} align-right {{ else }} align-left {{ end }} {{ end }}">
+              <a class="navigation-link" href="{{ .URL | absLangURL }}">{{ .Name }}</a>
+            </li>
+          {{ end }}
         {{ end }}
-      {{ end }}
-      {{ if .Site.IsMultiLingual }}
-        {{ $node := . }}
-        {{ .Scratch.Set "separator" true }}
-
-        {{ range .Site.Home.AllTranslations }}
-          {{ if ne $.Site.Language .Language }}
-            {{ if $node.Scratch.Get "separator" }}
-              <li>
-                <p>{{ .Site.Params.LangSeparator }}</p>
+        {{ if .Site.IsMultiLingual }}
+          {{ $node := . }}
+          {{ .Scratch.Set "separator" true }}
+          {{ with .Site.Params.LangSeparator }}
+            <li class= "{{ if $.Site.Params.itemscentered }} mobile-menu-lang-separator-centered {{ else }} mobile-menu-lang-separator-full {{ end }}">
+              <hr />
+            </li>
+          {{ end }}
+          {{ range .Site.Home.AllTranslations }}
+            {{ if ne $.Site.Language .Language }}
+              {{ if $node.Scratch.Get "separator" }}
+                {{ with .Site.Params.LangSeparator }}
+                  <li class="multilingual-separator">
+                    <p>{{ . }}</p>
+                  </li>
+                {{ end }}
+                {{ $node.Scratch.Set "separator" false }}
+              {{ end }}
+              <li class="navigation-item {{ if $.Site.Params.itemscentered }} align-center {{ else }} {{ if $.Site.Params.rtl }} align-right {{ else }} align-left {{ end }} {{ end }}">
+                <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
               </li>
-              {{ $node.Scratch.Set "separator" false }}
             {{ end }}
-            <li>
-              <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
-            </li>
           {{ end }}
         {{ end }}
-      {{ end }}
-    </ul>
+      </ul>
+    </label>
   </section>
 </nav>
diff --git a/static/css/app.css b/static/css/app.css
deleted file mode 100644
index f9af8ee..0000000
--- a/static/css/app.css
+++ /dev/null
@@ -1,462 +0,0 @@
-a {
-  position: relative;
-  transition: 0.5s;
-}
-a:before, a:after {
-  position: absolute;
-  bottom: -2px;
-  content: "";
-  display: inline-block;
-  width: 0;
-  height: 2px;
-  background: #F30034;
-  transition: 0.5s;
-}
-a:before {
-  left: 50%;
-}
-a:after {
-  right: 50%;
-}
-a:hover {
-  text-decoration: none;
-}
-a:hover:before, a:hover:after {
-  width: 50%;
-}
-
-.private {
-  display: none;
-}
-
-.private-inner {
-  display: table-cell;
-}
-
-#privateTrigger {
-  cursor: pointer;
-}
-#privateTrigger:hover:before, #privateTrigger:hover:after {
-  width: 0;
-}
-
-.navigation {
-  height: auto;
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0.08);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-}
-
-.fixed-bar {
-  position: fixed;
-  bottom: 0;
-  margin: 0;
-  height: 65px;
-  width: 100%;
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
-  background: #fefefe;
-}
-.fixed-bar .container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  height: 65px;
-}
-
-code {
-  background: #364549 !important;
-}
-
-.sns-shares {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  position: absolute;
-  right: 0;
-}
-.sns-shares .sns-share {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  height: 56px;
-  width: 56px;
-  text-decoration: none;
-}
-.sns-shares .sns-share:hover:before, .sns-shares .sns-share:hover:after {
-  width: 0;
-}
-.sns-shares .twitter-share .fa-twitter {
-  font-size: 24px;
-}
-.sns-shares .fb-share .fa-facebook-f {
-  font-size: 24px;
-}
-.sns-shares .hatena-share img {
-  width: 32px;
-}
-.sns-shares .line-share img {
-  width: 32px;
-}
-
-.sp-sns-shares {
-  display: none;
-}
-
-@media (max-width: 574px) {
-  .navigation .container {
-    padding: 0;
-    text-align: center;
-  }
-  .navigation .container .navigation-title {
-    display: block;
-    width: 100%;
-  }
-  .navigation .container .navigation-list {
-    display: flex;
-    flex-wrap: wrap;
-    padding: 0;
-    margin: 0;
-    width: 100%;
-    border-bottom: 1px solid #ffffff;
-  }
-  .navigation .container .navigation-list .navigation-item {
-    height: 48px;
-    width: 50%;
-    border-top: 1px solid #ffffff;
-    background: #333333;
-  }
-  .navigation .container .navigation-list .navigation-item:nth-child(odd) {
-    border-right: 1px solid #ffffff;
-  }
-  .navigation .container .navigation-list .navigation-item .navigation-link {
-    display: flex;
-    margin: 0;
-    align-items: center;
-    justify-content: center;
-    height: 48px;
-    color: #ffffff;
-  }
-  .navigation .container .navigation-list .navigation-item .navigation-link:hover:before, .navigation .container .navigation-list .navigation-item .navigation-link:hover:after {
-    width: 0;
-  }
-
-  .pc-sns-shares {
-    display: none;
-  }
-
-  .sp-sns-shares {
-    display: flex;
-    position: relative;
-    justify-content: space-around;
-    width: 100%;
-  }
-}
-/* vBackground */
-.chroma {
-  color: #e3e3e3;
-  background-color: #364549;
-}
-
-/* vError */
-.chroma .err {
-  color: #dddddd;
-  border-bottom: 2px dotted #c01b1b;
-}
-
-/* LineTableTD */
-.chroma .lntd {
-  vertical-align: top;
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-/* LineTable */
-.chroma .lntable {
-  border-spacing: 0;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  width: auto;
-  overflow: auto;
-  display: block;
-}
-
-/* LineHighlight */
-.chroma .hl {
-  display: block;
-  width: 100%;
-  background-color: #ffffcc;
-}
-
-/* LineNumbersTable */
-.chroma .lnt {
-  margin-right: 0.4em;
-  padding: 0 0.4em 0 0.4em;
-}
-
-/* LineNumbers */
-.chroma .ln {
-  margin-right: 0.4em;
-  padding: 0 0.4em 0 0.4em;
-}
-
-/* vKeyword */
-.chroma .k {
-  color: #ebd247;
-}
-
-/* KeywordConstant */
-.chroma .kc {
-  color: #ebd247;
-}
-
-/* KeywordDeclaration */
-.chroma .kd {
-  color: #ebd247;
-}
-
-/* vKeywordNamespace */
-.chroma .kn {
-  color: #ff8095;
-}
-
-/* KeywordPseudo */
-.chroma .kp {
-  color: #ebd247;
-}
-
-/* KeywordReserved */
-.chroma .kr {
-  color: #ebd247;
-}
-
-/* KeywordType */
-.chroma .kt {
-  color: #ebd247;
-}
-
-/* vNameAttribute */
-.chroma .na {
-  color: #8bdf4c;
-}
-
-/* NameClass */
-.chroma .nc {
-  color: #8bdf4c;
-}
-
-/* NameConstant */
-.chroma .no {
-  color: #ebd247;
-}
-
-/* NameDecorator */
-.chroma .nd {
-  color: #8bdf4c;
-}
-
-/* NameException */
-.chroma .ne {
-  color: #8bdf4c;
-}
-
-/* vNameFunction */
-.chroma .nf {
-  color: #8bdf4c;
-}
-
-/* NameOther */
-.chroma .nx {
-  color: #8bdf4c;
-}
-
-/* vNameTag */
-.chroma .nt {
-  color: #ff8095;
-}
-
-/* Literal */
-.chroma .l {
-  color: #a980f5;
-}
-
-/* LiteralDate */
-.chroma .ld {
-  color: #41b7d7;
-}
-
-/* LiteralString */
-.chroma .s {
-  color: #41b7d7;
-}
-
-/* LiteralStringAffix */
-.chroma .sa {
-  color: #41b7d7;
-}
-
-/* LiteralStringBacktick */
-.chroma .sb {
-  color: #41b7d7;
-}
-
-/* LiteralStringChar */
-.chroma .sc {
-  color: #41b7d7;
-}
-
-/* LiteralStringDelimiter */
-.chroma .dl {
-  color: #41b7d7;
-}
-
-/* LiteralStringDoc */
-.chroma .sd {
-  color: #41b7d7;
-}
-
-/* vLiteralStringDouble */
-.chroma .s2 {
-  color: #41b7d7;
-}
-
-/* LiteralStringEscape */
-.chroma .se {
-  color: #a980f5;
-}
-
-/* LiteralStringHeredoc */
-.chroma .sh {
-  color: #41b7d7;
-}
-
-/* LiteralStringInterpol */
-.chroma .si {
-  color: #41b7d7;
-}
-
-/* LiteralStringOther */
-.chroma .sx {
-  color: #41b7d7;
-}
-
-/* LiteralStringRegex */
-.chroma .sr {
-  color: #41b7d7;
-}
-
-/* LiteralStringSingle */
-.chroma .s1 {
-  color: #41b7d7;
-}
-
-/* LiteralStringSymbol */
-.chroma .ss {
-  color: #41b7d7;
-}
-
-/* LiteralNumber */
-.chroma .m {
-  color: #a980f5;
-}
-
-/* LiteralNumberBin */
-.chroma .mb {
-  color: #a980f5;
-}
-
-/* LiteralNumberFloat */
-.chroma .mf {
-  color: #a980f5;
-}
-
-/* LiteralNumberHex */
-.chroma .mh {
-  color: #a980f5;
-}
-
-/* vLiteralNumberInteger */
-.chroma .mi {
-  color: #a980f5;
-}
-
-/* LiteralNumberIntegerLong */
-.chroma .il {
-  color: #a980f5;
-}
-
-/* LiteralNumberOct */
-.chroma .mo {
-  color: #a980f5;
-}
-
-/* vOperator */
-.chroma .o {
-  color: #ff8095;
-}
-
-/* OperatorWord */
-.chroma .ow {
-  color: #ff8095;
-}
-
-/* vComment */
-.chroma .c {
-  color: #9dabae;
-}
-
-/* CommentHashbang */
-.chroma .ch {
-  color: #9dabae;
-}
-
-/* CommentMultiline */
-.chroma .cm {
-  color: #9dabae;
-}
-
-/* CommentSingle */
-.chroma .c1 {
-  color: #9dabae;
-}
-
-/* CommentSpecial */
-.chroma .cs {
-  color: #9dabae;
-}
-
-/* CommentPreproc */
-.chroma .cp {
-  color: #9dabae;
-}
-
-/* CommentPreprocFile */
-.chroma .cpf {
-  color: #9dabae;
-}
-
-/* GenericDeleted */
-.chroma .gd {
-  color: #ff8095;
-}
-
-/* GenericEmph */
-.chroma .ge {
-  font-style: italic;
-}
-
-/* GenericInserted */
-.chroma .gi {
-  color: #8bdf4c;
-}
-
-/* GenericStrong */
-.chroma .gs {
-  font-weight: bold;
-}
-
-/* GenericSubheading */
-.chroma .gu {
-  color: #9dabae;
-}
diff --git a/static/css/style.min.css b/static/css/style.min.css
index 0ba9011..901916f 100644
--- a/static/css/style.min.css
+++ b/static/css/style.min.css
@@ -1 +1 @@
-*,*:after,*:before{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%}body{display:flex;color:#323232;background-color:#fefefe;font-family:'Fira Mono',monospace;font-size:1.6em;font-weight:400;letter-spacing:.0625em;line-height:1.8em}@media only screen and (min-device-width:320px) and (max-device-width:480px){body{font-size:1.4em;line-height:1.6em}}a{font-weight:700;color:#000;text-decoration:none}a:focus,a:hover{text-decoration:underline}p{margin:1.6rem 0 1.6rem 0}p a{font-weight:400;color:#000;text-decoration:underline;text-underline-position:under}p a:focus,p a:hover{color:#36c}h1,h2,h3,h4,h5,h6{color:#000;text-transform:uppercase;letter-spacing:.0625em;margin:3.2rem 0 1.6rem 0}h1{font-size:3.2rem;line-height:3.2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h1{font-size:2.8rem;line-height:2.8rem}}h2{font-size:2.8rem;line-height:2.8rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h2{font-size:2.4rem;line-height:2.4rem}}h3{font-size:2.4rem;line-height:2.4rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h3{font-size:2rem;line-height:2rem}}h4{font-size:2.2rem;line-height:2.2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h4{font-size:1.8rem;line-height:1.8rem}}h5{font-size:2rem;line-height:2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h5{font-size:1.6rem;line-height:1.6rem}}h6{font-size:1.4rem;line-height:1.4rem}pre{margin:1.6rem 0 1rem 0;padding:1.6rem;overflow-x:auto}code{display:inline-block;background-color:#000;color:#fefefe;padding:.4rem .8rem .4rem .8rem}blockquote{border-left:2px solid #dcdcdc;padding-left:1.6rem;font-style:italic}th,td{padding:1.6rem}table{border-collapse:collapse}table td,table th{border:2px solid #000}table tr:first-child th{border-top:0}table tr:last-child td{border-bottom:0}table tr td:first-child,table tr th:first-child{border-left:0}table tr td:last-child,table tr th:last-child{border-right:0}img{max-width:100%}.wrapper{display:flex;flex-direction:column;min-height:100vh;width:100%}.container{margin:0 auto;max-width:120rem;width:100%;padding-left:2rem;padding-right:2rem}.navigation{height:6rem;width:100%}.navigation a{display:inline;font-size:1.6rem;text-transform:uppercase;line-height:6rem;letter-spacing:.1rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.navigation a{font-size:1.4rem}}.navigation ul{list-style:none;margin-bottom:0;margin-top:0}.navigation ul li{float:left;margin:0;position:relative}.navigation ul li a{margin-left:1rem;margin-right:1rem}.content{flex:1;margin-top:1.6rem;margin-bottom:3.2rem}.content article header{margin-top:3.2rem;margin-bottom:3.2rem}.content article header h1,.content article header h2{margin:0}.content article header h2{margin-top:1rem;font-size:1.8rem;color:#323232}@media only screen and (min-device-width:320px) and (max-device-width:480px){.content article header h2{font-size:1.6rem}}.avatar img{width:20rem;height:auto;border-radius:50%}@media only screen and (max-device-width:768px){.avatar img{width:10rem}}.list ul{margin:3.2rem 0 3.2rem 0;list-style:none;padding:0}.list ul li{font-size:1.6rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.list ul li{font-size:1.4rem;margin:1.6rem 0 1.6rem 0}}.list ul li span{display:inline-block;text-align:right;width:20rem;margin-right:3rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.list ul li span{display:block;text-align:left}}.list ul li a{text-transform:uppercase}.pagination{margin-top:6rem;text-align:center}.pagination li{display:inline;text-align:center}.pagination li span{margin:0;text-align:center;width:3.2rem}.pagination li a span{margin:0;text-align:center;width:3.2rem}.centered{display:flex;height:100%;align-items:center;justify-content:center}.centered .about{text-align:center}.centered .about h1{margin-top:2rem;margin-bottom:.5rem}.centered .about h2{margin-top:1rem;margin-bottom:.5rem;font-size:2.4rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .about h2{font-size:2rem}}.centered .about ul{list-style:none;margin:3rem 0 1rem 0;padding:0}.centered .about ul li{display:inline-block;position:relative}.centered .about ul li a{text-transform:uppercase;margin-left:1rem;margin-right:1rem;font-size:1.6rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .about ul li a{font-size:1.4rem}}.centered .error{text-align:center}.centered .error h1{margin-top:2rem;margin-bottom:.5rem;font-size:4.6rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .error h1{font-size:3.2rem}}.centered .error h2{margin-top:2rem;margin-bottom:3.2rem;font-size:3.2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .error h2{font-size:2.8rem}}.footer{width:100%;text-align:center;line-height:2rem;margin-bottom:1rem}.float-right{float:right}.float-left{float:left}
+*,*:after,*:before{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%}body{display:flex;color:#323232;background-color:#fefefe;font-family:'Fira Mono',monospace;font-size:1.6em;font-weight:400;letter-spacing:.0625em;line-height:1.8em}@media only screen and (min-device-width:320px) and (max-device-width:480px){body{font-size:1.4em;line-height:1.6em}}a{font-weight:700;color:#000;text-decoration:none}a:focus,a:hover{text-decoration:underline}p{margin:1.6rem 0 1.6rem 0}p a{font-weight:400;color:#000;text-decoration:underline;text-underline-position:under}p a:focus,p a:hover{color:#36c}h1,h2,h3,h4,h5,h6{color:#000;text-transform:uppercase;letter-spacing:.0625em;margin:3.2rem 0 1.6rem 0}h1{font-size:3.2rem;line-height:3.2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h1{font-size:2.8rem;line-height:2.8rem}}h2{font-size:2.8rem;line-height:2.8rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h2{font-size:2.4rem;line-height:2.4rem}}h3{font-size:2.4rem;line-height:2.4rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h3{font-size:2rem;line-height:2rem}}h4{font-size:2.2rem;line-height:2.2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h4{font-size:1.8rem;line-height:1.8rem}}h5{font-size:2rem;line-height:2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h5{font-size:1.6rem;line-height:1.6rem}}h6{font-size:1.4rem;line-height:1.4rem}pre{margin:1.6rem 0 1rem 0;padding:1.6rem;overflow-x:auto}code{display:inline-block;background-color:#000;color:#fefefe;padding:.4rem .8rem .4rem .8rem}blockquote{border-left:2px solid #dcdcdc;padding-left:1.6rem;font-style:italic}th,td{padding:1.6rem}table{border-collapse:collapse}table td,table th{border:2px solid #000}table tr:first-child th{border-top:0}table tr:last-child td{border-bottom:0}table tr td:first-child,table tr th:first-child{border-left:0}table tr td:last-child,table tr th:last-child{border-right:0}img{max-width:100%}.wrapper{display:flex;flex-direction:column;min-height:100vh;width:100%}.container{margin:0 auto;max-width:120rem;width:100%;padding-left:2rem;padding-right:2rem}.navigation{height:6rem;width:100%}.navigation a{display:inline;font-size:1.6rem;text-transform:uppercase;line-height:6rem;letter-spacing:.1rem}@media only screen and (min-device-width:320px) and (max-device-width:768px){.navigation a{font-size:1.6rem}}.navigation ul{list-style:none;margin-bottom:0;margin-top:0}.navigation ul li{float:left;margin:0;position:relative}.navigation ul li a{margin-left:1rem;margin-right:1rem}@media only screen and (min-device-width:320px) and (max-device-width:768px){.navigation ul li{float:none !important}}@media only screen and (min-device-width:320px) and (max-device-width:768px){.navigation ul{visibility:hidden;opacity:0;max-height:0;z-index:5;top:5rem;right:0;width:100%;position:absolute;background-color:rgba(254,254,254,0.98);padding:0;border-bottom:solid 2px #e2dfe1;transition:opacity .25s,max-height .15s linear}}#menu-control{display:none}.btn-mobile{display:none}@media only screen and (min-device-width:320px) and (max-device-width:768px){.btn-mobile{display:block;font-size:2rem;color:black;cursor:pointer;margin-top:1.5rem}#menu-control:checked+label .btn-mobile{color:#e2dfe1}#menu-control:checked+label ul{visibility:visible;opacity:1;max-height:100rem}.navigation-item{position:relative}.mobile-menu-lang-separator-centered{padding-left:7rem;padding-right:7rem}.mobile-menu-lang-separator-full{padding-left:1.5rem;padding-right:1.5rem}.multilingual-separator{display:none}.align-left{text-align:left;padding-left:1rem}.align-right{text-align:right;padding-right:1rem}.align-center{text-align:center}}.content{flex:1;margin-top:1.6rem;margin-bottom:3.2rem}.content article header{margin-top:3.2rem;margin-bottom:3.2rem}.content article header h1,.content article header h2{margin:0}.content article header h2{margin-top:1rem;font-size:1.8rem;color:#323232}@media only screen and (min-device-width:320px) and (max-device-width:480px){.content article header h2{font-size:1.6rem}}.avatar img{width:20rem;height:auto;border-radius:50%}@media only screen and (max-device-width:768px){.avatar img{width:10rem}}.list ul{margin:3.2rem 0 3.2rem 0;list-style:none;padding:0}.list ul li{font-size:1.6rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.list ul li{font-size:1.4rem;margin:1.6rem 0 1.6rem 0}}.list ul li span{display:inline-block;text-align:right;width:20rem;margin-right:3rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.list ul li span{display:block;text-align:left}}.list ul li a{text-transform:uppercase}.pagination{margin-top:6rem;text-align:center}.pagination li{display:inline;text-align:center}.pagination li span{margin:0;text-align:center;width:3.2rem}.pagination li a span{margin:0;text-align:center;width:3.2rem}.centered{display:flex;height:100%;align-items:center;justify-content:center}.centered .about{text-align:center}.centered .about h1{margin-top:2rem;margin-bottom:.5rem}.centered .about h2{margin-top:1rem;margin-bottom:.5rem;font-size:2.4rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .about h2{font-size:2rem}}.centered .about ul{list-style:none;margin:3rem 0 1rem 0;padding:0}.centered .about ul li{display:inline-block;position:relative}.centered .about ul li a{text-transform:uppercase;margin-left:1rem;margin-right:1rem;font-size:1.6rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .about ul li a{font-size:1.4rem}}.centered .error{text-align:center}.centered .error h1{margin-top:2rem;margin-bottom:.5rem;font-size:4.6rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .error h1{font-size:3.2rem}}.centered .error h2{margin-top:2rem;margin-bottom:3.2rem;font-size:3.2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .error h2{font-size:2.8rem}}.footer{width:100%;text-align:center;line-height:2rem;margin-bottom:1rem}.float-right{float:right}.float-left{float:left}.title{font-weight:bold}a{position:relative;transition:.5s}a:before,a:after{position:absolute;bottom:-2px;content:"";display:inline-block;width:0;height:2px;background:#f30034;transition:.5s}a:before{left:50%}a:after{right:50%}a:hover{text-decoration:none}a:hover:before,a:hover:after{width:50%}.private{display:none}.private-inner{display:table-cell}#privateTrigger{cursor:pointer}#privateTrigger:hover:before,#privateTrigger:hover:after{width:0}.navigation{height:auto;box-shadow:0 0 1px rgba(0,0,0,0.08);border-bottom:1px solid rgba(0,0,0,0.15)}.fixed-bar{position:fixed;bottom:0;margin:0;height:65px;width:100%;border-top:1px solid rgba(0,0,0,0.05);background:#fefefe}.fixed-bar .container{display:flex;justify-content:center;align-items:center;position:relative;height:65px}code{background:#364549 !important}.sns-shares{display:flex;align-items:center;justify-content:space-around;position:absolute;right:0}.sns-shares .sns-share{display:flex;align-items:center;justify-content:space-around;height:56px;width:56px;text-decoration:none}.sns-shares .sns-share:hover:before,.sns-shares .sns-share:hover:after{width:0}.sns-shares .twitter-share .fa-twitter{font-size:24px}.sns-shares .fb-share .fa-facebook-f{font-size:24px}.sns-shares .hatena-share img{width:32px}.sns-shares .line-share img{width:32px}.sp-sns-shares{display:none}@media(max-width:920px){.pc-sns-shares{display:none}.sp-sns-shares{display:flex;position:relative;justify-content:space-around;width:100%}}.chroma{color:#e3e3e3;background-color:#364549}.chroma .err{color:#ddd;border-bottom:2px dotted #c01b1b}.chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma .lntable{border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block}.chroma .hl{display:block;width:100%;background-color:#ffc}.chroma .lnt{margin-right:.4em;padding:0 .4em 0 .4em}.chroma .ln{margin-right:.4em;padding:0 .4em 0 .4em}.chroma .k{color:#ebd247}.chroma .kc{color:#ebd247}.chroma .kd{color:#ebd247}.chroma .kn{color:#ff8095}.chroma .kp{color:#ebd247}.chroma .kr{color:#ebd247}.chroma .kt{color:#ebd247}.chroma .na{color:#8bdf4c}.chroma .nc{color:#8bdf4c}.chroma .no{color:#ebd247}.chroma .nd{color:#8bdf4c}.chroma .ne{color:#8bdf4c}.chroma .nf{color:#8bdf4c}.chroma .nx{color:#8bdf4c}.chroma .nt{color:#ff8095}.chroma .l{color:#a980f5}.chroma .ld{color:#41b7d7}.chroma .s{color:#41b7d7}.chroma .sa{color:#41b7d7}.chroma .sb{color:#41b7d7}.chroma .sc{color:#41b7d7}.chroma .dl{color:#41b7d7}.chroma .sd{color:#41b7d7}.chroma .s2{color:#41b7d7}.chroma .se{color:#a980f5}.chroma .sh{color:#41b7d7}.chroma .si{color:#41b7d7}.chroma .sx{color:#41b7d7}.chroma .sr{color:#41b7d7}.chroma .s1{color:#41b7d7}.chroma .ss{color:#41b7d7}.chroma .m{color:#a980f5}.chroma .mb{color:#a980f5}.chroma .mf{color:#a980f5}.chroma .mh{color:#a980f5}.chroma .mi{color:#a980f5}.chroma .il{color:#a980f5}.chroma .mo{color:#a980f5}.chroma .o{color:#ff8095}.chroma .ow{color:#ff8095}.chroma .c{color:#9dabae}.chroma .ch{color:#9dabae}.chroma .cm{color:#9dabae}.chroma .c1{color:#9dabae}.chroma .cs{color:#9dabae}.chroma .cp{color:#9dabae}.chroma .cpf{color:#9dabae}.chroma .gd{color:#ff8095}.chroma .ge{font-style:italic}.chroma .gi{color:#8bdf4c}.chroma .gs{font-weight:bold}.chroma .gu{color:#9dabae}
diff --git a/static/less/style.less b/static/less/style.less
index 66873a7..c6d20cd 100644
--- a/static/less/style.less
+++ b/static/less/style.less
@@ -437,3 +437,429 @@ img {
 .title {
   font-weight: bold;
 }
+a {
+  position: relative;
+  transition: 0.5s;
+}
+a:before, a:after {
+  position: absolute;
+  bottom: -2px;
+  content: "";
+  display: inline-block;
+  width: 0;
+  height: 2px;
+  background: #F30034;
+  transition: 0.5s;
+}
+a:before {
+  left: 50%;
+}
+a:after {
+  right: 50%;
+}
+a:hover {
+  text-decoration: none;
+}
+a:hover:before, a:hover:after {
+  width: 50%;
+}
+
+.private {
+  display: none;
+}
+
+.private-inner {
+  display: table-cell;
+}
+
+#privateTrigger {
+  cursor: pointer;
+}
+#privateTrigger:hover:before, #privateTrigger:hover:after {
+  width: 0;
+}
+
+.navigation {
+  height: auto;
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.08);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+.fixed-bar {
+  position: fixed;
+  bottom: 0;
+  margin: 0;
+  height: 65px;
+  width: 100%;
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  background: #fefefe;
+}
+.fixed-bar .container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  height: 65px;
+}
+
+code {
+  background: #364549 !important;
+}
+
+.sns-shares {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  position: absolute;
+  right: 0;
+}
+.sns-shares .sns-share {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  height: 56px;
+  width: 56px;
+  text-decoration: none;
+}
+.sns-shares .sns-share:hover:before, .sns-shares .sns-share:hover:after {
+  width: 0;
+}
+.sns-shares .twitter-share .fa-twitter {
+  font-size: 24px;
+}
+.sns-shares .fb-share .fa-facebook-f {
+  font-size: 24px;
+}
+.sns-shares .hatena-share img {
+  width: 32px;
+}
+.sns-shares .line-share img {
+  width: 32px;
+}
+
+.sp-sns-shares {
+  display: none;
+}
+
+
+@media (max-width: 920px) {
+  .pc-sns-shares {
+    display: none;
+  }
+
+  .sp-sns-shares {
+    display: flex;
+    position: relative;
+    justify-content: space-around;
+    width: 100%;
+  }
+}
+/* vBackground */
+.chroma {
+  color: #e3e3e3;
+  background-color: #364549;
+}
+
+/* vError */
+.chroma .err {
+  color: #dddddd;
+  border-bottom: 2px dotted #c01b1b;
+}
+
+/* LineTableTD */
+.chroma .lntd {
+  vertical-align: top;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+/* LineTable */
+.chroma .lntable {
+  border-spacing: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  width: auto;
+  overflow: auto;
+  display: block;
+}
+
+/* LineHighlight */
+.chroma .hl {
+  display: block;
+  width: 100%;
+  background-color: #ffffcc;
+}
+
+/* LineNumbersTable */
+.chroma .lnt {
+  margin-right: 0.4em;
+  padding: 0 0.4em 0 0.4em;
+}
+
+/* LineNumbers */
+.chroma .ln {
+  margin-right: 0.4em;
+  padding: 0 0.4em 0 0.4em;
+}
+
+/* vKeyword */
+.chroma .k {
+  color: #ebd247;
+}
+
+/* KeywordConstant */
+.chroma .kc {
+  color: #ebd247;
+}
+
+/* KeywordDeclaration */
+.chroma .kd {
+  color: #ebd247;
+}
+
+/* vKeywordNamespace */
+.chroma .kn {
+  color: #ff8095;
+}
+
+/* KeywordPseudo */
+.chroma .kp {
+  color: #ebd247;
+}
+
+/* KeywordReserved */
+.chroma .kr {
+  color: #ebd247;
+}
+
+/* KeywordType */
+.chroma .kt {
+  color: #ebd247;
+}
+
+/* vNameAttribute */
+.chroma .na {
+  color: #8bdf4c;
+}
+
+/* NameClass */
+.chroma .nc {
+  color: #8bdf4c;
+}
+
+/* NameConstant */
+.chroma .no {
+  color: #ebd247;
+}
+
+/* NameDecorator */
+.chroma .nd {
+  color: #8bdf4c;
+}
+
+/* NameException */
+.chroma .ne {
+  color: #8bdf4c;
+}
+
+/* vNameFunction */
+.chroma .nf {
+  color: #8bdf4c;
+}
+
+/* NameOther */
+.chroma .nx {
+  color: #8bdf4c;
+}
+
+/* vNameTag */
+.chroma .nt {
+  color: #ff8095;
+}
+
+/* Literal */
+.chroma .l {
+  color: #a980f5;
+}
+
+/* LiteralDate */
+.chroma .ld {
+  color: #41b7d7;
+}
+
+/* LiteralString */
+.chroma .s {
+  color: #41b7d7;
+}
+
+/* LiteralStringAffix */
+.chroma .sa {
+  color: #41b7d7;
+}
+
+/* LiteralStringBacktick */
+.chroma .sb {
+  color: #41b7d7;
+}
+
+/* LiteralStringChar */
+.chroma .sc {
+  color: #41b7d7;
+}
+
+/* LiteralStringDelimiter */
+.chroma .dl {
+  color: #41b7d7;
+}
+
+/* LiteralStringDoc */
+.chroma .sd {
+  color: #41b7d7;
+}
+
+/* vLiteralStringDouble */
+.chroma .s2 {
+  color: #41b7d7;
+}
+
+/* LiteralStringEscape */
+.chroma .se {
+  color: #a980f5;
+}
+
+/* LiteralStringHeredoc */
+.chroma .sh {
+  color: #41b7d7;
+}
+
+/* LiteralStringInterpol */
+.chroma .si {
+  color: #41b7d7;
+}
+
+/* LiteralStringOther */
+.chroma .sx {
+  color: #41b7d7;
+}
+
+/* LiteralStringRegex */
+.chroma .sr {
+  color: #41b7d7;
+}
+
+/* LiteralStringSingle */
+.chroma .s1 {
+  color: #41b7d7;
+}
+
+/* LiteralStringSymbol */
+.chroma .ss {
+  color: #41b7d7;
+}
+
+/* LiteralNumber */
+.chroma .m {
+  color: #a980f5;
+}
+
+/* LiteralNumberBin */
+.chroma .mb {
+  color: #a980f5;
+}
+
+/* LiteralNumberFloat */
+.chroma .mf {
+  color: #a980f5;
+}
+
+/* LiteralNumberHex */
+.chroma .mh {
+  color: #a980f5;
+}
+
+/* vLiteralNumberInteger */
+.chroma .mi {
+  color: #a980f5;
+}
+
+/* LiteralNumberIntegerLong */
+.chroma .il {
+  color: #a980f5;
+}
+
+/* LiteralNumberOct */
+.chroma .mo {
+  color: #a980f5;
+}
+
+/* vOperator */
+.chroma .o {
+  color: #ff8095;
+}
+
+/* OperatorWord */
+.chroma .ow {
+  color: #ff8095;
+}
+
+/* vComment */
+.chroma .c {
+  color: #9dabae;
+}
+
+/* CommentHashbang */
+.chroma .ch {
+  color: #9dabae;
+}
+
+/* CommentMultiline */
+.chroma .cm {
+  color: #9dabae;
+}
+
+/* CommentSingle */
+.chroma .c1 {
+  color: #9dabae;
+}
+
+/* CommentSpecial */
+.chroma .cs {
+  color: #9dabae;
+}
+
+/* CommentPreproc */
+.chroma .cp {
+  color: #9dabae;
+}
+
+/* CommentPreprocFile */
+.chroma .cpf {
+  color: #9dabae;
+}
+
+/* GenericDeleted */
+.chroma .gd {
+  color: #ff8095;
+}
+
+/* GenericEmph */
+.chroma .ge {
+  font-style: italic;
+}
+
+/* GenericInserted */
+.chroma .gi {
+  color: #8bdf4c;
+}
+
+/* GenericStrong */
+.chroma .gs {
+  font-weight: bold;
+}
+
+/* GenericSubheading */
+.chroma .gu {
+  color: #9dabae;
+}
diff --git a/theme.toml b/theme.toml
index 5c7c2fe..1a7cd2a 100644
--- a/theme.toml
+++ b/theme.toml
@@ -1,4 +1,4 @@
-name = "CoderPortfolio "
+name = "CoderPortfolio"
 license = "MIT"
 licenselink = "https://github.com/naro143/hugo-coder-portfolio/blob/master/LICENSE.md"
 description = "It is a theme to have you know yourself than developed based on "hugo-coder"."