[feature] control header and link order in layout area

src/css/base.css

@@ -20,31 +20,3 @@ body {
   min-height: 100vh;
   transition: background-color var(--layout-animation-speed-fast) ease-in-out;
 }
-
-.is-layout-scroll-past-end body {
-  margin-bottom: 40vh;
-}
-
-.is-layout-alignment-horizontal-left body {
-  align-items: flex-start;
-}
-
-.is-layout-alignment-horizontal-center body {
-  align-items: center;
-}
-
-.is-layout-alignment-horizontal-right body {
-  align-items: flex-end;
-}
-
-.is-layout-alignment-vertical-top body {
-  justify-content: flex-start;
-}
-
-.is-layout-alignment-vertical-center body {
-  justify-content: center;
-}
-
-.is-layout-alignment-vertical-bottom body {
-  justify-content: flex-end;
-}

src/css/header.css

@@ -19,10 +19,17 @@
 
 .is-link-show .header {
   position: sticky;
-  top: 0;
   left: 0;
 }
 
+.is-layout-order-headerLink.is-link-show .header {
+  top: 0;
+}
+
+.is-layout-order-linkHeader.is-link-show .header {
+  bottom: 0;
+}
+
 .header-shade {
   background-color: transparent;
   content: "";

src/css/layout.css

@@ -0,0 +1,32 @@
+.layout {
+  position: relative;
+  width: var(--layout-width);
+}
+
+.is-layout-scroll-past-end body {
+  margin-bottom: 40vh;
+}
+
+.is-layout-alignment-horizontal-left body {
+  align-items: flex-start;
+}
+
+.is-layout-alignment-horizontal-center body {
+  align-items: center;
+}
+
+.is-layout-alignment-horizontal-right body {
+  align-items: flex-end;
+}
+
+.is-layout-alignment-vertical-top body {
+  justify-content: flex-start;
+}
+
+.is-layout-alignment-vertical-center body {
+  justify-content: center;
+}
+
+.is-layout-alignment-vertical-bottom body {
+  justify-content: flex-end;
+}

src/css/link.css

@@ -22,7 +22,6 @@
 }
 
 .link-area {
-  padding-bottom: calc(var(--layout-gutter) * var(--layout-padding-multiplier));
   padding-left: calc(var(--layout-gutter) * var(--layout-padding-multiplier));
   padding-right: calc(var(--layout-gutter) * var(--layout-padding-multiplier));
   font-size: calc(var(--link-item-size) * 1);
@@ -34,11 +33,24 @@
   grid-template-columns: repeat(auto-fill, minmax(var(--link-item-width), 1fr));
 }
 
