update css

18 files changed, 479 insertions, 0 deletions

diff --git a/layouts/404.html b/layouts/404.html
index e69de29..343ad05 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -0,0 +1,5 @@
+{{ partial "header.html" . }}
+<section class="p-notfound">
+  <h1>404</h1>
+</section>
+{{ partial "footer.html" . }}
diff --git a/layouts/_default/li.html b/layouts/_default/li.html
new file mode 100644
index 0000000..8267266
--- /dev/null
+++ b/layouts/_default/li.html
@@ -0,0 +1,17 @@
+<article class="c-article p-list-article">
+  <header>
+    <h2 class="c-title c-article__title"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+    <p class="c-article__meta">
+      Posted on
+      <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
+        {{ .Date.Format "Jan 2, 2006" }}
+      </time>
+    </p>
+  </header>
+  <div class="c-article__summary">
+    {{ .Summary | plainify | safeHTML }}
+  </div>
+  {{ if .Truncated }}
+  <a href="{{ .Permalink }}" class="c-article__btn p-list-article__btn">Read more</a></li>
+  {{ end }}
+</article>
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index e69de29..4126e13 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -0,0 +1,10 @@
+{{ partial "header.html" . }}
+<h2 class="c-title p-tag-title">{{ .Title }}</h2>
+{{ range $index, $page := (.Paginate (where .Data.Pages "Type" "posts")).Pages }}
+{{ if ne $index 0 }}
+{{ end }}
+{{ .Render "li" }}
+{{ end }}
+{{ partial "pagination.html" .Paginator }}
+{{ partial "siteinfo.html" . }}
+{{ partial "footer.html" . }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index e69de29..1fec18d 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -0,0 +1,58 @@
+{{ partial "header.html" . }}
+{{ $baseurl := .Site.BaseURL | sanitizeurl }}
+<article class="p-article">
+  <header>
+    <h1>{{ .Title }}</h1>
+    <div>
+      <div class="c-time">
+        Posted on
+        <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
+          {{ .Date.Format "Jan 2, 2006" }}
+        </time>
+      </div>
+      {{ range .Params.tags }}
+      <a href="{{ $baseurl }}/tags/{{ . | urlize }}" class="c-tag">{{ . }}</a>
+      {{ end }}
+    </div>
+  </header>
+  {{ with .Params.thumbnail }}
+    <img src="{{ . }}" alt="thumbnail" class="p-article__thumbnail">
+  {{ end }}
+  <section id="js-article" class="p-article__body">
+    {{ .Content }}
+  </section>
+  <footer>
+    {{ with .Site.Params.disqus }}
+    <div id="disqus_thread"></div>
+    <script>
+    var disqus_shortname = '{{ . }}';
+    (function() {
+    var d = document, s = d.createElement('script');
+    s.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
+    s.setAttribute('data-timestamp', +new Date());
+    (d.head || d.body).appendChild(s);
+    })();
+    </script>
+    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+    {{ end }}
+    <nav class="p-pagination c-pagination">
+      <div class="c-pagination__ctrl">
+        <div class="c-pagination__newer">
+          {{ if .Prev }}
+          <a href="{{ .Prev.Permalink }}">Newer</a>
+          {{ else }}
+          {{ end }}
+        </div>
+        <div class="c-pagination__older">
+          {{ if .Next }}
+          <a href="{{ .Next.Permalink }}">Older</a>
+          {{ else }}
+          {{ end }}
+        </div>
+      </div>
+    </nav>
+    {{ partial "related.html" . }}
+    {{ partial "siteinfo.html" . }}
+  </footer>
+</article>
+{{ partial "footer.html" . }}
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
new file mode 100644
index 0000000..6d76e21
--- /dev/null
+++ b/layouts/_default/terms.html
@@ -0,0 +1,12 @@
+{{ partial "header.html" . }}
+{{ $baseurl := .Site.BaseURL | sanitizeurl }}
+<section>
+  <h2>{{ .Title }}</h2>
+  <ul>
+    {{ $data := .Data }}
+    {{ range $key, $value := .Data.Terms }}
+    <li><a href="{{ $baseurl }}/{{ $data.Plural }}/{{ $key | urlize }}">{{ $key }}</a> ({{ len $value }})</li>
+    {{ end }}
+  </ul>
+</section>
+{{ partial "footer.html" . }}
diff --git a/layouts/index.html b/layouts/index.html
index e69de29..b4df7b7 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -0,0 +1,9 @@
+{{ partial "header.html" . }}
+{{ range $index, $page := (.Paginate (where (where .Data.Pages "Type" "posts") ".Params.hidden" "!=" "true" )).Pages }}
+{{ if ne $index 0 }}
+{{ end }}
+{{ .Render "li" }}
+{{ end }}
+{{ partial "pagination.html" .Paginator }}
+{{ partial "siteinfo.html" . }}
+{{ partial "footer.html" . }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index e69de29..ccc5747 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -0,0 +1,41 @@
+  </main>
+  {{ partial "menu.html" . }}
+  <footer class="l-footer">
+    {{ partial "link.html" . }}
+
+    <p class="p-copyright">
+      {{ with .Site.Copyright | safeHTML }}
+        {{ . }}
+      {{ else }}
+        {{ if .Site.Params.author }}
+          {{ if .Site.Params.authorwebsite }}
+            <a href="{{ .Site.Params.authorwebsite }}">{{ .Site.Params.author }}</a>
+          {{ else }}
+            {{ .Site.Params.author }}
+          {{ end }}
+        {{ end }}
+        &nbsp;&bull;&nbsp;
+        {{ .Site.LastChange.Format "2006" }}
+
+        {{ if .Site.Title }}
+          &nbsp;&bull;&nbsp;
+          <a href="{{ "" | absLangURL }}">{{ .Site.Title }}</a>
+        {{ end }}
+      {{ end }}
+    </p>
+  </footer>
+
+  {{ with .Site.Params.ga_api_key }}
+  <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    ga('create', '{{ . }}', 'auto');
+    ga('send', 'pageview');
+  </script>
+  {{ end }}
+
+  {{- partial "footer_custom.html" . }}
+</body>
+</html>
diff --git a/layouts/partials/footer_custom.html b/layouts/partials/footer_custom.html
new file mode 100644
index 0000000..06fb2be
--- /dev/null
+++ b/layouts/partials/footer_custom.html
@@ -0,0 +1,4 @@
+<!--
+If you want to include any custom html just before </body>, put it in /layouts/footer_custom.html
+Do not put anything in this file - it's only here so that hugo won't throw an error if /layouts/footer_custom.html doesn't exist.
+-->
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
new file mode 100644
index 0000000..6fc67ac
--- /dev/null
+++ b/layouts/partials/head.html
@@ -0,0 +1,51 @@
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
+  {{ with .Title | default .Site.Title }}
+  <title>{{ . }}</title>
+  <meta property="og:title" content="{{ . }}" />
+  <meta name="twitter:title" content="{{ . }}" />
+  {{ end }}
+
+  {{ with .Description | default .Site.Params.subtitle }}
+  <meta name="description" content="{{ . }}">
+  <meta property="og:description" content="{{ . }}">
+  <meta name="twitter:description" content="{{ . | truncate 200 }}">
+  {{ end }}
+
+  <meta name="author" content="{{ .Site.Params.author }}"/>
+  <meta property="og:site_name" content="{{ .Site.Title }}" />
+  <meta property="og:url" content="{{ .Permalink }}" />
+
+  {{ with .Params.thumbnail }}
+  <meta property="og:image" content="{{ . | absURL }}" />
+  <meta name="twitter:image" content="{{ . | absURL }}" />
+  {{ end }}
+  <meta name="twitter:card" content="summary" />
+
+  {{ with .Site.Params.twitter }}
+  <meta name="twitter:site" content="@{{ . }}" />
+  <meta name="twitter:creator" content="@{{ . }}" />
+  {{ end }}
+
+  {{ if .IsPage }}
+  <meta property="og:type" content="article" />
+  {{ with .Site.Params.facebook }}
+  <meta property="og:article:author" content="https://facebook.com/{{ . }}" />
+  {{ end }}
+  {{ else }}
+  <meta property="og:type" content="website" />
+  {{ end }}
+  <!-- Hugo Version number -->
+  {{ .Hugo.Generator -}}
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
+  <link rel="stylesheet" href="{{ .Site.BaseURL }}css/style.css" />
+  {{- with .Site.Params.favicon }}
+  <link rel='icon' type='image/x-icon' href="{{ . | absURL }}" />
+  {{- end -}}
+  {{ if eq .URL "/" }}
+  <link href="{{ .RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />
+  {{ end }}
+  <script type="text/javascript" src="{{ .Site.BaseURL }}js/bundle.js"></script>
+  {{ partial "head_custom.html" . }}
+</head>
diff --git a/layouts/partials/head_custom.html b/layouts/partials/head_custom.html
new file mode 100644
index 0000000..a76e9a6
--- /dev/null
+++ b/layouts/partials/head_custom.html
@@ -0,0 +1,4 @@
+<!--
+If you want to include any custom html just before </head>, put it in /layouts/head_custom.html
+Do not put anything in this file - it's only here so that hugo won't throw an error if /layouts/head_custom.html doesn't exist.
+-->
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index e69de29..37c2867 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="{{ .Site.LanguageCode }}">
+{{ partial "head.html" . }}
+<body>
+  <a href="#main" class="skip-link p-screen-reader-text">Skip to content</a>
+  {{ partial "svgpack-sprite.html" . }}
+  <header class="l-header">
+    {{ if .IsPage }}
+    <p class="c-title p-title"><a href="{{ .Site.BaseURL }}" class="p-title__link">{{ .Site.Title }}</a></p>
+    {{ else }}
+    <h1 class="c-title p-title"><a href="{{ .Site.BaseURL }}" class="p-title__link">{{ .Site.Title }}</a></h1>
+    {{ end }}
+    {{ with .Site.Params.subtitle }}
+    <p class="p-subtitle">
+      {{ . }}
+    </p>
+    {{ end }}
+  </header>
+  <main id="main" class="l-main">
diff --git a/layouts/partials/link.html b/layouts/partials/link.html
new file mode 100644
index 0000000..d96feb7
--- /dev/null
+++ b/layouts/partials/link.html
@@ -0,0 +1,164 @@
+{{ if or ( .Site.Params.twitter ) ( .Site.Params.facebook ) ( .Site.Params.instagram ) ( .Site.Params.googleplus ) ( .Site.Params.github ) ( .Site.Params.gitlab ) ( .Site.Params.npm ) ( .Site.Params.codepen ) ( .Site.Params.dribbble ) ( .Site.Params.fivehundredpx ) ( .Site.Params.flickr ) ( .Site.Params.pinterest ) ( .Site.Params.tumblr ) ( .Site.Params.vimeo ) ( .Site.Params.youtube ) ( .Site.Params.linkedin ) }}
+<ul class="c-links">
+  {{ with .Site.Params.twitter }}
+  <li class="c-links__item">
+    <a href="https://twitter.com/{{ . }}" target="_blank">
+      <svg viewBox="0 0 64 64" class="c-links__icon">
+        <title>twitter</title>
+        <use xlink:href="#icon-twitter"></use>
+      </svg>
+    </a>
+  </li>
+  {{ end }}
+  {{ with .Site.Params.facebook }}
+  <li class="c-links__item">
+    <a href="https://facebook.com/{{ . }}" target="_blank">
+      <svg viewBox="0 0 64 64" class="c-links__icon">
+        <title>facebook</title>
+        <use xlink:href="#icon-facebook"></use>
+      </svg>
+    </a>
+  </li>
+  {{ end }}
+  {{ with .Site.Params.instagram }}
+  <li class="c-links__item">
+    <a href="https://instagram.com/{{ . }}" target="_blank">
+      <svg viewBox="0 0 64 64" class="c-links__icon">
+        <title>instagram</title>
+        <use xlink:href="#icon-instagram"></use>
+      </svg>
+    </a>
+  </li>
+  {{ end }}
+  {{ with .Site.Params.googleplus }}
+  <li class="c-links__item">
+    <a href="{{ . }}" target="_blank">
+      <svg viewBox="0 0 64 64" class="c-links__icon">
+        <title>googleplus</title>
+        <use xlink:href="#icon-google-plus"></use>
+      </svg>
+    </a>
+  </li>
+  {{ end }}
+  {{ with .Site.Params.github }}
+  <li class="c-links__item">
+    <a href="https://github.com/{{ . }}" target="_blank">
+      <svg viewBox="0 0 64 64" class="c-links__icon">
+        <title>github</title>
+        <use xlink:href="#icon-github"></use>
+      </svg>
+    </a>
+  </li>
+  {{ end }}
+  {{ with .Site.Params.gitlab }}
+  <li class="c-links__item">
+    <a href="https://gitlab.com/{{ . }}" target="_blank">
+      <svg viewBox="0 0 64 64" class="c-links__icon">
+        <title>gitlab</title>
+        <use xlink:href="#icon-gitlab"></use>
+      </svg>
+    </a>
+  </li>
+  {{ end }}
+  {{ with .Site.Params.npm }}
+  <li class="c-links__item">
+    <a href="https://www.npmjs.com/{{ . }}" target="_blank">
+      <svg viewBox="0 0 64 64" class="c-links__icon">
+        <title>npm</title>
+        <use xlink:href="#icon-npm"></use>
+      </svg>
+    </a>
+  </li>
+  {{ end }}
+  {{ with .Site.Params.codepen }}
+  <li class="c-links__item">
+    <a href="https://codepen.io/{{ . }}" target="_blank">
+      <svg viewBox="0 0 64 64" class="c-links__icon">
+        <title>codepen</title>
+        <use xlink:href="#icon-codepen"></use>
+      </svg>
+    </a>
+  </li>
+  {{ end }}
+  {{ with .Site.Params.dribbble }}
+  <li class="c-links__item">
+    <a href="https://dribbble.com/{{ . }}" target="_blank">
+      <svg viewBox="0 0 64 64" class="c-links__icon">
+        <title>dribbble</title>
+        <use xlink:href="#icon-dribbble"></use>
+      </svg>
+    </a>
+  </li>
+  {{ end }}
+  {{ with .Site.Params.fivehundredpx }}
+  <li class="c-links__item">
+    <a href="https://500px.com/{{ . }}" target="_blank">
+      <svg viewBox="0 0 64 64" class="c-links__icon">
+        <title>500px</title>
+        <use xlink:href="#icon-500px"></use>
+      </svg>
+    </a>
+  </li>
+  {{ end }}
+  {{ with .Site.Params.flickr }}
+  <li class="c-links__item">
+    <a href="https://www.flickr.com/photos/{{ . }}" target="_blank">
+      <svg viewBox="0 0 64 64" class="c-links__icon">
+        <title>flickr</title>
+        <use xlink:href="#icon-flickr"></use>
+      </svg>
+    </a>
+  </li>
+  {{ end }}
+  {{ with .Site.Params.pinterest }}
+  <li class="c-links__item">
+    <a href="https://www.pinterest.jp/{{ . }}" target="_blank">
+      <svg viewBox="0 0 64 64" class="c-links__icon">
+        <title>pinterest</title>
+        <use xlink:href="#icon-pinterest"></use>
+      </svg>
+    </a>
+  </li>
+  {{ end }}
+  {{ with .Site.Params.tumblr }}
+  <li class="c-links__item">
+    <a href="https://www.tumblr.com/blog/{{ . }}" target="_blank">
+      <svg viewBox="0 0 64 64" class="c-links__icon">
+        <title>tumblr</title>
+        <use xlink:href="#icon-tumblr"></use>
+      </svg>
+    </a>
+  </li>
+  {{ end }}
+  {{ with .Site.Params.vimeo }}
+  <li class="c-links__item">
+    <a href="https://vimeo.com/{{ . }}" target="_blank">
+      <svg viewBox="0 0 64 64" class="c-links__icon">
+        <title>vimeo</title>
+        <use xlink:href="#icon-vimeo"></use>
+      </svg>
+    </a>
+  </li>
+  {{ end }}
+  {{ with .Site.Params.youtube }}
+  <li class="c-links__item">
+    <a href="https://www.youtube.com/user/{{ . }}" target="_blank">
+      <svg viewBox="0 0 64 64" class="c-links__icon">
+        <title>youtube</title>
+        <use xlink:href="#icon-youtube"></use>
+      </svg>
+    </a>
+  </li>
+  {{ end }}
+  {{ with .Site.Params.linkedin }}
+  <li class="c-links__item">
+    <a href="https://linkedin.com/in/{{ . }}" target="_blank">
+      <svg viewBox="0 0 64 64" class="c-links__icon">
+        <title>linkedin</title>
+        <use xlink:href="#icon-linkedin"></use>
+      </svg>
+    </a>
+  </li>
+  {{ end }}
+</ul>
+{{ end }}
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
new file mode 100644
index 0000000..5707fbe
--- /dev/null
+++ b/layouts/partials/menu.html
@@ -0,0 +1,24 @@
+{{ if .Site.Menus.main }}
+<nav class="l-nav p-menu">
+  <ul class="p-menu__lists">
+    {{ range .Site.Menus.main.ByWeight }}
+      {{ if .HasChildren }}
+        <li class="p-menu__listitem p-menu__parent">
+          <span>{{ .Name }}</span>
+          <ul>
+            {{ range .Children }}
+              <li class="p-menu__listitem p-menu__child"><a href="{{ .URL | relLangURL }}">{{ .Name }}</a></li>
+            {{ end }}
+          </ul>
+        </li>
+      {{ else }}
+      <li class="p-menu__listitem">
+        <a href="{{ .URL }}">
+          {{- .Name -}}
+        </a>
+      </li>
+      {{ end }}
+    {{ end }}
+  </ul>
+</nav>
+{{ end }}
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
new file mode 100644
index 0000000..801452c
--- /dev/null
+++ b/layouts/partials/pagination.html
@@ -0,0 +1,15 @@
+<nav class="c-pagination p-pagination">
+  <div class="c-pagination__ctrl">
+    <div class="c-pagination__newer">
+      {{if .HasPrev}}
+      <a href="{{ .Prev.URL }}">Newer</a>
+      {{end}}
+    </div>
+    <div class="c-pagination__older">
+      {{if .HasNext}}
+      <a href="{{ .Next.URL }}">Older</a>
+      {{end}}
+    </div>
+  </div>
+  <span class="c-pagination__count p-pagination__count">Page {{ .PageNumber }} of {{.TotalPages}}</span>
+</nav>
diff --git a/layouts/partials/related.html b/layouts/partials/related.html
new file mode 100644
index 0000000..05a2117
--- /dev/null
+++ b/layouts/partials/related.html
@@ -0,0 +1,18 @@
+{{ $related := .Site.RegularPages.Related . | first 6 }}
+{{ with $related }}
+<section class="p-related">
+  <h3>See Also</h3>
+  <ul id="slider" class="p-related__list">
+    {{ range . }}
+    <li class="p-related__item js-related__item">
+      <a href="{{ .RelPermalink }}"
+        {{ with .Params.thumbnail }}
+          style="background-image: url({{ $.Site.BaseURL }}{{ . }});"
+        {{ end }}>
+        <span>{{ .Title }}</span>
+      </a>
+    </li>
+    {{ end }}
+  </ul>
+</section>
+{{ end }}
diff --git a/layouts/partials/siteinfo.html b/layouts/partials/siteinfo.html
new file mode 100644
index 0000000..05b9256
--- /dev/null
+++ b/layouts/partials/siteinfo.html
@@ -0,0 +1,26 @@
+{{ if or ( .Site.Params.avatar ) ( .Site.Params.author ) ( .Site.Params.bio ) ( .Site.Params.contact ) }}
+<aside class="p-author">
+  {{ with .Site.Params.avatar }}
+  <div class="c-avatar p-author__avatar">
+    <img alt="Author Avatar" src="{{ . }}" />
+  </div>
+  {{ end }}
+  {{ if or ( .Site.Params.author ) ( .Site.Params.bio ) ( .Site.Params.contact ) }}
+  <div class="p-author__body">
+    {{ with .Site.Params.author }}
+    <p class="c-title p-author__name ">{{ . }}</p>
+    {{ end }}
+    {{ with .Site.Params.bio }}
+    <p>{{ . }}</p>
+    {{ end }}
+    {{ with .Site.Params.contact }}
+    <p>
+      <a href="{{ . }}">
+        Contact me
+      </a>
+    </p>
+    {{ end }}
+  </div>
+  {{ end }}
+</aside>
+{{ end }}
diff --git a/layouts/partials/svgpack-sprite.html b/layouts/partials/svgpack-sprite.html
new file mode 100644
index 0000000..78edc69
--- /dev/null
+++ b/layouts/partials/svgpack-sprite.html
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;" aria-hidden="true"> <symbol id="icon-500px" viewBox="0 0 16 16"><g> <path d="M3.953 10.512a5.24 5.24 0 0 0 6.996 3.141c.625-.262 1.184-.641 1.666-1.122s.859-1.041 1.122-1.666c.272-.647.412-1.331.412-2.037s-.137-1.394-.412-2.037c-.262-.625-.641-1.184-1.122-1.666s-1.041-.859-1.666-1.122a5.226 5.226 0 0 0-2.037-.413c-.716 0-1.431.144-2.066.413-.509.216-1.372.769-1.875 1.291l-.003.003V.984h7.241c.262-.003.262-.372.262-.491 0-.122 0-.487-.266-.491H4.377a.343.343 0 0 0-.344.341v6.066c0 .197.244.338.472.384.444.094.544-.047.653-.197l.016-.019c.166-.247.681-.766.688-.772a4.262 4.262 0 0 1 3.037-1.25c1.147 0 2.222.444 3.028 1.25a4.245 4.245 0 0 1 1.256 3.019 4.236 4.236 0 0 1-1.25 3.019 4.336 4.336 0 0 1-3.047 1.25 4.136 4.136 0 0 1-2.159-.597l.003-3.688c0-.491.213-1.028.572-1.431a2.09 2.09 0 0 1 1.588-.716c.594 0 1.15.225 1.566.634.409.406.637.95.637 1.528a2.179 2.179 0 0 1-2.206 2.197c-.238 0-.672-.106-.691-.109-.25-.075-.356.272-.391.387-.134.441.069.528.109.541.397.125.659.147 1.003.147a3.173 3.173 0 0 0 3.169-3.169c0-1.734-1.422-3.144-3.166-3.144-.856 0-1.659.328-2.263.919-.575.566-.903 1.319-.903 2.069v.019c-.003.094-.003 2.306-.006 3.031l-.003-.003c-.328-.363-.653-.919-.869-1.488-.084-.222-.275-.184-.534-.103-.125.034-.469.141-.391.394zm3.722-.865c0 .106.097.2.156.253l.019.019c.1.097.194.147.281.147a.181.181 0 0 0 .131-.05c.044-.041.537-.544.588-.591l.553.55c.05.056.106.088.172.088.088 0 .184-.053.284-.156.238-.244.119-.375.063-.438l-.559-.559.584-.588c.128-.137.016-.284-.097-.397-.162-.162-.322-.206-.422-.112l-.581.581-.588-.588a.16.16 0 0 0-.113-.047c-.078 0-.172.053-.275.156-.181.181-.219.306-.125.406l.588.584-.584.584c-.053.05-.078.103-.075.156zm1.278-7.931c-.938 0-1.938.191-2.669.506a.207.207 0 0 0-.134.181.753.753 0 0 0 .069.337c.047.116.166.425.4.334a6.689 6.689 0 0 1 2.334-.444 6.35 6.35 0 0 1 2.469.497c.622.263 1.206.644 1.844 1.194a.22.22 0 0 0 .147.059c.125 0 .244-.122.347-.237.169-.191.287-.35.119-.509a6.858 6.858 0 0 0-2.1-1.356 7.326 7.326 0 0 0-2.825-.563zM14.006 13.3c-.113-.113-.209-.178-.294-.203s-.162-.006-.222.053l-.056.056a6.32 6.32 0 0 1-6.938 1.356 6.336 6.336 0 0 1-2.013-1.356 6.046 6.046 0 0 1-1.356-2.012c-.288-.713-.381-1.247-.413-1.422-.003-.016-.006-.028-.006-.037-.041-.206-.231-.222-.503-.178-.112.019-.459.072-.428.319v.006a7.261 7.261 0 0 0 2.04 3.994 7.266 7.266 0 0 0 10.288 0l.059-.059c.069-.084.134-.225-.159-.516z"/> </g></symbol> <symbol id="icon-codepen" viewBox="0 0 16 16"><g> <path d="M14.777 5.751l-7-4.667a.5.5 0 0 0-.555 0l-7 4.667a.501.501 0 0 0-.223.416v4.667c0 .167.084.323.223.416l7 4.667a.5.5 0 0 0 .554 0l7-4.667a.501.501 0 0 0 .223-.416V6.167a.501.501 0 0 0-.223-.416zM7.5 10.232L4.901 8.5 7.5 6.768 10.099 8.5 7.5 10.232zM8 5.899V2.434l5.599 3.732L11 7.898l-3-2zm-1 0l-3 2-2.599-1.732L7 2.435V5.9zM3.099 8.5L1 9.899V7.101L3.099 8.5zM4 9.101l3 2v3.465l-5.599-3.732L4 9.102zm4 2l3-2 2.599 1.732L8 14.565V11.1zM11.901 8.5L14 7.101v2.798L11.901 8.5z"/> </g></symbol> <symbol id="icon-dribbble" viewBox="0 0 16 16"><g> <path d="M8 16c-4.412 0-8-3.588-8-8s3.587-8 8-8c4.412 0 8 3.587 8 8s-3.588 8-8 8zm6.747-6.906c-.234-.075-2.116-.634-4.256-.291a29.7 29.7 0 0 1 1.328 4.872 6.845 6.845 0 0 0 2.928-4.581zM10.669 14.3c-.103-.6-.497-2.688-1.456-5.181-.016.006-.031.009-.044.016-3.856 1.344-5.241 4.016-5.362 4.266a6.807 6.807 0 0 0 6.863.9zm-7.747-1.722c.156-.266 2.031-3.369 5.553-4.509a7.04 7.04 0 0 1 .269-.081 24.04 24.04 0 0 0-.553-1.159c-3.409 1.022-6.722.978-7.022.975-.003.069-.003.138-.003.209 0 1.753.666 3.356 1.756 4.566zM1.313 6.609c.306.003 3.122.016 6.319-.831a43.092 43.092 0 0 0-2.534-3.953 6.854 6.854 0 0 0-3.784 4.784zM6.4 1.366a36.612 36.612 0 0 1 2.55 4c2.431-.909 3.459-2.294 3.581-2.469A6.799 6.799 0 0 0 6.4 1.366zm6.891 2.325c-.144.194-1.291 1.663-3.816 2.694.159.325.313.656.453.991.05.119.1.234.147.353 2.275-.284 4.534.172 4.759.219a6.816 6.816 0 0 0-1.544-4.256z"/> </g></symbol> <symbol id="icon-facebook" viewBox="0 0 16 16"><g> <path d="M9.5 3H12V0H9.5C7.57 0 6 1.57 6 3.5V5H4v3h2v8h3V8h2.5l.5-3H9V3.5c0-.271.229-.5.5-.5z"/> </g></symbol> <symbol id="icon-feed" viewBox="0 0 16 16"><g> <path d="M2.13 11.733c-1.175 0-2.13.958-2.13 2.126 0 1.174.955 2.122 2.13 2.122a2.126 2.126 0 0 0 2.133-2.122 2.133 2.133 0 0 0-2.133-2.126zM.002 5.436v3.067c1.997 0 3.874.781 5.288 2.196a7.45 7.45 0 0 1 2.192 5.302h3.08c0-5.825-4.739-10.564-10.56-10.564zM.006 0v3.068C7.128 3.068 12.924 8.87 12.924 16H16C16 7.18 8.824 0 .006 0z"/> </g></symbol> <symbol id="icon-flickr" viewBox="0 0 16 16"><g> <path d="M0 8.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0zm9 0a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/> </g></symbol> <symbol id="icon-github" viewBox="0 0 16 16"><g> <path d="M8 .198a8 8 0 0 0-2.529 15.591c.4.074.547-.174.547-.385 0-.191-.008-.821-.011-1.489-2.226.484-2.695-.944-2.695-.944-.364-.925-.888-1.171-.888-1.171-.726-.497.055-.486.055-.486.803.056 1.226.824 1.226.824.714 1.223 1.872.869 2.328.665.072-.517.279-.87.508-1.07-1.777-.202-3.645-.888-3.645-3.954 0-.873.313-1.587.824-2.147-.083-.202-.357-1.015.077-2.117 0 0 .672-.215 2.201.82A7.672 7.672 0 0 1 8 4.066c.68.003 1.365.092 2.004.269 1.527-1.035 2.198-.82 2.198-.82.435 1.102.162 1.916.079 2.117.513.56.823 1.274.823 2.147 0 3.073-1.872 3.749-3.653 3.947.287.248.543.735.543 1.481 0 1.07-.009 1.932-.009 2.195 0 .213.144.462.55.384A8 8 0 0 0 8.001.196z"/> </g></symbol> <symbol id="icon-gitlab" viewBox="0 0 28 28"><g> <path d="M1.625 11.031L14 26.89.437 17.046a1.092 1.092 0 0 1-.391-1.203l1.578-4.813zm7.219 0h10.313L14.001 26.89zM5.75 1.469l3.094 9.562H1.625l3.094-9.562a.548.548 0 0 1 1.031 0zm20.625 9.562l1.578 4.813a1.09 1.09 0 0 1-.391 1.203l-13.563 9.844 12.375-15.859zm0 0h-7.219l3.094-9.562a.548.548 0 0 1 1.031 0z"/> </g></symbol> <symbol id="icon-google-plus" viewBox="0 0 16 16"><g> <path d="M5.091 7.147v1.747h2.888c-.116.75-.872 2.197-2.888 2.197-1.737 0-3.156-1.441-3.156-3.216s1.419-3.216 3.156-3.216c.991 0 1.65.422 2.028.784L8.5 4.112c-.888-.828-2.037-1.331-3.409-1.331C2.275 2.784 0 5.059 0 7.875s2.275 5.091 5.091 5.091c2.937 0 4.888-2.066 4.888-4.975 0-.334-.037-.591-.081-.844H5.092zM16 7h-1.5V5.5H13V7h-1.5v1.5H13V10h1.5V8.5H16z"/> </g></symbol> <symbol id="icon-google" viewBox="0 0 16 16"><g> <path d="M8.159 6.856V9.6h4.537c-.184 1.178-1.372 3.45-4.537 3.45C5.428 13.05 3.2 10.788 3.2 8s2.228-5.05 4.959-5.05c1.553 0 2.594.663 3.188 1.234l2.172-2.091C12.125.787 10.319-.001 8.16-.001c-4.422 0-8 3.578-8 8s3.578 8 8 8c4.616 0 7.681-3.247 7.681-7.816 0-.525-.056-.925-.125-1.325L8.16 6.855z"/> </g></symbol> <symbol id="icon-instagram" viewBox="0 0 22 22"><g> <path d="M15.445 0H6.554A6.559 6.559 0 0 0 0 6.554v8.891A6.559 6.559 0 0 0 6.554 22h8.891a6.56 6.56 0 0 0 6.554-6.555V6.554A6.557 6.557 0 0 0 15.445 0zm4.342 15.445a4.343 4.343 0 0 1-4.342 4.342H6.554a4.341 4.341 0 0 1-4.341-4.342V6.554a4.34 4.34 0 0 1 4.341-4.341h8.891a4.342 4.342 0 0 1 4.341 4.341l.001 8.891z"/> <path d="M11 5.312A5.693 5.693 0 0 0 5.312 11 5.694 5.694 0 0 0 11 16.688 5.694 5.694 0 0 0 16.688 11 5.693 5.693 0 0 0 11 5.312zm0 9.163a3.475 3.475 0 1 1-.001-6.95 3.475 3.475 0 0 1 .001 6.95zm5.7-10.484a1.363 1.363 0 1 1-1.364 1.364c0-.752.51-1.364 1.364-1.364z"/> </g></symbol> <symbol id="icon-linkedin" viewBox="0 0 16 16"><g> <path d="M6 6h2.767v1.418h.04C9.192 6.727 10.134 6 11.539 6 14.46 6 15 7.818 15 10.183V15h-2.885v-4.27c0-1.018-.021-2.329-1.5-2.329-1.502 0-1.732 1.109-1.732 2.255V15H6V6zM1 6h3v9H1V6zM4 3.5a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 4 3.5z"/> </g></symbol> <symbol id="icon-mail" viewBox="0 0 22 18"><g> <path fill="#000" d="M0 17.225V.776h22v16.447H0v.002zm3.011-1.815h15.978l-5.111-5.115L11 13.179l-2.877-2.883-5.112 5.114zm-1.216-1.275l5.077-5.09L1.795 3.98v10.155zm13.332-5.09l5.079 5.09V3.979l-5.079 5.066zm-4.126 1.588l8.022-8.027-16.045-.001 8.023 8.028z"/> </g></symbol> <symbol id="icon-npm" viewBox="0 0 16 16"><g> <path d="M0 0v16h16V0H0zm13 13h-2V5H8v8H3V3h10v10z"/> </g></symbol> <symbol id="icon-pinterest" viewBox="0 0 16 16"><g> <path d="M8 1.069a6.93 6.93 0 0 0-2.525 13.384c-.059-.547-.116-1.391.025-1.988.125-.541.813-3.444.813-3.444s-.206-.416-.206-1.028c0-.963.559-1.684 1.253-1.684.591 0 .878.444.878.975 0 .594-.378 1.484-.575 2.306-.166.691.344 1.253 1.025 1.253 1.231 0 2.178-1.3 2.178-3.175 0-1.659-1.194-2.819-2.894-2.819-1.972 0-3.128 1.478-3.128 3.009 0 .597.228 1.234.516 1.581.056.069.066.128.047.2a95.89 95.89 0 0 1-.194.787c-.031.128-.1.153-.231.094-.866-.403-1.406-1.669-1.406-2.684 0-2.188 1.587-4.194 4.578-4.194 2.403 0 4.272 1.712 4.272 4.003 0 2.388-1.506 4.313-3.597 4.313-.703 0-1.362-.366-1.588-.797 0 0-.347 1.322-.431 1.647-.156.603-.578 1.356-.862 1.816a6.93 6.93 0 0 0 8.984-6.622 6.931 6.931 0 0 0-6.931-6.934z"/> </g></symbol> <symbol id="icon-pushpin" viewBox="0 0 16 16"><g> <path d="M8.5 0L7 1.5 8.5 3 5 7H1.5l2.75 2.75L0 15.385V16h.615l5.635-4.25L9 14.5V11l4-3.5L14.5 9 16 7.5 8.5 0zM7 8.5l-1-1L9.5 4l1 1L7 8.5z"/> </g></symbol> <symbol id="icon-search" viewBox="0 0 16 16"><g> <path d="M15.504 13.616l-3.79-3.223c-.392-.353-.811-.514-1.149-.499a6 6 0 1 0-.672.672c-.016.338.146.757.499 1.149l3.223 3.79c.552.613 1.453.665 2.003.115s.498-1.452-.115-2.003zM6 10a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/> </g></symbol> <symbol id="icon-tumblr" viewBox="0 0 16 16"><g> <path d="M9.001 7v3.659c0 .928-.012 1.463.086 1.727.098.262.342.534.609.691.354.212.758.318 1.214.318.81 0 1.289-.107 2.09-.633v2.405a9.089 9.089 0 0 1-1.833.639A7.93 7.93 0 0 1 9.369 16a4.9 4.9 0 0 1-1.725-.276 4.195 4.195 0 0 1-1.438-.79c-.398-.343-.672-.706-.826-1.091s-.23-.944-.23-1.676V6.556H3.003V4.29c.628-.204 1.331-.497 1.778-.877a4.386 4.386 0 0 0 1.08-1.374C6.133 1.505 6.32.825 6.422 0h2.579v4H13v3H9.001z"/> </g></symbol> <symbol id="icon-twitter" viewBox="0 0 16 16"><g> <path d="M16 3.538a6.461 6.461 0 0 1-1.884.516 3.301 3.301 0 0 0 1.444-1.816 6.607 6.607 0 0 1-2.084.797 3.28 3.28 0 0 0-2.397-1.034 3.28 3.28 0 0 0-3.197 4.028 9.321 9.321 0 0 1-6.766-3.431 3.284 3.284 0 0 0 1.015 4.381A3.301 3.301 0 0 1 .643 6.57v.041A3.283 3.283 0 0 0 3.277 9.83a3.291 3.291 0 0 1-1.485.057 3.293 3.293 0 0 0 3.066 2.281 6.586 6.586 0 0 1-4.862 1.359 9.286 9.286 0 0 0 5.034 1.475c6.037 0 9.341-5.003 9.341-9.341 0-.144-.003-.284-.009-.425a6.59 6.59 0 0 0 1.637-1.697z"/> </g></symbol> <symbol id="icon-vimeo" viewBox="0 0 16 16"><g> <path d="M15.994 4.281c-.072 1.556-1.159 3.691-3.263 6.397-2.175 2.825-4.016 4.241-5.522 4.241-.931 0-1.722-.859-2.366-2.581-.431-1.578-.859-3.156-1.291-4.734-.478-1.722-.991-2.581-1.541-2.581-.119 0-.538.253-1.256.753l-.753-.969c.791-.694 1.569-1.388 2.334-2.081 1.053-.909 1.844-1.387 2.372-1.438 1.244-.119 2.013.731 2.3 2.553.309 1.966.525 3.188.647 3.666.359 1.631.753 2.447 1.184 2.447.334 0 .838-.528 1.509-1.588.669-1.056 1.028-1.862 1.078-2.416.097-.912-.262-1.372-1.078-1.372a2.98 2.98 0 0 0-1.184.263c.787-2.575 2.287-3.825 4.506-3.753 1.641.044 2.416 1.109 2.322 3.194z"/> </g></symbol> <symbol id="icon-wordpress" viewBox="0 0 16 16"><g> <path d="M2 8c0 2.313 1.38 4.312 3.382 5.259L2.52 5.622A5.693 5.693 0 0 0 2 8zm10.05-.295c0-.722-.266-1.222-.495-1.612-.304-.482-.589-.889-.589-1.371 0-.537.418-1.037 1.008-1.037.027 0 .052.003.078.005A6.064 6.064 0 0 0 8 2.156 6.036 6.036 0 0 0 2.987 4.79c.141.004.274.007.386.007.627 0 1.599-.074 1.599-.074.323-.018.361.444.038.482 0 0-.325.037-.687.055l2.185 6.33 1.313-3.835-.935-2.495a12.304 12.304 0 0 1-.629-.055c-.323-.019-.285-.5.038-.482 0 0 .991.074 1.58.074.627 0 1.599-.074 1.599-.074.323-.018.362.444.038.482 0 0-.326.037-.687.055l2.168 6.282.599-1.947c.259-.809.457-1.389.457-1.889zm-3.945.806l-1.8 5.095a6.148 6.148 0 0 0 3.687-.093.52.52 0 0 1-.043-.081L8.105 8.511zm5.16-3.315c.026.186.04.386.04.601 0 .593-.114 1.259-.456 2.093l-1.833 5.16c1.784-1.013 2.983-2.895 2.983-5.051a5.697 5.697 0 0 0-.735-2.803zM8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm0 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14z"/> </g></symbol> <symbol id="icon-youtube" viewBox="0 0 16 16"><g> <path d="M15.841 4.8s-.156-1.103-.637-1.587c-.609-.637-1.291-.641-1.603-.678-2.237-.163-5.597-.163-5.597-.163h-.006s-3.359 0-5.597.163c-.313.038-.994.041-1.603.678C.317 3.697.164 4.8.164 4.8S.005 6.094.005 7.391v1.213c0 1.294.159 2.591.159 2.591s.156 1.103.634 1.588c.609.637 1.409.616 1.766.684 1.281.122 5.441.159 5.441.159s3.363-.006 5.6-.166c.313-.037.994-.041 1.603-.678.481-.484.637-1.588.637-1.588s.159-1.294.159-2.591V7.39c-.003-1.294-.162-2.591-.162-2.591zm-9.494 5.275V5.578l4.322 2.256-4.322 2.241z"/> </g></symbol></svg>
\ No newline at end of file
diff --git a/layouts/shortcodes/zoom-img.html b/layouts/shortcodes/zoom-img.html
new file mode 100644
index 0000000..3873d0a
--- /dev/null
+++ b/layouts/shortcodes/zoom-img.html
@@ -0,0 +1 @@
+<img src="{{ .Get "src" }}" alt="{{ .Page.Title }} {{ .Get "src" }}" data-action="zoom">