Improve texts + Responsive

source/index.html.erb

@@ -82,6 +82,10 @@ title: Plume
           rules, thematics and ambiance. An instance can suit you better than another, depending
           on your opinions and interests.
         </p>
+        <p>
+          And if no instance makes you feel like home, you can create your own, if you are a bit
+          adventureous.
+        </p>
         <a href="">Find your dream instance</a>
       </main>
     </div>
@@ -95,6 +99,7 @@ title: Plume
           it is resilient to economic problems. And because of its decentralized nature it is
           also harder to censor than traditional platforms.
         </p>
+        <p>And even if one instance goes down, the rest of the network continue to work normally.</p>
       </main>
     </div>
 
@@ -107,6 +112,11 @@ title: Plume
           <a href="https://activitypub.rocks">ActivityPub</a>,
           which means you can help making it better.
         </p>
+        <p>
+          We are not only welcoming coders, but anyone who want to help: translators,
+          designers, people with communication skills, or anybody else that has someting
+          to offer to the project!
+        </p>
         <a href="https://contribute.joinplu.me">Discover how you can help</a>
       </main>
     </div>

source/stylesheets/site.css.scss

@@ -25,8 +25,7 @@ header {
 
   img {
     height: 8em;
-    grid-row-start: 1;
-    grid-row-end: 3;
+    grid-row: 1 / 3;
     grid-column: 2;
   }
 }
@@ -166,4 +165,47 @@ footer {
   background: $gray;
   margin-top: 10vh;
   text-align: center;
+}
+
+@media screen and (max-width: 1000px) {
+  body > main > * {
+    padding: 0 5vw;
+  }
+
+  header {
+    display: flex;
+    flex-direction: column;
+    padding: 10vh 20vw;
+    text-align: center;
+
+    img {
+      height: 4em;
+      grid-row: 2;
+      grid-column: 1;
+      margin: auto;
+    }
+  }
+
+  main nav {
+    padding: 0;
+    text-align: center;
+    ul {
+      flex-direction: column;
+
+      li a {
+        padding: 1em;
+        &:hover {
+          border-bottom-color: transparent;
+        }
+      }
+    }
+  }
+
+  .grid {
+    grid-template-columns: 100%;
+
+    & > h2 {
+      grid-column: 1;
+    }
+  }
 }