Fix front page mobile madness

This commit is contained in:
davegson 2020-05-21 11:43:37 +02:00
parent 9e83786813
commit 5838cd8791

View file

@ -1,9 +1,9 @@
<header class="mb-64 lg:mb-0 lg:pb-0 h-screen bg-local bg-no-repeat bg-cover bg-center" style="background-image: url({{ site.img_url }}header.png"> <header class="mb-64 lg:mb-0 lg:pb-0 h-screen bg-local bg-no-repeat bg-cover bg-center" style="background-image: url({{ site.img_url }}header.png">
<img class="-z-0 pt-16 absolute hidden md:block" style="z-index: -1;" src="" alt=""> <img class="-z-0 pt-16 absolute hidden md:block" style="z-index: -1;" src="" alt="">
<div class="flex items-center h-full"> <div class="flex items-center md:h-full">
<div class="container mx-auto sm:px-8 sm:px-0"> <div class="container mx-auto sm:px-8 sm:px-0">
<div class="container mx-auto px-8 sm:px-0 flex"> <div class="container mx-auto px-8 pt-16 md:pt-0 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-0 lg:flex"> <div class="max-w-screen-xl px-4 sm:px-6 lg:px-0 lg:flex">
<div class="inline-block text-center lg:text-left lg:mr-12 lg:mt-20"> <div class="inline-block text-center lg:text-left lg:mr-12 lg:mt-20">
<h2 class="py-10 text-5xl tracking-tight font-extrabold text-gray-900 sm:text-5xl leading-none md:text-6xl md:mx-auto"> <h2 class="py-10 text-5xl tracking-tight font-extrabold text-gray-900 sm:text-5xl leading-none md:text-6xl md:mx-auto">
<!-- the &nbsp; is super nice for bigger screens, but breaks stuff on mobile --> <!-- the &nbsp; is super nice for bigger screens, but breaks stuff on mobile -->
@ -19,7 +19,7 @@
Without privacy there is no freedom of press, no freedom of speech, Without privacy there is no freedom of press, no freedom of speech,
not even freedom of thought. Take back your freedom. not even freedom of thought. Take back your freedom.
</p> </p>
<div class="py-10 lg:py-10 lg:flex text-center"> <div class="pb-0 pt-10 md:py-10 lg:flex text-center">
<a href="#tools"> <a href="#tools">
<button type="button" class="bg-black mb-5 md:mb-0 transform hover:scale-95 inline-flex items-center px-5 px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase"> <button type="button" class="bg-black mb-5 md:mb-0 transform hover:scale-95 inline-flex items-center px-5 px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
discover our tools discover our tools
@ -27,8 +27,8 @@
</a> </a>
</div> </div>
</div> </div>
<div class="lg:pb-0 lg:ml-0"> <div>
<img style="margin-top: 3.5rem;" class="md:pr-1 absolute mx-auto left-0 right-0 text-center lg:relative max-w-sm sm:max-w-sm lg:max-w-md transform lg:scale-150 lg:ml-16" src="{{ site.img_url }}freedom.gif" alt=""> <img class="flex mx-auto md:mt-12 transform md:pr-1 md:absolute md:left-0 md:right-0 lg:relative md:max-w-sm lg:max-w-md lg:scale-150 lg:ml-16" src="{{ site.img_url }}freedom.gif" alt="">
</div> </div>
</div> </div>
</div> </div>