Skip to content

Instantly share code, notes, and snippets.

@cecilemuller
Last active November 25, 2019 19:04
Show Gist options
  • Save cecilemuller/95ffa7df6e58b3bcc410 to your computer and use it in GitHub Desktop.
Save cecilemuller/95ffa7df6e58b3bcc410 to your computer and use it in GitHub Desktop.

Revisions

  1. cecilemuller revised this gist May 8, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion underlines.styl
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,7 @@ retina_underlines( regular = #333, active = #55abad, background = #FFF )
    background-image linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, regular 2px, regular 2.5px, rgba(0, 0, 0, 0) 2.5px);


    &:active, &:focus
    &:hover, &:focus
    color active
    background-image linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, active 2px, active 3px, rgba(0, 0, 0, 0) 3px)

  2. cecilemuller revised this gist May 8, 2014. 1 changed file with 6 additions and 2 deletions.
    8 changes: 6 additions & 2 deletions example.styl
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,18 @@
    link_text_color = #333
    text_color = #333
    link_text_color = text_color
    link_hover_color = crimson
    background_color = #fafafa


    body
    color text_color
    background background_color

    font-family "Open Sans", sans-serif
    -webkit-font-smoothing subpixel-antialiased
    -moz-osx-font-smoothing grayscale
    text-rendering optimizeLegibility
    background background_color


    a.enhanced
    retina_underlines link_text_color link_hover_color background_color
  3. cecilemuller revised this gist May 8, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion example.styl
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    link_text_color = text_color
    link_text_color = #333
    link_hover_color = crimson
    background_color = #fafafa

  4. cecilemuller created this gist May 8, 2014.
    13 changes: 13 additions & 0 deletions example.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    <p>
    Lorem ipsum consectetur <a href="#">simple basic link paqejigu</a> adipisicing
    elit aut <a class="enhanced" href="#">simple enhanced link paqejigu</a> aut officia
    adipisci nemo perferendis eveniet delectus ipsam consectetur. Molestiae, iste
    ipsa sit aliquid quasi quidem ab? Enim veritatis architecto commodi!
    </p>

    <p>
    Lorem ipsum consectetur <b><a href="#">bold basic link paqejigu</a></b> adipisicing
    elit aut <b><a class="enhanced" href="#">bold enhanced link paqejigu</a></b> officia
    adipisci nemo perferendis eveniet delectus ipsam consectetur. Molestiae, iste
    ipsa sit aliquid quasi quidem ab? Enim veritatis architecto commodi!
    </p>
    14 changes: 14 additions & 0 deletions example.styl
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    link_text_color = text_color
    link_hover_color = crimson
    background_color = #fafafa


    body
    font-family "Open Sans", sans-serif
    -webkit-font-smoothing subpixel-antialiased
    -moz-osx-font-smoothing grayscale
    text-rendering optimizeLegibility
    background background_color

    a.enhanced
    retina_underlines link_text_color link_hover_color background_color
    18 changes: 18 additions & 0 deletions underlines.styl
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    retina_underlines( regular = #333, active = #55abad, background = #FFF )
    position relative
    color regular
    transition color 200ms ease
    text-decoration none
    text-shadow -1px -1px 0 background, 1px -1px 0 background, -1px 1px 0 background, 1px 1px 0 background
    background-image linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, regular 2px, regular 3px, rgba(0, 0, 0, 0) 3px)

    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)
    background-image linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, regular 2px, regular 2.5px, rgba(0, 0, 0, 0) 2.5px);


    &:active, &:focus
    color active
    background-image linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, active 2px, active 3px, rgba(0, 0, 0, 0) 3px)

    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)
    background-image linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, active 2px, active 2.5px, rgba(0, 0, 0, 0) 2.5px)