From 09a26b46025a085b31140e7f1d261b1da245a0e2 Mon Sep 17 00:00:00 2001
From: Dominique Feyer <dfeyer@ttree.ch>
Date: Wed, 9 Jan 2019 18:57:48 +0100
Subject: [PATCH] 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     | 10 +++-------
 static/css/_global.scss    |  5 +++--
 static/css/_variables.scss |  1 +
 static/css/main.scss       |  7 +++++++
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/static/css/_forms.scss b/static/css/_forms.scss
index 52e264b7..453a495c 100644
--- a/static/css/_forms.scss
+++ b/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;
diff --git a/static/css/_global.scss b/static/css/_global.scss
index c48bf4c5..1a7286aa 100644
--- a/static/css/_global.scss
+++ b/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 {
diff --git a/static/css/_variables.scss b/static/css/_variables.scss
index 77d093f7..b3349fe0 100644
--- a/static/css/_variables.scss
+++ b/static/css/_variables.scss
@@ -1,6 +1,7 @@
 // Colors
 
 $background: #F4F4F4;
+$form-input-background: #FFFFFF;
 $gray: #E3E3E3;
 $lightgray: #ECECEC;
 $black: #242424;
diff --git a/static/css/main.scss b/static/css/main.scss
index 00ddec72..c0c6f73b 100644
--- a/static/css/main.scss
+++ b/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';