Changeset - 828fd09d113f
[Not reviewed]
0 2 0
Brett Smith (brett) - 7 years ago 2017-11-27 18:30:27
brett@sfconservancy.org
css: Add a little style to the progressbar.
2 files changed with 11 insertions and 7 deletions:
0 comments (0 inline, 0 general)
www/conservancy/static/css/conservancy.css
Show inline comments
...
 
@@ -45,195 +45,192 @@ p.footnote {
 
}
 

	
 
h1 { margin-top: .75em; margin-bottom: .5em; }
 
h2 { margin-top: .75em; margin-bottom: .5em; }
 
h3 { margin-top: .6em; margin-bottom: .4em; }
 

	
 
#mainContent h1 { border-bottom: 1px solid #00334b; }
 
#mainContent h2 { border-bottom: 1px solid #aaa; }
 

	
 
#mainContent ul, #mainContent ol { padding-left: 1.5em; }
 

	
 
#mainContent img { margin: 3px; }
 

	
 
.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 */
 

	
 
#conservancyheader {
 
  margin: 0;
 
  /* Leave 0 padding on the right so the header image is clipped by the edge of
 
   * the browser window. */
 
  padding: 10px 0 10px 17px;
 
/*  background-color: #d1ff96; */
 
/*  background-color: #92CC58; */
 
/*  background-color: #BDD8A2; */
 
/*  background-color: #92cc58; */
 
/*  background-color: #b5cd9d; */
 
  background-color: #ffffff;
 
  border-bottom: 1px solid #808080;
 
  text-indent: -5000px; /* hide in favor of image */
 
}
 
#logobutton {
 
  display: block;
 
  margin: 0;
 
  padding: 0;
 
  height: 120px;
 
  width: 100%;
 
  min-width: 350px;  /* So at least tree and text is visible */
 
  background: url(/img/conservancy-header.png) no-repeat;
 
}
 

	
 
/* Navigation bar */
 
#navbar-outer { background: #577632; }
 
#navbar { margin-left: 104px; margin-top: 3px; float: left; display: inline; }
 
#navbar ul { list-style: none; }
 
#navbar-clear { clear: both; border-bottom: 1px solid #808080; }
 
#navbar li.supporter a {
 
  display: block;
 
  background: #fafafe;
 
  padding: .2em .8em;
 
  margin-right: 3px;
 
  border: 1px solid #808080;
 
  font-size: .8em;
 
  background: #ffd843;
 
  background: -moz-linear-gradient(top, #fff, #ffd533);
 
  background: -webkit-linear-gradient(top, #fff, #ffd533);
 
  background: linear-gradient(to bottom, #fff, #ffd533);
 
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffd533', GradientType=0);
 
  border-color: #ffffff;
 
}
 
#navbar li a {
 
  display: block;
 
  background: #fafafe;
 
  padding: .2em .8em;
 
  margin-right: 3px;
 
  border: 1px solid #808080;
 
  font-size: .8em;
 
  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);
 
  border-color: #ffffff;
 
}
 
#navbar li:hover a { background: #577632; color: #fff; }
 
#navbar li.supporter:hover a { background: #577632; color: #CE1F1F; }
 
#navbar li { float: left; display: inline; margin-bottom: 3px; }
 

	
 
#mainContent {
 
    margin-left: 50px;
 
    margin-right: 50px;
 
}
 
#sidebar + #mainContent {
 
    float: left;
 
}
 

	
 
#progressbar {
 
    height: 1.8em;
 
}
 

	
 
#progressbar .ui-widget-header {
 
    background: rgb(206, 31, 31);
 
}
 

	
 
#siteprogressbar {
 
    margin: .5em 20% .5em 2%;
 
}
 
#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;
 
}
 

	
 
.content-with-donate-sidebar {
 
    align: left;
 
    width: 80%;
 
}
 

	
 
#container {
 
    width: 100%;
 
    overflow: hidden;
 
}
 
#container #mainContent {
 
    /* All the measurements here are relative to #sidebar's 13em width.
 
       Leave enough space for it plus 1.5em margins on either side. */
 
    position: relative;
 
    left: 14.5em;
 
    width: calc(100% - 16em);
 
    max-width: 50em;
 
    margin: 0;
 
    padding: 0;
 
    background: #ffffff;
 
}
 
