Remove   for mobile devices

This commit is contained in:
davegson 2020-05-21 10:40:51 +02:00
parent 30f0b0af8d
commit c001f38c49
2 changed files with 12 additions and 2 deletions

View file

@ -6,7 +6,14 @@
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-0 lg:flex"> <div class="max-w-screen-xl mx-auto 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">
<span style="color: #6188ff;">Fight surveillance</span> because you <span style="color: #6188ff;">love&nbsp;Freedom</span>. <!-- the &nbsp; is super nice for bigger screens, but breaks stuff on mobile -->
<!-- hence, we only have the header with &nbsp; on md+ devices -->
<span class="block md:hidden">
<span style="color: #6188ff;">Fight surveillance</span> because you <span style="color: #6188ff;">love Freedom</span>.
</span>
<span class="hidden md:block">
<span style="color: #6188ff;">Fight surveillance</span> because you <span style="color: #6188ff;">love&nbsp;Freedom</span>.
</span>
</h2> </h2>
<p style="max-width: 440px;" class="text-md opacity-55 max-w-4xl mx-auto lg:mx-0"> <p style="max-width: 440px;" class="text-md opacity-55 max-w-4xl mx-auto lg:mx-0">
Without privacy there is no freedom of press, no freedom of speech, Without privacy there is no freedom of press, no freedom of speech,

View file

@ -23,7 +23,10 @@ layout: page
</div> </div>
<div class="inline-block text-center md:text-left"> <div class="inline-block text-center md:text-left">
<h2 class="text-6xl tracking-tight font-extrabold leading-none py-10 lg:w-3/4"> <h2 class="text-6xl tracking-tight font-extrabold leading-none py-10 lg:w-3/4">
Safing&nbsp;Privacy Network <!-- the &nbsp; is super nice for bigger screens, but breaks stuff on mobile -->
<!-- hence, we only have the header with &nbsp; on md+ devices -->
<span class="block md:hidden">Safing Privacy Network</span>
<span class="hidden md:block">Safing&nbsp;Privacy Network</span>
</h2> </h2>
<p class="text-md opacity-55 max-w-4xl"> <p class="text-md opacity-55 max-w-4xl">
With the SPN you protect all your connections from mass surveillance. Prevent all Internet Service Providers from collecting and selling your private activities. With the SPN you protect all your connections from mass surveillance. Prevent all Internet Service Providers from collecting and selling your private activities.