Merge pull request #207 from Calinou/responsive-design

Make the website use responsive design

source/assets/stylesheets/application.css.sass

@@ -33,7 +33,6 @@ h1
   margin-bottom: 0
   line-height: 1
   text-transform: lowercase
-  width: 50%
 
 h2
   font-size: 1.2em
@@ -97,3 +96,7 @@ pre, code
   font-family: $source-code-font-family
 code
   white-space: nowrap
+
+@media (min-width: 1077px)
+  h1
+    width: 50%

source/assets/stylesheets/layout.sass

@@ -2,26 +2,28 @@ $break-small: em(480px)
 $break-medium: em(800px)
 $break-large: em(1024px)
 
+body
+  margin: 0
+
 article
   margin: 0 auto
-  width: 65em
+  max-width: 65em
 
 .main
   background-color: $color-white
-  margin-bottom: 2em
 
   div
-    padding-left: 20%
-    padding-right: 20%
+    padding-left: 5%
+    padding-right: 5%
     padding-bottom: 3em
 
     aside
       background-color: lighten(desaturate($color-bark, 5%), 10%)
       margin-bottom: -3em
-      margin-left: -35%
-      margin-right: -35%
+      margin-left: -5%
+      margin-right: -5%
       margin-top: 3em
-      padding: 2em 20%
+      padding: 2em 5%
       text-align: center
 
     aside &
@@ -41,3 +43,19 @@ article ul
   line-height: 1.5
   list-style-type: square
   padding-left: 1em
+
+@media (min-width: 1077px)
+  body
+    margin: 8px
+
+  .main
+    margin-bottom: 2em
+
+    div
+      padding-left: 20%
+      padding-right: 20%
+
+      aside
+        margin-left: -35%
+        margin-right: -35%
+        padding: 2em 20%

source/assets/stylesheets/sections.sass

@@ -3,7 +3,7 @@ div.header
   padding-bottom: 0.1em
   background-color: $color-ocre
   background-image: image-url("bg-hero@2x.png")
-  background-size: 100%
+  background-size: cover
 
   h1
     color: $color-sand
@@ -33,8 +33,8 @@ div.header
 
 div.answers
   margin-top: 12em
-  padding-left: 25%
-  padding-right: 25%
+  padding-left: 5%
+  padding-right: 5%
   background-color: $color-white
 
   h3
@@ -61,14 +61,9 @@ div.answers
   h3
     font-size: 1.6em
     font-weight: bold
-    width: 50%
-
-  h4
-    padding-left: 15em
 
   ul
     font-size: 1em
-    padding-left: 16em
 
   p
     a
@@ -102,18 +97,16 @@ div.bad-practices
     font-size: 1.7em
     color: $color-gold
     float: left
-    width: 35%
 
-  h4, p
-    padding-left: 12em
+
   p
     clear: left
     font-size: 1em
 
 div.effort
   padding-top: 2em
-  padding-left: 25%
-  padding-right: 25%
+  padding-left: 5%
+  padding-right: 5%
   background-color: $color-white
 
   h3
@@ -123,8 +116,8 @@ div.effort
 
 div.frequently-asked-questions
   padding-top: 2em
-  padding-left: 25%
-  padding-right: 25%
+  padding-left: 5%
+  padding-right: 5%
   background-color: $color-white
 
   h2
@@ -178,3 +171,31 @@ div.frequently-asked-questions
     content: ""
     display: table
     clear: both
+
+@media (min-width: 1077px)
+  div.answers
+    padding-left: 25%
+    padding-right: 25%
+
+  div.effort
+    padding-left: 25%
+    padding-right: 25%
+
+  div.frequently-asked-questions
+    padding-left: 25%
+    padding-right: 25%
+
+  .good-practices
+    h3
+      width: 50%
+    h4
+      padding-left: 15em
+    ul
+      padding-left: 16em
+
+  .bad-practices
+    h3
+      width: 35%
+
+    h4, p
+      padding-left: 12em