fix: auto-cleanup by bot (#41571)

* chore: auto-fix Markdownlint, Prettier, and front-matter issues

* More fixes

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

Author: mdn-bot

files/en-us/learn_web_development/core/styling_basics/home_color_scheme_search/index.md

@@ -110,7 +110,7 @@ To begin, click the **Play** button in one of the code panels below to open the
 }
 
 html {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 body {
@@ -240,7 +240,7 @@ A possible solution could be:
 }
 
 html {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 body {
@@ -356,19 +356,19 @@ tr :nth-of-type(4) {
 /* Solution: Provide background colors for the "Raw color" cells */
 
 tr:nth-of-type(1) td:nth-of-type(2) {
-  background-color: rgb(255 192 203);
+  background-color: pink;
 }
 
 tr:nth-of-type(2) td:nth-of-type(2) {
   background-color: rgb(255 145 175);
 }
 
 tr:nth-of-type(3) td:nth-of-type(2) {
-  background-color: rgb(255 105 180);
+  background-color: hotpink;
 }
 
 tr:nth-of-type(4) td:nth-of-type(2) {
-  background-color: rgb(255 0 255);
+  background-color: magenta;
 }
 
 tbody tr:nth-child(odd) {

files/en-us/learn_web_development/getting_started/your_first_website/adding_interactivity/index.md

@@ -92,7 +92,7 @@ Try clicking the list items a few times and note how the "done" styles are toggl
 To start you off with writing some JavaScript, we'll walk you through adding a _Hello world!_ example to your sample website. ([_Hello world!_](https://en.wikipedia.org/wiki/%22Hello,_World!%22_program) is the standard introductory programming example.)
 
 > [!WARNING]
-> If you haven't been following along with the rest of our course, [download this example code](https://github.com/mdn/beginner-html-site-styled/archive/refs/heads/main.zip) and use it as a starting point.
+> If you haven't been following along with the rest of our course, [download this example code](https://codeload.github.com/mdn/beginner-html-site-styled/zip/refs/heads/main) and use it as a starting point.
 
 1. Inside your `first-website` folder or the example folder you have just downloaded, create a new folder named `scripts`.
 2. Within the `scripts` folder, create a new text document called `main.js`, and save it.

files/en-us/web/api/commandevent/index.md

@@ -75,22 +75,22 @@ In this example three buttons have been created with [`commands` with custom val
 }
 ```
 
-An event listener is attached to the image using the [`command` event](/en-US/docs/Web/API/CommandEvent).
+An event listener is attached to the image using the [`command` event](/en-US/docs/Web/API/HTMLElement/command_event).
 When one of the buttons is clicked, the listener runs code based on the custom `command` value assigned to the button, rotating the image and also updating it's `alt` text to indicate the new angle of the image.
 
 ```js
 const image = document.getElementById("the-image");
 
 image.addEventListener("command", (event) => {
-  let rotate = parseInt(event.target.style.rotate || "0");
-  if (event.command == "--reset") {
+  let rotate = parseInt(event.target.style.rotate || "0", 10);
+  if (event.command === "--reset") {
     rotate = 0;
     event.target.style.rotate = `${rotate}deg`;
   } else if (event.command === "--rotate-left") {
-    rotate === -270 ? (rotate = 0) : (rotate = rotate - 90);
+    rotate = rotate === -270 ? 0 : rotate - 90;
     event.target.style.rotate = `${rotate}deg`;
   } else if (event.command === "--rotate-right") {
-    rotate === 270 ? (rotate = 0) : (rotate = rotate + 90);
+    rotate = rotate === 270 ? 0 : rotate + 90;
     event.target.style.rotate = `${rotate}deg`;
   }
   event.target.alt = `dinosaur head rotated ${rotate} degrees`;

files/en-us/web/api/htmlbuttonelement/command/index.md

@@ -68,15 +68,15 @@ When one of the buttons is clicked, the listener runs code based on the custom `
 const image = document.getElementById("the-image");
 
 image.addEventListener("command", (event) => {
-  let rotate = parseInt(event.target.style.rotate || "0");
-  if (event.command == "--reset") {
+  let rotate = parseInt(event.target.style.rotate || "0", 10);
+  if (event.command === "--reset") {
     rotate = 0;
     event.target.style.rotate = `${rotate}deg`;
   } else if (event.command === "--rotate-left") {
-    rotate === -270 ? (rotate = 0) : (rotate = rotate - 90);
+    rotate = rotate === -270 ? 0 : rotate - 90;
     event.target.style.rotate = `${rotate}deg`;
   } else if (event.command === "--rotate-right") {
-    rotate === 270 ? (rotate = 0) : (rotate = rotate + 90);
+    rotate = rotate === 270 ? 0 : rotate + 90;
     event.target.style.rotate = `${rotate}deg`;
   }
   event.target.alt = `dinosaur head rotated ${rotate} degrees`;

files/en-us/web/api/htmlmetaelement/index.md

@@ -64,7 +64,7 @@ meta.content = "width=device-width, initial-scale=1";
 document.head.appendChild(meta);
 ```
 
-For more information on setting the viewport, see [`<meta name="viewport">`](/en-US/docs/Reference/Elements/meta/name/viewport).
+For more information on setting the viewport, see [`<meta name="viewport">`](/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport).
 
 ## Specifications
 

files/en-us/web/css/color_value/color-mix/index.md

@@ -65,7 +65,7 @@ The color space must be one of the available color spaces listed in the [formal
 
 The [`<rectangular-color-space>`](/en-US/docs/Web/CSS/color-interpolation-method#rectangular-color-space) category includes [`srgb`](/en-US/docs/Glossary/Color_space#srgb), [`srgb-linear`](/en-US/docs/Glossary/Color_space#srgb-linear), [`display-p3`](/en-US/docs/Glossary/Color_space#display-p3), [`a98-rgb`](/en-US/docs/Glossary/Color_space#a98-rgb), [`prophoto-rgb`](/en-US/docs/Glossary/Color_space#prophoto-rgb), [`rec2020`](/en-US/docs/Glossary/Color_space#rec2020), [`lab`](/en-US/docs/Glossary/Color_space#cielab_color_spaces), [`oklab`](/en-US/docs/Glossary/Color_space#oklab), [`xyz`](/en-US/docs/Glossary/Color_space#xyz_color_spaces), [`xyz-d50`](/en-US/docs/Glossary/Color_space#xyz), and [`xyz-d65`](/en-US/docs/Glossary/Color_space#xyz-d50).
 
-The`<polar-color-space>` category includes [`hsl`](/en-US/docs/Web/CSS/color_value/hsl), [`hwb`](/en-US/docs/Web/CSS/color_value/hwb), [`lch`](/en-US/docs/Web/CSS/color_value/lch), and [`oklch`](/en-US/docs/Web/CSS/color_value/oklch). With these you can optionally follow the color space name with a {{CSSXref("&lt;hue-interpolation-method&gt;")}}. This value defaults to `shorter hue`, but can also be set to `longer hue`, `increasing hue`, or `decreasing hue`.
+The `<polar-color-space>` category includes [`hsl`](/en-US/docs/Web/CSS/color_value/hsl), [`hwb`](/en-US/docs/Web/CSS/color_value/hwb), [`lch`](/en-US/docs/Web/CSS/color_value/lch), and [`oklch`](/en-US/docs/Web/CSS/color_value/oklch). With these you can optionally follow the color space name with a {{CSSXref("&lt;hue-interpolation-method&gt;")}}. This value defaults to `shorter hue`, but can also be set to `longer hue`, `increasing hue`, or `decreasing hue`.
 
 ### Color percentages
 

files/en-us/web/css/css_images/index.md

@@ -63,7 +63,7 @@ The CSS images module also defines the {{CSSxRef("image/image", "image()")}} fun
 
 - {{cssxref("url_value", "<url>")}}
 - {{cssxref("url_function", "url()")}}
-- [`<basic-shape-rect>`](/en-US/docs/Web/CSS/basic-shape#basic-shape-rect)
+- [`<basic-shape-rect>`](/en-US/docs/Web/CSS/basic-shape#syntax_for_rectangles_basic-shape-rect)
 
 ## Specifications
 

files/en-us/web/css/css_images/using_object-view-box/index.md

@@ -39,7 +39,7 @@ This example demonstrates using the `object-view-box` property to zoom a section
 
 ### HTML
 
-We include an {{htmlelement("img")}} element and a [`range`](Web/HTML/Reference/Elements/input/range) {{htmlelement("input")}} element, with an associated {{htmlelement("label")}}. The natural dimensions, or intrinsic size, of the original leopard image are `1244px` wide by `416px` tall, with an {{glossary("aspect ratio")}} of `3:1`.
+We include an {{htmlelement("img")}} element and a [`range`](/en-US/docs/Web/HTML/Reference/Elements/input/range) {{htmlelement("input")}} element, with an associated {{htmlelement("label")}}. The natural dimensions, or intrinsic size, of the original leopard image are `1244px` wide by `416px` tall, with an {{glossary("aspect ratio")}} of `3:1`.
 
 ```html
 <img
@@ -128,8 +128,8 @@ We can create a panning effect by changing the coordinates of the view box windo
 <p>
   <label for="position">Left offset: </label>
   <input type="range" id="position" min="0" max="900" value="450" />
-  <output>
 </p>
+<output></output>
 ```
 
 ```css hidden

files/en-us/web/css/dashed-function/index.md

@@ -6,7 +6,7 @@ browser-compat: css.types.dashed-function
 sidebar: cssref
 ---
 
-The **`<dashed-function>`** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents the syntax used to call [CSS custom functions](/en-US/docs/Web/CSS/CSS_custom_functions_and_mixins/Using_custom_functions), which are defined using the {{cssxref("@function")}} at-rule.
+The **`<dashed-function>`** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_values_and_units/CSS_data_types) represents the syntax used to call [CSS custom functions](/en-US/docs/Web/CSS/CSS_custom_functions_and_mixins/Using_custom_functions), which are defined using the {{cssxref("@function")}} at-rule.
 
 ## Syntax
 

files/en-us/web/css/object-view-box/index.md

@@ -47,7 +47,7 @@ object-view-box: none;
 #example-element {
   height: 100%;
   width: 100%;
-  border: 2px dotted #888;
+  border: 2px dotted #888888;
 }
 
 @supports not (object-view-box: none) {
@@ -88,7 +88,7 @@ object-view-box: unset;
 - `none`
   - : The element does not have a view box. This is the default.
 
-- [`<basic-shape-rect>`](/en-US/docs/Web/CSS/basic-shape#basic-shape-rect)
+- [`<basic-shape-rect>`](/en-US/docs/Web/CSS/basic-shape#syntax_for_rectangles_basic-shape-rect)
   - : A {{cssxref("basic-shape/inset","inset()")}}, {{cssxref("basic-shape/xywh","xywh()")}}, or {{cssxref("basic-shape/rect","rect()")}} function specifying a view box for an element with natural dimensions (replaced elements). Resolves to `none` otherwise.
 
 ## Description
@@ -219,7 +219,7 @@ This example demonstrates using the `object-view-box` property to zoom a section
 
 #### HTML
 
-We include an {{htmlelement("img")}} element and a [`range`](Web/HTML/Reference/Elements/input/range) {{htmlelement("input")}} element, with an associated {{htmlelement("label")}}. The natural dimensions, or intrinsic size, of the original leopard image are `1244px` wide by `416px` tall, with an {{glossary("aspect ratio")}} of `3:1`.
+We include an {{htmlelement("img")}} element and a [`range`](/en-US/docs/Web/HTML/Reference/Elements/input/range) {{htmlelement("input")}} element, with an associated {{htmlelement("label")}}. The natural dimensions, or intrinsic size, of the original leopard image are `1244px` wide by `416px` tall, with an {{glossary("aspect ratio")}} of `3:1`.
 
 ```html
 <img