Merge 7519343 into 0846403

docs/index.html

@@ -12,4 +12,4 @@
     };
     // Rollbar Snippet
     !function (r) { function o(n) { if (e[n]) return e[n].exports; var t = e[n] = { exports: {}, id: n, loaded: !1 }; return r[n].call(t.exports, t, t.exports, o), t.loaded = !0, t.exports } var e = {}; return o.m = r, o.c = e, o.p = "", o(0) }([function (r, o, e) { "use strict"; var n = e(1), t = e(4); _rollbarConfig = _rollbarConfig || {}, _rollbarConfig.rollbarJsUrl = _rollbarConfig.rollbarJsUrl || "https://cdnjs.cloudflare.com/ajax/libs/rollbar.js/2.3.1/rollbar.min.js", _rollbarConfig.async = void 0 === _rollbarConfig.async || _rollbarConfig.async; var a = n.setupShim(window, _rollbarConfig), l = t(_rollbarConfig); window.rollbar = n.Rollbar, a.loadFull(window, document, !_rollbarConfig.async, _rollbarConfig, l) }, function (r, o, e) { "use strict"; function n(r) { return function () { try { return r.apply(this, arguments) } catch (r) { try { console.error("[Rollbar]: Internal error", r) } catch (r) { } } } } function t(r, o) { this.options = r, this._rollbarOldOnError = null; var e = s++; this.shimId = function () { return e }, window && window._rollbarShims && (window._rollbarShims[e] = { handler: o, messages: [] }) } function a(r, o) { var e = o.globalAlias || "Rollbar"; if ("object" == typeof r[e]) return r[e]; r._rollbarShims = {}, r._rollbarWrappedError = null; var t = new p(o); return n(function () { o.captureUncaught && (t._rollbarOldOnError = r.onerror, i.captureUncaughtExceptions(r, t, !0), i.wrapGlobals(r, t, !0)), o.captureUnhandledRejections && i.captureUnhandledRejections(r, t, !0); var n = o.autoInstrument; return o.enabled !== !1 && (void 0 === n || n === !0 || "object" == typeof n && n.network) && r.addEventListener && (r.addEventListener("load", t.captureLoad.bind(t)), r.addEventListener("DOMContentLoaded", t.captureDomContentLoaded.bind(t))), r[e] = t, t })() } function l(r) { return n(function () { var o = this, e = Array.prototype.slice.call(arguments, 0), n = { shim: o, method: r, args: e, ts: new Date }; window._rollbarShims[this.shimId()].messages.push(n) }) } var i = e(2), s = 0, d = e(3), c = function (r, o) { return new t(r, o) }, p = d.bind(null, c); t.prototype.loadFull = function (r, o, e, t, a) { var l = function () { var o; if (void 0 === r._rollbarDidLoad) { o = new Error("rollbar.js did not load"); for (var e, n, t, l, i = 0; e = r._rollbarShims[i++];)for (e = e.messages || []; n = e.shift();)for (t = n.args || [], i = 0; i < t.length; ++i)if (l = t[i], "function" == typeof l) { l(o); break } } "function" == typeof a && a(o) }, i = !1, s = o.createElement("script"), d = o.getElementsByTagName("script")[0], c = d.parentNode; s.crossOrigin = "", s.src = t.rollbarJsUrl, e || (s.async = !0), s.onload = s.onreadystatechange = n(function () { if (!(i || this.readyState && "loaded" !== this.readyState && "complete" !== this.readyState)) { s.onload = s.onreadystatechange = null; try { c.removeChild(s) } catch (r) { } i = !0, l() } }), c.insertBefore(s, d) }, t.prototype.wrap = function (r, o, e) { try { var n; if (n = "function" == typeof o ? o : function () { return o || {} }, "function" != typeof r) return r; if (r._isWrap) return r; if (!r._rollbar_wrapped && (r._rollbar_wrapped = function () { e && "function" == typeof e && e.apply(this, arguments); try { return r.apply(this, arguments) } catch (e) { var o = e; throw "string" == typeof o && (o = new String(o)), o._rollbarContext = n() || {}, o._rollbarContext._wrappedSource = r.toString(), window._rollbarWrappedError = o, o } }, r._rollbar_wrapped._isWrap = !0, r.hasOwnProperty)) for (var t in r) r.hasOwnProperty(t) && (r._rollbar_wrapped[t] = r[t]); return r._rollbar_wrapped } catch (o) { return r } }; for (var u = "log,debug,info,warn,warning,error,critical,global,configure,handleUncaughtException,handleUnhandledRejection,captureEvent,captureDomContentLoaded,captureLoad".split(","), f = 0; f < u.length; ++f)t.prototype[u[f]] = l(u[f]); r.exports = { setupShim: a, Rollbar: p } }, function (r, o) { "use strict"; function e(r, o, e) { if (r) { var t; "function" == typeof o._rollbarOldOnError ? t = o._rollbarOldOnError : r.onerror && !r.onerror.belongsToShim && (t = r.onerror, o._rollbarOldOnError = t); var a = function () { var e = Array.prototype.slice.call(arguments, 0); n(r, o, t, e) }; a.belongsToShim = e, r.onerror = a } } function n(r, o, e, n) { r._rollbarWrappedError && (n[4] || (n[4] = r._rollbarWrappedError), n[5] || (n[5] = r._rollbarWrappedError._rollbarContext), r._rollbarWrappedError = null), o.handleUncaughtException.apply(o, n), e && e.apply(r, n) } function t(r, o, e) { if (r) { "function" == typeof r._rollbarURH && r._rollbarURH.belongsToShim && r.removeEventListener("unhandledrejection", r._rollbarURH); var n = function (r) { var e = r.reason, n = r.promise, t = r.detail; !e && t && (e = t.reason, n = t.promise), o && o.handleUnhandledRejection && o.handleUnhandledRejection(e, n) }; n.belongsToShim = e, r._rollbarURH = n, r.addEventListener("unhandledrejection", n) } } function a(r, o, e) { if (r) { var n, t, a = "EventTarget,Window,Node,ApplicationCache,AudioTrackList,ChannelMergerNode,CryptoOperation,EventSource,FileReader,HTMLUnknownElement,IDBDatabase,IDBRequest,IDBTransaction,KeyOperation,MediaController,MessagePort,ModalWindow,Notification,SVGElementInstance,Screen,TextTrack,TextTrackCue,TextTrackList,WebSocket,WebSocketWorker,Worker,XMLHttpRequest,XMLHttpRequestEventTarget,XMLHttpRequestUpload".split(","); for (n = 0; n < a.length; ++n)t = a[n], r[t] && r[t].prototype && l(o, r[t].prototype, e) } } function l(r, o, e) { if (o.hasOwnProperty && o.hasOwnProperty("addEventListener")) { for (var n = o.addEventListener; n._rollbarOldAdd && n.belongsToShim;)n = n._rollbarOldAdd; var t = function (o, e, t) { n.call(this, o, r.wrap(e), t) }; t._rollbarOldAdd = n, t.belongsToShim = e, o.addEventListener = t; for (var a = o.removeEventListener; a._rollbarOldRemove && a.belongsToShim;)a = a._rollbarOldRemove; var l = function (r, o, e) { a.call(this, r, o && o._rollbar_wrapped || o, e) }; l._rollbarOldRemove = a, l.belongsToShim = e, o.removeEventListener = l } } r.exports = { captureUncaughtExceptions: e, captureUnhandledRejections: t, wrapGlobals: a } }, function (r, o) { "use strict"; function e(r, o) { this.impl = r(o, this), this.options = o, n(e.prototype) } function n(r) { for (var o = function (r) { return function () { var o = Array.prototype.slice.call(arguments, 0); if (this.impl[r]) return this.impl[r].apply(this.impl, o) } }, e = "log,debug,info,warn,warning,error,critical,global,configure,handleUncaughtException,handleUnhandledRejection,_createItem,wrap,loadFull,shimId,captureEvent,captureDomContentLoaded,captureLoad".split(","), n = 0; n < e.length; n++)r[e[n]] = o(e[n]) } e.prototype._swapAndProcessMessages = function (r, o) { this.impl = r(this.options); for (var e, n, t; e = o.shift();)n = e.method, t = e.args, this[n] && "function" == typeof this[n] && ("captureDomContentLoaded" === n || "captureLoad" === n ? this[n].apply(this, [t[0], e.ts]) : this[n].apply(this, t)); return this }, r.exports = e }, function (r, o) { "use strict"; r.exports = function (r) { return function (o) { if (!o && !window._rollbarInitialized) { r = r || {}; for (var e, n, t = r.globalAlias || "Rollbar", a = window.rollbar, l = function (r) { return new a(r) }, i = 0; e = window._rollbarShims[i++];)n || (n = e.handler), e.handler._swapAndProcessMessages(l, e.messages); window[t] = n, window._rollbarInitialized = !0 } } } }]);
