Better styling

Author: tbranyen

index.html

@@ -149,16 +149,19 @@ <h4>Properties:</h4>
                   </ul>
 
                   <h4>Functions:</h4>
-                  <ul class="functions inner-block">
                     {%if not functions.length%}
+                  <ul class="functions inner-block">
                     <li>No functions available.</li>
+                  </ul>
                     {%endif%}
                     {%each functions as function%}
+                  <ul class="functions inner-block">
                     <li id="{{jsClassName}}/function/{{function.jsFunctionName}}">
-                      <strong class="{%if not function.ignore%}is{%else%}not{%endif%} added">{{jsClassName}}#</strong><strong class="method">{{function.jsFunctionName}}</strong>
 {%if function.isConstructorMethod%}
+                      <strong class="cName">{{jsClassName}}.</strong><strong class="name">{{function.jsFunctionName}}</strong>
 <pre class="function language-javascript"><code>{{ jsClassName }}.{{ function.jsFunctionName }}({%each function.args|realArgs as arg%}{{arg.name|addComma arg i}}{%endeach%});</code></pre>
 {%else%}
+                      <strong class="cName">{{jsClassName}}#</strong><strong class="name">{{function.jsFunctionName}}</strong>
 <pre class="function language-javascript">
 <code>var {{ jsClassName|toCamelCase }} = new {{ jsClassName }}();
 {{ jsClassName|toCamelCase }}.{{ function.jsFunctionName }}({%each function.args|realArgs as arg%}{{arg.name|addComma arg i }}{%endeach%});
@@ -209,8 +212,8 @@ <h4>Returns:</h4>
                         {%endif%}
                       </div>
                     </li>
-                    {%endeach%}
                   </ul>
+                  {%endeach%}
                 </li>
               </ul>
             </div>

styles/api.css

@@ -140,6 +140,19 @@ ul.api-contents table h3 {
   list-style: none;
 }
 
+.api-content .inner-block strong.cName,
+.api-content .inner-block strong.name {
+  font-size: 22px;
+  display: inline-block;
+  padding-bottom: 15px;
+  color: #3D3D3D;
+}
+
+.api-content .inner-block strong.cName {
+  color: #C9C9C9;
+  font-weight: normal;
+}
+
 .api-content .inner-block h3 {
   margin-top: 0px;
 }