3 changed files with 95 additions and 20 deletions
--- a/about/people/interviews/cryptie.en.xhtml
+++ b/about/people/interviews/cryptie.en.xhtml
@ -5,7 +5,11 @@
  <title>Amandine “Cryptie”</title>
 </head>
-<sidebar promo="support"/>
+<sidebar promo="none">
  <div style="margin: 3em 0 1em 0;">
    <a class="big-donate" href="https://my.fsfe.org/support">Become a supporter</a>
  </div>
 </sidebar>
 <body class="bio interview">
@ -16,21 +20,39 @@
 <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>
-<blockquote>
+<div class="interview-quote-container">
-  <div class="with-image-right">
+  <blockquote>
    <img class="img-circle" src="/picturebase/people/2018-cryptie-300px.jpg" alt="Cryptie"/>
    <p>
-      "I am Cryptie, I am living in Paris, France. I used to be a cryptographer
+      <em>
-      and now I am a privacy specialist. I consciously use Free Software for 15 years now. I discovered the FSFE
+        "I am Cryptie, I am living in Paris, France. I used to be a cryptographer
-      randomly, I found the FSFE website and just loved this idea of counter-lobbying. I am a supporter of the FSFE
+        and now I am a privacy specialist. I consciously use Free Software for 15 years now. I discovered the FSFE
-      for already 6 years now."
+        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>
-  </div>
+  </blockquote>
-</blockquote>
+  <div class="interview-portrait"
       style="background-image: url('/picturebase/people/2018-cryptie-300px.jpg')"
       title="Amandine “Cryptie“"></div>
 </div>
-<h2 id="video-30s-cryptie">
+<div class="row text-center">
-  "The FSFE and me in 30 seconds"
+  <div class="col-6 col-sm-6 col-md-4 col-lg-3 col-xl-3 mb-3">
-</h2>
+
    <a href="#video-30s-cryptie"><img src="/graphics/video32.png"
                                      alt="Watch The FSFE and me in 30 seconds with Cryptie"/></a>
  </div>
  <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>
 <figure>
  <video class="interview-video" crossorigin="crossorigin"
@ -59,9 +81,11 @@
 </figure>
-<h2 id="interview" class="clear">
+<div class="interview-fsfe-divider">
-  Short Interview with Cryptie (2019)
+  <img src="/about/graphics/stars.png"/>
-</h2>
+</div>
 <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>
@ -121,6 +145,10 @@
 <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"
--- a/look/fsfe.min.css
+++ b/look/fsfe.min.css
--- a/look/pages/interview.less
+++ b/look/pages/interview.less
@ -3,14 +3,42 @@
    padding-right: 0;
  }
-  h2 {
+  .interview-quote-container {
-    margin-top: 8rem;
+    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;
    }
  }
  .question {
    font-size: 110%;
    font-weight: bold;
-    margin-bottom: .5em;
+    margin-bottom: 1em;
    margin-top: 2em;
  }
@ -36,6 +64,25 @@
      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;
    }