Libretto theme: Fix for links in first line

• 

  formlesspoet · Member · Mar 8, 2019 at 4:33 am

  • Copy link
  • Add topic to favorites

  As some of you may have discovered who use the Libretto theme, if there is a link in the first line of of a post, the letter spacing will shrink when the mouse is hovered over it. Though I can’t prevent it from shrinking after the mouse has left the link once it’s been clicked (the only situation I can’t seem to target), I can prevent the shrinking when the mouse moves over and away from the link without clicking. You can add this to the end of section 6.1 (after all other section 6.1 CSS) in style.css:

  a:hover:first-line,
a:active:first-line,
a:focus:first-line {
letter-spacing: inherit;
}

  This will cause the “inherited” letter spacing to affect the drop-cap, however, shifting everything to the right of the drop-cap over by 2 pixels. This can be stopped by adding “letter-spacing: 0” to the drop-cap CSS. Find this CSS in section 7.1:

  /* Drop cap and first line */
.format-standard:not(.post-password-required) .entry-content > p:not(.no-emphasis):first-of-type:first-letter,
.page:not(.post-password-required) .entry-content > p:not(.no-emphasis):first-of-type:first-letter,
.emphasis:first-letter {
color: #b7b1a9;
display: inline-block;
float: left;
font-family: "Playfair Display";
font-size: 70px;
font-style: normal;
font-weight: 700;
line-height: 40px;
margin: 6px 10px 0 -5px;
}

  Make the following addition:

  /* Drop cap and first line */
.format-standard:not(.post-password-required) .entry-content > p:not(.no-emphasis):first-of-type:first-letter,
.page:not(.post-password-required) .entry-content > p:not(.no-emphasis):first-of-type:first-letter,
.emphasis:first-letter {
color: #b7b1a9;
display: inline-block;
float: left;
font-family: "Playfair Display";
font-size: 70px;
font-style: normal;
font-weight: 700;
letter-spacing: 0px; /* ADD THIS PROPERTY */
line-height: 40px;
margin: 6px 10px 0 -5px;
}

  Links that occur within the first line of a post will now not shrink when the mouse hovers over or moves away from them. They’ll still shrink when they’re clicked on, but there’s nothing I can do about that for now. I’ll come back and add an update if I ever figure it out.

  The blog I need help with is: (visible only to logged in users)

• 

  formlesspoet · Member · Mar 8, 2019 at 4:38 am

  • Copy link

  Here’s an example of what I mean: http://www.mochinet.com/FormlessPoet/2015/10/11/aural-borealis/ — The “TRISECT” link in the first line used to shrink awkwardly when the mouse hovered over it. Now it doesn’t.