Various much-needed CSS improvements.

- Firefox-crashing gradients have been replaced with a translucent PNG. - Couple decorative images. - Colors are generally lighter. Hover color for <h1> links clashes less. - Better font (Lucida). Prose text is bigger. Links are underlined. - More fallback for browsers that don't understand multiple backgrounds.
eevee · Jun 19, 2011 · 171bfe6 · 171bfe6
1 parent 5705d95
commit 171bfe6
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 45 deletions.
diff --git a/_scss/_colors.scss b/_scss/_colors.scss
@@ -1,15 +1,15 @@
 /* Blues */
 $primary-color:             hsl(216, 50%, 0%);
 $primary-color-litest:      lighten($primary-color, 93%);
-$primary-color-lite:        lighten($primary-color, 75%);
+$primary-color-lite:        lighten($primary-color, 80%);
 $primary-color-med:         lighten($primary-color, 58%);
 $primary-color-dark:        lighten($primary-color, 39%);
 $primary-color-darkest:     lighten($primary-color, 20%);
 
 /* Browns */
 $secondary-color:           hsl(33, 25%, 0%);
 $secondary-color-litest:    lighten($secondary-color, 93%);
-$secondary-color-lite:      lighten($secondary-color, 75%);
+$secondary-color-lite:      lighten($secondary-color, 80%);
 $secondary-color-med:       lighten($secondary-color, 58%);
 $secondary-color-dark:      lighten($secondary-color, 39%);
 $secondary-color-darkest:   lighten($secondary-color, 20%);
@@ -39,7 +39,7 @@ $link-color: $primary-color-dark;
 $link-hover: adjust-hue($link-color, -240deg);
 
 
-$h1-bg: $primary-color-dark;
+$h1-bg: lighten($primary-color-dark, 10%);
 $h1-fg: white;
 $h1-shadow: hsla(0%, 0%, 0%, 0.25);
 $h1-page-title-bg: $primary-color-dark;
diff --git a/_scss/_lib.scss b/_scss/_lib.scss
@@ -26,6 +26,17 @@
     #{$property}: #{$gradient-value},           #{$gradient-value2};
 }
 
+// Use a gradient plus another value, e.g., multiple backgrounds.
+// For older browsers, falls back to just the other value.
+// gradient_under_image(property, url(...), linear-gradient(...))
+@mixin gradient_under_image($property, $arbitrary-value, $gradient-value) {
+    #{$property}: $arbitrary-value;
+    #{$property}: $arbitrary-value, -moz-#{$gradient-value};
+    #{$property}: $arbitrary-value, -webkit-#{$gradient-value};
+    #{$property}: $arbitrary-value, -o-#{$gradient-value};
+    #{$property}: $arbitrary-value, #{$gradient-value};
+}
+
 /******************************************************************************/
 // Other mixins
 

diff --git a/_scss/_veekun.scss b/_scss/_veekun.scss
@@ -11,7 +11,7 @@ body {
     position: relative;
     min-height: 100%;
 
-    font-family: Helvetica, DejaVu Sans, sans-serif;
+    font-family: Lucida Sans, Lucida Grande, Droid Sans, DejaVu Sans, sans-serif;
     font-size: 12px;
     background: $body-bg;
 }
@@ -20,21 +20,10 @@ body {
     position: relative;
 
     background: $header-bg;
-    @include gradient(
-        background-image,
-        repeating-linear-gradient(
-            top left,
-            rgba($primary-color-lite, 0.5) 0%,
-            rgba($primary-color-lite, 0.5) 17%,
-            transparent 17%,
-            transparent 50%,
-            rgba($primary-color-lite, 0.5) 50%,
-            rgba($primary-color-lite, 0.5) 67%,
-            transparent 67%,
-            transparent 100%
-        )
-    );
-    background-size: 3px 3px, auto auto;
+    // This used to be a gradient, but alas, neither Gecko nor WebKit handled
+    // it well.  See: https://bugzilla.mozilla.org/show_bug.cgi?id=632324 and
+    // https://bugs.webkit.org/show_bug.cgi?id=54347
+    background-image: url(/site_img/pinstripe.png);
     box-shadow: 0 -1em 1em -1em $primary-color-dark inset;
 
     #title {
@@ -45,6 +34,7 @@ body {
         text-transform: lowercase;
 
         a {
+            text-decoration: none;
             color: $header-fg;
         }
     }
@@ -75,6 +65,10 @@ ul#navbar {
     );
     box-shadow: 0 0 0.5em $shadows;
 
