[feature] adding scroll past end control

Author: zombieFox

css/container.css

@@ -35,9 +35,10 @@
  .is-layout-wide .container{
 width:70vw;
  }
- .is-layout-thin .container{
-width:30vw;
- }
+
+ .is-layout-thin .container{
+width:30vw;
+ }
 }
 
 @media (min-width:1600px){}

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 @@ <h1 class="menu-header">Width</h1>
 <labelfor="control-layout-container-thin"><spanclass="label-icon"></span>Thin</label>
 </div>
 </div>
+<divclass="menu-item">
+<h1class="menu-header">Page</h1>
+<divclass="checkbox-wrap">
+<inputid="control-layout-scroll-past-end" class="control-layout-scroll-past-end" type="checkbox" tabindex="1">
+<labelfor="control-layout-scroll-past-end"><spanclass="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);
 };
 
 varupdate=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;
 };
 
 varinit=function(){

js/state.js

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