chore(css): Move CSS examples - Learn CSS, Building Blocks p2

[bsmth]

Description

As part of an initiative to reduce repo maintenance & code duplication, this PR moves some external examples into content. This PR converts the following macros to live samples:

{{EmbedGHLiveSample("css-examples/learn/images/filter.html", '100%', 900)}}
{{EmbedGHLiveSample("css-examples/learn/images/filter-text.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/images/shapes.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/layers/basic-cascade.html", '100%', 500)}}
{{EmbedGHLiveSample("css-examples/learn/layers/layer-order.html", '100%', 500)}}
{{EmbedGHLiveSample("css-examples/learn/layers/media-order.html", '100%', 500)}}
{{EmbedGHLiveSample("css-examples/learn/layers/layer-precedence.html", '100%', 500)}}
{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}
{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}
{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}
{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}
{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}
{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}
{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}
{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}
{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}
{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}
{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}
{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1100)}}
{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1100)}}
{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1100)}}
{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 700)}}

Motivation

Motivation is described in the project issue.

Related issues and pull requests

• [PROJECT] Move embedded css-examples into content mdn#597

[github-actions]

Preview URLs

• /en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects
• /en-US/docs/Learn/CSS/Building_blocks/Cascade_layers
• /en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
• /en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS
• /en-US/docs/Learn/CSS/Building_blocks/The_box_model

(comment last updated: 2024-11-07 10:34:47)

[chrisdavidmills]

@bsmth More great work! I just had one comment, but approving so as not to hold this one up, if it was intentional.

[chrisdavidmills]

LGTM!