1
0
mirror of https://github.com/github/choosealicense.com synced 2024-12-22 12:50:24 +01:00

pill nav for license variations

This commit is contained in:
Jason Long 2013-11-06 10:10:48 -05:00
parent a9f1de32ae
commit 246cbc8d65
2 changed files with 87 additions and 33 deletions

View File

@ -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;
padding: 5px 10px 12px 10px;
font-size: 15px;
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 10px;
padding: 4px 0 12px 0;
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;

View File

@ -11,15 +11,31 @@ class: license-types
{% for page in site.pages %}
{% if page.layout == "license" %}
{% if page.featured %}
<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>
<div class="license-details">
<div class="license-variations">
{% comment %} always show this div, even w/o variations, for proper spacing {% endcomment %}
<ul class="nav-pills">
<li class="active"><a href="#">GPL v2</a></li>
<li><a href="#">GPL v3</a></li>
<li><a href="#">Affero GPL</a></li>
</ul>
</div>
<table class='license-rules'>
<tr>
{% assign types = "required|permitted|forbidden" | split: "|" %}
{% for type in types %}
<th class="label">{{ type | capitalize }}</th>
{% endfor %}
</tr>
<tr>
<td class="label">{{ type | capitalize }}</td>
{% for type in types %}
<td>
<ul class="license-{{ type }}">
{% for req in page[type] %}
@ -27,9 +43,13 @@ class: license-types
{% endfor %}
</ul>
</td>
</tr>
{% endfor %}
</tr>
</table>
<p class="small"><a href="{{ page.permalink }}">View full GPL v2 license »</a></p>
</div>
</div>
{% endif %}
{% endif %}
{% endfor %}