Plume/Plume
9
18
Fork 24
Code Issues 177 Pull requests 8 Releases 8 Wiki Activity

Better contrast for input fields #417

Merged
dfeyer merged 3 commits from task-better-inputs into master 2019-01-09 17:57:49 +00:00
Conversation 6 Commits 3 Files changed 4 +14 -9
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%;
} }
dfeyer commented 2019-01-08 18:35:19 +00:00 (Migrated from github.com)
Review
Copy link

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 2019-01-09 16:16:46 +00:00 (Migrated from github.com)
Review
Copy link

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 2019-01-09 16:17:09 +00:00 (Migrated from github.com)
Review
Copy link

(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 { 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';