Improve the interview page #888

Merged
eal merged 7 commits from fix/supporter-page into master 2019-05-25 14:11:47 +00:00
4 changed files with 66 additions and 39 deletions
Showing only changes of commit f2f8e4a16b - Show all commits

View File

@ -27,14 +27,13 @@
"I am Cryptie, I am living in Paris, France. I used to be a cryptographer
and now I am a privacy specialist. I consciously use Free Software for 15 years now. I discovered the FSFE
randomly, I found the FSFE website and just loved this idea of counter-lobbying. I am a supporter of the FSFE
for
already 6 years now."
for already 6 years now."
</em>
</p>
</blockquote>
<div class="interview-portrait"
style="background-image: url('/picturebase/people/2018-cryptie-300px.jpg')"
title="Amandine “Cryptie"></div>
title="Amandine “Cryptie"></div>
</div>
<div class="row text-center">
@ -150,19 +149,17 @@
<img src="/about/graphics/stars.png"/>
</div>
<a href="https://my.fsfe.org/support">
<figure>
<img
src="/picturebase/people/201808-community-meeting-rmll-800px.jpg"
alt="Community Meeting"/>
<figcaption>
<div style="margin: 1rem 0 1.5rem;">
<a class="big-donate" href="https://my.fsfe.org/support">Become a supporter</a>
</div>
By becoming a FSFE supporter you empower our work and help to assure our financial independence.
</figcaption>
</figure>
</a>
<figure>
<img
src="/picturebase/people/201808-community-meeting-rmll-800px.jpg"
alt="Community Meeting"/>
<figcaption>
By becoming a FSFE supporter you empower our work and help to assure our financial independence.
</figcaption>
</figure>
<div class="interview-support-btn-container">
<a class="big-donate" href="https://my.fsfe.org/support">Become a supporter</a>
</div>
</body>

View File

@ -17,6 +17,10 @@ figure {
z-index: 500;
}
video {
width: 100%;
}
.figcaption,
figcaption {
background-color: @gray-lighter;

2
look/fsfe.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -1,14 +1,14 @@
.interview {
.interview-quote-container {
align-items: stretch;
display: flex;
flex-direction: column;
margin-bottom: 3rem;
margin-top: 3rem;
blockquote {
flex: 1;
margin-bottom: 0;
margin-top: 0;
margin: 0;
order: 2;
}
.interview-portrait {
@ -16,6 +16,7 @@
background-repeat: no-repeat;
background-size: cover;
flex: 0 0 200px;
order: 1;
}
}
@ -26,14 +27,10 @@
img {
transform: rotate(90deg);
height: 10rem;
height: 8rem;
}
}
.interview-video {
width: 100%;
}
.question {
font-size: 110%;
font-weight: bold;
@ -45,21 +42,50 @@
padding-left: 1em;
}
.quote-picture {
flex: 0 0 20rem;
height: auto;
max-height: 200px;
.interview-support-btn-container {
margin: 30px 0 40px;
}
.icons {
padding: 1em 0 0 0;
float: right;
}
.videocaption {
margin: 0 3em 0 3em;
text-align: center;
font-size: 0.8em;
opacity: 0.7;
// Hide the sidebar on mobile devices.
// It doesn't contain any content but the "become a supporter" button, yet.
// This button is also displayed at the bottom of the page.
#sidebar {
display: none;
}
}
@media screen and (min-width: @screen-sm-min) {
.interview {
.interview-quote-container {
align-items: stretch;
flex-direction: row;
blockquote {
margin-left: -3em;
order: 1;
}
.interview-portrait {
flex: 0 0 200px;
order: 2;
img {
border-radius: 0;
}
}
}
#sidebar {
display: block;
}
}
}
@media screen and (min-width: @screen-md-min) {
.interview {
.interview-support-btn-container {
margin: 30px auto 40px;
max-width: 90%;
}
}
}