docs: improve example styling

cfisher-scottlogic · Apr 30, 2020 · e23f65b · e23f65b
1 parent eba32b1
commit e23f65b
Show file tree

Hide file tree

Showing 98 changed files with 80 additions and 849 deletions.
diff --git a/examples/annotation-canvas-band/index.html b/examples/annotation-canvas-band/index.html
@@ -10,16 +10,6 @@
     <script src="../index.js"></script>
     <link rel="stylesheet" href="../index.css">
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-    <style>
-        body {
-            display: flex;
-            margin: 0;
-        }
-
-        body>* {
-            flex: auto;
-        }
-    </style>
 </head>
 
 <body>

diff --git a/examples/annotation-canvas-crosshair/index.html b/examples/annotation-canvas-crosshair/index.html
@@ -10,16 +10,6 @@
     <script src="../index.js"></script>
     <link rel="stylesheet" href="../index.css">
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-    <style>
-        body {
-            display: flex;
-            margin: 0;
-        }
-
-        body>* {
-            flex: auto;
-        }
-    </style>
 </head>
 
 <body>

diff --git a/examples/annotation-canvas-gridline/index.html b/examples/annotation-canvas-gridline/index.html
@@ -10,16 +10,6 @@
     <script src="../index.js"></script>
     <link rel="stylesheet" href="../index.css">
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-    <style>
-        body {
-            display: flex;
-            margin: 0;
-        }
-
-        body>* {
-            flex: auto;
-        }
-    </style>
 </head>
 
 <body>

diff --git a/examples/annotation-canvas-line/index.html b/examples/annotation-canvas-line/index.html
@@ -10,16 +10,6 @@
     <script src="../index.js"></script>
     <link rel="stylesheet" href="../index.css">
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-    <style>
-        body {
-            display: flex;
-            margin: 0;
-        }
-
-        body>* {
-            flex: auto;
-        }
-    </style>
 </head>
 
 <body>

diff --git a/examples/annotation-gridline-transition/index.html b/examples/annotation-gridline-transition/index.html
@@ -10,15 +10,6 @@
     <script src="../index.js"></script>
     <link rel="stylesheet" href="../index.css">
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-    <style>
-        body {
-            display: flex;
-        }
-
-        body>* {
-            flex: auto;
-        }
-    </style>
 </head>
 
 <body>

diff --git a/examples/annotation-svg-band/index.html b/examples/annotation-svg-band/index.html
@@ -11,15 +11,6 @@
     <link rel="stylesheet" href="../index.css">
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
     <style>
-        body {
-            display: flex;
-            margin: 0;
-        }
-
-        body>* {
-            flex: auto;
-        }
-
         g.annotation-band>path {
             fill-opacity: 0.1;
         }

diff --git a/examples/annotation-svg-crosshair/index.html b/examples/annotation-svg-crosshair/index.html
@@ -11,15 +11,6 @@
     <link rel="stylesheet" href="../index.css">
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
     <style>
