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

improvements to target styling

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

114
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>
@ -27,99 +28,110 @@
<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> <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 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">
<figure><img src="img/Two or More.png" alt="A 15x15 crossword grid" /></figure> <div class="block">
<h2>Two or More</h2> <figure><img src="img/Two or More.png" alt="A 15x15 crossword grid" /></figure>
<h4>Grid: 15x15</h4> <h2>Two or More</h2>
<h4>Rating: <span class="rating">LETTERBOMB BURIAL</span></h4> <h4>Grid: 15x15</h4>
<h4>Rating: <span class="rating">LETTERBOMB BURIAL</span></h4>
<p>My second crossword, and my second collaboration with Amy (again, in a way). If you know, you know. If you don't: After solving the puzzle, you'll know!</p> <p>My second crossword, and my second collaboration with Amy (again, in a way). If you know, you know. If you don't: After solving the puzzle, you'll know!</p>
<p>I'm really proud of the theme here, I think the way it manifests is funny and it's all tied to something close to my heart. It's not perfect, though. If you aren't already familiar with the core concept that the theme is built around, you'll have to get it from crosses, because working backwards from the other theme words is pretty unlikely. A number of solvers have also told me that it wasn't until near the end or even <em>after</em> the end of the solve that they worked out how the highlighted answers actually tied into the theme.</p> <p>I'm really proud of the theme here, I think the way it manifests is funny and it's all tied to something close to my heart. It's not perfect, though. If you aren't already familiar with the core concept that the theme is built around, you'll have to get it from crosses, because working backwards from the other theme words is pretty unlikely. A number of solvers have also told me that it wasn't until near the end or even <em>after</em> the end of the solve that they worked out how the highlighted answers actually tied into the theme.</p>
<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> <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 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">
<figure><img src="img/TEXT WITHOUT EMPTY IS WIN.png" alt="A 10x10 crossword grid" /></figure> <div class="block">
<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><img src="img/TEXT WITHOUT EMPTY IS WIN.png" alt="A 10x10 crossword grid" /></figure>
<h4>Grid: 10x10</h4> <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>Rating: <span class="rating">METICULOUS BYPASS</span></h4> <h4>Grid: 10x10</h4>
<h4>Rating: <span class="rating">METICULOUS BYPASS</span></h4>
<p>This was the first puzzle I created entirely on my own. I came up with the theme and then struggled <em>hard</em> to fit it into an actual grid. I wanted to try constructing something a bit smaller, since my first two had been 15x15 puzzles, which is "standard" for newspapers but can be a lot for new solvers just checking out what their friends made.</p> <p>This was the first puzzle I created entirely on my own. I came up with the theme and then struggled <em>hard</em> to fit it into an actual grid. I wanted to try constructing something a bit smaller, since my first two had been 15x15 puzzles, which is "standard" for newspapers but can be a lot for new solvers just checking out what their friends made.</p>
<p>What I discovered is that laying out a smaller grid is really, really tough. Many times I'd lay out my theme words in a way that made sense, only to discover that the desicion I made had incredibly wide-reaching consequnces for what the grid could look like. I'd find myself in a situation where I had to either include a lot of nearly grid-spanning words, which is very very difficult to do, or be forced into having unchecked squares or words shorter than three letters. Eventually, I found a way to have my four theme words in the two center rows and two center columns of the grid, which I was very proud of, and constructing around that got me this layout. I didn't notice until after the fill that more than 70% of the words were exactly three letters long. Whoops!</p> <p>What I discovered is that laying out a smaller grid is really, really tough. Many times I'd lay out my theme words in a way that made sense, only to discover that the desicion I made had incredibly wide-reaching consequnces for what the grid could look like. I'd find myself in a situation where I had to either include a lot of nearly grid-spanning words, which is very very difficult to do, or be forced into having unchecked squares or words shorter than three letters. Eventually, I found a way to have my four theme words in the two center rows and two center columns of the grid, which I was very proud of, and constructing around that got me this layout. I didn't notice until after the fill that more than 70% of the words were exactly three letters long. Whoops!</p>
<p>If you don't understand the title to this puzzle, you may find yourself struggling with it. Heads up :P</p> <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 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">
<figure><img src="img/Is there a Mr. Direction.png" alt="A 6x15 crossword grid" /></figure> <div class="block">
<h2>Is there a Mr. Direction?</h2> <figure><img src="img/Is there a Mr. Direction.png" alt="A 6x15 crossword grid" /></figure>
<h4>Grid: 6x15</h4> <h2>Is there a Mr. Direction?</h2>
<h4>Rating: <span class="rating">HYPERSPEED SHUTDOWN</span></h4> <h4>Grid: 6x15</h4>
<h4>Rating: <span class="rating">HYPERSPEED SHUTDOWN</span></h4>
<p>This one was an experiment with an oddly-shaped grid. As you can see, the preview has made this page layout a little bit funky, and I'm not enough of a web designer to care enough to fix it at the moment :3</p> <p>This one was an experiment with an oddly-shaped grid. As you can see, the preview has made this page layout a little bit funky, and I'm not enough of a web designer to care enough to fix it at the moment :3</p>
<p>Most crossword puzzles I've seen have been squares, but that's purely convention, and recently I've seen a lot of puzzles constructed in funnier shapes so I wanted to give it a shot. Being much, much narrower than normal let me fit in the theme words that I wanted without having to fill out a whole standard grid. It did come with restrictions, though. To keep the layout interesting I allowed myself two 2-letter words, which are discouraged by many crossword style guides, but without them I could never have two acrosses on the same line. There are also some answers that I think are pretty clearly concessions I had to make; I think you'll probably be able to feel me going "whatever, fine, I just need something to make this grid work" when you fill in a couple of them.</p> <p>Most crossword puzzles I've seen have been squares, but that's purely convention, and recently I've seen a lot of puzzles constructed in funnier shapes so I wanted to give it a shot. Being much, much narrower than normal let me fit in the theme words that I wanted without having to fill out a whole standard grid. It did come with restrictions, though. To keep the layout interesting I allowed myself two 2-letter words, which are discouraged by many crossword style guides, but without them I could never have two acrosses on the same line. There are also some answers that I think are pretty clearly concessions I had to make; I think you'll probably be able to feel me going "whatever, fine, I just need something to make this grid work" when you fill in a couple of them.</p>
<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> <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 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">
<figure><img src="img/B is for Boo-boo.png" alt="A 9x9 crossword grid" /></figure> <div class="block">
<h2>B is for Boo-boo</h2> <figure><img src="img/B is for Boo-boo.png" alt="A 9x9 crossword grid" /></figure>
<h4>Grid: 9x9</h4> <h2>B is for Boo-boo</h2>
<h4>Rating: <span class="rating">RADIAL RESPONSE</span></h4> <h4>Grid: 9x9</h4>
<h4>Rating: <span class="rating">RADIAL RESPONSE</span></h4>
<p>This one I made because, honestly, I was really bored. If you're curious why I was so bored, you'll have to solve the puzzle, because the answer is there! :3</p> <p>This one I made because, honestly, I was really bored. If you're curious why I was so bored, you'll have to solve the puzzle, because the answer is there! :3</p>
<p>I was worried about this one because it came together <em>suspiciously</em> quickly. Usually there's some amount of struggle to getting a grid I'm happy with. Multiple revisions, having to throw out things I'm proud of because they lead to dead ends, that kind of thing. And as I work on getting everything together, I find myself improving the puzzle. None of that happened for this one! It just kind of all worked, and I was afraid that the lack of iteration would mean it wasn't as good of a puzzle as it could have been. But, this puzzle received praise from people I respect and was featured on the front page of Crosshare! So, what do I know, I suppose.</p> <p>I was worried about this one because it came together <em>suspiciously</em> quickly. Usually there's some amount of struggle to getting a grid I'm happy with. Multiple revisions, having to throw out things I'm proud of because they lead to dead ends, that kind of thing. And as I work on getting everything together, I find myself improving the puzzle. None of that happened for this one! It just kind of all worked, and I was afraid that the lack of iteration would mean it wasn't as good of a puzzle as it could have been. But, this puzzle received praise from people I respect and was featured on the front page of Crosshare! So, what do I know, I suppose.</p>
<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> <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 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">
<figure><img src="img/monorail cryptic 1.png" alt="An 8x5 crossword grid" /></figure> <div class="block">
<h2>monorail cryptic 1</h2> <figure><img src="img/monorail cryptic 1.png" alt="An 8x5 crossword grid" /></figure>
<h4>Grid: 8x5</h4> <h2>monorail cryptic 1</h2>
<h4>Rating: <span class="rating">NEON ROUTE</span></h4> <h4>Grid: 8x5</h4>
<h4>Rating: <span class="rating">NEON ROUTE</span></h4>
<p>What do you know, a cryptic!</p> <p>What do you know, a cryptic!</p>
<p>Cryptic crosswords are really interesting to me, and only recently have I started to be introduced to some that I feel like are accessible to me. That experience lead to this, an attempt at making one of our own. It's simple and super small, with only 7 clues and answers, but we enjoyed putting it together.</p> <p>Cryptic crosswords are really interesting to me, and only recently have I started to be introduced to some that I feel like are accessible to me. That experience lead to this, an attempt at making one of our own. It's simple and super small, with only 7 clues and answers, but we enjoyed putting it together.</p>
<p>I owe my thanks to riotblob for playtesting this one before I published it and offering a lot of advice, especially when it comes to cryptic correctness. Much of their advice improved the puzzle, and some of it I chose not to follow, so if there's anything you dislike it's definitely my own fault!</p> <p>I owe my thanks to riotblob for playtesting this one before I published it and offering a lot of advice, especially when it comes to cryptic correctness. Much of their advice improved the puzzle, and some of it I chose not to follow, so if there's anything you dislike it's definitely my own fault!</p>
<p>This is also, just by happenstance, our first themeless puzzle. Getting a cryptic to come together at all, even at this tiny size, was enough of a challenge already! :3</p> <p>This is also, just by happenstance, our first themeless puzzle. Getting a cryptic to come together at all, even at this tiny size, was enough of a challenge already! :3</p>
<p><strong>I don't usually come back to edit the author's notes, but:</strong> Now that a few more people have solved this, I think I should mention that this is absolutely our <em>first</em> cryptic, and it's definitely flawed. I made some easy changes where I could to fix some correctness issues, but not all of them are easily fixable. Little tense and verb plurality isuses that I don't know that I can fix without destroying the surface.</p> <p><strong>I don't usually come back to edit the author's notes, but:</strong> Now that a few more people have solved this, I think I should mention that this is absolutely our <em>first</em> cryptic, and it's definitely flawed. I made some easy changes where I could to fix some correctness issues, but not all of them are easily fixable. Little tense and verb plurality isuses that I don't know that I can fix without destroying the surface.</p>
<p>It's also worth noting that I like to approach puzzle construction in a kind of fast-and-loose way; I want to write clues that make sense to me and I'm willing to bend and stretch rules for the sake of a clue I like more. My understanding is that this is roughly the distinction between US- and UK-style cryptics, with UK cryptics following more rigid rules and US ones going a little bit more by vibes. This is the first puzzle I had playtested before publishing it, but riotblob primarily solves UK-style cryptics so I did keep the fact that they're used to stricter cluing rules than I wanted to use in mind when I considered their feedback. I'll only know for sure if I went too far in that direction with experience.</p>
<p>I'm absolutely still proud of the puzzle, I just think you deserve this warning! :P</p> <p>It's also worth noting that I like to approach puzzle construction in a kind of fast-and-loose way; I want to write clues that make sense to me and I'm willing to bend and stretch rules for the sake of a clue I like more. My understanding is that this is roughly the distinction between US- and UK-style cryptics, with UK cryptics following more rigid rules and US ones going a little bit more by vibes. This is the first puzzle I had playtested before publishing it, but riotblob primarily solves UK-style cryptics so I did keep the fact that they're used to stricter cluing rules than I wanted to use in mind when I considered their feedback. I'll only know for sure if I went too far in that direction with experience.</p>
<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> <p>I'm absolutely still proud of the puzzle, I just think you deserve this warning! :P</p>
<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>

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 {