Bradley M. Kuhn
7229e78e0f
We've had a report that the sidebars are very distracting, particularly for the blogs, on smaller screens. This change to the CSS will cause sidebars to disappear on smaller screens.
707 lines
16 KiB
CSS
707 lines
16 KiB
CSS
* { margin: 0; padding: 0; }
|
|
img { border: 0; }
|
|
body { margin: 0; padding: 0; }
|
|
.clear { clear: both; }
|
|
.hidden { display: none; }
|
|
|
|
p, h1, h2, h3, h4, h5, h6, #mainContent ul, #mainContent ol {
|
|
/* margin-top: 1em; */
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
p {
|
|
line-height: 1.6;
|
|
}
|
|
|
|
html {
|
|
/* Standard colorss. */
|
|
--khaki-green: #587733;
|
|
--light-green: #afe478;
|
|
--washed-green: #daf4be;
|
|
--light-blue: #92d4d1;
|
|
--washed-blue: #ddfbfa;
|
|
--navy: #224c57;
|
|
--orange: #ec6343;
|
|
--orange-dim: #e05340;
|
|
}
|
|
|
|
/* Some Tachyons-like classes to apply those standard colors. */
|
|
.bg-light-blue { background: var(--light-blue); }
|
|
.bg-orange { background: var(--orange); }
|
|
.orange { color: var(--orange); }
|
|
.b--light-blue { border-color: var(--light-blue); }
|
|
.navy { color: var(--navy); }
|
|
|
|
body {
|
|
/* Native font stack as per Bootstrap 5.1. */
|
|
font-family:
|
|
system-ui,
|
|
-apple-system,
|
|
"Segoe UI",
|
|
Roboto,
|
|
"Helvetica Neue", Arial,
|
|
"Noto Sans",
|
|
"Liberation Sans",
|
|
sans-serif,
|
|
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
font-size: .875rem;
|
|
color: #333;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--navy);
|
|
transition: all .1s ease-out;
|
|
font-weight: bold;
|
|
}
|
|
a:hover { text-decoration: underline; }
|
|
|
|
/* Missing links */
|
|
a, form { position: relative; }
|
|
.fixme,
|
|
a[href$="#fixme"]:before,
|
|
form[action$="#fixme"]:before {
|
|
border: 1px solid var(--orange);
|
|
border-radius: 6px;
|
|
content: '?';
|
|
font-size: 0.6rem;
|
|
color: var(--orange);
|
|
position: absolute;
|
|
top: -4px;
|
|
right: -4px;
|
|
padding: 1px;
|
|
background: yellow;
|
|
/* opacity: 0.8; */
|
|
width: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
input:focus {
|
|
z-index: 3;
|
|
border-color: #86b7fe;
|
|
box-shadow: 0 0 0 .25rem rgb(236, 99, 67, .5);
|
|
};
|
|
|
|
|
|
a.read-more {
|
|
cursor: pointer;
|
|
font-style: italic;
|
|
}
|
|
|
|
.btn-orange {
|
|
color: white;
|
|
background: var(--orange);
|
|
border: 1px solid var(--orange-dim);
|
|
}
|
|
.btn-orange:hover, .btn-orange:active {
|
|
background: var(--orange-dim);
|
|
text-decoration: none;
|
|
box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
|
|
}
|
|
.btn-orange:focus {
|
|
box-shadow: 0 0 0 .25rem var(--orange-dim);
|
|
}
|
|
.btn-white {
|
|
color: var(--orange);
|
|
background: white;
|
|
border: 1px solid #777;
|
|
}
|
|
.btn-white:hover, .btn-white:active {
|
|
background: #eee;
|
|
text-decoration: none;
|
|
box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
|
|
}
|
|
.btn-white:focus {
|
|
box-shadow: 0 0 0 .25rem #ddd;
|
|
}
|
|
|
|
a svg {
|
|
transition: all .2s ease;
|
|
}
|
|
a:hover svg {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.toggle-control {
|
|
cursor: pointer;
|
|
text-decoration: none; color: #557733;
|
|
}
|
|
.toggle-control:hover { text-decoration: underline; color: #577632; }
|
|
|
|
/* FIXME: We should do this: */
|
|
/* http://www.waypointarts.com/blog/2013/06/29/fixing-a-side-bar-while-scrolling-until-bottom */
|
|
.donate-sidebar {
|
|
background: var(--light-green) no-repeat;
|
|
position: sticky;
|
|
bottom: 0;
|
|
width: auto;
|
|
padding: 0.5rem 1rem;
|
|
margin: 2rem -0.5rem 0;
|
|
border-radius: 8px 8px 0 0;
|
|
border: 1px solid #90d468;
|
|
}
|
|
|
|
.donate-sidebar:hover {
|
|
background: #a0d870;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.donate-sidebar {
|
|
margin: 2rem -1rem 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 52em) {
|
|
#sidebar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
p.footnote {
|
|
font-size: 85%;
|
|
}
|
|
|
|
h1 { margin-top: .75em; margin-bottom: .5em; }
|
|
h2 { margin-top: .75em; margin-bottom: .5em; }
|
|
h3 { margin-top: .6em; margin-bottom: .4em; }
|
|
|
|
#mainContent ul, #mainContent ol { padding-left: 1.5em; }
|
|
|
|
|
|
.internalNavigate { width: 19%; float: right; }
|
|
#mainContent .internalNavigate ul { list-style-type: none; padding-left: 0; }
|
|
.internalNavigate ul li { margin-top: .3em; margin-bottom: .3em; }
|
|
|
|
/* Header */
|
|
|
|
body > header {
|
|
/* background: linear-gradient(to top right, white, white, var(--washed-blue) 80%); */
|
|
overflow: auto; /* Prevent logo top margin popping out. */
|
|
}
|
|
|
|
#conservancyheader img {
|
|
max-height: 75px;
|
|
width: auto;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
#conservancyheader img {
|
|
max-height: 90px;
|
|
}
|
|
}
|
|
|
|
/* Navigation bar */
|
|
#navbar-outer {
|
|
background: var(--navy);
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
#navbar ul {
|
|
list-style: none;
|
|
text-transform: uppercase;
|
|
padding: 0;
|
|
}
|
|
#navbar li {
|
|
background: var(--navy);
|
|
position: relative;
|
|
padding-left: .25rem;
|
|
padding-right: .25rem;
|
|
}
|
|
@media screen and (min-width: 30em) {
|
|
#navbar li {
|
|
padding-left: .5rem;
|
|
padding-right: .5rem;
|
|
}
|
|
}
|
|
#navbar li > a {
|
|
display: inline-block;
|
|
color: white;
|
|
text-decoration: none;
|
|
padding: 0.25rem 0.25rem 0;
|
|
/* Invisible borders to keep things even. */
|
|
border-top: 0.20rem solid var(--navy); /* A little less here. */
|
|
border-bottom: 0.25rem solid var(--navy);
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
#navbar li > a {
|
|
padding-left: .5rem;
|
|
padding-right: .5rem
|
|
}
|
|
}
|
|
|
|
.press-articles li {
|
|
list-style-type: none; /* Remove bullets */
|
|
padding: 0; /* Remove padding */
|
|
margin: 0; /* Remove margins */
|
|
margin-top: 1.1em; margin-bottom: 1.1em;
|
|
}
|
|
|
|
#navbar li a:hover, #navbar li a:focus {
|
|
border-bottom: 0.25rem solid var(--light-green);
|
|
}
|
|
#navbar li { padding-bottom: 0.25rem; }
|
|
|
|
/* Navbar submenus */
|
|
#navbar li ul {
|
|
display: none;
|
|
z-index: 100;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
min-width: 15rem;
|
|
text-transform: none;
|
|
}
|
|
#navbar li ul a {
|
|
font-weight: normal;
|
|
}
|
|
#navbar li:hover ul {
|
|
display: block;
|
|
}
|
|
/* Right-align the second last and last sub-menus. */
|
|
#navbar li:nth-last-child(2) ul, #navbar li:nth-last-child(1) ul {
|
|
left: auto;
|
|
right: 0;
|
|
text-align: right;
|
|
}
|
|
|
|
#menu-icon:active, #search-icon:active {
|
|
transform: scale(1.1);
|
|
}
|
|
#navbar-outer { min-height: .5rem; }
|
|
#navbar.mobile {
|
|
display: block;
|
|
max-width: 32rem;
|
|
}
|
|
#navbar.mobile.search { display: block; }
|
|
#navbar.mobile li {
|
|
display: block;
|
|
}
|
|
#navbar.mobile ul {
|
|
padding-left: .5rem;
|
|
padding-right: .5rem;
|
|
display: block !important;
|
|
position: relative !important;
|
|
top: auto !important;
|
|
left: 0 !important;
|
|
right: auto !important;
|
|
text-align: left !important;
|
|
}
|
|
#navbar.mobile > ul > li {
|
|
padding-top: .5rem;
|
|
padding-bottom: .5rem;
|
|
}
|
|
#navbar.mobile > ul > li {
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
#navbar.mobile li ul {
|
|
margin-left: .5rem;
|
|
}
|
|
|
|
#progressbar {
|
|
height: 1.8em;
|
|
}
|
|
|
|
#progressbar .ui-widget-header {
|
|
background: rgb(206, 31, 31);
|
|
}
|
|
|
|
#siteprogressbar .goalText {
|
|
color: #557733;
|
|
font-size: 10pt;
|
|
}
|
|
#siteprogressbar .soFarText {
|
|
font-size: 10pt;
|
|
}
|
|
#siteprogressbar .progress {
|
|
background: #577632;
|
|
}
|
|
@media all and (max-width: 600px) {
|
|
.goalText {
|
|
font-size: 8pt;
|
|
}
|
|
.soFarText {
|
|
font-size: 8pt;
|
|
}
|
|
}
|
|
#siteprogressbar .progress {
|
|
background: #577632;
|
|
}
|
|
#siteprogressbar .middle-goal {
|
|
background: #d0d0d0;
|
|
}
|
|
|
|
#siteprogressbar .final-goal {
|
|
background: #eeeeee;
|
|
}
|
|
|
|
#fundraiser-percentage {
|
|
text-align: center;
|
|
}
|
|
|
|
#container #mainContent {
|
|
max-width: 50em;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #ffffff;
|
|
flex: 1 1 auto;
|
|
}
|
|
#container #sidebar {
|
|
background-color: #e6eae1;
|
|
padding: 1px 0.5rem 0.25rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
#container {
|
|
display: flex;
|
|
}
|
|
#container #sidebar {
|
|
flex: 1 0 15em;
|
|
margin-right: 1rem;
|
|
}
|
|
}
|
|
|
|
#container #sidebar li {
|
|
text-align: center;
|
|
list-style: none;
|
|
padding: 3px 10px 3px 10px;
|
|
margin: 5px;
|
|
border: 1px solid #CCC;
|
|
background: #eaf1f1;
|
|
background: -moz-linear-gradient(top, #fff, #eaf1f1);
|
|
background: -webkit-linear-gradient(top, #fff, #eaf1f1);
|
|
background: linear-gradient(to bottom, #fff, #eaf1f1);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eaf1f1', GradientType=0);
|
|
}
|
|
#container #sidebar li a:hover { background: #577632; color: #fff; }
|
|
|
|
#container #sidebar.Sponsors ul li.Sponsors,
|
|
#container #sidebar.Directors ul li.Directors,
|
|
#container #sidebar.Eval ul li.Eval,
|
|
#container #sidebar.Overview ul li.Overview,
|
|
#container #sidebar.Contact ul li.Contact,
|
|
#container #sidebar.Staff ul li.Staff,
|
|
#container #sidebar.Outside ul li.Outside,
|
|
#container #sidebar.Transparency ul li.Transparency,
|
|
#container #sidebar.License ul li.License,
|
|
#container #sidebar.Current ul li.Current,
|
|
#container #sidebar.Services ul li.Services,
|
|
#container #sidebar.Applying ul li.Applying,
|
|
#container #sidebar.VizioTopBar ul li.VizioTopBar,
|
|
#container #sidebar.VizioMain ul li.VizioMain,
|
|
#container #sidebar.VizioPressRelease ul li.VizioPressRelase,
|
|
#container #sidebar.VizioComplaint ul li.VizioComplaint,
|
|
#container #sidebar.VizioQandA ul li.VizioQandA,
|
|
#container #sidebar.VizioPressKit ul li.VizioPressKit,
|
|
#container #sidebar.VizioPhotoAssets ul li.VizioPhotoAssets,
|
|
#container #sidebar.VizioPress ul li.VizioPress,
|
|
#container #sidebar.IssuesInTheNews ul li.IssuesInTheNews,
|
|
#container #sidebar.Glossary ul li.Glossary,
|
|
#container #sidebar.CopyleftCompliance ul li.CopyleftCompliance,
|
|
#container #sidebar.HelpComply ul li.HelpComply,
|
|
#container #sidebar.CopyleftPrinciples ul li.CopyleftPrinciples,
|
|
#container #sidebar.EnforcementStrategy ul li.EnforcementStrategy,
|
|
#container #sidebar.CopyleftCompliance ul li.CopyleftCompliance,
|
|
#container #sidebar.LiberateFirmware ul li.LiberateFirmware,
|
|
#container #sidebar.PastLawsuits ul li.PastLawsuits,
|
|
#container #sidebar.CopyleftOrg ul li.CopyleftOrg /* Never put a comma here */
|
|
{
|
|
color: #000033;
|
|
font-weight: bold;
|
|
background: #e3e6e0;
|
|
}
|
|
#container #sidebar h2 {
|
|
text-align: center;
|
|
font-size: 1.25em;
|
|
margin: 1.5em 0 0.8em 0;
|
|
}
|
|
#container #sidebar hr {
|
|
width: 75%;
|
|
float: center;
|
|
clear: all;
|
|
}
|
|
|
|
.shaded { background: #F0FFB8; padding: .1em .5em; margin-bottom: .5em; }
|
|
|
|
.columns {
|
|
}
|
|
|
|
.column h2 { font-size: 1.25em; }
|
|
.column h3 { font-size: 1.1em; }
|
|
.column hr { width: 50%; margin-left: auto; margin-right: auto; }
|
|
|
|
.column h2 a { text-decoration: none; color: #000000; }
|
|
.column h2 a:hover { text-decoration: underline; }
|
|
|
|
#conservancyfooter {
|
|
border-top: 1px solid #ccc;
|
|
text-align: center;
|
|
overflow: auto;
|
|
}
|
|
|
|
.continued {
|
|
display: block;
|
|
font-size: .9em;
|
|
font-weight: bold;
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.date, .blog-tags, .blog-comments {
|
|
font-style: italic;
|
|
font-size: .9em;
|
|
margin-bottom: .3em;
|
|
margin-top: .3em;
|
|
}
|
|
|
|
a.feedlink /* RSS icon */ { display: block; float: right; font-size: 10pt; }
|
|
|
|
blockquote, div.quote /* div.quote is used by conservancy whitepaper */ {
|
|
margin-left: 2em;
|
|
margin-right: 2em;
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
border: 1px solid #fff;
|
|
background: #eee;
|
|
}
|
|
|
|
.newsgraphic { float: right; }
|
|
.newsgraphic img { border: 1px solid #000; }
|
|
|
|
.picture {
|
|
text-align: center;
|
|
font-style: italic;
|
|
}
|
|
.picture img {
|
|
margin: 0 auto;
|
|
max-width: 100%;
|
|
}
|
|
.picture-small {
|
|
padding-left: 1em;
|
|
border: thin silver solid;
|
|
padding: 0.5em;
|
|
text-align: center;
|
|
font-style: italic;
|
|
font-size: 70%;
|
|
text-indent: 0;
|
|
margin: .25em;
|
|
min-width: 8%;
|
|
width: auto;
|
|
box-shadow: 1px 1px 2px rgba(0,0,0,.3);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.picture-small {
|
|
max-width: 20rem;
|
|
}
|
|
}
|
|
|
|
.picture-small img {
|
|
width: 100%;
|
|
}
|
|
.picture-tiny {
|
|
padding-left: 1em;
|
|
border: thin silver solid;
|
|
padding: 0.5em;
|
|
text-align: center;
|
|
font-style: italic;
|
|
font-size: 50%;
|
|
text-indent: 0;
|
|
margin: .25em;
|
|
min-width: 4%;
|
|
max-width: 15%;
|
|
width: auto;
|
|
}
|
|
.picture-tiny img {
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.secondary_info { font-size: 83%; }
|
|
.next_page_button { float: right; }
|
|
.pagination_list { text-align: center; }
|
|
.document_format { border: 1px solid #888; padding: .2em; background: #fff99d;}
|
|
.copyright_info { font-size: 90%; }
|
|
hr.footnote-separator { width: 80%; margin-left: auto; margin-right: auto; }
|
|
.doc-footer { font-style: italic; }
|
|
.doc-footer > *:first-child::before { content: "["; }
|
|
.doc-footer > *:last-child::after { content: "]"; }
|
|
|
|
/* Resources pages */
|
|
div.download-formats { margin-top: 2em; margin-bottom: 2em; }
|
|
.download-formats p { display: inline; }
|
|
#mainContent .download-formats ul { display: inline; list-style: none;
|
|
padding-left: 0; }
|
|
.download-formats ul li { display: inline; padding-left: 2em; }
|
|
|
|
/* Resources - book styles */
|
|
hr.chapter-separator { display: none; }
|
|
h2.likechapterHead { text-align: center; }
|
|
h2.chapterHead { text-align: center; }
|
|
#mainContent ul.author { list-style-type: none; padding-left: 0; }
|
|
#mainContent div.footnotes { font-style: normal; } /* remove italics */
|
|
span.sectionToc { padding-left: 2em; } /* indent TOC properly */
|
|
span.subsectionToc { padding-left: 4em; }
|
|
span.subsubsectionToc { padding-left: 6em;}
|
|
.js, .js p, .js p.bibitem, .js p.bibitem-p { background-color: #cde7e9; }
|
|
|
|
body.conservancy-Home #navbar ul li.Home > a,
|
|
body.conservancy-Projects #navbar ul li.Projects > a,
|
|
body.conservancy-WhoWeAre #navbar ul li.WhoWeAre > a,
|
|
body.conservancy-WhatWeDo #navbar ul li.WhatWeDo > a,
|
|
body.conservancy-Learn #navbar ul li.Learn > a,
|
|
body.conservancy-news #navbar ul li.news > a,
|
|
body.conservancy-blog #navbar ul li.blog > a,
|
|
body.conservancy-About #navbar ul li.About > a,
|
|
body.conservancy-Compliance #navbar ul li.compliance > a,
|
|
body.conservancy-donate #navbar ul li.donate > a,
|
|
body.conservancy-npoacct #navbar ul li.npoacct > a,
|
|
body.conservancy-sponsors #navbar ul li.sponsors > a /* NO COMMA HERE! */
|
|
{
|
|
border-bottom: 4px solid var(--khaki-green);
|
|
}
|
|
|
|
#supporters ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#supporters li:before {
|
|
content: '';
|
|
display: inline-block;
|
|
height: 2em;
|
|
width: 2em;
|
|
background-image: url(/img/conservancy-supporter-heart.svg);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
padding: 0.25em 1.2em 0.25em 0.25em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#supporters li {
|
|
padding: 0.5em 2em 1em 2em;
|
|
margin-left: .25em;
|
|
list-style: none;
|
|
}
|
|
|
|
#sponsor ul {
|
|
clear: all;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#sponsor li {
|
|
width: 100%;
|
|
float: left;
|
|
margin-top: 10px;
|
|
text-align: center;
|
|
list-style: none;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
ul#sponsor li:after {
|
|
content: "";
|
|
display: block;
|
|
height: 2px;
|
|
width: 30%;
|
|
margin-left: 35%;
|
|
margin-right: 35%;
|
|
margin-top: 4px;
|
|
background: #afe478;
|
|
}
|
|
|
|
#subbox {
|
|
position: absolute;
|
|
padding-top: 10px;
|
|
right: 0px;
|
|
width: 200px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
img.inside-faq {
|
|
max-width: 100%;
|
|
width: auto;
|
|
overflow: scroll;
|
|
}
|
|
pre {
|
|
overflow: auto;
|
|
}
|
|
|
|
.supporter-type-selector a {
|
|
font-size: 125%;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.supporter-type-selector a.supporter-type-selector-selected {
|
|
font-size: 127%;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Make dl's ( such as for FAQ entries) look nice on screens, both big and small. */
|
|
|
|
dl {
|
|
border: 3px double #ccc;
|
|
padding: 0.5em;
|
|
}
|
|
dt {
|
|
text-align: center;
|
|
margin: 0em 1em 0.5em 0.5em;
|
|
font-weight: bold;
|
|
color: green; }
|
|
dd {
|
|
margin: 0 0 1.5em 2em;
|
|
}
|
|
|
|
.fundraiser-top-text {
|
|
background: #F0FFB8;
|
|
padding: .2em .7em;
|
|
}
|
|
.fundraiser-top-text * {
|
|
margin: .5em auto;
|
|
max-width: 70em;
|
|
width: 95%;
|
|
}
|
|
.fundraiser-top-text p {
|
|
font-size: 110%;
|
|
font-style: italic;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Fallback elements created by conservancy.js when no video source is
|
|
supported. */
|
|
div.small-right, div.medium-right {
|
|
border: thick solid #577632;
|
|
padding: .3em;
|
|
text-align: center;
|
|
}
|
|
|
|
.breadcrumbs {
|
|
font-size: 14px;
|
|
padding: 0.5rem 0 0;
|
|
}
|
|
|
|
.breadcrumbs, .breadcrumbs a {
|
|
color: #777;
|
|
}
|
|
.breadcrumbs a {
|
|
padding: 0 0.5em;
|
|
}
|
|
.breadcrumbs a:first-child {
|
|
padding-left: 0;
|
|
}
|
|
.breadcrumbs span {
|
|
padding-left: 0.5em;
|
|
}
|
|
|
|
.press-release .date, .conservancy-blog .date {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Expanding sections. */
|
|
details summary {
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
padding: 0.5rem 0;
|
|
}
|