v1.1.1/release styling fixes, add links

website/public/index.html

@@ -117,16 +117,23 @@
     <div id="root"></div>
     <footer data-font="sans">
       <div class="link-container">
-        <div>
+        <div id="data-sources">
           <h6 class="overline" data-font="sans">FDA Data Sources</h6>
-          <a href="https://www.fda.gov/media/144416/download">PFizer-BioNTech</a>
+          <a id="fda-pfizer" href="https://www.fda.gov/media/144416/download">PFizer-BioNTech</a>
-          <a href="https://www.fda.gov/media/144637/download">Moderna</a>
+          <a id="fda-moderna" href="https://www.fda.gov/media/144637/download">Moderna</a>
-          <a href="https://www.fda.gov/media/146304/download">J&J Janssen</a>
+          <a id="fda-j&j" href="https://www.fda.gov/media/146304/download">J&J Janssen</a>
         </div>
         <div>
           <h6 class="overline" data-font="sans">Links</h6>
           <a href="%PUBLIC_URL%/vaxandme_chart.pdf">Download Chart</a>
           <a href="/">Home</a>
+          <a
+            target="_blank"
+            href="https://www.gavi.org/vaccineswork/what-difference-between-efficacy-and-effectiveness"
+            rel="noreferrer"
+          >
+            What is efficacy? ↗
+          </a>
         </div>
         <div>
           <h6 class="overline" data-font="sans">Legal</h6>

website/public/styles/extrasmall.css

@@ -8,6 +8,7 @@
 
 html {
   font-size: 10px;
+  scroll-behavior: smooth;
 }
 body {
   display: flex;
@@ -349,18 +350,14 @@ footer .by {
 .tip-container {
   display: flex;
   flex-direction: row;
-  padding: 2rem 4rem;
+  padding: 2rem 0;
-  padding-left: 2rem;
+  margin: 2rem 0;
   border-radius: 1rem;
   margin-bottom: 2rem;
-  border: 1px solid var(--color-secondary);
 }
 .tip-icon {
   font-size: 3rem;
 }
-.tip {
-  padding-left: 2rem;
-}
 .tip .overline {
   font-size: 1.6rem;
 }
@@ -373,6 +370,12 @@ footer .by {
   font-size: 6rem;
   letter-spacing: 0.5rem;
 }
+.tip-container .overline[data-button] {
+  margin-top: 1rem;
+}
+.tip-container .overline[data-button]:first-of-type {
+  margin-top: 2rem;
+}
 
 @keyframes loading {
   0% {
@@ -403,6 +406,9 @@ footer .by {
   margin-top: 5rem;
   flex-direction: column;
   margin-bottom: 2rem;
+  border: 1px solid var(--color-secondary);
+  border-radius: 1rem;
+  padding: 3rem 2rem;
 }
 
 .result-header-container .symptom-container {

website/public/styles/medium.css

@@ -104,11 +104,16 @@ footer {
   max-width: 50%;
 }
 
-.tip-container {
+.tip-container .overline[data-button] {
-  width: fit-content;
+  margin-top: 2rem;
-  max-width: 45rem;
+  margin-left: 0;
+}
+.tip-container .overline[data-button]:last-of-type {
+  margin-left: 1.2rem;
+}
+.tip {
+  padding-left: 2rem;
 }
-
 
 .result-header-container {
   flex-direction: row;

website/src/index.js

@@ -860,7 +860,7 @@ class App extends React.Component {
 
           {this.shouldShowResults() ? (
             <div className="tip-container">
-              <div className="tip-icon">&#9432;</div>
+              {/* <div className="tip-icon">&#9432;</div> */}
               <div className="tip">
                 <h6 className="subheader" data-font="sans">
                   NET EFFICACY
@@ -868,10 +868,26 @@ class App extends React.Component {
                 <h3 className="header" data-font="sans-bold">
                   {VAX_EFFICACY[name][age]}%
                 </h3>
-                <h6 className="overline" data-font="sans">
+                <h6
+                  className="overline"
+                  style={{ wordBreak: "break-word" }}
+                  data-font="sans"
+                >
                   of vaccine trial participants who took the <u>{name}</u>{" "}
                   vaccine (in the <u>{age}</u> age group) did not get COVID-19
                 </h6>
+                <h6 className="overline" data-font="sans" data-button>
+                  <a href="#data-sources">See Data Sources ↗</a>
+                </h6>
+                <h6 className="overline" data-font="sans" data-button>
+                  <a
+                    target="_blank"
+                    href="https://www.gavi.org/vaccineswork/what-difference-between-efficacy-and-effectiveness"
+                    rel="noreferrer"
+                  >
+                    What is efficacy? ↗
+                  </a>
+                </h6>
               </div>
             </div>
           ) : null}