From 832be3789b5eca5676e5db6d02d49fdd881eb214 Mon Sep 17 00:00:00 2001
From: Thomas Cazade <cazade.thomas@gmail.com>
Date: Fri, 3 Nov 2017 11:48:32 +0100
Subject: [PATCH] Added sumarry

---
 demo.css   |  3 +++
 index.html | 41 ++++++++++++++++++++++++++++++-----------
 2 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/demo.css b/demo.css
index 1bbf4bd..345c00e 100644
--- a/demo.css
+++ b/demo.css
@@ -10,4 +10,7 @@ body {
 .docs {
     margin-top: 2rem;
     margin-bottom: 2rem;
+}
+.summary a {
+    color: #41403e;    
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 97bb9f9..9a7dacc 100644
--- a/index.html
+++ b/index.html
@@ -34,12 +34,31 @@
           <h3>the less formal CSS framework</h3>
         </div>
       </div>
+
       <div class="row flex-center child-borders">
         <a href="#download" class="paper-btn margin">Download</a>
         <a href="#flexbox" class="paper-btn margin">Docs</a>
         <a href="#about" class="paper-btn margin">About</a>
         <a href="https://github.com/rhyneav/papercss" target="_blank" class="paper-btn margin">Github</a>
       </div>
+
+      <h3>Summary:</h3>
+
+      <ul class="summary">
+        <li><a href="#flexbox">Flexbox</a></li>
+        <li><a href="#typography">Typography</a></li>
+        <li><a href="#buttons">Buttons</a></li>
+        <li><a href="#forms">Forms</a></li>
+        <li><a href="#lists">Lists</a></li>
+        <li><a href="#code">Code</a></li>
+        <li><a href="#tables">Tables</a></li>
+        <li><a href="#popovers">Popovers</a></li>
+        <li><a href="#colors">Colors</a></li>
+        <li><a href="#borders">Borders & shadows</a></li>
+        <li><a href="#utilities">Utilities</a></li>
+        <li><a href="#images">Images</a></li>
+        <li><a href="#alerts">Alerts</a></li>
+      </ul>
     </div>
 
     <div id="flexbox" class="section">
@@ -184,7 +203,7 @@
 </pre>
         </div>
     </div>
-    <div class="section">
+    <div id="typography" class="section">
       <h2>Typography</h2>
       <p>How pretty is the text?</p>
       <h1>Heading 1</h1>
@@ -209,7 +228,7 @@
 &lt;p&gt;Lorem ipsum dolor....&lt;/p&gt;</pre>
       </div>
     </div>
-    <div class="section">
+    <div id="buttons" class="section">
       <h2>Buttons</h2>
       <p>Insprired by <a href="https://codepen.io/tmrDevelops/pen/VeRvKX" target="_blank">Imprefect Buttons</a></p>
       <button class="btn-large">Large</button>
@@ -235,7 +254,7 @@
 &lt;/div&gt;</pre>
       </div>
     </div>
-    <div class="section">
+    <div id="forms" class="section">
       <h2>Forms</h2>
       <div class="form-group">
         <label>Input</label>
@@ -330,7 +349,7 @@
 </pre>
       </div>
     </div>
-    <div class="section">
+    <div id="lists" class="section">
       <h2>Lists</h2>
       <h4>Ordered Lists</h4>
       <ol>
@@ -406,7 +425,7 @@
 &lt;!-- Replace ol with ul for unordered lists. Go up to 5 levels deep! --&gt;</pre>
       </div>
     </div>
-    <div class="section">
+    <div id="code" class="section">
       <h2>Code</h2>
       <p>Let's make some pretty <code>&lt;code&gt;</code></p>
       <p>Print files backwards using <kbd>tac</kbd></p>
@@ -427,7 +446,7 @@ function add(x, y) {
 &lt;/pre&gt;</pre>
       </div>
     </div>
-    <div class="section">
+    <div id="tables" class="section">
       <h2>Tables</h2>
       <h4>Regular</h4>
       <table>
@@ -560,7 +579,7 @@ function add(x, y) {
 &lt;table class=&quot;table-alternating&quot;&gt;</pre>
       </div>
     </div>
-    <div class="section">
+    <div id="popovers" class="section">
       <h2>Popovers</h2>
       <h4>Basic usage</h4>
       <p>You can add popovers, also called tooltips, on your elements. popover attribute is the popover text content, popover-position attribute can be: top, left, right, bottom.</p>
@@ -601,7 +620,7 @@ function add(x, y) {
 &lt;button popover="Popover on top" popover-position="top"&gt;Popover on top and on a button!&lt;/button&gt;</pre>
       </div>
     </div>
-    <div class="section">
+    <div id="colors" class="section">
       <h2>Colors</h2>
       <h4>Text</h4>
       <p class="text-primary">Text primary</p>
@@ -636,7 +655,7 @@ function add(x, y) {
 &lt;/div&gt;</pre>
       </div>
     </div>
-    <div class="section">
+    <div id="borders" class="section">
       <h2>Borders &amp; Shadows</h2>
       <h4>Borders</h4>
       <div class="row flex-spaces">
@@ -805,7 +824,7 @@ function add(x, y) {
 &lt;/div&gt;</pre>
       </div>
     </div>
-    <div class="section">
+    <div id="images" class="section">
       <h2>Images</h2>
       <h4>Responsive</h4>
       <p>Images by default are responsive</p>
@@ -840,7 +859,7 @@ function add(x, y) {
 &lt;img src="https://unsplash.it/300" class="no-responsive no-border"&gt;</pre>
       </div>
     </div>
-    <div class="section">
+    <div id="alerts" class="section">
       <h2>Alerts</h2>
       <div class="row flex-spaces">
           <div class="alert alert-primary">