Added bigger banner, close button

src/layouts/partials/header.html

@@ -1,18 +1,69 @@
-<section class="countdown-section">
+
+
+<section class="countdown-section" id="countdown-section">
+  <button onclick="hideShow()" class="hide small" type="button" name="button">CLOSE</button>
   <div class="countdown-container">
-    <div class="countdown-contents"><p class="text-center countdown" id="something-new">A new brew's coming in <span id="demo"></span></p></div>
+    <div class="countdown-contents">
+      <p class="text-center display-1" id="demo"></p>
+      <p class="text-center authenticate display-6">Something big's brewing in Lisbon.</p>
+    </div>
   </div>
 </section>
 
 
      <style>
 
+       @media screen and (max-width: 576px) {
+
+         .hide{
+           position: absolute;
+           background-color:#1a1a1a !important;
+           border:none !important;
+           right: 5px;
+           top: 5px;
+           text-transform: uppercase;
+           color: #00ffd0;
+           z-index: 100;
+           opacity: 0.3;
+         }
+
+         .hide:hover{
+           opacity: 1;
+         }
+
+       }
+
+       @media screen and (min-width: 576px) {
+
+         .hide{
+           position: absolute;
+           background-color:#1a1a1a !important;
+           border:none !important;
+           right: 20px;
+           top: 20px;
+           text-transform: uppercase;
+           color: #00ffd0;
+           z-index: 100;
+           opacity: 0.3;
+         }
+
+         .hide:hover{
+           opacity: 1;
+         }
+
+       }
+
+
        @font-face {
          font-family: "pp-neue-machina";
          src: url("/fonts/PPNeueMachina-InktrapLight.woff") format("woff");
        }
 
-       #demo, .authenticate, #something-new{
+       .tea-logo{
+         width:20%;
+       }
+
+       #demo, .authenticate, #something-new, .hide{
          font-family: "pp-neue-machina", sans-serif;
        }
 
@@ -25,10 +76,11 @@
          background-color: #1a1a1a;
          position: relative;
          z-index: 100;
+         display: block;
        }
 
        .countdown-container{
-         height: 6vh;
+         height: 28vh;
          position: relative;
          width: 100%;
        }
@@ -109,6 +161,20 @@
 
     </style>
 
+    <script type="text/javascript">
+      function hideShow() {
+        var x = document.getElementById("countdown-section");
+        if (x.style.display === "none") {
+          x.style.display = "block";
+        } else {
+          x.style.display = "none";
+        }
+      }
+
+    </script>
+
+
+
     <a href="https://github.com/login/oauth/authorize?client_id=9d1f1a72f1300b6991df&state=teaxyz" class="gf-container" style="background-color:#8EC7BF;">
       <img src="/Images/github.svg" alt="" class="github-icon mx-auto">
 

src/static/Images/teal-x.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2.48 2.48"><defs><style>.cls-1{fill:#54baab;}</style></defs><g id="Layer_1-2"><path class="cls-1" d="M1.49,1.24l.93-.93c.07-.07,.07-.18,0-.25s-.18-.07-.25,0l-.93,.93L.3,.05C.24-.02,.12-.02,.05,.05S-.02,.24,.05,.3l.93,.93L.05,2.17c-.07,.07-.07,.18,0,.25,.03,.03,.08,.05,.13,.05s.09-.02,.13-.05l.93-.93,.93,.93s.08,.05,.13,.05,.09-.02,.13-.05c.07-.07,.07-.18,0-.25l-.93-.93Z"/></g></svg>