Added box styling to all documentation pages and fixed a cross-browse…

…r navigation margin issue.

public/stylesheets/speclj.css

@@ -9,18 +9,21 @@ white = rgb(238, 238, 238)
 
 
 body {
-	min-width:1000px;
 	background: #EEE;
-	width: 100%;
 }
 
+
 /*/// --------- T Y P O G R A P H Y --------- ///*/
 
 @font-face {
 	font-family: Dekar;
 	src: url('Dekar.otf');
 }
 
+pre {
+	border: 2px solid #ccc;
+}
+
 h1 {
 	color: #333;
 	font-family: 'Rosario', sans-serif;
@@ -58,6 +61,16 @@ h4 {
 	margin: 0 0 1em 0;
 }
 
+h5 {
+	font-family: 'Rosario', sans-serif;
+	font-weight: 400;
+	font-style: normal;
+	color: #444;
+	font-size: .8em;
+	line-height: 1.2em;
+	margin: 0 0 1em 0;
+}
+
 p, ul {
 	font-family: 'Rosario', sans-serif;
 	font-weight: 400;
@@ -66,6 +79,15 @@ p, ul {
 	line-height: 1.333em;
 }
 
+p {
+	margin-bottom: 1em;
+}
+
+code {
+	display: block;
+	margin-bottom: 1em;
+}
+
 ul {
 }
 
@@ -99,116 +121,103 @@ small {
 
 /*/// --------- T O P  S E C T I O N --------- ///*/
 
-div#top {
+div#header {
 	background-color: #111;
-	height: 20em;
 	width: 100%;
 }
 
-div#top .left {
-	height: 20em;
-	width: 500px;
-	float: left;
+div#head_body {
+	height: 6.8em;
+	width: 900px;
+	margin: 0px auto;
+	padding: 30px;
 }
 
-div#top .right {
-	position: relative;
+div#header img {
 	float: left;
-	height: 20em;
-	width: 500px;
+	width: 16em;
+	margin-left: 87px;
 }
 
-div#top .right p {
+div#header p {
+	position: relative;
+	top: 23px;
+	right: -40px;
 	color: rgb(238, 238, 238);
 	letter-spacing: 2px;
 	line-height: 1.333em;
 	font-family: 'Rosario', sans-serif;
 	font-weight: 400;
 	font-style: italic;
 	font-size: 1.777em;
-	padding: 0 0 0 1.5em;
-	position: absolute;
-	top: 4.5em;
-	left: 0em;
-	text-align: right;
-	width: 450px;
 }
 
-div#top div.right h4 {
-	color: rgb(88, 129, 215);;
-	position: absolute;
-	top: 10.5em;
-	right: 6.8em;
-	letter-spacing: 2px;
+div#header p abbr {
+	color: rgb(238, 238, 238);
 }
 
-div#top div.left img.logo {
-	position: absolute;
-	top: 130px;
-	left: 100px;
-	width: 40px;
+div#header h4 {
+	position: relative;
+	top: -5px;
+	right: -40px;
+	color: rgb(88, 129, 215);;
+	letter-spacing: 2px;
 }
 
-div#top div.left img.speclj {
-	border-right: 2px dotted #222;
-	padding: 0 3em 0 0;
-	margin: 6em 0 0 12em;
-	width: 350px;
-}
+/*/// --------- M A I N  S E C T I O N --------- ///*/
 
-div#top abbr {
-	color: rgb(238, 238, 238);
-	border-bottom: 2px dotted #222;
-
+div#main_body {
+	width: 900px;
+	margin: 50px auto 0px auto;
 }
 
-/*/// --------- B O T T O M  S E C T I O N --------- ///*/
-
-div#bottom {
-	width: 1000px;
+div#comp_box {
+	background-color: #F8F8F8;
+	border: 1px solid #ddd;
+	padding: 1.5em;
+	margin-bottom: 1em;
 }
 
 /*/// --------- N A V I G A T I O N --------- ///*/
 
-div#bottom nav {
+div#nav {
 	font-family: 'Rosario', sans-serif;
 	color: #444;
-	margin: 3em 0 999999em 5.5em;
-}
-
-div#bottom nav {
+	margin: 3.7em 1em 2em 5.5em;
 	float: left;
-	width: 160px;
+	width: 280px;
 }
 
-div#bottom ul li {
+div#nav ul li {
 	margin: .25em 0;