-    // End Rollbar Snippet</script><link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"><link rel="stylesheet" href="styles.css"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5203413376871291" crossorigin="anonymous"></script><script defer="defer" src="javascripts/npm-react-dom-055fd5ab09b93049841d.js"></script><script defer="defer" src="javascripts/npm-react-colorful-a89527f612c7c33dad4f.js"></script><script defer="defer" src="javascripts/113-41c6b287bd95f978b681.js"></script><script defer="defer" src="javascripts/main-de69784ee7bc92a06a25.js"></script></head><body><header id="header"><h1 class="logo">React Spinners</h1><h2 class="author">by <a href="https://www.davidhu.io">David Hu</a></h2></header><main id="main"><div class="installation"><code id="code">yarn add react-spinners</code></div><div id="root"><div class="spinner-container"><div class="spinner-item"><a href="#" class="spinner-title">Loading</a></div><div class="spinner-item"><a href="#" class="spinner-title">Loading</a></div><div class="spinner-item"><a href="#" class="spinner-title">Loading</a></div><div class="spinner-item"><a href="#" class="spinner-title">Loading</a></div><div class="spinner-item"><a href="#" class="spinner-title">Loading</a></div><div class="spinner-item"><a href="#" class="spinner-title">Loading</a></div></div></div></main><footer><a href="https://github.com/davidhu2000/react-spinners">Github</a> <a href="https://davidhu.io/blog" style="margin-left: 30px">Blog</a></footer><a href="https://github.com/davidhu2000/react-spinners"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"/></a><script src="./scripts.js"></script></body></html>
+    // End Rollbar Snippet</script><link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"><link rel="stylesheet" href="styles.css"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5203413376871291" crossorigin="anonymous"></script><script defer="defer" src="javascripts/npm-react-dom-055fd5ab09b93049841d.js"></script><script defer="defer" src="javascripts/npm-react-colorful-a89527f612c7c33dad4f.js"></script><script defer="defer" src="javascripts/113-41c6b287bd95f978b681.js"></script><script defer="defer" src="javascripts/main-de69784ee7bc92a06a25.js"></script></head><body><header id="header"><h1 class="logo">React Spinners</h1><h2 class="author">by <a href="https://www.davidhu.io">David Hu</a></h2></header><main id="main"><div class="installation"><code id="code">yarn add react-spinners</code></div><div id="root"><div class="spinner-container"><div class="spinner-item"><a href="#" class="spinner-title">Loading</a></div><div class="spinner-item"><a href="#" class="spinner-title">Loading</a></div><div class="spinner-item"><a href="#" class="spinner-title">Loading</a></div><div class="spinner-item"><a href="#" class="spinner-title">Loading</a></div><div class="spinner-item"><a href="#" class="spinner-title">Loading</a></div><div class="spinner-item"><a href="#" class="spinner-title">Loading</a></div></div></div></main><footer><a href="https://github.com/davidhu2000/react-spinners">Github</a> <a href="https://davidhu.io/blog" style="margin-left: 30px">Blog</a></footer><span id="forkongithub"><a href="https://github.com/davidhu2000/react-spinners">Fork me on GitHub</a></span><script src="./scripts.js"></script></body></html>

