monorail
/
hollymcfarland.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improvements to target css

This commit is contained in:
Holly 2024-07-16 20:48:30 +00:00
parent ce634c94c8
commit 3c25ad95a9
2 changed files with 82 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
crosswords/index.html
View File

@ -12,7 +12,8 @@
<hr /> <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> <figure><img src="img/Ups and Downs.png" alt="A 15x15 crossword grid" /></figure>
<h2>Ups and Downs</h2> <h2>Ups and Downs</h2>
<h4>Grid: 15x15</h4> <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> <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>
</div>
<hr /> <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> <figure><img src="img/Two or More.png" alt="A 15x15 crossword grid" /></figure>
<h2>Two or More</h2> <h2>Two or More</h2>
<h4>Grid: 15x15</h4> <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> <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>
</div>
<hr /> <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><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> <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> <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> <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>
</div>
<hr /> <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> <figure><img src="img/Is there a Mr. Direction.png" alt="A 6x15 crossword grid" /></figure>
<h2>Is there a Mr. Direction?</h2> <h2>Is there a Mr. Direction?</h2>
<h4>Grid: 6x15</h4> <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> <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>
</div>
<hr /> <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> <figure><img src="img/B is for Boo-boo.png" alt="A 9x9 crossword grid" /></figure>
<h2>B is for Boo-boo</h2> <h2>B is for Boo-boo</h2>
<h4>Grid: 9x9</h4> <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> <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>
</div>
<hr /> <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> <figure><img src="img/monorail cryptic 1.png" alt="An 8x5 crossword grid" /></figure>
<h2>monorail cryptic 1</h2> <h2>monorail cryptic 1</h2>
<h4>Grid: 8x5</h4> <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> <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>
</div>
<footer> <footer>
<p><a href="..">Back to home</a></p> <p><a href="..">Back to home</a></p>

24
crosswords/style.css
View File

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