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

Fix wrapping of features inside features

Browse source
This commit is contained in:
davegson 2020-05-20 09:57:18 +02:00
parent 5d1a50dda6
commit 7b80493d42
4 changed files with 151 additions and 157 deletions

95
about/index.html
View file

@ -38,62 +38,57 @@ redirect_from:
</div>
</div>
</div>
<div class="items-center h-full 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">
<div class="absolute bg-white w-48 text-center mx-auto leading-tight p-3">
<span class="text-2xl font-extrabold">Get to know some of us.</span>
</div>
<video src="{{ site.assets_server_url }}video/interview_sessions/1/daniel.mp4" controls></video>
<div class="items-center h-full 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">
<div class="absolute bg-white w-48 text-center mx-auto leading-tight p-3">
<span class="text-2xl font-extrabold">Get to know some of us.</span>
</div>
<div class="mx-auto grid md:grid-cols-2 gap-8 lg:pl-8 lg:pt-0 transform scale-90">
<div class="mx-auto transform hover:scale-95 duration-150 ease-in-out">
<video src="{{ site.assets_server_url }}video/interview_sessions/1/david.mp4" controls></video>
</div>
<div class="mx-auto transform hover:scale-95 duration-150 ease-in-out">
<video src="{{ site.assets_server_url }}video/interview_sessions/1/tabitha.mp4" controls></video>
</div>
<div class="mx-auto transform hover:scale-95 duration-150 ease-in-out">
<video src="{{ site.assets_server_url }}video/interview_sessions/1/raphael.mp4" controls></video>
</div>
<div class="mx-auto transform hover:scale-95 duration-150 ease-in-out">
<video src="{{ site.assets_server_url }}video/interview_sessions/1/martin.mp4" controls></video>
</div>
<video src="{{ site.assets_server_url }}video/interview_sessions/1/daniel.mp4" controls></video>
</div>
<div class="mx-auto grid md:grid-cols-2 gap-8 lg:pl-8 lg:pt-0 transform scale-90">
<div class="mx-auto transform hover:scale-95 duration-150 ease-in-out">
<video src="{{ site.assets_server_url }}video/interview_sessions/1/david.mp4" controls></video>
</div>
<div class="mx-auto transform hover:scale-95 duration-150 ease-in-out">
<video src="{{ site.assets_server_url }}video/interview_sessions/1/tabitha.mp4" controls></video>
</div>
<div class="mx-auto transform hover:scale-95 duration-150 ease-in-out">
<video src="{{ site.assets_server_url }}video/interview_sessions/1/raphael.mp4" controls></video>
</div>
<div class="mx-auto transform hover:scale-95 duration-150 ease-in-out">
<video src="{{ site.assets_server_url }}video/interview_sessions/1/martin.mp4" controls></video>
</div>
</div>
</div>
<div class="items-center h-full 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">
<img src="{{ site.img_url }}page-specific/about/safing-hand.gif" alt="">
</div>
<div class="inline-block max-w-lg">
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-auto">
Ownership & Transparent Funding
</h2>
<p class="text-md opacity-50 max-w-lg">
Taking money always means opening up to influences. Therefore, we see it as our duty to not only be open about our ownership, but also about how we are financing this venture.
</p>
<div class="py-10 flex">
<a href="{{ site.ownership_url }}">
<button type="button" style="background-color: #000;" class="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">
Explore our influences
</button>
</a>
</div>
</div>
<div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
<img src="{{ site.img_url }}page-specific/about/safing-hand.gif" alt="">
</div>
</div>
</div>
<div class="items-center h-full 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">
<img src="{{ site.img_url }}page-specific/about/safing-hand.gif" alt="">
</div>
<div class="inline-block max-w-lg">
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-auto">
Ownership & Transparent Funding
</h2>
<p class="text-md opacity-50 max-w-lg">
Taking money always means opening up to influences. Therefore, we see it as our duty to not only be open about our ownership, but also about how we are financing this venture.
</p>
<div class="py-10 flex">
<a href="{{ site.ownership_url }}">
<button type="button" style="background-color: #000;" class="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">
Explore our influences
</button>
</a>
</div>
</div>
<div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
<img src="{{ site.img_url }}page-specific/about/safing-hand.gif" alt="">
</div>
</div>
</div>
</div>
</section>

