Some minor changes (style & content) for WPT pass rates

Author: mrego

about.md

@@ -21,12 +21,6 @@ Since its creation in 2012, Servo has contributed to W3C and WHATWG web standard
 
 Servo's roadmap is defined in the project wiki: <https://github.com/servo/servo/wiki/Roadmap>
 
-## WPT pass rates
-
-The chart below tracks our pass rates in several *focus areas* of the [Web Platform Tests](http://web-platform-tests.org/), as well as the whole CSS and WPT test suites. To drill down the pass rates under a focus area, see the [Servo results on wpt.fyi](https://wpt.fyi/runs?label=master&product=servo), or for more details see our full WPT dashboard at [wpt.servo.org](https://wpt.servo.org).
-
-<iframe src="https://wpt.servo.org/?embed" scrolling="no" style="width: 100%; aspect-ratio: 16/9;"></iframe>
-
 ## Presentations
 
 * [Why Build a New Browser Engine in Rust?](https://www.youtube.com/watch?v=s0MIHKv45C0) by Martin Robinson (Jan 2025 at [Barcelona Free Software](https://meetu.ps/e/NKqfz/mXgxF/i))

assets/js/load-chart.js

@@ -50,6 +50,7 @@ function setupChart () {
     const options = {
         height: 350,
         fontSize: 16,
+        fontName: "'Space Grotesk', sans-serif",
         legend: {
             position: 'top',
             ...(dark_mode

wpt.md

@@ -1,6 +1,6 @@
 ---
 layout: default.html
-title: WPT Scores
+title: WPT Pass Rates
 ---
 <style>
   .odd {
@@ -17,7 +17,6 @@ title: WPT Scores
 
   #score-table {
       width: 100%;
-      margin-top: 30px;
   }
 
   #score-table th {
@@ -41,24 +40,34 @@ title: WPT Scores
       padding: 10px;
       margin-top: 20px;
       margin-bottom: 40px;
-      font-size: 1rem;
+  }
+
+  #servo-chart, .chart-filter-bar, .chart-filter, #score-table {
+      max-width: 48rem;
   }
 
   .chart-filter-bar {
     display: flex;
     flex-wrap: wrap;
     column-gap: 40px;
     row-gap: 20px;
+    place-content: center;
   }
 
   .chart-filter {
     display: flex;
     align-items: center;
     gap: 20px;
+    flex-wrap: wrap;
   }
 </style>
 <div class="inner-container wpt-score-page">
   <h1>{{ title }}</h1>
+  <p class="subtitle">
+
+The chart below tracks our pass rates in several *focus areas* of the [Web Platform Tests](http://web-platform-tests.org/), as well as the whole CSS and WPT test suites. To drill down the pass rates under a focus area, see the [Servo results on wpt.fyi](https://wpt.fyi/results/?product=servo).
+
+  </p>
   <br>
     <div class="chart-filter-bar">
       <div class="chart-filter">
@@ -75,15 +84,15 @@ title: WPT Scores
         <thead id="score-table-header"><tr><th>Test Suite</th><th>Score</th></tr></thead>
         <tbody id="score-table-body"></tbody>
     </table>
-    <div id="score-explanation">
+    <p id="score-explanation">
         Scores are calculated as percentages of total <b>enabled</b>
         tests within the suite that pass. A passing test with no
         subtests gets a score of 1 while a test with subtests gets a
         score between 0 and 1 representing the fraction of passing
         subtests within that test. This is different from the
         percentages on wpt.fyi which is calculated by giving equal
         weight to both top-level tests and subtests.
-    </div>
+    </p>
 </div>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <script type="text/javascript" src="{{ '/js/load-chart.js' | url }}"></script>