-        body {
-            display: flex;
-            margin: 0;
-        }
-
-        body>* {
-            flex: auto;
-        }
-
         g.annotation-crosshair g.annotation-line>line,
         g.annotation-crosshair g.point>path {
             fill: none;

diff --git a/examples/annotation-svg-gridline/index.html b/examples/annotation-svg-gridline/index.html
@@ -10,16 +10,6 @@
     <script src="../index.js"></script>
     <link rel="stylesheet" href="../index.css">
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-    <style>
-        body {
-            display: flex;
-            margin: 0;
-        }
-
-        body>* {
-            flex: auto;
-        }
-    </style>
 </head>
 
 <body>

diff --git a/examples/annotation-svg-line/index.html b/examples/annotation-svg-line/index.html
@@ -11,15 +11,6 @@
     <link rel="stylesheet" href="../index.css">
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
     <style>
-        body {
-            display: flex;
-            margin: 0;
-        }
-
-        body>* {
-            flex: auto;
-        }
-
         g.annotation-line.horizontal>line {
             stroke: #c60;
         }

diff --git a/examples/axis-band-scale/index.html b/examples/axis-band-scale/index.html
@@ -10,15 +10,6 @@
     <script src="../index.js"></script>
     <link rel="stylesheet" href="../index.css">
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-    <style>
-        body {
-            display: flex;
-        }
-
-        body>* {
-            flex: auto;
-        }
-    </style>
 </head>
 
 <body>

diff --git a/examples/axis-center/index.html b/examples/axis-center/index.html
@@ -10,11 +10,6 @@
     <script src="../index.js"></script>
     <link rel="stylesheet" href="../index.css">
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-    <style>
-        d3fc-svg {
-            height: 50px;
-        }
-    </style>
 </head>
 
 <body>

diff --git a/examples/axis-color/index.html b/examples/axis-color/index.html
@@ -10,15 +10,6 @@
     <script src="../index.js"></script>
     <link rel="stylesheet" href="../index.css">
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-    <style>
-        body {
-            display: flex;
-        }
-
-        body>* {
-            flex: auto;
-        }
-    </style>
 </head>
 
 <body>

diff --git a/examples/axis-label-offset/index.html b/examples/axis-label-offset/index.html
@@ -11,14 +11,7 @@
     <link rel="stylesheet" href="../index.css">
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
     <style>
-        body {
-            display: flex;
-        }
-
         .container {
-            flex: 1;
-            margin: 0 5px;
-            overflow: hidden;
             display: grid;
             grid-template-columns: 160px 1fr 160px;
             grid-template-rows: 80px 1fr 80px;

diff --git a/examples/axis-offset/index.html b/examples/axis-offset/index.html
@@ -10,15 +10,6 @@
     <script src="../index.js"></script>
     <link rel="stylesheet" href="../index.css">
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-    <style>
-        body {
-            display: flex;
-        }
-
-        body>* {
-            flex: auto;
-        }
-    </style>
 </head>
 
 <body>

diff --git a/examples/axis-rotate-auto/index.html b/examples/axis-rotate-auto/index.html
@@ -11,18 +11,12 @@
     <link rel="stylesheet" href="../index.css">
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
     <style>
-        body {
-            display: flex;
-        }
-
         .side-by-side {
-            flex: 1 1;
             display: flex;
         }
 
         .ordinal-group {
-            flex: 1 1;
-            margin: 0 5px;
+            flex: auto;
             display: grid;
             grid-template-columns: minmax(80px, max-content) 1fr minmax(80px, max-content);
             grid-template-rows: minmax(80px, max-content) 1fr minmax(80px, max-content);
@@ -31,10 +25,8 @@
         .label {
             grid-column: 2;
             grid-row: 2;
-            font-size: 1.2em;
-            font-weight: bold;
-            text-align: center;
-            margin-top: 20px;
+            justify-self: center;
+            align-self: center;
         }
 
         .top {

diff --git a/examples/axis-rotate-decorate/index.html b/examples/axis-rotate-decorate/index.html
@@ -10,15 +10,6 @@
     <script src="../index.js"></script>
     <link rel="stylesheet" href="../index.css">
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-    <style>
-        body {
-            display: flex;
-        }
-
-        body>* {
-            flex: auto;
-        }
-    </style>
 </head>
 
 <body>

diff --git a/examples/axis-tick-arguments/index.html b/examples/axis-tick-arguments/index.html
@@ -10,15 +10,6 @@
     <script src="../index.js"></script>
     <link rel="stylesheet" href="../index.css">
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-    <style>
-        body {
-            display: flex;
-        }
-
-        body>* {
-            flex: auto;
-        }
-    </style>
 </head>
 
 <body>

diff --git a/examples/axis-transition/index.html b/examples/axis-transition/index.html
@@ -10,15 +10,6 @@
     <script src="../index.js"></script>
     <link rel="stylesheet" href="../index.css">
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-    <style>
-        body {
-            display: flex;
-        }
-
-        body>* {
-            flex: auto;
-        }
-    </style>
 </head>
 
 <body>

diff --git a/examples/brush-navigator/index.html b/examples/brush-navigator/index.html
@@ -12,17 +12,7 @@
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
     <style>
         body {
-            display: flex;
             flex-direction: column;
-            margin: 0;
-        }
-
-        body>div {
-            display: flex;
-        }
-
-        d3fc-group.cartesian-chart {
-            height: auto;
         }
 
         #main-chart {

diff --git a/examples/brush-zoom/index.html b/examples/brush-zoom/index.html
@@ -11,15 +11,6 @@
     <link rel="stylesheet" href="../index.css">
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
     <style>
-        body {
-            display: flex;
-            margin: 0;
-        }
-
-        body>* {
-            flex: auto;
-        }
-
         .point {
             stroke-width: 0;
         }

diff --git a/examples/bubble-chart/index.html b/examples/bubble-chart/index.html
@@ -11,22 +11,13 @@
     <link rel="stylesheet" href="../index.css">
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
     <style>
-        body {
-            display: flex;
-            margin: 0;
-        }
-
-        body>* {
-            flex: auto;
-        }
-
         .legend {
             grid-column: 3;
             grid-row: 3;
             align-self: end;
             justify-self: end;
-            width: 220px;
-            height: 124px;
+            width: 14em;
+            height: 8em;
         }
 
         .point {

diff --git a/examples/building-a-chart/index.html b/examples/building-a-chart/index.html
@@ -10,16 +10,6 @@
     <script src="../index.js"></script>
     <link rel="stylesheet" href="../index.css">
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-    <style>
-        body {
-            display: flex;
-            margin: 0;
-        }
-
-        body>* {
-            flex: auto;
-        }
-    </style>
 </head>
 
 <body>