Add notification bar

_sass/_global.scss

@@ -442,6 +442,20 @@ input:checked {
   animation: tooltips-vert 300ms ease-out forwards;
 }
 
+.notification {
+  z-index: -1;
+  position: absolute;
+  top: -100px;
+  animation: notification 0.5s forwards ease-in-out;
+  animation-delay: 0.1s;
+}
+
+@keyframes notification {
+  100% { 
+    position: relative;
+    top: 0; 
+  }
+}
 
 // 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

portmaster/index.html

@@ -6,6 +6,9 @@ redirect_from:
 - /download/
 ---
 
+<div class="notification w-full text-center text-white p-2" style="background-color: #6188ff;">
+  <span class="mx-auto w-auto text-sm ">Alpha - early software, expect hickups here and there.</span>
+</div>
 <header class="h-full my-20 md:my-40">
   <div class="flex items-center h-ful">
     <div class="h-full mx-auto ">

spn/index.html

@@ -3,6 +3,9 @@ title: Safing Privacy Network
 layout: page
 ---
 
+<div class="notification w-full text-center text-white p-2" style="background-color: #6188ff;">
+  <span class="mx-auto w-auto text-sm ">Pre-Alpha - not publicily available, that is why there are no screenshots of the software on this page. Follow Progress on "Next Page"</span>
+</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">