Better sizing for small screens

app/assets/stylesheets/all.sass

@@ -1,3 +1,5 @@
+$highlight: #9CC5EE
+
 *
   height: auto
   padding: 0
@@ -9,7 +11,7 @@
 html
   height: 100%
   box-sizing: border-box
-  background-color: #9CC5EE
+  background-color: $highlight
   // Integrating adl in another website
   &.iframe
     background-color: transparent
@@ -144,7 +146,7 @@ fieldset
   border: none
   margin: 1em auto
   padding: 2%
-  box-shadow: 1px 1px 5px gray
+  box-shadow: 1px 1px 5px $highlight
   border-radius: 0.4em
   legend
     color: #666

app/assets/stylesheets/events.sass

@@ -102,9 +102,9 @@ a#banner
 
 body.events.show, body.orgas.show, body.tags.show, body.pages
   main
+    width: 60em
     padding: 1em
-    max-width: 60em
+    box-shadow: 1px 1px 5px $highlight
-    box-shadow: 1px 1px 5px gray
     border-radius: 0.4em
     h2
       margin-top: 1em
@@ -112,8 +112,8 @@ html.iframe main
   box-shadow: none !important
 
 #advises
+  width: 60em
   border: 1px solid #FFB578
-  max-width: 60em
   border-radius: 0.2em
   padding-left: 10px
   padding-right: 10px
@@ -133,7 +133,7 @@ html.iframe main
 
 /* Display in events list */
 article.event
-  box-shadow: -1em 1em 1em -1em gray
+  box-shadow: -1em 1em 1em -1em $highlight
   margin-left: 1em
   padding-left: 1em
   padding-bottom: 0.4em

app/assets/stylesheets/mobile.sass

@@ -12,7 +12,6 @@
   body
     border: none
     margin: 0
-    padding: 1%
     main ul
       margin-left: 0
 
@@ -24,8 +23,6 @@
 
 /* For small screen width */
 @media all and (max-width: 34em)
-  body
-    padding: 0
   p
     padding-left: 0.4em
     padding-right: 0.4em