Rework CSS for "Big News" & add image.
This image now is displayed with the same background and to the left of the "Big News". I spent extensive time researching how best to present a larger <div> with the grey background and have the image properly scale beside it. Ultimately, I couldn't find a better way than this, and this is hardly optimal. For example, I looked into wrapping the whole thing in a div, with two div's inside, and applying various CSS to each to get the image to properly stay right next to the text and scale in size when resizing of media made paragraph longer. This generated even more problems, so I went with the simpler solution herein, which probably isn't correct and may well do odd things on different types of media.
This commit is contained in:
parent
8e22371f19
commit
af5d12f7a1
2 changed files with 21 additions and 4 deletions
|
@ -70,3 +70,18 @@ img.appeal-footer {
|
||||||
min-width: 1%;
|
min-width: 1%;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
img.appeal-match {
|
||||||
|
float: left;
|
||||||
|
height: auto;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
width: 10%;
|
||||||
|
margin-top: .25em;
|
||||||
|
margin-bottom: .25em;
|
||||||
|
margin-right: 1em;
|
||||||
|
background: #eee;
|
||||||
|
}
|
||||||
|
p.appeal-match-text {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
background: #eee;
|
||||||
|
}
|
||||||
|
|
|
@ -63,12 +63,14 @@ Other payment methods to become an annual supporter:
|
||||||
<div style="align:left;width:80%;">
|
<div style="align:left;width:80%;">
|
||||||
<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>
|
||||||
|
|
||||||
<blockquote>
|
<img class="appeal-match" alt="*"
|
||||||
<p><strong>Big News:</strong> A generous anonymous donor has agreed to donate
|
src="/img/conservancy-supporter-heart-3x.png"/>
|
||||||
|
<p class="appeal-match-text"><strong>Big News:</strong> A generous anonymous donor has agreed to donate
|
||||||
$2 of every $1 in supporter donations (up to $5k total)! You can
|
$2 of every $1 in supporter donations (up to $5k total)! You can
|
||||||
effectively triple your donation if you
|
effectively triple your donation if you
|
||||||
<a href="#donate-box" class="donate-now">just support us now!</a></p>
|
<a href="#donate-box" class="donate-now">just support us now!</a>
|
||||||
</blockquote><br/><hr/>
|
</p>
|
||||||
|
<br/> <hr/>
|
||||||
<p>Software Freedom Conservancy is an essential organization to free and
|
<p>Software Freedom Conservancy is an essential organization to free and
|
||||||
open source software. We are the home of over
|
open source software. We are the home of over
|
||||||
<a href="/members/current/">30 projects</a> like
|
<a href="/members/current/">30 projects</a> like
|
||||||
|
|
Loading…
Reference in a new issue