40
index.html
View file

@ -96,26 +96,26 @@ title: Safing
</div>
</div>
</div>
<div class="items-center h-full 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>
<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-50 max-w-lg">
Enforce DNS-over-TLS and block domains on a system wide level. Protect your whole computer, not only your browser. Free to use.
</p>
<div class="py-10 md:flex text-center md:text-left inline-block">
<a href="{{ site.portmaster_url }}">
<button type="button" style="background-color: #000;" class="mb-5 md:mb-0 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">
Discover the Portmaster
</button>
</a>
<a class="inline-flex pl-8 transition duration-150 ease-in-out hover:opacity-100 self-center uppercase opacity-50 text-xs font-bold" href="{{ site.github_url }}/portmaster/">Source Code</a>
</div>
</div>
<div class="items-center h-full 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>
<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-50 max-w-lg">
Enforce DNS-over-TLS and block domains on a system wide level. Protect your whole computer, not only your browser. Free to use.
</p>
<div class="py-10 md:flex text-center md:text-left inline-block">
<a href="{{ site.portmaster_url }}">
<button type="button" style="background-color: #000;" class="mb-5 md:mb-0 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">
Discover the Portmaster
</button>
</a>
<a class="inline-flex pl-8 transition duration-150 ease-in-out hover:opacity-100 self-center uppercase opacity-50 text-xs font-bold" href="{{ site.github_url }}/portmaster/">Source Code</a>
</div>
</div>
</div>

53
ownership/index.html
View file

@ -31,35 +31,34 @@ layout: page
</div>
</div>
</div>
<div class="items-center h-full 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">
<img src="{{ site.img_url }}page-specific/ownership/influences.gif" alt="">
</div>
<div class="inline-block max-w-lg">
<h2 style="line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10">
Financed by Grants, Loans and <span style="color: #6188ff;">You</span>
</h2>
<p class="text-md opacity-50 max-w-lg">
We are thankful for all the partnerships & possibilities that emerged from our R&D heavy years in which we explored new privacy frontiers.
</p>
<p class="text-md opacity-50 max-w-lg pt-4">
Slowly but surely we are migrating into our dream scenario where we only have to rely on the support and trust of our users. Help us get there by using and <a href="{{ site.spn_url }}#pricing"><u>purchasing our privacy software</u></a>.
</p>
<div class="py-10 flex">
<a href="#influences">
<button type="button" style="background-color: #000;" class="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">
Explore the details
</button>
</a>
</div>
</div>
<div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
<img src="{{ site.img_url }}page-specific/ownership/influences.gif" alt="">
</div>
<div class="items-center h-full 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">
<img src="{{ site.img_url }}page-specific/ownership/influences.gif" alt="">
</div>
<div class="inline-block max-w-lg">
<h2 style="line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10">
Financed by Grants, Loans and <span style="color: #6188ff;">You</span>
</h2>
<p class="text-md opacity-50 max-w-lg">
We are thankful for all the partnerships & possibilities that emerged from our R&D heavy years in which we explored new privacy frontiers.
</p>
<p class="text-md opacity-50 max-w-lg pt-4">
Slowly but surely we are migrating into our dream scenario where we only have to rely on the support and trust of our users. Help us get there by using and <a href="{{ site.spn_url }}#pricing"><u>purchasing our privacy software</u></a>.
</p>
<div class="py-10 flex">
<a href="#influences">
<button type="button" style="background-color: #000;" class="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">
Explore the details
</button>
</a>
</div>
</div>
<div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
<img src="{{ site.img_url }}page-specific/ownership/influences.gif" alt="">
</div>
</div>
</div>
</div>

120
portmaster/index.html
View file

