vikarti.anatra/safing-web
1
0
Fork 0
mirror of https://github.com/safing/web synced 2025-04-17 01:19:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Optimize feature paddings for mobile

Browse source
This commit is contained in:
davegson 2020-05-21 14:02:05 +02:00
parent eda2e8f892
commit 1f8802671b
5 changed files with 41 additions and 42 deletions

9
about/index.html
View file

@ -6,9 +6,8 @@ redirect_from:
- /community-hub/
---
<header style="padding-top: 12rem;"></header>
<section style="margin-top: 3rem;" class="pb-48 ">
<header class="pt-16 lg:pt-48"></header>
<section class="pt-12 pb-16 lg:pb-48">
<div class="items-center h-full">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto items-center">
@ -42,7 +41,7 @@ redirect_from:
</div>
</div>
</div>
<div class="items-center h-full mt-64">
<div class="items-center h-full mt-8 md:mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="flex grid md:grid-cols-2">
<div class="mx-auto transform hover:scale-95 duration-150 ease-in-out">
@ -68,7 +67,7 @@ redirect_from:
</div>
</div>
</div>
<div class="items-center h-full mt-64">
<div class="items-center h-full mt-8 md:mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto">
<div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">

22
index.html
View file

@ -5,7 +5,7 @@ title: Safing - Love Freedom
{% include header.html %}
<section style="margin-top: 4rem;" id="tools">
<section class="mt-16" id="tools">
<div class="flex items-center h-full">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-0 lg:flex">
@ -70,15 +70,15 @@ title: Safing - Love Freedom
</div>
</div>
</section>
<section style="margin-top: 20rem;">
<div class="items-center h-full">
<section>
<div class="items-center mt-16 md:mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto">
<div class="pb-48 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
<img src="{{ site.img_url }}page-specific/spn/network.png" alt="">
</div>
<div class="inline-block max-w-lg">
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; margin-left: -3rem; opacity: 0.05;" class=" z-0 absolute bg-top">01</span>
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; opacity: 0.05;" class="z-0 absolute bg-top md:-ml-12">01</span>
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">Powerful VPN Alternative</h2>
<p class="text-md opacity-55 max-w-lg">
Free yourself from mass surveillance. Secure all your meta-data by decoupling yourself from your destination, inspired by Tor. Protect your whole computer, not only your browser.
@ -97,14 +97,14 @@ title: Safing - Love Freedom
</div>
</div>
</div>
<div class="items-center h-full mt-64">
<div class="items-center h-full mt-8 md:mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex">
<div class="pb-48 lg:pb-0 m0-0 lg:mr-32 self-center">
<img src="{{ site.img_url }}page-specific/portmaster/monitor.png" alt="">
</div>
<div class="inline-block max-w-lg">
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; margin-left: -3rem; opacity: 0.05;" class=" z-0 absolute bg-top">02</span>
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; opacity: 0.05;" class=" z-0 absolute bg-top md:-ml-12">02</span>
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">All-Around System Privacy</h2>
<p class="text-md opacity-55 max-w-lg">
Enforce DNS-over-TLS and block connections on a system wide level. Protect your whole computer, not only your browser. Free to use.
@ -122,8 +122,8 @@ title: Safing - Love Freedom
</div>
</div>
</section>
<section style="margin-top: 20rem; margin-bottom: 10rem;">
<div class="items-center h-full">
<section>
<div class="items-center h-full pb-8 lg:pb-24 mt-8 md:mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex">
<div class="py-12 bg-white">
@ -131,11 +131,11 @@ title: Safing - Love Freedom
<div class="lg:text-center">
<!-- hide the huge "Follow Us" in mobile & md devices for now, made width problems -->
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; opacity: 0.05;" class="z-0 ml-0 w-full left-0 text-center absolute bg-top hidden lg:block">Follow Us</span>
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center" style="position: relative;">
<h2 class="text-5xl tracking-tight font-extrabold leading-none md:py-10 text-center" style="position: relative;">
Blog, Podcast & Videos
</h2>
</div>
<div class="mt-32 ">
<div class="mt-8 lg:mt-32">
<ul class="md:grid md:grid-cols-2 lg:grid-cols-3 md:col-gap-8 md:row-gap-10 max-w-sm mx-auto md:max-w-full">
<!-- podcast -->
<li class="mt-12 md:mt-0 ">
@ -208,7 +208,7 @@ title: Safing - Love Freedom
</a>
</li>
</ul>
<div class="py-20 flex w-full">
<div class="pt-20 flex w-full">
<div class="mx-auto grid md:block">
<a class="mx-auto" href="{{ site.blog_url }}">
<button type="button" style="background-color: #000;" class="scale-110 md:scale-100 transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">

