Add margins to headers and blocks

3 files changed, 41 insertions, 5 deletions

diff --git a/assets/styles.css b/assets/styles.css
index 9bc41ac..67ffd79 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -8,8 +8,21 @@ body {
 	font: 19px "Georgia", serif;
 }
 header h1 { display: none; }
+h2 {
+    margin-top: 1.2em;
+    margin-bottom: 0.4em;
+}
+p {
+	margin-top: 0.8em;
+	margin-bottom: 0.8em;
+}
+.content {
+	width: 640px;
+	margin-left: 11%;
+}
 .code-block {
 	padding: 12px 16px;
+	overflow: auto;
     border: solid 2px #8c6e6e;
 	border-radius: 6px;
 	box-shadow: inset 1px 1px 10px #402929;
@@ -17,6 +30,9 @@ header h1 { display: none; }
 	color: #c9ccb4;
 	text-shadow: 1px 3px 5px #230f0f;
 }
+.margin-bottom-1\.8 {
+	margin-bottom: 1.8em;
+}
 h1, h2, h3, h4, h5, h6 {
 	font-family: "Lucida Grande", "Lucida Sans Unicode", Geneva, sans-serif;
 }
diff --git a/assets/stylesheets/layout.hcss b/assets/stylesheets/layout.hcss
index 5605ce5..b9b6ef1 100644
--- a/assets/stylesheets/layout.hcss
+++ b/assets/stylesheets/layout.hcss
@@ -7,8 +7,24 @@ body {
 
 header h1 { display: none; }
 
+h2 {
+    margin-top: 1.2em;
+    margin-bottom: 0.4em;
+}
+
+p {
+	margin-top: 0.8em;
+	margin-bottom: 0.8em;
+}
+
+.content {
+	width: 640px;
+	margin-left: 11%;
+}
+
 .code-block {
 	padding: 12px 16px;
+	overflow: auto;
 
     border: solid 2px #8c6e6e;
 	border-radius: 6px;
@@ -18,3 +34,7 @@ header h1 { display: none; }
 	color: #c9ccb4;
 	text-shadow: 1px 3px 5px #230f0f;
 }
+
+.margin-bottom-1\.8 {
+	margin-bottom: 1.8em;
+}
diff --git a/index.html b/index.html
index ba539b8..4421e03 100644
--- a/index.html
+++ b/index.html
@@ -28,13 +28,13 @@
 		<h2>Examples</h2>
 
 		<p>Video controls:</p>
-		<pre class="code code-block">
+		<pre class="code code-block margin-bottom-1.8">
 map &lt;Up&gt; &lt;Left&gt;
 map &lt;Play&gt; &lt;Space&gt;
 map &lt;Down&gt; &lt;Right&gt;</pre>
 
 		<p>Preserve volume buttons and include video controls in a mode:</p>
-		<pre class="code code-block">
+		<pre class="code code-block margin-bottom-1.8">
 # Don't launch iTunes when pressing the middle button
 map &lt;Play&gt; &lt;Nop&gt;
 
@@ -45,18 +45,18 @@ mode &lt;Play&gt;&lt;Play&gt; {
 }</pre>
 
 		<p>Application switcher:</p>
-		<pre class="code code-block">
+		<pre class="code code-block margin-bottom-1.8">
 map &lt;Up&gt; &lt;D-S-Tab&gt;
 map &lt;Down&gt; &lt;D-Tab&gt;</pre>
 
 		<p>Open frequently used applications:</p>
-		<pre class="code code-block">
+		<pre class="code code-block margin-bottom-1.8">
 cmd &lt;Up&gt;   open -a Terminal
 cmd &lt;Play&gt; open -a Xcode
 cmd &lt;Down&gt; open -a Firefox</pre>
 
 		<p>Open Terminal window #2:</p>
-		<pre class="code code-block">
+		<pre class="code code-block margin-bottom-1.8">
 cmd &lt;Play&gt; osascript -e 'activate application "Terminal"' -e 'tell application "System Events" to keystroke "2" using command down'</pre>
 	</div>
 </body>