Responsive home page

src/App.vue

@@ -6,11 +6,19 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+  @import './scss/_variables.scss';
+
   .container {
     padding-top: 0;
     margin-top: 0;
     width: 1024px;
+
+    @media screen and (max-width: $responsive-screen) {
+      width: 100%;
+      max-width: unset;
+      padding: 0;
+    }
   }
 </style>
 

src/components/ContentSelection.vue

@@ -50,6 +50,17 @@
 
   .root {
     display: flex;
+
+    @media screen and (max-width: $small-screen) {
+      flex-direction: column;
+
+      .left {
+        align-items: center !important;
+        display: flex !important;
+        flex-direction: column !important;
+        margin-bottom: 20px !important;
+      }
+    }
   }
 
   .left {
@@ -107,6 +118,16 @@
 
     .tags {
       display: flex;
+      flex-wrap: wrap;
+
+
+      @media screen and (max-width: $responsive-screen) {
+        justify-content: center;
+      }
+
+      .tag {
+        margin-top: 10px;
+      }
     }
   }
 </style>

src/scss/_mixins.scss

@@ -1,3 +1,5 @@
+@import './_variables';
+
 @mixin disable-default-a-behaviour {
   &:hover, &:focus, &:active {
     text-decoration: none !important;
@@ -5,3 +7,28 @@
     color: inherit !important;
   }
 }
+
+@mixin one-column {
+  width: 600px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  img {
+    margin: 30px 0;
+
+    & + .citation {
+      margin-top: 0 !important;
+    }
+  }
+
+  @media screen and (max-width: $small-screen) {
+    width: 100%;
+
+    img {
+      max-width: 100% !important;
+      margin: 30px auto !important;
+    }
+  }
+}

src/scss/_variables.scss

@@ -2,3 +2,6 @@ $font-semibold: 600;
 
 $orange: #f67e08;
 $grey: #5e5e5e;
+
+$responsive-screen: 992px;
+$small-screen: 700px;

src/scss/main.scss

@@ -59,6 +59,14 @@ main {
   background-color: #fff;
   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.35);
   border: solid 1px #d9d9d9;
+
+  @media screen and (max-width: $responsive-screen) {
+    padding: 0 15px;
+  }
+
+  @media screen and (max-width: $small-screen) {
+    padding: 0 10px;
+  }
 }
 
 .caret::after {
@@ -89,10 +97,26 @@ main {
     width: 18px;
     height: 18px;
   }
+
+  @media screen and (max-width: $responsive-screen) {
+    width: auto;
+    font-size: 14px;
+    flex-direction: column;
+    text-align: center;
+  }
+
+  @media screen and (max-width: $small-screen) {
+    min-width: auto !important;
+    padding: 0 5px !important;
+  }
 }
 
 .jpt-big-button-icon svg {
   margin-right: 30px;
+
+  @media screen and (max-width: $responsive-screen) {
+    margin-right: 0;
+  }
 }
 
 .jpt-button-medium {
@@ -120,6 +144,10 @@ main {
     height: 40px;
     vertical-align: sub;
   }
+
+  @media screen and (max-width: $small-screen) {
+    margin: 50px 0 30px 0;
+  }
 }
 
 .subtitle {
@@ -128,22 +156,14 @@ main {
   font-weight: $font-semibold;
   margin-top: 100px;
   white-space: nowrap;
+
+  @media screen and (max-width: $responsive-screen) {
+    white-space: normal;
+  }
 }
 
 .one-column {
-  width: 600px;
-  margin: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  img {
-    margin: 30px 0;
-
-    & + .citation {
-      margin-top: 0 !important;
-    }
-  }
+  @include one-column;
 }
 
 .bottom-link-wrapper {

src/views/Home.vue

@@ -250,12 +250,12 @@
           <img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="PeerTube you play illustration"/>
         </div>
 
-        <div class="buttons-row">
+        <div class="buttons-row explore-create-account">
           <router-link to="/content-selections" class="jpt-button">
             <span v-translate>Explorer les contenus</span>
           </router-link>
 
-          <div>
+          <div class="create-account-block">
             <router-link to="/instances" class="jpt-button">
               <span v-translate>Créer un compte</span>
             </router-link>
@@ -307,6 +307,9 @@
 </template>
 
 <style scoped lang="scss">
+  @import '../scss/_variables.scss';
+  @import '../scss/_mixins.scss';
+
   .buttons-row {
     display: flex;
     justify-content: space-between;
@@ -314,7 +317,23 @@
 
     .jpt-button {
       width: 330px;
-      height: 50px;
+      min-height: 50px;
+    }
+
+    @media screen and (max-width: $responsive-screen) {
+      padding: 0;
+
+      .jpt-button {
+        margin: 0 3px 0 0;
+      }
+
+      &.explore-create-account {
+        flex-direction: column;
+
+        .create-account-block {
+          margin-top: 50px;
+        }
+      }
     }
   }
 
@@ -345,6 +364,19 @@
         font-size: 24px;
         font-weight: 600;
       }
+
+      @media screen and (max-width: $small-screen) {
+        padding: 15px 0;
+
+        .brand {
+          height: 25px !important
+        }
+
+        .description {
+          font-size: 20px;
+          margin-left: 20px;
+        }
+      }
     }
 
     .marketing {
@@ -358,6 +390,10 @@
     .ambition {
       display: flex;
 
+      @media screen and (max-width: $responsive-screen) {
+        @include one-column;
+      }
+
       & > img,
       & > div {
         flex-basis: 100%;
@@ -365,6 +401,8 @@
 
       img {
         margin-right: 30px;
+        height: 231px;
+        width: 416px;
       }
     }
   }