From 0ddf8f779f7ce52da6fd82dcf3c6244764ed9757 Mon Sep 17 00:00:00 2001
From: kikito <kikito@gmail.com>
Date: Tue, 11 Mar 2014 23:03:35 +0100
Subject: [PATCH] Use a gradient to show the grid.

This fixes #8.

Since it might be useful to test typecsset in old browsers, I have left
basehold.it as a fallback.

Modern browsers, however, will use gradients to show lines. This allows
using a gradient in an offline computer, for example (as long as that
computer is equipped with a modern browser, of course)
---
 typecsset.scss | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/typecsset.scss b/typecsset.scss
index be9e9dc..fc652cd 100644
--- a/typecsset.scss
+++ b/typecsset.scss
@@ -123,7 +123,7 @@ $typecsset-magic-ratio:         $typecsset-base-line-height / $typecsset-base-fo
  *    base font size.
  */
 
-@if $typecsset-show-baseline == true {
+@if $typecsset-show-baseline {
 /**
  * 3. If you have chosen to display a baseline grid, we turn it on here.
  */
@@ -134,13 +134,16 @@ html {
     line-height: $typecsset-base-line-height / $typecsset-base-font-size; /* [2] */
 
     // If you have chosen to display a baseline grid, we turn it on here.
-    @if $typecsset-show-baseline == true {
+    @if $typecsset-show-baseline {
 
+        /* [3] */
+        // Use basehold.it fallback in old browsers
         $typecsset-baseline-size: typecsset-strip-units($typecsset-magic-number);
+        background: url(http://basehold.it/i/#{$typecsset-baseline-size}) 0 0;
 
-        background-image: url(http://basehold.it/i/#{$typecsset-baseline-size}); /* [3] */
+        // Use a linear gradient + background-size in modern browsers
+        background: linear-gradient(to top, rgba(0, 0, 0, .15) 1px, transparent 1px) 0 0 / auto $typecsset-magic-ratio * 1em;
     }
-
 }
 
 body {