Add responsive design

layouts/index.html

@@ -4,7 +4,7 @@
   <h1>{{ .Title }}</h1>
 
   <div class="e-content">
-    {{.Content}}
+    {{ .Content }}
 
     <p><i class="fas fa-language"></i> <strong>Available languages:</strong></p>
 

layouts/partials/footer.html

@@ -6,7 +6,7 @@
     </div>
   </a>
 
-  <p class="legal" style="float: right; text-align: right">
+  <p class="legal legal--right">
     <a href='https://joinmastodon.org'>Join Mastodon</a> · <a href='https://bridge.joinmastodon.org'>Find Twitter friends</a> · <a href='https://blog.joinmastodon.org'>Blog</a> · <a href='https://mastodon.social/@Mastodon' target='_blank'><i class='fab fa-mastodon'></i></a> · <a href='https://twitter.com/MastodonProject' rel='nofollow' target='_blank'><i class='fab fa-twitter'></i></a> · <a href='https://facebook.com/joinmastodon' rel='nofollow' target='_blank'><i class='fab fa-facebook'></i></a>
   </p>
 

static/style.css

@@ -77,7 +77,13 @@ body {
   grid-template-columns: 260px minmax(300px, 700px);
   grid-template-rows: auto;
   margin-bottom: 30px; }
+  @media screen and (max-width: 600px) {
+    .sidebar-layout {
+      display: block; } }
 
+@media screen and (max-width: 600px) {
+  .sidebar {
+    margin-bottom: 60px; } }
 .sidebar .brand {
   display: flex;
   justify-content: flex-start;
@@ -89,6 +95,11 @@ body {
     position: relative;
     left: -14px;
     top: -4px; }
+  @media screen and (max-width: 600px) {
+    .sidebar .brand {
+      justify-content: center; }
+      .sidebar .brand img {
+        position: static; } }
 .sidebar a {
   display: inline-block;
   color: #9baec8;
@@ -113,13 +124,20 @@ body {
   padding-bottom: 30px; }
   .footer .legal {
     margin-top: 30px; }
+    .footer .legal--right {
+      float: right;
+      text-align: right; }
+      @media screen and (max-width: 600px) {
+        .footer .legal--right {
+          float: none;
+          text-align: left; } }
     .footer .legal a {
       color: #687590;
       text-decoration: none; }
 
 main h1 {
   font-size: 36px;
-  line-height: 1.08;
+  line-height: 1.48;
   font-weight: 600;
   color: #d9e1e8;
   padding-bottom: 35px;
@@ -305,6 +323,9 @@ main iframe {
   justify-content: flex-start;
   align-items: center;
   margin-bottom: 60px; }
+  @media screen and (max-width: 600px) {
+    .mascot {
+      display: none; } }
 
 #TableOfContents {
   color: #9baec8;
@@ -331,6 +352,9 @@ main iframe {
   background-repeat: no-repeat;
   background-position: top right;
   text-align: left; }
+  @media screen and (max-width: 600px) {
+    .panel {
+      background-size: contain; } }
   .panel .overlay {
     padding: 20px; }
   .panel h5 {

static/style.scss

@@ -16,6 +16,7 @@ $transition-in: 100ms linear;
 $transition-out: 250ms linear;
 
 $content-width: 960px;
+$mobile-width: 600px;
 
 /* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
@@ -95,7 +96,7 @@ body {
   max-width: $content-width;
   margin: 0 auto;
 
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: $mobile-width) {
     padding: 0 20px;
   }
 }
@@ -106,9 +107,17 @@ body {
   grid-template-columns: 260px minmax(300px, ($content-width - 260px));
   grid-template-rows: auto;
   margin-bottom: 30px;
+
+  @media screen and (max-width: $mobile-width) {
+    display: block;
+  }
 }
 
 .sidebar {
+  @media screen and (max-width: $mobile-width) {
+    margin-bottom: 60px;
+  }
+
   .brand {
     display: flex;
     justify-content: flex-start;
@@ -122,6 +131,14 @@ body {
       left: -14px;
       top: -4px;
     }
+
+    @media screen and (max-width: $mobile-width) {
+      justify-content: center;
+
+      img {
+        position: static;
+      }
+    }
   }
 
   a {
@@ -164,6 +181,16 @@ body {
   .legal {
     margin-top: 30px;
 
+    &--right {
+      float: right;
+      text-align: right;
+
+      @media screen and (max-width: $mobile-width) {
+        float: none;
+        text-align: left;
+      }
+    }
+
     a {
       color: $darker;
       text-decoration: none;
@@ -174,7 +201,7 @@ body {
 main {
   h1 {
     font-size: 36px;
-    line-height: 1.08;
+    line-height: 1.48;
     font-weight: 600;
     color: $lightest;
     padding-bottom: 35px;
@@ -427,6 +454,10 @@ main {
   justify-content: flex-start;
   align-items: center;
   margin-bottom: 60px;
+
+  @media screen and (max-width: $mobile-width) {
+    display: none;
+  }
 }
 
 #TableOfContents {
@@ -463,9 +494,12 @@ main {
   background-size: 60%;
   background-repeat: no-repeat;
   background-position: top right;
-
   text-align: left;
 
+  @media screen and (max-width: $mobile-width) {
+    background-size: contain;
+  }
+
   .overlay {
     padding: 20px;
   }