FSFE/fsfe-website
26
31
Fork 91
Code Issues 63 Pull Requests 15 Wiki Activity

Improve interview page layout
All checks were successful
the build was successful
Details

Browse Source
This commit is contained in:
Michael Weimann 2019-04-29 20:36:44 +02:00
parent f703acaf79
commit b0d6943422
Signed by: mweimann
GPG Key ID: 34F0524D4DA694A1
5 changed files with 124 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
about/people/interviews/cryptie.en.xhtml
View File

@ -11,7 +11,7 @@
</div>
</sidebar>
<body class="bio testimonial">
<body class="bio interview">
<p id="category"><a href="../testimonials.html">Testimonials</a></p>
@ -20,25 +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="row">
<div class="col-12 col-sm-9">
<blockquote class="quote-container"><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></p>
</blockquote>
</div>
<div class="col-3 col-sm-3">
<figure class="figure">
<img class="img-circle" src="/picturebase/people/2018-cryptie-300px.jpg" width="150" alt="A photographic portrait"
title="Amandine “Cryptie"/>
</figure>
</div>
<div class="interview-quote-container">
<blockquote>
<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>
</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">
@ -53,13 +49,14 @@
</div>
</div>
<div style="max-width: 80px; margin: 2em auto 2em auto;"><img src="/about/graphics/stars.png"/></div>
<div class="interview-fsfe-divider">
<img src="/about/graphics/stars.png"/>
</div>
<h2 class="clear" 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 style="align:center; padding: 0em 2em 0em 2em;" width="100%" crossorigin="crossorigin"
<video class="interview-video" crossorigin="crossorigin"
poster="https://download.fsfe.org/videos/supporter/posters/cryptie.jpg" controls="controls">
<source media="screen and (min-device-width:1000px)" type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;"
src="https://download.fsfe.org/videos/supporter/cryptie_desktop.mp4"></source>
@ -71,19 +68,23 @@
src="https://download.fsfe.org/videos/supporter/cryptie_mobile.webm"></source>
<track default="default" label="English" srclang="en" kind="subtitles"
src="https://download.fsfe.org/videos/supporter/subtitles/cryptie.vtt"></track>
</video>
<figcaption class="videocaption"><p>Video by <a href="https://vimeo.com/nosabo">David Vagt</a>. No animals have been
harmed and the following Free Software has been used: <a href="https://kdenlive.org/" target="_blank">kdenlive</a>,
<a href="https://blender.org/" target="_blank">blender</a>, <a href="https://lmms.io/" target="_blank">LMMS</a>, <a
href="https://audacityteam.org/" target="_blank">Audacity</a> and <a href="https://ffmpeg.org/" target="_blank">ffmpeg</a>.
</p>
<figcaption>
<p>
Video by <a href="https://vimeo.com/nosabo">David Vagt</a>. No animals have been
harmed and the following Free Software has been used: <a href="https://kdenlive.org/" target="_blank">kdenlive</a>,
<a href="https://blender.org/" target="_blank">blender</a>, <a href="https://lmms.io/" target="_blank">LMMS</a>,
<a
href="https://audacityteam.org/" target="_blank">Audacity</a> and <a href="https://ffmpeg.org/"
target="_blank">ffmpeg</a>.
</p>
</figcaption>
</figure>
<div style="max-width: 80px; margin: 2em auto 2em auto;"><img src="/about/graphics/stars.png"/></div>
<div class="interview-fsfe-divider">
<img src="/about/graphics/stars.png"/>
</div>
<h2 id="interview" class="clear">Short Interview with Cryptie (2019)</h2>
@ -116,8 +117,13 @@
Software"</a>.This campaign is so positive, it reminds each of us that Free Software won't exist without the
volunteers behind it. </p>
<div style="max-width: 400px; width: 40%; margin: 2em auto 2em auto;"><a href="https://www.ilovefs.org"><img
src="/contribute/promopics/ilovefs-sticker_burgundy_thumb.png"/></a></div>
<a href="https://www.ilovefs.org">
<figure>
<img
src="/contribute/promopics/ilovefs-sticker_burgundy_thumb.png"
alt="I Love Free Software"/>
</figure>
</a>
<h2 class="question" style="clear: both;">In one sentence: What is the biggest benefit of Free Software?</h2>
@ -140,17 +146,23 @@
<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 style="max-width: 80px; margin: 2em auto 2em auto;"><img src="/about/graphics/stars.png"/></div>
<div style="margin: 3em 0 1em 0;">
<a class="big-donate" href="https://my.fsfe.org/support">Become a supporter</a>
<div class="interview-fsfe-divider">
<img src="/about/graphics/stars.png"/>
</div>
<div style="padding:1em;"><a href="https://my.fsfe.org/support"><img
src="/picturebase/people/201808-community-meeting-rmll-800px.jpg"/></a></div>
<p class="supporter-text">By becoming a FSFE supporter you empower our work and help to assure our financial
independence.</p>
<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>
</body>

2
look/fsfe.less
View File

@ -1,6 +1,6 @@
@import "style.less";
@import "elements/figure";
@import "pages/testimonial";
@import "pages/interview";
/* fsfe.org pages */

6
look/fsfe.min.css vendored
View File

File diff suppressed because one or more lines are too long

65
look/pages/interview.less Normal file
View File

@ -0,0 +1,65 @@
.interview {
.interview-quote-container {
align-items: stretch;
display: flex;
margin-bottom: 3rem;
margin-top: 3rem;
blockquote {
flex: 1;
margin-bottom: 0;
margin-top: 0;
}
.interview-portrait {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
flex: 0 0 200px;
}
}
.interview-fsfe-divider {
margin-bottom: 3rem;
margin-top: 3rem;
text-align: center;
img {
transform: rotate(90deg);
height: 10rem;
}
}
.interview-video {
width: 100%;
}
.question {
font-size: 110%;
font-weight: bold;
margin-bottom: 1em;
margin-top: 2em;
}
.answer {
padding-left: 1em;
}
.quote-picture {
flex: 0 0 20rem;
height: auto;
max-height: 200px;
}
.icons {
padding: 1em 0 0 0;
float: right;
}
.videocaption {
margin: 0 3em 0 3em;
text-align: center;
font-size: 0.8em;
opacity: 0.7;
}
}

39
look/pages/testimonial.less
View File

@ -1,39 +0,0 @@
.testimonial {
h2.clear {
padding-top: 2em;
}
.question {
font-size: 110%;
font-weight: bold;
margin-bottom: 1em;
margin-top: 2em;
}
.answer {
padding-left: 1em;
}
.quote-container {
display: flex;
gap: 1em;
}
.quote-picture {
flex: 0 0 20rem;
height: auto;
max-height: 200px;
}
.icons {
padding: 1em 0 0 0;
float: right;
}
.videocaption {
margin: 0 3em 0 3em;
text-align: center;
font-size: 0.8em;
opacity: 0.7;
}
}