Merge pull request #259 from kfrn/gh-pages

Styling changes

css/css.css

@@ -1,5 +1,4 @@
 html, body {
-  font-size: 16px;
   line-height: 1.5;
   color: #888888;
   background-color: #060606;
@@ -57,6 +56,13 @@ html, body {
   }
 }
 
+@media only screen and (min-width: 1500px) {
+  .grid {
+    max-width: 70%;
+    margin: 0 auto;
+  }
+}
+
 a {
   color: #91cf91;
 }
@@ -84,7 +90,13 @@ h1 {
 }
 
 h2 {
-  font-size: 2.5em;
+  font-size: 1.5em;
+  margin: 5px 8px 8px 8px;
+}
+
+.heading {
+  font-size: 2em;
+  margin: 6px 0px 12px 0px;
 }
 
 h3 {
@@ -179,7 +191,7 @@ button {
 .contents-list {
   color: white;
   border: 1px solid black;
-  background-color: dimgrey;
+  background-color: #383838;
   padding: 14px;
   font-family: "Montserrat";
   font-weight: bold;

index.html

@@ -20,7 +20,7 @@
   </div>
 
   <nav class="sidebar">
-    <h2>Table of Contents</h2>
+    <h2 class="heading">Table of Contents</h2>
     <p class="link"></p>
     <a href="#about"><div class="contents-list">About this resource</div></a>
     <a href="#basics"><div class="contents-list">FFmpeg basics</div></a>
@@ -47,7 +47,7 @@
 
   <div class="content">
   <div class="well">
-    <h2 id="about">About ffmprovisr</h2>
+    <h2 class="heading">About ffmprovisr</h2>
     <span class="intro-lead">Making FFmpeg Easier</span>
     <p>FFmpeg is a powerful tool for manipulating audiovisual files. Unfortunately, it also has a steep learning curve, especially for users unfamiliar with a command line interface. This app helps users through the command generation process so that more people can reap the benefits of FFmpeg.</p>
     <p>Each button displays helpful information about how to perform a wide variety of tasks using FFmpeg. To use this site, click on the task you would like to perform. A new window will open up with a sample command and a description of how that command works. You can copy this command and understand how the command works with a breakdown of each of the flags.</p>