6
ownership/index.html
View file

@ -3,8 +3,8 @@ title: Safing Ownership
layout: page
---
<header style="padding-top: 12rem;"></header>
<section style="margin-top: 3rem;">
<header class="pt-16 lg:pt-48"></header>
<section class="pt-12">
<div class="items-center h-full">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex">
@ -32,7 +32,7 @@ layout: page
</div>
</div>
</div>
<div class="items-center h-full mt-64">
<div class="items-center h-full mt-8 md:mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto items-center">
<div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">

24
portmaster/index.html
View file

@ -27,7 +27,7 @@ redirect_from:
</div>
</div>
</div>
<div class="pt-24 lg:pt-0">
<div class="pt-6 lg:pt-0">
<!-- <video style="box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.3), 0 0px 5px 0 rgba(0, 0, 0, 0.05);" class="z-30 rounded-md lg:max-w-5xl mx-auto transform scale-70 lg:scale-75" preload="auto" src="{{ site.assets_url }}video/interim.mp4" controls muted></video> -->
<img style="box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.3), 0 0px 5px 0 rgba(0, 0, 0, 0.05);" class="z-30 rounded-md lg:max-w-5xl mx-auto transform scale-70 lg:scale-75" height="1220" width="1220" src="{{ site.img_url }}/placeholder.png" alt="">
</div>
@ -37,8 +37,8 @@ redirect_from:
</div>
</div>
</header>
<section style="margin-top: 13rem;" class="lg:pt-56">
<div class="text-center pb-40 lg:pb-48">
<section class="mt-8 md:mt-32 lg:pt-56">
<div class="text-center py-24 lg:pt-0 lg:pb-48">
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 mr-auto ml-auto">
Privacy Features
</h2>
@ -46,10 +46,10 @@ redirect_from:
At its core, the Portmaster sits on your kernel and simply intercepts all your network connections. You decide which privacy features you want to enable or disable as you desire.
</p>
</div>
<div class="items-center h-full">
<div class="items-center h-full mt-8 md:mt-16 lg:mt-48">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto">
<div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
<div class="ml-0 lg:ml-32 lg:hidden self-center">
<img src="{{ site.img_url }}page-specific/portmaster/monitor.gif" alt="">
</div>
<div class="inline-block max-w-lg">
@ -76,10 +76,10 @@ redirect_from:
</div>
</div>
</div>
<div class="items-center h-full mt-64">
<div class="items-center h-full mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex items-center">
<div class="pb-16 lg:pb-0 m0-0 lg:mr-40 self-center">
<div class="m0-0 lg:mr-40 self-center">
<img src="{{ site.img_url }}page-specific/portmaster/control.png" alt="">
</div>
<div class="inline-block max-w-lg">
@ -96,10 +96,10 @@ redirect_from:
</div>
</div>
</div>
<div class="items-center h-full mt-64">
<div class="items-center h-full mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto items-center">
<div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
<div class="pb-8 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
<img src="{{ site.img_url }}page-specific/portmaster/tls.png" alt="">
</div>
<div class="inline-block max-w-lg">
@ -116,10 +116,10 @@ redirect_from:
</div>
</div>
</div>
<div class="items-center h-full mt-64">
<div class="items-center h-full mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex items-center">
<div class="pb-16 lg:pb-0 m0-0 lg:mr-48 self-center">
<div class="m0-0 lg:mr-48 self-center">
<img src="{{ site.img_url }}page-specific/portmaster/modular.png" alt="">
</div>
<div class="inline-block max-w-lg">
@ -144,7 +144,7 @@ redirect_from:
</div>
</div>
</section>
<section style="margin-top: 13rem;" class="pb-40">
<section class="mt-16 lg:mt-48 pb-20 lg:pb-40">
<div class="items-center h-full">
<div class="">
<div class="max-w-full mx-auto px-4 sm:px-6">

