Fix external images flaws in Web/CSS (#2627)

files/en-us/web/css/_doublecolon_-moz-range-progress/index.html

@@ -1,9 +1,9 @@
 ---
 title: '::-moz-range-progress'
-slug: 'Web/CSS/::-moz-range-progress'
+slug: Web/CSS/::-moz-range-progress
 tags:
   - CSS
-  - 'CSS:Mozilla Extensions'
+  - CSS:Mozilla Extensions
   - Non-standard
   - Pseudo-element
   - Reference
@@ -42,7 +42,7 @@ <h3 id="Result">Result</h3>
 
 <p>A progress bar using this style might look something like this:</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/12041/Screen%20Shot%202015-12-04%20at%2020.14.48.png"></p>
+<p><img alt="" src="screen_shot_2015-12-04_at_20.14.48.png"></p>
 
 <h2 id="Specifications">Specifications</h2>
 

files/en-us/web/css/_doublecolon_-moz-range-thumb/index.html

@@ -1,9 +1,9 @@
 ---
 title: '::-moz-range-thumb'
-slug: 'Web/CSS/::-moz-range-thumb'
+slug: Web/CSS/::-moz-range-thumb
 tags:
   - CSS
-  - 'CSS:Mozilla Extensions'
+  - CSS:Mozilla Extensions
   - Non-standard
   - Pseudo-element
   - Reference
@@ -41,7 +41,7 @@ <h3 id="Result">Result</h3>
 
 <p>A progress bar using this style might look something like this:</p>
 
-<p><img alt="The thumb of the &lt;input type=right> styled in green" src="https://mdn.mozillademos.org/files/12027/Screen%20Shot%202015-12-04%20at%2013.30.08.png"></p>
+<p><img alt="The thumb of the &lt;input type=right> styled in green" src="screen_shot_2015-12-04_at_13.30.08.png"></p>
 
 <h2 id="Specifications">Specifications</h2>
 

files/en-us/web/css/_doublecolon_-moz-range-track/index.html

@@ -1,9 +1,9 @@
 ---
 title: '::-moz-range-track'
-slug: 'Web/CSS/::-moz-range-track'
+slug: Web/CSS/::-moz-range-track
 tags:
   - CSS
-  - 'CSS:Mozilla Extensions'
+  - CSS:Mozilla Extensions
   - Non-standard
   - Pseudo-element
   - Reference
@@ -41,7 +41,7 @@ <h3 id="Result">Result</h3>
 
 <p>A progress bar using this style might look something like this:</p>
 
-<p><img alt="A range with the track green." src="https://mdn.mozillademos.org/files/11999/Screen%20Shot%202015-12-04%20at%2010.14.34.png"></p>
+<p><img alt="A range with the track green." src="screen_shot_2015-12-04_at_10.14.34.png"></p>
 
 <h2 id="Specifications">Specifications</h2>
 

files/en-us/web/css/layout_cookbook/breadcrumb_navigation/index.html

@@ -13,7 +13,7 @@
 
 <p class="summary">Breadcrumb navigation helps the user to understand their location in the website by providing a breadcrumb trail back to the start page.</p>
 
-<p><img alt="Links displayed inline with separators" src="https://mdn.mozillademos.org/files/16228/breadcrumb-navigation.png" style="height: 108px; width: 1268px;"></p>
+<p><img alt="Links displayed inline with separators" src="breadcrumb-navigation.png"></p>
 
 <h2 id="Requirements">Requirements</h2>
 

files/en-us/web/css/layout_cookbook/media_objects/index.html

@@ -15,7 +15,7 @@
 
 <p class="summary">The <em>Media Object</em> is a pattern we see all over the web. <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">Named by Nicole Sullivan</a> it refers to a two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet.</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/16112/media-object.png"></p>
+<p><img alt="" src="media-object.png"></p>
 
 <h2 id="Requirements">Requirements</h2>
 

files/en-us/web/css/layout_cookbook/pagination/index.html

@@ -13,7 +13,7 @@
 
 <p class="summary">This cookbook pattern demonstrates the navigation pattern used to display pagination, where the user can move between pages of content such as search results.</p>
 
-<p><img alt="Links to sets of pages in a paged listing" src="https://mdn.mozillademos.org/files/16279/pagination.png" style="height: 192px; width: 950px;"></p>
+<p><img alt="Links to sets of pages in a paged listing" src="pagination.png"></p>
 
 <h2 id="Requirements">Requirements</h2>
 

files/en-us/web/css/layout_cookbook/split_navigation/index.html

@@ -13,7 +13,7 @@
 
 <p class="summary">A navigation pattern where one or more elements are separated from the rest of the navigation items.</p>
 
-<p><img alt="Items separated into two groups." src="https://mdn.mozillademos.org/files/16227/split-navigation.png" style="height: 145px; width: 1272px;"></p>
+<p><img alt="Items separated into two groups." src="split-navigation.png"></p>
 
 <h2 id="Requirements">Requirements</h2>
 

files/en-us/web/css/mask-border/index.html

@@ -8,7 +8,7 @@
   - Experimental
   - NeedsCompatTable
   - Reference
-  - 'recipe:css-shorthand-property'
+  - recipe:css-shorthand-property
 ---
 <div>{{CSSRef}}{{SeeCompatTable}}</div>
 
@@ -73,7 +73,7 @@ <h3 id="Setting_a_bitmap-based_mask_border">Setting a bitmap-based mask border</
 
 <p>In this example, we will mask an element's border with a diamond pattern. The source for the mask is a ".png" file of 90 by 90 pixels, with three diamonds going vertically and horizontally:</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15836/mask-border-diamonds.png" style="height: 90px; width: 90px;"></p>
+<p><img alt="" src="mask-border-diamonds.png"></p>
 
 <h4 id="HTML">HTML</h4>
 

files/en-us/web/css/position_value/index.html

@@ -19,7 +19,7 @@
 
 <h2 id="Syntax">Syntax</h2>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/12215/position_type.png" style="float: left; height: 230px; width: 362px;">The <code>&lt;position&gt;</code> data type is specified with one or two keywords, with optional offsets.</p>
+<p><img alt="" src="position_type.png" style="float: left;">The <code>&lt;position&gt;</code> data type is specified with one or two keywords, with optional offsets.</p>
 
 <p>The keyword values are <code>center</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. Each keyword represents either an edge of the element's box or the center line between two edges. Depending on the context, <code>center</code> represents either the center between the left and right edges, or the center between the top and bottom edges.</p>
 
@@ -60,7 +60,7 @@ <h3 id="Formal_syntax">Formal syntax</h3>
 
 <h2 id="Interpolation">Interpolation</h2>
 
-<p>When animated, a point's abscissa and ordinate values are interpolated independently. However, because the speed of the interpolation is determined by a single <a href="/en-US/docs/Web/CSS/single-transition-timing-function">timing function</a> for both coordinates, the point will move in a straight line.</p>
+<p>When animated, a point's abscissa and ordinate values are interpolated independently. However, because the speed of the interpolation is determined by a single <a href="/en-US/docs/Web/CSS/easing-function">timing function</a> for both coordinates, the point will move in a straight line.</p>
 
 <h2 id="Examples">Examples</h2>
 
@@ -126,8 +126,8 @@ <h2 id="See_also">See also</h2>
 
 <ul>
  <li><a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS Values and Units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS Values and Units introduction</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS Values and Units introduction</a></li>
  <li>{{cssxref("background-position")}}</li>
- <li>{{cssxref("radial-gradient")}}</li>
- <li>{{cssxref("conic-gradient", "conic-gradient()")}}</li>
+ <li>{{cssxref("radial-gradient()")}}</li>
+ <li>{{cssxref("conic-gradient()", "conic-gradient()")}}</li>
 </ul>

files/en-us/web/css/text-decoration-skip/index.html

@@ -9,7 +9,7 @@
   - Layout
   - Reference
   - Web
-  - 'recipe:css-property'
+  - recipe:css-property
 ---
 <div>{{CSSRef}}</div>
 
@@ -54,7 +54,7 @@ <h3 id="Values">Values</h3>
  <dd>The same as <code>spaces</code>, except that only trailing spaces are skipped.</dd>
  <dt><code>edges</code></dt>
  <dd>The start and end of the text decoration is inset slightly (e.g., by half of the line thickness) from the content edge of the decorating box. Thus, adjacent elements receive separate underlines. (This is important in Chinese, where underlining is a form of punctuation.)</dd>
- <dd><img alt='An example of "text-decoration-skip: edges;".' src="https://mdn.mozillademos.org/files/13466/decoration-skip-edges.png"></dd>
+ <dd><img alt='An example of "text-decoration-skip: edges;".' src="decoration-skip-edges.png"></dd>
  <dt><code>box-decoration</code></dt>
  <dd>The text decoration is skipped over the box's margin, border, and padding areas. This only has an effect on decorations imposed by an ancestor; a <em>decorating box</em> never draws over its own box decoration.</dd>
 </dl>