Add a note of caution to Tech Report (#1157)

* Add a not of caution to Tech Report

* CI errors

* Fix errors

Author: tunetheweb

static/css/techreport/techreport.css

@@ -1510,7 +1510,7 @@ select {
   margin-top: 0;
   margin-bottom: 3rem;
   background-color: transparent;
-  padding: 3rem 0 7rem 0;
+  padding: 3rem 0 3rem 0;
 }
 
 .intro h1 {
@@ -1600,6 +1600,18 @@ select {
   color: inherit;
 }
 
+.caveats {
+  border: none;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  background-color: transparent;
+  padding: 0rem 0 3rem 0;
+}
+
+.caveats p {
+  font-size: 0.9em;
+}
+
 .page-content {
   display: block;
   position: relative;
@@ -1617,7 +1629,7 @@ select {
 }
 
 .data-sections > div:first-of-type {
-  margin-top: -10rem;
+  margin-top: -6rem;
 }
 
 .report-section {

templates/index.html

@@ -57,7 +57,7 @@ <h2>
     <div class="container">
       <div class="row">
 
-        <div class="col-lg-6 col-sm-6 col-md-6 hidden-xs">
+        <div class="col-lg-5 col-sm-6 col-md-6 hidden-xs">
           <a href="/reports/techreport/landing">
             <img src="/static/img/web-vitals.png" width="471" height="367" alt="Explore the Core Web Vitals Tech Report" loading="lazy" />
           </a>
@@ -96,7 +96,7 @@ <h2>
 
         </div>
 
-        <div class="col-lg-6 col-sm-6 col-md-6 hidden-xs">
+        <div class="col-lg-5 col-sm-6 col-md-6 hidden-xs">
           <a href="https://har.fyi/guides/getting-started/">
             <img src="/static/img/data.png" width="466" height="367" alt="Learn more about HTTP Archive on BigQuery" loading="lazy" />
           </a>

templates/techreport/landing.html

@@ -38,4 +38,15 @@ <h2><a href="/reports/techreport/category?category=CMS">Category info</a></h2>
       </div>
     </div>
   </div>
+
+  <div class="caveats block-m" id="caveats">
+    <div>
+      <h2>
+        <a href="#caveats" class="anchor">A note of caution</a>
+      </h2>
+      <p>
+        <em>Web performance is based on a large number of factors and correlation does not equal causation. A technology being highly correlated with good (or poor) performance does not necessarily indicate that technology is the cause of that performance. Those technologies may be used on simpler or more complex sites, or in popular third-party components that may be more or less performant. We hope this data serves as an interesting jumping off point for delving into, and discussing, why the stats are the way they are rather than as a definitve grading of the technology.</em>
+      </p>
+    </div>
+  </div>
 {% endblock %}