style tweaks

2011-11-14 16:19:54 -05:00
parent 65f62e0245
commit b9db753164
7 changed files with 212 additions and 79 deletions
--- 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);
+}
--- 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;
-}
+}
+
+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
+}
--- 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;
--- 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);
 }
--- 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);
    }
  }
 }
--- 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;
  }
 }
-  
--- 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);
        }
      }
    }