From b9db753164bcac456c19e5115b084860f2c88a35 Mon Sep 17 00:00:00 2001 From: albert Date: Mon, 14 Nov 2011 16:19:54 -0500 Subject: [PATCH] style tweaks --- .../stylesheets/common/000_vars.css.scss | 37 +++- .../stylesheets/common/010_reset.css.scss | 196 +++++++++++++++--- .../stylesheets/common/020_base.css.scss | 18 +- .../stylesheets/common/main_layout.css.scss | 2 +- .../stylesheets/common/page_header.css.scss | 7 +- app/assets/stylesheets/common/tables.css.scss | 11 +- .../stylesheets/specific/posts.css.scss | 20 +- 7 files changed, 212 insertions(+), 79 deletions(-) diff --git a/app/assets/stylesheets/common/000_vars.css.scss b/app/assets/stylesheets/common/000_vars.css.scss index 9b68cbf5b..ef4626626 100644 --- a/app/assets/stylesheets/common/000_vars.css.scss +++ b/app/assets/stylesheets/common/000_vars.css.scss @@ -1,21 +1,21 @@ +$menu_color: #F7F7FF; $link_color: hsl(213, 100%, 50%); -$link_hover_color: hsl(213, 100%, 75%); -$link_dark_color: hsl(213, 100%, 25%); -$border_color: #CCC; -$highlight_color: #F0F0F0; -$reverse_highlight_color: hsl(50, 100, 90); +$link_hover_color: lighten($link_color, 25%); +$link_dark_color: darken($link_color, 25%); +$highlight_color: lighten(complement($link_color), 35%); $h1_size: 2em; $h2_size: 1.5em; $h3_size: 1.16667em; $h1_padding: 1.25em 0; $h2_padding: 1.45833em 0; $h3_padding: 1.51785em 0; +$baseline: 1em; -@mixin round-border($radius) { +@mixin border-radius($radius) { -moz-border-radius: $radius; - -webkit-border-radius:; $radius; - -ms-border-radius:; $radius; - -o-border-radius:; $radius; + -webkit-border-radius: $radius; + -ms-border-radius: $radius; + -o-border-radius: $radius; border-radius: $radius; } @@ -51,3 +51,22 @@ $h3_padding: 1.51785em 0; *display: inline; *vertical-align: auto; } + +@mixin vertical-gradient ($startColor: #555, $endColor: #333) { + background-color: $endColor; + background-repeat: repeat-x; + background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+ + background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10 + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10 + background-image: linear-gradient(top, $startColor, $endColor); // The standard + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0); // IE9 and down +} + +@mixin gradientBar($primaryColor, $secondaryColor) { + @include vertical-gradient($primaryColor, $secondaryColor); + text-shadow: 0 -1px 0 rgba(0,0,0,0.25); + border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%); + border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) opacify(rgba(0,0,0,0.1), 0.15); +} diff --git a/app/assets/stylesheets/common/010_reset.css.scss b/app/assets/stylesheets/common/010_reset.css.scss index 9c4c3c567..c54fffaba 100644 --- a/app/assets/stylesheets/common/010_reset.css.scss +++ b/app/assets/stylesheets/common/010_reset.css.scss @@ -1,40 +1,172 @@ -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 { +// Source: https://github.com/FrogBot/sassy_bootstrap/blob/master/lib/_reset.sass + +@import "000_vars.css.scss"; + +// Reset.sass +// Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an +// adapted version here that cuts out some of the reset HTML elements we will +// never need here (i.e., dfn, samp, etc). + +// ERIC MEYER RESET +// ---------------- + +html, body { + margin: 0; + padding: 0; +} + +h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; +/* font-weight: normal;*/ + font-style: normal; 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; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; + line-height: 1.25em; + font-family: inherit; } + table { border-collapse: collapse; border-spacing: 0; -} \ No newline at end of file +} + +ol, ul { + list-style: none; +} + +q:before, q:after, blockquote:before, blockquote:after { + content: ""; +} + +// Normalize.css +// Pulling in select resets form the normalize.css project +// -------------------------------------------------- + +// Display in IE6-9 and FF3 +// ------------------------- +// Source: http://github.com/necolas/normalize.css +html { + overflow-y: scroll; + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +// Focus states +a:focus { + outline: thin dotted; +} + +// Hover & Active + +a:hover, +a:active { + outline: 0; +} + +// Display in IE6-9 and FF3 +// ------------------------- +// Source: http://github.com/necolas/normalize.css + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section { + display: block; +} + +// Prevents sub and sup affecting line-height in all browsers +// ------------------------- +// Source: http://github.com/necolas/normalize.css + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +// Img border in a's and image quality +// ------------------------- +// Source: http://github.com/necolas/normalize.css +img { + border: 0; + -ms-interpolation-mode: bicubic; +} + +// Forms +// ------------------------- +// Source: http://github.com/necolas/normalize.css + +// Font size in all browsers, margin changes, misc consistency + +button, +input, +select, +textarea { + font-size: 100%; + margin: 0; + vertical-align: baseline; + *vertical-align: middle; +} + +button, +input { + line-height: normal; + // FF3/4 have !important on line-height in UA stylesheet + *overflow: visible; + // Inner spacing ie IE6/7 +} + +button::-moz-focus-inner, +input::-moz-focus-inner { + // Inner padding and border oddities in FF3/4 + border: 0; + padding: 0; +} + +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + // Cursors on all buttons applied consistently + -webkit-appearance: button; + // Style clickable inputs in iOS +} + +input[type="search"] { + // Appearance in Safari/Chrome + -webkit-appearance: textfield; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + // Inner-padding issues in Chrome OSX, Safari 5 +} + +textarea { + overflow: auto; + // Remove vertical scrollbar in IE6-9 + vertical-align: top; + // Readability and alignment cross-browser +} diff --git a/app/assets/stylesheets/common/020_base.css.scss b/app/assets/stylesheets/common/020_base.css.scss index a429e4cff..3dd6ff078 100644 --- a/app/assets/stylesheets/common/020_base.css.scss +++ b/app/assets/stylesheets/common/020_base.css.scss @@ -43,7 +43,7 @@ em { h1, h2, h3, h4, h5, h6 { font-family: Tahoma, Verdana, Helvetica, sans-serif; font-weight: bold; - line-height: 1.25em; + line-height: 1.5em; } h1 { @@ -78,22 +78,6 @@ img.wait { margin-left: 5px; } -input[type=text], input[type=password], input[type=url], textarea, button { - font-size: 1em; -} - -input[type=submit] { - padding: 1px 4px; - font-size: 1em; - cursor: pointer; -} - -input:focus, textarea:focus { -} - -input[type=submit]:hover { -} - legend { font-size: $h2_size; font-weight: bold; diff --git a/app/assets/stylesheets/common/main_layout.css.scss b/app/assets/stylesheets/common/main_layout.css.scss index b8dba4473..78798e659 100644 --- a/app/assets/stylesheets/common/main_layout.css.scss +++ b/app/assets/stylesheets/common/main_layout.css.scss @@ -57,5 +57,5 @@ div#more-links { width: 8em; line-height: 1.3em; padding: 0.2em 0.6em; - @include box-shadow(2px 2px 2px #ccc); + @include box-shadow(2px, 2px, 2px, #ccc); } diff --git a/app/assets/stylesheets/common/page_header.css.scss b/app/assets/stylesheets/common/page_header.css.scss index 78beaa5c5..484f8365b 100644 --- a/app/assets/stylesheets/common/page_header.css.scss +++ b/app/assets/stylesheets/common/page_header.css.scss @@ -1,3 +1,5 @@ +@import "000_vars.css.scss"; + header#top { h1 { font-size: 2.5em; @@ -6,7 +8,7 @@ header#top { menu { margin-top: -2px; - background: #F7F7FF; + background: $menu_color; padding: 6px 20px; li { @@ -24,8 +26,9 @@ header#top { background: white; li.current a { - background: #F7F7FF; + background: $menu_color; font-weight: bold; + @include border-radius(4px 4px 0 0); } } } \ No newline at end of file diff --git a/app/assets/stylesheets/common/tables.css.scss b/app/assets/stylesheets/common/tables.css.scss index ad4d63287..5c3d9b608 100644 --- a/app/assets/stylesheets/common/tables.css.scss +++ b/app/assets/stylesheets/common/tables.css.scss @@ -11,11 +11,11 @@ table.striped { tbody { tr { - border-bottom: 1px solid $border_color; - } - - tr:hover { - background-color: $reverse_highlight_color; + border-bottom: 1px solid #CCC; + + &:hover { + background-color: $highlight_color; + } } } @@ -35,4 +35,3 @@ table.striped { background-color: #FAFAFA; } } - \ No newline at end of file diff --git a/app/assets/stylesheets/specific/posts.css.scss b/app/assets/stylesheets/specific/posts.css.scss index d5fb295d4..10e885d9b 100644 --- a/app/assets/stylesheets/specific/posts.css.scss +++ b/app/assets/stylesheets/specific/posts.css.scss @@ -134,20 +134,16 @@ div#c-posts { div#a-show { menu#post-sections { - font-size: $h2_size; - font-weight: bold; - line-height: 1.25em; - + margin-top: 1em; + font-size: $h3_size; + li { - padding: 0; - margin: 0 0.5em 0 0; + padding: 0.25em 0.5em; - a { - color: $link_dark_color; - } - - &.active a { - color: $link_color; + &.active { + background-color: $menu_color; + font-weight: bold; + @include border-radius(4px); } } }