cosy-jekyll 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: bdcc51274e4c3b623b8c07e8023545e28f80f49d6fa586a76ae34a5342be05db
+  data.tar.gz: d3bcd3cff2483a8a4bcc7f7e55c1b76a688261900f6c190e6d72f859c64d0d7f
+SHA512:
+  metadata.gz: 4b70dbe5fd03a4aef00bf0157ea4b3c28fd854576e0c59d55fd5300c87b4cd6bbbdb10b441416e55ff88772bb6a7edcc515ac5c02babbbf980bbbc9264f6e3bf
+  data.tar.gz: 0e5b7b85ae9284de930763a2bdc499e8abdc3579de6082e87866eccb0daeaec06bca85773c387773f8c8a817390182fe4120709a4e94cdd7e50e847a5032afb6

data/License

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [2017] [Tw93]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,59 @@
+## [tw93.github.io](http://tw93.github.io/)
+
+- This is Tw93's front-end technology blog.
+- Commonly used to record learning and research front-end technology.
+- Concerned about the front-end new technology and new thinking.
+- The blog theme named [cosy-jekyll](https://rubygems.org/gems/cosy-jekyll) is created by [Tw93](http://tw93.github.io/about/).
+
+## [cosy-jekyll](https://rubygems.org/gems/cosy-jekyll) theme
+
+- cosy-jekyll theme is a responsive blog template providing a good reading experience.
+- **No jQuery**, No other redundant resources.
+- Modern and minimal design, **More concise and Faster** than other jekyll theme.
+- **Responsive templates for post, page**,Looks great on mobile, tablet, and desktop devices.
+- **Loading resources selectively on different platforms.**
+- **Support Lazyload.**
+- Compress JavaScript and CSS.
+- By using SVG and Canvas Makes this blog more geeks.
+- When running in PC,It will show a QRcode that you can read on mobile.
+- When the picture in articles is **too complicated to see it clearly，you can zoom it in full-screen.** .
+- Funny [custom 404 page](http://tw93.github.io/err),You will like it.
+- **More suitable for China**:
+
+  - Dropping Google webfont, using proxy webfont.
+  - Delay loading of resources that are not immediately required.
+  - When Discus failed to load, It will be a good suggestion.
+  - Add Buy Me A Coffee by using WeChat payment.
+
+## [PC Preview](http://tw93.github.io/)
+
+![demo.png](http://gtms02.alicdn.com/tfs/TB1W3NFQVXXXXaUXpXXXXXXXXXX-2316-1537.jpg)
+
+## H5 Preview
+
+<img src="http://ww1.sinaimg.cn/large/0060lm7Tgy1fc8ex6yyh3j30xp1iy0z1.jpg" width="290"/><img src="http://ww3.sinaimg.cn/large/0060lm7Tgy1fc8eyalu16j30xp1iyq7g.jpg" width="290"/><img src="http://ww3.sinaimg.cn/large/0060lm7Tgy1fc8ex5vn9dj30xp1iyafo.jpg" width="290"/>
+
+## QR code
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;![](http://ww1.sinaimg.cn/large/0060lm7Tgy1fc8eyyn0msj305k05kglf.jpg)
+
+## How To Use
+
+1. [Fork the repo](https://github.com/tw93/tw93.github.io)
+2. Clone down the repo with `$ git clone git@github.com:username/reponame.git`
+3. Install bundler with `$ gem install bundler`
+4. Install gems with `$ bundle install`
+5. Run Jekyll with `$ npm run dev`
+6. Begin hacking for your project,You need modify `about.md` and `_config.yml`
+7. For more details, read [documentation](http://jekyllrb.com/)
+
+## Support
+
+- **Feel free to fork. I'll Appreciate it if you keep the Author & Github link at footer**.
+- Give it **a Star** if you like, fork or just clone to use.
+- Having a problem getting something to work or want to know why I setup something in a certain way? [File a GitHub Issue](https://github.com/tw93/tw93.github.io/issues/new).
+- If you make something cool with this theme feel free to let me know.
+
+## License
+
+- The theme is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/_includes/buy-me-coffee.html

@@ -0,0 +1,6 @@
+{% if site.showBuyCoffee != false %}
+<div class="coffee">
+  <div class="buy-me-coffee" id="J_buy-me-coffee" onclick="document.getElementById('J_my_pay_image').classList.toggle('active');this.classList.toggle('active');">Buy Me a Coffee !</div>
+  <img data-src="{{ site.payImage }}" class="my-pay-img lazyload" id="J_my_pay_image">
+</div>
+{% endif %}

data/_includes/feed-footer.html

@@ -0,0 +1 @@
+<p><a href="{{ site.url }}{{ post.url }}">{{ post.title | xml_escape }}</a> was originally published by {{ site.owner.name }} at <a href="{{ site.url }}">{{ site.title }}</a> on {{ post.date | date: "%B %d, %Y" }}.</p>

data/_includes/footer.html

@@ -0,0 +1,68 @@
+<div class="footer-wrapper">
+  <footer role="contentinfo">
+    &copy; {{ site.time | date: '%Y' }} Using <a href="https://github.com/tw93/tw93.github.io" rel="nofollow" target="_blank" class="need_dotted">cosy-jekyll theme</a> by Tw93.
+  </footer>
+</div>
+
+<script type="text/javascript" src="{{ site.url }}/js/index.min.js"></script>
+
+{% if site.google_analytics %}
+<script type="text/javascript">
+  setTimeout(function () {
+    (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', '{{ site.google_analytics }}', 'auto');
+    ga('require', 'linkid', 'linkid.js');
+    ga('send', 'pageview');
+  }, 3000);
+</script>
+{% endif %}
+
+{% if page.comments != false %}
+<script type="text/javascript">
+  setTimeout(function(){
+    new Gitalk({
+        clientID: 'ca11229a5275e8e1c2fd',
+        clientSecret: '61557a125b1b9c0db677239575f816f64114845f',
+        repo: 'tw93.github.io',
+        owner: 'tw93',
+        admin: 'tw93',
+        id: md5(location.pathname),
+        distractionFreeMode: false
+      }).render('gitalk-container');
+  },300)
+</script>
+{% endif %}
+
+{% if page.url=="/" %}
+<script>
+  function hereDoc(f) {
+    return f.toString().replace(/^[^\/]+\/\*!?\s?/, '').replace(/\*\/[^\/]+$/, '');
+  }
+  var string = hereDoc(function () {/*
+
+
+    _                               ___                  _____           _       _
+   | |                             |_  |                /  ___|         (_)     | |
+   | |     ___  __ _ _ __ _ __       | | __ ___   ____ _\ `--.  ___ _ __ _ _ __ | |_
+   | |    / _ \/ _` | '__| '_ \      | |/ _` \ \ / / _` |`--. \/ __| '__| | '_ \| __|
+   | |___|  __/ (_| | |  | | | | /\__/ / (_| |\ V / (_| /\__/ / (__| |  | | |_) | |_
+   \_____/\___|\__,_|_|  |_| |_| \____/ \__,_| \_/ \__,_\____/ \___|_|  |_| .__/ \__|
+
+
+   This is Tw93's front-end technology blog, Commonly used to record learning and research front-end technology, Concerned about the front-end new technology and new thinking.
+   */
+  });
+  console.log(string);
+</script>
+{% endif %}

data/_includes/gallery

@@ -0,0 +1,21 @@
+{% assign images = include.images | split:" " %}
+{% assign caption = include.caption %}
+{% assign cols = include.cols %}
+
+{% case cols %}
+    {% when 1 %}
+        {% assign class = "" %}
+    {% when 2 %}
+        {% assign class = "half" %}
+    {% when 3 %}
+        {% assign class = "third" %}
+    {% else %}
+        {% assign class = "" %}
+{% endcase %}
+
+<figure {% if class != "" %}class="{{ class }}"{% endif %}>
+    {% for image in images %}
+    <a href="{{ image }}"><img src="{{ image }}" alt=""></a>
+    {% endfor %}
+    <figcaption>{{ caption }}</figcaption>
+</figure>

data/_includes/gitalk.html

@@ -0,0 +1,4 @@
+{% if page.comments != false %}
+<section id="gitalk-container"></section>
+{% endif %}
+

data/_includes/head.html

@@ -0,0 +1,56 @@
+<head>
+  <meta charset="utf-8">
+  <title>{% if page.layout =='post' or page.hideHomeActive or page.is404 %}{{ page.title }} - {% endif %}{{ site.title }}</title>
+  <meta name="description"
+        content="{{ site.description }}{% if page.categories %}{{ page.categories }}{% endif %}{% if page.summary %}{{ page.summary }}{% endif %}">
+  {% if page.tags %}
+  <meta name="keywords" content="{{ page.tags | join: ', ' }}">
+  {% endif %}
+  <!-- Open Graph -->
+  <meta property="og:locale" content="{{ site.locale }}">
+  <meta property="og:type" content="article">
+  <meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
+  <meta property="og:description"
+        content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
+  <meta property="og:url" content="{{ site.url }}{{ page.url }}">
+  <meta property="og:site_name" content="{{ site.title }}">
+
+  {% if site.baidu_verify %}
+  <meta name="baidu-site-verification" content="{{site.baidu_verify}}"/>
+  {% endif %}
+
+  {% if site.google_verify %}
+  <meta name="google-site-verification" content="{{ site.google_verify }}">
+  {% endif %}
+
+  {% if page.image.feature %}
+  <meta property="og:image" content="{{ site.url }}/images/{{ page.image.feature }}">
+  {% else %}
+  <meta property="og:image"
+        content="{% if page.image.thumb %}{{ site.url }}/images/{{ page.image.thumb }}{% else %}{{ site.url }}/images/{{ site.logo }}{% endif %}">
+  {% endif %}
+
+  {% capture canonical %}{{ site.url }}{% if site.permalink contains '.html' %}{{ page.url }}{% else %}{{ page.url |
+  remove:'index.html' | strip_slash }}{% endif %}{% endcapture %}
+  <link rel="canonical" href="{{ canonical }}">
+  <link href="{{ site.url }}/feed.xml" type="application/atom+xml" rel="alternate" title="{{ site.title }} Feed">
+
+  <!-- http://t.co/dKP3o1e -->
+  <meta name="HandheldFriendly" content="True">
+  <meta name="MobileOptimized" content="320">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
+
+  <link rel="stylesheet" href="{{ site.url }}/css/index.css">
+
+  <meta http-equiv="cleartype" content="on">
+
+  <link rel="shortcut icon" href="{{ site.url }}/favicon.ico">
+
+  {% if page.layout == "post" %}
+  <script src="//gw.alipayobjects.com/os/rmsportal/PIYOQOcFoeIvZLKgqukk.js" async></script>
+  {% endif %}
+
+  {% if page.comments != false %}
+  <script src="//gw.alipayobjects.com/os/rmsportal/hLaEIutAxSUpcpcRhdtd.js" async></script>
+  {% endif %}
+</head>

data/_includes/header.html

@@ -0,0 +1,42 @@
+<!--[if lt IE 10]>
+<div class="upgrade"><strong><a href="http://whatbrowser.org/" target="_blank">Your browser is quite old!</strong> Why
+  not upgrade to a different browser to better enjoy this site?</a></div>
+<![endif]-->
+
+{% assign homeActive = 'active' %}
+{% if page.hideHomeActive %}
+{% assign homeActive = nil %}
+{% endif %}
+<div class="header-menu" id="J_header">
+  <ul class="header-item-container">
+    <li class="header-item-title {{homeActive}}">
+      <a href="{{site.url}}/" class="title"> {{ site.title }}</a>
+    </li>
+    {% for menu in site.menu reversed %}
+
+    {% assign class = nil %}
+    {% if (page.url contains menu.url and menu.url != '/') %}
+    {% assign class = 'active' %}
+    {% endif %}
+
+    {% if menu.url contains 'http://' or menu.url contains 'https://' %}
+    <li class="header-item {{class}}"><a href="{{menu.url}}" target="_blank">{{ menu.title }}</a></li>
+    {% else %}
+    <li class="header-item {{class}}"><a href="{{site.url}}{{menu.url}}">{{ menu.title }}</a></li>
+    {% endif %}
+    {% endfor %}
+  </ul>
+</div>
+
+<div class="entry-header">
+  <svg width="100%" height="200" xmlns="http://www.w3.org/2000/svg"
+       xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+    <path id="svg-title-path">
+      <animate attributeName="d" from="m0,110 h0" to="m0,110 h1100" dur="2s" repeatCount="1" fill="freeze" begin="0s" />
+    </path>
+    <text font-size="36" fill='#ffffff' x="50%" y="50%" text-anchor="middle" word-spacing="4" letter-spacing="1">
+      <textPath xlink:href="#svg-title-path">{{ page.title }}</textPath>
+    </text>
+  </svg>
+  <canvas id="J_firework_canvas"></canvas>
+</div>

data/_includes/pagination.html

@@ -0,0 +1,66 @@
+{% if paginator.total_pages > 1 %}
+<div class="pagination">
+  <ul class="inline-list">
+    {% comment %} Link for previous page {% endcomment %}
+    {% if paginator.previous_page %}
+    {% if paginator.previous_page == 1 %}
+    <li><a href="{{ site.url }}/" class="btn">Previous</a></li>
+    {% else %}
+    <li><a href="{{ site.url }}/page{{ paginator.previous_page }}/" class="btn">Previous</a></li>
+    {% endif %}
+    {% endif %}
+
+    {% comment %} First page {% endcomment %}
+    {% if paginator.page == 1 %}
+    <li><strong class="current-page">1</strong></li>
+    {% else %}
+    <li><a href="{{ site.url }}/">1</a></li>
+    {% endif %}
+
+    {% assign page_start = 2 %}
+    {% if paginator.page > 4 %}
+    {% assign page_start = paginator.page | minus: 2 %}
+    {% comment %} Ellipsis for truncated links {% endcomment %}
+    <li>…</li>
+    {% endif %}
+
+    {% assign page_end = paginator.total_pages | minus: 1 %}
+    {% assign pages_to_end = paginator.total_pages | minus: paginator.page %}
+    {% if pages_to_end > 4 %}
+    {% assign page_end = paginator.page | plus: 2 %}
+    {% endif %}
+
+    {% for index in (page_start..page_end) %}
+    {% if index == paginator.page %}
+    <li><strong class="current-page">{{index}}</strong></li>
+    {% else %}
+    {% comment %} Distance from current page and this link {% endcomment %}
+    {% assign dist = paginator.page | minus: index %}
+    {% if dist < 0 %}
+    {% comment %} Distance must be a positive value {% endcomment %}
+    {% assign dist = 0 | minus: dist %}
+    {% endif %}
+    <li><a href="{{ site.url }}/page{{ index }}/">{{index}}</a></li>
+    {% endif %}
+    {% endfor %}
+
+    {% comment %} Ellipsis for truncated links {% endcomment %}
+    {% if pages_to_end > 3 %}
+    <li>…</li>
+    {% endif %}
+
+    {% if paginator.page == paginator.total_pages %}
+    <li><strong class="current-page">{{ paginator.page }}</strong></li>
+    {% else %}
+    <li><a href="{{ site.url }}/page{{ paginator.total_pages }}/">{{ paginator.total_pages }}</a></li>
+    {% endif %}
+
+    {% comment %}
+    Link next page
+    {% endcomment %}
+    {% if paginator.next_page %}
+    <li><a href="{{ site.url }}/page{{ paginator.next_page }}/" class="btn">Next</a></li>
+    {% endif %}
+  </ul>
+</div>
+{% endif %}

data/_includes/read-more.html

@@ -0,0 +1,11 @@
+{% if page.previous.url and site.related_posts.size > 0 and page.previous.hide !=true%}
+<a class="read-more" href="{{ site.url }}{{ page.previous.url }}" title="{{ page.previous.url.title }}">
+  <div class="read-more-header">
+    <div  class="read-more-btn">Read More</div>
+  </div>
+  <div class="read-more-content">
+    <h3>{{ page.previous.title}}</h3>
+    <p>【{{ page.previous.date | date: "%Y-%m-%d" }}】{% if page.previous.summary %}{{ page.previous.summary }}{% endif %}</p>
+  </div>
+</a>
+{% endif %}

data/_layouts/home.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html class="no-js" lang="{{site.lang}}">
+{% include head.html %}
+<body id="post-index">
+{% include header.html %}
+<div id="main" role="main">
+  {{ content }}
+</div>
+{% include footer.html %}
+</body>
+</html>

data/_layouts/page.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html class="no-js" lang="{{site.lang}}">
+{% include head.html %}
+<body id="page">
+{% include header.html %}
+<div id="main" role="main">
+  <article class="hentry">
+    <div class="entry-content">
+      {{ content }}
+    </div>
+    {% include gitalk.html %}
+  </article>
+</div>
+{% include footer.html %}
+</body>
+</html>

data/_layouts/post.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html class="no-js" lang="{{site.lang}}">
+{% include head.html %}
+<body id="post">
+{% include header.html %}
+<div id="main" role="main">
+  <article class="hentry">
+    <div class="entry-content">
+      <h1 class="post-title entry-title">{{ page.title }}</h1>
+      <h4 class="page-info">
+        <span>Categories:&nbsp;&nbsp;{{page.categories}}</span>
+        <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%Y-%m-%d" }}</time>
+        <div class="qr-text" id="J_qr_text">
+          <div id="J_qr_code" class="qr-code" onmouseover="this.title='';"></div>
+        </div>
+      </h4>
+      {{ content }}
+      {% include buy-me-coffee.html %}
+    </div>
+    {% include gitalk.html %}
+    {% include read-more.html %}
+  </article>
+</div>
+{% include footer.html %}
+</body>
+</html>

data/_sass/_404.scss

@@ -0,0 +1,215 @@
+
+svg#robot {
+  display: block;
+  position: relative;
+  margin: 3em auto 0em auto;
+  padding: 10px;
+  transform-origin: bottom;
+  transform: rotate(0deg) translate3d(0px, 0px, 0px);
+  animation: move 2s ease infinite;
+  @media #{$medium} {
+    margin: 2.4em auto 0 auto;
+  }
+}
+
+@keyframes move {
+  0%, 100% {
+    transform: rotate(0deg) translate3d(0px, 0px, 0px);
+  }
+  25% {
+    transform: rotate(5deg) translate3d(5px, 5px, 0px);
+  }
+  75% {
+    transform: rotate(-6deg) translate3d(-5px, 5px, 0px);
+  }
+}
+
+g#head {
+  transform: rotate(0deg) translate3d(0px, 0px, 0px);
+  transform-origin: bottom center;
+  animation: head 1s 1s ease infinite;
+  #leftAntenna, #rightAntenna {
+    > ellipse {
+      animation: color 350ms linear infinite;
+    }
+  }
+}
+
+@keyframes head {
+  0%, 46%, 50%, 55%, 100% {
+    transform: rotate(0deg) translate3d(0px, 0px, 0px);
+  }
+  49% {
+    transform: rotate(20deg) translate3d(0px, 0px, 0px);
+  }
+  51% {
+    transform: rotate(-10deg) translate3d(0px, 0px, 0px);
+  }
+}
+
+@keyframes color {
+  0%, 100% {
+    fill: #ccc;
+  }
+  50% {
+    fill: rgb(255, 0, 0);
+  }
+}
+
+#upperTorso {
+  transform: rotate(0deg);
+  transform-origin: center;
+  animation: torso 600ms 1s ease infinite;
+  #leftArm {
+    transform: rotate(0deg);
+    transform-origin: 80% 5%;
+    animation: left 1s ease infinite;
+    .forearm {
+      transform: rotate(0deg);
+      transform-origin: 68% 10%;
+      animation: forearm 800ms 1s ease infinite;
+    }
+  }
+  #rightArm {
+    transform: rotate(0deg);
+    transform-origin: 18% 0%;
+    animation: right 1s ease infinite;
+    .forearm {
+      transform: rotate(0deg);
+      transform-origin: 68% 10%;
+      animation: forearm 700ms 1s ease infinite;
+    }
+  }
+}
+
+@keyframes torso {
+  40%, 50%, 60% {
+    transform: rotate(0deg);
+  }
+  45% {
+    transform: rotate(5deg);
+  }
+  55% {
+    transform: rotate(-5deg);
+  }
+}
+
+@keyframes left {
+  60% {
+    transform: rotate(100deg);
+  }
+}
+
+@keyframes right {
+  50% {
+    transform: rotate(-70deg);
+  }
+}
+
+@keyframes forearm {
+  0%, 30%, 50%, 70%, 100% {
+    transform: rotate(0deg);
+  }
+  40% {
+    transform: rotate(25deg);
+  }
+  60% {
+    transform: rotate(-25deg);
+  }
+}
+
+#lowerTrunk {
+  transform: rotate(0deg);
+  transform-origin: 60% 5%;
+  animation: lowerTrunk 1s ease infinite;
+}
+
+@keyframes lowerTrunk {
+  0%, 100% {
+    transform: rotate(0deg) translate3d(0px, 0px, 0px);
+  }
+  25% {
+    transform: rotate(2deg) translate3d(2px, 0px, 0px);
+  }
+  75% {
+    transform: rotate(-2deg) translate3d(-2px, 0px, 0px);
+  }
+}
+
+#leftFoot {
+  transform: rotate(0deg);
+  transform-origin: 60% 5%;
+  animation: leftFoot 2s ease infinite;
+  > .lowerLeg {
+    transform: rotate(0deg);
+    transform-origin: 68% 10%;
+    animation: lowerLeg 2s ease infinite;
+  }
+}
+
+@keyframes leftFoot {
+  0%, 50% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(70deg);
+  }
+}
+
+@keyframes lowerLeg {
+  0%, 50% {
+    transform: rotate(0deg);
+  }
+  8%, 14% {
+    transform: rotate(-15deg);
+  }
+  11%, 18% {
+    transform: rotate(15deg);
+  }
+}
+
+#rightFoot {
+  transform: rotate(0deg);
+  transform-origin: 50% 5%;
+  animation: rightFoot 2s ease infinite;
+  > .lowerLeg {
+    transform: rotate(0deg);
+    transform-origin: 68% 10%;
+    animation: lowerLegIz 2s ease infinite;
+  }
+}
+
+@keyframes rightFoot {
+  75% {
+    transform: rotate(-60deg);
+  }
+  50%, 100% {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes lowerLegIz {
+  50%, 100% {
+    transform: rotate(0deg);
+  }
+  60%, 70% {
+    transform: rotate(15deg);
+  }
+  65%, 85% {
+    transform: rotate(-15deg);
+  }
+}
+
+h1.error-not-found {
+  width: 100%;
+  text-align: center;
+  text-shadow: 0 3px 0px #000, 0 6px 0px #333;
+  color: #f54f59;
+  font-size: 6em;
+  font-weight: 700;
+  margin-bottom: 1.2em;
+  margin-top: 0;
+  @media #{$medium} {
+    margin-bottom: 0.4em;
+  }
+}