Better contrast for input fields #417

Merged
dfeyer merged 3 commits from task-better-inputs into master 5 years ago

@ -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;

@ -47,11 +47,11 @@ small {
/// Main
body > main > *, .h-feed > * {
padding: 0 20%;
margin: 0 20%;
}
dfeyer commented 5 years ago (Migrated from github.com)
Review

Needed to set the max-width on form element, should not break anything

Needed to set the max-width on form element, should not break anything
elegaanz commented 5 years ago (Migrated from github.com)
Review

I think it broke the article list on the profile page, but that's not a real problem. However if you want to fix it, just replace padding with margin in .cards too.

I think it broke the article list on the profile page, but that's not a real problem. However if you want to fix it, just replace `padding` with `margin` in `.cards` too.
elegaanz commented 5 years ago (Migrated from github.com)
Review

(and actually it is not broken, just different from what we currently have)

(and actually it is not broken, just different from what we currently have)
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 {

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

@ -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';

Loading…
Cancel
Save