mirror of
https://github.com/safing/web
synced 2025-09-01 18:49:06 +00:00
Merge branch 'fix/design-tweaks' into develop
This commit is contained in:
davegson
commit
5d1a50dda6
15 changed files with 125 additions and 34 deletions
|
|
@ -21,7 +21,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="lg:pb-0 lg:ml-0">
|
||||
<img class="absolute mx-auto left-0 right-0 text-center lg:relative max-w-sm sm:max-w-sm lg:max-w-md transform lg:scale-150 lg:ml-16" src="{{ site.img_url }}freedom.gif" alt="">
|
||||
<img style="margin-top: 3.5rem;" class="md:pr-1 absolute mx-auto left-0 right-0 text-center lg:relative max-w-sm sm:max-w-sm lg:max-w-md transform lg:scale-150 lg:ml-16" src="{{ site.img_url }}freedom.gif" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -141,3 +141,45 @@ footer {
|
|||
transform: rotate(10deg);
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
width:100%;
|
||||
text-align:center;
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
|
||||
line-height:0.1em;
|
||||
margin:10px 0 20px;
|
||||
}
|
||||
.line span {
|
||||
background:#fff;
|
||||
padding:0 25px;
|
||||
}
|
||||
|
||||
.support p{
|
||||
color: #8a8a8a;
|
||||
}
|
||||
|
||||
.support a{
|
||||
--text-opacity: 1;
|
||||
color: #667eea;
|
||||
color: rgba(102, 126, 234, var(--text-opacity));
|
||||
text-decoration: inherit;
|
||||
background-color: transparent;
|
||||
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
|
||||
}
|
||||
|
||||
.support a:hover{
|
||||
opacity: .5;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
|
||||
.grayscale {
|
||||
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
|
||||
filter: gray; /* IE5+ */
|
||||
-webkit-filter: grayscale(0); /* Webkit Nightlies & Chrome Canary */
|
||||
}
|
||||
|
||||
.grayscale:hover {
|
||||
filter: none;
|
||||
-webkit-filter: grayscale(1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,32 +7,39 @@ redirect_from:
|
|||
|
||||
<header style="padding-top: 12rem;"></header>
|
||||
<section style="margin-top: 3rem;" class="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">
|
||||
<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/about/safing-hand.gif" alt="">
|
||||
<img src="{{ site.img_url }}page-specific/about/team_overview.png" 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 class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-3/4">
|
||||
We <span style="color: #6188ff;">love freedom</span>, just like you.
|
||||
</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.
|
||||
We are a bunch of ordinary people who want to change the world. Discontent with the global state of mass surveillance, and seeing how it negatively impacts our lives, we decided it was time to do something about it.
|
||||
</p>
|
||||
<p class="text-md opacity-50 max-w-lg pt-4">
|
||||
We still have a long way to go. We hope you'll <a href="#footer"><u>join us on this venture</u>.</a>
|
||||
</p>
|
||||
<div class="py-10 flex">
|
||||
<a href="{{ site.ownership_url }}">
|
||||
<a href="{{ site.team_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
|
||||
View Team Overview
|
||||
</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="">
|
||||
<img src="{{ site.img_url }}page-specific/about/team_overview.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="items-center h-full mt-64">
|
||||
<div class="container mx-auto px-8 sm:px-0 flex">
|
||||
|
|
@ -59,36 +66,34 @@ 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 block justify-center m-auto w-auto items-center">
|
||||
<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/team_overview.png" alt="">
|
||||
<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-3/4">
|
||||
We <span style="color: #6188ff;">love freedom</span>, just like you.
|
||||
<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">
|
||||
We are a bunch of ordinary people who want to change the world. Discontent with the global state of mass surveillance, and seeing how it negatively impacts our lives, we decided it was time to do something about it.
|
||||
</p>
|
||||
<p class="text-md opacity-50 max-w-lg pt-4">
|
||||
We still have a long way to go. We hope you'll <a href="#footer"><u>join us on this venture</u>.</a>
|
||||
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.team_url }}">
|
||||
<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">
|
||||
View Team Overview
|
||||
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/team_overview.png" alt="">
|
||||
<img src="{{ site.img_url }}page-specific/about/safing-hand.gif" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
BIN
assets/img/blog/4.png
Normal file
BIN
assets/img/blog/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
BIN
assets/img/blog/pod-21.png
Normal file
BIN
assets/img/blog/pod-21.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
assets/img/blog/spn-tor.png
Normal file
BIN
assets/img/blog/spn-tor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
assets/img/blog/spn-tor1.png
Normal file
BIN
assets/img/blog/spn-tor1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
assets/img/blog/spn-tor2.png
Normal file
BIN
assets/img/blog/spn-tor2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 21 KiB |
BIN
assets/img/placeholder.png
Normal file
BIN
assets/img/placeholder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 287 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 153 KiB After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 42 KiB |
45
index.html
45
index.html
|
|
@ -139,15 +139,24 @@ title: Safing
|
|||
</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">
|
||||
<!-- podcast -->
|
||||
<li class="mt-10 md:mt-0">
|
||||
<div class="block transform hover:scale-95 duration-150 ease-in-out">
|
||||
<a href="/podcast/2020/05/11/the-risks-of-paying-with-cash/">
|
||||
<img src="/assets/img/shapes/podcast_blank.png" alt="">
|
||||
<img class="grayscale" src="/assets/img/blog/pod-21.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"></path></svg>
|
||||
</button>
|
||||
<button type="button" style="background-color: #6188ff;" class="inline-flex items-center px-3 py-3 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"></path>
|
||||
</svg> -->
|
||||
<svg class="h-8 w-auto lg:h-7" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none">
|
||||
<path d="M0 0h24v24H0z"/>
|
||||
<path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 15v0c-1.657 0-3-1.343-3-3V6c0-1.657 1.343-3 3-3v0c1.657 0 3 1.343 3 3v6c0 1.657-1.343 3-3 3z"/>
|
||||
<path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M18 10v2c0 3.314-2.686 6-6 6v0c-3.314 0-6-2.686-6-6v-2M12 18v3M7.82 21h8.36"/>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
<div class="pt-6">
|
||||
<span class="opacity-25">PODCAST - 11. May 2020</span>
|
||||
|
|
@ -156,7 +165,8 @@ title: Safing
|
|||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mt-10 md:mt-0">
|
||||
<!-- video -->
|
||||
<!-- <li class="mt-10 md:mt-0">
|
||||
<div class="block transform hover:scale-95 duration-150 ease-in-out">
|
||||
<video src="{{ site.assets_server_url }}video/progress_updates/4.mp4" controls></video>
|
||||
<div class="pt-6">
|
||||
|
|
@ -164,11 +174,32 @@ title: Safing
|
|||
<p>The Account Server is up and running - #4</p>
|
||||
</div>
|
||||
</div>
|
||||
</li> -->
|
||||
|
||||
<li class="mt-10 md:mt-0">
|
||||
<div class="block transform hover:scale-95 duration-150 ease-in-out">
|
||||
<a href="/podcast/2020/05/11/the-risks-of-paying-with-cash/">
|
||||
<img class="grayscale" src="/assets/img/blog/4.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"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
<div class="pt-6">
|
||||
<span class="opacity-25">VIDEO - 8. May 2020</span>
|
||||
<p>The Account Server is up and running - #4</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- blog -->
|
||||
<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="">
|
||||
<img class="grayscale" src="/assets/img/blog/spn-tor2.png" alt="">
|
||||
<div class="pt-6">
|
||||
<span class="opacity-25">BLOG - 22. Jan 2020</span>
|
||||
<p>How the SPN compares to Tor</p>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,8 @@ redirect_from:
|
|||
</div>
|
||||
</div>
|
||||
<div class="pt-24 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>
|
||||
<!-- <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>
|
||||
<span style="margin-top: -45rem; margin-left: -8rem; z-index: -1;" class="absolute transform scale-50 lg:scale-105 xl:scale-150 bg-cover opacity-75 hidden lg:block">
|
||||
<img src="{{ site.img_url }}page-specific/portmaster/wave.png" alt="">
|
||||
|
|
@ -206,10 +207,21 @@ redirect_from:
|
|||
</a>
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
repo and ask for help on <a class="link" href=""></a>Reddit
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-center lg:text-left lg:inline-flex items-center mt-16 mb-16 spn-shadow p-10 rounded-lg ml-0 mr-0 md:ml-32 md:mr-32">
|
||||
<div class="max-w-screen-lg mx-auto">
|
||||
<h2 class="line text-md opacity-50 text-xl"><span>Limted Support</span></h2>
|
||||
</div>
|
||||
<div class="text-center lg:text-left lg:inline-flex items-center mt-12 mb-16 spn-shadow p-10 rounded-lg ml-0 mr-0 md:ml-32 md:mr-32">
|
||||
<div class="flex items-center justify-center pl-2 md:pl-0 h-12 md:w-12 w-auto mr-auto ml-auto">
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg class="h-8 w-8" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none">
|
||||
<path d="M0 0h24v24H0z" />
|
||||
<path stroke="#e28d8d" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 13.12V9.38M11.999 16.125c-.138 0-.25.112-.249.25 0 .138.112.25.25.25s.25-.112.25-.25-.112-.25-.251-.25" />
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ layout: page
|
|||
---
|
||||
|
||||
<header class="h-screen pt-32">
|
||||
<img class="-z-0 pt-16 absolute hidden md:block" style="z-index: -1;" src="{{ site.img_url }}shapes/corner-tl.png" alt="">
|
||||
<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">
|
||||
<div class="container mx-auto px-8 sm:px-0 flex">
|
||||
|
|
@ -13,8 +13,9 @@ layout: page
|
|||
<span style="font-size: 12rem; font-weight: 800; margin-top: -5rem; margin-left: 6rem; z-index: -1;" class="absolute transform scale-50 lg:scale-125">
|
||||
<img src="{{ site.img_url }}shapes/circle-md.png" alt="">
|
||||
</span>
|
||||
<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 max-w-full max-h-auto transform scale-70" height="1220" width="1220" playsinline="" preload="auto" src="{{ site.assets_url }}video/interim.mp4"
|
||||
controls muted loop></video>
|
||||
<!-- <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 max-w-full max-h-auto transform scale-70" height="1220" width="1220" playsinline="" preload="auto" src="{{ site.assets_url }}video/interim.mp4"
|
||||
controls muted loop></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 max-w-full max-h-auto transform scale-70" height="1220" width="1220" src="{{ site.img_url }}/placeholder.png" alt="">
|
||||
<span style="font-size: 12rem; font-weight: 800; margin-top: -4.5rem; margin-left: -3rem; z-index: -1;" class="absolute transform scale-50 lg:scale-125">
|
||||
<img src="{{ site.img_url }}shapes/circle-sm.png" alt="">
|
||||
</span>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue