Restructure individual license pages, added styles to improve alignment

_includes/sidebar.html

@@ -2,22 +2,6 @@
 
   <a href="#" data-clipboard-target="#license-text" data-proofer-ignore="true" class="js-clipboard-button button">Copy license text to clipboard</a>
     
-  <div class="license-description">
-    <h3>Description</h3>
-    <p>
-      {{ page.description }}
-    </p>
-  </div>
-  
-  {% if page.nickname %}
-  <div class="license-nickname">
-    <h3>Nickname</h3>
-    <p>
-      {{ page.nickname }}
-    </p>
-  </div>
-  {% endif %}
-  
   <div class="how-to-apply">
     <h3>How to apply this license</h3>
     <p>
@@ -38,27 +22,6 @@
   </div>
   {% endif %}
 
-  <div class="license-rules license-rules-sidebar">
-
-  {% assign types = "permissions|conditions|limitations" | split: "|" %}
-  {% for type in types %}
-    <h3>{{ type | capitalize }}</h3>
-    <ul class="license-{{ type }}">
-      {% assign rules = site.data.rules[type] | sort: "label" %}
-      {% for rule_obj in rules %}
-        {% assign req = rule_obj.tag %}
-        {% if page[type] contains req %}
-          <li class="{{ req }}">
-            <span class="license-sprite"></span>
-            {{ rule_obj.label }}
-          </li>
-        {% endif %}
-      {% endfor %}
-    </ul>
-  {% endfor %}
-
-  </div>
-
   {% if page.using %}
   <div class="projects-with-license">
     <h3>Who's using this license?</h3>

_layouts/license.html

@@ -1,8 +1,54 @@
 {% include header.html %}
 
       <div class="clearfix">
+      
         <div class="license-body">
+        
+            {% if page.nickname %}
+            <p class="license-nickname">
+                {{ page.nickname }}
+            </p>
+            {% endif %}
+
+            <p>
+                {{ page.description }}
+            </p>
+            
+            <div class="license-page-details">
+            
+              <table class="license-rules">
+                <tr>
+                {% assign types = "permissions|conditions|limitations" | split: "|" %}
+                {% for type in types %}
+                  <th class="label">{{ type | capitalize }}</th>
+                {% endfor %}
+                </tr>
+                <tr>
+                  {% for type in types %}
+                    <td>
+                      <ul class="license-{{ type }}">
+                        {% assign rules = site.data.rules[type] | sort: "label" %}
+                        {% for rule_obj in rules %}
+                          {% assign req = rule_obj.tag %}
+                          {% if page[type] contains req %}
+                            <li class="{{ req }}">
+                              <span class="license-sprite"></span>
+                              {{ rule_obj.label }}
+                            </li>
+                          {% endif %}
+                        {% endfor %}
+                      </ul>
+                    </td>
+                  {% endfor %}
+                </tr>
+              </table>
+              
+            </div>
+            
+            <h3>License Text</h3>
+
             <pre id="license-text">{{ content | replace:"<", "&lt;" | replace:">", "&gt;" }}</pre>
+          
         </div> <!-- /license-body -->
 
 {% include sidebar.html %}

assets/css/application.scss

@@ -163,6 +163,12 @@ strong {
   padding-left: 20px;
 }
 
+.license-page-details {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
 .license-overview-name {
   font-size: 28px;
   margin-top: 5px;
@@ -265,6 +271,10 @@ strong {
   padding: 20px;
 }
 
+.license-nickname {
+  margin-top: 0;
+}
+
 .sidebar {
   float: right;
   width: 220px;