#container #sidebar {
 
    position: absolute;
 
    width: 13em;
 
    background-color: #ccd4a3;
 
    /* Gives symmetry with the margin-top of the first h2.
 
       1.25em font-size * 1.5em margin == 1.875em */
 
    padding-bottom: 1.875em;
 
}
 

	
 
#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.Directors ul li.Directors,
 
#container #sidebar.Eval ul li.Eval,
 
#container #sidebar.Overview ul li.Overview,
 
#container #sidebar.Contact ul li.Contact,
 
#container #sidebar.Officers ul li.Officers,
 
#container #sidebar.Staff ul li.Staff,
 
#container #sidebar.Outside ul li.Outside,
 
#container #sidebar.Filings ul li.Filings,
 
#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.VMwareLawsuitAppeal ul li.VMwareLawsuitAppeal,
 
#container #sidebar.VMwareCodeSimilarity ul li.VMwareCodeSimilarity,
 
#container #sidebar.CopyleftPrinciples ul li.CopyleftPrinciples,
 
#container #sidebar.VMwareLawsuitFAQ ul li.VMwareLawsuitFAQ,
 
#container #sidebar.AboutCompliance ul li.AboutCompliance
 
{
 
    color: #000033;
 
    font-weight: bold;
...
 
@@ -362,109 +359,116 @@ body.conservancy-sponsors #navbar ul li.sponsors a /* NO COMMA HERE! */
 
    background: linear-gradient(to top, #fff, #eaf1f1);
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaf1f1', endColorstr='#ffffff', GradientType=0);
 
}
 
body.conservancy-supporter #navbar ul li.supporter a
 
{
 
    color: #000033;
 
    font-weight: bold;
 
    background: #ffd843;
 
    background: -moz-linear-gradient(bottom, #fff, #ffd533);
 
    background: -webkit-linear-gradient(bottom, #fff, #ffd533);
 
    background: linear-gradient(to top, #fff, #ffd533);
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd533', endColorstr='#ffffff', GradientType=0);
 
}
 

	
 
#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;
 
}
 

	
 
#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: .7em .7em .7em .7em;
 
    padding: .2em .7em;
 
}
 
.fundraiser-top-text * {
 
    margin: .5em auto;
 
    max-width: 70em;
 
    width: 95%;
 
}
 
.fundraiser-top-text em {
 
.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;
 
}
www/conservancy/templates/base_conservancy.html
Show inline comments
 
{% load humanize %}
 
{% load subtract %}
 
{% load min %}
 

	
 
<!DOCTYPE html>
 

	
 
<html lang="en" prefix="og: http://ogp.me/ns#">
 

	
 
  <head>
 
    <title>{% block title %}{% block subtitle %}{% endblock %}Software Freedom Conservancy{% endblock %}</title>
 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
    <meta name="description" content="The Software Freedom Conservancy provides a non-profit home and services to Free, Libre and Open Source Software (FLOSS) projects." />
 
    <meta name="keywords" content="software, freedom, conservancy, open source, gnu, GNU, Open Source, Free and Open Source, Free and Open Source Software, FLOSS, FOSS, protect, protection, help, policy, linux, non-profit" />
 
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
 
    <link rel="stylesheet" type="text/css" media="screen" href="/css/conservancy.css" />
 
    <link rel="stylesheet" type="text/css" media="(min-width: 67em)" href="/css/conservancy-bigscreen.css" />
 
    <link rel="stylesheet" href="/css/jquery-ui-1.8.22.custom.css" />
 
    <link rel="stylesheet" href="/css/jquery.ui.multiprogressbar.css" />
 
    <script type="text/javascript" src="/js/jquery-1.7.2.js"></script>
 
    <script type="text/javascript" src="/js/jquery-ui-1.8.22.custom.min.js"></script>
 
    <script type="text/javascript" src="/js/jquery.outerhtml.js"></script>
 
    <script type="text/javascript" src="/js/jquery.ui.multiprogressbar.js"></script>
 
    <script type="text/javascript" src="/js/conservancy.js"></script>
 
    {% block head %}{% endblock %}
 
  </head>
 

	
 
  <body class="conservancy-{% block category %}other{% endblock %}">
 
    <h1 id="conservancyheader"><a id="logobutton" href="/">Software Freedom Conservancy</a></h1>
 
    <div id="navbar-outer">
 
      <div id="navbar">
 
	<ul>
 
      <li class="supporter"><a href="/supporter/">Become a Supporter!</a></li>
 
      <li class="donate"><a href="/donate/">Donate</a></li>
 
      <li class="news"><a href="/news/">News</a></li>
 
      <li class="blog"><a href="/blog/">Blog</a></li>
 
      <li class="Projects"><a href="/projects/">Projects</a></li>
 
      <li class="compliance"><a href="/copyleft-compliance/">Copyleft Compliance</a></li>
 
      <li class="npoacct"><a href="/npoacct/">NPOAcct</a></li>
 
      <li class="sponsors"><a href="/sponsors/">Sponsors</a></li>
 
      <li class="About"><a href="/about/">About</a></li>
 
    </ul>
 
      </div>
 
      <div id="navbar-clear"></div>
 

	
 
    </div>
 

	
 
{% comment %}
 
FUNDRAISER VARIABLES AND CONSTANTS GUIDE
 

	
 
sitefundgoal attributes:
 

	
 
fundraiser_goal_amount: The amount being matched
 
fundraiser_so_far_amount: The amount contributed so far
 
fundraiser_donation_count: The number of people who have contributed so far
 
fundraiser_donation_count_disclose_threshold: Not used
 

	
 
Local convenience variables:
 

	
 
this_match_goal: The amount being matched
 
this_match_so_far: The amount contributed so far
 
this_match_remaining: this_match_goal - this_match_so_far
 

	
 
{% endcomment %}
 

	
 
{% with this_match_goal=sitefundgoal.fundraiser_goal_amount this_match_so_far=sitefundgoal.fundraiser_so_far_amount %}
 
{% with this_match_remaining=this_match_goal|subtract:this_match_so_far %}
 
    <div class="fundraiser-top-text">
 
      <em>
 
      <p>
 
        {% if this_match_remaining <= 0 %}
 
        Thanks to {{ sitegoal.fundraiser_donation_count|intcomma }} Supporters we earned our full match!  Help us go further to stand up for software
 
        freedom &mdash; <a href="/supporter">sign up now</a>!
 
        {% else %}
 
        Let's stand up for software freedom together!
 
        The next ${{ this_match_remaining|floatformat:0|intcomma }} we receive from Supporters and donors will be matched!  <a href="/supporter/">Join today!</a>
 
        {% endif %}
 
      </em>
 
      </p>
 
<div id="siteprogressbar">
 
<a href="/supporter">
 
  We've matched
 
  {% if this_match_remaining <= 0 %}
 
  $<span id="site-fundraiser-match-count">{{ this_match_goal|intcomma }}</span>
 
  {% else %}
 
  $<span id="site-fundraiser-match-count">{{ this_match_so_far|intcomma }}</span>
 
  {% endif %}
 
  of
 
  $<span id="site-fundraiser-final-goal">{{ this_match_goal|intcomma }}</span>
 
  so far!
 
</a>
 
</div>
 
</div>
 
{% endwith %}
 
{% endwith %}
 

	
 
      {% block outercontent %}<div id="mainContent"> {% block content %}{% endblock %}</div>{% endblock %}
 
    <div id="conservancyfooter">
 
      <p>Connect with Conservancy on
 
        <a href="https://mastodon.technology/@conservancy">Mastodon</a>,
 
        <a href="https://twitter.com/conservancy">Twitter</a>,
 
        <a href="https://identi.ca/conservancy">pump.io</a>,
 
        <a href="https://plus.google.com/104268783278405704634/">Google+</a>,
 
        <a href="https://www.facebook.com/SoftwareFreedomConservancy/">Facebook</a>,
 
        and <a href="https://www.youtube.com/channel/UCUEeuNvX2UyTTyTYXR9dm_A">YouTube</a>.</p>
 

	
 
      <p><a href="/">Main Page</a> | <a href="/about/contact/">Contact</a> | <a href="/sponsors/">Sponsors</a> | <a href="/privacy-policy/">Privacy Policy</a> | <a href="/feeds/omnibus/">RSS Feed</a></p>
 

	
 
      <p class="copyright_info">
 
      <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a> 
 
      <br />This page, and all contents herein, unless a license is otherwise
 
      specified, are licensed under a
 
      <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0">Creative
 
      Commons Attribution-ShareAlike 4.0 International License</a>.</p>
 
    </div>
 
  </body>
 
</html>
0 comments (0 inline, 0 general)