Merge pull request #25 from teaxyz/mobile-only-pdf-btn

Mobile-only button for PDF download.

public/white-paper/index.html

@@ -25,7 +25,7 @@
   <meta property="og:article:author" content="https://www.linkedin.com/in/timothytlewis/" />
   <meta property="og:article:author" content="https://www.linkedin.com/in/thomas-borrel-149b15/" />
   <meta property="og:title" content="tea.white-paper" />
-  <meta property="og:determiner" content ="the" />
+  <meta property="og:determiner" content="the" />
   <meta property="og:description" content="A Decentralized Protocol for Remunerating the Open-Source Ecosystem" />
   <meta property="og:image" content="https://tea.xyz/cover.png" />
   <meta property="og:image:alt" content="sh &lt;(curl tea.xyz)" />
@@ -98,12 +98,30 @@
     }
 
     @media only screen and (max-width: 600px) {
-      .auth-btn{
+      .auth-btn {
         width: 100%;
-        margin-bottom:20px;
+        margin-bottom: 20px;
+      }
+
+      .mobile-pdf {
+        display: block;
+      }
+
+      .pdf-iframe {
+        display: none;
       }
     }
 
+    @media only screen and (min-width: 600px) {
+
+      .mobile-pdf {
+        display: none;
+      }
+
+      .pdf-iframe {
+        display: block;
+      }
+    }
   </style>
 
   <a href="https://github.com/apps/tea-xyz/installations/new" class="gf-container" style="background-color:#8EC7BF;">
@@ -169,24 +187,49 @@
       <div style="z-index:100; display:flex; flex-direction:column;" class="col-lg-9 col-sm-12">
         <div style="margin-top:auto; margin-bottom:auto;">
           <h1 class="display-3 mb-4">We're Open&#8208;Sourcing Our White Paper</h1>
-          <p class="mb-5 fs-sm-5 fs-lg-6 lead">Open&#8208;source is about the many coming together to create something great. In the spirit of that, we're inviting developers, speculators, and enthusiasts alike to contribute to our white paper and help brew the future of the internet. This is our revolutionary undertaking to create equitable open&#8208;source for web3, and we want you to be a part of laying its groundwork.<br><a style="color:#54BAAB;" href="/tea.white-paper.pdf">Download our white paper</a>.</p>
+          <p class="mb-5 fs-sm-5 fs-lg-6 lead">Open&#8208;source is about the many coming together to create something
+            great. In the spirit of that, we're inviting developers, speculators, and enthusiasts alike to contribute to
+            our white paper and help brew the future of the internet. This is our revolutionary undertaking to create
+            equitable open&#8208;source for web3, and we want you to be a part of laying its groundwork.<br><a
+              style="color:#54BAAB;" href="https://tea.xyz/tea.white-paper.pdf">Download our white paper</a>.</p>
         </div>
+      </div>
+      <div style="display:flex; flex-direction:column;" class="col-lg-3 col-sm-12">
+        <div style="margin-top:auto; z-index:100;">
+          <a class="btn btn-primary mb-3" href="https://github.com/apps/tea-xyz/installations/new"
+            role="button">Authenticate with tea</a><br>
+          <a class="btn btn-primary mb-sm-5 mb-md-5 mb-5" id="whitepaper-btn"
+            href="https://github.com/teaxyz/white-paper" role="button">Contribute to Our White Paper</a>
         </div>
-        <div style="display:flex; flex-direction:column;" class="col-lg-3 col-sm-12">
+      </div>
-          <div style="margin-top:auto; z-index:100;">
+    </div>
-            <a class="btn btn-primary mb-3" href="https://github.com/apps/tea-xyz/installations/new"
+  </div>
-              role="button">Authenticate with tea</a><br>
+
-            <a class="btn btn-primary mb-sm-5 mb-md-5 mb-5" id="whitepaper-btn" href="https://github.com/teaxyz/white-paper"
+  <!-- Start PDF -->
-              role="button">Contribute to Our White Paper</a>
+
+  <div class="container pdf-iframe"
+    style="margin-bottom:100px; overflow:auto; -webkit-overflow-scrolling:touch; z-index:2;">
+    <iframe src="https://tea.xyz/tea.white-paper.pdf#toolbar=0&navpanes=0&view=fitH" width="100%" height="800px">
+    </iframe>
+  </div>
+
+  <!-- Mobile-only -->
+
+  <div class="container mobile-pdf" style="margin-bottom:100px;">
+    <div class="row">
+      <div class="col">
+        <div class="card">
+          <div style="display:flex; flex-direction:column; background-color:#23282C;" class="card-body pt-5 pb-5">
+            <div style="margin-top:auto; margin-bottom:auto;">
+              <p class="text-center">Mobile browsers can be finicky, so please view our white paper via the button
+                below.</p>
+              <a style="display:block; margin-left:auto; margin-right:auto;" class="btn btn-primary mb-3"
+                href="https://tea.xyz/tea.white-paper.pdf" role="button">Download our White Paper</a>
+            </div>
           </div>
         </div>
       </div>
     </div>
-
-<!-- Start PDF -->
-
-  <div class="container" style="margin-bottom:100px; overflow:auto; -webkit-overflow-scrolling:touch; z-index:2;">
-      <iframe src="/tea.white-paper.pdf#toolbar=0&navpanes=0&view=fitH" width="100%" height="800px"></iframe>
   </div>
 
   <!-- Community Links -->
@@ -368,4 +411,4 @@
   gtag('js', new Date());
 
   gtag('config', 'G-Q3M5LVH76F');
-</script>
+</script>