Merge branch 'fix/annual-report-2019' of FSFE/fsfe-website into master

Toc mobile fix
Improves table of contents spacing
2019-10-16 21:57:17 +02:00 · 2019-10-16 21:54:45 +02:00 · 2019-10-16 21:53:25 +02:00 · 2019-10-16 21:52:44 +02:00 · 2019-10-16 21:43:08 +02:00 · 2019-10-16 21:39:09 +02:00
6 changed files with 245 additions and 157 deletions
--- a/look/elements/figure.less
+++ b/look/elements/figure.less
@ -7,6 +7,10 @@ figure {
  max-width: 100%;
  position: relative;
  &--no-shadow {
    box-shadow: none;
  }
  video {
    width: 100%;
@ -42,6 +46,14 @@ figure {
    margin: 30px auto 40px;
    max-width: 90%;
    &--w50 {
      max-width: 50%;
    }
    &--w75 {
      max-width: 75%;
    }
    &.float-left,
    &.float-right {
      margin: 0;
--- a/look/elements/toc.less
+++ b/look/elements/toc.less
@ -0,0 +1,23 @@
 .toc {
  background: rgb(240, 240, 240);
  border: 1px solid #a2a9b1;
  padding: @spacing-2;
  &__title {
    font-weight: bold;
    margin-bottom: @spacing-1;
   }
  &__content {
    font-size: .9em;
    line-height: 1.5;
    margin-bottom: 0;
  }
 }
@media screen and (min-width: @screen-md-min) {
  .toc {
    display: inline-block;
    width: 80%;
  }
 }
--- a/look/fsfe.less
+++ b/look/fsfe.less
@ -1,6 +1,8 @@
-@import "style.less";
+@import "variables";
@import "style";
@import "elements/figure";
@import "elements/sharebuttons";
@import "elements/toc";
@import "pages/interview";
 /* fsfe.org pages */
@ -841,5 +843,26 @@ video#freeyourandroid {
    margin-top: 30px;
 }
-@import "pages/spreadtheword";
+// utilities
 .mb-0 {
    margin-bottom: 0 !important;
 }
 .mb-1 {
    margin-bottom: @spacing-1 !important;
 }
 .mb-2 {
    margin-bottom: @spacing-2 !important;
 }
 .mb-3 {
    margin-bottom: @spacing-3 !important;
 }
 .m-3 {
    margin: @spacing-3 !important;
 }
@import "pages/spreadtheword";
--- a/look/style.less
+++ b/look/style.less
@ -530,13 +530,14 @@ div#subpages, .grid-row {
    }
-    blockquote, .blockQuote {
+    blockquote,
    .blockQuote {
        .quote;
        border: 0;
        padding-top: 20px;
        padding-bottom: 20px;
        /* does not work, weird: background-color: lighten(@brand-secondary, 77%);*/
-        background-color: rgba(116, 140, 156,0.23);
+        background-color: rgba(116, 140, 156, 0.23);
        p {
            line-height: 1.35;
@ -547,11 +548,20 @@ div#subpages, .grid-row {
                font-style: italic;
            }
        }
        & + & {
            margin-top: -1.3em;
        }
    }
    blockquote .blockquote__name {
        display: inline-block;
        font-style: italic;
        padding-top: @spacing-1;
        padding-left: @spacing-2;
        width: 100%;
    }
    pre, pre code {
        white-space: pre;
    }
--- a/look/variables.less
+++ b/look/variables.less
@ -0,0 +1,3 @@
@spacing-1: .75em;
@spacing-2: 1.5em;
@spacing-3: 3em;
--- a/news/2019/news-20191022-01.en.xhtml
+++ b/news/2019/news-20191022-01.en.xhtml
@ -6,20 +6,14 @@
 	<title>Annual report of the Free Software Foundation Europe 2019</title>
 	<style type="text/css">
-		div#toc {
+		h2 {
-			float: left;
+			margin-top: 1.5em;
 			border: solid 1px;
 			border-color: blue;
 			margin: .5em;
 			margin-top: 1em;
 			margin-bottom: 2em;
 			background: rgb(240, 240, 240);
 			width: 80%;
 		}
-
+		h3 {
 			margin-top: .75em;
 		}
 	</style>
 </head>
 <body>
@ -31,23 +25,23 @@
 		<p><strong>But this short introduction can only give you some brief ideas and so we invite you to find out your personal favourite of the FSFE's activities in 2019. Please enjoy your reading and if you are not a supporter yet, consider <a href="https://my.fsfe.org/donate">supporting software freedom in Europe</a>.</strong></p>
-		<blockquote>
+  <blockquote class="mb-3">
 	  <div class="with-image-right">
-			<img class="img-circle" src="/picturebase/people/2018-reinhard-mueller-300px.jpg" alt="Müller" />
+		  <img
 				  class="img-circle"
 				  src="/picturebase/people/2018-reinhard-mueller-300px.jpg"
 				  alt="Müller" />
 		  <p>
-			  "In a world where software influences virtually every single aspect of our lives, Free Software is a precondition for a free society." 
+			  "In a world where software influences virtually every single aspect of our lives, Free Software is a
-			</p>
+			  precondition for a free society."
-			<p class="source">
+			  <span class="blockquote__name">Reinhard Müller</span>
 			  Reinhard Müller
 		  </p>
 	  </div>
  </blockquote>
-
+  <div class="toc">
-
+      <div class="toc__title">Table of contents</div>
-	<div id="toc">
+      <ul class="toc__content">
 	  <p style="text-indent:1em; font-size:150%; padding-top:0.5em; font-weight: bold;">Table of contents</p>
 	    <ul style="margin: 1em; font-size:120%; font-weight: bold;">
          <li><a href="#routerfreedom">ISP's infrastructure ends where Router Freedom begins!</a></li>
          <li><a href="#pmpc">Europeans demand: "Public Money? Public Code!"</a></li>
          <li><a href="#foss4smes">Explaining Free Software to business: Our FOSS4SMEs-project</a></li>
@ -59,19 +53,19 @@
          <li><a href="#ilovefs">We all love Free Software: IloveFS</a></li>
          <li><a href="#sustainability">Sustainability of Software</a></li>
          <li><a href="#community">Our Community - we are the FSFE</a></li>
          <li>
              <ul>
                  <li><a href="#join">How you can become part of</a></li>
-					<li><a href="#events">Events we organised and participated in</a></li>
+                  <li><a href="#events2019">Events we organised and participated in</a></li>
-					<li><a href="#team">Staffers, team and GA</a></li>
+                  <li><a href="#team2019">Staffers, team and GA</a></li>
              </ul>
          </li>
          <li><a href="#outreach">Spreading the word of software freedom</a></li>
          <li><a href="#outlook">Looking forward</a></li>
          <li><a href="#about">About the Free Software Foundation Europe</a></li>
      </ul>
  </div>
 	   <div style="clear:both"></div>
 	<h2 id="routerfreedom">ISP's infrastructure ends where Router Freedom begins!</h2>
@ -101,17 +95,21 @@
  <blockquote>
 	  <div class="with-image-right">
-				<img class="img-circle" src="/picturebase/people/2018-reinhard-mueller-300px.jpg" alt="Iyán Méndez Veiga" />
+		  <img
 				  class="img-circle"
 				  src="/picturebase/people/2018-reinhard-mueller-300px.jpg"
 				  alt="Iyán Méndez Veiga" />
 		  <p>
-				  "The idea behind was that they are totally different parties but we want them all to vote the same thing. So we tried to emphasise different benefits of Free Software to the different parties. [... Now] the proposal of the Parliament has three main items and the very first one is that the Parliament of Asturias supports the international "Public Money? Public Code!" initiative. [...] I think for the first time, a lot of politicians understood what Free Software is."
+			  "The idea behind was that they are totally different parties but we want them all to vote the same thing.
-				</p>
+			  So we tried to emphasise different benefits of Free Software to the different parties. [... Now] the
-				<p class="source">
+			  proposal of the Parliament has three main items and the very first one is that the Parliament of Asturias
-				  Iyán Méndez Veiga
+			  supports the international "Public Money? Public Code!" initiative. [...] I think for the first time, a
 			  lot of politicians understood what Free Software is."
 			  <span class="blockquote__name">Iyán Méndez Veiga</span>
 		  </p>
 	  </div>
  </blockquote>
 				<figure>
 					 <img src="/picturebase/miscellaneous/201903-pica-pica-hacklab-team-800px.JPG" alt="Team from Pica Pica Hacklab in front of the Asturian Parliament" />
 					 <figcaption>Team from Pica Pica Hacklab in front of the Asturian Parliament, demanding Public Money? Public Code!</figcaption>
@ -266,33 +264,43 @@
 			<p>Every day, we are happy to see that our community becomes stronger. In the last years, we exceeded some ten thousand people from Europe and beyond who are supporting our cause by <a href="/contribute/spreadtheword">spreading our word</a>, signing our open letters, subscribing to our <a href="https://lists.fsfe.org/mailman/listinfo/newsletter-en">newsletter</a> or joining our <a href="https://lists.fsfe.org/mailman/listinfo/discussion">public discussions</a>. But as impressive as numbers are, they cannot  speak for the creative and engaged individual people behind them. And so we had the idea to <strong>let our community members speak for themselves</strong> and created a dedicated <a href="/about/people/testimonials">testimonials page</a>.</p>
-			<blockquote>
+  <blockquote class="mb-2">
 	  <div class="with-image-right">
-				<img class="img-circle" src="/picturebase/people/2018-alexandra-busch-300px.jpg" alt="Busch" />
+		  <img
 				  class="img-circle"
 				  src="/picturebase/people/2018-alexandra-busch-300px.jpg"
 				  alt="Busch" />
 		  <p>
-				  "I believe that Free Software can help us change our society fundamentally for the better and I believe the best way to do so is together with other volunteers from all over Europe!" - <em>Alexandra Busch</em>
+			  "I believe that Free Software can help us change our society fundamentally for the better and I believe
 			  the best way to do so is together with other volunteers from all over Europe!"
 			  <span class="blockquote__name">Alexandra Busch</span>
 		  </p>
 	  </div>
  </blockquote>
-			
+  <blockquote class="mb-2">
 			<blockquote>
 	  <div class="with-image-right">
-				<img class="img-circle" src="https://fsfe.org/picturebase/people/2014-hugo-roy-166px.png" alt="Roy" />
+		  <img
 				  class="img-circle"
 				  src="https://fsfe.org/picturebase/people/2014-hugo-roy-166px.png"
 				  alt="Roy" />
 		  <p>
-				  "The Free Software Foundation Europe (FSFE) brings together dedicated and engaged activists from all over Europe to seize the opportunities to secure our rights to use, share, study, and improve software because without Free Software, technology subjugates us instead of enhancing our freedom." 
+			  "The Free Software Foundation Europe (FSFE) brings together dedicated and engaged activists from all over
-				</p>
+			  Europe to seize the opportunities to secure our rights to use, share, study, and improve software because
-				<p class="source">
+			  without Free Software, technology subjugates us instead of enhancing our freedom."
-				  Hugo Roy
+			  <span class="blockquote__name">Hugo Roy</span>
 		  </p>
 	  </div>
  </blockquote>
 			<div class="text-center">
-				<a class="btn btn-success" href="/about/people/testimonials">See more testimonials</a>
+				<a
 						class="btn btn-lg btn-success mb-3"
 						href="/about/people/testimonials">
 					See more testimonials
 				</a>
 			</div>
 			<p>On this testimonials-page you will not only find quotes by our diverse community members from all over Europe, but also interviews with them. One example of many is <a href="/about/people/interviews/grun.html#interview">Erik Grun</a>, our local coordinator Berlin.</p>
 			<p>During our last <a href="https://wiki.fsfe.org/Events/LSMandCommunityMeeting2018">community meeting in Strasbourg</a>, we even had the pleasure to make some short video interviews with some of our community members like the one from Vincent Lequertier: </p>
@ -335,7 +343,7 @@
 			<p>Finally, advocating for freedom also costs money and we depend on people like you to <a href="https://my.fsfe.org/support">support us financially</a>. <strong>All support is used to improve our software freedom a bit more each day, step by step, bit by bit.</strong></p>
-	<h2 id="events">Events we organised and participated in</h2>
+	<h2 id="events2019">Events we organised and participated in</h2>
 			<p>One of the FSFE's goals is to help individuals and organisations to understand how Free Software contributes to freedom, transparency, and self-determination. To this end we reach out to the public by participating in events. Since our last annual report <strong>we participated in over 60 events in 11 European countries</strong> (Austria, Belgium, Bulgaria, France, Germany, Italy, Portugal, Serbia, Spain, Switzerland, The Netherlands), many of which we gave public presentations and talks, most prominently about "Public Money? Public Code!", Sustainability of (Free) Software, Security with Free Software and Free Your Android. With the help of our local volunteers, we have even been able to also set up an information-booth in more than 20 of these events.</p>
@ -390,21 +398,24 @@
-	<h2 id="team">Staffers, team and GA</h2>
+	<h2 id="team2019">Staffers, team and GA</h2>
 			<p>Our staffers make sure to keep running the FSFE's administration and daily operations. From sending <a href="/contribute/spreadtheword">promotion material</a> to <a href="/support">donation receipts</a>, from selling merchandise to organising our larger community events. But they also represent the FSFE officially in talks and presentations or in different kind of meetings. </p>
 			<p>At the FSFE we currently employ six full-time staffers and two part-time employees. This permanent team has appreciated the help of our interns George Brooke-Smith, Lucas Lasota and Bonnie Mehring. With Minh Nguyen we also contracted our first <a href="/news/2019/news-20190701-01.html">Federal Voluntary Service</a>.</p>
  <blockquote>
 	  <div class="with-image-right">
-				<img class="img-circle" src="/picturebase/people/2019-lucas-lasota-300px.jpg" alt="Lasota" />
+		  <img
 				  class="img-circle"
 				  src="/picturebase/people/2019-lucas-lasota-300px.jpg"
 				  alt="Lasota" />
 		  <p>
-				  "Legal and policy interns at the FSFE have an important role helping the team accomplishing a wide variety of tasks, campaigns and events. They are responsible for creating legal and policy documents, conducting researches, organizing events, collaborating with volunteers and backing up the team in daily organizational life. It is a great way to start a professional career in the Free Software world!" 
+			  "Legal and policy interns at the FSFE have an important role helping the team accomplishing a wide variety
-				</p>
+			  of tasks, campaigns and events. They are responsible for creating legal and policy documents, conducting
-				<p class="source">
+			  researches, organizing events, collaborating with volunteers and backing up the team in daily
-				  Lucas Lasota
+			  organizational life. It is a great way to start a professional career in the Free Software world!"
 			  <span class="blockquote__name">Lucas Lasota</span>
 		  </p>
 	  </div>
  </blockquote>
@ -421,12 +432,16 @@
 			<p><strong>The FSFE empowers users to promote digital freedom in the real world</strong> by offering a large set of promotion material. You can find inspiration about the <a href="/contribute/spreadtheword#100-freedoms-black-sticker">100 freedoms of Free Software</a> and why <a href="/contribute/spreadtheword#nocloud-sticker">There is no Cloud, just other people's computers</a>, or leaflets to help you explain <a href="/contribute/spreadtheword#freedom">Free Software</a>, <a href="/contribute/spreadtheword#gnupg-leaflet">Email encryption</a>, the dangers of <a href="/contribute/spreadtheword#drm-leaflet">DRM</a> and how to <a href="/contribute/spreadtheword#f-droid-leaflet">Free Your Android</a>. You can also find postcards, posters and stickers of our <a href="/contribute/spreadtheword.html#pmpc">Public Money? Public Code!</a> and <a href="/contribute/spreadtheword.html#ilovefs">I love Free Software campaign</a>. Order your own material now and help us to spread the word!</p>
-				<figure>
+				<figure class="figure--no-shadow">
 					 <a href="/contribute/spreadtheword"><img src="/graphics/infomaterial-450px.png" alt="Picture of FSFE's info material" /></a>
 				</figure>
  <div class="text-center">
-					<a class="btn btn-success" href="/contribute/spreadtheword">Order our info material</a>
+	  <a
 			  class="btn btn-lg btn-success mb-3"
 			  href="/contribute/spreadtheword">
 		  Order our info material
 	  </a>
  </div>
 			<p>In the last 12 months, we sent out 819 information material orders around the world. This means literally <strong>thousands of stickers, leaflets, and posters have been given out</strong> to people, who are interested or are even hearing about Free Software for the first time. If you would like to support us in this direct action, consider <a href="https://my.fsfe.org/donate">supporting us financially or consider a donation</a> along with your personal order of information material. The right leaflet at the right time to the right person can be the start of long-lasting change. </p>
@ -436,8 +451,10 @@
 			<p>Next to our promotion material, we also offer to show your love for Free Software by using and wearing some of our <a href="/order/">merchandise items</a>. Free Software clothing is a great way of raising awareness within your local community, and each sale helps to fund critical FSFE projects. </p>
-				<figure>
+  <figure class="figure--w50">
-					 <a href="/order/"><img src="/order/2017/kidstshirt-fork-red-front-large.jpg" alt="Kid's shirt" /></a>
+	  <a href="/order/">
 		  <img src="/order/2017/kidstshirt-fork-red-front-large.jpg" alt="Kid's shirt"/>
 	  </a>
 	  <figcaption>A shirt for our young Free Software supporters</figcaption>
  </figure>
Author	SHA1	Message	Date
Michael Weimann	3d133a244b	Merge branch 'fix/annual-report-2019' of FSFE/fsfe-website into master All checks were successful continuous-integration/drone/push Build is passing Details	2019-10-16 21:57:17 +02:00
Michael Weimann	8cb080c73d	Toc mobile fix All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2019-10-16 21:54:45 +02:00
Michael Weimann	a00f2af692	Improves table of contents spacing All checks were successful continuous-integration/drone/push Build is passing Details	2019-10-16 21:53:25 +02:00
Michael Weimann	c4c4fb5755	Improves blockquotes	2019-10-16 21:52:44 +02:00
Michael Weimann	222a6de0f2	Tweaks headline margins	2019-10-16 21:43:08 +02:00
Michael Weimann	aba5adbae5	Introduces some figure width modifiers	2019-10-16 21:39:09 +02:00
Michael Weimann	ce9567cc95	Introduces a non shadow figure modifier	2019-10-16 21:37:08 +02:00
Michael Weimann	758dd5c628	Fixes the team and events headlines	2019-10-16 21:34:46 +02:00
Michael Weimann	1dc7623d96	Improves the buttons	2019-10-16 21:32:35 +02:00
Michael Weimann	f6b52e2065	Improves the table of contents	2019-10-16 21:27:46 +02:00