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 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-pfizer" href="https://www.fda.gov/media/144416/download">PFizer-BioNTech</a>
+          <a id="fda-moderna" href="https://www.fda.gov/media/144637/download">Moderna</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-left: 2rem;
+  padding: 2rem 0;
+  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 {
-  width: fit-content;
-  max-width: 45rem;
+.tip-container .overline[data-button] {
+  margin-top: 2rem;
+  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;