aitzol
/
Plume
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
Dominique Feyer 2019-01-09 18:57:48 +01:00 committed by Baptiste Gelez
parent 0490b698cb
commit 09a26b4602
4 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
static/css/_forms.scss
View File

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

5
static/css/_global.scss
View File

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

1
static/css/_variables.scss
View File

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

7
static/css/main.scss
View File

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