Changeset - b36800e0784f
[Not reviewed]
0 6 0
Ben Sturmfels (bsturmfels) - 2 years ago 2021-10-15 10:43:43
ben@sturm.com.au
Apply max widths and margins to all pages.

Due to the varying types of layouts used and the short time-frame the best
option seems to set a max-width etc. around the "outercontent" block. For now
this means we can't do "full bleed" body content, but that's not currently used
anyway.
6 files changed with 14 insertions and 12 deletions:
0 comments (0 inline, 0 general)
www/conservancy/static/css/conservancy.css
Show inline comments
...
 
@@ -102,192 +102,192 @@ a.read-more {
 
.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 {
 
    position: fixed;
 
    top: 180px;
 
    right: 2%;
 
    width: 18%;
 
}
 
@media all and (max-width: 725px) {
 
    .donate-sidebar { display: none; }
 
    .content-with-donate-sidebar {
 
        align: center;
 
        width: 100%;
 
    }
 
}
 

	
 
p.footnote {
 
    font-size: 85%;
 
}
 

	
 
h1 { margin-top: .75em; margin-bottom: .5em; }
 
/* h2 { 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);
 
}
 
#navbar ul {
 
  list-style: none;
 
  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
 
  }
 
}
 

	
 

	
 
#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;
 
}
 
#navbar li ul a {
 
  font-weight: normal;
 
}
 
#navbar li:hover ul {
 
  display: block;
 
}
 
#navbar li:last-child ul {
 
/* 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;
 
}
 

	
 

	
 

	
 
#mainContent {
 
  margin: 0 auto;
 
  overflow: auto;
 
}
 
#sidebar + #mainContent {
 
    float: left;
 
}
 

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

	
 
.content-with-donate-sidebar {
 
    align: left;
www/conservancy/static/error/401/index.html
Show inline comments
 
{% extends "base_error.html" %}
 
{% block content %}
 

	
 
<h1>401 Error</h1>
 

	
 
<p>The page you request at <tt>sfconservancy.org</tt>
 
<p>The page you requested at <tt>sfconservancy.org</tt>
 
requires authorization.  Please use the navigation items to find a
 
page that you are authorized to see.</p>
 

	
 
{% endblock %}
www/conservancy/static/error/403/index.html
Show inline comments
 
{% extends "base_error.html" %}
 
{% block content %}
 

	
 
<h1>403 Error</h1>
 

	
 
<p>The page you request at <tt>sfconservancy.org</tt>
 
<p>The page you requested at <tt>sfconservancy.org</tt>
 
does not have read permission.  Please use the navigation items to
 
find a page that you are authorized to see.</p>
 

	
 
{% endblock %}
www/conservancy/static/error/404/index.html
Show inline comments
 
{% extends "base_error.html" %}
 
{% block content %}
 

	
 
<h1>404 Error</h1>
 

	
 
<p>The page you request at <tt>sfconservancy.org</tt>
 
<p>The page you requested at <tt>sfconservancy.org</tt>
 
was not found.  Please use the navigation items to find a page that is
 
available.</p>
 

	
 
{% endblock %}
www/conservancy/templates/500.html
Show inline comments
 
{% extends "base_error.html" %}
 
{% block content %}
 

	
 
<h1>500 Error</h1>
 

	
 
<p>The page you request at <tt>sfconservancy.org</tt> is
 
<p>The page you requested at <tt>sfconservancy.org</tt> is
 
unavailable due to an internal server error.</p>
 

	
 
{% endblock %}
www/conservancy/templates/base_conservancy.html
Show inline comments
 
{% load humanize %}
 
{% load subtract %}
 
{% load min %}
 
{% load static %}
 

	
 
<!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="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
 
    <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" href="{% static 'css/tachyons.css' %}"/>
 
    <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 %}">
 
    <header>
 
      <div class="flex-ns center mw8">
 
        <div class="w-60-ns">
 
          <h1 id="conservancyheader" class="mt2 mt3-ns mb2 mb3-ns">
 
            <a href="/">
 
              <img src="{% static 'img/conservancy-header.svg' %}" alt="Software Freedom Conservancy" class="db center mh3-ns" />
 
            </a>
 
          </h1>
 
        </div>
 

	
 
        <div class="w-40-ns mt2 mt4-ns mb2 mb2-ns mh2 pt1 flex flex-wrap justify-center items-center">
 
          <a href="/donate/" class="f5 mh1 mv1 ph2 pv1 ttu b btn-orange">Donate</a>
 
          <a href="/sustainer/" class="f5 mh1 mv1 ph2 pv1 ttu b btn-orange">Join</a>
 
          <a href="#fixme" class="f5 mh1 mv1 ph2 pv1 mr2 ttu b btn-white">Special</a>
 
        </div>
 
      </div>
 
    </header>
 

	
 
    <div id="navbar-outer">
 
    <div id="navbar-outer" class="mb2">
 
      <div id="navbar" class="center mw8 nested-list-resetb">
 
        <ul class="f5 b ttu flex flex-wrap justify-center">
 
          <!-- Remaining previous menu items
 
          <li class="Projects"><a href="/projects/">Projects</a></li>
 
          <li class="npoacct"><a href="/npoacct/">NPOAcct</a></li>
 
          -->
 

	
 
          <li class="home dn db-ns"><a href="/">Home</a></li>
 
          <li class="what"><a href="#fixme">What <span class="dn di-ns">we do</span></a>
 
            <ul>
 
              <li><a href="#fixme">Member Projects</a></li>
 
              <li><a href="/copyleft-compliance/">Copyleft Compliance</a></li>
 
              <li><a href="#fixme">Special</a></li>
 
              <li><a href="#fixme">Public Filings</a></li>
 
              <li><a href="#fixme">FAQs</a></li>
 
            </ul>
 
          </li>
 
          <li class="who"><a href="#fixme">Who <span class="dn di-ns">we are</span></a>
 
            <ul>
 
              <li><a href="/sponsors/">Sponsors</a></li>
 
              <li><a href="/sustainers/">Sustainers</a></li>
 
              <li><a href="/sustainer/">Sustainers</a></li>
 
              <li><a href="#fixme">Board of Directors</a></li>
 
              <li><a href="#fixme">Staff</a></li>
 
              <li><a href="#fixme">Evaluation Committee</a></li>
 
              <li><a href="#fixme">Outside Counsel, et alia</a></li>
 
              <li><a href="#fixme">Partner Organizations</a></li>
 
            </ul>
 
          </li>
 
          <li class="learn"><a href="#fixme">Learn</a>
 
            <ul>
 
              <li><a href="#fixme">Glossary of Terms</a></li>
 
              <li><a href="#fixme">Q&A</a></li>
 
              <li><a href="#fixme">Recommended Resources</a></li>
 
              <li><a href="#fixme">In The News</a></li>
 
            </ul>
 
          </li>
 
          <li class="news"><a href="/news/">News</a>
 
            <ul>
 
              <li><a href="#fixme">News Releases</a></li>
 
              <li><a href="/blog/">Blog</a></li>
 
              <li><a href="#fixme">In The News</a></li>
 
              <li><a href="#fixme">Press Kit</a></li>
 
            </ul>
 
          </li>
 
          <li class="about"><a href="/about/">About</a>
 
            <ul>
 
              <li><a href="#fixme">Who we are</a></li>
 
              <li><a href="#fixme">Transparency</a></li>
 
              <li><a href="#fixme">Contact</a></li>
 
            </ul>
 
          </li>
 
        </ul>
 
      </div>
 
      <div id="navbar-clear"></div>
 

	
 
    </div>
 

	
 
{% comment %}
 
# FUNDRAISER VARIABLES AND CONSTANTS GUIDE
 

	
 
## From Local Context
 

	
 
* datetime_now: Current DateTime in UTC
 
* sitefundgoal: The current FundraisingGoal. 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: The number of new Sustainers that can be double-matched this fundraiser.
 
      (No, this name makes no sense. We're repurposing an existing model field for this new reason.)
...
 
@@ -128,68 +128,71 @@
 
{% endcomment %}
 

	
 
{% if sitefundgoal and sitefundgoal.fundraiser_so_far_amount and datetime_now < sitefundgoal_endtime %}
 
{% 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 sitefundgoal_timeleft=sitefundgoal_endtime|subtract:datetime_now %}
 
    <div class="fundraiser-top-text">
 
      <p>
 
        {% if this_match_remaining <= 0 %}
 
          Thanks to {{ sitegoal.fundraiser_donation_count|intcomma }} Sustainers we earned our full match!
 
          Help us go further to stand up for software freedom &mdash; <a href="/sustainer">sign up now</a>!
 
        {% else %}
 
          {% if sitefundgoal_timeleft.total_seconds <= 0 %}
 
            The
 
          {% elif sitefundgoal_timeleft.days == 0 %}
 
            Through today only, the
 
          {% elif sitefundgoal_timeleft.days == 1 %}
 
            Through tomorrow only, the
 
          {% elif sitefundgoal_timeleft.days < 14 %}
 
            For only {{ sitefundgoal_timeleft.days }} more days, the
 
          {% else %}
 
            Until January 15, the
 
          {% endif %}
 
        next ${{ this_match_remaining|floatformat:0|intcomma }} of <a href="/sustainer/">support we receive</a> will be matched!
 

	
 
        {% endif %}
 
      </p>
 

	
 
{% if sitefundgoal.fundraiser_so_far_amount %}
 
<div id="siteprogressbar">
 
<a href="/sustainer">
 
  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>
 
{% endif %}
 

	
 
</div>
 
{% endwith %}
 
{% endwith %}
 
{% endif %}
 

	
 
      {% block outercontent %}<div id="mainContent" class="mw8"> {% block content %}{% endblock %}</div>{% endblock %}
 
    <div class="mw8 center ph2 ph3-ns">
 
      {% block outercontent %}<div id="mainContent"> {% block content %}{% endblock %}</div>{% endblock %}
 
    </div>
 

	
 
    <div id="conservancyfooter" class="mt4 pt3 ph3 bg-light-gray">
 
      <p>Connect with Conservancy on
 
        <a href="https://mastodon.technology/@conservancy">Mastodon</a>,
 
        <a href="https://twitter.com/conservancy">Twitter</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>Our privacy policy was last updated <strong>22 December 2020</strong>.</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)