add down by the bay crossword

crosswords/index.html

@@ -128,6 +128,24 @@
 			</div>
 		</div>
 
+		<hr />
+
+		<div class="container" id="down-by-the-bay">
+			<div class="block">
+				<figure><img src="img/Down by the Bay.png" alt="A 9x9 crossword grid" /></figure>
+				<h2>Down by the Bay</h2>
+				<h4>Grid: 9x9</h4>
+
+				<p>Yeah, I don't know. Sorry.</p>
+
+				<p><span class="spoiler">This one goes out to Dob and Momes from <a href="https://twitch.tv/crossweirdtv">Crossweird</a>, a crossword stream I've been watching for the past few months. Something they've been doing recently is solving hard puzzles with the help of chat, after using <a href="https://crosswordnexus.com/apps/obfuscate/">this tool</a> to remove all the across clues, leaving them with only downs... and then using it again to replace about a third of the words with "turtle". So I got the idea in my head of constructing a puzzle where the word turtle really <em>does</em> appear in each down clue at least once. I think it's a fun idea because most people do the acrosses first, so hiding a gimmick in the downs feels like a punchline.</span></p>
+
+				<p><span class="spoiler">Yes, obviously, I would have LOVED to call this puzzle "Turtles All the Way Down". God, what a good title. I'm actually a little angry with myself that I'm not using it. Unfortunately, it makes the joke a little obvious. I don't want to mention turtles in the title directly because I'm afraid of the jig being up when you read your first down clue. By only alluding to turtles (I checked, you can find them at the bay) I hope it'll take at least two :3</span></p>
+
+				<h5><a href="https://crosshare.org/crosswords/WklypeaKvWNgBrAPz0FG/down-by-the-bay" target="_blank" rel="noopener noreferrer">Play online</a> <a href="puz/Down by the Bay.puz">Download .puz</a></h5><h5 class="permalink"><a href="#down-by-the-bay">#</a></h5>
+			</div>
+		</div>
+
 		<footer>
 			<p><a href="..">Back to home</a></p>
 		</footer>

crosswords/style.css

@@ -120,3 +120,8 @@ h5.permalink {
 .spoiler:hover {
 	color: var(--text-color);
 }
+
+/* Links really have to be coerced into working */
+.spoiler:not(:hover) > * {
+	color: var(--spoiler-color) !important;
+}