Add video

achojs · Sep 17, 2017 · f3fda69 · f3fda69
1 parent 2f10a40
commit f3fda69
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 63 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,10 @@
 # acho
 
-![Last version](https://img.shields.io/github/tag/achohq/acho.svg?style=flat-square)
-[![Build Status](http://img.shields.io/travis/achohq/acho/master.svg?style=flat-square)](https://travis-ci.org/achohq/acho)
-[![Coverage Status](https://img.shields.io/coveralls/achohq/acho.svg?style=flat-square)](https://coveralls.io/github/achohq/acho)
-[![Dependency status](http://img.shields.io/david/achohq/acho.svg?style=flat-square)](https://david-dm.org/achohq/acho)
-[![Dev Dependencies Status](http://img.shields.io/david/dev/achohq/acho.svg?style=flat-square)](https://david-dm.org/achohq/acho#info=devDependencies)
+![Last version](https://img.shields.io/github/tag/achojs/acho.svg?style=flat-square)
+[![Build Status](http://img.shields.io/travis/achojs/acho/master.svg?style=flat-square)](https://travis-ci.org/achojs/acho)
+[![Coverage Status](https://img.shields.io/coveralls/achojs/acho.svg?style=flat-square)](https://coveralls.io/github/achojs/acho)
+[![Dependency status](http://img.shields.io/david/achojs/acho.svg?style=flat-square)](https://david-dm.org/achojs/acho)
+[![Dev Dependencies Status](http://img.shields.io/david/dev/achojs/acho.svg?style=flat-square)](https://david-dm.org/achojs/acho#info=devDependencies)
 [![NPM Status](http://img.shields.io/npm/dm/acho.svg?style=flat-square)](https://www.npmjs.org/package/acho)
 [![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://paypal.me/kikobeats)
 
@@ -36,7 +36,7 @@ npm install acho
 
 <p align="center">
   <br>
-  <img src="https://raw.githubusercontent.com/achohq/acho/master/docs/images/10.png" alt="acho">
+  <img src="https://raw.githubusercontent.com/achojs/acho/master/docs/images/10.png" alt="acho">
   <br>
 </p>
 
@@ -101,7 +101,7 @@ We define `.push` as accumulator for store the log internally:
 
 <p align="center">
   <br>
-  <img src="https://raw.githubusercontent.com/achohq/acho/master/docs/images/02.png" alt="acho">
+  <img src="https://raw.githubusercontent.com/achojs/acho/master/docs/images/02.png" alt="acho">
   <br>
 </p>
 
@@ -117,7 +117,7 @@ If you want to print previously stored messages, just call the method `.print`:
 
 <p align="center">
   <br>
-  <img src="https://raw.githubusercontent.com/achohq/acho/master/docs/images/03.png" alt="acho">
+  <img src="https://raw.githubusercontent.com/achojs/acho/master/docs/images/03.png" alt="acho">
   <br>
 </p>
 
@@ -127,7 +127,7 @@ The method  `.add` combine `.push` and `.print` actions in one: It store the mes
 
 <p align="center">
   <br>
-  <img src="https://raw.githubusercontent.com/achohq/acho/master/docs/images/04.png" alt="acho">
+  <img src="https://raw.githubusercontent.com/achojs/acho/master/docs/images/04.png" alt="acho">
   <br>
 </p>
 
@@ -147,7 +147,7 @@ console.log(acho.messages.info)
 
 <p align="center">
   <br>
-  <img src="https://raw.githubusercontent.com/achohq/acho/master/docs/images/09.png" alt="acho">
+  <img src="https://raw.githubusercontent.com/achojs/acho/master/docs/images/09.png" alt="acho">
   <br>
 </p>
 
@@ -203,7 +203,7 @@ For example, suppose you want to add a timestamp before your logs:
 
 <p align="center">
   <br>
-  <img src="https://raw.githubusercontent.com/achohq/acho/master/docs/images/05.png" alt="acho">
+  <img src="https://raw.githubusercontent.com/achojs/acho/master/docs/images/05.png" alt="acho">
   <br>
 </p>
 
@@ -234,7 +234,7 @@ It creates a logger instance.
 
 ##### keyword
 
-![](https://raw.githubusercontent.com/achohq/acho/master/docs/images/07.png)
+![](https://raw.githubusercontent.com/achojs/acho/master/docs/images/07.png)
 
 Type: `string`</br>
 Default: `loglevel`
@@ -245,7 +245,7 @@ You can pass the special keyword `symbol` to show an unicode icon. This is speci
 
 ##### align
 
-![](https://raw.githubusercontent.com/achohq/acho/master/docs/images/08.png)
+![](https://raw.githubusercontent.com/achojs/acho/master/docs/images/08.png)
 
 Type: `string`</br>
 Default: `' '`
@@ -256,7 +256,7 @@ You can provide your own separator or disable it providing a `false`.
 
 ##### diff
 
-![](https://raw.githubusercontent.com/achohq/acho/master/docs/images/06.png)
+![](https://raw.githubusercontent.com/achojs/acho/master/docs/images/06.png)
 
 Type: `boolean`</br>
 Default: `false`
@@ -265,7 +265,7 @@ Prints trace between log from the same level. Specially useful to debug timings.
 
 ##### upper
 
-![](https://raw.githubusercontent.com/achohq/acho/master/docs/images/12.png)
+![](https://raw.githubusercontent.com/achojs/acho/master/docs/images/12.png)
 
 Type: `boolean`</br>
 Default: `false`.
@@ -274,7 +274,7 @@ Enable or disable print log level in upper case.
 
 ##### trace
 
-![](https://raw.githubusercontent.com/achohq/acho/master/docs/images/11.png)
+![](https://raw.githubusercontent.com/achojs/acho/master/docs/images/11.png)
 
 Type: `boolean`|`number`</br>
 Default: `false`.
@@ -399,7 +399,7 @@ Type: `string`
 
 ## License
 
-**acho** © [Kiko Beats](https://kikobeats.com), Released under the [MIT](https://github.com/achohq/acho/pulls/blob/master/LICENSE.md) License.<br>
-Authored and maintained by Kiko Beats with help from [contributors](https://github.com/achohq/acho/pulls/contributors).
+**acho** © [Kiko Beats](https://kikobeats.com), Released under the [MIT](https://github.com/achojs/acho/pulls/blob/master/LICENSE.md) License.<br>
+Authored and maintained by Kiko Beats with help from [contributors](https://github.com/achojs/acho/pulls/contributors).
 
 > [kikobeats.com](https://kikobeats.com) · GitHub [Kiko Beats](https://github.com/kikobeats) · Twitter [@kikobeats](https://twitter.com/kikobeats)
diff --git a/docs/_coverpage.md b/docs/_coverpage.md
@@ -1,6 +1,6 @@
 <!-- _coverpage.md -->
 
-![logo](https://thumbs.gfycat.com/UnfoldedDigitalGemsbok-size_restricted.gif)
+<div id="video"><video src="images/demo.mp4" height="100%" autoplay="" muted="" loop="loop"></video></div>
 
 <h1>acho, the <span>&#x3C;hackeable /&#x3E;</span> log</h1>
 

diff --git a/docs/images/demo.gif b/docs/images/demo.gif
diff --git a/docs/images/demo.mp4 b/docs/images/demo.mp4
diff --git a/docs/images/resume.png → docs/images/demo.png b/docs/images/resume.png → docs/images/demo.png
diff --git a/docs/style.css b/docs/style.css
@@ -44,8 +44,8 @@ div#app:empty:before {
   right: 0;
   top: 0;
   -webkit-transition: width .2s, opacity .4s;
-  -o-transition: width .2s, opacity .4s;
-  transition: width .2s, opacity .4s;
+       -o-transition: width .2s, opacity .4s;
+          transition: width .2s, opacity .4s;
   width: 0;
   z-index: 5;
 }
@@ -119,8 +119,8 @@ kbd {
   font-size: 16px;
   text-decoration: none;
   -webkit-transition: color .3s;
-  -o-transition: color .3s;
-  transition: color .3s;
+       -o-transition: color .3s;
+          transition: color .3s;
 }
 
 .app-nav a.active, .app-nav a:hover {
@@ -221,8 +221,8 @@ main {
   display: inline-block;
   text-decoration: none;
   -webkit-transition: all .3s;
-  -o-transition: all .3s;
-  transition: all .3s;
+       -o-transition: all .3s;
+          transition: all .3s;
 }
 
 .anchor span {
@@ -241,11 +241,11 @@ main {
   bottom: 0;
   left: 0;
   position: absolute;
-  transition: -webkit-transform .25s ease-out;
+          transition: -webkit-transform .25s ease-out;
   -webkit-transition: -webkit-transform .25s ease-out;
-  -o-transition: transform .25s ease-out;
-  transition: transform .25s ease-out;
-  transition: transform .25s ease-out, -webkit-transform .25s ease-out;
+       -o-transition: transform .25s ease-out;
+          transition: transform .25s ease-out;
+          transition: transform .25s ease-out, -webkit-transform .25s ease-out;
   width: 300px;
   z-index: 3;
 }
@@ -324,8 +324,8 @@ main {
   position: absolute;
   text-align: center;
   -webkit-transition: opacity .3s;
-  -o-transition: opacity .3s;
-  transition: opacity .3s;
+       -o-transition: opacity .3s;
+          transition: opacity .3s;
   width: 30px;
   width: 284px;
   z-index: 4;
@@ -356,8 +356,8 @@ body.sticky .sidebar, body.sticky .sidebar-toggle {
   left: 300px;
   position: absolute;
   -webkit-transition: left .25s ease;
-  -o-transition: left .25s ease;
-  transition: left .25s ease;
+       -o-transition: left .25s ease;
+          transition: left .25s ease;
 }
 
 .markdown-section {
@@ -453,8 +453,8 @@ body.sticky .sidebar, body.sticky .sidebar-toggle {
 
 body.close .sidebar {
   -webkit-transform: translateX(-300px);
-          -ms-transform: translateX(-300px);
-      transform: translateX(-300px);
+      -ms-transform: translateX(-300px);
+          transform: translateX(-300px);
 }
 
 body.close .sidebar-toggle {
@@ -491,30 +491,30 @@ body.close .content {
 
   .sidebar {
     left: -300px;
-    transition: -webkit-transform .25s ease-out;
+            transition: -webkit-transform .25s ease-out;
     -webkit-transition: -webkit-transform .25s ease-out;
-    -o-transition: transform .25s ease-out;
-    transition: transform .25s ease-out;
-    transition: transform .25s ease-out, -webkit-transform .25s ease-out;
+         -o-transition: transform .25s ease-out;
+            transition: transform .25s ease-out;
+            transition: transform .25s ease-out, -webkit-transform .25s ease-out;
   }
 
   .content {
     left: 0;
     max-width: 100vw;
     position: static;
-    transition: -webkit-transform .25s ease;
+            transition: -webkit-transform .25s ease;
     -webkit-transition: -webkit-transform .25s ease;
-    -o-transition: transform .25s ease;
-    transition: transform .25s ease;
-    transition: transform .25s ease, -webkit-transform .25s ease;
+         -o-transition: transform .25s ease;
+            transition: transform .25s ease;
+            transition: transform .25s ease, -webkit-transform .25s ease;
   }
 
   .app-nav, .github-corner {
-    transition: -webkit-transform .25s ease-out;
+            transition: -webkit-transform .25s ease-out;
     -webkit-transition: -webkit-transform .25s ease-out;
-    -o-transition: transform .25s ease-out;
-    transition: transform .25s ease-out;
-    transition: transform .25s ease-out, -webkit-transform .25s ease-out;
+         -o-transition: transform .25s ease-out;
+            transition: transform .25s ease-out;
+            transition: transform .25s ease-out, -webkit-transform .25s ease-out;
   }
 
   .sidebar-toggle {
@@ -524,22 +524,22 @@ body.close .content {
 
   body.close .sidebar {
     -webkit-transform: translateX(300px);
-            -ms-transform: translateX(300px);
-        transform: translateX(300px);
+        -ms-transform: translateX(300px);
+            transform: translateX(300px);
   }
 
   body.close .sidebar-toggle {
     background-color: hsla(0, 0%, 100%, .8);
     -webkit-transition: background-color 1s;
-    -o-transition: background-color 1s;
-    transition: background-color 1s;
+         -o-transition: background-color 1s;
+            transition: background-color 1s;
     width: 284px;
   }
 
   body.close .content {
     -webkit-transform: translateX(300px);
-            -ms-transform: translateX(300px);
-        transform: translateX(300px);
+        -ms-transform: translateX(300px);
+            transform: translateX(300px);
   }
 
   body.close .app-nav, body.close .github-corner {
@@ -681,8 +681,8 @@ section.cover .cover-main>p:last-child a {
   padding: .75em 2rem;
   text-decoration: none;
   -webkit-transition: all .15s ease;
-  -o-transition: all .15s ease;
-  transition: all .15s ease;
+       -o-transition: all .15s ease;
+          transition: all .15s ease;
 }
 
 section.cover .cover-main>p:last-child a:last-child {
@@ -705,8 +705,8 @@ section.cover blockquote>p>a {
   border-bottom: 2px solid #c79b50;
   border-bottom: 2px solid var(--primary-color, #c79b50);
   -webkit-transition: color .3s;
-  -o-transition: color .3s;
-  transition: color .3s;
+       -o-transition: color .3s;
+          transition: color .3s;
 }
 
 section.cover blockquote>p>a:hover {
@@ -1014,21 +1014,46 @@ pre:after {
 
 /* Custom */
 
-.cover-main img {
+#video {
+  padding: 0 1rem;
+}
+
+video {
   border: 1px solid #c79b50;
   box-shadow: 0 0px 40px 0px #c79b50;
   border-radius: 4px;
   display: block;
   margin: 3rem auto;
-  width: 80vh;
+  width: 100%;
+  max-width: 100vh
 }
 
 div.cover-main h1 {
   padding: 0;
-  margin: 3rem;
+  margin: 3rem 1rem;
 }
 
-.cover-main span {
+div.cover-main span {
   color: white;
   font-weight: bold;
 }
+
+@media screen and (max-width: 700px) {
+  #video {
+    background: no-repeat center url(images/demo.gif);
+    background-size: 100%;
+    height: 36vh;
+    border: 1px solid #c79b50;
+    box-shadow: 0 0px 40px 0px #c79b50;
+    border-radius: 4px;
+    margin: 3rem auto;
+  }
+
+  #video video {
+    display: none;
+  }
+
+  div.cover-main h1 {
+    font-size: 1.5rem;
+  }
+}
diff --git a/package.json b/package.json
@@ -11,10 +11,10 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/achohq/acho.git"
+    "url": "git+https://github.com/achojs/acho.git"
   },
   "bugs": {
-    "url": "https://github.com/achohq/acho/issues"
+    "url": "https://github.com/achojs/acho/issues"
   },
   "keywords": [
     "debug",