Merge pull request #112 from safing/feature/status-notification

Status Notification
This commit is contained in:
Dave Gson 2021-01-21 12:43:22 +01:00 committed by GitHub
commit ff7b9baa18
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 33 additions and 1 deletions

View file

@ -442,6 +442,18 @@ input:checked {
animation: tooltips-vert 300ms ease-out forwards;
}
.notification {
position: relative;
opacity: 0;
animation: notification 0.5s forwards ease-in;
animation-delay: 0.1s;
}
@keyframes notification {
100% {
opacity: 1;
}
}
// This is a hacky way to solve this problem.
// I could not find away in tailwind to set a max of cols and to allow

View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g fill="none">
<path d="M0 0h24v24H0z"/>
<path stroke="#ffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 21v0c-4.971 0-9-4.029-9-9v0c0-4.971 4.029-9 9-9v0c4.971 0 9 4.029 9 9v0c0 4.971-4.029 9-9 9z"/>
<path stroke="#ffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 17v-5h-1M11.749 8c-.138 0-.25.112-.249.25 0 .138.112.25.25.25s.25-.112.25-.25-.112-.25-.251-.25"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 529 B

View file

@ -6,6 +6,12 @@ redirect_from:
- /download/
---
<div class="notification w-full text-center text-white p-2" style="background-color: #6188ff;">
<div class="mx-auto flex" style="width: max-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
<span class="w-auto text-sm">Portmaster is Alpha Software - expect hickups here and there</span>
</div>
</div>
<header class="h-full my-20 md:my-40">
<div class="flex items-center h-ful">
<div class="h-full mx-auto ">

View file

@ -3,6 +3,13 @@ title: Safing Privacy Network
layout: page
---
<div class="notification w-full text-center text-white p-2 " style="background-color: #6188ff;">
<div class="mx-auto flex" style="width: max-content;">
<img src="{{ site.img_url }}icons/info.svg" class="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>
<a href="/spn/#faq" class="underline text-sm self-center ml-2">Read FAQ</a>
</div>
</div>
<header class="h-full">
<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">
@ -229,7 +236,7 @@ layout: page
</div>
</div>
</section>
<section class="mb-16 lg:pb-32">
<section class="mb-16 lg:pb-32" id="faq">
<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">