Include table of contents; minor style changes

faq.html

@@ -4,6 +4,7 @@
     <meta content='width=device-width, initial-scale=1.0' name='viewport'>
     <meta charset='UTF-8'>
     <link href='http://fonts.googleapis.com/css?family=Volkhov:400,400italic' rel='stylesheet' type='text/css'>
+    <script src='js/jquery-1.12.2.min.js' type='text/javascript'></script>
     <title>FAQ | Loop Habit Tracker</title>
     <link href='reset.css' rel='stylesheet' type='text/css'>
     <link href='main.css' rel='stylesheet' type='text/css'>
@@ -14,6 +15,9 @@
       
       <h2>Frequently Asked Questions</h2>
       
+      <div id="toc">
+      </div>
+      
       <h4>How can I track bad habits I want to break?</h4>
       
       <p>It is probably a better idea to rephrase your habit in a positive way. For
@@ -82,6 +86,18 @@
       <h4>My question was not answered in this FAQ. What should I do?</h4>
       
       <p>Please, feel free to contact the developer at <a href="mailto:isoron@gmail.com">isoron@gmail.com</a>. </p>
+      
+      <script type="text/javascript">
+          $("#toc").append('<ul>')
+          $("h3, h4").each(function(i) {
+              var current = $(this);
+              current.attr("id", "title" + i);
+              $("#toc").append("<li><a id='link" + i + "' href='#title" +
+                  i + "' title='" + current.attr("tagName") + "'>" + 
+                  current.html() + "</a></li>");
+          });
+          $("#toc").append("</ul>");
+      </script>
     </div>
     <div class='footer'>
       Powered by
@@ -90,7 +106,7 @@
       <a href='http://sass-lang.com/'>sass</a>
       <br>
       Last update:
-      2016-03-19
+      2016-03-25
     </div>
   </body>
 </html>

main.css

@@ -1,22 +1,14 @@
 body {
-  font-size: 100%;
+  font-size: 14px;
   font-family: verdana, sans-serif;
-  line-height: 24.7px;
+  line-height: 21px;
   background-color: #fff;
   margin: 0px;
   padding: 0px;
   color: #212121; }
 
-.portrait {
-  float: right;
-  border: 1px solid #ccc;
-  padding: 2px;
-  width: 180px;
-  margin-top: 57px;
-  margin-left: 38px; }
-
 .content {
-  max-width: 800px;
+  max-width: 700px;
   margin: 0px auto;
   padding: 1% 5% 5% 5%;
   background-color: #fff; }
@@ -32,7 +24,6 @@ a {
     border-bottom: 1px dotted #069; }
 
 h1, h2, h3, h4, h5, h6 {
-  color: #069;
   font-weight: normal; }
 
 .footer {
@@ -51,6 +42,7 @@ h2 {
   font-size: 23.75px; }
 
 h3, h4 {
-  font-size: 20.9px; }
+  font-size: 20.9px;
+  line-height: 24.7px; }
 
 /*# sourceMappingURL=main.css.map */

main.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAOA,IAAI;EACF,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,mBAAO;EACpB,WAAW,EAAE,MAAM;EACnB,gBAAgB,EATT,IAAI;EAUX,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,GAAG;EACZ,KAAK,EAXE,OAAO;;AAahB,SAAS;EACP,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,cAAc;EACtB,OAAO,EAAE,GAAG;EACZ,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,IAAI;;AAEnB,QAAQ;EACN,SAAS,EAAE,KAAK;EAChB,MAAM,EAAE,QAAQ;EAChB,OAAO,EAAE,WAAW;EACpB,gBAAgB,EA1BT,IAAI;;AA4Bb,QAAQ;EACN,UAAU,EAAE,+BAA+B;;AAE7C,CAAC;EACC,KAAK,EAlCE,IAAI;EAmCX,eAAe,EAAE,IAAI;EACrB,aAAa,EAAE,eAAe;EAC9B,OAAO;IACL,aAAa,EAAE,eAAkB;;AAErC,sBAAiB;EACf,KAAK,EAzCE,IAAI;EA0CX,WAAW,EAAE,MAAM;;AAErB,OAAO;EACL,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,MAAM;EACf,OAAO,EAAE,GAAG;;AAEd,EAAE;EACA,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,MAAM;;AAEpB,EAAE;EACA,UAAU,EAAE,OAAO;EACnB,WAAW,EAAE,IAAI;EACjB,SAAS,EAAE,OAAO;;AAEpB,MAAK;EACH,SAAS,EAAE,MAAM",
+"mappings": "AAOA,IAAI;EACF,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,mBAAO;EACpB,WAAW,EAAE,IAAI;EACjB,gBAAgB,EATT,IAAI;EAUX,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,GAAG;EACZ,KAAK,EAXE,OAAO;;AAahB,QAAQ;EACN,SAAS,EAAE,KAAK;EAChB,MAAM,EAAE,QAAQ;EAChB,OAAO,EAAE,WAAW;EACpB,gBAAgB,EAlBT,IAAI;;AAoBb,QAAQ;EACN,UAAU,EAAE,+BAA+B;;AAE7C,CAAC;EACC,KAAK,EA1BE,IAAI;EA2BX,eAAe,EAAE,IAAI;EACrB,aAAa,EAAE,eAAe;EAC9B,OAAO;IACL,aAAa,EAAE,eAAkB;;AAErC,sBAAiB;EACf,WAAW,EAAE,MAAM;;AAErB,OAAO;EACL,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,MAAM;EACf,OAAO,EAAE,GAAG;;AAEd,EAAE;EACA,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,MAAM;;AAEpB,EAAE;EACA,UAAU,EAAE,OAAO;EACnB,WAAW,EAAE,IAAI;EACjB,SAAS,EAAE,OAAO;;AAEpB,MAAK;EACH,SAAS,EAAE,MAAM;EACjB,WAAW,EAAE,MAAM",
 "sources": ["../src/main.sass"],
 "names": [],
 "file": "main.css"