+1 vote
by (6.2k points)

Here is the CSS in my stylesheet:

tw-link[tags="title"] {
  color: #17174F;
}

tw-link:hover, .enchantment-link:hover[tags="title"] {
    color: navy;
}

However, the link is staying as the default blue. I have tagged my passage 'title', but am I doing something else wrong?

1 Answer

+2 votes
by (159k points)
selected by
 
Best answer

If you use your web-browser's built-in Developer Tools to Inspect the HTML generated for your title tagged passage you will notice that Harlowe 2.x adds passage tags to both the tw-story and tw-passage elements, and not to each individual markup/macro based link.

You need to change your CSS selectors to take the above fact into considerations.

tw-story[tags~="title"] tw-link, tw-story[tags~="title"] .enchantment-link {
	color: #17174F;
}
tw-story[tags~="title"] tw-link:hover, tw-story[tags~="title"] .enchantment-link:hover {
	color: navy;
}

note: I used the ~= (contains) operator instead of the = (equals) operator because a passage may have more than a single tag assigned to it.

by (6.2k points)
Thanks so much! Also for the ~= I didn't know about that.
by (6.2k points)
A bit unrelated, but I was wondering if you know of a way to put comments into the stylesheet without them altering the CSS. In Python you use the hashtag, but I don't think that worked for me.
...