[feature] adding scroll past end control

css/container.css

@@ -35,6 +35,7 @@
   .is-layout-wide .container {
     width: 70vw;
   }
+
   .is-layout-thin .container {
     width: 30vw;
   }

css/link.css

@@ -1,9 +1,13 @@
 .link {
-  margin-bottom: 50vh;
+  margin-bottom: 2em;
   width: 100vw;
   z-index: 1;
 }
 
+.is-scroll-past-end .link {
+  margin-bottom: 60vh;
+}
+
 .link-area {
   width: 100%;
   display: grid;
@@ -27,7 +31,6 @@
   grid-template-columns: repeat(2, 1fr);
 }
 
-
 .link-item {
   width: 100%;
   height: var(--link-height);

index.html

@@ -241,6 +241,13 @@
               <label for="control-layout-container-thin"><span class="label-icon"></span>Thin</label>
             </div>
           </div>
+          <div class="menu-item">
+            <h1 class="menu-header">Page</h1>
+            <div class="checkbox-wrap">
+              <input id="control-layout-scroll-past-end" class="control-layout-scroll-past-end" type="checkbox" tabindex="1">
+              <label for="control-layout-scroll-past-end"><span class="label-icon"></span>Scroll past end</label>
+            </div>
+          </div>
         </div>
       </div>
     </div>

js/control.js

@@ -67,10 +67,15 @@ var control = (function() {
       view[state.get().link.style]();
     };
     var _layout = function() {
-      helper.removeClass(html, "is-layout-fludi");
+      helper.removeClass(html, "is-layout-fluid");
       helper.removeClass(html, "is-layout-wide");
       helper.removeClass(html, "is-layout-thin");
       helper.addClass(html, "is-layout-" + state.get().layout.container);
+      if (state.get().layout.scrollPastEnd) {
+        helper.addClass(html, "is-scroll-past-end");
+      } else {
+        helper.removeClass(html, "is-scroll-past-end");
+      };
     };
     var _editAdd = function() {
       if (state.get().header.editAdd.active) {
@@ -344,6 +349,14 @@ var control = (function() {
         data.save();
       }, false);
     });
+    helper.e(".control-layout-scroll-past-end").addEventListener("change", function() {
+      state.change({
+        path: "layout.scrollPastEnd",
+        value: this.checked
+      });
+      render();
+      data.save();
+    }, false);
   };
 
   var update = function() {
@@ -366,6 +379,7 @@ var control = (function() {
     helper.e(".control-header-accent-active").checked = state.get().header.accent.active;
     helper.e(".control-layout-alignment-" + state.get().layout.alignment).checked = true;
     helper.e(".control-layout-container-" + state.get().layout.container).checked = true;
+    helper.e(".control-layout-scroll-past-end").checked = state.get().layout.scrollPastEnd;
   };
 
   var init = function() {

js/state.js

@@ -52,6 +52,7 @@ var state = (function() {
     layout: {
       alignment: "left",
       container: "wide",
+      scrollPastEnd: true,
       theme: {
         r: 0,
         g: 255,