chore(css): Move CSS examples - Basic shapes, filter effects, module template, paint API

[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/cssom/modify-rule.html", '100%', 120)}}
{{EmbedGHLiveSample("css-examples/houdini/css_painting_api/example-boxbg.html", '100%', 400)}}
{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}
{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/modules/filters.html", '100%', 420)}}
{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}
{{EmbedGHLiveSample("css-examples/houdini/css_painting_api/example-boxbg.html", '100%', 400)}}

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 (11 pages)

• /en-US/docs/Learn/CSS/CSS_layout/Media_queries
• /en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
• /en-US/docs/MDN/Writing_guidelines/Page_structures/Page_types/CSS_module_landing_page_template
• /en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information
• /en-US/docs/Web/API/CSS_Painting_API
• /en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables
• /en-US/docs/Web/CSS/CSS_filter_effects
• /en-US/docs/Web/CSS/CSS_shapes
• /en-US/docs/Web/CSS/basic-shape/circle
• /en-US/docs/Web/CSS/basic-shape/ellipse
• /en-US/docs/Web/CSS/image/paint

Flaws (2)

Note! 10 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/API/CSS_Painting_API
Title: CSS Painting API
Flaw count: 2

• macros:
  • /en-US/docs/Web/API/PaintRenderingContext2D does not exist
  • /en-US/docs/Web/API/PaintSize does not exist

(comment last updated: 2024-11-15 09:57:08)

[estelle]

Until Play supports saving work, for learn pages with examples that build on previous examples, opt to encourage creating and saving files rather than play

[estelle]

Suggested change

	One November night in the year 1782, so the story runs, two brothers sat over
	their winter fire in the little French town of Annonay, watching the grey
	smoke-wreaths from the hearth curl up the wide chimney. Their names were
	Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted
	as possessing thoughtful minds and a deep interest in all scientific knowledge
	and new discovery.
	One November night in the year 1782, so the story runs, two brothers sat over
	their winter fire in the little French town of Annonay, watching the grey
	smoke-wreaths from the hearth curl up the wide chimney. Their names were
	Stephen and Joseph Montgolfier. They were papermakers by trade and were noted
	as possessing thoughtful minds and a deep interest in all scientific knowledge
	and new discovery.

[estelle]

same for all the examples everywhere.

[bsmth]

This is apparently an excerpt from "BALLOONS AIRSHIPS AND FLYING MACHINES"

https://www.gutenberg.org/files/54799/54799-h/54799-h.htm

Should we really alter it?

[estelle]

Too funny. It's old English. 1905. In 1905, in Europe, they did not have hundreds of millions of people, much less in 1782. We should likely come up with a different example, but don't need to do that today. Thanks for finding the reference.

[estelle]

Thanks! 🎉

[bsmth]

Thank you!