[Site] Add Announcement bar to all website pages (#2889)

* Move announcement to site header * final touches
ionic-team · May 8, 2020 · e2c224c · e2c224c
1 parent 7f36412
commit e2c224c
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 93 deletions.
diff --git a/site/src/components/landing-page/landing-page.scss b/site/src/components/landing-page/landing-page.scss
@@ -8,6 +8,10 @@
   background-color: #0B1A24;
 }
 
+.landing-page .announcement a {
+  color: #fff;
+}
+
 landing-page {
   display: block;
   color: #fff;
@@ -23,87 +27,6 @@ landing-page {
     color: #BCC0BE;
   }
 
-  .announcement {
-    position: relative;
-    top: 60px;
-
-    a {
-      text-decoration: none;
-      color: #fff;
-      transition: background 0.3s;
-      display: inline-flex;
-      align-items: center;
-      background: rgba(255,255,255,0.10);
-      border-radius: 100px;
-      padding: 5px;
-      border: 0;
-    }
-
-    a:hover {
-      background: rgba(255,255,255,0.15);
-    }
-
-    .pill,
-    .cta {
-      font-size: 10px;
-      text-transform: uppercase;
-
-    }
-    .pill {
-      background-color: $color-yellow;
-      color: $color-yellow-contrast;
-      font-weight: 800;
-      padding: 2px 6px;
-      border-radius: 100px;
-      flex: 0 0 70px;
-      text-align: center;
-    }
-    .message {
-      font-weight: 500;
-      opacity: 0.8;
-      font-size: 13px;
-      margin: 0 14px;
-      flex: 0 0 auto;
-    }
-    .cta {
-      color: $color-yellow;
-      font-weight: 600;
-      padding-right: 4px;
-      flex: 0 0 94px;
-    }
-    .icon {
-      fill: $color-yellow;
-      height: 9px;
-      width: 8px;
-      transform: translateY(1.5px);
-      margin-left: 2px;
-    }
-
-    @media screen and (max-width: $breakpoint-lg) {
-      top: 20px;
-    }
-
-    @media screen and (max-width: $breakpoint-md) {
-      max-width: 100%;
-      padding: 0;
-      top: 0;
-
-      a {
-        display: flex;
-        width: 100%;
-        border-radius: 0;
-        padding: 12px 24px;
-      }
-      .message {
-        flex: 1;
-      }
-      .cta {
-        flex: 0 0 94px;
-        padding-right: 0;
-      }
-    }
-  }
-
   .hero {
     display: flex;
     justify-content: space-between;

diff --git a/site/src/components/landing-page/landing-page.tsx b/site/src/components/landing-page/landing-page.tsx
@@ -22,18 +22,6 @@ export class LandingPage {
 
   render() {
     return [
-      <div class="announcement container">
-        <a href="https://ionicframework.com/resources/webinars/capacitor-2-launch" target="_blank">
-          <span class="pill">Live demo</span>
-          <span class="message">
-            Capacitor 2.0 features and capabilities
-          </span>
-          <span class="cta">
-            Register Now
-            <app-icon name="caret-right"></app-icon>
-          </span>
-        </a>
-       </div>,
       <div class="container">
         <section class="hero">
           <hgroup>

diff --git a/site/src/components/site-header/site-header.scss b/site/src/components/site-header/site-header.scss
@@ -57,6 +57,88 @@ site-header {
       align-items: center;
     }
   }
+
+  .announcement {
+    position: relative;
+
+    a {
+      text-decoration: none;
+      color: var(--color-woodsmoke);
+      transition: background 0.3s;
+      display: inline-flex;
+      align-items: center;
+      background: rgba(255,255,255,0.10);
+      border-radius: 100px;
+      padding: 5px;
+      border: 0;
+    }
+
+    a:hover {
+      background: rgba(255,255,255,0.15);
+    }
+
+    .pill,
+    .cta {
+      font-size: 10px;
+      text-transform: uppercase;
+
+    }
+    .pill {
+      background-color: $color-yellow;
+      color: $color-yellow-contrast;
+      font-weight: 800;
+      padding: 2px 6px;
+      border-radius: 100px;
+      flex: 0 0 70px;
+      text-align: center;
+    }
+    .message {
+      font-weight: 500;
+      opacity: 0.8;
+      font-size: 13px;
+      margin: 0 14px;
+      flex: 0 0 auto;
+    }
+    .black {
+      color: black;
+    }
+    .cta {
+      color: $color-yellow;
+      font-weight: 600;
+      padding-right: 4px;
+      flex: 0 0 94px;
+    }
+    .icon {
+      fill: $color-yellow;
+      height: 9px;
+      width: 8px;
+      transform: translateY(1.5px);
+      margin-left: 2px;
+    }
+
+    @media screen and (max-width: $breakpoint-lg) and (min-width: $breakpoint-md) {
+      display: none;
+    }
+
+    @media screen and (max-width: $breakpoint-md) {
+      max-width: 100%;
+      padding-top: 5px;
+
+      a {
+        display: flex;
+        width: 100%;
+        border-radius: 0;
+        padding: 5px 24px;
+      }
+      .message {
+        flex: 1;
+      }
+      .cta {
+        flex: 0 0 94px;
+        padding-right: 0;
+      }
+    }
+  }
 }
 
 .landing-page site-header .version{

diff --git a/site/src/components/site-header/site-header.tsx b/site/src/components/site-header/site-header.tsx
@@ -83,6 +83,19 @@ export class SiteHeader {
           <div class="logo"></div>
         </stencil-route-link>
 
+        <div class="announcement">
+          <a href="https://ionicframework.com/resources/webinars/capacitor-2-launch" target="_blank">
+            <span class="pill">Live demo</span>
+            <span class="message">
+              Capacitor 2.0 features and capabilities
+            </span>
+            <span class="cta">
+              Register Now
+              <app-icon name="caret-right"></app-icon>
+            </span>
+          </a>
+        </div>
+
         <div class="header-menu">
           <stencil-route-link urlMatch="/docs" url="/docs/" onClick={() => { this.hideNav() }}>
             Docs