Merge pull request #124 from safing/feature/some-tweaks

Tweak Mobile Optimization
This commit is contained in:
Dave Gson 2021-01-29 16:13:00 +01:00 committed by GitHub
commit 711e3c2394
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 19 deletions

View file

@ -9,7 +9,7 @@ title: Safing - Love Freedom
<div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col" style="max-width: 2000px;"> <div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col" style="max-width: 2000px;">
<div class="mx-auto lg:mr-0 lg:ml-auto mt-16 md:my-auto px-4 md:px-0"> <div class="mx-auto lg:mr-0 lg:ml-auto mt-16 md:my-auto px-4 md:px-0">
<div class="inline-block max-w-lg lg:mr-32"> <div class="md:ml-4 inline-block max-w-lg lg:mr-32">
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;"> <div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2"> <img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
Alpha Software: Portmaster is in active development Alpha Software: Portmaster is in active development
@ -36,7 +36,7 @@ title: Safing - Love Freedom
<div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64 lg:pt-20" style="max-width: 1700px;"> <div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64 lg:pt-20" style="max-width: 1700px;">
<div class="row-start-2 lg:row-start-1 lg:col-start-2 mx-auto lg:ml-0 lg:mr-auto mt-16 md:my-auto px-4 md:px-0"> <div class="row-start-2 lg:row-start-1 lg:col-start-2 mx-auto lg:ml-0 lg:mr-auto mt-16 md:my-auto px-4 md:px-0">
<div class="inline-block max-w-lg lg:ml-32"> <div class="md:ml-4 inline-block max-w-lg lg:ml-32">
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;"> <div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2"> <img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
Alpha Software: Portmaster is in active development Alpha Software: Portmaster is in active development
@ -63,7 +63,7 @@ title: Safing - Love Freedom
<div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64 lg:pt-20" style="max-width: 1700px;"> <div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64 lg:pt-20" style="max-width: 1700px;">
<div class="mx-auto lg:mr-0 lg:ml-auto mt-16 md:my-auto px-4 md:px-0"> <div class="mx-auto lg:mr-0 lg:ml-auto mt-16 md:my-auto px-4 md:px-0">
<div class="inline-block max-w-lg lg:mr-32"> <div class="md:ml-4 inline-block max-w-lg lg:mr-32">
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;"> <div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2"> <img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
Alpha Software: Portmaster is in active development Alpha Software: Portmaster is in active development

View file

