add permalinks to sections and :target css, also ruin the diff by running dos2unix on everything

crosswords/index.html

@@ -12,7 +12,7 @@
 
 		<hr />
 
-		<div class="block">
+		<div class="block" id="ups-and-downs">
 			<figure><img src="img/Ups and Downs.png" alt="A 15x15 crossword grid" /></figure>
 			<h2>Ups and Downs</h2>
 			<h4>Grid: 15x15</h4>
@@ -26,12 +26,12 @@
 
 			<p>I like the theme, though it has a pretty specific target audience (a couple other clues in the grid are nods to people or jokes from my corner of the fediverse, though they have less of an impact on the solve than the theme does), and it came together well.</p>
 
-			<h5><a href="https://crosshare.org/crosswords/FT19VUTr4FyfOMLQWfSG/ups-and-downs" target="_blank" rel="noopener noreferrer">Play online</a> <a href="puz/Ups and Downs.puz">Download .puz</a></h5>
+			<h5><a href="https://crosshare.org/crosswords/FT19VUTr4FyfOMLQWfSG/ups-and-downs" target="_blank" rel="noopener noreferrer">Play online</a> <a href="puz/Ups and Downs.puz">Download .puz</a></h5><h5 class="permalink"><a href="#ups-and-downs">#</a></h5>
 		</div>
 
 		<hr />
 
-		<div class="block">
+		<div class="block" id="two-or-more">
 			<figure><img src="img/Two or More.png" alt="A 15x15 crossword grid" /></figure>
 			<h2>Two or More</h2>
 			<h4>Grid: 15x15</h4>
@@ -43,12 +43,12 @@
 
 			<p>If you did the puzzle and still need help getting it, here's how the theme works: <span class="spoiler">Each of the highlighted answers is the first half of a common "___ system" phrase, made plural. So "buddy system" becomes BUDDIES, for example.</span> Is it too cute for its own good? Who knows!</p>
 
-			<h5><a href="https://crosshare.org/crosswords/Ce5mbjIqxa8F35ohlIL1/two-or-more" target="_blank" rel="noopener noreferrer">Play online</a> <a href="puz/Two or More.puz">Download .puz</a></h5>
+			<h5><a href="https://crosshare.org/crosswords/Ce5mbjIqxa8F35ohlIL1/two-or-more" target="_blank" rel="noopener noreferrer">Play online</a> <a href="puz/Two or More.puz">Download .puz</a></h5><h5 class="permalink"><a href="#two-or-more">#</a></h5>
 		</div>
 
 		<hr />
 
-		<div class="block">
+		<div class="block" id="text-without-empty-is-win">
 			<figure><img src="img/TEXT WITHOUT EMPTY IS WIN.png" alt="A 10x10 crossword grid" /></figure>
 			<figure class="baba-puzzle-title" alt="Text boxes from the game Baba Is You that read &quot;TEXT WITHOUT EMPTY IS WIN&quot;"><img src="baba-puzzle-title/text.png"><img src="baba-puzzle-title/without.png"><img src="baba-puzzle-title/empty.png"><img src="baba-puzzle-title/is.png"><img src="baba-puzzle-title/win.png"></figure>
 			<h4>Grid: 10x10</h4>
@@ -60,12 +60,12 @@
 
 			<p>If you don't understand the title to this puzzle, you may find yourself struggling with it. Heads up :P</p>
 
-			<h5><a href="https://crosshare.org/crosswords/8dISn3dKMNIGPVh9Y9lQ/text-without-empty-is-win" target="_blank" rel="noopener noreferrer">Play online</a> <a href="puz/TEXT WITHOUT EMPTY IS WIN.puz">Download .puz</a></h5>
+			<h5><a href="https://crosshare.org/crosswords/8dISn3dKMNIGPVh9Y9lQ/text-without-empty-is-win" target="_blank" rel="noopener noreferrer">Play online</a> <a href="puz/TEXT WITHOUT EMPTY IS WIN.puz">Download .puz</a></h5><h5 class="permalink"><a href="#text-without-empty-is-win">#</a></h5>
 		</div>
 
 		<hr />
 
-		<div class="block">
+		<div class="block" id="is-there-a-mr-direction">
 			<figure><img src="img/Is there a Mr. Direction.png" alt="A 6x15 crossword grid" /></figure>
 			<h2>Is there a Mr. Direction?</h2>
 			<h4>Grid: 6x15</h4>
@@ -77,12 +77,12 @@
 
 			<p>This theme is targeted at people who are familiar with crosswords, though I won't say much more. It's not necessary for the solve, but a brand new solver may not understand why certain words are highlighted.</p>
 
-			<h5><a href="https://crosshare.org/crosswords/sSgM3SaqKHGeVOyHKxJY/is-there-a-mr-direction" target="_blank" rel="noopener noreferrer">Play online</a> <a href="puz/Is there a Mr. Direction.puz">Download .puz</a></h5>
+			<h5><a href="https://crosshare.org/crosswords/sSgM3SaqKHGeVOyHKxJY/is-there-a-mr-direction" target="_blank" rel="noopener noreferrer">Play online</a> <a href="puz/Is there a Mr. Direction.puz">Download .puz</a></h5><h5 class="permalink"><a href="#is-there-a-mr-direction">#</a></h5>
 		</div>
 
 		<hr />
 
-		<div class="block">
+		<div class="block" id="b-is-for-boo-boo">
 			<figure><img src="img/B is for Boo-boo.png" alt="A 9x9 crossword grid" /></figure>
 			<h2>B is for Boo-boo</h2>
 			<h4>Grid: 9x9</h4>
@@ -94,7 +94,7 @@
 
 			<p>One thing to note is that this is the first puzzle I made since seeing some advice from experienced constructors about filling in clues in a random order. The intention is to avoid any kind of trend born of fatigue from showing up in just the late downs. I tried that for this puzzle and I was happy with the results, so I'll probably continue doing it going forward.</p>
 
-			<h5><a href="https://crosshare.org/crosswords/sXQjngWexvfTIJ5TvMpF/b-is-for-boo-boo" target="_blank" rel="noopener noreferrer">Play online</a> <a href="puz/B is for Boo-boo.puz">Download .puz</a></h5>
+			<h5><a href="https://crosshare.org/crosswords/sXQjngWexvfTIJ5TvMpF/b-is-for-boo-boo" target="_blank" rel="noopener noreferrer">Play online</a> <a href="puz/B is for Boo-boo.puz">Download .puz</a></h5><h5 class="permalink"><a href="#b-is-for-boo-boo">#</a></h5>
 		</div>
 
 		<footer>

crosswords/style.css

@@ -3,6 +3,7 @@
 	--text-color: #111111;
 	--spoiler-color: #bbbbbb;
 	--highlight-color: #EEEEEE;
+	--target-color: #ffffcc;
 }
 
 body {
@@ -64,6 +65,14 @@ h1, h2, h4 {
 	overflow: auto;
 }
 
+.block:target {
+	background-color: var(--target-color);
+	padding: 1em;
+	border-radius: 1em;
+	border-style: dashed;
+	border-width: 2px;
+}
+
 .block > h2 {
 	margin-top: 0.25em;
 }
@@ -78,6 +87,14 @@ h1, h2, h4 {
 	padding-right: 0.1rem;
 }
 
+h5 {
+	float: left;
+}
+
+h5.permalink {
+	float: right;
+}
+
 .spoiler {
 	background-color: var(--spoiler-color);
 	color: var(--spoiler-color);