Merge pull request #6185 from MinaProtocol/website/bugs

Website: Navbar fixes
MinaProtocol · Oct 2, 2020 · 37c2bd7 · 37c2bd7
2 parents 368bdf3 + ad1f2ef
commit 37c2bd7
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/frontend/website-redesign/src/components/AnnouncementBanner.re b/frontend/website-redesign/src/components/AnnouncementBanner.re
@@ -50,6 +50,7 @@ module Styles = {
         marginLeft(`rem(0.4)),
         marginRight(`rem(0.2)),
         cursor(`pointer),
+        hover([borderBottom(`px(1), `solid, Theme.Colors.orange)]),
       ]),
     ]);
 

diff --git a/frontend/website-redesign/src/components/Nav.re b/frontend/website-redesign/src/components/Nav.re
@@ -48,9 +48,11 @@ module Styles = {
       flexDirection(`column),
       position(`absolute),
       left(`zero),
+      right(`zero),
       top(`rem(4.25)),
-      width(`percent(100.)),
+      width(`percent(90.)),
       background(Theme.Colors.digitalBlack),
+      margin2(~h=`auto, ~v=`zero),
       media(Theme.MediaQuery.tablet, [top(`rem(6.25))]),
       media(
         Theme.MediaQuery.desktop,
@@ -80,7 +82,7 @@ module Styles = {
           Theme.MediaQuery.desktop,
           [
             position(`relative),
-            marginRight(`rem(1.25)),
+            marginRight(`rem(2.5)),
             width(`auto),
             height(`auto),
             padding(`zero),
@@ -227,8 +229,8 @@ let make = (~dark=false) => {
     </Next.Link>
     <input type_="checkbox" id="nav_toggle" className=Styles.hiddenToggle />
     <label htmlFor="nav_toggle" className=Styles.navToggle>
-      <span id="open-nav"> <Icon kind=Icon.BurgerMenu /> </span>
-      <span id="close-nav"> <Icon kind=Icon.CloseMenu /> </span>
+      <span id="open-nav"> <Icon kind=Icon.BurgerMenu size=2./> </span>
+      <span id="close-nav"> <Icon kind=Icon.CloseMenu size=2./> </span>
     </label>
     <nav className=Styles.nav>
       <NavLink label="About" href="/about" dark />

diff --git a/frontend/website-redesign/src/components/Page.re b/frontend/website-redesign/src/components/Page.re
@@ -3,13 +3,15 @@ module Styles = {
 
   let fadeIn = keyframes([(0, [opacity(0.)]), (100, [opacity(1.)])]);
 
-  let main = style([
-    opacity(0.),
-    animationName(fadeIn),
-    animationDuration(1000),
-    animationDelay(200),
-    animationFillMode(`forwards),
-  ]);
+  let main =
+    style([
+      position(`relative),
+      opacity(0.),
+      animationName(fadeIn),
+      animationDuration(1000),
+      animationDelay(200),
+      animationFillMode(`forwards),
+    ]);
 };
 
 let siteDescription = "Mina is the first cryptocurrency with a succinct blockchain. Our lightweight blockchain means anyone can use Mina directly from any device, in less data than a few tweets.";