added content-list

docs/index.html

@@ -84,7 +84,7 @@ <h1>Water.css</h1>
       Now you can write your simple static site with nice semantic html, and Water.css will manage
       the styling for you.
     </p>
-
+  
     <div class="row">
       <div>
         <a href="#installation"><b>Get it already!</b></a>
@@ -108,6 +108,35 @@ <h1>Water.css</h1>
       </a>
     </div>
 
+   <div class="content-container">
+
+     <div class="content-list">
+
+     <ul>
+      <h4>content-list</h4>
+    <a href="#installation"> <li>Installation</li></a>
+
+    <a href="#goals"> <li>Goals</li></a>
+    <a href="#demo"><li>Element demos</li></a>
+   <a href="#code"><li>Code</li></a> 
+   <a href="#typography"> <li>Typography</li></a> 
+
+
+
+     </ul>
+
+
+     </div>
+
+
+
+
+   </div>
+
+
+
+
+
     <h2>Installation</h2>
     <div id="installation">
       <header class="row">

docs/script.js

@@ -86,3 +86,13 @@ document.getElementById('dialog-trigger').addEventListener('click', () => {
 document.getElementById('dialog').addEventListener('close', (event) => {
   document.getElementById('dialog-result').innerText = `Your answer: ${event.target.returnValue}`
 })
+
+// hide content-list on small screen size
+const screenSize = window.innerWidth
+const contentContainer = document.querySelector('.content-container')
+
+if (screenSize < 1200) {
+  contentContainer.style.display = 'none'
+} else {
+  contentContainer.style.display = 'block'
+}

docs/style.css

@@ -63,3 +63,24 @@ body > footer {
   align-items: center;
   justify-content: space-between;
 }
+
+.content-container {
+  position: fixed;
+}
+
+.content-list {
+  position: absolute;
+  top: -131px;
+  left: -194px;
+}
+
+.content-list li,
+.content-list a {
+  list-style: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.content-list li:hover {
+  color: black;
+}