From cb1b69c3466b7ed486cfe32627eff099877d5b44 Mon Sep 17 00:00:00 2001 From: Carl Worth Date: Mon, 11 May 2020 15:46:59 -0700 Subject: [PATCH] Add some mobile-first styling Some of the changes here include: * Adding a reset.css for good control of all styling * Using only the center portion of the window for a very wide window * Dropping wasteful margins around page content for a narrow window * Forcing input fields onto their own rows * Use grid display for form for consistent input width * Use 2-column for on wide windows and single-column for narrow * Use more modern flat styling for the submit button * Drop the ugly dashed outline for button focus --- empires/index.html | 30 +++++++--- empires/reset.css | 48 ++++++++++++++++ empires/style.css | 137 ++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 204 insertions(+), 11 deletions(-) create mode 100644 empires/reset.css diff --git a/empires/index.html b/empires/index.html index 0951a51..4f574b9 100644 --- a/empires/index.html +++ b/empires/index.html @@ -3,12 +3,15 @@ The Game of Empires + +

@@ -22,7 +25,7 @@

Welcome to the game of Empires!

The Game of Empires

To join the game, type your own name below. Also, choose the name @@ -37,14 +40,22 @@

@@ -63,5 +74,6 @@

+ diff --git a/empires/reset.css b/empires/reset.css new file mode 100644 index 0000000..e29c0f5 --- /dev/null +++ b/empires/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/empires/style.css b/empires/style.css index 89bca0c..9beda3e 100644 --- a/empires/style.css +++ b/empires/style.css @@ -1,7 +1,61 @@ +body { + background-color: #333738; + font-family: sans-serif; + line-height: 1.5; +} + +#page { + margin-top: 36px; + margin-bottom: 36px; + padding-top: 30px; + padding-bottom: 30px; + padding-left: 10px; + padding-right: 10px; + background-color: white; + margin-left: auto; + margin-right: auto; +} + +/* For a wide screen, just use the center of the window for content. */ +@media screen and (min-width: 500px) { + #page { + max-width: 720px; + padding-left: 50px; + padding-right: 50px; + } +} + +/* And when the screen is narrow, let's kill the wasted vertical space + above it too. */ +@media screen and (max-width: 499px) { + #page { + margin-top: 0; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; + } +} + +h1 { + color: #333738; + font-size: 150%; + font-weight: bold; +} + +h2 { + color: #333738; + font-size: 110%; + font-weight: bold; +} + +p,dl,dd { + margin-bottom: 1em; +} + /* Default message severity is "info" but can be overriden. */ .message { padding: 1em; - background-color: #46a7f5; + background-color: #44c7ef; color: white; transition: 0.3s; margin-bottom: 0.5em; @@ -9,7 +63,7 @@ } .success { - background-color: #6abc6d; + background-color: #44c7ef; } .warning { @@ -60,3 +114,82 @@ #players-div { display:none; } + +#register-form { + max-width: 100%; + display: grid; + grid-template-columns: 49% 49%; + grid-column-gap: 2%; +} + +.form-row { + max-width: 100%; + padding-bottom: 0.25em; +} + +.form-row.medium.left { + grid-column-start: 1; +} + +.form-row.medium.right { + grid-column-start: 2; +} + +.form-row.large { + grid-column-start: 1; + grid-column-end: span 2; +} + +/* For a narrow screen, use a single-column for medium form rows. */ +@media screen and (max-width: 600px) { + .form-row.medium.left,.form-row.medium.right { + grid-column-start: 1; + grid-column-end: span 2 + } +} + +input { + width: 100%; +} + +input { + box-sizing: border-box; + + height: 40px; + + padding: 10px 12px; + + border: 1px solid #287789; + border-radius: 4px; +} + +input:focus { + border: 2px solid #44c7ef; +} + +button { + display: inline-block; + border-radius: 4px; + background-color: #287789; + border: none; + color: white; + text-align: center; + font-size: 125%; + margin-top: .25em; + padding-top: 0.25em; + padding-bottom: 0.25em; + width: 200px; + transition: all 150ms ease; +} + +button:hover { + transform: translateY(-1px); + background-color: #44c7ef; +} + +:focus { + outline: none; +} +::-moz-focus-inner { + border: 0; +} -- 2.43.0