From 0563668921cba8485d99a87fee612de4e5a24efb Mon Sep 17 00:00:00 2001 From: jimi Date: Tue, 10 Mar 2009 14:35:07 -0500 Subject: [PATCH] Layout redesign: - Added reset stylesheet - Used em for width, % for fonts --- app/views/layouts/application.html.erb | 2 +- public/stylesheets/application.css | 102 ++++++++++++++++++------- public/stylesheets/reset.css | 54 +++++++++++++ 3 files changed, 128 insertions(+), 30 deletions(-) create mode 100644 public/stylesheets/reset.css diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index d546973..2fd1e82 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -3,7 +3,7 @@ <%= h(yield(:title) || "Untitled") %> - <%= stylesheet_link_tag 'application' %> + <%= stylesheet_link_tag 'reset', 'application' %> <%= yield(:head) %> diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index a462119..4e71631 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -1,15 +1,59 @@ +html { + overflow-y: scroll; +} body { - background-color: #4B7399; - font-family: Verdana, Helvetica, Arial; - font-size: 14px; + background-color: #33FF66; + font-family: Verdana, sans-serif; + padding: 0.75em; + line-height: 1.333; +} + +h1, h2, h3, h4, h5, h6 { + font-weight: bold; + margin-bottom: 0.5em; +} + +h1 { + font-size: 175%; } -a img { - border: none; +h2 { + font-size: 150%; +} + +h3 { + font-size: 125%; +} + +h4 { + font-size: 113%; +} + +h5, h6 { + font-size: 100%; } a { + color: #003399; + text-decoration: none; +} + +a:hover { color: #0000FF; + text-decoration: underline; +} + +p { + font-size: 75%; + margin-bottom: 0.375em; +} + +strong { + font-weight: bold; +} + +em { + font-style: italic; } .clear { @@ -19,27 +63,27 @@ a { } #container { - width: 75%; - margin: 0 auto; - background-color: #FFF; - padding: 20px 40px; + width: 44em; + margin: 0.5em auto; + background-color: #FFFFFF; + padding: 0.75em 1.75em; border: solid 1px black; - margin-top: 20px; } #flash_notice, #flash_error { - padding: 5px 8px; - margin: 10px 0; + font-size: 75%; + padding: 0.375em 1.5em; + margin: 0.5em 0; } #flash_notice { - background-color: #CFC; - border: solid 1px #6C6; + background-color: #CCFFCC; + border: solid 1px #66CC66; } #flash_error { - background-color: #FCC; - border: solid 1px #C66; + background-color: #FFCCCC; + border: solid 1px #CC6666; } .fieldWithErrors { @@ -47,35 +91,35 @@ a { } #errorExplanation { - width: 400px; + width: 25em; border: 2px solid #CF0000; - padding: 0px; - padding-bottom: 12px; - margin-bottom: 20px; - background-color: #f0f0f0; + padding: 0; + padding-bottom: 0.75em; + margin-bottom: 1.25em; + background-color: #F0F0F0; } #errorExplanation h2 { text-align: left; font-weight: bold; - padding: 5px 5px 5px 15px; - font-size: 12px; + padding: 0.375em 0.375em 0.375em 1.0em; + font-size: 75%; margin: 0; - background-color: #c00; - color: #fff; + background-color: #CC0000; + color: #FFFFFF; } #errorExplanation p { - color: #333; + color: #333333; margin-bottom: 0; - padding: 8px; + padding: 0.5em; } #errorExplanation ul { - margin: 2px 24px; + margin: 0.125em 1.5em; } #errorExplanation ul li { - font-size: 12px; + font-size: 75%; list-style: disc; } diff --git a/public/stylesheets/reset.css b/public/stylesheets/reset.css new file mode 100644 index 0000000..b3c4351 --- /dev/null +++ b/public/stylesheets/reset.css @@ -0,0 +1,54 @@ +/* http://meyerweb.com/eric/tools/css/reset/ */ +/* v1.0 | 20080212 */ + +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, +font, 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 { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +/* remember to define focus styles! */ +:focus { + outline: 0; +} + +/* remember to highlight inserts somehow! */ +ins { + text-decoration: none; +} +del { + text-decoration: line-through; +} + +/* tables still need 'cellspacing="0"' in the markup */ +table { + border-collapse: collapse; + border-spacing: 0; +}