Towards a more perfect link underline

index.markdown

Kumquats Happy To Say “Baggy Pants”

Dialogue From Hamlet

Night (Or Day?)

Well, good night.

Bernardo has my place.
Give you good night.

You come most carefully upon your hour.

Have you had quiet guard?

What, has this thing appear’d again to-night?

Sit down awhile;
And let us once again assail your ears,
That are so fortified against our story
What we have two nights seen.

To be, or not to be: that is the question:
Whether ’tis nobler in the mind to suffer
The slings and arrows of outrageous fortune,
Or to take arms against a sea of troubles,
And by opposing end them? To die: to sleep;
No more; and by a sleep to say we end
The heart-ache and the thousand natural shocks
That flesh is heir to, ’tis a consummation
Devoutly to be wish’d.

Enable custom text underline Switch to sans-serif font

script.js

(function(body) {
  var underline_class   = ' has-custom-underline',
      font_family_class = ' is-sans-serif';
  document.getElementsByClassName('toggle-underline-class')[0].addEventListener('click', function() {
    if (body.className.indexOf(underline_class) > -1) {
      body.className = body.className.replace(underline_class, '');
      this.innerHTML = this.innerHTML.replace('Disable', 'Enable');
    } else {
      body.className += underline_class;
      this.innerHTML = this.innerHTML.replace('Enable', 'Disable');
    }
  });
  document.getElementsByClassName('toggle-font-family')[0].addEventListener('click', function() {
    if (body.className.indexOf(font_family_class) > -1) {
      body.className = body.className.replace(font_family_class, '');
      this.innerHTML = this.innerHTML.replace('serif', 'sans-serif');
    } else {
      body.className += font_family_class;
      this.innerHTML = this.innerHTML.replace('sans-serif', 'serif');
    }
  });
})(document.body);

style.scss

// Colors
$color-accent     : rgb(141, 179, 89);
$color-text-body  : rgb(87, 83, 74);
$color-text-light : rgb(184, 186, 188);
$color-ui-light   : lighten($color-text-light, 14%);
// Font stacks
$font-sans-serif  : "Helvetica Neue", Helvetica, sans-serif;
$font-serif       : Georgia, serif;

// Set up basic typography
body {
  // 16px * 106.25% = 17px
  font-size: 106.25%;
  color: $color-text-body;
  font-family: $font-serif;
  font-weight: 400;
  padding: 0 1.5em 1.5em;
  &.is-sans-serif {
    font-family: $font-sans-serif;
  }
}
a {
  color: $color-accent;
}

// Custom link underline
// ---------------------
.has-custom-underline {
  a {
    color: $color-accent;
    text-decoration: none;
    // Underline via gradient background
    background-image: linear-gradient(rgba($color-accent, 0.25) 0%, $color-accent 100%);
    background-repeat: repeat-x; 
    background-size: 1px 1px;
    background-position: 0 95%;
    // Tweak position + thickness for high res (1.75x and up) displays
    @media (-webkit-min-device-pixel-ratio: 1.75), 
           (min-resolution: 168dpi) {
      background-image: linear-gradient(rgba($color-accent, 0.25) 0%, $color-accent 100%);
      background-position: 0 93%;
    }
    // Clear descendors from underline
    text-shadow: 3px 0 white, 2px 0 white, 1px 0 white, -1px 0 white, -2px 0 white, -3px 0 white;
    &:hover {
      color: darken($color-accent, 11%);
      background-image: linear-gradient(to bottom, darken($color-accent, 6%) 0%, darken($color-accent, 6%) 100%);
    }
    // Style selected links (or else text-shadow makes it look crazy ugly)
    // Pseudo selectors must go separately, or they break each other
    &,
    > * {
      &::selection {
        background-color: lighten($color-accent, 25%);
        color: $color-text-body;
        text-shadow: none;
      }
      &::-moz-selection {
        background-color: lighten($color-accent, 25%);
        color: $color-text-body;
        text-shadow: none;
      }
    }
  }
  h1, h2, h3 {
    a {
      background-size: 1px 2px;
      @media (-webkit-min-device-pixel-ratio: 1.75), 
             (min-resolution: 168dpi) {
        background-position: 0 93%;
        background-image: linear-gradient($color-accent 0%, $color-accent 100%);
        background-size: 1px 1px;
        background-position: 0 93%;
      }
    }
  }
}

// Toggle buttons
// --------------
button {
  position: fixed;
  right: 1.5em;
  background: $color-ui-light;
  border: 0;
  padding: 0.25em 0.75em;
  color: $color-text-body;
  font-family: $font-sans-serif;
  font-size: 0.94em;
}
.toggle-underline-class {
  top: 5em;
  @media (min-width: 975px) {
    top: 2em;
  }
}
.toggle-font-family {
  top: 7.5em;
  @media (min-width: 975px) {
    top: 4.5em;
  }
}

Towards-a-more-perfect-link-underline.markdown

Towards a more perfect link underline

Supporting pen to illustrate ideas from my post of the same name.

UPDATE: I tweaked the styles and optimized for display density, and added functionality to switch between serif and sans-serif font families.

A Pen by Andrew Patton on CodePen.

License.