Mobile-only button for PDF download.

This commit is contained in:
Thomas Smith 2022-05-19 11:46:14 -04:00 committed by Jacob Heider
parent 7a0de2c56e
commit 9dfd0420c9

View file

@ -102,8 +102,29 @@
width: 100%; 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> </style>
<a href="https://github.com/apps/tea-xyz/installations/new" class="gf-container" style="background-color:#8EC7BF;"> <a href="https://github.com/apps/tea-xyz/installations/new" class="gf-container" style="background-color:#8EC7BF;">
@ -183,10 +204,29 @@
</div> </div>
</div> </div>
<!-- Start PDF --> <!-- Start PDF -->
<div class="container" style="margin-bottom:100px; overflow:auto; -webkit-overflow-scrolling:touch; z-index:2;"> <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> <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> </div>
<!-- Community Links --> <!-- Community Links -->