From 01dc2c2fb39cf5b22e6853047325abf281ade824 Mon Sep 17 00:00:00 2001
From: zombieFox <crudetoaster@gmail.com>
Date: Mon, 20 Apr 2020 10:03:40 +0100
Subject: [PATCH] [refactor] move link item padding to variable file

---
 package-lock.json     |  2 +-
 package.json          |  2 +-
 src/css/link.css      | 20 ++++++++++----------
 src/css/variables.css |  5 +++--
 src/js/version.js     |  2 +-
 src/manifest.json     |  2 +-
 6 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e01ece8a..6ebebf6f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "5.12.0",
+  "version": "5.13.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 68ffa5b3..788572c0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "5.12.0",
+  "version": "5.13.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/link.css b/src/css/link.css
index 04601299..ccdd6e60 100755
--- a/src/css/link.css
+++ b/src/css/link.css
@@ -191,11 +191,11 @@
 }
 
 .is-link-style-block .link-panel-front {
-  padding: 1em;
+  padding: calc(1em * var(--link-item-padding));
 }
 
 .is-link-style-list .link-panel-front {
-  padding: 0.5em 1.5em;
+  padding: calc(0.5em * var(--link-item-padding)) calc(1.5em * var(--link-item-padding));
 }
 
 .is-theme-radius .link-panel-front {
@@ -770,19 +770,19 @@
 }
 
 .is-link-orientation-top .link-panel-back {
-  clip-path: polygon(0 0, 100% 0, 100% calc(0% + var(--link-item-padding)), 0 calc(0% + var(--link-item-padding)));
+  clip-path: polygon(0 0, 100% 0, 100% calc(0% + var(--link-item-clip-padding)), 0 calc(0% + var(--link-item-clip-padding)));
 }
 
 .is-link-orientation-bottom .link-panel-back {
-  clip-path: polygon(0 calc(100% - var(--link-item-padding)), 100% calc(100% - var(--link-item-padding)), 100% 100%, 0 100%);
+  clip-path: polygon(0 calc(100% - var(--link-item-clip-padding)), 100% calc(100% - var(--link-item-clip-padding)), 100% 100%, 0 100%);
 }
 
 .is-link-orientation-top.is-link-item-line-show .link-panel-back {
-  clip-path: polygon(0 0, 100% 0, 100% calc(var(--layout-line-width) + var(--link-item-padding)), 0 calc(var(--layout-line-width) + var(--link-item-padding)));
+  clip-path: polygon(0 0, 100% 0, 100% calc(var(--layout-line-width) + var(--link-item-clip-padding)), 0 calc(var(--layout-line-width) + var(--link-item-clip-padding)));
 }
 
 .is-link-orientation-bottom.is-link-item-line-show .link-panel-back {
-  clip-path: polygon(0 calc(100% - var(--layout-line-width) - var(--link-item-padding)), 100% calc(100% - var(--layout-line-width) - var(--link-item-padding)), 100% 100%, 0 100%);
+  clip-path: polygon(0 calc(100% - var(--layout-line-width) - var(--link-item-clip-padding)), 100% calc(100% - var(--layout-line-width) - var(--link-item-clip-padding)), 100% 100%, 0 100%);
 }
 
 .is-link-orientation-top .link-item:focus .link-panel-back,
@@ -798,27 +798,27 @@
 .is-link-item-url-show.is-link-orientation-top .link-item:focus .link-panel-back,
 .is-link-item-url-show.is-link-orientation-top .link-item:focus-within .link-panel-back,
 .is-link-item-url-show.is-link-orientation-top .link-item:hover .link-panel-back {
-  clip-path: polygon(0 0, 100% 0, 100% calc(var(--link-item-url-height) + var(--link-item-padding)), 0 calc(var(--link-item-url-height) + var(--link-item-padding)));
+  clip-path: polygon(0 0, 100% 0, 100% calc(var(--link-item-url-height) + var(--link-item-clip-padding)), 0 calc(var(--link-item-url-height) + var(--link-item-clip-padding)));
 }
 
 .is-link-item-url-show.is-link-orientation-bottom .link-item:focus .link-panel-back,
 .is-link-item-url-show.is-link-orientation-bottom .link-item:focus-within .link-panel-back,
 .is-link-item-url-show.is-link-orientation-bottom .link-item:hover .link-panel-back {
-  clip-path: polygon(0 calc(100% - calc(var(--link-item-url-height) + var(--link-item-padding))), 100% calc(100% - calc(var(--link-item-url-height) + var(--link-item-padding))), 100% 100%, 0 100%);
+  clip-path: polygon(0 calc(100% - calc(var(--link-item-url-height) + var(--link-item-clip-padding))), 100% calc(100% - calc(var(--link-item-url-height) + var(--link-item-clip-padding))), 100% 100%, 0 100%);
 }
 
 .is-edit.is-link-orientation-top .link-panel-back,
 .is-edit.is-link-orientation-top .link-item:focus .link-panel-back,
 .is-edit.is-link-orientation-top .link-item:focus-within .link-panel-back,
 .is-edit.is-link-orientation-top .link-item:hover .link-panel-back {
-  clip-path: polygon(0 0, 100% 0, 100% calc(var(--link-item-edit-height) + var(--link-item-padding)), 0 calc(var(--link-item-edit-height) + var(--link-item-padding)));
+  clip-path: polygon(0 0, 100% 0, 100% calc(var(--link-item-edit-height) + var(--link-item-clip-padding)), 0 calc(var(--link-item-edit-height) + var(--link-item-clip-padding)));
 }
 
 .is-edit.is-link-orientation-bottom .link-panel-back,
 .is-edit.is-link-orientation-bottom .link-item:focus .link-panel-back,
 .is-edit.is-link-orientation-bottom .link-item:focus-within .link-panel-back,
 .is-edit.is-link-orientation-bottom .link-item:hover .link-panel-back {
-  clip-path: polygon(0 calc(100% - var(--link-item-edit-height) - var(--link-item-padding)), 100% calc(100% - var(--link-item-edit-height) - var(--link-item-padding)), 100% 100%, 0 100%);
+  clip-path: polygon(0 calc(100% - var(--link-item-edit-height) - var(--link-item-clip-padding)), 100% calc(100% - var(--link-item-edit-height) - var(--link-item-clip-padding)), 100% 100%, 0 100%);
 }
 
 .link-control {
diff --git a/src/css/variables.css b/src/css/variables.css
index 6c66ff4d..fddbb863 100644
--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -122,7 +122,8 @@
   --link-item-display-name-size:                        0.9em;
   --link-item-border:                                   0;
   --link-item-opacity:                                  1;
-  --link-item-padding:                                  1em;
+  --link-item-padding:                                  1;
+  --link-item-clip-padding:                             1em;
   /* layout */
   --layout-size:                                        1;
   --layout-width:                                       80%;
@@ -346,7 +347,7 @@
 }
 
 .is-link-item-opacity {
-  --link-item-padding:                                  calc(0 * 1em);
+  --link-item-clip-padding:                             calc(0 * 1em);
 }
 
 @media (min-width: 700px) {
diff --git a/src/js/version.js b/src/js/version.js
index 45de8c13..5cdad1af 100644
--- a/src/js/version.js
+++ b/src/js/version.js
@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "5.12.0";
+  var current = "5.13.0";
 
   var name = "Zonked Tarsier";
 
diff --git a/src/manifest.json b/src/manifest.json
index 2eccfd47..2f294031 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": "5.12.0",
+  "version": "5.13.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"