22
spn/index.html
View file

@ -3,7 +3,7 @@ title: Safing Privacy Network
layout: page
---
<header class="h-screen pt-32">
<header class="h-screen pt-64 md:pt-32">
<img class="-z-0 pt-0 absolute hidden lg:block" style="z-index: -1; margin-top: -3rem;" src="{{ site.img_url }}shapes/corner-tl.png" alt="">
<div class="flex items-center h-full">
<div class="container mx-auto sm:px-8 sm:px-0">
@ -47,7 +47,7 @@ layout: page
</div>
</header>
<section style="margin-top: 3rem;">
<div class="text-center pb-48">
<div class="text-center py-24 lg:pt-0 lg:pb-48">
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 mr-auto ml-auto">
Protect Your Meta&#8209;Data
</h2>
@ -58,7 +58,7 @@ layout: page
<div class="items-center h-full">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex items-center">
<div class="pb-16 lg:pb-0 m0-0 lg:mr-48 self-center">
<div class="lg:pb-0 m0-0 lg:mr-48 self-center">
<img src="{{ site.img_url }}page-specific/spn/layers.gif" alt="">
</div>
<div class="inline-block max-w-lg">
@ -82,10 +82,10 @@ layout: page
</div>
</div>
</div>
<div class="items-center h-full mt-64">
<div class="items-center h-full mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto">
<div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
<div class="ml-0 lg:ml-32 lg:hidden self-center">
<img src="{{ site.img_url }}page-specific/spn/metadata.gif" alt="">
</div>
<div class="inline-block max-w-lg">
@ -102,10 +102,10 @@ layout: page
</div>
</div>
</div>
<div class="items-center h-full mt-64">
<div class="items-center h-full mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto items-center">
<div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
<div class="ml-0 lg:ml-32 lg:hidden self-center">
<img src="{{ site.img_url }}page-specific/spn/network.png" alt="">
</div>
<div class="inline-block max-w-lg">
@ -132,10 +132,10 @@ layout: page
</div>
</div>
</div>
<div class="items-center h-full mt-64">
<div class="items-center h-full mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex items-center">
<div class="pb-16 lg:pb-0 m0-0 lg:mr-48 self-center">
<div class="lg:pb-0 m0-0 lg:mr-48 self-center">
<img src="{{ site.img_url }}page-specific/spn/switch.gif" alt="">
</div>
<div class="inline-block max-w-lg">
@ -160,7 +160,7 @@ layout: page
</div>
</div>
</section>
<section style="margin-top: 13rem;">
<section class="mt-16 lg:mt-48">
<div class="items-center h-full">
<div id="Pricing">
<div class="max-w-full mx-auto px-4 sm:px-6">
@ -230,7 +230,7 @@ layout: page
</div>
</div>
</section>
<section style="margin-top: 6rem;" class="pb-48 ">
<section class="mb-16 lg:pb-32">
<div class="bg-white">
<div class="max-w-screen-xl mx-auto pt-12 pb-16 sm:pt-16 sm:pb-20 px-4 sm:px-6 lg:pt-20 lg:pb-28 lg:px-8">
<div class="text-center pb-12">