Update site copy and styles for initial release

eamaranti · Dec 9, 2020 · bfac6f4 · bfac6f4
1 parent 8e62462
commit bfac6f4
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "build:clean": "rm -rf public",
     "build:compile": "rollup -c",
     "build": "run-s build:*",
-    "deploy": "git push --follow-tags && firebase deploy -P web-vitals-report",
+    "deploy": "NODE_ENV=production npm run build && firebase deploy -P web-vitals-report",
     "lint": "eslint rollup.config.js \"src/**/*.js\"",
     "lint:fix": "eslint --fix rollup.config.js \"src/**/*.js\"",
     "stage": "firebase deploy -P web-vitals-report-staging",

diff --git a/src/css/base.css b/src/css/base.css
@@ -28,7 +28,7 @@
 @media (min-width: 48em) {
   :root {
     --vgap: 2rem;
-    --vgap-lg: 4rem;
+    --vgap-lg: 3rem;
     --hgap: 1.5rem;
   }
 }
@@ -68,6 +68,11 @@ a:hover, a:focus, a:active {
   color: var(--accent-color-active);
 }
 
+b {
+  font-weight: normal;
+  font-size: 1.2em;
+}
+
 [hidden] {
   display: none;
 }
diff --git a/src/css/components/Form.css b/src/css/components/Form.css
@@ -60,7 +60,7 @@
 @media (min-width: 48em) {
   .Form-field,
   .Form-action {
-    max-width: 36em;
+    max-width: 40em;
   }
 }
 

diff --git a/src/css/components/Intro.css b/src/css/components/Intro.css
@@ -15,13 +15,16 @@
  */
 
 .Intro {
-  margin: calc(var(--vgap-lg) - 1em) auto 0;
+  margin: var(--vgap-lg) auto 0;
 }
 
 @media (min-width: 48em) {
   .Intro {
+    max-width: 40em;
+  }
+
+  .Intro-heading {
     text-align: center;
-    max-width: 42em;
   }
 }
 
diff --git a/src/index.html b/src/index.html
@@ -37,10 +37,10 @@ <h1 class="TopBar-title">Web Vitals Report</h1>
   <main>
     <div class="Container">
       <section class="Intro">
-        <h2>Create your Web Vitals report</h2>
+        <h2 class="Intro-heading">Create your Web Vitals report</h2>
         <p>This tool can be used to create a Web Vitals report for any site that uses the<br><a href="https://github.com/GoogleChrome/web-vitals">web-vitals</a> JavaScript library to <a href="https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics">send data to Google Analytics.</a></p>
-        <p>This report will display a histogram and timeline of each Web Vitals metric, and it will also let you compare results across different <a href="https://support.google.com/analytics/answer/3123951">segments</a> to help you better understand how these metrics correlate with your business goals.
-        </p>
+        <p>This report will display a histogram and timeline of each Web Vitals metric, and it will also let you compare results across different <a href="https://support.google.com/analytics/answer/3123951">segments</a> to help you better understand how these metrics correlate with your business goals. <b></b>🔍</p>
+        <p>For additional usage instruction, refer to the <a href="https://github.com/GoogleChromeLabs/web-vitals-report">project README</a> on GitHub. <b>📖</b></p>
       </section>
     </div>