Improve basic demo

jadjoubran · jadjoubran · commit 04fa0d0405fc · 2018-12-06T15:13:42.000+01:00
diff --git a/demos/basic.html b/demos/basic.html
@@ -9,17 +9,31 @@
     <script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
 </head>
 <body>
-    <a href="../test/1.html">Link 1</a>
-    <a href="../test/2.html">Link 2</a>
-    <a href="../test/3.html">Link 3</a>
-    <section id="stuff">
-        <a href="../test/main.css">CSS</a>
-    </section>
-    <a href="../test/4.html" style="position:absolute;margin-top:900px;">Link 4</a>
-    <div style="height:800px; width:800px;">test</div>
+    <div class="screen">
+      <h1>Basic demo</h1>
+      <a href="../test/1.html">Link 1</a>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      <a href="../test/2.html">Link 2</a>
+    </div>
+    <div class="screen">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, quos?
+      <a href="../test/3.html">Link 3</a>
+        <section id="stuff">
+          <a href="../test/main.css">CSS</a>
+        </section>
+    </div>
+    <div class="screen">
+      <a href="../test/4.html">Link 4</a>
+    </div>
     <script src="../dist/quicklink.umd.js"></script>
     <script>
         quicklink();
     </script>
 </body>
-</html>
+</html>
+
diff --git a/test/main.css b/test/main.css
@@ -1,3 +1,7 @@
 body {
-    font-family: Roboto, Arial, sans-serif;   
-}
+  font-family: Roboto, Arial, sans-serif;
+}
+
+.screen {
+  height: 100vh;
+}