+	list-style-type: none;
 }
 
+div#nav ul li ul {
+	margin-left: 1em;
+}
 
-/*/// --------- I N T R O --------- ///*/
+/*/// --------- C O N T E N T --------- ///*/
 
-section.intro {
+div#content {
+	margin-top: 3.7em;
+	margin-bottom: 2em;
 	float: left;
-	margin: 3.5em 0;
-	width: 600px;
+	width: 500px;
 }
 
-section.intro h2 a {
-	color: rgb(88, 129, 215);
+div#lein_install {
+	margin-top: 2em;
 }
 
-section.intro h2 a:hover {
-	color: #333;
+div#man_install {
+	margin-top: 2em;
 }
 
+/*/// --------- B O T T O M  S E C T I O N --------- ///*/
 
-div#body h3 {
-	margin: 1em 0 .8em 0;
-}
-
-div#footer {
-	margin-top: 3em;
-	margin-bottom: 1em;
+div#foot_body {
+	width: 900px;
+	margin: 0 auto 5em auto;
 	text-align: center;
-}
+}

public/stylesheets/speclj_main.css

@@ -183,7 +183,7 @@ div#comp_box {
 div#nav {
 	font-family: 'Rosario', sans-serif;
 	color: #444;
-	margin: 3.7em 1em 999em 5.5em;
+	margin: 3.7em 1em 2em 5.5em;
 	float: left;
 	width: 280px;
 }
@@ -214,6 +214,16 @@ div#man_install {
 	margin-top: 2em;
 }
 
+div#float_pic1 {
+	margin: 0 20px 20px 40px;
+	float: left;
+}
+
+div#float_pic2 {
+	margin: 0 40px 50px 20px;
+	float: left;
+}
+
 /*/// --------- B O T T O M  S E C T I O N --------- ///*/
 
 div#foot_body {

src/speclj_www/view/community.hiccup.clj

@@ -7,12 +7,10 @@
 [:h4 "Contributing"]
 [:p "To contribute to the Speclj project, all you have to do is clone the master branch, build, and run all the tests. If you have <a href=\"https://github.com/technomancy/leiningen\" target=\"_blank\">Leiningen</a> and <a href=\"http://git-scm.com\" target=\"_blank\">Git</a>, you can do that by running the following commands from your terminal:"]
 
