[refactor] [design] improve controls and header padding and border

css/base.css

@@ -71,10 +71,10 @@
   --header-shade-color: transparent;
   --header-shade-opacity: none;
   --header-search-width: 0%;
-  --header-shade-padding-top: calc(var(--line-width) * var(--header-shade-padding-multiplier-top));
+  --header-padding-top: calc(var(--line-width) * var(--header-padding-multiplier-top));
-  --header-shade-padding-bottom: calc(var(--line-width) * var(--header-shade-padding-multiplier-bottom));
+  --header-padding-bottom: calc(var(--line-width) * var(--header-padding-multiplier-bottom));
-  --header-shade-padding-multiplier-top: 4;
+  --header-padding-multiplier-top: 4;
-  --header-shade-padding-multiplier-bottom: 4;
+  --header-padding-multiplier-bottom: 4;
   --header-border-width-top: calc(var(--line-width) * var(--header-border-width-multiplier-top));
   --header-border-width-bottom: calc(var(--line-width) * var(--header-border-width-multiplier-bottom));
   --header-border-width-multiplier-top: 1;

css/header.css

@@ -45,17 +45,17 @@
   opacity: var(--header-shade-opacity);
 }
 
-.is-header-shade-border-top-show .header-border {
+.is-header-border-top-show .header-border {
   border-top: var(--header-border-width-top) solid rgb(var(--accent));
 }
 
-.is-header-shade-border-bottom-show .header-border {
+.is-header-border-bottom-show .header-border {
   border-bottom: var(--header-border-width-bottom) solid rgb(var(--accent));
 }
 
 .header-area {
-  padding-top: calc(var(--gutter) * 3 + var(--header-shade-padding-top));
+  padding-top: calc(var(--gutter) * 3 + var(--header-padding-top));
-  padding-bottom: calc(var(--gutter) * 3 + var(--header-shade-padding-bottom));
+  padding-bottom: calc(var(--gutter) * 3 + var(--header-padding-bottom));
   padding-left: calc(var(--gutter) * 3);
   padding-right: calc(var(--gutter) * 3);
   position: relative;

css/link.css

@@ -56,7 +56,7 @@
   justify-content: flex-end;
 }
 
-.is-header-shade-border-bottom-show .link-area,
+.is-header-border-bottom-show .link-area,
 .is-header-shade-style-always .link-area {
   padding-top: calc(var(--gutter) * 4);
 }
@@ -186,9 +186,9 @@
   align-items: flex-end;
 }
 
-.is-link-show-url .link-item:focus .link-panel-front,
+.is-link-url-show .link-item:focus .link-panel-front,
-.is-link-show-url .link-item:focus-within .link-panel-front,
+.is-link-url-show .link-item:focus-within .link-panel-front,
-.is-link-show-url .link-item:hover .link-panel-front {
+.is-link-url-show .link-item:hover .link-panel-front {
   height: calc(100% - var(--url-height));
 }
 
@@ -270,7 +270,7 @@
   transition: all var(--animation-speed-fast) ease-in-out;
 }
 
-.is-link-show-url .link-url {
+.is-link-url-show .link-url {
   display: flex;
 }
 
@@ -301,11 +301,11 @@
   text-overflow: ellipsis;
 }
 
-.is-link-url-dark .link-url-text {
+.is-link-url-style-dark .link-url-text {
   color: rgb(var(--black));
 }
 
-.is-link-url-light .link-url-text {
+.is-link-url-style-light .link-url-text {
   color: rgb(var(--white));
 }
 
@@ -430,9 +430,9 @@
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
 }
 
-.is-link-edit.is-link-show-url .link-item:focus .link-panel-front,
+.is-link-edit.is-link-url-show .link-item:focus .link-panel-front,
-.is-link-edit.is-link-show-url .link-item:focus-within .link-panel-front,
+.is-link-edit.is-link-url-show .link-item:focus-within .link-panel-front,
-.is-link-edit.is-link-show-url .link-item:hover .link-panel-front {
+.is-link-edit.is-link-url-show .link-item:hover .link-panel-front {
   height: calc(100% - var(--edit-height));
 }
 

index.html

@@ -571,6 +571,50 @@
               </div>
             </div>
           </div>
+          <div class="menu-item">
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Padding</h1>
+            </div>
+            <div class="menu-item-form">
+              <div class="input-wrap">
+                <label for="control-header-padding-top">Top padding</label>
+                <input id="control-header-padding-top" class="control-header-padding-top" type="range" min="0" max="50" value="0" tabindex="1">
+              </div>
+              <hr>
+              <div class="input-wrap">
+                <label for="control-header-padding-bottom">Bottom padding</label>
+                <input id="control-header-padding-bottom" class="control-header-padding-bottom" type="range" min="0" max="50" value="0" tabindex="1">
+              </div>
+            </div>
+          </div>
+          <div class="menu-item">
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Border</h1>
+            </div>
+            <div class="menu-item-form">
+              <div class="input-wrap">
+                <input id="control-header-border-top-show" class="control-header-border-top-show" type="checkbox" value="always" tabindex="1">
+                <label for="control-header-border-top-show">Top border</label>
+              </div>
+              <div class="form-indent">
+                <div class="input-wrap">
+                  <label for="control-header-border-top-width">Border width</label>
+                  <input id="control-header-border-top-width" class="control-header-border-top-width mb-0" type="range" min="1" max="10" value="0" tabindex="1">
+                </div>
+              </div>
+              <hr>
+              <div class="input-wrap">
+                <input id="control-header-border-bottom-show" class="control-header-border-bottom-show" type="checkbox" value="always" tabindex="1">
+                <label for="control-header-border-bottom-show">Bottom border</label>
+              </div>
+              <div class="form-indent">
+                <div class="input-wrap">
+                  <label for="control-header-border-bottom-width">Border width</label>
+                  <input id="control-header-border-bottom-width" class="control-header-border-bottom-width" type="range" min="1" max="10" value="0" tabindex="1">
+                </div>
+              </div>
+            </div>
+          </div>
           <div class="menu-item">
             <div class="menu-item-header">
               <h1 class="menu-item-header-text">Shade</h1>
@@ -597,36 +641,6 @@
                   <label for="control-header-shade-opacity">Opacity</label>
                   <input id="control-header-shade-opacity" class="control-header-shade-opacity" type="range" min="0" max="100" value="0" tabindex="1">
                 </div>
-                <div class="input-wrap">
-                  <label for="control-header-shade-padding-top">Top padding</label>
-                  <input id="control-header-shade-padding-top" class="control-header-shade-padding-top" type="range" min="0" max="50" value="0" tabindex="1">
-                </div>
-                <div class="input-wrap">
-                  <label for="control-header-shade-padding-bottom">Bottom padding</label>
-                  <input id="control-header-shade-padding-bottom" class="control-header-shade-padding-bottom mb-0" type="range" min="0" max="50" value="0" tabindex="1">
-                </div>
-                <hr>
-                <div class="input-wrap">
-                  <input id="control-header-shade-border-top-show" class="control-header-shade-border-top-show" type="checkbox" value="always" tabindex="1">
-                  <label for="control-header-shade-border-top-show">Top border</label>
-                </div>
-                <div class="form-indent">
-                  <div class="input-wrap">
-                    <label for="control-header-shade-border-top-width">Border width</label>
-                    <input id="control-header-shade-border-top-width" class="control-header-shade-border-top-width mb-0" type="range" min="1" max="10" value="0" tabindex="1">
-                  </div>
-                </div>
-                <hr>
-                <div class="input-wrap">
-                  <input id="control-header-shade-border-bottom-show" class="control-header-shade-border-bottom-show" type="checkbox" value="always" tabindex="1">
-                  <label for="control-header-shade-border-bottom-show">Bottom border</label>
-                </div>
-                <div class="form-indent">
-                  <div class="input-wrap">
-                    <label for="control-header-shade-border-bottom-width">Border width</label>
-                    <input id="control-header-shade-border-bottom-width" class="control-header-shade-border-bottom-width" type="range" min="1" max="10" value="0" tabindex="1">
-                  </div>
-                </div>
               </div>
             </div>
           </div>

js/header.js

@@ -87,14 +87,14 @@ var header = (function() {
 
   var _padding = function() {
     var html = helper.e("html");
-    html.style.setProperty("--header-shade-padding-multiplier-top", state.get().header.shade.padding.top);
+    html.style.setProperty("--header-padding-multiplier-top", state.get().header.padding.top);
-    html.style.setProperty("--header-shade-padding-multiplier-bottom", state.get().header.shade.padding.bottom);
+    html.style.setProperty("--header-padding-multiplier-bottom", state.get().header.padding.bottom);
   };
 
   var _border = function() {
     var html = helper.e("html");
-    html.style.setProperty("--header-border-width-multiplier-top", state.get().header.shade.border.top.width);
+    html.style.setProperty("--header-border-width-multiplier-top", state.get().header.border.top.width);
-    html.style.setProperty("--header-border-width-multiplier-bottom", state.get().header.shade.border.bottom.width);
+    html.style.setProperty("--header-border-width-multiplier-bottom", state.get().header.border.bottom.width);
   };
 
   var _search = function() {

js/state.js

@@ -105,21 +105,21 @@ var state = (function() {
       },
       shade: {
         show: true,
-        padding: {
-          top: 0,
-          bottom: 0
-        },
         style: "scroll",
         opacity: 0.95,
-        border: {
+      },
-          top: {
+      padding: {
-            show: false,
+        top: 0,
-            width: 1
+        bottom: 0
-          },
+      },
-          bottom: {
+      border: {
-            show: false,
+        top: {
-            width: 1
+          show: false,
-          }
+          width: 1
+        },
+        bottom: {
+          show: false,
+          width: 1
         }
       },
       greeting: {

js/update.js

@@ -391,6 +391,15 @@ var update = (function() {
     return data;
   };
 
+  var _update_340 = function(data) {
+    data.version = "3.4.0";
+    data.state.header.padding = data.state.header.shade.padding;
+    delete data.state.header.shade.padding;
+    data.state.header.border = data.state.header.shade.border;
+    delete data.state.header.shade.border;
+    return data;
+  };
+
   // var _update_300 = function(data) {
   //   data.version = 3.00;
   //   return data;
@@ -493,6 +502,10 @@ var update = (function() {
         console.log("\t= running update 3.2.0");
         data = _update_320(data);
       };
+      if (version.compare(data.version, "3.4.0") == -1) {
+        console.log("\t= running update 3.4.0");
+        data = _update_340(data);
+      };
     };
     // if no update is needed
     // version bump

js/version.js

@@ -1,7 +1,7 @@
 var version = (function() {
 
   // version is normally bumped when the state needs changing or any new functionality is added
-  var current = "3.3.0";
+  var current = "3.4.0";
 
   var compare = function(a, b) {
     var pa = a.split(".");