[refactor] remove external resource coffee image

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'
 ]
 

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": {

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%);
+}

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;

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 -->

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>

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";
 

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"