Major CSS cleanup for CSS graphs:

- Use CSS variables to create a form of inheritance
- Replace unit values with percentage values
- Position labels based on position of origin
- Parameterize the number of minor axes

lessons/Algebra2/exponential2-building-models/langs/en-us/pages/graphing-models.adoc

@@ -11,11 +11,22 @@
 /* Cut the padding under each section */
 .sect1 { padding: 0 !important; }
 
-.graph td {
-  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px !important;
-  background-position: -3px 74px !important;
-  height: 1.5in !important;
-  width: 2in !important;
+/*
+  "Graph" tables provide a pure-CSS solution for all coordinate planes.
+
+  They rely on a set up CSS variables, with reasonable defaults:
+    --width and --height determine the size of plane. Defaults to 3in x 3x.
+    --min-gap determines the minimum space between graphs. Defaults to 20px.
+
+    --top_pct and --left_pct determine the origin's position. Defaults to (50%, 50%).
+    --minors determines how many "minor axes" (incl the one behind major). Defaults to 7.
+
+    --x_label defaults to 'x'
+    --y_label defaults to 'y'
+*/
+.graph {
+  --width:   2.0in;
+  --height:  1.5in;
 }
 </style>
 ++++

lessons/Algebra2/logarithmic2-building-models/langs/en-us/pages/graphing-models.adoc

@@ -31,14 +31,26 @@ body:not(.LessonPlan, .narrativepage) p { line-height: 1; }
 /* Cut the padding under each section */
 .sect1 { padding: 0 !important; }
 
-.graph td {
-  background-size: 100px 200px, 200px 100px, 20px 20px, 20px 20px !important;
-  background-position: 25px -100px !important;
-  height: 1.4in !important;
-  width: 2in !important;
+/*
+  "Graph" tables provide a pure-CSS solution for all coordinate planes.
+
+  They rely on a set up CSS variables, with reasonable defaults:
+    --width and --height determine the size of plane. Defaults to 3in x 3x.
+    --min-gap determines the minimum space between graphs. Defaults to 20px.
+
+    --top_pct and --left_pct determine the origin's position. Defaults to (50%, 50%).
+    --minors determines how many "minor axes" (incl the one behind major). Defaults to 7.
+
+    --x_label defaults to 'x'
+    --y_label defaults to 'y'
+*/
+.graph {
+  --width:    2.0in;
+  --height:   1.4in;
+  --left_pct: 0.10;
+  --top_pct:  0.85;
+  --minors:   8.0;
 }
-.graph td::before { top: 1em !important; left: 5% !important; }
-.graph td::after { top: 75% !important; }
 </style>
 ++++
 

lessons/Algebra2/periodic2-building-models/langs/en-us/pages/graphing-models-a.adoc

@@ -2,15 +2,27 @@
 
 ++++
 <style>
-/* Use custom sizes and axes labels for graph cells */
+/*
+  "Graph" tables provide a pure-CSS solution for all coordinate planes.
+
+  They rely on a set up CSS variables, with reasonable defaults:
+    --width and --height determine the size of plane. Defaults to 3in x 3x.
+    --min-gap determines the minimum space between graphs. Defaults to 20px.
+
+    --top_pct and --left_pct determine the origin's position. Defaults to (50%, 50%).
+    --minors determines how many "minor axes" (incl the one behind major). Defaults to 7.
+
+    --x_label defaults to 'x'
+    --y_label defaults to 'y'
+*/
 .graph td {
-  width: 3.2in;
-  height: 3in;
-  background-position: 40px 250px !important;
+  --width:    3.2in;
+  --height:   3.0in;
+  --left_pct: 0.08;
+  --top_pct:  0.92;
+  --x_label: 'altitude';
+  --y_label: 'time';
 }
-
-.graph td::before { left:  3% !important; top: 40% !important; content: 'altitude' !important;}
-.graph td::after  { left: 50% !important; top: 87% !important; content: 'time' !important; }
 </style>
 ++++
 

lessons/Algebra2/periodic2-building-models/langs/en-us/pages/graphing-models-b.adoc

@@ -2,15 +2,27 @@
 
 ++++
 <style>
-/* Use custom sizes and axes labels for graph cells */
+/*
+  "Graph" tables provide a pure-CSS solution for all coordinate planes.
+
+  They rely on a set up CSS variables, with reasonable defaults:
+    --width and --height determine the size of plane. Defaults to 3in x 3x.
+    --min-gap determines the minimum space between graphs. Defaults to 20px.
+
+    --top_pct and --left_pct determine the origin's position. Defaults to (50%, 50%).
+    --minors determines how many "minor axes" (incl the one behind major). Defaults to 7.
+
+    --x_label defaults to 'x'
+    --y_label defaults to 'y'
+*/
 .graph td {
-  width: 3.2in;
-  height: 3in;
-  background-position: 40px 250px !important;
+  --width:    3.2in;
+  --height:   3.0in;
+  --left_pct: 0.08;
+  --top_pct:  0.92;
+  --x_label: 'altitude';
+  --y_label: 'time';
 }
-
-.graph td::before { left:  3% !important; top: 40% !important; content: 'altitude' !important;}
-.graph td::after  { left: 50% !important; top: 87% !important; content: 'time' !important; }
 </style>
 ++++
 

lessons/Algebra2/periodic2-building-models/langs/en-us/pages/graphing-models-h.adoc

@@ -2,15 +2,27 @@
 
 ++++
 <style>
-/* Use custom sizes and axes labels for graph cells */
+/*
+  "Graph" tables provide a pure-CSS solution for all coordinate planes.
+
+  They rely on a set up CSS variables, with reasonable defaults:
+    --width and --height determine the size of plane. Defaults to 3in x 3x.
+    --min-gap determines the minimum space between graphs. Defaults to 20px.
+
+    --top_pct and --left_pct determine the origin's position. Defaults to (50%, 50%).
+    --minors determines how many "minor axes" (incl the one behind major). Defaults to 7.
+
+    --x_label defaults to 'x'
+    --y_label defaults to 'y'
+*/
 .graph td {
-  width: 3.2in;
-  height: 3in;
-  background-position: 40px 250px !important;
+  --width:    3.2in;
+  --height:   3.0in;
+  --left_pct: 0.08;
+  --top_pct:  0.92;
+  --x_label: 'altitude';
+  --y_label: 'time';
 }
-
-.graph td::before { left:  3% !important; top: 40% !important; content: 'altitude' !important;}
-.graph td::after  { left: 50% !important; top: 87% !important; content: 'time' !important; }
 </style>
 ++++
 

lessons/Algebra2/quadratic2-building-models/langs/en-us/pages/graphing-models.adoc

@@ -5,26 +5,29 @@
 .autonum { font-weight: bold; padding-top: 2px !important; }
 .autonum:after { content: ')' !important; }
 
-/* Custom graph settings and axis labels */
-.graph td {
-	background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px !important;
-	background-position: -3px 66px !important;
-	height: 1.5in !important;
-	width: 2in !important;
-	background-image:
-		linear-gradient(270deg, lightblue 2px, transparent 2px),
-		linear-gradient(lightblue 2px, transparent 2px)
-		!important;
-			}
-.graphs td {
-	background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px !important;
-	background-position: -30px 74px !important;
-	height: 1.5in !important;
-	width: 1.5in !important;
-	background-image:
-		linear-gradient(270deg, lightblue 2px, transparent 2px),
-		linear-gradient(lightblue 2px, transparent 2px)
-		!important;		
+/*
+  "Graph" tables provide a pure-CSS solution for all coordinate planes.
+
+  They rely on a set up CSS variables, with reasonable defaults:
+    --width and --height determine the size of plane. Defaults to 3in x 3x.
+    --min-gap determines the minimum space between graphs. Defaults to 20px.
+
+    --top_pct and --left_pct determine the origin's position. Defaults to (50%, 50%).
+    --minors determines how many "minor axes" (incl the one behind major). Defaults to 7.
+
+      --x_label defaults to 'x'
+      --y_label defaults to 'y'
+*/
+.magnitude.graph {
+	--width:   2.0in;
+	--height:  1.5in;
+}
+
+.translation.graph {
+	--min-gap: 5px;
+	--minors:  5.9;
+	--width:   1.75in;
+	--height:  1.50in;
 }
 </style>
 ++++
@@ -41,7 +44,7 @@ This second parabola is written in Vertex Form: @math{f(x) = a(x - h)^2 + k}. Ea
 @n Make a sketch of the original graph you see (@math{a = 1}, @math{h = 0}, @math{k = 0}). Then try changing the value of @math{a} to 10, 0.1, 0, -10 and -2, graphing each parabola in the squares below. *Label the vertex "V" and any roots with "R"!*
 
 
-[.FillVerticalSpace.graph, cols="1,1,1", frame="none",grid="none"]
+[.FillVerticalSpace.magnitude.graph, cols="1,1,1", frame="none",grid="none"]
 |===
 | @math{a = 1}	| @math{a = 10}	 | @math{a = 0.1}
 | @math{a = 0}	| @math{a = -10} | @math{a = -2}
@@ -61,7 +64,7 @@ This second parabola is written in Vertex Form: @math{f(x) = a(x - h)^2 + k}. Ea
 | Set @math{h} back to 0. Change the value of @math{k} to -5 and 5, graphing each parabola in the squares below. 
 |===
 
-[.FillVerticalSpace.graphs,cols="1a,1a,1a,1a", frame="none", stripes="none", grid="none"]
+[.FillVerticalSpace.translation.graph,cols="1a,1a,1a,1a", frame="none", stripes="none", grid="none"]
 |===
 |@math{h=-5}	| @math{h=5} 	|@math{k=-5}	| @math{k=5} 	
 |===

lib/shared.less

@@ -707,43 +707,61 @@ body.workbookpage {
   }
 
   /* 
-    "Graph" tables use CSS for everything. Each page will likely
-    need to provide its own rules for background position, width,
-    height, and axes -- but sensible defaults are provided here.
+    "Graph" tables provide a pure-CSS solution for all coordinate planes.
+
+    They rely on a set up CSS variables, with reasonable defaults:
+      --width and --height determine the size of plane. Defaults to 3in x 3x.
+      --min-gap determines the minimum space between graphs. Defaults to 20px.
+
+      --top_pct and --left_pct determine the origin's position. Defaults to (50%, 50%).
+      --minors determines how many "minor axes" (incl the one behind major). Defaults to 7.
+
+      --x_label defaults to 'x'
+      --y_label defaults to 'y'
   */
   table.graph {
-    grid-gap: 20px; 
+    grid-gap: var(--min-gap, 20px); 
     margin-top: 5px;
-    td p.tableblock { position: absolute; background: white; }
+
+    /* Location and style of the coefficient value */
+    td p.tableblock { 
+      top:        3px;
+      right:      3px;
+      position:   absolute; 
+      background: white; 
+    }
+
     td {
       border: none !important;
       background-image:
         linear-gradient(lightblue 2px, transparent 2px),
         linear-gradient(270deg, lightblue 2px, transparent 2px),
         linear-gradient(rgba(150, 150, 150, .3) 1px, transparent 0px),
         linear-gradient(270deg, rgba(150, 150, 150, .3) 1px, transparent 1px);
-      background-size: 300px 300px, 300px 300px, 50px 50px, 50px 50px;
-      background-position: -150px 135px;
-      width: 3in;
-      height: 3in;
+      background-size: 
+        var(--width, 3in) var(--width, 3in), 
+        var(--width, 3in) var(--width, 3in), 
+        calc(var(--width, 3in) / var(--minors, 7)) calc(var(--width, 3in) / var(--minors, 7)),
+        calc(var(--width, 3in) / var(--minors, 7)) calc(var(--width, 3in) / var(--minors, 7));
+      background-position: 
+        calc(var(--width , 3in) * var(--left_pct, .50)) 
+        calc(var(--height, 3in) * var(--top_pct , .50));
+      width:  var(--width,  3in);
+      height: var(--height, 3in);
     }
     /* Add labels for axes */
     td::before, td::after { position: absolute; font-style: italic; }
 
+    td::after {
+      content: var(--x_label, 'x\0000A0\0000A0');
+      right:   1%;
+      top:     calc(var(--height , 3in) * var(--top_pct, .50));
+    }
     td::before {
-      content: 'y';
-      top:   0%;
-      left: 40%;
+      content: var(--y_label, '\0000A0\0000A0y');
+      left:    calc(var(--width , 3in) * (var(--left_pct, .50) - .08));
+      top:     2%;
       transform: rotate(270deg);
-        -webkit-transform:rotate(270deg);
-        -moz-transform:rotate(270deg);
-        -o-transform: rotate(270deg);
-        -ms-transform:rotate(270deg);
-    }
-    td::after {
-      content: 'x';
-      top:  50%;
-      right: 3%;
     }
   }