improvements to target styling

crosswords/index.html

@@ -12,7 +12,8 @@
 
 		<hr />
 
-		<div class="block" id="ups-and-downs">
+		<div class="container" id="ups-and-downs">
+			<div class="block">
 			<figure><img src="img/Ups and Downs.png" alt="A 15x15 crossword grid" /></figure>
 			<h2>Ups and Downs</h2>
 			<h4>Grid: 15x15</h4>
@@ -28,10 +29,12 @@
 
 			<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>
+		</div>
 
 		<hr />
 
-		<div class="block" id="two-or-more">
+		<div class="container" id="two-or-more">
+			<div class="block">
 				<figure><img src="img/Two or More.png" alt="A 15x15 crossword grid" /></figure>
 				<h2>Two or More</h2>
 				<h4>Grid: 15x15</h4>
@@ -45,10 +48,12 @@
 
 				<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>
+		</div>
 
 		<hr />
 
-		<div class="block" id="text-without-empty-is-win">
+		<div class="container" id="text-without-empty-is-win">
+			<div class="block">
 				<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>
@@ -62,10 +67,12 @@
 
 				<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>
+		</div>
 
 		<hr />
 
-		<div class="block" id="is-there-a-mr-direction">
+		<div class="container" id="is-there-a-mr-direction">
+			<div class="block">
 				<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>
@@ -79,10 +86,12 @@
 
 				<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>
+		</div>
 
 		<hr />
 
-		<div class="block" id="b-is-for-boo-boo">
+		<div class="container" id="b-is-for-boo-boo">
+			<div class="block">
 				<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>
@@ -96,10 +105,12 @@
 
 				<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>
+		</div>
 
 		<hr />
 
-		<div class="block" id="monorail-cryptic-1">
+		<div class="container" id="monorail-cryptic-1">
+			<div class="block">
 				<figure><img src="img/monorail cryptic 1.png" alt="An 8x5 crossword grid" /></figure>
 				<h2>monorail cryptic 1</h2>
 				<h4>Grid: 8x5</h4>
@@ -121,6 +132,7 @@
 
 				<h5><a href="https://crosshare.org/crosswords/n87dYszJPxNZ9hlKCp7h/monorail-cryptic-1" target="_blank" rel="noopener noreferrer">Play online</a> <a href="puz/monorail cryptic 1.puz">Download .puz</a></h5><h5 class="permalink"><a href="#monorail-cryptic-1">#</a></h5>
 			</div>
+		</div>
 
 		<footer>
 			<p><a href="..">Back to home</a></p>

crosswords/style.css

@@ -61,20 +61,33 @@ h1, h2, h4 {
 	margin-bottom: 0;
 }
 
-.block {
+hr:has(+ .container) {
-	overflow: auto;
+	margin-block-end: 0;
 }
 
-.block:target {
+.block {
-	background-color: var(--target-color);
+	position: relative;
+	overflow: auto;
 	padding: 1em;
+	margin-bottom: 0;
+}
+
+.container {
+	padding-top: 0.5em;
+}
+
+.container:target > .block {
+	background-color: var(--target-color);
 	border-radius: 1em;
 	border-style: dashed;
+
+	/* Cancel out border */
 	border-width: 2px;
+	padding: calc(1em - 2px);
 }
 
 .block > h2 {
-	margin-top: 0.25em;
+	margin-top: 0;
 }
 
 .rating {
@@ -89,6 +102,7 @@ h1, h2, h4 {
 
 h5 {
 	float: left;
+	margin-bottom: 0.5em;
 }
 
 h5.permalink {