docs/styles.css

@@ -203,20 +203,58 @@ footer a:hover {
   color: #fff;
 }
 
-.speed-multiplier-input {
-  background: #2b303b;
-  color: white;
-  display: flex;
-  flex-direction: column;
-  padding: 5px;
-  opacity: 0.9;
-  align-items: center;
+/* fork me on github ribbne */
+#forkongithub a {
+  background: #228b22;
+  color: #fff;
+  text-decoration: none;
+  font-family: arial, sans-serif;
+  text-align: center;
+  font-weight: bold;
+  padding: 5px 40px;
+  font-size: 1rem;
+  line-height: 2rem;
+  position: relative;
 }
-
-.speed-multiplier-input input {
-  margin-top: 5px;
+#forkongithub a:hover {
+  background: #008000;
+  color: #fff;
 }
-
-.speed-multiplier-input input:focus {
-  outline: none;
+#forkongithub a::before,
+#forkongithub a::after {
+  content: "";
+  width: 100%;
+  display: block;
+  position: absolute;
+  top: 1px;
+  left: 0;
+  height: 1px;
+  background: #fff;
+}
+#forkongithub a::after {
+  bottom: 1px;
+  top: auto;
+}
+@media screen and (min-width: 600px) {
+  #forkongithub {
+    display: block;
+    top: 0;
+    right: 0;
+    width: 200px;
+    overflow: hidden;
+    height: 200px;
+    z-index: 9999;
+  }
+  #forkongithub a {
+    width: 200px;
+    position: absolute;
+    top: 60px;
+    right: -60px;
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
+  }
 }

template.html

@@ -81,13 +81,9 @@ <h2 class="author">by <a href="https://www.davidhu.io">David Hu</a></h2>
     <a href="https://davidhu.io/blog" style="margin-left: 30px">Blog</a>
   </footer>
 
-  <a href="https://github.com/davidhu2000/react-spinners">
-    <img style="position: absolute; top: 0; right: 0; border: 0;"
-      src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67"
-      alt="Fork me on GitHub"
-      data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"
-    />
-  </a>
+  <span id="forkongithub">
+    <a href="https://github.com/davidhu2000/react-spinners">Fork me on GitHub</a>
+  </span>
 
   <script src='./scripts.js'></script>