Don't hard code style; use class and improve CSS

This changes the hard-coded style for what I'm calling the
content-with-donate-sidebar.  The advantage of not hard-coding style are
obvious, but I'm doing this now rather than later so that I can add
changes to the CSS that causes the width to extend to 100% on smaller
screen media when the donate bar disappears (the latter of which is
already implemented).
This commit is contained in:
Bradley M. Kuhn 2015-03-05 13:25:08 -08:00
parent 44491e67fc
commit 32e9164d48
5 changed files with 13 additions and 4 deletions

View file

@ -36,6 +36,10 @@ text-decoration: none; color: #557733;
}
@media all and (max-width: 625px) {
.donate-sidebar { display: none; }
.content-with-donate-sidebar {
align: center;
width: 100%;
}
}
p.footnote {
@ -113,6 +117,11 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
margin-right: 50px;
}
.content-with-donate-sidebar {
align: left;
width: 80%;
}
#container {
width: 100%;
overflow: hidden;

View file

@ -268,7 +268,7 @@ Other donation methods:
</td></tr></table>
</div>
<div style="align:left;width:80%;">
<div class="content-with-donate-sidebar">
<!-- begin campaign text -->
<h2>Fundraising Campaign: Non-Profit Accounting Software</h2>

View file

@ -12,7 +12,7 @@
{% endblock %}
{% block content %}
<div style="align:left;width:80%;">
<div class="content-with-donate-sidebar">
<h1>Conservancy Supporter Night 2015</h1>
<p>
<dl>

View file

@ -55,7 +55,7 @@ Other annual supporters methods:
</div>
<div style="align:left;width:80%;">
<div class="content-with-donate-sidebar">
<h1><img class="appeal-header" alt="Become a Conservancy Supporter!" src="/img/conservancy-supporter-header.png"/></h1>
<p>Software Freedom Conservancy is an essential organization to free and

View file

@ -38,7 +38,7 @@ of $<span id="fundraiser-goal">50,000</span> match met.<br/>
Supporter</strong></a>.</p>
</td></tr></table>
</div>
<div style="align:left;width:80%;">
<div class="content-with-donate-sidebar">
<div id="container">
<div id="sidebar" class="{% block submenuselection %}other{% endblock %}">
<h2>Our GPL {% block category %}Compliance{% endblock %} Work</h2>