From 9dfd0420c9072a33f8a570f684020ea62db06050 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Thu, 19 May 2022 11:46:14 -0400
Subject: [PATCH] Mobile-only button for PDF download.

---
 public/white-paper/index.html | 46 ++++++++++++++++++++++++++++++++---
 1 file changed, 43 insertions(+), 3 deletions(-)

diff --git a/public/white-paper/index.html b/public/white-paper/index.html
index 72c725b..a4189de 100644
--- a/public/white-paper/index.html
+++ b/public/white-paper/index.html
@@ -102,8 +102,29 @@
         width: 100%;
         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;">
@@ -183,10 +204,29 @@
       </div>
     </div>
 
-<!-- Start PDF -->
+  <!-- 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 class="container pdf-iframe" 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>
+
+  <!-- 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="/tea.white-paper.pdf"
+                role="button">Download our White Paper</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 
   <!-- Community Links -->