Better contrast for input fields (#417)

* Better contrat for input fields

This change set a white background for input field (text, select and textarea)
to have a better contrast with the page background and improve accessibility for
people with vision problem, and just crappy screen.

This change also remove the round corner for the input to have a clear difference
between editing field and buttons.

This max-width of the form element are a bit bigger too.

* Less space between label and input

static/css/_forms.scss

@@ -1,29 +1,25 @@
 label {
  	display: block;
- 	margin: 2em auto 1em;
+ 	margin: 2em auto .5em;
  	font-size: 1.2em;
- 	max-width: 40rem;
 }
 input, textarea, select {
  	transition: all 0.1s ease-in;
  	display: block;
  	width: 100%;
- 	max-width: 40rem;
  	margin: auto;
  	padding: 1em;
  	box-sizing: border-box;
 
- 	background: $white;
+ 	background: $form-input-background;
  	color: $black;
  	border: none;
  	border: solid $lightgray thin;
- 	border-radius: 0.5em;
 
  	font-size: 1.2em;
  	font-weight: 400;
 
  	&:focus {
- 	  background: $white;
  	  border-color: $purple;
  	}
 }
@@ -104,6 +100,7 @@ input[type="submit"] { display: block; }
 
 //  Writing page
 form.new-post {
+  max-width: 60em;
   .title {
    	margin: 0 auto;
    	padding: 0.75em 0;
@@ -119,7 +116,6 @@ form.new-post {
    	min-height: 20em;
    	overflow-y: hidden;
    	resize: none;
-   	box-sizing: content-box;
   }
   input[type="submit"] {
    	background: $lightgray;

static/css/_global.scss

@@ -47,11 +47,11 @@ small {
 
 /// Main
 body > main > *, .h-feed > * {
- 	padding: 0 20%;
+ 	margin: 0 20%;
 }
 
 body > main > .h-entry, .h-feed {
-	padding: 0;
+	margin: 0;
 }
 
 main {
@@ -66,6 +66,7 @@ main {
   }
   h1 {
     font-size: 2.5em;
+    font-weight: 300;
     margin-top: 1em;
 
     &.article {

static/css/_variables.scss

@@ -1,6 +1,7 @@
 // Colors
 
 $background: #F4F4F4;
+$form-input-background: #FFFFFF;
 $gray: #E3E3E3;
 $lightgray: #ECECEC;
 $black: #242424;

static/css/main.scss

@@ -4,6 +4,13 @@
 @import url('/static/fonts/Lora/Lora.css');
 @import url('/static/fonts/Playfair_Display/PlayfairDisplay.css');
 
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
 @import 'variables';
 @import 'global';
 @import 'header';