@ -44,7 +44,7 @@ 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">
<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">
@ -73,69 +73,69 @@ redirect_from:
</div>
</div>
</div>
<div class="items-center h-full 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">
<img src="{{ site.img_url }}page-specific/portmaster/control.png" alt="">
</div>
<div class="inline-block max-w-lg">
<h2 style="max-width: 400px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10">
Global & per&#8209;App Configuration
</h2>
<p class="text-md opacity-50 max-w-lg">
Cut off apps from the Internet entirely, block system processes or limit applications to specific domains only.
</p>
<p class="text-md opacity-50 max-w-lg pt-4">
With the Portmaster, your power becomes limitless.
</p>
</div>
</div>
<div class="items-center h-full 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">
<img src="{{ site.img_url }}page-specific/portmaster/control.png" alt="">
</div>
<div class="inline-block max-w-lg">
<h2 style="max-width: 400px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10">
Global & per&#8209;App Configuration
</h2>
<p class="text-md opacity-50 max-w-lg">
Cut off apps from the Internet entirely, block system processes or limit applications to specific domains only.
</p>
<p class="text-md opacity-50 max-w-lg pt-4">
With the Portmaster, your power becomes limitless.
</p>
</div>
</div>
</div>
<div class="items-center h-full 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">
<img src="{{ site.img_url }}page-specific/portmaster/tls.png" alt="">
</div>
<div class="inline-block max-w-lg">
<h2 style="line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">
Enforce DNS&#8209;over&#8209;TLS
</h2>
<p class="text-md opacity-50 max-w-lg">
Even with invasive connections gone, you might not want to share your dns requests out in the open. With the Portmaster, you can easily re-route all your dns queries to a DNS-over-TLS provider of your choice.
</p>
</div>
<div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
<img src="{{ site.img_url }}page-specific/portmaster/tls.png" alt="">
</div>
</div>
<div class="items-center h-full 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">
<img src="{{ site.img_url }}page-specific/portmaster/tls.png" alt="">
</div>
<div class="inline-block max-w-lg">
<h2 style="line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">
Enforce DNS&#8209;over&#8209;TLS
</h2>
<p class="text-md opacity-50 max-w-lg">
Even with invasive connections gone, you might not want to share your dns requests out in the open. With the Portmaster, you can easily re-route all your dns queries to a DNS-over-TLS provider of your choice.
</p>
</div>
<div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
<img src="{{ site.img_url }}page-specific/portmaster/tls.png" alt="">
</div>
</div>
</div>
<div class="items-center h-full 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">
<img src="{{ site.img_url }}page-specific/portmaster/modular.png" alt="">
</div>
<div class="inline-block max-w-lg">
<h2 style="max-width: 470px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10 ">
Modular Design From The Start
</h2>
<p class="text-md opacity-50 max-w-lg">
One shoe does not fit all. That is why you can enable or disable privacy features at your will. And the best thing? Everything is FOSS, free and open-source software.
</p>
<p class="text-md opacity-50 max-w-lg pt-4">
You can use all local features free of charge as well, only the coolest one, the SPN, requires a subscription to unlock.
</p>
<div class="py-10 flex">
<a href="{{ site.spn_url }}">
<button type="button" style="background-color: #000;" class="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">
Discover the SPN
</button>
</a>
</div>
</div>
<div class="items-center h-full 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">
<img src="{{ site.img_url }}page-specific/portmaster/modular.png" alt="">
</div>
<div class="inline-block max-w-lg">
<h2 style="max-width: 470px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10 ">
Modular Design From The Start
</h2>
<p class="text-md opacity-50 max-w-lg">
One shoe does not fit all. That is why you can enable or disable privacy features at your will. And the best thing? Everything is FOSS, free and open-source software.
</p>
<p class="text-md opacity-50 max-w-lg pt-4">
You can use all local features free of charge as well, only the coolest one, the SPN, requires a subscription to unlock.
</p>
<div class="py-10 flex">
<a href="{{ site.spn_url }}">
<button type="button" style="background-color: #000;" class="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">
Discover the SPN
</button>
</a>
</div>
</div>
</div>
@ -210,8 +210,8 @@ redirect_from:
<div class="support" class="max-w-screen-lg mx-auto" style="margin-bottom: 6rem; margin-top: 6rem;">
<h2 class="line text-md opacity-50 text-xl"><span>Support</span></h2>
<p class="pt-12 max-w-lg mx-auto text-center font-medium">
Please report technical issues on the <a class="link" href="#">portmaster</a>
repository, problems with the user interface on the <a class="link" href="">portmaster-ui</a>
Please report technical issues on the <a class="link" href="#">portmaster</a>
repository, problems with the user interface on the <a class="link" href="">portmaster-ui</a>
repo and ask for help on <a class="link" href=""></a>Reddit
</p>
</div>