[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/control.js

@@ -335,8 +335,6 @@ var control = (function() {
     path: "header.greeting.type",
     type: "radio",
     func: function() {
-      render();
-      dependents();
       greeting.clear();
       greeting.render();
     }
@@ -345,8 +343,6 @@ var control = (function() {
     path: "header.greeting.type",
     type: "radio",
     func: function() {
-      render();
-      dependents();
       greeting.clear();
       greeting.render();
     }
@@ -355,8 +351,6 @@ var control = (function() {
     path: "header.greeting.type",
     type: "radio",
     func: function() {
-      render();
-      dependents();
       greeting.clear();
       greeting.render();
     }
@@ -365,8 +359,6 @@ var control = (function() {
     path: "header.greeting.name",
     type: "text",
     func: function() {
-      render();
-      dependents();
       greeting.clear();
       greeting.render();
     }
@@ -385,8 +377,6 @@ var control = (function() {
     path: "header.transitional.type",
     type: "radio",
     func: function() {
-      render();
-      dependents();
       transitional.clear();
       transitional.render();
     }
@@ -395,8 +385,6 @@ var control = (function() {
     path: "header.transitional.type",
     type: "radio",
     func: function() {
-      render();
-      dependents();
       transitional.clear();
       transitional.render();
     }
@@ -419,8 +407,6 @@ var control = (function() {
     path: "header.clock.hours.display",
     type: "radio",
     func: function() {
-      render();
-      dependents();
       clock.clear();
       clock.render();
       greeting.clear();
@@ -433,8 +419,6 @@ var control = (function() {
     path: "header.clock.hours.display",
     type: "radio",
     func: function() {
-      render();
-      dependents();
       clock.clear();
       clock.render();
       greeting.clear();
@@ -461,8 +445,6 @@ var control = (function() {
     path: "header.clock.minutes.display",
     type: "radio",
     func: function() {
-      render();
-      dependents();
       clock.clear();
       clock.render();
       greeting.clear();
@@ -475,8 +457,6 @@ var control = (function() {
     path: "header.clock.minutes.display",
     type: "radio",
     func: function() {
-      render();
-      dependents();
       clock.clear();
       clock.render();
       greeting.clear();
@@ -503,8 +483,6 @@ var control = (function() {
     path: "header.clock.seconds.display",
     type: "radio",
     func: function() {
-      render();
-      dependents();
       clock.clear();
       clock.render();
       greeting.clear();
@@ -517,8 +495,6 @@ var control = (function() {
     path: "header.clock.seconds.display",
     type: "radio",
     func: function() {
-      render();
-      dependents();
       clock.clear();
       clock.render();
       greeting.clear();
@@ -581,7 +557,6 @@ var control = (function() {
     path: "header.date.day.display",
     type: "radio",
     func: function() {
-      render();
       dependents();
       date.clear();
       date.render();
@@ -595,8 +570,6 @@ var control = (function() {
     path: "header.date.day.weekStart",
     type: "radio",
     func: function() {
-      render();
-      dependents();
       date.clear();
       date.render();
       greeting.clear();
@@ -609,8 +582,6 @@ var control = (function() {
     path: "header.date.day.weekStart",
     type: "radio",
     func: function() {
-      render();
-      dependents();
       date.clear();
       date.render();
       greeting.clear();
@@ -623,7 +594,6 @@ var control = (function() {
     path: "header.date.day.display",
     type: "radio",
     func: function() {
-      render();
       dependents();
       date.clear();
       date.render();
@@ -637,7 +607,6 @@ var control = (function() {
     path: "header.date.day.length",
     type: "radio",
     func: function() {
-      render();
       date.clear();
       date.render();
       greeting.clear();
@@ -650,7 +619,6 @@ var control = (function() {
     path: "header.date.day.length",
     type: "radio",
     func: function() {
-      render();
       date.clear();
       date.render();
       greeting.clear();
@@ -677,8 +645,6 @@ var control = (function() {
     path: "header.date.date.display",
     type: "radio",
     func: function() {
-      render();
-      dependents();
       date.clear();
       date.render();
       greeting.clear();
@@ -691,8 +657,6 @@ var control = (function() {
     path: "header.date.date.display",
     type: "radio",
     func: function() {
-      render();
-      dependents();
       date.clear();
       date.render();
       greeting.clear();
@@ -705,8 +669,6 @@ var control = (function() {
     path: "header.date.date.ordinal",
     type: "checkbox",
     func: function() {
-      render();
-      dependents();
       date.clear();
       date.render();
       greeting.clear();
@@ -733,7 +695,6 @@ var control = (function() {
     path: "header.date.month.display",
     type: "radio",
     func: function() {
-      render();
       dependents();
       date.clear();
       date.render();
@@ -747,8 +708,6 @@ var control = (function() {
     path: "header.date.month.ordinal",
     type: "checkbox",
     func: function() {
-      render();
-      dependents();
       date.clear();
       date.render();
       greeting.clear();
@@ -761,7 +720,6 @@ var control = (function() {
     path: "header.date.month.display",
     type: "radio",
     func: function() {
-      render();
       dependents();
       date.clear();
       date.render();
@@ -775,7 +733,6 @@ var control = (function() {
     path: "header.date.month.length",
     type: "radio",
     func: function() {
-      render();
       date.clear();
       date.render();
       greeting.clear();
@@ -788,7 +745,6 @@ var control = (function() {
     path: "header.date.month.length",
     type: "radio",
     func: function() {
-      render();
       date.clear();
       date.render();
       greeting.clear();
@@ -815,8 +771,6 @@ var control = (function() {
     path: "header.date.year.display",
     type: "radio",
     func: function() {
-      render();
-      dependents();
       date.clear();
       date.render();
       greeting.clear();
@@ -829,8 +783,6 @@ var control = (function() {
     path: "header.date.year.display",
     type: "radio",
     func: function() {
-      render();
-      dependents();
       date.clear();
       date.render();
       greeting.clear();
@@ -843,8 +795,6 @@ var control = (function() {
     path: "header.date.separator.show",
     type: "checkbox",
     func: function() {
-      render();
-      dependents();
       date.clear();
       date.render();
       greeting.clear();
@@ -857,8 +807,6 @@ var control = (function() {
     path: "header.date.format",
     type: "radio",
     func: function() {
-      render();
-      dependents();
       date.clear();
       date.render();
       greeting.clear();
@@ -871,8 +819,6 @@ var control = (function() {
     path: "header.date.format",
     type: "radio",
     func: function() {
-      render();
-      dependents();
       date.clear();
       date.render();
       greeting.clear();
@@ -951,7 +897,6 @@ var control = (function() {
       }
     }],
     func: function() {
-      render();
       header.render.search();
     }
   }, {
@@ -963,7 +908,6 @@ var control = (function() {
     path: "header.search.engine.selected",
     type: "radio",
     func: function() {
-      render();
       dependents();
       search.render();
     }
@@ -972,7 +916,6 @@ var control = (function() {
     path: "header.search.engine.selected",
     type: "radio",
     func: function() {
-      render();
       dependents();
       search.render();
     }
@@ -981,7 +924,6 @@ var control = (function() {
     path: "header.search.engine.selected",
     type: "radio",
     func: function() {
-      render();
       dependents();
       search.render();
     }
@@ -990,7 +932,6 @@ var control = (function() {
     path: "header.search.engine.selected",
     type: "radio",
     func: function() {
-      render();
       dependents();
       search.render();
     }
@@ -999,7 +940,6 @@ var control = (function() {
     path: "header.search.engine.selected",
     type: "radio",
     func: function() {
-      render();
       dependents();
       search.render();
     }
@@ -1083,12 +1023,11 @@ var control = (function() {
     type: "range",
     valueMod: ["reverse", "float"],
     func: function() {
-      render();
       header.render.opacity();
     }
   }, {
-    element: helper.e(".control-header-shade-padding-top"),
+    element: helper.e(".control-header-padding-top"),
-    path: "header.shade.padding.top",
+    path: "header.padding.top",
     type: "range",
     additionalEvents: [{
       event: "input",
@@ -1130,12 +1069,11 @@ var control = (function() {
       }
     }],
     func: function() {
-      render();
       header.render.padding();
     }
   }, {
-    element: helper.e(".control-header-shade-padding-bottom"),
+    element: helper.e(".control-header-padding-bottom"),
-    path: "header.shade.padding.bottom",
+    path: "header.padding.bottom",
     type: "range",
     additionalEvents: [{
       event: "input",
@@ -1177,12 +1115,11 @@ var control = (function() {
       }
     }],
     func: function() {
-      render();
       header.render.padding();
     }
   }, {
-    element: helper.e(".control-header-shade-border-top-show"),
+    element: helper.e(".control-header-border-top-show"),
-    path: "header.shade.border.top.show",
+    path: "header.border.top.show",
     type: "checkbox",
     func: function() {
       render();
@@ -1190,15 +1127,15 @@ var control = (function() {
       header.render.border();
     }
   }, {
-    element: helper.e(".control-header-shade-border-top-width"),
+    element: helper.e(".control-header-border-top-width"),
-    path: "header.shade.border.top.width",
+    path: "header.border.top.width",
     type: "range",
     func: function() {
       header.render.border();
     }
   }, {
-    element: helper.e(".control-header-shade-border-bottom-show"),
+    element: helper.e(".control-header-border-bottom-show"),
-    path: "header.shade.border.bottom.show",
+    path: "header.border.bottom.show",
     type: "checkbox",
     func: function() {
       render();
@@ -1206,8 +1143,8 @@ var control = (function() {
       header.render.border();
     }
   }, {
-    element: helper.e(".control-header-shade-border-bottom-width"),
+    element: helper.e(".control-header-border-bottom-width"),
-    path: "header.shade.border.bottom.width",
+    path: "header.border.bottom.width",
     type: "range",
     func: function() {
       header.render.border();
@@ -1712,7 +1649,7 @@ var control = (function() {
     }
   }];
 
-  var _bind = function() {
+  var bind = function() {
     var eventType = {
       button: "click",
       checkbox: "change",
@@ -1806,13 +1743,24 @@ var control = (function() {
     var _menu = function() {
       helper.addClass(html, "is-menu");
     };
-    var _edit = function() {
+    var _header = function() {
-      if (state.get().link.edit) {
+      var _area = function() {
-        helper.addClass(html, "is-link-edit");
+        helper.removeClass(html, "is-header-area-alignment-horizontal-left");
-        link.render.tabIndex();
+        helper.removeClass(html, "is-header-area-alignment-horizontal-center");
+        helper.removeClass(html, "is-header-area-alignment-horizontal-right");
+        helper.addClass(html, "is-header-area-alignment-horizontal-" + state.get().header.area.alignment.horizontal);
+      };
+      var _items = function() {
+        helper.removeClass(html, "is-header-items-alignment-horizontal-left");
+        helper.removeClass(html, "is-header-items-alignment-horizontal-center");
+        helper.removeClass(html, "is-header-items-alignment-horizontal-right");
+        helper.addClass(html, "is-header-items-alignment-horizontal-" + state.get().header.items.alignment.horizontal);
+      };
+      var _clock = function() {
+        if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
+          helper.addClass(html, "is-header-clock-show");
         } else {
-        helper.removeClass(html, "is-link-edit");
+          helper.removeClass(html, "is-header-clock-show");
-        link.render.tabIndex();
         };
       };
       var _date = function() {
@@ -1822,120 +1770,21 @@ var control = (function() {
           helper.removeClass(html, "is-header-date-show");
         };
       };
-    var _clock = function() {
-      if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
-        helper.addClass(html, "is-header-clock-show");
-      } else {
-        helper.removeClass(html, "is-header-clock-show");
-      };
-    };
       var _search = function() {
-      if (state.get().header.search.show) {
-        helper.addClass(html, "is-header-search-show");
-      } else {
         helper.removeClass(html, "is-header-search-show");
-      };
         helper.removeClass(html, "is-header-search-width-style-custom");
         helper.removeClass(html, "is-header-search-width-style-auto");
-      helper.addClass(html, "is-header-search-width-style-" + state.get().header.search.width.style);
         helper.removeClass(html, "is-header-search-text-align-left");
         helper.removeClass(html, "is-header-search-text-align-center");
         helper.removeClass(html, "is-header-search-text-align-right");
+        if (state.get().header.search.show) {
+          helper.addClass(html, "is-header-search-show");
+          helper.addClass(html, "is-header-search-width-style-" + state.get().header.search.width.style);
           helper.addClass(html, "is-header-search-text-align-" + state.get().header.search.text.align);
+        };
         helper.e(".control-header-search-engine-custom-name").value = state.get().header.search.engine.custom.name;
         helper.e(".control-header-search-engine-custom-url").value = state.get().header.search.engine.custom.url;
       };
-    var _link = function() {
-      helper.removeClass(html, "is-link-area-alignment-horizontal-left");
-      helper.removeClass(html, "is-link-area-alignment-horizontal-center");
-      helper.removeClass(html, "is-link-area-alignment-horizontal-right");
-      helper.addClass(html, "is-link-area-alignment-horizontal-" + state.get().link.area.alignment.horizontal);
-      helper.removeClass(html, "is-link-items-alignment-horizontal-left");
-      helper.removeClass(html, "is-link-items-alignment-horizontal-center");
-      helper.removeClass(html, "is-link-items-alignment-horizontal-right");
-      helper.addClass(html, "is-link-items-alignment-horizontal-" + state.get().link.items.alignment.horizontal);
-      helper.removeClass(html, "is-link-display-alignment-horizontal-left");
-      helper.removeClass(html, "is-link-display-alignment-horizontal-center");
-      helper.removeClass(html, "is-link-display-alignment-horizontal-right");
-      helper.addClass(html, "is-link-display-alignment-horizontal-" + state.get().link.display.alignment.horizontal);
-      helper.removeClass(html, "is-link-display-alignment-vertical-top");
-      helper.removeClass(html, "is-link-display-alignment-vertical-center");
-      helper.removeClass(html, "is-link-display-alignment-vertical-bottom");
-      helper.addClass(html, "is-link-display-alignment-vertical-" + state.get().link.display.alignment.vertical);
-      var view = {
-        block: function() {
-          helper.addClass(html, "is-link-style-block");
-          helper.removeClass(html, "is-link-style-list");
-        },
-        list: function() {
-          helper.removeClass(html, "is-link-style-block");
-          helper.addClass(html, "is-link-style-list");
-        }
-      };
-      view[state.get().link.style]();
-      var fit = {
-        best: function() {
-          helper.addClass(html, "is-link-fit-best");
-          helper.removeClass(html, "is-link-fit-custom");
-        },
-        custom: function() {
-          helper.removeClass(html, "is-link-fit-best");
-          helper.addClass(html, "is-link-fit-custom");
-        }
-      };
-      fit[state.get().link.fit]();
-      if (state.get().link.show) {
-        helper.addClass(html, "is-link-show");
-      } else {
-        helper.removeClass(html, "is-link-show");
-      };
-      if (state.get().link.name.show) {
-        helper.addClass(html, "is-link-name-show");
-      } else {
-        helper.removeClass(html, "is-link-name-show");
-      };
-      if (state.get().link.display.show) {
-        helper.addClass(html, "is-link-display-show");
-      } else {
-        helper.removeClass(html, "is-link-display-show");
-      };
-      if (state.get().link.url.show) {
-        helper.addClass(html, "is-link-show-url");
-      } else {
-        helper.removeClass(html, "is-link-show-url");
-      };
-      var urlText = {
-        dark: function() {
-          helper.addClass(html, "is-link-url-dark");
-          helper.removeClass(html, "is-link-url-light");
-        },
-        light: function() {
-          helper.removeClass(html, "is-link-url-dark");
-          helper.addClass(html, "is-link-url-light");
-        }
-      };
-      urlText[state.get().link.url.style]();
-    };
-    var _layout = function() {
-      if (state.get().layout.scrollPastEnd) {
-        helper.addClass(html, "is-layout-scroll-past-end");
-      } else {
-        helper.removeClass(html, "is-layout-scroll-past-end");
-      };
-      helper.removeClass(html, "is-layout-alignment-horizontal-left");
-      helper.removeClass(html, "is-layout-alignment-horizontal-center");
-      helper.removeClass(html, "is-layout-alignment-horizontal-right");
-      helper.removeClass(html, "is-layout-alignment-vertical-top");
-      helper.removeClass(html, "is-layout-alignment-vertical-center");
-      helper.removeClass(html, "is-layout-alignment-vertical-bottom");
-      helper.addClass(html, "is-layout-alignment-horizontal-" + state.get().layout.alignment.horizontal);
-      helper.addClass(html, "is-layout-alignment-vertical-" + state.get().layout.alignment.vertical);
-    };
-    var _theme = function() {
-      helper.removeClass(html, "is-theme-style-dark");
-      helper.removeClass(html, "is-theme-style-light");
-      helper.addClass(html, "is-theme-style-" + state.get().theme.style);
-    };
       var _editAdd = function() {
         if (state.get().header.editAdd.show) {
           helper.addClass(html, "is-header-edit-add-show");
@@ -1964,6 +1813,105 @@ var control = (function() {
           helper.removeClass(html, "is-header-transitional-show");
         };
       };
+      var _shade = function() {
+        helper.removeClass(html, "is-header-shade-show");
+        helper.removeClass(html, "is-header-shade-style-always");
+        helper.removeClass(html, "is-header-shade-style-scroll");
+        if (state.get().header.shade.show) {
+          helper.addClass(html, "is-header-shade-show");
+          helper.addClass(html, "is-header-shade-style-" + state.get().header.shade.style);
+        };
+      };
+      var _border = function() {
+        helper.removeClass(html, "is-header-border-top-show");
+        helper.removeClass(html, "is-header-border-bottom-show");
+        if (state.get().header.border.top.show) {
+          helper.addClass(html, "is-header-border-top-show");
+        };
+        if (state.get().header.border.bottom.show) {
+          helper.addClass(html, "is-header-border-bottom-show");
+        };
+      };
+      _area();
+      _items();
+      _clock();
+      _date();
+      _search();
+      _editAdd();
+      _accent();
+      _shade();
+      _border();
+      _greeting();
+      _transitional();
+    };
+    var _link = function() {
+      helper.removeClass(html, "is-link-show");
+      helper.removeClass(html, "is-link-area-alignment-horizontal-left");
+      helper.removeClass(html, "is-link-area-alignment-horizontal-center");
+      helper.removeClass(html, "is-link-area-alignment-horizontal-right");
+      helper.removeClass(html, "is-link-name-show");
+      helper.removeClass(html, "is-link-display-show");
+      helper.removeClass(html, "is-link-display-alignment-horizontal-left");
+      helper.removeClass(html, "is-link-display-alignment-horizontal-center");
+      helper.removeClass(html, "is-link-display-alignment-horizontal-right");
+      helper.removeClass(html, "is-link-display-alignment-vertical-top");
+      helper.removeClass(html, "is-link-display-alignment-vertical-center");
+      helper.removeClass(html, "is-link-display-alignment-vertical-bottom");
+      helper.removeClass(html, "is-link-url-show");
+      helper.removeClass(html, "is-link-url-style-light");
+      helper.removeClass(html, "is-link-url-style-dark");
+      helper.removeClass(html, "is-link-fit-custom");
+      helper.removeClass(html, "is-link-fit-best");
+      helper.removeClass(html, "is-link-items-alignment-horizontal-left");
+      helper.removeClass(html, "is-link-items-alignment-horizontal-center");
+      helper.removeClass(html, "is-link-items-alignment-horizontal-right");
+      helper.removeClass(html, "is-link-style-list");
+      helper.removeClass(html, "is-link-style-block");
+      helper.removeClass(html, "is-link-edit");
+      link.render.tabIndex();
+      if (state.get().link.show) {
+        helper.addClass(html, "is-link-show");
+        helper.addClass(html, "is-link-area-alignment-horizontal-" + state.get().link.area.alignment.horizontal);
+        helper.addClass(html, "is-link-items-alignment-horizontal-" + state.get().link.items.alignment.horizontal);
+        helper.addClass(html, "is-link-display-alignment-horizontal-" + state.get().link.display.alignment.horizontal);
+        helper.addClass(html, "is-link-display-alignment-vertical-" + state.get().link.display.alignment.vertical);
+        helper.addClass(html, "is-link-style-" + state.get().link.style);
+        helper.addClass(html, "is-link-fit-" + state.get().link.fit);
+        helper.addClass(html, "is-link-url-style-" + state.get().link.url.style);
+        if (state.get().link.name.show) {
+          helper.addClass(html, "is-link-name-show");
+        };
+        if (state.get().link.display.show) {
+          helper.addClass(html, "is-link-display-show");
+        };
+        if (state.get().link.url.show) {
+          helper.addClass(html, "is-link-url-show");
+        };
+        if (state.get().link.edit) {
+          helper.addClass(html, "is-link-edit");
+          link.render.tabIndex();
+        };
+      };
+    };
+    var _layout = function() {
+      helper.removeClass(html, "is-layout-scroll-past-end");
+      helper.removeClass(html, "is-layout-alignment-horizontal-left");
+      helper.removeClass(html, "is-layout-alignment-horizontal-center");
+      helper.removeClass(html, "is-layout-alignment-horizontal-right");
+      helper.removeClass(html, "is-layout-alignment-vertical-top");
+      helper.removeClass(html, "is-layout-alignment-vertical-center");
+      helper.removeClass(html, "is-layout-alignment-vertical-bottom");
+      helper.addClass(html, "is-layout-alignment-horizontal-" + state.get().layout.alignment.horizontal);
+      helper.addClass(html, "is-layout-alignment-vertical-" + state.get().layout.alignment.vertical);
+      if (state.get().layout.scrollPastEnd) {
+        helper.addClass(html, "is-layout-scroll-past-end");
+      };
+    };
+    var _theme = function() {
+      helper.removeClass(html, "is-theme-style-dark");
+      helper.removeClass(html, "is-theme-style-light");
+      helper.addClass(html, "is-theme-style-" + state.get().theme.style);
+    };
     var _background = function() {
       if (state.get().background.image.show) {
         helper.addClass(html, "is-background-image-show");
@@ -1971,62 +1919,61 @@ var control = (function() {
         helper.removeClass(html, "is-background-image-show");
       };
     };
-    var _header = function() {
-      if (state.get().header.shade.show) {
-        helper.addClass(html, "is-header-shade-show");
-        helper.removeClass(html, "is-header-shade-style-always");
-        helper.removeClass(html, "is-header-shade-style-scroll");
-        helper.addClass(html, "is-header-shade-style-" + state.get().header.shade.style);
-        helper.removeClass(html, "is-header-area-alignment-horizontal-left");
-        helper.removeClass(html, "is-header-area-alignment-horizontal-center");
-        helper.removeClass(html, "is-header-area-alignment-horizontal-right");
-        helper.addClass(html, "is-header-area-alignment-horizontal-" + state.get().header.area.alignment.horizontal);
-        helper.removeClass(html, "is-header-items-alignment-horizontal-left");
-        helper.removeClass(html, "is-header-items-alignment-horizontal-center");
-        helper.removeClass(html, "is-header-items-alignment-horizontal-right");
-        helper.addClass(html, "is-header-items-alignment-horizontal-" + state.get().header.items.alignment.horizontal);
-        if (state.get().header.shade.border.top.show) {
-          helper.addClass(html, "is-header-shade-border-top-show");
-        } else {
-          helper.removeClass(html, "is-header-shade-border-top-show");
-        };
-        if (state.get().header.shade.border.bottom.show) {
-          helper.addClass(html, "is-header-shade-border-bottom-show");
-        } else {
-          helper.removeClass(html, "is-header-shade-border-bottom-show");
-        };
-      } else {
-        helper.removeClass(html, "is-header-shade-show");
-        helper.removeClass(html, "is-header-shade-style-always");
-        helper.removeClass(html, "is-header-shade-style-scroll");
-        helper.removeClass(html, "is-header-shade-border-top-show");
-        helper.removeClass(html, "is-header-shade-border-bottom-show");
-      };
-      state.get().header.area.alignment.horizontal
-    };
     _menu();
-    _edit();
+    _header();
-    _greeting();
-    _transitional();
-    _date();
-    _clock();
-    _search();
-    _editAdd();
-    _accent();
     _link();
     _layout();
     _theme();
     _background();
-    _header();
   };
 
   var dependents = function() {
-    var _edit = function() {
+    var _header = function() {
-      if (bookmarks.get().length > 0) {
+      var _clock = function() {
-        helper.e(".control-edit").disabled = false;
+        var activeCount = 0;
+        var toCheck = [state.get().header.clock.seconds.show, state.get().header.clock.minutes.show, state.get().header.clock.hours.show];
+        toCheck.forEach(function(arrayItem, index) {
+          if (arrayItem == true) {
+            activeCount++;
+          };
+        });
+        if (activeCount >= 2 && (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show)) {
+          helper.e(".control-header-clock-separator-show").disabled = false;
         } else {
-        helper.e(".control-edit").disabled = true;
+          helper.e(".control-header-clock-separator-show").disabled = true;
-        helper.e(".control-edit").checked = false;
+        };
+        if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
+          helper.e(".control-header-clock-hour24-show").disabled = false;
+          helper.e(".control-header-clock-meridiem-show").disabled = false;
+        } else {
+          helper.e(".control-header-clock-hour24-show").disabled = true;
+          helper.e(".control-header-clock-meridiem-show").disabled = true;
+        };
+        if ((state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) && !state.get().header.clock.hour24.show) {
+          helper.e(".control-header-clock-meridiem-show").disabled = false;
+        } else {
+          helper.e(".control-header-clock-meridiem-show").disabled = true;
+        };
+        if (state.get().header.clock.hours.show) {
+          helper.e(".control-header-clock-hours-display-number").disabled = false;
+          helper.e(".control-header-clock-hours-display-word").disabled = false;
+        } else {
+          helper.e(".control-header-clock-hours-display-number").disabled = true;
+          helper.e(".control-header-clock-hours-display-word").disabled = true;
+        };
+        if (state.get().header.clock.minutes.show) {
+          helper.e(".control-header-clock-minutes-display-number").disabled = false;
+          helper.e(".control-header-clock-minutes-display-word").disabled = false;
+        } else {
+          helper.e(".control-header-clock-minutes-display-number").disabled = true;
+          helper.e(".control-header-clock-minutes-display-word").disabled = true;
+        };
+        if (state.get().header.clock.seconds.show) {
+          helper.e(".control-header-clock-seconds-display-number").disabled = false;
+          helper.e(".control-header-clock-seconds-display-word").disabled = false;
+        } else {
+          helper.e(".control-header-clock-seconds-display-number").disabled = true;
+          helper.e(".control-header-clock-seconds-display-word").disabled = true;
         };
       };
       var _date = function() {
@@ -2114,80 +2061,33 @@ var control = (function() {
           helper.e(".control-header-date-month-ordinal").disabled = true;
         };
       };
-    var _greeting = function() {
+      var _shade = function() {
-      if (state.get().header.greeting.show) {
+        if (state.get().header.shade.show) {
-        helper.e("[for=control-header-greeting-name]").removeAttribute("disabled");
+          helper.e(".control-header-shade-style-always").disabled = false;
-        helper.e(".control-header-greeting-name").disabled = false;
+          helper.e(".control-header-shade-style-scroll").disabled = false;
-        helper.e(".control-header-greeting-type-good").disabled = false;
+          helper.e("[for=control-header-shade-opacity]").removeAttribute("disabled");
-        helper.e(".control-header-greeting-type-hello").disabled = false;
+          helper.e(".control-header-shade-opacity").disabled = false;
-        helper.e(".control-header-greeting-type-hi").disabled = false;
         } else {
-        helper.e("[for=control-header-greeting-name]").setAttribute("disabled", "");
+          helper.e(".control-header-shade-style-always").disabled = true;
-        helper.e(".control-header-greeting-name").disabled = true;
+          helper.e(".control-header-shade-style-scroll").disabled = true;
-        helper.e(".control-header-greeting-type-good").disabled = true;
+          helper.e("[for=control-header-shade-opacity]").setAttribute("disabled", "");
-        helper.e(".control-header-greeting-type-hello").disabled = true;
+          helper.e(".control-header-shade-opacity").disabled = true;
-        helper.e(".control-header-greeting-type-hi").disabled = true;
         };
       };
-    var _transitional = function() {
+      var _border = function() {
-      if (state.get().header.date.date.show || state.get().header.date.day.show || state.get().header.date.month.show || state.get().header.date.year.show || state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
+        if (state.get().header.border.top.show) {
-        helper.e(".control-header-transitional-show").disabled = false;
+          helper.e("[for=control-header-border-top-width]").removeAttribute("disabled");
+          helper.e(".control-header-border-top-width").disabled = false;
         } else {
-        helper.e(".control-header-transitional-show").disabled = true;
+          helper.e("[for=control-header-border-top-width]").setAttribute("disabled", "");
+          helper.e(".control-header-border-top-width").disabled = true;
         };
-      if (state.get().header.transitional.show && ((state.get().header.date.date.show || state.get().header.date.day.show || state.get().header.date.month.show || state.get().header.date.year.show || state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show))) {
+        if (state.get().header.border.bottom.show) {
-        helper.e(".control-header-transitional-type-timeanddate").disabled = false;
+          helper.e("[for=control-header-border-bottom-width]").removeAttribute("disabled");
-        helper.e(".control-header-transitional-type-its").disabled = false;
+          helper.e(".control-header-border-bottom-width").disabled = false;
         } else {
-        helper.e(".control-header-transitional-type-timeanddate").disabled = true;
+          helper.e("[for=control-header-border-bottom-width]").setAttribute("disabled", "");
-        helper.e(".control-header-transitional-type-its").disabled = true;
+          helper.e(".control-header-border-bottom-width").disabled = true;
-      };
-    };
-    var _clock = function() {
-      var activeCount = 0;
-      var toCheck = [state.get().header.clock.seconds.show, state.get().header.clock.minutes.show, state.get().header.clock.hours.show];
-      toCheck.forEach(function(arrayItem, index) {
-        if (arrayItem == true) {
-          activeCount++;
-        };
-      });
-      if (activeCount >= 2 && (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show)) {
-        helper.e(".control-header-clock-separator-show").disabled = false;
-      } else {
-        helper.e(".control-header-clock-separator-show").disabled = true;
-      };
-      if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
-        helper.e(".control-header-clock-hour24-show").disabled = false;
-        helper.e(".control-header-clock-meridiem-show").disabled = false;
-      } else {
-        helper.e(".control-header-clock-hour24-show").disabled = true;
-        helper.e(".control-header-clock-meridiem-show").disabled = true;
-      };
-      if ((state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) && !state.get().header.clock.hour24.show) {
-        helper.e(".control-header-clock-meridiem-show").disabled = false;
-      } else {
-        helper.e(".control-header-clock-meridiem-show").disabled = true;
-      };
-      if (state.get().header.clock.hours.show) {
-        helper.e(".control-header-clock-hours-display-number").disabled = false;
-        helper.e(".control-header-clock-hours-display-word").disabled = false;
-      } else {
-        helper.e(".control-header-clock-hours-display-number").disabled = true;
-        helper.e(".control-header-clock-hours-display-word").disabled = true;
-      };
-      if (state.get().header.clock.minutes.show) {
-        helper.e(".control-header-clock-minutes-display-number").disabled = false;
-        helper.e(".control-header-clock-minutes-display-word").disabled = false;
-      } else {
-        helper.e(".control-header-clock-minutes-display-number").disabled = true;
-        helper.e(".control-header-clock-minutes-display-word").disabled = true;
-      };
-      if (state.get().header.clock.seconds.show) {
-        helper.e(".control-header-clock-seconds-display-number").disabled = false;
-        helper.e(".control-header-clock-seconds-display-word").disabled = false;
-      } else {
-        helper.e(".control-header-clock-seconds-display-number").disabled = true;
-        helper.e(".control-header-clock-seconds-display-word").disabled = true;
         };
       };
       var _search = function() {
@@ -2245,17 +2145,49 @@ var control = (function() {
           helper.e(".control-header-search-width-custom").disabled = true;
         };
       };
-    var _theme = function() {
+      var _greeting = function() {
-      if (state.get().theme.accent.random.active) {
+        if (state.get().header.greeting.show) {
-        helper.eA("input[name='control-theme-accent-random-style']").forEach(function(arrayItem, index) {
+          helper.e("[for=control-header-greeting-name]").removeAttribute("disabled");
-          arrayItem.disabled = false;
+          helper.e(".control-header-greeting-name").disabled = false;
-          helper.e(".control-theme-accent-randomise").disabled = false;
+          helper.e(".control-header-greeting-type-good").disabled = false;
-        });
+          helper.e(".control-header-greeting-type-hello").disabled = false;
+          helper.e(".control-header-greeting-type-hi").disabled = false;
         } else {
-        helper.eA("input[name='control-theme-accent-random-style']").forEach(function(arrayItem, index) {
+          helper.e("[for=control-header-greeting-name]").setAttribute("disabled", "");
-          arrayItem.disabled = true;
+          helper.e(".control-header-greeting-name").disabled = true;
-          helper.e(".control-theme-accent-randomise").disabled = true;
+          helper.e(".control-header-greeting-type-good").disabled = true;
-        });
+          helper.e(".control-header-greeting-type-hello").disabled = true;
+          helper.e(".control-header-greeting-type-hi").disabled = true;
+        };
+      };
+      var _transitional = function() {
+        if (state.get().header.date.date.show || state.get().header.date.day.show || state.get().header.date.month.show || state.get().header.date.year.show || state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
+          helper.e(".control-header-transitional-show").disabled = false;
+        } else {
+          helper.e(".control-header-transitional-show").disabled = true;
+        };
+        if (state.get().header.transitional.show && ((state.get().header.date.date.show || state.get().header.date.day.show || state.get().header.date.month.show || state.get().header.date.year.show || state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show))) {
+          helper.e(".control-header-transitional-type-timeanddate").disabled = false;
+          helper.e(".control-header-transitional-type-its").disabled = false;
+        } else {
+          helper.e(".control-header-transitional-type-timeanddate").disabled = true;
+          helper.e(".control-header-transitional-type-its").disabled = true;
+        };
+      };
+      _clock();
+      _date();
+      _border();
+      _shade();
+      _search();
+      _greeting();
+      _transitional();
+    };
+    var _edit = function() {
+      if (bookmarks.get().length > 0) {
+        helper.e(".control-edit").disabled = false;
+      } else {
+        helper.e(".control-edit").disabled = true;
+        helper.e(".control-edit").checked = false;
       };
     };
     var _link = function() {
@@ -2386,6 +2318,23 @@ var control = (function() {
         helper.e(".control-link-items-alignment-horizontal-right").disabled = true;
       };
     };
+    var _theme = function() {
+      if (state.get().theme.accent.random.active) {
+        helper.e(".control-theme-accent-random-style-any").disabled = false;
+        helper.e(".control-theme-accent-random-style-light").disabled = false;
+        helper.e(".control-theme-accent-random-style-dark").disabled = false;
+        helper.e(".control-theme-accent-random-style-pastel").disabled = false;
+        helper.e(".control-theme-accent-random-style-saturated").disabled = false;
+        helper.e(".control-theme-accent-randomise").disabled = false;
+      } else {
+        helper.e(".control-theme-accent-random-style-any").disabled = true;
+        helper.e(".control-theme-accent-random-style-light").disabled = true;
+        helper.e(".control-theme-accent-random-style-dark").disabled = true;
+        helper.e(".control-theme-accent-random-style-pastel").disabled = true;
+        helper.e(".control-theme-accent-random-style-saturated").disabled = true;
+        helper.e(".control-theme-accent-randomise").disabled = true;
+      };
+    };
     var _background = function() {
       if (state.get().background.image.show) {
         helper.e("[for=control-background-image-url]").removeAttribute("disabled");
@@ -2411,63 +2360,11 @@ var control = (function() {
         helper.e(".control-background-image-accent").disabled = true;
       };
     };
-    var _header = function() {
-      if (state.get().header.shade.show) {
-        helper.e(".control-header-shade-style-always").disabled = false;
-        helper.e(".control-header-shade-style-scroll").disabled = false;
-        helper.e("[for=control-header-shade-opacity]").removeAttribute("disabled");
-        helper.e(".control-header-shade-opacity").disabled = false;
-        helper.e("[for=control-header-shade-padding-top]").removeAttribute("disabled");
-        helper.e(".control-header-shade-padding-top").disabled = false;
-        helper.e("[for=control-header-shade-padding-bottom]").removeAttribute("disabled");
-        helper.e(".control-header-shade-padding-bottom").disabled = false;
-        helper.e(".control-header-shade-border-top-show").disabled = false;
-        helper.e(".control-header-shade-border-bottom-show").disabled = false;
-        helper.e("[for=control-header-shade-border-top-width]").removeAttribute("disabled");
-        helper.e(".control-header-shade-border-top-width").disabled = false;
-        helper.e("[for=control-header-shade-border-bottom-width]").removeAttribute("disabled");
-        helper.e(".control-header-shade-border-bottom-width").disabled = false;
-      } else {
-        helper.e(".control-header-shade-style-always").disabled = true;
-        helper.e(".control-header-shade-style-scroll").disabled = true;
-        helper.e("[for=control-header-shade-opacity]").setAttribute("disabled", "");
-        helper.e(".control-header-shade-opacity").disabled = true;
-        helper.e("[for=control-header-shade-padding-top]").setAttribute("disabled", "");
-        helper.e(".control-header-shade-padding-top").disabled = true;
-        helper.e("[for=control-header-shade-padding-bottom]").setAttribute("disabled", "");
-        helper.e(".control-header-shade-padding-bottom").disabled = true;
-        helper.e(".control-header-shade-border-top-show").disabled = true;
-        helper.e(".control-header-shade-border-bottom-show").disabled = true;
-        helper.e("[for=control-header-shade-border-top-width]").setAttribute("disabled", "");
-        helper.e(".control-header-shade-border-top-width").disabled = true;
-        helper.e("[for=control-header-shade-border-bottom-width]").setAttribute("disabled", "");
-        helper.e(".control-header-shade-border-bottom-width").disabled = true;
-      };
-      if (state.get().header.shade.show && state.get().header.shade.border.top.show) {
-        helper.e("[for=control-header-shade-border-top-width]").removeAttribute("disabled");
-        helper.e(".control-header-shade-border-top-width").disabled = false;
-      } else {
-        helper.e("[for=control-header-shade-border-top-width]").setAttribute("disabled", "");
-        helper.e(".control-header-shade-border-top-width").disabled = true;
-      };
-      if (state.get().header.shade.show && state.get().header.shade.border.bottom.show) {
-        helper.e("[for=control-header-shade-border-bottom-width]").removeAttribute("disabled");
-        helper.e(".control-header-shade-border-bottom-width").disabled = false;
-      } else {
-        helper.e("[for=control-header-shade-border-bottom-width]").setAttribute("disabled", "");
-        helper.e(".control-header-shade-border-bottom-width").disabled = true;
-      };
-    };
-    _edit();
-    _date();
-    _clock();
-    _greeting();
-    _transitional();
-    _search();
-    _theme();
-    _link();
-    _background();
     _header();
+    _edit();
+    _link();
+    _theme();
+    _background();
   };
 
   var update = function() {
@@ -2531,7 +2428,7 @@ var control = (function() {
   };
 
   var init = function() {
-    _bind();
+    bind();
     update();
     dependents();
     render();
@@ -2540,6 +2437,7 @@ var control = (function() {
   // exposed methods
   return {
     init: init,
+    bind: bind,
     render: render,
     dependents: dependents,
     update: update

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,12 +105,13 @@ var state = (function() {
       },
       shade: {
         show: true,
+        style: "scroll",
+        opacity: 0.95,
+      },
       padding: {
         top: 0,
         bottom: 0
       },
-        style: "scroll",
-        opacity: 0.95,
       border: {
         top: {
           show: false,
@@ -120,7 +121,6 @@ var state = (function() {
           show: false,
           width: 1
         }
-        }
       },
       greeting: {
         show: false,

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(".");