@ -7,9 +7,9 @@ redirect_from:
--- ---
<div class="notification w-full text-center text-white p-2" style="background-color: #6188ff;"> <div class="notification w-full text-center text-white p-2" style="background-color: #6188ff;">
<div class="mx-auto flex" style="width: max-content;"> <div class="mx-auto flex">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2"> <img src="{{ site.img_url }}icons/info.svg" class="ml-auto h-4 w-4 self-center mr-2">
<span class="w-auto text-sm">Portmaster is Alpha Software - expect hickups here and there</span> <span class="w-auto text-sm mr-auto">Portmaster is Alpha Software - expect hickups here and there</span>
</div> </div>
</div> </div>
<header class="h-full my-20 md:my-40"> <header class="h-full my-20 md:my-40">
@ -44,7 +44,7 @@ redirect_from:
<section id="features" class="my-32 md:pt-32 md:mb-40 "> <section id="features" class="my-32 md:pt-32 md:mb-40 ">
<div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col" style="max-width: 2000px;"> <div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col" style="max-width: 2000px;">
<div class=" mx-auto lg:mr-0 lg:ml-auto mt-16 md:my-auto px-4 md:px-0"> <div class=" mx-auto lg:mr-0 lg:ml-auto mt-16 md:my-auto px-4 md:px-0">
<div class="inline-block max-w-lg lg:mr-32"> <div class="md:ml-4 inline-block max-w-lg lg:mr-32">
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;"> <div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2"> <img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
Alpha Software: Portmaster is in active development Alpha Software: Portmaster is in active development
@ -63,7 +63,7 @@ redirect_from:
</div> </div>
<div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64" style="max-width: 1700px;"> <div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64" style="max-width: 1700px;">
<div class="row-start-2 lg:row-start-1 lg:col-start-2 mx-auto lg:ml-0 lg:mr-auto mt-16 md:my-auto px-4 md:px-0"> <div class="row-start-2 lg:row-start-1 lg:col-start-2 mx-auto lg:ml-0 lg:mr-auto mt-16 md:my-auto px-4 md:px-0">
<div class="inline-block max-w-lg lg:ml-32"> <div class="md:mr-4 inline-block max-w-lg lg:ml-32">
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;"> <div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2"> <img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
Alpha Software: Portmaster is in active development Alpha Software: Portmaster is in active development
@ -82,7 +82,7 @@ redirect_from:
</div> </div>
<div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64 lg:pt-12" style="max-width: 1700px;"> <div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64 lg:pt-12" style="max-width: 1700px;">
<div class="mx-auto lg:mr-0 lg:ml-auto mt-16 md:my-auto px-4 md:px-0"> <div class="mx-auto lg:mr-0 lg:ml-auto mt-16 md:my-auto px-4 md:px-0">
<div class="inline-block max-w-lg lg:mr-32"> <div class="md:ml-4 inline-block max-w-lg lg:mr-32">
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;"> <div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2"> <img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
Alpha Software: Portmaster is in active development Alpha Software: Portmaster is in active development
@ -108,7 +108,7 @@ redirect_from:
</div> </div>
<div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64 lg:pt-20" style="max-width: 1700px;"> <div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64 lg:pt-20" style="max-width: 1700px;">
<div class="row-start-2 lg:row-start-1 lg:col-start-2 mx-auto lg:ml-0 lg:mr-auto mt-16 md:my-auto px-4 md:px-0"> <div class="row-start-2 lg:row-start-1 lg:col-start-2 mx-auto lg:ml-0 lg:mr-auto mt-16 md:my-auto px-4 md:px-0">
<div class="inline-block max-w-lg lg:ml-32"> <div class="md:mr-4 inline-block max-w-lg lg:ml-32">
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;"> <div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2"> <img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
Alpha Software: Portmaster is in active development Alpha Software: Portmaster is in active development
@ -127,7 +127,7 @@ redirect_from:
</div> </div>
<div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64" style="max-width: 1700px;"> <div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64" style="max-width: 1700px;">
<div class="mx-auto lg:mr-0 lg:ml-auto mt-16 md:my-auto px-4 md:px-0"> <div class="mx-auto lg:mr-0 lg:ml-auto mt-16 md:my-auto px-4 md:px-0">
<div class="inline-block max-w-lg lg:mr-32"> <div class="md:ml-4 inline-block max-w-lg lg:mr-32">
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;"> <div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2"> <img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
Alpha Software: Portmaster is in active development Alpha Software: Portmaster is in active development
@ -157,7 +157,7 @@ redirect_from:
</div> </div>
<div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64" style="max-width: 1700px;"> <div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64" style="max-width: 1700px;">
<div class="row-start-2 lg:row-start-1 lg:col-start-2 mx-auto lg:ml-0 lg:mr-auto mt-16 md:my-auto px-4 md:px-0"> <div class="row-start-2 lg:row-start-1 lg:col-start-2 mx-auto lg:ml-0 lg:mr-auto mt-16 md:my-auto px-4 md:px-0">
<div class="inline-block max-w-lg lg:ml-32"> <div class="md:mr-4 inline-block max-w-lg lg:ml-32">
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;"> <div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2"> <img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
Alpha Software: Portmaster is in active development Alpha Software: Portmaster is in active development
@ -176,7 +176,7 @@ redirect_from:
</div> </div>
<div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64 lg:pt-20" style="max-width: 1700px;"> <div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64 lg:pt-20" style="max-width: 1700px;">
<div class="mx-auto lg:mr-0 lg:ml-auto mt-16 md:my-auto px-4 md:px-0"> <div class="mx-auto lg:mr-0 lg:ml-auto mt-16 md:my-auto px-4 md:px-0">
<div class="inline-block max-w-lg lg:mr-32"> <div class="md:ml-4 inline-block max-w-lg lg:mr-32">
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;"> <div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2"> <img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
Alpha Software: Portmaster is in active development Alpha Software: Portmaster is in active development

View file

@ -4,12 +4,14 @@ layout: page
--- ---
<div class="notification w-full text-center text-white p-2" style="background-color: #6188ff;"> <div class="notification w-full text-center text-white p-2" style="background-color: #6188ff;">
<div class="mx-auto flex" style="width: max-content;"> <div class="mx-auto flex">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2"> <img src="{{ site.img_url }}icons/info.svg" class="ml-auto h-4 w-4 self-center mr-2">
<span class="w-auto text-sm self-center">SPN is in Pre-Alpha and not publicily available. That is why there are no screenshots of the software on this page.</span> <div class="mr-auto">
<span class="w-auto text-sm">SPN is in Pre-Alpha and not publicily available. That is why there are no screenshots of the software on this page.</span>
<a href="/spn/#faq" class="underline text-sm self-center ml-2 ">Read FAQ</a> <a href="/spn/#faq" class="underline text-sm self-center ml-2 ">Read FAQ</a>
</div> </div>
</div> </div>
</div>
<header class="h-full"> <header class="h-full">
<div class="flex items-center h-full pt-20 md:pt-32 md:pb-40"> <div class="flex items-center h-full pt-20 md:pt-32 md:pb-40">
<div class="container mx-auto sm:px-8 sm:px-0"> <div class="container mx-auto sm:px-8 sm:px-0">