Move all demos to demo folder

src/articles/native-light-dark/index.md

@@ -138,7 +138,7 @@ To make it work properly, you’ll need to decide where to store your global `co
 ```
 
 <iframe
-	src="demos/color-scheme"
+	src="demo/color-scheme/index.html"
 	height="256" loading="lazy"
 	title="Three-button switcher group: light, auto, dark. The auto button is selected."
 ></iframe>
@@ -228,7 +228,7 @@ function switchScheme(scheme) {
 In short, if we force the dark scheme, the `dark.css` gets `media="all"` instead of the `prefers-color-scheme` and the `light.css` one gets `‌media="not all"`, and the other way around for the light scheme. Once the user chooses the “auto” option, we stop forcing and restoring all previous `prefers-color-scheme` media values.
 
 <iframe
-	src="demos/link-media"
+	src="demo/link-media/index.html"
 	height="256" loading="lazy"
 	title="Three-button switcher group: light, auto, dark. The auto button is selected."
 ></iframe>

src/articles/skewed-highlight/index.md

@@ -38,7 +38,7 @@ h1 {
 ```
 
 <iframe
-	src="demos/type.html"
+	src="demo/type.html"
 	height="500" loading="lazy"
 	title="The heading with the Hanken Grotesk font and text styles applied."
 ></iframe>
@@ -96,7 +96,7 @@ mark {
 It looked pretty close already, but the whole point of this challenge was the side angles.
 
 <iframe
-	src="demos/mark.html"
+	src="demo/mark.html"
 	height="500" loading="lazy"
 	title="The heading with the multi-line styled mark tag highlighting the first part."
 ></iframe>
@@ -168,7 +168,7 @@ Positioning background was fairly simple:
 Once the background was done, I did a minor refactoring and used a few custom properties to make the highlight easily adjustable. But first, let’s look at the result!
 
 <iframe
-	src="demos/almost.html"
+	src="demo/almost.html"
 	height="500" loading="lazy"
 	title="The heading with the side angles at the beginning and the end of the whole highlight."
 ></iframe>
@@ -235,7 +235,7 @@ mark {
 I had to use the `-webkit-` prefix for it to work in Chrome and Safari, but the result was just stunning: every line of the `<mark>` element was decorated like its own element.
 
 <iframe
-	src="demos/final.html"
+	src="demo/final.html"
 	height="500" loading="lazy"
 	title="The heading with the side angles at the beginning and the end of every separate part of the highlight."
 ></iframe>

src/articles/svg-sprites/index.md

@@ -7,7 +7,7 @@ First of all, let’s all agree that sprites are a trick. You might call it a
 In the early Web days, sprites were used similarly, but to optimize network performance (limit the number of requests) and also work around the way browsers load resources. Consider this example: one background image should be replaced with another once the user hovers/focuses the link.
 
 <iframe
-	src="demos/old-school/naive.html"
+	src="demo/old-school/naive.html"
 	height="360" loading="lazy"
 	title="Black contour cogwheel icon on a green background, on hover it becomes purple."
 ></iframe>
@@ -51,7 +51,7 @@ Look at the `d` attributes of every `<path>` element, specifically on how the
 The easiest way to put a decorative image on a page is to use the `background-image` property. Seriously, you don’t always need to do complex things with your graphics, it’s usually more performant too. Let’s put our sprite in the background image and move its position to a certain coordinate to show the needed icon. There’s no need to set `background-position` to `0 0`, but I like to keep defaults visible when they’re about to change.
 
 <iframe
-	src="demos/old-school/background.html"
+	src="demo/old-school/background.html"
 	height="360" loading="lazy"
 	title="Black contour cogwheel icon on a green background, on hover it becomes purple."
 ></iframe>
@@ -90,7 +90,7 @@ Interestingly enough, you can use old-school sprites not only for background ima
 Styling in this case looks quite similar to the previous example, but with `object-fit` and `object-position` properties instead. Unlike `background-position`, the default position here would be `50% 50%`, so we’ll have to set it to `0 0` to make it work the same way.
 
 <iframe
-	src="demos/old-school/img.html"
+	src="demo/old-school/img.html"
 	height="360" loading="lazy"
 	title="Black contour cogwheel icon on a green background, on hover it becomes purple."
 ></iframe>
@@ -132,7 +132,7 @@ If you just need to change your SVG icon’s color fill via CSS, you can put i
 ```
 
 <iframe
-	src="demos/symbols/inline.html"
+	src="demo/symbols/inline.html"
 	height="360" loading="lazy"
 	title="Black contour cogwheel icon on a green background, on hover it becomes purple."
 ></iframe>
@@ -157,7 +157,7 @@ But inline icons are not ideal. You can often rely on the browser cache when it
 To make all the paths _external_ to the document, we can put them together in a file organized in a special way. Let’s call it _sprite.svg_ and throw in another icon just to make it look like a library. Instead of the `<path>` itself, we now have `<use>` element that gets the symbol from the library by ID.
 
 <iframe
-	src="demos/symbols/external.html"
+	src="demo/symbols/external.html"
 	height="360" loading="lazy"
 	title="Black contour cogwheel icon on a green background, on hover it becomes purple."
 ></iframe>
@@ -202,7 +202,7 @@ This method is a built-in SVG feature useful for organizing complex vector doc
 Let’s try one more time to use a “true” SVG sprite as a background image, with an anchor pointing to a specific icon in that sprite. Yes, the same thing that didn’t work previously. Wouldn’t it be nice to make it work? 🤔
 
 <iframe
-	src="demos/fragments/id.html"
+	src="demo/fragments/id.html"
 	height="360" loading="lazy"
 	title="Black contour cogwheel icon on a green background, on hover it becomes purple."
 ></iframe>
@@ -251,7 +251,7 @@ Unfortunately, this solution is limited to background images and content image
 While we’re at it, there’s another syntax that might be convenient in some cases. Previously, to make this “true sprite” work we had to mark it with `<view>` elements and unique IDs. But we can also tell what fragment of the sprite we need right in the URL, using `svgView` and `viewBox` parameters.
 
 <iframe
-	src="demos/fragments/view.html"
+	src="demo/fragments/view.html"
 	height="360" loading="lazy"
 	title="Black contour cogwheel icon on a green background, on hover it becomes purple."
 ></iframe>
@@ -313,7 +313,7 @@ You know, the way I said “if only” and the next chapter that’s coming up
 Before diving into yet another SVG spriting method, let’s answer the most important question: does CSS styling work? Yes, it does. That’s what we’re going to try first.
 
 <iframe
-	src="demos/stacks/inline.html"
+	src="demo/stacks/inline.html"
 	height="360" loading="lazy"
 	title="Black contour cogwheel icon on a green background, on hover it becomes purple."
 ></iframe>
@@ -352,10 +352,10 @@ Just like `<symbol>`, our icons don’t get their place since they’re stacked
 
 As for the `<svg>` wrappers for each icon, they serve an important role in making all that beautiful auto-scaling thanks to the `viewBox` attribute. That’s also why there’s a complicated `:root svg` selector: it says “affect only nested `<svg>` elements”, which makes sense since there’s a parent one too.
 
-But the most exciting part is that it also works for [background images](demos/stacks/background.html) and [content images](demos/stacks/img.html).
+But the most exciting part is that it also works for [background images](demo/stacks/background.html) and [content images](demo/stacks/img.html).
 
 <iframe
-	src="demos/stacks/background.html"
+	src="demo/stacks/background.html"
 	height="360" loading="lazy"
 	title="Black contour cogwheel icon on a green background, it does not become purple on hover."
 ></iframe>

src/articles/two-columns/index.md

@@ -43,7 +43,7 @@ How would you sort the list of reasonable options? Well, probably not alphabeti
 
 ### Tables
 
-⚙️ [Demo: two columns and a gap with tables](demos/table.html)
+⚙️ [Demo: two columns and a gap with tables](demo/table.html)
 
 Tables were the first layout tool available in browsers. And I used them to create my first webpage back in 2002. To make a table layout you need a parent wrapper `<table>`, some `<tr>` rows, and `<td>` cells for columns.
 
@@ -105,7 +105,7 @@ Once we have both news in each table cell, the first “reasonable” layout i
 
 ### Floats
 
-⚙️ [Demo: two columns and a gap with floats](demos/float.html)
+⚙️ [Demo: two columns and a gap with floats](demo/float.html)
 
 The next layout technique I learned were floats. They were invented for a newspaper or magazine-like content layouts where text would “float” around pictures, quotes, or similar elements. I tried this first in Adobe PageMaker when laying out an actual newspaper and it was very nice to have floats available on the Web too.
 
@@ -165,7 +165,7 @@ And there you have it! The second slightly more “reasonable” two-column opt
 
 ### Inline blocks
 
-⚙️ [Demo: two columns and a gap with inline blocks](demos/inline-block.html)
+⚙️ [Demo: two columns and a gap with inline blocks](demo/inline-block.html)
 
 Layouts based on inline blocks were popular around the same time as floats. But they were a little bit more finicky to deal with. We’ll use the same markup as with floats, but we won’t need any first/second modifiers.
 
@@ -221,7 +221,7 @@ That was the third way, the next three will finally start making sense, I promi
 
 ### Multi-columns
 
-⚙️ [Demo: two columns and a gap with multi-columns](demos/multi-column.html)
+⚙️ [Demo: two columns and a gap with multi-columns](demo/multi-column.html)
 
 It’s time for the first layout technique that was designed for layouts. Well, almost. Multi-columns can take any content and make it flow through the columns with some native gaps in-between. As seen in newspapers!
 
@@ -248,7 +248,7 @@ That was quick! The fourth two-column layout. Let’s see if there’s anything
 
 ### Flexbox
 
-⚙️ [Demo: two columns and a gap with Flexbox](demos/flexbox.html)
+⚙️ [Demo: two columns and a gap with Flexbox](demo/flexbox.html)
 
 Here comes the most popular layout technique these days. It’s been around for a while, but back in the old days there used to be differences in browser implementations and just [obvious bugs](https://github.com/philipwalton/flexbugs) that made Flexbox tricky to use. But not anymore!
 
@@ -282,7 +282,7 @@ Finally, something modern and usable, the fifth already! Flexbox is relevant to
 
 ### Grid Layout
 
-⚙️ [Demo: two columns and a gap with Grid Layout](demos/table.html)
+⚙️ [Demo: two columns and a gap with Grid Layout](demo/table.html)
 
 Seriously, Grid Layout makes so much sense in almost every layout situation, even for micro-layouts like putting an icon next to a word. Remember? This is what we’ve started from:
 
@@ -312,7 +312,7 @@ Other methods are making things too complicated with extra markup, misusing some
 
 ### Positioning
 
-⚙️ [Demo: two columns and a gap with positioning](demos/position.html)
+⚙️ [Demo: two columns and a gap with positioning](demo/position.html)
 
 Positioning is not the best layout technique because it breaks the content flow, one of the main principles of the Web. But it’s still a useful tool in some cases. Unlike shapes in SVG, we don’t have to position elements from the top left corner of the document every time: fortunately, there’s a way to nest positioning.
 
@@ -351,7 +351,7 @@ So there you have it: the first weird way. Nothing too scary, right? Of cours
 
 ### Writing mode
 
-⚙️ [Demo: two columns and a gap with writing mode](demos/writing-mode.html)
+⚙️ [Demo: two columns and a gap with writing mode](demo/writing-mode.html)
 
 To understand how the next method works, let’s think about this very text: not the meaning of it, but the shape. I’m writing it in horizontal lines that go one after another from top to bottom. This behavior is common for many languages and controlled with the `writing-mode` property. In this case, its value is `horizontal-tb`, meaning “horizontal, top to bottom”.
 
@@ -393,7 +393,7 @@ Still, the second weird two-column layout. Ready for another one? Let’s go!
 
 ### SVG
 
-⚙️ [Demo: two columns and a gap with SVG](demos/svg.html)
+⚙️ [Demo: two columns and a gap with SVG](demo/svg.html)
 
 I already mentioned SVG as merely a graphics format that could be hand-coded, but doesn’t fit our layout needs. Sorry, but I lied to you. You weren’t ready for the truth at the beginning. But now you’ve been through a lot of weird stuff and are ready for anything.
 
@@ -449,7 +449,7 @@ That’s the third weird two-column layout. Let’s explore a slightly more rea
 
 ### Element
 
-⚙️ [Demo: two columns and a gap with element](demos/element.html)
+⚙️ [Demo: two columns and a gap with element](demo/element.html)
 
 When setting up the rules, I mentioned that we’re trying to make something practical here, not just draw two boxes next to each other. But there is a way to take some real content and draw it as a background image. It’s not Canvas, it only works in Firefox, and you should never use it. Sounds exciting!
 
@@ -497,7 +497,7 @@ The fourth weird layout method wasn’t that bad compared to what’s coming ne
 
 ### Frames
 
-⚙️ [Demo: two columns and a gap with frames](demos/frame.html)
+⚙️ [Demo: two columns and a gap with frames](demo/frame.html)
 
 You might know what `<iframe>` is, but you probably haven’t used the `<frame>` element much. It serves a similar purpose by giving you a “window” to another document. The main difference between them is that `<iframe>` is a standalone element, but `<frame>` elements come in sets called `<frameset>`. And those framesets have some layout capabilities!