+    a {
+        text-decoration: none;
+    }
+
     > li {
         display: inline-block;
         margin: 0 0.33em;
@@ -136,6 +130,10 @@ ul#breadcrumbs {
     font-weight: bold;
     text-transform: lowercase;
 
+    a {
+        text-decoration: none;
+    }
+
     li {
         display: inline-block;
         line-height: 1;
@@ -182,16 +180,23 @@ h1 {
     padding: 0.25em 1em;
     border: 1px solid $h1-bg;
     border-width: 1px 0;
+
     background: $h1-bg;
-    @include gradient(
+    @include gradient_under_image(
         background-image,
+        url(/site_img/eevee-bounding.png),
         linear-gradient(top,
             hsla(0%, 0%, 100%, 0.3),
             hsla(0%, 0%, 100%, 0.25) 33%,
             hsla(0%, 0%, 100%, 0.2) 50%,
             hsla(0%, 0%, 100%, 0)
         )
     );
+    background-repeat: no-repeat;
+    // Not every browser understands multiple backgrounds; need fallback
+    background-position: center right;
+    background-position: center right, top left;
+
     color: $h1-fg;
     text-shadow: 1px 1px 1px $h1-shadow;
     box-shadow: 0 3px 3px -3px $shadows;
@@ -222,40 +227,37 @@ h1 {
             border-top: none;
         }
     }
+
+    a:hover {
+        color: lighten($link-hover, 50%);
+    }
 }
 
 h2 {
     font-size: 1.67em;
     margin: 1em 0 0.5em;
-    padding: 0.25em 1em;
+    padding: 0.25em 1em 0.25em 32px;
     font-weight: normal;
-    background: $secondary-color-lite;
-    @include gradient(
-        background-image,
-        repeating-linear-gradient(
-            top left,
-            rgba($secondary-color-litest, 0.5) 0%,
-            rgba($secondary-color-litest, 0.5) 17%,
-            transparent 17%,
-            transparent 50%,
-            rgba($secondary-color-litest, 0.5) 50%,
-            rgba($secondary-color-litest, 0.5) 67%,
-            transparent 67%,
-            transparent 100%
-        )
-    );
-    background-size: 3px 3px;
     border: 1px solid $secondary-color-litest;
     border-radius: 1em;
+    background-color: $secondary-color-lite;
+    // Not every browser understands multiple backgrounds; need fallback
+    background-image: url(/site_img/great-ball.png);
+    // Used to be a gradient; see the comment for #header
+    background-image: url(/site_img/great-ball.png), url(/site_img/pinstripe.png);
+    background-repeat: no-repeat;
+    background-repeat: no-repeat, repeat;
+    background-position: 4px center;
+    background-position: 4px center, left top;
 }
 
 h3 {
-    font-size: 1.5em;
+    font-size: 1.33em;
     margin: 1em 0 0.5em;
-    padding: 0.25em 0.5em;
+    padding: 0.25em 0;
     font-weight: normal;
     border-bottom: 3px double $primary-color-dark;
-    color: $content-fg;
+    color: $primary-color-dark;
 }
 
 .doorhanger {
@@ -275,12 +277,11 @@ p, li {
 }
 
 p {
-    margin-bottom: 0.5em;
+    margin-bottom: 0.75em;
 }
 
 a {
-    text-decoration: none;
-    font-weight: bold;
+    text-decoration: underline;
     color: $link-color;
 
     &:hover {
@@ -290,6 +291,7 @@ a {
     h1 &,
     h2 &,
     h3 & {
+        text-decoration: none;
         font-weight: inherit;
         color: inherit;
     }
@@ -312,6 +314,8 @@ pre {
 
 // Markdown contents
 .prose {
+    font-size: 13px;
+
     ul {
         margin: 1em;
 
@@ -345,8 +349,7 @@ pre {
     }
 
     p {
-        margin-bottom: 0.75em;
-        line-height: 1.33;
+        margin-bottom: 1em;
     }
 
     table {

diff --git a/site_img/eevee-bounding.png b/site_img/eevee-bounding.png
diff --git a/site_img/great-ball.png b/site_img/great-ball.png
diff --git a/site_img/pinstripe.png b/site_img/pinstripe.png