Update index.html

xishuz · Feb 28, 2022 · 354e681 · 354e681
1 parent 05dcf38
commit 354e681
Showing 1 changed file with 22 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -21,15 +21,24 @@
 
         .filler {
             text-align: center;
+            height: 10rem;
         }
 
         .filler h2 {
             font-family: 'Franklin Gothic Medium';
-            text-align: left;
-            font-size: 42px;
+            text-align: center;
+            font-size: 50px;
+            margin: 30px;
             margin: 15px auto;
         }
 
+        .filler h3 {
+            font-family: 'Franklin Gothic Medium';
+            text-align: center;
+            font-size: 42px;
+            margin: 15px auto;
+            color: gray;
+        }
 
         .filler p {
             font-family: 'Franklin Gothic Medium';
@@ -53,13 +62,13 @@
             max-width: 60rem;
             margin: 3rem auto;
             background-color:white;
-            padding: 1rem;
+            padding: 0rem;
             position: relative;
 
         }
 
         #scrolly-overlay .scrolly article {
-            padding: 0;
+            padding: 5;
             max-width: 30rem;
             margin: 0 auto;
             position: relative;
@@ -93,8 +102,8 @@
             width: 900px;
             height: 600px;
             background: white;
-            margin: 0;
-            top: 25vh;
+            margin: 3;
+            top: 30vh;
             left: 0;
         }
     </style>
@@ -103,7 +112,8 @@
 <body>
     <section class='filler'>
         <h2>Medicare Plan Type Percentage by Income Percentile</h2>
-        <h2>2009 vs. 2020</h2>
+        <h3>Start Scrolling to Find Out 2009 vs. 2020 Changes</h3>
+        <h3>↓</h3>
    </section>
 
     <section id='scrolly-overlay'>
@@ -143,7 +153,7 @@ <h2>2009 vs. 2020</h2>
     console.log({ d3 })
     var margin = { top: 20, right: 20, bottom: 30, left:0 },
         width = 900 - margin.left - margin.right,
-        height = 600 - margin.top - margin.bottom;
+        height = 500 - margin.top - margin.bottom;
 
     var svg = d3.select("svg").append("g")
         .attr("transform", "translate(" + margin.left + " " + margin.top + ")");
@@ -227,28 +237,28 @@ <h2>2009 vs. 2020</h2>
             //main tags
             svg.append("text")
                 .attr("class", "label")
-                .attr("x", 600) 
+                .attr("x", 890) 
                 .attr("y", 200)
                 .text("Employer")
 
             svg.append("text")
                 .attr("class", "label")
                 .attr("x", 60)
-                .attr("y", 410)
+                .attr("y", 380)
                 .text("Medicaid")
                 .style("fill", "white")
 
             svg.append("text")
                 .attr("class", "label")
                 .attr("x", 60)
-                .attr("y", 100)
+                .attr("y", 90)
                 .text("Uninsured")
                 .style("fill", "white")
 
             svg.append("text")
                 .attr("class", "label")
                 .attr("x", 60)
-                .attr("y", 330)
+                .attr("y", 270)
                 .text("Medicare")
                 .style("fill", "black")