Extract community/people css to a separate file; fixes mobile layout #767

Closed
mweimann wants to merge 4 commits from fix-community-people-mobile into master
6 changed files with 261 additions and 156 deletions

View File

@ -62,3 +62,17 @@ Join them to spread the message of our community in all over Europe and beyond.
## Build
You can build the fsfe.org website on your own computer to make previews of single pages possible offline and without having to wait for an online website build. A [dedicated wiki page](https://wiki.fsfe.org/TechDocs/Mainpage/BuildLocally) tells you how to do it.
### Building the styles
This project uses [Less](http://lesscss.org/) for styles.
Before you can compile the styles,
you have to [install Less](http://lesscss.org/usage/#command-line-usage-installing).
Then run these commands to compile the Less to CSS:
# with minification (-x)
lessc look/fsfe.less look/fsfe.min.css -x
# without minification (e.g. development builds)
lessc look/fsfe.less look/fsfe.min.css

View File

@ -1,182 +1,193 @@
<?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
<title>Amandine “Cryptie”</title>
<style type="text/css">
h2.clear {
padding-top: 2em;
}
.question {
font-size: 110%;
font-weight: bold;
margin-bottom: 1em;
margin-top: 2em;
}
.answer {
padding-left: 1em;
}
<head>
<title>Amandine “Cryptie”</title>
</head>
.quote-container {
display: flex;
gap: 1em;
}
.quote-picture {
flex: 0 0 20rem;
height: auto;
max-height: 200px;
}
<sidebar promo="none">
.icons {
margin-right: 2em;
float:right;
}
<h2>About FSFE</h2>
.videocaption {
margin: 0 3em 0 3em;
text-align:center;
font-size:0.8em;
opacity: 0.7;
}
</style>
</head>
<sidebar promo="none">
<h2>About FSFE</h2>
<p>Free Software Foundation Europe is a charity that empowers users to control technology.</p>
<p><a href="/about/about.en.html" class="learn-more">Learn more</a></p>
<p>Software is deeply involved in all aspects of our lives. It is important that this technology empowers rather than restricts us. Free Software gives everybody the rights to use, understand, adapt and share software. These rights help support other fundamental rights like freedom of speech, freedom of press and privacy. </p>
<h2>Support the FSFE</h2>
<div><a href="https://my.fsfe.org/support"><img src="/picturebase/people/201808-community-meeting-rmll-400px.jpg" style="max-width:100%" /></a></div>
<p>Free Software Foundation Europe is a charity that empowers users to control technology.</p>
<p><a href="/about/about.en.html" class="learn-more">Learn more</a></p>
<p>Software is deeply involved in all aspects of our lives. It is important that this technology empowers rather than
restricts us. Free Software gives everybody the rights to use, understand, adapt and share software. These rights
help support other fundamental rights like freedom of speech, freedom of press and privacy. </p>
<h2>Support the FSFE</h2>
<div>
<a href="https://my.fsfe.org/support">
<img src="/picturebase/people/201808-community-meeting-rmll-400px.jpg" style="max-width:100%"/>
</a>
</div>
<p class="supporter-text">
By becoming a FSFE supporter you empower our work and
help to assure our financial independence.
</p>
<a class="big-donate" href="https://my.fsfe.org/support">Become a supporter</a>
<p class="supporter-text">By becoming a FSFE supporter you empower our work and help to assure our financial independence.</p>
<a class="big-donate" href="https://my.fsfe.org/support">Become a supporter</a>
</sidebar>
<body class="bio">
<!--
this navigation element will be added later, after we have the people-page below
<p id="category"><a href="../people.en.html">Community people</a></p>
-->
<h1>Amandine “Cryptie”</h1>
<div>
<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> <br /><span class="icons"><a href="#video-30s-cryptie"><img style="margin-right:0.5em;" src="/graphics/video32.png" title="Watch The FSFE and me in 30 seconds with Cryptie" /></a><a href="#interview"><img src="/graphics/mic32.png" title="Read our short-interview with Cryptie" /></a></span></p>
<body class="bio community-people">
<!--
this navigation element will be added later, after we have the people-page below
<img class="quote-picture" src="2018-cryptie.jpg" alt="A photographic portrait" title="Amandine “Cryptie" /></blockquote>
</div>
<h2 class="clear" id="video-30s-cryptie">"The FSFE and me in 30 seconds"</h2>
<p id="category"><a href="../people.en.html">Community people</a></p>
-->
<h1>Amandine “Cryptie”</h1>
<div>
<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><br/>
<span class="icons">
<a href="#video-30s-cryptie">
<img style="margin-right:0.5em;"
src="/graphics/video32.png"
title="Watch The FSFE and me in 30 seconds with Cryptie"/>
</a>
<a href="#interview">
<img src="/graphics/mic32.png" title="Read our short-interview with Cryptie"/>
</a>
</span>
</p>
<div class="quote-picture-container">
<img class="quote-picture" src="2018-cryptie.jpg" alt="A photographic portrait" title="Amandine “Cryptie”"/>
</div>
</blockquote>
</div>
<h2 class="clear" id="video-30s-cryptie">"The FSFE and me in 30 seconds"</h2>
<figure>
<video class="community-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>
<source media="screen and (min-device-width:1000px)" type="video/webm; codecs=&quot;vp9, opus&quot;"
src="https://download.fsfe.org/videos/supporter/cryptie_desktop.webm"></source>
<source media="screen and (max-device-width:999px)" type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;"
src="https://download.fsfe.org/videos/supporter/cryptie_mobile.mp4"></source>
<source media="screen and (max-device-width:999px)" type="video/webm; codecs=&quot;vp9, opus&quot;"
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="_blanc">kdenlive</a>,
<a href="https://blender.org/" target="_blanc">blender</a>, <a href="https://lmms.io/" target="_blanc">LMMS</a>, <a
href="https://audacityteam.org/" target="_blanc">Audacity</a> and <a href="https://ffmpeg.org/" target="_blanc">ffmpeg</a>.
</p>
</figcaption>
</figure>
<h2 id="interview" class="clear">Short Interview with Cryptie</h2>
<figure>
<p class="question">
FSFE: Beyond supporting the FSFE, you also engage as a volunteer. What are you doing for FSFE?
</p>
<div class="answer">
<p>
<strong>Amandine "Cryptie":</strong> In February 2013, I discovered the <a
href="https://fsfe.org/campaigns/ilovefs" target="_blanc">"I love Free Software" campaign</a> and I just had to
get a French version. This is how I joined the translation team, which I never really left.
</p>
<p>
In July 2013, I met my first "FSFE person", Rainer, at our booth in Brussel for the RMLL2013. Rainer needed some
help thus I helped. I loved the ambiance so I stayed. I am now a regular volunteer at <a href="https://fosdem.org/"
target="_blanc">FOSDEM </a>booths
and even managed the <a href="http://rmll.info/" target="_blanc">RMLL</a> ones for the second time this summer.
</p>
<p>Finally, I joined the GA in September 2017.</p>
</div>
<p class="question">
What is the most fun part about engaging for the FSFE?
</p>
<p class="answer">
I love translating and volunteering at booths but, to be honest, the best thing is the FSFE community
parties at the end of any FSFE event: Our community comes from all over Europe (and sometimes even beyond) and it's
nice to engage with others, exchange ideas and means to promote Free Software or just share a nice time together.
</p>
<video style="align:center; padding: 0em 2em 0em 2em;" width="100%" 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>
<source media="screen and (min-device-width:1000px)" type="video/webm; codecs=&quot;vp9, opus&quot;" src="https://download.fsfe.org/videos/supporter/cryptie_desktop.webm"></source>
<source media="screen and (max-device-width:999px)" type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="https://download.fsfe.org/videos/supporter/cryptie_mobile.mp4"></source>
<source media="screen and (max-device-width:999px)" type="video/webm; codecs=&quot;vp9, opus&quot;" 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="_blanc">kdenlive</a>, <a href="https://blender.org/" target="_blanc">blender</a>, <a href="https://lmms.io/" target="_blanc">LMMS</a>, <a href="https://audacityteam.org/" target="_blanc">Audacity</a> and <a href="https://ffmpeg.org/" target="_blanc">ffmpeg</a>.</p>
</figcaption>
<h2 class="question">
What is your favourite FSFE campaign at the moment?
</h2>
</figure>
<h2 id="interview" class="clear">Short Interview with Cryptie</h2>
<p class="question">FSFE: Beyond supporting the FSFE, you also engage as a volunteer. What are you doing for FSFE?</p>
<div class="answer">
<p><strong>Amandine "Cryptie":</strong> In February 2013, I discovered the <a href="https://fsfe.org/campaigns/ilovefs" target="_blanc">"I love Free Software" campaign</a> and I just had to get a French version. This is how I joined the translation team, which I never really left.</p>
<p>In July 2013, I met my first "FSFE person", Rainer, at our booth in Brussel for the RMLL2013. Rainer needed some help thus I helped. I loved the ambiance so I stayed. I am now a regular volunteer at <a href="https://fosdem.org/" target="_blanc">FOSDEM </a>booths and even managed the <a href="http://rmll.info/" target="_blanc">RMLL</a> ones for the second time this summer.</p>
<p>Finally, I joined the GA in September 2017.</p>
</div>
<p class="question"> What is the most fun part about engaging for the FSFE?</p>
<p class="answer">I love translating and volunteering at booths but, to be honest, the best thing is the FSFE community parties at the end of any FSFE event: Our community comes from all over Europe (and sometimes even beyond) and it's nice to engage with others, exchange ideas and means to promote Free Software or just share a nice time together. </p>
<p class="answer">
No hesitation : <a href="https://fsfe.org/campaigns/ilovefs" target="_blanc">"I love Free
Software"</a>.This campaign is so positive, it reminds each of us that Free Software won't exist without the
volunteers behind it.
</p>
<h2 class="question">What is your favourite FSFE campaign at the moment?</h2>
<div class="love-free-software-sticker">
<a href="https://www.ilovefs.org">
<img src="/contribute/promopics/ilovefs-sticker_burgundy_thumb.png" alt="I love free software sticker" />
</a>
</div>
<p class="answer">No hesitation : <a href="https://fsfe.org/campaigns/ilovefs" target="_blanc">"I love Free Software"</a>.This campaign is so positive, it reminds each of us that Free Software won't exist without the volunteers behind it. </p>
<p style=""><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></p>
<h2 class="question" style="clear: both;">
In one sentence: What is the biggest benefit of Free Software?
</h2>
<p class="answer">
Free Software it is a key factor to provide privacy which is needed to live in a free world.
</p>
<h2 class="question" style="clear: both;">In one sentence: What is the biggest benefit of Free Software?</h2>
<p class="answer">Free Software it is a key factor to provide privacy which is needed to live in a free world. </p>
<p class="question">
And what is the biggest benefit of Free Software regarding security?
</p>
<p class="question">And what is the biggest benefit of Free Software regarding security?</p>
<p class="answer">Free Software is auditable thus you can check if it uses outdated non-secure algorithms or state of the arts ones. Even better, if it is an important software for you, you can help (as an expert or by giving money to a crowdfunding) to replace the bad code.</p>
<p class="answer">
Free Software is auditable thus you can check if it uses outdated non-secure algorithms or state of
the arts ones. Even better, if it is an important software for you, you can help (as an expert or by giving money to a
crowdfunding) to replace the bad code.
</p>
<p class="question">What is your favourite Free Software?</p>
<p class="answer">This one is very tough. I could not survive without "Nextcloud" and "Keepass", thus one of them? :)</p>
<p class="question">
What is your favourite Free Software?
</p>
<p class="question">Is there anything you believe the FSFE should improve or begin working on next? Any wishes for the future?</p>
<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>
<p style=""><div style="max-width: 400px; width: 40%; margin: 2em auto 2em auto;"><img src="/about/graphics/stars.png" /></div></p>
<p class="answer">
This one is very tough. I could not survive without "Nextcloud" and "Keepass", thus one of them? :)
</p>
<p class="question">
Is there anything you believe the FSFE should improve or begin working on next? Any wishes for the future?
</p>
<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: 400px; width: 40%; margin: 2em auto;">
<img src="/about/graphics/stars.png" alt="FSFE logo stars"/>
</div>
</body>
<timestamp>$Date$ $Author$</timestamp>
<timestamp>$Date$ $Author$</timestamp>
</html>

View File

@ -0,0 +1,75 @@
.community-people {
h2.clear {
padding-top: 2em;
}
.question {
font-size: 110%;
font-weight: bold;
margin-bottom: .5em;
margin-top: 2em;
}
.answer {
padding-left: 1em;
}
.quote-container {
display: flex;
flex-direction: column;
margin-right: -1.5em;
gap: 1em;
}
.quote-picture-container {
max-height: 200px;
text-align: center;
}
.quote-picture {
max-height: 200px;
max-width: 100%;
}
.community-video {
width: 100%;
}
.love-free-software-sticker {
margin: 2em auto;
text-align: center;
width: 100%;
}
@media (min-width: @screen-sm-min) {
.quote-container {
flex-direction: row;
margin-right: auto;
}
.quote-picture-container {
flex: 0 0 20rem;
}
.community-video {
padding: 0 2em
}
.love-free-software-sticker {
max-width: 400px;
width: 40%;
}
}
.icons {
margin-right: 2em;
float: right;
}
.videocaption {
margin: 0 3em;
text-align: center;
font-size: 0.8em;
opacity: 0.7;
}
}

View File

@ -1,4 +1,5 @@
@import "style.less";
@import "community-people";
/* fsfe.org pages */
@ -571,7 +572,6 @@ img.signatory-logo {
}
}
// ----------------------------------------------------------------------------
// Overview pages (like "about", "contribute", ...
// ----------------------------------------------------------------------------

6
look/fsfe.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -1238,6 +1238,11 @@ ul.people li:last-child:after {
}
}
@media (max-width: @screen-sm-max) {
.bio #content {
padding-right: 0;
}
}
/* backward compatibility with old fsfe.org's generic.css */