From 68d52a15f763b1f3d1b56f983ef79a0edd5e8bf8 Mon Sep 17 00:00:00 2001 From: Danny van Kooten Date: Wed, 2 May 2018 17:03:18 +0200 Subject: [PATCH] add simple styles for login page, use normalize.css --- assets/js/components/LoginForm.js | 7 +- assets/js/pages/login.js | 18 +- assets/sass/forms.scss | 23 ++ assets/sass/normalize.scss | 341 ++++++++++++++++++++++++++++++ assets/sass/styles.scss | 25 +-- assets/sass/util.scss | 4 + 6 files changed, 393 insertions(+), 25 deletions(-) create mode 100644 assets/sass/forms.scss create mode 100644 assets/sass/normalize.scss create mode 100644 assets/sass/util.scss diff --git a/assets/js/components/LoginForm.js b/assets/js/components/LoginForm.js index ba14739..f322489 100644 --- a/assets/js/components/LoginForm.js +++ b/assets/js/components/LoginForm.js @@ -9,7 +9,6 @@ class LoginForm extends Component { constructor(props) { super(props) - this.handleSubmit = this.handleSubmit.bind(this); this.state = { email: '', password: '', @@ -20,6 +19,7 @@ class LoginForm extends Component { @bind handleSubmit(e) { e.preventDefault(); + this.setState({ message: '' }); Client.request('session', { method: "POST", @@ -33,9 +33,8 @@ class LoginForm extends Component { this.setState({ message: e.message, password: '' - }) - - }) + }); + }); } @bind diff --git a/assets/js/pages/login.js b/assets/js/pages/login.js index e9f3db7..c5ed4f6 100644 --- a/assets/js/pages/login.js +++ b/assets/js/pages/login.js @@ -6,11 +6,19 @@ import LoginForm from '../components/LoginForm.js'; class Login extends Component { render() { return ( -
-
- -
-
+
+
+ +
+
+ +
+ +
) } } diff --git a/assets/sass/forms.scss b/assets/sass/forms.scss new file mode 100644 index 0000000..5a5c021 --- /dev/null +++ b/assets/sass/forms.scss @@ -0,0 +1,23 @@ + +input { + padding: 4px 6px; +} + +label { + display: block; + margin-bottom: 2px; + font-weight: bold; +} + +input[type="submit"] { + background: #533feb; + color: white; + padding: 6px 12px; + border: 0; + cursor: pointer; + + &:hover, + &:active { + background: darken(#533feb, 15%); + } +} diff --git a/assets/sass/normalize.scss b/assets/sass/normalize.scss new file mode 100644 index 0000000..47b010e --- /dev/null +++ b/assets/sass/normalize.scss @@ -0,0 +1,341 @@ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss index fa8ccd1..106ccdb 100644 --- a/assets/sass/styles.scss +++ b/assets/sass/styles.scss @@ -13,21 +13,11 @@ light #f5f7fa padding 8, 16, 20, 32, 64, 128, 256, 512, 1024 font size 12, 16, 64 */ - +@import "normalize"; @import url('//overpass-30e2.kxcdn.com/overpass.css'); -* { - padding: 0; - margin: 0; - border: 0; - outline: 0; - border-radius: 0; - border: none; - vertical-align: baseline; - -webkit-appearance: none; - appearance: none; - list-style: none; - box-sizing: border-box; +*{ + box-sizing: border-box; } ::selection { background: #a0ffd1; } @@ -93,16 +83,17 @@ footer {} .box-pages { background: #fff; } .box-referrers { background: #fff; } -nav.main-nav ul { width: 100%; text-align: right; margin-top: 4px; } +nav.main-nav ul { width: 100%; text-align: right; margin-top: 4px; margin-bottom: 0; padding: 0; } nav li { display: inline-block; } nav li a { transition: color .2s ease; position: relative; display: inline-block; padding: 0 8px 0 0; } nav.main-nav li a { padding: 6px 8px 6px 0; } nav li a:hover { color: #98a0a6; } -nav.date-nav li.active a:after { content:""; background: #88ffc6; display: block; width: 100%; height: 3px; position: absolute; top: 4px; z-index: -1; margin: 0 0 0 -4px; transition: all .4s ease; } +.date-nav ul { padding: 0; margin: 0; } nav.date-nav li a { color: #46494d; } nav.date-nav li a:hover { color: #98a0a6; } nav.date-nav li.active a:hover { color: #46494d; } +nav.date-nav li.active a:after { content:""; background: #88ffc6; display: block; width: 100%; height: 3px; position: absolute; top: 4px; z-index: -1; margin: 0 0 0 -4px; transition: all .4s ease; } nav li.visitors { color: #533feb; } nav li.signout a { padding-right: 0; } @@ -110,7 +101,7 @@ nav li.logo { float: left; } nav li.logo a { color: #533feb; display: inline-block; background: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 48 48' xml:space='preserve'%3e%3cpath style='fill:%23533feb;' d='M47.882,26.381C47.96,25.598,48,24.804,48,24c0.001-6.623-2.688-12.632-7.029-16.971 C36.632,2.688,30.623-0.001,24,0C17.377-0.001,11.368,2.688,7.029,7.029C2.688,11.368-0.001,17.377,0,24 c0,3.917,0.941,7.624,2.609,10.892c0,0,0,0,0,0c1.985,3.891,4.998,7.165,8.682,9.47C14.975,46.667,19.338,48.001,24,48 c6.221,0.001,11.901-2.372,16.162-6.258C44.424,37.858,47.284,32.45,47.882,26.381C47.882,26.381,47.882,26.381,47.882,26.381 C47.882,26.381,47.882,26.381,47.882,26.381C47.882,26.381,47.882,26.381,47.882,26.381C47.882,26.381,47.882,26.381,47.882,26.381 z M24,2.824c5.852,0.001,11.137,2.368,14.974,6.202c3.596,3.599,5.902,8.472,6.175,13.891l-8.386-8.386 c-0.263-0.263-0.627-0.414-0.998-0.414s-0.735,0.151-0.998,0.413L22.588,26.709l-5.59-5.59c-0.551-0.551-1.445-0.551-1.997,0 l-10.69,10.69C3.353,29.394,2.824,26.762,2.824,24c0.001-5.852,2.368-11.137,6.202-14.974C12.863,5.192,18.148,2.824,24,2.824z'/%3e%3cpath style='fill:%23fff;' d='M4.312,31.809l10.69-10.69c0.551-0.551,1.445-0.551,1.997,0l5.59,5.59l12.178-12.178 c0.263-0.263,0.626-0.413,0.998-0.413s0.735,0.151,0.998,0.414l8.386,8.386c-0.273-5.42-2.579-10.293-6.175-13.891 C35.137,5.192,29.852,2.824,24,2.824C18.148,2.824,12.863,5.192,9.026,9.026C5.192,12.863,2.824,18.148,2.824,24 C2.824,26.762,3.353,29.394,4.312,31.809z'/%3e%3c/svg%3e") top left no-repeat; background-size: 24px 24px; height: 24px; padding: 6px 0 6px 32px; } -.main-nav ul { display: inline-block; } +.main-nav ul { display: inline-block; padding: 0; } .spacer { color: #98a0a6; padding: 0 8px; } svg { width: 24px; height: 24px; display: inline-block; vertical-align: top; } @@ -149,3 +140,5 @@ a:hover {} .total-numbers { font-size: 64px; } } +@import "forms"; +@import "util"; diff --git a/assets/sass/util.scss b/assets/sass/util.scss new file mode 100644 index 0000000..4cfe48f --- /dev/null +++ b/assets/sass/util.scss @@ -0,0 +1,4 @@ +.small-margin { + margin-top: 20px; + margin-bottom: 20px; +}