chore: remove hardcode css to hide site banner

fix: rollback top banner styles

Author: smarcet

summit/scss/general-summit-landing-page.scss

@@ -145,7 +145,7 @@ footer {
 @media (min-width: 767px) {
     .top-site-banner {
         height: 78px;
-        position: fixed; }
+       }
     .top-site-banner .container {
         flex-direction: row;
         justify-content: space-between;

themes/openstack/scss/combined.scss

@@ -2599,24 +2599,47 @@ ul.resource-links li a:hover {
 
 /* site banner */
 
+.top-site-banner-button {
+  border-radius: 5px;
+  border: 1px solid #2f729c;
+  font-size: 90%;
+  padding: 3px 10px 3px;
+  background-color: #2f729c;
+  display: inline-block;
+  color: white;
+  text-transform: uppercase;
+}
+
+.top-site-banner-button:visited{
+  color: white;
+}
+
+.top-site-banner-button:hover {
+  text-decoration: none;
+  background-color: #F0F9FE;
+  color: #2f729c;
+}
+
 .top-site-banner {
   position: relative;
-  top: 40px;
   left: 0;
   z-index: 20;
-  width: 100vw;
-  background-color: black;
-  height: 174px;
-  display: none;
+  background-color: #4D96C7;
+  color: #F0F9FE;
 }
 
 .top-site-banner .container {
   display: flex;
-  flex-direction: column;
-  padding: 20px 0;
+  padding: 10px 0;
   margin: 0 auto;
-  text-align: center;
-  max-width: 400px;
+  flex-direction: row;
+  text-align: left;
+  max-width: unset;
+}
+
+.top-site-banner .button{
+  margin-left: 20px;
+  margin-top: -2px;
 }
 
 .top-site-banner .container:before {
@@ -2628,7 +2651,7 @@ ul.resource-links li a:hover {
 }
 
 .top-site-banner .logo {
-  width: 180px;
+  width: 40px;
   margin: 0 auto;
 }
 
@@ -2660,18 +2683,41 @@ ul.resource-links li a:hover {
   margin: 10px 0;
 }
 
+@media (max-width: 767px) {
+  .top-site-banner .text{
+    margin: 10px 0 10px 5px;
+  }
+  .top-site-banner .button {
+    margin-top: 8px;
+  }
+  .top-site-banner .container{
+    padding: 0;
+  }
+}
+
+@media (max-width: 574px) {
+  .top-site-banner .text{
+    line-height: unset;
+  }
+  .top-site-banner-button{
+    width: 100px;
+    margin: 5px
+  }
+  .top-site-banner .button {
+    margin-top: 8px;
+  }
+}
+
 @media (min-width: 767px) {
   .top-site-banner {
-    height: 78px;
-    position: fixed;
+    height: 40px;
   }
 
   .top-site-banner .container {
     flex-direction: row;
-    justify-content: space-between;
     text-align: left;
     max-width: unset;
-    padding: 14px 0;
+    padding: 10px 0;
   }
 
   .top-site-banner .logo {
@@ -2680,7 +2726,6 @@ ul.resource-links li a:hover {
 
   .top-site-banner .text {
     margin: 0;
-    max-width: 400px;
   }
 
   .top-site-banner .btn {
@@ -2690,7 +2735,7 @@ ul.resource-links li a:hover {
 
 @media (min-width: 991px) {
   .top-site-banner .logo {
-    width: 246px;
+    width: 50px;
   }
 
   .top-site-banner .btn {
@@ -2700,7 +2745,6 @@ ul.resource-links li a:hover {
 
   .top-site-banner .text {
     font-size: 16px;
-    max-width: 525px;
   }
 }
 

themes/openstack/scss/home-page.scss

@@ -3688,7 +3688,6 @@ ul.resource-links li a:hover {
   width: 100vw;
   background-color: black;
   height: 174px;
-  display: none;
   @media (max-width: 768px) {
     top:0;
   }

themes/openstack/templates/Layout/Includes/SiteBanner.ss

@@ -7,14 +7,11 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 <!-- End Google Tag Manager (noscript) -->
 <div class="top-site-banner">
     <div class="container">
-        <div class="logo">
-            <img src="/themes/openstack/home_images/Logos/OpenInfra-Berlin2022.svg" />
-        </div>
         <div class="text">
-            Now you can watch the keynotes that took place during the OpenInfra Summit in Berlin!
+            OpenInfra Foundation Board Announces Intent to Join the Linux Foundation
         </div>
         <div class="button">
-            <a href="https://www.openstack.org/videos/summits/berlin-2022" class="btn btn-default">WATCH NOW!</a>
+            <a href="https://openinfra.org/blog/openinfra-linux-foundation-collaboration" target="_blank" class="top-site-banner-button">Learn More</a>
         </div>
     </div>
 </div>