add permalinks to sections and :target css, also ruin the diff by running dos2unix on everything
This commit is contained in:
Holly
parent
d1def90eba
commit
6b4620d0cc
|
|
@ -1,105 +1,105 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>My Crossword Constructions</title>
|
<title>My Crossword Constructions</title>
|
||||||
<link rel="stylesheet" type="text/css" href="style.css">
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>My Crossword Constructions</h1>
|
<h1>My Crossword Constructions</h1>
|
||||||
|
|
||||||
<p>I've been dabbling in constructing US newspaper-style crossword puzzles! This page is a repository of the puzzles I've created and a little bit of author commentary for each. There are links for each to a playable version online, as well as to a standard .puz file to be played in the software of your choice.</p>
|
<p>I've been dabbling in constructing US newspaper-style crossword puzzles! This page is a repository of the puzzles I've created and a little bit of author commentary for each. There are links for each to a playable version online, as well as to a standard .puz file to be played in the software of your choice.</p>
|
||||||
|
|
||||||
<hr />
|
<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>
|
<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>
|
||||||
<h4>Rating: <span class="rating">CERULEAN THROWDOWN</span></h4>
|
<h4>Rating: <span class="rating">CERULEAN THROWDOWN</span></h4>
|
||||||
|
|
||||||
<p>This was the first crossword I constructed! There was obvious room for improvement; there are a couple of unchecked squares that I accidentally introduced while adjusting the grid, for example. Rather than throw out more work than I was comfortable with, I just made a joke about it in one of the clues. I'm proud of it as a first effort.</p>
|
<p>This was the first crossword I constructed! There was obvious room for improvement; there are a couple of unchecked squares that I accidentally introduced while adjusting the grid, for example. Rather than throw out more work than I was comfortable with, I just made a joke about it in one of the clues. I'm proud of it as a first effort.</p>
|
||||||
|
|
||||||
<p>This puzzle was, in a way, a collaboration with my friend Amy (it's complicated, don't worry about it). The theme clues refer to the two of us by name, and they're pretty unfair if you don't know us personally. For a hint at the theme to get you started without knowing both of us, hover over the following text block:</p>
|
<p>This puzzle was, in a way, a collaboration with my friend Amy (it's complicated, don't worry about it). The theme clues refer to the two of us by name, and they're pretty unfair if you don't know us personally. For a hint at the theme to get you started without knowing both of us, hover over the following text block:</p>
|
||||||
|
|
||||||
<p><span class="spoiler">My fursona is 80 feet tall. Amy's not a furry, but her online persona is just a touch over 4 inches tall. Our extreme sizes are the joke in the theme clues.</span></p>
|
<p><span class="spoiler">My fursona is 80 feet tall. Amy's not a furry, but her online persona is just a touch over 4 inches tall. Our extreme sizes are the joke in the theme clues.</span></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>
|
<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>
|
</div>
|
||||||
|
|
||||||
<hr />
|
<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>
|
<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>
|
||||||
<h4>Rating: <span class="rating">LETTERBOMB BURIAL</span></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><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 />
|
<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><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 "TEXT WITHOUT EMPTY IS WIN""><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 "TEXT WITHOUT EMPTY IS WIN""><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>
|
||||||
<h4>Rating: <span class="rating">METICULOUS BYPASS</span></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><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 />
|
<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>
|
<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>
|
||||||
<h4>Rating: <span class="rating">HYPERSPEED SHUTDOWN</span></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><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 />
|
<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>
|
<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>
|
||||||
<h4>Rating: <span class="rating">RADIAL RESPONSE</span></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><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>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p><a href="..">Back to home</a></p>
|
<p><a href="..">Back to home</a></p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,91 +1,108 @@
|
||||||
:root {
|
:root {
|
||||||
--bg-color: #D0D0D0;
|
--bg-color: #D0D0D0;
|
||||||
--text-color: #111111;
|
--text-color: #111111;
|
||||||
--spoiler-color: #bbbbbb;
|
--spoiler-color: #bbbbbb;
|
||||||
--highlight-color: #EEEEEE;
|
--highlight-color: #EEEEEE;
|
||||||
}
|
--target-color: #ffffcc;
|
||||||
|
}
|
||||||
body {
|
|
||||||
width: inherit;
|
body {
|
||||||
margin: 1.5em 20%;
|
width: inherit;
|
||||||
font-family: Sans-Serif;
|
margin: 1.5em 20%;
|
||||||
font-size: 14pt;
|
font-family: Sans-Serif;
|
||||||
background-color: var(--bg-color);
|
font-size: 14pt;
|
||||||
color: var(--text-color);
|
background-color: var(--bg-color);
|
||||||
}
|
color: var(--text-color);
|
||||||
|
}
|
||||||
/*
|
|
||||||
@media screen and (max-width: 900px) {
|
/*
|
||||||
body {
|
@media screen and (max-width: 900px) {
|
||||||
width: 90%;
|
body {
|
||||||
}
|
width: 90%;
|
||||||
}
|
}
|
||||||
*/
|
}
|
||||||
|
*/
|
||||||
footer {
|
|
||||||
padding: 0 4em;
|
footer {
|
||||||
font-size: 10pt;
|
padding: 0 4em;
|
||||||
text-align: center;
|
font-size: 10pt;
|
||||||
}
|
text-align: center;
|
||||||
|
}
|
||||||
figure {
|
|
||||||
float: right;
|
figure {
|
||||||
width: 30%;
|
float: right;
|
||||||
}
|
width: 30%;
|
||||||
|
}
|
||||||
figure.baba-puzzle-title {
|
|
||||||
display: flex;
|
figure.baba-puzzle-title {
|
||||||
width: min-content;
|
display: flex;
|
||||||
float: none;
|
width: min-content;
|
||||||
margin: 0.4em auto 0 auto;
|
float: none;
|
||||||
}
|
margin: 0.4em auto 0 auto;
|
||||||
figure.baba-puzzle-title > img {
|
}
|
||||||
height: 30px;
|
figure.baba-puzzle-title > img {
|
||||||
width: auto;
|
height: 30px;
|
||||||
float: none;
|
width: auto;
|
||||||
}
|
float: none;
|
||||||
|
}
|
||||||
img {
|
|
||||||
display: block;
|
img {
|
||||||
margin-left: auto;
|
display: block;
|
||||||
margin-right: auto;
|
margin-left: auto;
|
||||||
width: 100%;
|
margin-right: auto;
|
||||||
height: auto;
|
width: 100%;
|
||||||
float: right;
|
height: auto;
|
||||||
}
|
float: right;
|
||||||
|
}
|
||||||
h1, h2, h4 {
|
|
||||||
text-align: center;
|
h1, h2, h4 {
|
||||||
margin-top: 0;
|
text-align: center;
|
||||||
margin-bottom: 0;
|
margin-top: 0;
|
||||||
}
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
.block {
|
|
||||||
overflow: auto;
|
.block {
|
||||||
}
|
overflow: auto;
|
||||||
|
}
|
||||||
.block > h2 {
|
|
||||||
margin-top: 0.25em;
|
.block:target {
|
||||||
}
|
background-color: var(--target-color);
|
||||||
|
padding: 1em;
|
||||||
.rating {
|
border-radius: 1em;
|
||||||
display: inline-block;
|
border-style: dashed;
|
||||||
font-family: monospace;
|
border-width: 2px;
|
||||||
font-size: 15.3pt;
|
}
|
||||||
letter-spacing: 0.15rem;
|
|
||||||
background-color: var(--highlight-color);
|
.block > h2 {
|
||||||
padding-left: 0.225rem;
|
margin-top: 0.25em;
|
||||||
padding-right: 0.1rem;
|
}
|
||||||
}
|
|
||||||
|
.rating {
|
||||||
.spoiler {
|
display: inline-block;
|
||||||
background-color: var(--spoiler-color);
|
font-family: monospace;
|
||||||
color: var(--spoiler-color);
|
font-size: 15.3pt;
|
||||||
padding-left: 0.25rem;
|
letter-spacing: 0.15rem;
|
||||||
padding-right: 0.2rem;
|
background-color: var(--highlight-color);
|
||||||
box-decoration-break: clone;
|
padding-left: 0.225rem;
|
||||||
}
|
padding-right: 0.1rem;
|
||||||
|
}
|
||||||
.spoiler:hover {
|
|
||||||
color: var(--text-color);
|
h5 {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5.permalink {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spoiler {
|
||||||
|
background-color: var(--spoiler-color);
|
||||||
|
color: var(--spoiler-color);
|
||||||
|
padding-left: 0.25rem;
|
||||||
|
padding-right: 0.2rem;
|
||||||
|
box-decoration-break: clone;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spoiler:hover {
|
||||||
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue