[css-values-5][editorial] Move an example further up in the random() section.

Author: tabatkins

css-values-5/Overview.bs

@@ -2456,6 +2456,80 @@ Generating a Random Numeric Value: the ''random()'' function</h3>
 	<pre class=prod>
 	&lt;random()> = random( <<random-key>>? , <<calc-sum>>, <<calc-sum>>, <<calc-sum>>? )
 	</pre>
+	
+	<div class=example>
+		Imagine you have several ''.box'' elements,
+		all styled with the following CSS:
+
+		<pre highlight=css>
+		.box {
+			width: random(???, 100px, 200px);
+			height: random(???, 100px, 200px);
+			border: thin solid;
+		}
+		</pre>
+
+		Depending on what <<random-key>> you provide
+		in place of the ''???'',
+		you'll get significantly different behavior for the elements:
+
+		: ''auto''/omitted, <b>maximum random</b>: <span class="box-example auto"><b></b><b></b><b></b><b></b></span>
+		::
+			Each property gets a different value,
+			and it's different per element too,
+			so you get a bunch of <strong>different</strong> random <strong>rectangles</strong>.
+
+		: ''--foo'', <b>shared by name</b>: <span class="box-example name"><b></b><b></b><b></b><b></b></span>
+		::
+			Both properties use the same value,
+			and every element shares that value,
+			so you get a bunch of <strong>identical</strong> random <strong>squares</strong>.
+
+		: ''element-scoped'', <b>scoped per element</b>: <span class="box-example element-scoped"><b></b><b></b><b></b><b></b></span>
+		::
+			Both properties use the same value,
+			but each element gets a different value,
+			so you get a bunch of <strong>different</strong> random <strong>squares</strong>.
+
+		: ''property-scoped'', <b>scoped per property</b>: <span class="box-example property-scoped"><b></b><b></b><b></b><b></b></span>
+		::
+			Each property gets a different value,
+			but each element shares that value,
+			so you get a bunch of <strong>identical</strong> random <strong>rectangles</strong>.
+
+		<style>
+		.box-example {
+		 white-space: pre;
+		 > b {
+		  border: 2px solid;
+		  display: inline-block;
+		  margin: 0 .2em;
+		 }
+		 &.name > b {
+		  aspect-ratio: 1/1;
+		  width: .5em;
+		 }
+		 &.auto > b {
+		  &:nth-child(1) { aspect-ratio: 3/1; height: .5em;}
+		  &:nth-child(2) { aspect-ratio: 1/2; width: .5em;}
+		  &:nth-child(3) { aspect-ratio: 3/2; height: .5em;}
+		  &:nth-child(4) { aspect-ratio: 1/3; width: .5em;}
+		 }
+		 &.element-scoped > b {
+		  aspect-ratio: 1;
+		  &:nth-child(1) { width: .5em;}
+		  &:nth-child(2) { width: .2em;}
+		  &:nth-child(3) { width: .8em;}
+		  &:nth-child(4) { width: .4em;}
+		 }
+		 &.property-scoped > b {
+		  aspect-ratio: 2/1;
+		  height: .5em;
+		 }
+		}
+		</style>
+	</div>
+
 
 	See [[#random-evaluation]] and [[#random-caching]]
 	for details on how the function is evaluated.
@@ -2856,79 +2930,6 @@ Sharing (Or Not) Random Values: the <<random-key>> value</h3>
 			but otherwise will never show up in an element's styles.
 	</dl>
 
-	<div class=example>
-		Imagine you have several ''.box'' elements,
-		all styled with the following CSS:
-
-		<pre highlight=css>
-		.box {
-			width: random(???, 100px, 200px);
-			height: random(???, 100px, 200px);
-			border: thin solid;
-		}
-		</pre>
-
-		Depending on what <<random-key>> you provide
-		in place of the ''???'',
-		you'll get significantly different behavior for the elements:
-
-		: ''auto''/omitted, <b>maximum random</b>: <span class="box-example auto"><b></b><b></b><b></b><b></b></span>
-		::
-			Each property gets a different value,
-			and it's different per element too,
-			so you get a bunch of <strong>different</strong> random <strong>rectangles</strong>.
-
-		: ''--foo'', <b>shared by name</b>: <span class="box-example name"><b></b><b></b><b></b><b></b></span>
-		::
-			Both properties use the same value,
-			and every element shares that value,
-			so you get a bunch of <strong>identical</strong> random <strong>squares</strong>.
-
-		: ''element-scoped'', <b>scoped per element</b>: <span class="box-example element-scoped"><b></b><b></b><b></b><b></b></span>
-		::
-			Both properties use the same value,
-			but each element gets a different value,
-			so you get a bunch of <strong>different</strong> random <strong>squares</strong>.
-
-		: ''property-scoped'', <b>scoped per property</b>: <span class="box-example property-scoped"><b></b><b></b><b></b><b></b></span>
-		::
-			Each property gets a different value,
-			but each element shares that value,
-			so you get a bunch of <strong>identical</strong> random <strong>rectangles</strong>.
-
-		<style>
-		.box-example {
-		 white-space: pre;
-		 > b {
-		  border: 2px solid;
-		  display: inline-block;
-		  margin: 0 .2em;
-		 }
-		 &.name > b {
-		  aspect-ratio: 1/1;
-		  width: .5em;
-		 }
-		 &.auto > b {
-		  &:nth-child(1) { aspect-ratio: 3/1; height: .5em;}
-		  &:nth-child(2) { aspect-ratio: 1/2; width: .5em;}
-		  &:nth-child(3) { aspect-ratio: 3/2; height: .5em;}
-		  &:nth-child(4) { aspect-ratio: 1/3; width: .5em;}
-		 }
-		 &.element-scoped > b {
-		  aspect-ratio: 1;
-		  &:nth-child(1) { width: .5em;}
-		  &:nth-child(2) { width: .2em;}
-		  &:nth-child(3) { width: .8em;}
-		  &:nth-child(4) { width: .4em;}
-		 }
-		 &.property-scoped > b {
-		  aspect-ratio: 2/1;
-		  height: .5em;
-		 }
-		}
-		</style>
-	</div>
-
 	<div class=example>
 		Note that only the [=random cache name=]
 		controls whether two [=random functions=] have the same value or not;