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;

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%;
+  }
+}

look/fsfe.less

@@ -1,7 +1,9 @@
+@import "variables";
 @import "style";
 @import "elements/figure";
 @import "elements/podcast";
 @import "elements/sharebuttons";
+@import "elements/toc";
 @import "pages/interview";
 @import "pages/spreadtheword";
 
@@ -842,3 +844,25 @@ video#freeyourandroid {
 .home-newsletter-label {
     margin-top: 30px;
 }
+
+// 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;
+}

look/style.less

@@ -554,6 +554,14 @@ div#subpages, .grid-row {
         }
     }
 
+    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;
     }

look/variables.less

@@ -0,0 +1,3 @@
+@spacing-1: .75em;
+@spacing-2: 1.5em;
+@spacing-3: 3em;

news/2019/news-20191022-01.en.xhtml

@@ -6,15 +6,12 @@
 	<title>Annual report of the Free Software Foundation Europe 2019</title>
 
 	<style type="text/css">
-		div#toc {
-			float: left;
-			border: solid 1px;
-			border-color: blue;
-			margin: .5em;
-			margin-top: 1em;
-			margin-bottom: 2em;
-			background: rgb(240, 240, 240);
-			width: 80%;
+		h2 {
+			margin-top: 1.5em;
+		}
+
+		h3 {
+			margin-top: .75em;
 		}
 	</style>
 </head>
@@ -28,7 +25,7 @@
 
 		<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"
@@ -37,16 +34,14 @@
 		  <p>
 			  "In a world where software influences virtually every single aspect of our lives, Free Software is a
 			  precondition for a free society."
-		  </p>
-		  <p class="source">
-			  Reinhard Müller
+			  <span class="blockquote__name">Reinhard Müller</span>
 		  </p>
 	  </div>
   </blockquote>
 
-  <div id="toc">
-	  <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;">
+  <div class="toc">
+      <div class="toc__title">Table of contents</div>
+      <ul class="toc__content">
           <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>
@@ -111,9 +106,7 @@
 				  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."
-		  </p>
-		  <p class="source">
-			  Iyán Méndez Veiga
+			  <span class="blockquote__name">Iyán Méndez Veiga</span>
 		  </p>
 	  </div>
   </blockquote>
@@ -282,23 +275,21 @@
 			<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"/>
+				  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!"
-		  </p>
-		  <p class="source">
-			  Alexandra Busch
+			  <span class="blockquote__name">Alexandra Busch</span>
 		  </p>
 	  </div>
   </blockquote>
 
-  <blockquote>
+  <blockquote class="mb-2">
 	  <div class="with-image-right">
 		  <img
 				  class="img-circle"
@@ -308,16 +299,14 @@
 			  "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."
-		  </p>
-		  <p class="source">
-			  Hugo Roy
+			  <span class="blockquote__name">Hugo Roy</span>
 		  </p>
 	  </div>
   </blockquote>
 
 			<div class="text-center">
 				<a
-						class="btn btn-lg btn-success"
+						class="btn btn-lg btn-success mb-3"
 						href="/about/people/testimonials">
 					See more testimonials
 				</a>
@@ -429,9 +418,7 @@
 				  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!"
-		  </p>
-		  <p class="source">
-			  Lucas Lasota
+			  <span class="blockquote__name">Lucas Lasota</span>
 		  </p>
 	  </div>
   </blockquote>
@@ -445,13 +432,13 @@
 
 			<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-lg btn-success"
+			  class="btn btn-lg btn-success mb-3"
 			  href="/contribute/spreadtheword">
 		  Order our info material
 	  </a>
@@ -464,7 +451,7 @@
 
 			<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>