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) { @media all and (max-width: 625px) {
.donate-sidebar { display: none; } .donate-sidebar { display: none; }
.content-with-donate-sidebar {
align: center;
width: 100%;
}
} }
p.footnote { p.footnote {
@ -113,6 +117,11 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
margin-right: 50px; margin-right: 50px;
} }
.content-with-donate-sidebar {
align: left;
width: 80%;
}
#container { #container {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;

View file

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

View file

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

View file

@ -55,7 +55,7 @@ Other annual supporters methods:
</div> </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> <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 <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> Supporter</strong></a>.</p>
</td></tr></table> </td></tr></table>
</div> </div>
<div style="align:left;width:80%;"> <div class="content-with-donate-sidebar">
<div id="container"> <div id="container">
<div id="sidebar" class="{% block submenuselection %}other{% endblock %}"> <div id="sidebar" class="{% block submenuselection %}other{% endblock %}">
<h2>Our GPL {% block category %}Compliance{% endblock %} Work</h2> <h2>Our GPL {% block category %}Compliance{% endblock %} Work</h2>