1
0
mirror of https://github.com/github/choosealicense.com synced 2024-12-23 05:10:11 +01:00
choosealicense.com/assets/css/application.scss
Mike Linksvayer 810eeb5618 rename/order license properties better reflect how licenses work
and are structured

grant (permissions)
conditioned on (conditions)
with limitations

Permissions coming first combats mistaken but apparently widespread
impression that licenses impose conditions, even such that without
a license, there would be no conditions/work would be in the public
domain.

Requirements->Conditions emphasizes that they are pertinent if one
wants to take advantage of permissions.

Forbiddens->Limitations is more accurate: in most cases licenses
don't give permission to hold licensors liable, in some cases to
use licensors' trademarks or patents, but a licensee does not lose
the permissions granted by the license if the licensee holds licensor
liable, etc. Also emphasizes that there are limitatations on the
license grant, not that the license imposes prohibitions.

The most concise place to see both the rename and reorder is in
_includes/license-overview.html

I did not reorder the appearance of the groups of properties in
license source files (.txt files in _licenses) as those orderings
are not used to render anything on the webiste. Might do so later.
2016-03-01 13:33:15 -08:00

499 lines
8.4 KiB
SCSS

---
---
@import "normalize";
@import "jquery.qtip";
body {
background: #fafafa;
color: #5c5855;
font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
color: #149ad4;
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1, h2, h3, h5 {
color: #444;
font-family: Chivo, "Helvetica Neue", Helvetica, Arial, serif;
font-weight: 900;
line-height: 1.1;
}
h1 {
font-size: 35px;
margin-bottom: 25px;
}
.license h1 {
max-width: 700px;
}
h2 {
opacity: 0.8;
font-size: 24px;
margin-top: 24px;
margin-bottom: 10px;
}
h3 {
font-size: 15px;
margin-top: 20px;
margin-bottom: 10px;
}
h5 {
font-size: 14px;
margin-bottom: 15px;
}
p {
margin-bottom: 1em;
}
ol, ul { padding: 0; margin: 0; list-style-type: none; }
th, td { text-align: left; font-weight: normal; }
strong {
color: #444;
}
.container {
margin: 40px auto;
width: 940px;
}
.home {
text-align: center;
}
.home h1 {
font-size: 60px;
}
.home h2 {
color: #149ad4;
font-size: 27px;
line-height: 70px;
margin-bottom: 45px;
vertical-align: middle;
opacity: 1;
}
.home h2 span {
color: #f1f1f1;
font-size: 70px;
padding: 0 5px;
position: relative;
top: 10px;
}
.triptych {
width: 900px;
margin: 0 auto 20px;
}
.triptych li {
width: 280px;
float: left;
margin-left: 27px;
}
.triptych li:first-child {
margin-left: 0;
}
.triptych li > a {
text-decoration: none;
}
.triptych h3 {
font-size: 22px;
margin: 0 auto 20px auto;
width: 220px;
}
.situations .whatever {
margin-top: 16px;
}
.situations .copyleft {
margin-top: 3px;
}
.situations .button {
margin-top: 20px;
}
.triptych-sprite {
background-image: url(../img/home-sprite.png);
background-repeat: no-repeat;
display: inline-block;
}
.three-arrows { background-position: 0 0; width: 72px; height: 57px; }
.lightbulb { background-position: 0 -57px; width: 43px; height: 72px; }
.circular { background-position: 0 -129px; width: 72px; height: 69px; }
.license-family {
clear: both;
margin-bottom: 50px;
}
.license-family-heading {
float: left;
width: 35%;
}
.license-details {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
width: 55%;
padding-left: 20px;
}
.license-variations {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 31px;
padding-top: 23px;
margin-left: -10px;
}
.license-family-name {
font-size: 28px;
}
.license-family-description {
color: #555;
}
.license-rules {
border-bottom: solid 1px #ddd;
font-size: 13px;
line-height: 1.3;
margin-bottom: 12px;
width: 100%;
}
.license-rules th,
.license-rules td {
width: 33%;
}
.license-rules th {
font-size: 15px;
padding: 5px 10px 5px 0;
vertical-align: bottom;
}
.license-rules th.summary {
line-height: 1.4;
}
.license-rules .name {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border-right: solid 1px #ddd;
padding-left: 0;
width: 280px;
}
.license-rules .name a {
font-size: 28px;
}
.license-rules .name small a {
font-size: 16px;
}
.license-rules td {
padding: 4px 0 12px 0;
vertical-align: top;
}
.license-rules .label {
font-weight: bold;
}
.license-rules li {
margin-right: 15px;
margin-bottom: 5px;
}
.license-rules li:hover {
color: #444;
}
.license-sprite {
background-image: url(../img/license-sprite.png);
background-repeat: no-repeat;
display: inline-block;
}
.sidebar .source span { background-position: 0 0; width: 16px; height: 12px; }
.license-limitations span { background-position: -16px 0; width: 12px; height: 12px; }
.license-permissions span { background-position: -28px 0; width: 12px; height: 12px; }
.license-conditions span { background-position: -40px 0; width: 12px; height: 12px; }
.license-rules-sidebar li {
float: none;
padding-bottom: 3px;
}
.license-body {
font-size: 15px;
float: left;
width: 700px;
}
.license-body pre {
font-family: Consolas, Monaco, Courier, monospace;
font-size: 14px;
background-color: #fff;
border: 1px solid #eee;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
padding: 20px;
}
.sidebar {
float: right;
width: 220px;
font-size: 12px;
}
.sidebar a.button {
margin-top: -110px;
width: 100%;
}
.sidebar .how-to-apply {
font-size: 12px;
margin-top: -15px;
}
.sidebar .how-to-apply p {
line-height: 1.5;
}
.sidebar .how-to-apply p:last-child {
margin-bottom: 0;
}
.sidebar .note {
font-style: italic;
}
.sidebar .source {
margin-top: 4px;
margin-bottom: 30px;
}
.sidebar .boilerplate {
font: 0.7em "Courier new", courier;
}
.button {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-color: #ccc #bbb #aaa #bbb;
border-style: solid;
border-width: 1px;
color: #444;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px, rgba(255, 255, 255, 0.8) 0 1px 0 0 inset;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px, rgba(255, 255, 255, 0.8) 0 1px 0 0 inset;
box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px, rgba(255, 255, 255, 0.8) 0 1px 0 0 inset;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eee), color-stop(100%, #ddd));
background-image: -webkit-linear-gradient(#eee, #ddd);
background-image: -moz-linear-gradient(#eee, #ddd);
background-image: -o-linear-gradient(#eee, #ddd);
background-image: linear-gradient(#eee, #ddd);
display: inline-block;
font-size: 12px;
font-weight: normal;
padding: 5px 10px;
text-align: center;
vertical-align: middle;
}
.button:hover {
text-decoration: none;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eee), color-stop(100%, #ccc));
background-image: -webkit-linear-gradient(#eee, #ccc);
background-image: -moz-linear-gradient(#eee, #ccc);
background-image: -o-linear-gradient(#eee, #ccc);
background-image: linear-gradient(#eee, #ccc);
}
.projects-with-license li {
padding-bottom: 3px;
}
.site-footer {
border-top: 1px solid #eee;
margin-top: 30px;
padding-top: 20px;
color: #555;
font-size: 12px;
text-align: left;
line-height: 1.5;
}
.site-footer a {
color: #444;
font-weight: normal;
}
.site-footer p {
float: left;
margin-top: 0;
}
.site-footer nav {
float: right;
}
.site-footer nav a {
display: inline-block;
margin-left: 20px;
}
.bullets {
list-style-type: disc;
}
.bullets > li {
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;
}
.variation-tab {
display: none;
}
.variation-tab.active {
display: block;
}
.small {
font-size: 90%;
}
/* Qtip styles */
.qtip-conditions,
.qtip-permissions,
.qtip-limitations {
font-size: 12px;
line-height: 1.3;
}
.qtip-conditions {
background-color: #d0ebf6;
border-color: #149ad4;
color: #0d648a;
}
.qtip-conditions .qtip-titlebar {
background-color: #149ad4;
color: #fff;
}
.qtip-permissions {
background-color: #d8f4d7;
border-color: #3dc637;
color: #298625;
}
.qtip-permitted .qtip-titlebar {
background-color: #3dc637;
color: #fff;
}
.qtip-limitations {
background-color: #f4d9d8;
border-color: #c6403d;
color: #812a28;
}
.qtip-limitations .qtip-titlebar {
background-color: #c6403d;
color: #fff;
}
/* For modern browsers */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.with-love { float: right; clear: right; }
@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
only screen and (min--moz-device-pixel-ratio: 2.0),
only screen and (-o-min-device-pixel-ratio: 200/100),
only screen and (min-device-pixel-ratio: 2.0) {
.three-arrows,
.lightbulb,
.circular {
background-image: url(../img/home-sprite@2x.png);
-webkit-background-size: 72px 198px;
-moz-background-size: 72px 198px;
background-size: 72px 198px;
}
.license-sprite {
background-image: url(../img/license-sprite@2x.png);
-webkit-background-size: 52px 12px;
-moz-background-size: 52px 12px;
background-size: 52px 12px;
}
}
{% include css/responsive.css %}