vikarti.anatra/safing-web
1
0
Fork 0
mirror of https://github.com/safing/web synced 2025-09-01 10:39:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Update all texts of the front page

Browse source
This commit is contained in:
davegson 2020-05-16 14:03:20 +02:00
parent 82c430acda
commit c5169c39d5
3 changed files with 56 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_includes/header.html
View file

@ -9,7 +9,7 @@
<span style="color: #6188ff;">Fight surveillance</span> because you <span style="color: #6188ff;">love&nbsp;freedom</span>.
</h2>
<p style="max-width: 440px;" class="text-md opacity-50 max-w-4xl mx-auto lg:mx-0">
Without privacy there is no free press, no free speech,
Without privacy there is no freedom of press, no freedom of speech,
not even freedom of thought. Take back your freedom.
</p>
<div class="py-10 lg:py-10 lg:flex text-center">

2
_sass/_global.scss
View file

@ -99,7 +99,7 @@ footer {
}
.heart {
animation: .8s infinite beatHeart;
// animation: .8s infinite beatHeart;
}
@keyframes beatHeart {

181
index.html
View file

@ -11,9 +11,9 @@ title: Safing
<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">
<div class="inline-block max-w-3xl text-center md:text-left">
<h2 class="text-5xl w-1/1 tracking-tight font-extrabold leading-none py-10">What are the tools we make?</h2>
<h2 class="text-5xl w-1/1 tracking-tight font-extrabold leading-none py-10">Engage the problem at <span style="color: #6188ff;">the core</span></h2>
<p class="text-md opacity-50">
Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators and VPNs from collecting all your personal [meta] data. Secure your whole computer, not only your web-browser.
The Internet is one of the most beautiful things there is. But every connection has the potential to betray you, leaking personal information you never wanted to share. That's where we intercept.
</p>
</div>
</div>
@ -29,11 +29,25 @@ title: Safing
</svg>
</div>
<div class="mt-4 ml-4">
<h5 class="text-2xl leading-6 font-bold text-gray-900">Privacy</h5>
<h5 class="text-2xl leading-6 font-bold text-gray-900">Open Source</h5>
<p class="mt-4 text-base leading-6 opacity-50 max-w-sm m-auto">
Stay private while surfing the
Web with you are in charge of
where.
Your kernel should only be modified and extended in the open, so you are able to <a href="{{ site.github_url }}"><u>validate the code behind our claims</u></a>.
</p>
</div>
</li>
<li class="pt-10 md:pt-0 transform transition hover:scale-105 duration-150 ease-in-out">
<div class="flex items-center justify-center pl-2 md:pl-0 h-12 md:w-12 w-auto">
<svg class="heart h-8 w-8" stroke="#446eed" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 5.711C12.689 4.905 13.881 4 15.696 4 18.871 4 21 6.98 21 9.755 21 15.556 13.778 20 12 20c-1.778 0-9-4.444-9-10.245C3 6.98 5.129 4 8.304 4c1.815 0 3.007.905 3.696 1.711z" stroke-linecap="round" stroke-width="1.8" fill="none"
stroke-linejoin="round" />
</svg>
</div>
<div class="mt-4 ml-4">
<h5 class="text-2xl leading-6 font-bold text-gray-900">Out of Principle</h5>
<p class="mt-4 text-base leading-6 opacity-50 max-w-sm m-auto">
The technology protecting you is only one part - a chain breaks at its weakest link.
<br/>
So have a good <a href="{{ site.about_url }}"><u>look at who we are</u></a>.
</p>
</div>
</li>
@ -46,27 +60,9 @@ title: Safing
</svg>
</div>
<div class="mt-4 ml-4">
<h5 class="text-2xl leading-6 font-bold text-gray-900">Privacy</h5>
<p class="mt-4 mt-2 text-base leading-6 opacity-50 max-w-sm m-auto">
Stay private while surfing the
Web with you are in charge of
where.
</p>
</div>
</li>
<li class="pt-10 md:pt-0 transform transition hover:scale-105 duration-150 ease-in-out">
<div class="flex items-center justify-center pl-2 md:pl-0 h-12 md:w-12 w-auto">
<svg class="heart h-8 w-8" stroke="#446eed" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 5.711C12.689 4.905 13.881 4 15.696 4 18.871 4 21 6.98 21 9.755 21 15.556 13.778 20 12 20c-1.778 0-9-4.444-9-10.245C3 6.98 5.129 4 8.304 4c1.815 0 3.007.905 3.696 1.711z" stroke-linecap="round" stroke-width="1.8" fill="none"
stroke-linejoin="round" />
</svg>
</div>
<div class="mt-4 ml-4">
<h5 class="text-2xl leading-6 font-bold text-gray-900">Privacy</h5>
<p class="mt-4 mt-2 text-base leading-6 opacity-50 max-w-sm m-auto">
Stay private while surfing the
Web with you are in charge of
where.
<h5 class="text-2xl leading-6 font-bold text-gray-900">One of Many</h5>
<p class="mt-4 text-base leading-6 opacity-50 max-w-sm m-auto">
Privacy is complex. We are just one piece of your puzzle. Still, help us improve that piece and <a href="#footer"><u>become a part of the venture</u></a>!
</p>
</div>
</li>
@ -87,15 +83,12 @@ title: Safing
<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>
<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-50 max-w-lg">
Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators
and VPNs from collecting all your personal [meta] data. Secure
your whole computer, not only your web-browser.
Cut out the middleman. Secure all your meta-data by decoupling yourself from your destination, inspired by Tor. Protect your whole computer, not only your browser. <span class="text-xs">Yes, we know Tails exists.</span>
</p>
<div class="py-10 lg:flex text-center sm:text-left inline-block">
<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">
<a href="/spn.html">Discover the spn</a>
<a href="{{ site.spn_url }}">Discover the SPN</a>
</button>
<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="#">Source code</a>
</div>
</div>
<div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
@ -113,15 +106,13 @@ title: Safing
<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">
Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators
and VPNs from collecting all your personal [meta] data. Secure
your whole computer, not only your web-browser.
Enforce DNS-over-TLS and block domains on a system level. Protect your whole computer, not only your browser, with different features of the Portmaster. Free to use, open source.
</p>
<div class="py-10 md:flex text-center md:text-left inline-block">
<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">
<a href="/portmaster.html">Discover the Portmaster</a>
<a href="{{ site.portmaster_url }}">Discover the Portmaster</a>
</button>
<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="#">Source code</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/">Github Repo</a>
</div>
</div>
</div>
@ -129,26 +120,7 @@ title: Safing
</div>
</div>
</section>
<section style="margin-top: 17rem;">
<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 text-center lg:text-left">
<div class="lg:w-2/3">
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10">You be the judge</h2>
</div>
<div class="self-center">
<p class="text-md opacity-50 w-auto mx-auto md:w-2/3">
Review and inspect everything we do and say: every page, every
podcast, every line of code, every strategic decision. If you do like
what we do, please consider helping us by contributing to the
Safing community.
</p>
</div>
</div>
</div>
</div>
</section>
<section style="margin-top: 20rem;">
<section style="margin-top: 20rem; margin-bottom: 10rem;">
<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">
@ -156,98 +128,53 @@ title: Safing
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<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">Follow Us</span>
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center">Blogs & Podcasts</h2>
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center" style="position: relative;">
<a href="{{ site.blog_url }}">Blog,</a>
<a href="{{ site.podcast_url }}">Podcast</a>
&
<a href="{{ site.invidious_channel_url }}">Videos</a>
</h2>
</div>
<div class="mt-32">
<ul class="md:grid md:grid-cols-2 lg:grid-cols-3 md:col-gap-8 md:row-gap-10">
<li>
<div class="block transform hover:scale-95 duration-150 ease-in-out">
<a href="">
<img src="{{ site.img_url }}shapes/podcast_blank.png" alt="">
<div class="pt-6">
<span class="opacity-25">4 FEB 2020</span>
<p>The Two Steps it takes</p>
</div>
</a>
</div>
</li>
<li class="mt-10 md:mt-0">
<div class="block transform hover:scale-95 duration-150 ease-in-out">
<a href="">
<img src="{{ site.img_url }}shapes/podcast_blank.png" alt="">
<a href="/podcast/2020/05/11/the-risks-of-paying-with-cash/">
<img src="/assets/img/shapes/podcast_blank.png" alt="">
<span style="font-size: 12rem; font-weight: 800; margin-top: -13.8rem; margin-left: -0.8rem;" class=" z-0 absolute bg-top">
<button type="button" style="background-color: #6188ff;" class="inline-flex items-center px-4 py-4 rounded-md border border-transparent text-xs leading-5 font-extrabold text-white">
<svg class="h-8 w-auto lg:h-5 fill-current text-white" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.41 11">
<path d="M8.43 4.62l-6.34-4A1 1 0 00.5 1.5v8a1 1 0 001.59.88l6.34-4a1 1 0 000-1.76z" stroke-miterlimit="10" /></svg>
<path d="M8.43 4.62l-6.34-4A1 1 0 00.5 1.5v8a1 1 0 001.59.88l6.34-4a1 1 0 000-1.76z" stroke-miterlimit="10"></path></svg>
</button>
</span>
<div class="pt-6">
<span class="opacity-25">4 FEB 2020</span>
<p>The Two Steps it takes</p>
<span class="opacity-25">PODCAST - 11. May 2020</span>
<p>The Risks of Paying with Cash - #21</p>
</div>
</a>
</div>
</li>
<li class="mt-10 md:mt-0">
<div class="block transform hover:scale-95 duration-150 ease-in-out">
<a href="">
<img src="{{ site.img_url }}shapes/podcast_blank.png" alt="">
<div class="pt-6">
<span class="opacity-25">4 FEB 2020</span>
<p>The Two Steps it takes</p>
</div>
</a>
</div>
</li>
<li class="mt-10 md:mt-0">
<div class="block transform hover:scale-95 duration-150 ease-in-out">
<a href="">
<img src="{{ site.img_url }}shapes/podcast_blank.png" alt="">
<span style="font-size: 12rem; font-weight: 800; margin-top: -13.8rem; margin-left: -0.8rem;" class=" z-0 absolute bg-top">
<button type="button" style="background-color: #6188ff;" class="inline-flex items-center px-4 py-4 rounded-md border border-transparent text-xs leading-5 font-extrabold text-white">
<svg class="h-8 w-auto lg:h-5 fill-current text-white" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.41 11">
<path d="M8.43 4.62l-6.34-4A1 1 0 00.5 1.5v8a1 1 0 001.59.88l6.34-4a1 1 0 000-1.76z" stroke-miterlimit="10" /></svg>
</button>
</span>
<div class="pt-6">
<span class="opacity-25">4 FEB 2020</span>
<p>The Two Steps it takes</p>
</div>
</a>
</div>
</li>
<li class="mt-10 md:mt-0">
<div class="block transform hover:scale-95 duration-150 ease-in-out">
<a href="">
<img src="{{ site.img_url }}shapes/podcast_blank.png" alt="">
<span style="font-size: 12rem; font-weight: 800; margin-top: -13.8rem; margin-left: -0.8rem;" class=" z-0 absolute bg-top">
<button type="button" style="background-color: #6188ff;" class="inline-flex items-center px-4 py-4 rounded-md border border-transparent text-xs leading-5 font-extrabold text-white">
<svg class="h-8 w-auto lg:h-5 fill-current text-white" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.41 11">
<path d="M8.43 4.62l-6.34-4A1 1 0 00.5 1.5v8a1 1 0 001.59.88l6.34-4a1 1 0 000-1.76z" stroke-miterlimit="10" /></svg>
</button>
</span>
<div class="pt-6">
<span class="opacity-25">4 FEB 2020</span>
<p>The Two Steps it takes</p>
</div>
</a>
</div>
</li>
<li class="mt-10 md:mt-0">
<div class="block transform hover:scale-95 duration-150 ease-in-out">
<img src="{{ site.img_url }}shapes/podcast_blank.png" alt="">
<video src="{{ site.assets_server_url }}video/progress_updates/4.mp4" controls></video>
<div class="pt-6">
<span class="opacity-25">4 FEB 2020</span>
<p>The Two Steps it takes</p>
<span class="opacity-25">VIDEO - 8. May 2020</span>
<p>The Account Server is up and running - #4</p>
</div>
</div>
</li>
<li>
<a href="/blog/2020/01/22/how-the-spn-compares-to-tor/">
<div class="block transform hover:scale-95 duration-150 ease-in-out">
<img src="/assets/img/shapes/podcast_blank.png" alt="">
<div class="pt-6">
<span class="opacity-25">BLOG - 22. Jan 2020</span>
<p>How the SPN compares to Tor</p>
</div>
</div>
</a>
</li>
</ul>
<div class="py-20 text-center">
<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">
<a href="/blogpod.html">Show me more!</a>
</button>
</div>
</div>
</div>
</div>