-[:code "
-<pre>git clone https://github.com/slagyr/speclj.git
-cd speclj
-lein javac
-lein spec
-</pre>"]
+[:code "git clone https://github.com/slagyr/speclj.git<br />
+cd speclj<br />
+lein javac<br />
+lein spec"]
 
 [:p "Then you can make patches and submit them via pull requests on <a href=\"https://github.com/slagyr/speclj\" target=\"blank\">Speclj's GitHub Repo</a>"]
 

src/speclj_www/view/docs/after.hiccup.clj

@@ -1,6 +1,6 @@
 [:h3 "after"]
 
-[:p "Declares a function that is invoked after each characteristic in the containing describe scope is evaluated. The body may consist of any forms, presumably ones that perform side effects."]
+[:div {:id "comp_box"}
+  [:p "Declares a function that is invoked after each characteristic in the containing describe scope is evaluated. The body may consist of any forms, presumably ones that perform side effects."]
 
-[:code "
-<pre>(after (println \"A spec has just been evaluated\"))</pre>"]
+  [:code "(after (println \"A spec has just been evaluated\"))"]]

src/speclj_www/view/docs/after_all.hiccup.clj

@@ -1,6 +1,6 @@
 [:h3 "after-all"]
 
-[:p "Declares a function that is invoked once after all the characteristics in the containing describe scope have been evaluated. The body may consist of any forms, presumably ones that perform side effects."]
+[:div {:id "comp_box"}
+  [:p "Declares a function that is invoked once after all the characteristics in the containing describe scope have been evaluated. The body may consist of any forms, presumably ones that perform side effects."]
 
-[:code "
-<pre>(after-all (println \"That's all folks.\"))</pre>"]
+  [:code "(after-all (println \"That's all folks.\"))"]]

src/speclj_www/view/docs/around.hiccup.clj

@@ -1,13 +1,13 @@
 [:h3 "around"]
 
-[:p "Declares a function that will be invoked around each characteristic of the containing describe scope. The characteristic will be passed in and the around function is responsible for invoking it."]
-
-[:code "
-<pre>(declare *the-answer*) ; outside of a describe
-
-(around [it]
-  (binding [*the-answer* 42]
-    (it)))
-
-(it \"knows the answer\"
-  (should= 42 *the-answer*))</pre>"]
+[:div {:id "comp_box"}
+  [:p "Declares a function that will be invoked around each characteristic of the containing describe scope. The characteristic will be passed in and the around function is responsible for invoking it."]
+
+  [:code "(declare *the-answer*) ; outside of a describe<br />
+    <br />
+    (around [it]<br />
+    &nbsp;&nbsp;(binding [*the-answer* 42]<br />
+    &nbsp;&nbsp;&nbsp;&nbsp;(it)))<br />
+    <br />
+    (it \"knows the answer\"<br />
+    &nbsp;&nbsp;(should= 42 *the-answer*))"]]

src/speclj_www/view/docs/before.hiccup.clj

@@ -1,6 +1,6 @@
 [:h3 "before"]
 
-[:p "Declares a function that is invoked before each characteristic in the containing describe scope is evaluated. The body may consist of any forms, presumably ones that perform side effects."]
+[:div {:id "comp_box"}
+  [:p "Declares a function that is invoked before each characteristic in the containing describe scope is evaluated. The body may consist of any forms, presumably ones that perform side effects."]
 
-[:code "
-<pre>(before (println \"A spec is about to be evaluated\"))</pre>"]
+  [:code "(before (println \"A spec is about to be evaluated\"))"]]

src/speclj_www/view/docs/before_all.hiccup.clj

@@ -1,6 +1,6 @@
 [:h3 "before-all"]
 
-[:p "Declares a function that is invoked once before any characteristic in the containing describe scope is evaluated. The body may consist of any forms, presumably ones that perform side effects."]
+[:div {:id "comp_box"}
+  [:p "Declares a function that is invoked once before any characteristic in the containing describe scope is evaluated. The body may consist of any forms, presumably ones that perform side effects."]
 
-[:code "
-<pre>(before-all (println \"May the spec'ing begin!\"))</pre>"]
+  [:code "(before-all (println \"May the spec'ing begin!\"))"]]

src/speclj_www/view/docs/describe.hiccup.clj

@@ -5,5 +5,5 @@
   [:p "Declares a new spec. The body can contain any forms that evaluate to spec compoenents (it, before, after, with ...)."]
 
   [:code "(describe \"Calculator\"<br />
-&nbsp;&nbsp;... ; spec components<br />
-)"]]
+    &nbsp;&nbsp;... ; spec components<br />
+    )"]]

src/speclj_www/view/docs/index.hiccup.clj

@@ -1,3 +1,3 @@
 [:h3 "Documentation"]
 
-[:p "Here you can review all of the Speclj Components in detail. Click the sidebar to start."]
+[:p "This documentation covers each Speclj component individually. Use this section as a reference. If you are new to Speclj and want to learn how to use it, you will benefit more from the <a href=\"/tutorial\">Tutorial</a> section. Otherwise click the links in the sidebar to see the documentation of each Speclj component."]

src/speclj_www/view/docs/it.hiccup.clj

@@ -1,7 +1,7 @@
 [:h3 "it"]
 
-[:p "Declares a new characteristic (example in rspec). The first parameter name should be a string the describes the characteristic. The second parameter body may be any forms but aught to have at least one should assertion."]
+[:div {:id "comp_box"}
+  [:p "Declares a new characteristic (example in rspec). The first parameter name should be a string the describes the characteristic. The second parameter body may be any forms but aught to have at least one should assertion."]
 
-[:code "
-<pre>(it \"adds numbers\"
-  (should= 2 (+ 1 1)))</pre>"]
+  [:code "(it \"adds numbers\"<br />
+    &nbsp;&nbsp;(should= 2 (+ 1 1)))</pre>"]]

src/speclj_www/view/docs/should.hiccup.clj

@@ -1,7 +1,7 @@
 [:h3 "should"]
 
-[:p "Asserts the truthy-ness of a form."]
+[:div {:id "comp_box"}
+  [:p "Asserts the truthy-ness of a form."]
 
-[:code "
-<pre>(should true) ; passes
-(should false) ; fails</pre>"]
+  [:code "(should true) ; passes<br />
+    (should false) ; fails</pre>"]]