🐛(site) Fix announcement banner styling (chromeos#618)

* Fix announcement banner colors * Marquees! * Fix logo color --------- Co-authored-by: Sam Richard <[email protected]>
Light13008 · Apr 28, 2023 · 91182b7 · 91182b7
1 parent 184e372
commit 91182b7
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 0 deletions.
diff --git a/site/sass/themes/phosphor/components/_announcement.scss b/site/sass/themes/phosphor/components/_announcement.scss
@@ -0,0 +1,26 @@
+.announcement {
+  color: var(--white);
+
+  @media (prefers-reduced-motion: no-preference) {
+    p {
+      animation: phmarquee 20s linear infinite;
+      margin: 0;
+      transform: translateX(100vw);
+      width: max-content;
+    }
+  }
+
+  a {
+    color: var(--white);
+  }
+}
+
+@keyframes phmarquee {
+  0% {
+    transform: translateX(100vw);
+  }
+
+  100% {
+    transform: translateX(calc(-1 * (100% + $wrapper-inline-spacing-r)));
+  }
+}
diff --git a/site/sass/themes/phosphor/components/_logo.scss b/site/sass/themes/phosphor/components/_logo.scss
@@ -0,0 +1,5 @@
+.logo {
+  .cls-6 {
+    fill: var(--phosphor-white);
+  }
+}
diff --git a/site/sass/themes/phosphor/style.scss b/site/sass/themes/phosphor/style.scss
@@ -23,6 +23,8 @@
   @import './components/toc';
   @import './components/type';
   @import './components/cta';
+  @import './components/announcement';
+  @import './components/logo';
 }
 
 /* stylelint-enable no-invalid-position-at-import-rule */