diff --git a/src/articles/native-light-dark/demos/color-scheme/index.css b/src/articles/native-light-dark/demo/color-scheme/index.css similarity index 100% rename from src/articles/native-light-dark/demos/color-scheme/index.css rename to src/articles/native-light-dark/demo/color-scheme/index.css diff --git a/src/articles/native-light-dark/demos/color-scheme/index.html b/src/articles/native-light-dark/demo/color-scheme/index.html similarity index 100% rename from src/articles/native-light-dark/demos/color-scheme/index.html rename to src/articles/native-light-dark/demo/color-scheme/index.html diff --git a/src/articles/native-light-dark/demos/color-scheme/index.js b/src/articles/native-light-dark/demo/color-scheme/index.js similarity index 100% rename from src/articles/native-light-dark/demos/color-scheme/index.js rename to src/articles/native-light-dark/demo/color-scheme/index.js diff --git a/src/articles/native-light-dark/demos/link-media/dark.css b/src/articles/native-light-dark/demo/link-media/dark.css similarity index 100% rename from src/articles/native-light-dark/demos/link-media/dark.css rename to src/articles/native-light-dark/demo/link-media/dark.css diff --git a/src/articles/native-light-dark/demos/link-media/index.css b/src/articles/native-light-dark/demo/link-media/index.css similarity index 100% rename from src/articles/native-light-dark/demos/link-media/index.css rename to src/articles/native-light-dark/demo/link-media/index.css diff --git a/src/articles/native-light-dark/demos/link-media/index.html b/src/articles/native-light-dark/demo/link-media/index.html similarity index 100% rename from src/articles/native-light-dark/demos/link-media/index.html rename to src/articles/native-light-dark/demo/link-media/index.html diff --git a/src/articles/native-light-dark/demos/link-media/index.js b/src/articles/native-light-dark/demo/link-media/index.js similarity index 100% rename from src/articles/native-light-dark/demos/link-media/index.js rename to src/articles/native-light-dark/demo/link-media/index.js diff --git a/src/articles/native-light-dark/demos/link-media/light.css b/src/articles/native-light-dark/demo/link-media/light.css similarity index 100% rename from src/articles/native-light-dark/demos/link-media/light.css rename to src/articles/native-light-dark/demo/link-media/light.css diff --git a/src/articles/native-light-dark/index.md b/src/articles/native-light-dark/index.md index 18f0252..337837b 100644 --- a/src/articles/native-light-dark/index.md +++ b/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 ``` @@ -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. diff --git a/src/articles/skewed-highlight/demos/almost.html b/src/articles/skewed-highlight/demo/almost.html similarity index 100% rename from src/articles/skewed-highlight/demos/almost.html rename to src/articles/skewed-highlight/demo/almost.html diff --git a/src/articles/skewed-highlight/demos/final.html b/src/articles/skewed-highlight/demo/final.html similarity index 100% rename from src/articles/skewed-highlight/demos/final.html rename to src/articles/skewed-highlight/demo/final.html diff --git a/src/articles/skewed-highlight/demos/mark.html b/src/articles/skewed-highlight/demo/mark.html similarity index 100% rename from src/articles/skewed-highlight/demos/mark.html rename to src/articles/skewed-highlight/demo/mark.html diff --git a/src/articles/skewed-highlight/demos/type.html b/src/articles/skewed-highlight/demo/type.html similarity index 100% rename from src/articles/skewed-highlight/demos/type.html rename to src/articles/skewed-highlight/demo/type.html diff --git a/src/articles/skewed-highlight/index.md b/src/articles/skewed-highlight/index.md index 3cc0080..b9217ba 100644 --- a/src/articles/skewed-highlight/index.md +++ b/src/articles/skewed-highlight/index.md @@ -38,7 +38,7 @@ h1 { ``` @@ -96,7 +96,7 @@ mark { It looked pretty close already, but the whole point of this challenge was the side angles. @@ -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! @@ -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 `` element was decorated like its own element. diff --git a/src/articles/svg-sprites/demos/fragments/icons/id.svg b/src/articles/svg-sprites/demo/fragments/icons/id.svg similarity index 100% rename from src/articles/svg-sprites/demos/fragments/icons/id.svg rename to src/articles/svg-sprites/demo/fragments/icons/id.svg diff --git a/src/articles/svg-sprites/demos/fragments/icons/view.svg b/src/articles/svg-sprites/demo/fragments/icons/view.svg similarity index 100% rename from src/articles/svg-sprites/demos/fragments/icons/view.svg rename to src/articles/svg-sprites/demo/fragments/icons/view.svg diff --git a/src/articles/svg-sprites/demos/fragments/id.html b/src/articles/svg-sprites/demo/fragments/id.html similarity index 100% rename from src/articles/svg-sprites/demos/fragments/id.html rename to src/articles/svg-sprites/demo/fragments/id.html diff --git a/src/articles/svg-sprites/demos/fragments/view.html b/src/articles/svg-sprites/demo/fragments/view.html similarity index 100% rename from src/articles/svg-sprites/demos/fragments/view.html rename to src/articles/svg-sprites/demo/fragments/view.html diff --git a/src/articles/svg-sprites/demos/old-school/background.html b/src/articles/svg-sprites/demo/old-school/background.html similarity index 100% rename from src/articles/svg-sprites/demos/old-school/background.html rename to src/articles/svg-sprites/demo/old-school/background.html diff --git a/src/articles/svg-sprites/demos/old-school/icons/hover.svg b/src/articles/svg-sprites/demo/old-school/icons/hover.svg similarity index 100% rename from src/articles/svg-sprites/demos/old-school/icons/hover.svg rename to src/articles/svg-sprites/demo/old-school/icons/hover.svg diff --git a/src/articles/svg-sprites/demos/old-school/icons/link.svg b/src/articles/svg-sprites/demo/old-school/icons/link.svg similarity index 100% rename from src/articles/svg-sprites/demos/old-school/icons/link.svg rename to src/articles/svg-sprites/demo/old-school/icons/link.svg diff --git a/src/articles/svg-sprites/demos/old-school/icons/sprite.svg b/src/articles/svg-sprites/demo/old-school/icons/sprite.svg similarity index 100% rename from src/articles/svg-sprites/demos/old-school/icons/sprite.svg rename to src/articles/svg-sprites/demo/old-school/icons/sprite.svg diff --git a/src/articles/svg-sprites/demos/old-school/img.html b/src/articles/svg-sprites/demo/old-school/img.html similarity index 100% rename from src/articles/svg-sprites/demos/old-school/img.html rename to src/articles/svg-sprites/demo/old-school/img.html diff --git a/src/articles/svg-sprites/demos/old-school/naive.html b/src/articles/svg-sprites/demo/old-school/naive.html similarity index 100% rename from src/articles/svg-sprites/demos/old-school/naive.html rename to src/articles/svg-sprites/demo/old-school/naive.html diff --git a/src/articles/svg-sprites/demos/stacks/background.html b/src/articles/svg-sprites/demo/stacks/background.html similarity index 100% rename from src/articles/svg-sprites/demos/stacks/background.html rename to src/articles/svg-sprites/demo/stacks/background.html diff --git a/src/articles/svg-sprites/demos/stacks/icons/sprite.svg b/src/articles/svg-sprites/demo/stacks/icons/sprite.svg similarity index 100% rename from src/articles/svg-sprites/demos/stacks/icons/sprite.svg rename to src/articles/svg-sprites/demo/stacks/icons/sprite.svg diff --git a/src/articles/svg-sprites/demos/stacks/img.html b/src/articles/svg-sprites/demo/stacks/img.html similarity index 100% rename from src/articles/svg-sprites/demos/stacks/img.html rename to src/articles/svg-sprites/demo/stacks/img.html diff --git a/src/articles/svg-sprites/demos/stacks/inline.html b/src/articles/svg-sprites/demo/stacks/inline.html similarity index 100% rename from src/articles/svg-sprites/demos/stacks/inline.html rename to src/articles/svg-sprites/demo/stacks/inline.html diff --git a/src/articles/svg-sprites/demos/symbols/external.html b/src/articles/svg-sprites/demo/symbols/external.html similarity index 100% rename from src/articles/svg-sprites/demos/symbols/external.html rename to src/articles/svg-sprites/demo/symbols/external.html diff --git a/src/articles/svg-sprites/demos/symbols/icons/sprite.svg b/src/articles/svg-sprites/demo/symbols/icons/sprite.svg similarity index 100% rename from src/articles/svg-sprites/demos/symbols/icons/sprite.svg rename to src/articles/svg-sprites/demo/symbols/icons/sprite.svg diff --git a/src/articles/svg-sprites/demos/symbols/inline.html b/src/articles/svg-sprites/demo/symbols/inline.html similarity index 100% rename from src/articles/svg-sprites/demos/symbols/inline.html rename to src/articles/svg-sprites/demo/symbols/inline.html diff --git a/src/articles/svg-sprites/index.md b/src/articles/svg-sprites/index.md index 2de1607..4322d64 100644 --- a/src/articles/svg-sprites/index.md +++ b/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. @@ -51,7 +51,7 @@ Look at the `d` attributes of every `` 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. @@ -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. @@ -132,7 +132,7 @@ If you just need to change your SVG icon’s color fill via CSS, you can put i ``` @@ -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 `` itself, we now have `` element that gets the symbol from the library by ID. @@ -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? 🤔 @@ -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 `` 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. @@ -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. @@ -352,10 +352,10 @@ Just like ``, our icons don’t get their place since they’re stacked As for the `` 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 `` 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). diff --git a/src/articles/two-columns/demos/element.html b/src/articles/two-columns/demo/element.html similarity index 100% rename from src/articles/two-columns/demos/element.html rename to src/articles/two-columns/demo/element.html diff --git a/src/articles/two-columns/demos/flexbox.html b/src/articles/two-columns/demo/flexbox.html similarity index 100% rename from src/articles/two-columns/demos/flexbox.html rename to src/articles/two-columns/demo/flexbox.html diff --git a/src/articles/two-columns/demos/float.html b/src/articles/two-columns/demo/float.html similarity index 100% rename from src/articles/two-columns/demos/float.html rename to src/articles/two-columns/demo/float.html diff --git a/src/articles/two-columns/demos/frame.html b/src/articles/two-columns/demo/frame.html similarity index 100% rename from src/articles/two-columns/demos/frame.html rename to src/articles/two-columns/demo/frame.html diff --git a/src/articles/two-columns/demos/grid.html b/src/articles/two-columns/demo/grid.html similarity index 100% rename from src/articles/two-columns/demos/grid.html rename to src/articles/two-columns/demo/grid.html diff --git a/src/articles/two-columns/demos/inline-block.html b/src/articles/two-columns/demo/inline-block.html similarity index 100% rename from src/articles/two-columns/demos/inline-block.html rename to src/articles/two-columns/demo/inline-block.html diff --git a/src/articles/two-columns/demos/multi-column.html b/src/articles/two-columns/demo/multi-column.html similarity index 100% rename from src/articles/two-columns/demos/multi-column.html rename to src/articles/two-columns/demo/multi-column.html diff --git a/src/articles/two-columns/demos/news.css b/src/articles/two-columns/demo/news.css similarity index 100% rename from src/articles/two-columns/demos/news.css rename to src/articles/two-columns/demo/news.css diff --git a/src/articles/two-columns/demos/page.css b/src/articles/two-columns/demo/page.css similarity index 100% rename from src/articles/two-columns/demos/page.css rename to src/articles/two-columns/demo/page.css diff --git a/src/articles/two-columns/demos/position.html b/src/articles/two-columns/demo/position.html similarity index 100% rename from src/articles/two-columns/demos/position.html rename to src/articles/two-columns/demo/position.html diff --git a/src/articles/two-columns/demos/svg.html b/src/articles/two-columns/demo/svg.html similarity index 100% rename from src/articles/two-columns/demos/svg.html rename to src/articles/two-columns/demo/svg.html diff --git a/src/articles/two-columns/demos/table.html b/src/articles/two-columns/demo/table.html similarity index 100% rename from src/articles/two-columns/demos/table.html rename to src/articles/two-columns/demo/table.html diff --git a/src/articles/two-columns/demos/writing-mode.html b/src/articles/two-columns/demo/writing-mode.html similarity index 100% rename from src/articles/two-columns/demos/writing-mode.html rename to src/articles/two-columns/demo/writing-mode.html diff --git a/src/articles/two-columns/index.md b/src/articles/two-columns/index.md index 47a968d..777b84a 100644 --- a/src/articles/two-columns/index.md +++ b/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 ``, some `` rows, and `
` 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 `