1
0
mirror of https://github.com/github/choosealicense.com synced 2024-06-26 05:33:02 +02:00
choosealicense.com/_includes/css/responsive.css
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

180 lines
3.3 KiB
CSS

/* iPads (landscape) ----------- */
@media only screen and (max-width : 1050px) {
.container {
width: 100%;
padding: 0 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.triptych {
width: 100%;
}
.triptych li {
width: 33%;
margin-left: 0;
padding: 0 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.triptych h3 {
width: auto;
padding: 0 30px;
}
.home h2 {
line-height: 30px;
padding: 20px 100px;
position: relative;
}
.home h2 span {
position: absolute;
display: block;
float: left;
top: 50%;
margin-top: -22px;
}
.home h2 span:first-child {
left: 65px;
}
.home h2 span:last-child {
right: 65px;
}
.sidebar a.button {
margin: 14px 0 20px;
}
.license-body {
width: calc(100% - 250px);
}
}
/* iPads (portrait) ----------- */
@media only screen and (max-width : 800px), (max-device-width : 1050px) and (orientation : portrait) {
.triptych h3 {
width: auto;
padding: 0 10px;
margin-bottom: 10px;
}
.sidebar {
float: left;
width: 50%;
}
.license-body {
width: 100%;
}
.license-rules {
border-bottom: none;
}
.license-details {
width: 65%;
}
}
/* Smartphones ----------- */
@media only screen and (max-width : 680px) {
.triptych li {
float: none;
width: 100%;
margin-bottom: 50px;
}
.home h2 {
padding: 20px 70px;
}
.home h2 span:first-child {
left: 35px;
}
.home h2 span:last-child {
right: 35px;
}
.license-family {
margin-bottom: 20px;
}
.license-family-heading {
float: none;
width: 100%;
}
.license-details {
float: none;
width: 100%;
padding-left: 0;
}
.license-variations {
height: auto;
padding-top: 0;
}
.license-variations ul {
height: 31px;
}
.site-footer {
text-align: center;
}
.site-footer nav, .site-footer p, .with-love {
float: none;
}
.site-footer nav {
margin: 0 auto 10px;
}
}
/* Smartphones (landscape) ----------- */
@media only screen and (max-width : 481px) {
h1 {
font-size: 30px;
margin-bottom: 15px;
}
.home h1 {
font-size: 33px;
}
.home h2 {
font-size: 17px;
line-height: 20px;
padding: 20px 45px;
}
.home h2 span:first-child {
left: 0;
}
.home h2 span:last-child {
right: 0;
}
.home h2 span {
margin-top: -16px;
}
.sidebar {
width: 100%;
}
.license-body {
word-wrap: break-word;
}
.license-body pre {
font-size: 10px;
}
.license-rules:not(.license-rules-sidebar) li {
margin-right: 5px;
font-size: 10px;
-webkit-text-size-adjust: none;
}
.license-rules:not(.license-rules-sidebar) li span {
background-size: 44px;
width: 10px;
height: 10px;
top: 1px;
position: relative;
}
.license-rules:not(.license-rules-sidebar) .license-conditions span {
background-position: -34px 0;
}
.license-rules:not(.license-rules-sidebar) .license-permissions span {
background-position: -24px 0px;
}
.license-rules:not(.license-rules-sidebar) .license-limitations span {
background-position: -14px 0;
}
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 321px) {
.container {
padding: 0 10px;
}
}