pill nav for license variations

css/application.css

@@ -228,6 +228,26 @@ strong {
   margin-top: 20px;
 }
 
+.license-family {
+  clear: both;
+  margin-bottom: 50px;
+}
+
+.license-family-heading {
+  float: left;
+  width: 35%;
+}
+
+.license-details {
+  float: right;
+  width: 55%;
+}
+
+.license-variations {
+  height: 31px;
+  padding-top: 23px;
+}
+
 .license-family-name {
   font-family: 'Chivo', 'Helvetica Neue', Helvetica, Arial, serif;
   font-size: 28px;
@@ -240,15 +260,19 @@ strong {
 }
 
 .license-rules {
-  border-top: solid 1px #e9e6e2;
+  border-bottom: solid 1px #d9d7d2;
   font-size: 13px;
   line-height: 1.3;
-  margin-bottom: 40px;
+  margin-bottom: 12px;
   width: 100%;
 }
+.license-rules th,
+.license-rules td {
+  width: 33%;
+}
 .license-rules th {
-  border-bottom: solid 1px #d9d7d2;
+  font-size: 15px;
-  padding: 5px 10px 12px 10px;
+  padding: 5px 10px 5px 0;
   vertical-align: bottom;
 }
 .license-rules th.summary {
@@ -258,25 +282,18 @@ strong {
   font-size: 16px;
 }
 .license-rules td {
-  border-bottom: solid 1px #e9e6e2;
+  padding: 4px 0 12px 0;
-  padding: 4px 10px;
+  vertical-align: top;
 }
 .license-rules .label {
-  border-right: solid 1px #d9d7d2;
   font-weight: bold;
 }
 .license-rules li {
   background-position: 0 1px;
   background-repeat: no-repeat;
   background-size: 12px 12px;
-  float: left;
-  display: -moz-inline-stack;
-  display: inline-block;
-  vertical-align: middle;
-  *vertical-align: auto;
-  zoom: 1;
-  *display: inline;
   margin-right: 15px;
+  margin-bottom: 5px;
   padding-left: 16px;
 }
 .license-rules li:hover {
@@ -291,9 +308,6 @@ strong {
 .license-forbidden li {
   background-image: url(../images/red-dot@2x.png);
 }
-.license-rules tr:nth-child(2n) td {
-  background-color: rgba(0, 0, 0, 0.02);
-}
 
 .license-rules-sidebar li {
   float: none;
@@ -395,6 +409,26 @@ strong {
   margin-left: 2em;
 }
 
+.nav-pills > li {
+  float: left;
+  display: block;
+  margin-right: 10px;
+}
+
+.nav-pills > li > a {
+  padding: 5px 10px;
+  border-radius: 3px;
+}
+
+.nav-pills > li.active > a {
+  background-color: #149ad4;
+  color: #f7f4ef;
+}
+
+.small {
+  font-size: 90%;
+}
+
 /* Qtip styles */
 .qtip-required {
   background-color: #d0ebf6 ! important;

licenses.html

@@ -11,25 +11,45 @@ class: license-types
 {% for page in site.pages %}
   {% if page.layout == "license" %}
     {% if page.featured %}
-    <h3 class="license-family-name"><a href="{{ page.permalink }}">{% if page.family-title %}{{ page.family-title }}{% else %}{{ page.title }}{% endif %}</a></h3>
+    <div class="license-family cf">
+      <div class="license-family-heading">
+        <h3 class="license-family-name"><a href="{{ page.permalink }}">{% if page.family-title %}{{ page.family-title }}{% else %}{{ page.title }}{% endif %}</a></h3>
 
-    <p class="license-family-description">{{ page.description }} <a href="{{ page.permalink }}">View full license »</a></p>
+        <p class="license-family-description">{{ page.description }}</p>
+      </div>
 
-    <table class='license-rules'>
+      <div class="license-details">
-      {% assign types = "required|permitted|forbidden" | split: "|" %}
+        <div class="license-variations">
-      {% for type in types %}
+          {% comment %} always show this div, even w/o variations, for proper spacing {% endcomment %}
-      <tr>
+          <ul class="nav-pills">
-        <td class="label">{{ type | capitalize }}</td>
+            <li class="active"><a href="#">GPL v2</a></li>
-        <td>
+            <li><a href="#">GPL v3</a></li>
-          <ul class="license-{{ type }}">
+            <li><a href="#">Affero GPL</a></li>
-            {% for req in page[type] %}
-              <li class="{{ req }}">{{ site.rules[type][req].label }}</li>
-            {% endfor %}
           </ul>
-        </td>
+        </div>
-      </tr>
+        <table class='license-rules'>
-      {% endfor %}
+          <tr>
-    </table>
+          {% assign types = "required|permitted|forbidden" | split: "|" %}
+          {% for type in types %}
+            <th class="label">{{ type | capitalize }}</th>
+          {% endfor %}
+          </tr>
+          <tr>
+          {% for type in types %}
+            <td>
+              <ul class="license-{{ type }}">
+                {% for req in page[type] %}
+                  <li class="{{ req }}">{{ site.rules[type][req].label }}</li>
+                {% endfor %}
+              </ul>
+            </td>
+          {% endfor %}
+          </tr>
+        </table>
+        <p class="small"><a href="{{ page.permalink }}">View full GPL v2 license »</a></p>
+      </div>
+    </div>
+
     {% endif %}
   {% endif %}
 {% endfor %}