How do I fix these two CSS errors in my Twine 2 (Harlowe) file?

elhiken

I'm using Harlowe in Twine 2 and my project works perfectly when I press the play button, but it comes up with a blank page when I try to run the published html file. After running it through a CSS validator, I was notified of two CSS errors:

Parse Error @-webkit-keyframes animation-name{0%{opacity:0}to{opacity:1}}
and
Parse Error Lexical error at line 1, column 75. Encountered: "a" (97), after : "$"

Both CSS errors are located in line 6 of the html. What do these errors mean, and how do I fix them?

greyelf

Which operating system are you using?

Are you using the on-line or a downloadable/installable release of Twine 2.0.10?
If the on-line release, then which web-browser (brand/version) are you using to run the Twine 2 application?

Which web-browser (brand/version) are you using to view the created story HTML file version of your story when you see a blank page.

Are you adding any custom Javascript / CSS (Stylesheet) to your story?

Would you be willing to upload a copy of the story HTML you created using the Publish to File option for us to debug?

elhiken

I'm using the online release of Twine 2 in OS X 10.10.2

I have tried viewing the html file in both Safari and Google Chrome, but neither worked.

Yes, I have added custom CSS to my story, but no custom Javascript.

Below I have attached my Twine html file.

Thanks for your help!

prof_yaffle

When I tried your story on Firefox on Linux I got an error "SyntaxError: invalid range in character class"

After removing the colon from the name of the second passage that error has gone and the story runs fine.

greyelf

Based on your attachment you are seeing a 'blank' (or should I say a black) screen because you have set both the background and the markup links to black, so black text on a black background equals a black screen.

prof_yaffle

I think that that's intentional, since there's a hover selector to turn the link white. So I think the point is to move the mouse around the screen until the link appears.

Running the attachment as is, I get a blank white screen and the error that I mentioned.
After importing it into Twine and republishing the story I get the intended black screen.

Ignore my comment about the colon. It was republishing the story that got it working.

greyelf

For Leon:
The error message in console is:

Invalid regular expression: /^(?:[ \f\t\vÂ áš€á Žâ€‚- 

  　]*-{3,}[ \f\t\vÂ áš€á Žâ€‚- 

  　]*(?:\n|$))/: Range out of order in character class

@prof_yaffle
One issue with the "hunt for the invisible link" concept is that the reader may also think that the screen is blank and there for something has gone wrong if they are not given a warning.