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