adding

demo-386.scss

@@ -59,6 +59,15 @@ nav {
 }
 
 
+/**
+ *
+ *
+ */
+main {
+    max-width: 960px;
+    margin: 2em auto 0;
+}
+
 /**
  * footer
  *
@@ -66,10 +75,6 @@ nav {
  */
 
 footer {
-    position: absolute;
-    bottom: 0;
-    z-index: -1;
-
     text-align: center;
     font-size: 3rem;
     width: 100%;
@@ -84,13 +89,15 @@ footer {
 
 
 /**
- * panel
+ * section
  *
  *
  */
 
-.panel {
-    padding: 6px 0;
+.section {
+    padding: 4em;
+    margin: 1em 0;
+    line-height: 1.8;
     background-color: $background-contrast-color;
 }
 
@@ -190,8 +197,3 @@ footer {
         }
     }
 }
-
-.section {
-    padding: 6em;
-    line-height: 1.8;
-}

dist/css/demo-386.css

@@ -1,186 +1 @@
-@charset "UTF-8";
-
-/**
- * variables
- *
- */
-
-/**
- * default elements
- *
- */
-
-body {
-  color: #000;
-  background-color: #000084;
-  font-family: "PxPlus IBM VGA8", sans-serif;
-  font-style: normal;
-  font-size: 1.2rem;
-}
-
-*:first-letter {
-  color: #fefe5b;
-}
-
-a {
-  color: #000;
-  text-decoration: none;
-}
-
-/**
- * navigation
- *
- *
- */
-
-nav ul {
-  list-style: none;
-  border: 3px solid #000;
-  margin: 0;
-  padding: 0.6em 0.8em;
-}
-
-nav ul a {
-  display: block;
-  padding: 0.1em;
-  margin: -0.1em;
-}
-
-nav ul a:hover,
-nav ul a.current {
-  color: #fff;
-  background-color: #000;
-}
-
-/**
- * footer
- *
- *
- */
-
-footer {
-  position: absolute;
-  bottom: 0;
-  z-index: -1;
-  text-align: center;
-  font-size: 3rem;
-  width: 100%;
-  background: #000;
-  padding: 0.8em 0;
-}
-
-footer i {
-  color: #fff !important;
-}
-
-/**
- * panel
- *
- *
- */
-
-.panel {
-  padding: 6px 0;
-  background-color: #bbbbbb;
-}
-
-/**
- * icons
- *
- *
- */
-
-[class^=icon-tiny],
-[class*=" icon-tiny"] {
-  font-family: "PxPlus IBM VGA8", sans-serif !important;
-  font-style: normal;
-  color: #fefe5b;
-}
-
-.icon-tiny-hamburger-open,
-.icon-tiny-hamburger-close {
-  position: absolute;
-  top: 3px;
-  transition: transform 0.2s;
-  margin: 3px;
-}
-
-.icon-tiny-hamburger-open:after,
-.icon-tiny-hamburger-close:after {
-  content: "\2BC5";
-}
-
-.icon-tiny-hamburger-open {
-  transform: rotate(0deg);
-}
-
-.icon-tiny-hamburger-close {
-  transform: rotate(180deg);
-}
-
-/**
- * tiny-tiny-hamburger
- *
- *
- */
-
-.tiny-hamburger__inner {
-  padding: 4px 8px 5px;
-}
-
-.tiny-hamburger__modal {
-  height: auto;
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.2s;
-}
-
-.tiny-hamburger__button {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border: none;
-  background: transparent;
-  padding: 0.3em 0.5em;
-}
-
-.tiny-hamburger__button:hover {
-  cursor: pointer;
-  outline: none;
-  background-color: #bbbbbb;
-}
-
-.tiny-hamburger__button:focus {
-  outline: none;
-}
-
-.navbar {
-  position: fixed;
-  width: 100%;
-  text-align: center;
-  background-color: white;
-}
-
-.navbar li {
-  display: inline-block;
-  margin: 0 0.3em;
-}
-
-.navbar li a {
-  display: block;
-  transition: all 0.1s ease-in-out;
-}
-
-.navbar li a:hover {
-  transform: scale(1.3);
-}
-
-.navbar li.current a {
-  transform: scale(1.3);
-}
-
-.section {
-  padding: 6em;
-  line-height: 1.8;
-}
-
+body{color:#000;background-color:#000084;font-family:PxPlus IBM VGA8,sans-serif;font-style:normal;font-size:1.2rem}:first-letter{color:#fefe5b}a{color:#000;text-decoration:none}nav ul{list-style:none;border:3px solid #000;margin:0;padding:.6em .8em}nav ul a{display:block;padding:.1em;margin:-.1em}nav ul a.current,nav ul a:hover{color:#fff;background-color:#000}main{max-width:960px;margin:2em auto 0}footer{text-align:center;font-size:3rem;width:100%;background:#000;padding:.8em 0}footer i{color:#fff!important}.section{padding:4em;margin:1em 0;line-height:1.8;background-color:#bbb}[class*=" icon-tiny"],[class^=icon-tiny]{font-family:PxPlus IBM VGA8,sans-serif!important;font-style:normal;color:#fefe5b}.icon-tiny-hamburger-close,.icon-tiny-hamburger-open{position:absolute;top:3px;transition:transform .2s;margin:3px}.icon-tiny-hamburger-close:after,.icon-tiny-hamburger-open:after{content:"\2BC5"}.icon-tiny-hamburger-open{transform:rotate(0deg)}.icon-tiny-hamburger-close{transform:rotate(180deg)}.tiny-hamburger__inner{padding:4px 8px 5px}.tiny-hamburger__modal{height:auto;max-height:0;overflow:hidden;transition:max-height .2s}.tiny-hamburger__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;padding:.3em .5em}.tiny-hamburger__button:hover{cursor:pointer;outline:none;background-color:#bbb}.tiny-hamburger__button:focus{outline:none}.navbar{position:fixed;width:100%;text-align:center;background-color:#fff}.navbar li{display:inline-block;margin:0 .3em}.navbar li a{display:block;transition:all .1s ease-in-out}.navbar li.current a,.navbar li a:hover{transform:scale(1.3)}

dist/index.html

@@ -11,16 +11,16 @@
     <link href="css/demo-386.css" type="text/css" rel="stylesheet" />
 </head>
 <body>
-    <div class="panel">
-        <tiny-one-page>
-            <nav class="navbar">
-                <ul>
-                    <li><a href="#one">One</a></li>
-                    <li><a href="#two">Two</a></li>
-                    <li><a href="#three">Three</a></li>
-                </ul>
-            </nav>
-        </tiny-one-page>
+    <tiny-one-page>
+        <nav class="navbar">
+            <ul>
+                <li><a href="#one">One</a></li>
+                <li><a href="#two">Two</a></li>
+                <li><a href="#three">Three</a></li>
+            </ul>
+        </nav>
+    </tiny-one-page>
+    <main>
         <section id="one" class="section">
             <h2>One</h2>
             <p>
@@ -57,9 +57,9 @@
                 DIY neutra kinfolk cold-pressed. Taxidermy cold-pressed meh glossier disrupt, synth wayfarers portland kogi paleo organic squid. Put a bird on it bicycle rights banh mi biodiesel bitters cornhole gochujang chicharrones umami hell of quinoa kogi tousled cardigan poutine. Jianbing 90's kogi poke, af edison bulb cray hella everyday carry chicharrones bitters tote bag ennui asymmetrical. Salvia listicle etsy taxidermy mlkshk, dreamcatcher humblebrag banjo chambray fanny pack before they sold out ethical. Hot chicken cronut tilde, kale chips fixie ethical waistcoat small batch succulents hella.
             </p>
         </section>
-    </div>
+    </main>
     <footer>
-        <a target="_blank" href="https://github.com/HerrHase/tiny-hamburger">
+        <a target="_blank" href="https://github.com/HerrHase/tiny-one-page">
             <i class="icon icon-github"></i>
         </a>
     </footer>

src/TinyOnePage.riot

@@ -133,7 +133,7 @@
                         result = target;
 
                         // check if the next element is showing up
-                        if (next && window.pageYOffset > offsetTop && next.offsetTop > window.pageYOffset && next.offsetTop < (window.pageYOffset + 800)) {
+                        if (next && offsetTop < window.pageYOffset && next.offsetTop > window.pageYOffset && next.offsetTop < (window.pageYOffset + (window.innerHeight / 2))) {
                             result = next;
                         }
                     }