-.is-header-border-bottom .link-area,
-.is-header-shade-style-always .link-area {
+.is-layout-order-headerLink .link-area {
+  padding-bottom: calc(var(--layout-gutter) * var(--layout-padding-multiplier));
+}
+
+.is-layout-order-headerLink.is-header-border-bottom .link-area,
+.is-layout-order-headerLink.is-header-shade-style-always .link-area {
   padding-top: calc(var(--layout-gutter) * var(--layout-padding-multiplier));
 }
 
+.is-layout-order-linkHeader .link-area {
+  padding-top: calc(var(--layout-gutter) * var(--layout-padding-multiplier));
+}
+
+.is-layout-order-linkHeader.is-header-border-top .link-area,
+.is-layout-order-linkHeader.is-header-shade-style-always .link-area {
+  padding-bottom: calc(var(--layout-gutter) * var(--layout-padding-multiplier));
+}
+
 .link-item {
   font-size: 1em;
   position: relative;

src/css/main.css

@@ -1,4 +0,0 @@
-.main {
-  position: relative;
-  width: var(--layout-width);
-}

src/index.html

@@ -9,7 +9,7 @@
   <link rel="stylesheet" href="css/reset.css">
   <link rel="stylesheet" href="css/variables.css">
   <link rel="stylesheet" href="css/base.css">
-  <link rel="stylesheet" href="css/main.css">
+  <link rel="stylesheet" href="css/layout.css">
   <link rel="stylesheet" href="css/edge.css">
   <link rel="stylesheet" href="css/animation.css">
   <link rel="stylesheet" href="css/fonts.css">
@@ -43,7 +43,7 @@
     <div class="background-accent"></div>
   </div>
 
-  <main class="main">
+  <main class="layout">
 
     <header class="header">
       <div class="header-shade"></div>
@@ -164,6 +164,21 @@
               <p class="input-helper small muted">Effects may not be visible if Bookmarks fill the page.</p>
             </div>
           </div>
+          <div class="menu-item">
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Area order</h1>
+            </div>
+            <div class="menu-item-form">
+              <div class="input-wrap">
+                <input id="control-layout-order-headerLink" class="control-layout-order-headerLink" type="radio" name="control-layout-order" value="headerLink" tabindex="1">
+                <label for="control-layout-order-headerLink">Header then Bookmarks</label>
+              </div>
+              <div class="input-wrap">
+                <input id="control-layout-order-linkHeader" class="control-layout-order-linkHeader" type="radio" name="control-layout-order" value="linkHeader" tabindex="1">
+                <label for="control-layout-order-linkHeader">Bookmarks then Header</label>
+              </div>
+            </div>
+          </div>
           <div class="menu-item">
             <div class="menu-item-header">
               <h1 class="menu-item-header-text">Padding</h1>

src/js/control.js

@@ -38,14 +38,14 @@ var control = (function() {
       event: "input",
       func: function() {
         edge.render({
-          element: helper.e(".main"),
+          element: helper.e(".layout"),
         });
       }
     }, {
       event: "mousedown",
       func: function() {
         edge.render({
-          element: helper.e(".main"),
+          element: helper.e(".layout"),
         });
       }
     }, {
@@ -63,7 +63,7 @@ var control = (function() {
       func: function() {
         if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
           edge.render({
-            element: helper.e(".main"),
+            element: helper.e(".layout"),
           });
         };
       }
@@ -85,7 +85,7 @@ var control = (function() {
       event: "change",
       func: function() {
         edge.render({
-          element: helper.e(".main"),
+          element: helper.e(".layout"),
           delay: 500
         });
       }
@@ -101,7 +101,7 @@ var control = (function() {
       event: "change",
       func: function() {
         edge.render({
-          element: helper.e(".main"),
+          element: helper.e(".layout"),
           delay: 500
         });
       }
@@ -117,7 +117,7 @@ var control = (function() {
       event: "change",
       func: function() {
         edge.render({
-          element: helper.e(".main"),
+          element: helper.e(".layout"),
           delay: 500
         });
       }
@@ -133,7 +133,7 @@ var control = (function() {
       event: "change",
       func: function() {
         edge.render({
-          element: helper.e(".main"),
+          element: helper.e(".layout"),
           delay: 500
         });
       }
@@ -149,7 +149,7 @@ var control = (function() {
       event: "change",
       func: function() {
         edge.render({
-          element: helper.e(".main"),
+          element: helper.e(".layout"),
           delay: 500
         });
       }
@@ -165,7 +165,7 @@ var control = (function() {
       event: "change",
       func: function() {
         edge.render({
-          element: helper.e(".main"),
+          element: helper.e(".layout"),
           delay: 500
         });
       }
@@ -173,6 +173,42 @@ var control = (function() {
     func: function() {
       render();
     }
+  }, {
+    element: helper.e(".control-layout-order-headerLink"),
+    path: "layout.order",
+    type: "radio",
+    additionalEvents: [{
+      event: "change",
+      func: function() {
+        edge.render({
+          element: helper.e(".layout"),
+          delay: 500
+        });
+      }
+    }],
+    func: function() {
+      layout.render.order();
+      header.render.shade();
+      render();
+    }
+  }, {
+    element: helper.e(".control-layout-order-linkHeader"),
+    path: "layout.order",
+    type: "radio",
+    additionalEvents: [{
+      event: "change",
+      func: function() {
+        edge.render({
+          element: helper.e(".layout"),
+          delay: 500
+        });
+      }
+    }],
+    func: function() {
+      layout.render.order();
+      header.render.shade();
+      render();
+    }
   }, {
     element: helper.e(".control-layout-padding"),
     path: "layout.padding",
@@ -181,14 +217,14 @@ var control = (function() {
       event: "input",
       func: function() {
         edge.render({
-          element: helper.e(".main"),
+          element: helper.e(".layout"),
         });
       }
     }, {
       event: "mousedown",
       func: function() {
         edge.render({
-          element: helper.e(".main"),
+          element: helper.e(".layout"),
         });
       }
     }, {
@@ -206,7 +242,7 @@ var control = (function() {
       func: function() {
         if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
           edge.render({
-            element: helper.e(".main"),
+            element: helper.e(".layout"),
           });
         };
       }
@@ -227,14 +263,14 @@ var control = (function() {
       event: "input",
       func: function() {
         edge.render({
-          element: helper.e(".main"),
+          element: helper.e(".layout"),
         });
       }
     }, {
       event: "mousedown",
       func: function() {
         edge.render({
-          element: helper.e(".main"),
+          element: helper.e(".layout"),
         });
       }
     }, {
@@ -252,7 +288,7 @@ var control = (function() {
       func: function() {
         if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
           edge.render({
-            element: helper.e(".main"),
+            element: helper.e(".layout"),
           });
         };
       }
@@ -278,6 +314,7 @@ var control = (function() {
     type: "checkbox",
     func: function() {
       render();
+      header.render.shade();
     }
   }, {
     element: helper.e(".control-header-area-width"),
@@ -2375,8 +2412,11 @@ var control = (function() {
       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.removeClass(html, "is-layout-order-headerLink");
+      helper.removeClass(html, "is-layout-order-linkHeader");
       helper.addClass(html, "is-layout-alignment-horizontal-" + state.get().layout.alignment.horizontal);
       helper.addClass(html, "is-layout-alignment-vertical-" + state.get().layout.alignment.vertical);
+      helper.addClass(html, "is-layout-order-" + state.get().layout.order);
       if (state.get().layout.scrollPastEnd) {
         helper.addClass(html, "is-layout-scroll-past-end");
       };
@@ -2686,6 +2726,8 @@ var control = (function() {
       };
     };
     var _link = function() {
+      helper.e(".control-layout-order-headerLink").disabled = true;
+      helper.e(".control-layout-order-linkHeader").disabled = true;
       helper.e("[for=control-link-area-width]").setAttribute("disabled", "");
       helper.e(".control-link-area-width").disabled = true;
       helper.e(".control-link-area-width-match").disabled = true;
@@ -2725,6 +2767,8 @@ var control = (function() {
       helper.e(".control-link-sort-letter").disabled = true;
       helper.e(".control-link-sort-icon").disabled = true;
       if (state.get().link.show) {
+        helper.e(".control-layout-order-headerLink").disabled = false;
+        helper.e(".control-layout-order-linkHeader").disabled = false;
         helper.e("[for=control-link-area-width]").removeAttribute("disabled");
         helper.e(".control-link-area-width").disabled = false;
         helper.e(".control-link-area-width-match").disabled = false;

src/js/header.js

@@ -78,16 +78,26 @@ var header = (function() {
   var _renderShade = function() {
     var html = helper.e("html");
     var fontSize = parseInt(getComputedStyle(html).fontSize, 10);
-    var scrollPosition = document.documentElement.scrollTop;
+    var scrollTop = document.documentElement.scrollTop;
+    var scrollHeight = document.documentElement.scrollHeight;
+    var innerHeight = window.innerHeight;
     if (state.get().header.shade.show) {
       if (state.get().header.shade.style == "always") {
         html.style.setProperty("--header-shade-color", "var(--theme-gray-01)");
       } else if (state.get().header.shade.style == "scroll") {
-        if (scrollPosition > (fontSize * 2)) {
+        if (state.get().layout.order == "headerLink") {
+          if (scrollTop > fontSize * 2) {
             html.style.setProperty("--header-shade-color", "var(--theme-gray-01)");
           } else {
             html.style.setProperty("--header-shade-color", "transparent");
           };
+        } else if (state.get().layout.order == "linkHeader") {
+          if (scrollTop < (scrollHeight - innerHeight) - (fontSize * 2)) {
+            html.style.setProperty("--header-shade-color", "var(--theme-gray-01)");
+          } else {
+            html.style.setProperty("--header-shade-color", "transparent");
+          };
+        };
       } else {
         html.style.setProperty("--header-shade-color", "transparent");
       };

src/js/layout.js

@@ -9,6 +9,9 @@ var layout = (function() {
     },
     gutter: function() {
       _renderGutter();
+    },
+    order: function() {
+      _renderOrder();
     }
   };
 
@@ -27,10 +30,23 @@ var layout = (function() {
     html.style.setProperty("--layout-gutter-multiplier", state.get().layout.gutter);
   };
 
+  var _renderOrder = function() {
+    var html = helper.e("html");
+    var layout = helper.e(".layout");
+    var header = helper.e(".header");
+    var link = helper.e(".link");
+    if (state.get().layout.order == "headerLink") {
+      layout.insertBefore(header, link);
+    } else if (state.get().layout.order == "linkHeader") {
+      layout.insertBefore(link, header);
+    };
+  };
+
   var init = function() {
     render.width();
     render.padding();
     render.gutter();
+    render.order();
   };
 
   // exposed methods

src/js/state.js

@@ -171,6 +171,7 @@ var state = (function() {
         horizontal: "center",
         vertical: "center"
       },
+      order: "headerLink",
       padding: 4,
       gutter: 2,
       width: 80,

src/js/update.js

@@ -566,6 +566,12 @@ var update = (function() {
     return data;
   };
 
+  var _update_3210 = function(data) {
+    data.version = "3.21.0";
+    data.state.layout.order = "headerLink";
+    return data;
+  };
+
   // var _update_300 = function(data) {
   //   data.version = 3.00;
   //   return data;
@@ -708,6 +714,10 @@ var update = (function() {
         console.log("\t= running update 3.20.0");
         data = _update_3200(data);
       };
+      if (version.compare(data.version, "3.21.0") == -1) {
+        console.log("\t= running update 3.21.0");
+        data = _update_3210(data);
+      };
     };
     // if no update is needed
     // version bump

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "3.20.1";
+  var current = "3.21.0";
 
   var compare = function(a, b) {
     var pa = a.split(".");

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