Tweaks the interview style

This commit is contained in:
Michael Weimann 2019-05-14 21:58:48 +02:00
parent 66ca4dca1e
commit 76b06a91b3
Signed by: mweimann
GPG Key ID: 34F0524D4DA694A1
3 changed files with 18 additions and 89 deletions

View File

@ -20,39 +20,21 @@
<p>This page is part of a series of interviews with FSFE supporters and friends to help give a face to our community.
Get an overview about our interviews on the <a href="../testimonials.html">testimonials</a> page</p>
<div class="interview-quote-container">
<blockquote>
<blockquote>
<div class="with-image-right">
<img class="img-circle" src="/picturebase/people/2018-cryptie-300px.jpg" alt="Cryptie"/>
<p>
<em>
"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."
</em>
"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."
</p>
</blockquote>
<div class="interview-portrait"
style="background-image: url('/picturebase/people/2018-cryptie-300px.jpg')"
title="Amandine “Cryptie“"></div>
</div>
<div class="row text-center">
<div class="col-6 col-sm-6 col-md-4 col-lg-3 col-xl-3 mb-3">
<a href="#video-30s-cryptie"><img src="/graphics/video32.png"
alt="Watch The FSFE and me in 30 seconds with Cryptie"/></a>
</div>
</blockquote>
<div class="col-6 col-sm-6 col-md-4 col-lg-3 col-xl-3 mb-3">
<a href="#interview"><img src="/graphics/mic32.png" alt="Read our short-interview with Cryptie"/></a>
</div>
</div>
<div class="interview-fsfe-divider">
<img src="/about/graphics/stars.png"/>
</div>
<h2 id="video-30s-cryptie">"The FSFE and me in 30 seconds"</h2>
<h2 id="video-30s-cryptie">
"The FSFE and me in 30 seconds"
</h2>
<figure>
<video class="interview-video" crossorigin="crossorigin"
@ -81,11 +63,9 @@
</figure>
<div class="interview-fsfe-divider">
<img src="/about/graphics/stars.png"/>
</div>
<h2 id="interview" class="clear">Short Interview with Cryptie (2019)</h2>
<h2 id="interview" class="clear">
Short Interview with Cryptie (2019)
</h2>
<p class="question">FSFE: Beyond supporting the FSFE, you also engage as a volunteer. What are you doing for FSFE?</p>
@ -145,10 +125,6 @@
<p class="answer">I hope that more and more people will understand the importance of being ethical in their digital life
and thus consciously use Free Software and that we will have more and more volunteers from all over Europe.</p>
<div class="interview-fsfe-divider">
<img src="/about/graphics/stars.png"/>
</div>
<figure>
<img
src="/picturebase/people/201808-community-meeting-rmll-800px.jpg"

2
look/fsfe.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -3,42 +3,14 @@
padding-right: 0;
}
.interview-quote-container {
display: flex;
flex-direction: column;
margin-bottom: 3rem;
margin-top: 3rem;
blockquote {
flex: 1;
margin: 0;
order: 2;
}
.interview-portrait {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
flex: 0 0 200px;
order: 1;
}
}
.interview-fsfe-divider {
margin-bottom: 3rem;
margin-top: 3rem;
text-align: center;
img {
transform: rotate(90deg);
height: 8rem;
}
h2 {
margin-top: 8rem;
}
.question {
font-size: 110%;
font-weight: bold;
margin-bottom: 1em;
margin-bottom: .5em;
margin-top: 2em;
}
@ -64,25 +36,6 @@
padding-right: 15px;
}
.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;
}