diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 4f3025f..6a727df 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -1,5 +1,5 @@ body { - padding: 50px; + padding: 1em; font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; } diff --git a/public/stylesheets/submit.css b/public/stylesheets/submit.css index df8ee7a..89dd41c 100644 --- a/public/stylesheets/submit.css +++ b/public/stylesheets/submit.css @@ -1,4 +1,41 @@ +h1 { + text-align: center; +} + form { display: flex; flex-direction: column; + max-width: 20em; + margin-left: auto; + margin-right: auto; +} + +span { + display: flex; + flex-direction: column; +} + + +#sport-dropdown { + width: 100%; +} + +.form-section { + margin-bottom: 0.75em; +} + +.form-section-input { + flex-direction: row; +} + +input { + width: 100%; +} + +.score-input{ + width: 35%; +} + +button { + margin-top: 1.5em; } \ No newline at end of file diff --git a/views/index.pug b/views/index.pug index 9cc4f1b..7f6baf1 100644 --- a/views/index.pug +++ b/views/index.pug @@ -6,29 +6,35 @@ block stylesheets block content h1 Submit Score form(action='/submit', method='POST') - span + span(class='form-section') label Sport - select(name="sport") - option(value="Football" selected) Football - select(name="gender") - option(value="Male" selected) Male - option(value="Female") Female - select(name="division") - option(value="Varsity") Varsity - option(value="JV-A") JV-A - option(value="JV-B") JV-B - span + span(class='form-section-input') + select#sport-dropdown(name="sport") + option(value="Football" selected) Football + select#gender-dropdown(name="gender") + option(value="Male" selected) Male + option(value="Female") Female + select#division-dropdown(name="division") + option(value="Varsity") Varsity + option(value="JV-A") JV-A + option(value="JV-B") JV-B + span(class='form-section') label Home Team - input(type="text", name="home-team") - input(type="number", name="home-team-score", value="0") - span - label Visiting Team - input(type="text", name="visiting-team") - input(type="number", name="visiting-team-score", value="0") - span + span(class='form-section-input') + input(type="text", name="home-team") + input(class="score-input", type="number", name="home-team-score", value="0") + span(class='form-section') + label Visiting Team + span(class='form-section-input') + input(type="text", name="visiting-team") + input(class="score-input", type="number", name="visiting-team-score", value="0") + span(class='form-section') label Submitter - input(type="text", name="submitter") - span + span(class='form-section-input') + input(type="text", name="submitter") + span(class='form-section') label Send info to - input(type="email", name="email", placeholder="email@example.com") + span(class='form-section-input') + input(type="email", name="email", placeholder="email@example.com") + span(class='form-section') button(type="submit") Submit diff --git a/views/layout.pug b/views/layout.pug index f91cc8c..2125107 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -2,7 +2,7 @@ doctype html html head title= title + link(rel='stylesheet', href='/stylesheets/style.css') block stylesheets - link(rel='stylesheet', href='/stylesheets/style.css') body block content