Better form, much larger

app/assets/stylesheets/all.sass

@@ -92,8 +92,6 @@ header.top
 
 main, body.mce-content-body
   position: relative
-  & > *
-    max-width: 80em
   h1
     margin: 10px auto 5px auto
     letter-spacing: 2px
@@ -105,7 +103,6 @@ main, body.mce-content-body
     list-style-position: inside
   p
     text-align: left
-    line-height: 1.5
     &.label
       text-align: center
     span.label:after
@@ -138,6 +135,7 @@ aside
       display: block
 
 fieldset
+  width: 60em
   border: none
   margin: 1em auto
   padding: 2%

app/assets/stylesheets/events.sass

@@ -67,7 +67,6 @@ body.events.index table
         color: #111
         font-size: 0.6em
         font-weight: bolder
-        line-height: 1.2em
         letter-spacing: 2px
       &:hover .day_number
         color: black

app/assets/stylesheets/form.sass

@@ -16,36 +16,40 @@ body.mce-content-body
 
 .helper p
   color: gray
-  width: 60em
   text-align: right
   margin-top: 0
   margin-bottom: 0
 
 .field
   color: #777
-  width: 60em
   border: $border
-  display: inline-block
+  display: flex
-  min-width: 50%
+  flex-wrap: wrap
-  text-align: left
   box-shadow: $shadow
   border-radius: $radius
   & > label, .field_with_errors > label
     width: 10em
+    margin: 0
     padding: 0.5em
-    display: inline-block
     text-align: right
-  input[type=text]
+  input, textarea, .radios, .mce-tinymce, div.tagsinput
-    width: 22em
+    flex-grow: 1
+  select
+    margin-left: 0
 
 input, textarea, select, a.button, .actions > button, .radios, .mce-tinymce, div.tagsinput
   border: none
+  outline: none
   padding: 0.5em
   font-size: inherit
   font-family: inherit
-  background-color: white
+  background-color: transparent
   &:focus
-    background-color: #F0F8FF
+    border: solid 0.4em #F0F8FF
+    padding: 0.1em 0.4em
+    background-color: transparent
+    border-left-width: 0.1em
+    border-right-width: 0.1em
   &[type=radio]
     box-shadow: none
   &[type=radio] + label
@@ -67,6 +71,7 @@ select
     background-color: pink
 
 .radios
+  text-align: left
   [type=radio]
     display: none
   label

app/assets/stylesheets/mobile.sass

@@ -1,13 +1,3 @@
-@media all and (min-width: 1600px)
-  body
-    font-size: larger
-
-  aside#orga-list
-    width: auto
-
-  #advises
-    max-width: 60em
-
 @media all and (max-width: 1024px)
   .links, a#banner
     margin: 0.6em auto
@@ -19,6 +9,10 @@
       max-width: 3em
 
 @media all and (max-width: 900px)
+  body
+    font-size: larger
+    line-height: 1.5
+
   header.top
     nav
       font-size: smaller
@@ -42,6 +36,7 @@
 @media all and (max-width: 34em)
   body
     padding: 0
+    font-size: initial
   p
     padding-left: 0.4em
     padding-right: 0.4em
@@ -55,8 +50,6 @@
     h1
       padding-top: 0
       letter-spacing: initial
-    h2
-      font-size: initial
 
   form#orga_search
     display: none
@@ -113,4 +106,21 @@
     padding: 0.4em 0
 
   .field
+    display: block
+    label
+      width: auto
+      display: block
+      text-align: left
+    input
       width: 100%
+      display: block
+
+@media all and (min-width: 1600px)
+  body
+    font-size: x-large
+
+  aside#orga-list
+    width: auto
+
+  #advises
+    max-width: 60em

app/assets/stylesheets/tags.sass

@@ -19,7 +19,6 @@ div.tagsinput
   margin: 0
   padding: 0
   display: inline-block
-  min-width: 40em
   min-height: auto !important
   vertical-align: middle
   span.tag
@@ -32,6 +31,3 @@ div.tagsinput
     font-size: inherit
     min-width: 8em
     margin-right: 0
-  *:first-child
-    input, .ui-autocomplete-input
-      min-width: 20em