[design] improve menu form spacing

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "4.27.0",
+  "version": "4.28.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "4.27.0",
+  "version": "4.28.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/menu.css

@@ -64,7 +64,7 @@
 }
 
 .menu-content {
-  padding: 0 1.5em;
+  padding: 0 calc(var(--menu-space) * 3);
 }
 
 .menu-content-area {
@@ -82,7 +82,7 @@
 }
 
 .menu-item-header {
-  padding: 2em 0;
+  padding: calc(var(--menu-space) * 2) 0;
 }
 
 .menu-item-header-text {
@@ -90,7 +90,7 @@
 }
 
 .menu-item-form {
-  padding: 0 0 2em 2em;
+  padding: 0 0 calc(var(--menu-space) * 3) calc(var(--menu-space) * 3);
   z-index: 1;
 }
 
@@ -147,7 +147,7 @@
   }
 
   .menu-content {
-    padding: 0 3em;
+    padding: 0 calc(var(--menu-space) * 4);
     overflow-y: auto;
   }
 
@@ -160,7 +160,7 @@
   }
 
   .menu-item-header {
-    padding: 2em 0;
+    padding: calc(var(--menu-space) * 1.75) 0;
     position: sticky;
     top: 0;
     z-index: 3;
@@ -172,7 +172,7 @@
   }
 
   .menu-item-form {
-    padding: 2em 0;
+    padding: calc(var(--menu-space) * 2.5) 0;
     z-index: 2;
   }
 }

src/css/variables.css

@@ -214,6 +214,8 @@
   --form-ring-accent:                                   0 0 0 var(--layout-line-width) rgb(var(--theme-accent)),
                                                         0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
   --form-wrap-space:                                    0.75em;
+  /* menu */
+  --menu-space:                                         0.75em;
   /* button */
   --button-background:                                  var(--theme-color-02);
   --button-background-focus-hover:                      var(--theme-color-03);

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "4.27.0";
+  var current = "4.28.0";
 
   var name = "Naughty Goose";
 

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": "4.27.0",
+  "version": "4.28.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"