Update fork me banner.

sciactive · Dec 3, 2023 · 861fbdd · 861fbdd
1 parent 7891694
commit 861fbdd
Showing 1 changed file with 62 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>TinyGesture.js</title>
@@ -62,13 +62,73 @@
         background-color: #006688;
         color: #fff;
       }
+
+      #forkongithub a {
+        background: #000;
+        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;
+        transition: 0.5s;
+      }
+      #forkongithub a:hover {
+        background: #c11;
+        color: #fff;
+      }
+      #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: 800px) {
+        #forkongithub {
+          position: fixed;
+          display: block;
+          top: 0;
+          right: 0;
+          width: 400px;
+          overflow: hidden;
+          height: 400px;
+          z-index: 9999;
+        }
+        #forkongithub a {
+          width: 400px;
+          position: absolute;
+          top: 60px;
+          right: -120px;
+          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);
+        }
+      }
     </style>
   </head>
   <body>
+    <span id="forkongithub"><a href="https://github.com/sciactive/tinygesture">Fork me on GitHub</a></span>
     <div class="container d-flex flex-column" style="height: 100%">
       <div>
         <h1 class="display-4">TinyGesture.js</h1>
-        <p class="lead">Very small gesture recognizer for JavaScript. Swipe, pan, tap, doubletap, and longpress.</p>
+        <p class="lead">
+          Very small gesture recognizer for JavaScript. Swipe, pan, tap, doubletap, longpress, pinch, and rotate.
+        </p>
       </div>
 
       <div
@@ -84,11 +144,5 @@ <h1 class="display-4">TinyGesture.js</h1>
         </div>
       </div>
     </div>
-    <a href="https://github.com/sciactive/tinygesture"
-      ><img
-        style="position: absolute; top: 0; right: 0; border: 0"
-        src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"
-        alt="Fork me on GitHub"
-    /></a>
   </body>
 </html>