Add Ko-fi button

Lilyheart · Jun 26, 2020 · d61e536 · d61e536
1 parent ca19e66
commit d61e536
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -166,7 +166,7 @@ <h3 class="pad-below">Gitlab Setup</h3>
             </div>
           </div>
 
-          <div id="gitlab_get_project" style="display: none">
+          <div id="gitlab_get_project" class="pb-4" style="display: none">
             <div class="form-group row">
               <label for="project-dropdown" class="col-sm-4 align-self-center col-form-label">Project ID:</label>
               <div class="col-sm-8">
@@ -177,6 +177,13 @@ <h3 class="pad-below">Gitlab Setup</h3>
               Get Issues
             </button>
           </div>
+
+          <div id="kofi_button" class="text-center">
+            <button type="button" id="kofiLink" class="btn btn-secondary btn-sm align-items-center" onclick="location.href='https://ko-fi.com/Q5Q51UZYS'">
+              <img src="https://storage.ko-fi.com/cdn/cup-border.png" class="kofiimg"> Support Me on Ko-fi
+            </button>
+          </div>
+
         </div>
 
         <!-- Second Column -->

diff --git a/style/main.min.css b/style/main.min.css
diff --git a/style/main.scss b/style/main.scss
@@ -94,10 +94,14 @@ a, a:hover {
     @extend %inverse-color-text;
     border-color: $color-primary-0;
   }
-  &.btn {
+  &.btn-lg {
     font-weight: bold;
     letter-spacing: 3px;
   }
+  &.btn-sm {
+    font-weight: 400;
+    letter-spacing: 0;
+  }
   &:not(.active):not(button) {
     background-color: $color-primary-4;
     border-color: $color-primary-4;
@@ -118,6 +122,13 @@ a, a:hover {
   }
 }
 .btn-secondary {
+  background-color: $color-secondary-2-0;
+  color: $color-primary-0-inverse;
+  &:not(:disabled):not(.disabled).active {
+    @extend %inverse-color-text;
+  }
+}
+.btn-tertiary {
   background-color: $color-primary-0-disabled;
   color: $color-primary-3;
   &:not(:disabled):not(.disabled).active {
@@ -274,7 +285,7 @@ td a {
   animation: flash linear 1.5s infinite;
 }
 .sv_main.sv_main .sv-boolean__switch {
-  background-color: $color-primary-0; !important;
+  background-color: $color-primary-0 !important;
 }
 @-webkit-keyframes flash {
   0% { opacity: 1; }
@@ -289,3 +300,24 @@ td a {
 .surveyclose {
   color: $color-primary-3;
 }
+
+/* KOFI Button */
+
+img.kofiimg {
+  height: 13px;
+  width: 20px;
+  padding-right: 5px;
+  animation: kofi-wiggle 3s infinite;
+}
+
+@keyframes kofi-wiggle {
+  0%{transform:rotate(0) scale(1)}
+  60%{transform:rotate(0) scale(1)}
+  75%{transform:rotate(0) scale(1.12)}
+  80%{transform:rotate(0) scale(1.1)}
+  84%{transform:rotate(-10deg) scale(1.1)}
+  88%{transform:rotate(10deg) scale(1.1)}
+  92%{transform:rotate(-10deg) scale(1.1)}
+  96%{transform:rotate(10deg) scale(1.1)}
+  100%{transform:rotate(0) scale(1)}
+}