style tweaks

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_hover_color: lighten($link_color, 25%);
-$link_dark_color: hsl(213, 100%, 25%);
+$link_dark_color: darken($link_color, 25%);
-$border_color: #CCC;
+$highlight_color: lighten(complement($link_color), 35%);
-$highlight_color: #F0F0F0;
-$reverse_highlight_color: hsl(50, 100, 90);
 $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;
+  -webkit-border-radius: $radius;
-  -ms-border-radius:; $radius;
+  -ms-border-radius: $radius;
-  -o-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);
+}

app/assets/stylesheets/common/010_reset.css.scss

@@ -1,40 +1,172 @@
-html, body, div, span, applet, object, iframe,
+// Source: https://github.com/FrogBot/sassy_bootstrap/blob/master/lib/_reset.sass
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+
-a, abbr, acronym, address, big, cite, code,
+@import "000_vars.css.scss";
-del, dfn, em, img, ins, kbd, q, s, samp,
+
-small, strike, strong, sub, sup, tt, var,
+// Reset.sass
-b, u, i, center,
+// Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an
-dl, dt, dd, ol, ul, li,
+// adapted version here	that cuts out some of the reset HTML elements we will 
-fieldset, form, label, legend,
+// never need here (i.e., dfn, samp, etc).
-table, caption, tbody, tfoot, thead, tr, th, td,
+
-article, aside, canvas, details, embed, 
+// ERIC MEYER RESET
-figure, figcaption, footer, header, hgroup, 
+// ----------------
-menu, nav, output, ruby, section, summary,
+
-time, mark, audio, video {
+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;
+  line-height: 1.25em;
-  vertical-align: baseline;
+  font-family: inherit;
-}
-/* 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;
 }
+
 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
+}

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;

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);
 }

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);
     }
   }
 }

app/assets/stylesheets/common/tables.css.scss

@@ -11,11 +11,11 @@ table.striped {
   
   tbody {
     tr {
-      border-bottom: 1px solid $border_color;
+      border-bottom: 1px solid #CCC;
-    }
+      
-
+      &:hover {
-    tr:hover {
+        background-color: $highlight_color;
-      background-color: $reverse_highlight_color;
+      }
     }
   }
   
@@ -35,4 +35,3 @@ table.striped {
     background-color: #FAFAFA;
   }
 }
-  

app/assets/stylesheets/specific/posts.css.scss

@@ -134,20 +134,16 @@ div#c-posts {
   
   div#a-show {
     menu#post-sections {
-      font-size: $h2_size;
+      margin-top: 1em;
-      font-weight: bold;
+      font-size: $h3_size;
-      line-height: 1.25em;
+      
-
       li {
-        padding: 0;
+        padding: 0.25em 0.5em;
-        margin: 0 0.5em 0 0;
         
-        a {
+        &.active {
-          color: $link_dark_color;
+          background-color: $menu_color;
-        }
+          font-weight: bold;
-        
+          @include border-radius(4px);
-        &.active a {
-          color: $link_color;
         }
       }
     }