From 3059c407f432d1d629d905b91d74c9dfe5d835fc Mon Sep 17 00:00:00 2001
From: zombieFox <crudetoaster@gmail.com>
Date: Sun, 31 Jan 2021 11:37:18 +0000
Subject: [PATCH] [refactor] remove external resource coffee image

---
 gulpfile.js                              |  1 +
 package.json                             |  2 +-
 src/css/coffee.css                       | 61 ++++++++++++++++++++++++
 src/css/variables.css                    |  2 +
 src/html/link-css.html                   |  1 +
 src/html/menu/content/coffee/coffee.html | 10 +++-
 src/js/version.js                        |  2 +-
 src/manifest.json                        |  2 +-
 8 files changed, 77 insertions(+), 4 deletions(-)
 create mode 100644 src/css/coffee.css

diff --git a/gulpfile.js b/gulpfile.js
index 166bc60a..393a4355 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -72,6 +72,7 @@ const cssFiles = [
   path.src + '/css/link.css',
   path.src + '/css/theme.css',
   path.src + '/css/auto-suggest.css',
+  path.src + '/css/coffee.css',
   path.src + '/css/fontawesome.css'
 ]
 
diff --git a/package.json b/package.json
index a7e6be31..9979a137 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "6.3.0",
+  "version": "6.4.0",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
   "main": "index.js",
   "scripts": {
diff --git a/src/css/coffee.css b/src/css/coffee.css
new file mode 100644
index 00000000..588bed4d
--- /dev/null
+++ b/src/css/coffee.css
@@ -0,0 +1,61 @@
+.coffee {
+  margin-right: 1em;
+  font-size: 1em;
+  width: calc(calc(calc(var(--coffee-size) / 100) * 1.25) * 1em);
+}
+
+.coffee-lid {
+  position: relative;
+  width: 100%;
+}
+
+.coffee-lid-top,
+.coffee-lid-bottom {
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  height: calc(calc(calc(var(--coffee-size) / 100) * 0.25) * 1em);
+}
+
+.coffee-lid-top {
+  background-color: rgb(var(--theme-color-12));
+  width: 95%;
+  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
+}
+
+.coffee-lid-bottom {
+  background-color: rgb(var(--theme-color-10));
+  width: 130%;
+}
+
+.coffee-body {
+  background-color: rgb(var(--theme-color-20));
+  width: 100%;
+  height: calc(calc(calc(var(--coffee-size) / 100) * 2) * 1em);
+  position: relative;
+  transition: background-color var(--layout-transition-extra-fast);
+  clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
+}
+
+.coffee-body-label {
+  background-color: rgb(var(--theme-color-06));
+  width: 100%;
+  height: calc(calc(var(--coffee-size) / 100) * 1em);
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  transition: background-color var(--layout-transition-extra-fast);
+}
+
+.coffee-body-label:before {
+  background-color: rgb(var(--theme-accent));
+  content: "";
+  border-radius: 100%;
+  width: calc(calc(calc(var(--coffee-size) / 100) * 0.75) * 1em);
+  height: calc(calc(calc(var(--coffee-size) / 100) * 0.75) * 1em);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
diff --git a/src/css/variables.css b/src/css/variables.css
index f7c3b108..9023a421 100644
--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -279,6 +279,8 @@
   --modal-medium:                                       50em;
   --modal-large:                                        70em;
   --modal-size:                                         var(--modal-medium);
+  /* coffee */
+  --coffee-size:                                        80;
   /* z index */
   --z-index-background:                                 1000;
   --z-index-link:                                       2000;
diff --git a/src/html/link-css.html b/src/html/link-css.html
index dd00a12a..0d6421e2 100644
--- a/src/html/link-css.html
+++ b/src/html/link-css.html
@@ -28,5 +28,6 @@
 <link rel="stylesheet" href="css/link.css">
 <link rel="stylesheet" href="css/theme.css">
 <link rel="stylesheet" href="css/auto-suggest.css">
+<link rel="stylesheet" href="css/coffee.css">
 <link rel="stylesheet" href="css/fontawesome.css">
 <!-- end-css-block -->
diff --git a/src/html/menu/content/coffee/coffee.html b/src/html/menu/content/coffee/coffee.html
index 5cbcb726..2962d81c 100644
--- a/src/html/menu/content/coffee/coffee.html
+++ b/src/html/menu/content/coffee/coffee.html
@@ -9,7 +9,15 @@
     <hr>
     <div class="form-wrap">
       <a href="https://www.buymeacoffee.com/zombieFox" class="button button-line button-large px-4 py-3">
-        <img src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" class="mr-2">
+        <div class="coffee">
+          <div class="coffee-lid">
+            <div class="coffee-lid-top"></div>
+            <div class="coffee-lid-bottom"></div>
+          </div>
+          <div class="coffee-body">
+            <div class="coffee-body-label"></div>
+          </div>
+        </div>
         <span class="button-text">Buy me a coffee</span>
       </a>
     </div>
diff --git a/src/js/version.js b/src/js/version.js
index d3706009..bc1a590e 100644
--- a/src/js/version.js
+++ b/src/js/version.js
@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "6.3.0";
+  var current = "6.4.0";
 
   var name = "Jaded Raven";
 
diff --git a/src/manifest.json b/src/manifest.json
index 57feb4f1..0e31edff 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -2,7 +2,7 @@
   "name": "nightTab",
   "short_name": "nightTab",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-  "version": "6.3.0",
+  "version": "6.4.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"