From 9e0f751464cea41f5cc972ba4ed5b2a2beaf2ad8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emil=20Sj=C3=B6lander?= Date: Mon, 12 Feb 2018 10:27:12 -0800 Subject: [PATCH] Toolbar design Reviewed By: danielbuechele Differential Revision: D6964901 fbshipit-source-id: c052449d0ae3da91bec64c8f9da867244022ccf1 --- website/src/components/Page.css | 10 ++++++++-- website/src/components/Page.js | 8 -------- website/src/components/Toolbar.css | 25 ++++++------------------- website/src/components/Toolbar.js | 4 ++-- 4 files changed, 16 insertions(+), 31 deletions(-) diff --git a/website/src/components/Page.css b/website/src/components/Page.css index 70c80ebe..96250b29 100644 --- a/website/src/components/Page.css +++ b/website/src/components/Page.css @@ -1,14 +1,20 @@ -@import url('https://fonts.googleapis.com/css?family=Barlow'); +@import url('https://fonts.googleapis.com/css?family=Open+Sans|Source+Code+Pro'); + html, body { margin: 0; padding: 0; - font-family: 'Barlow', sans-serif; + font-family: 'Open Sans', sans-serif; color: #303845; font-size: 16px; } +code, +pre { + font-family: 'Source Code Pro', monospace; +} + h1, h2 { font-weight: 500; diff --git a/website/src/components/Page.js b/website/src/components/Page.js index 0b010288..8cf386b9 100644 --- a/website/src/components/Page.js +++ b/website/src/components/Page.js @@ -25,14 +25,6 @@ type Props = {| export default (props: Props) => (
- {/* - - - Yoga Layout{props.title ? ` | ${props.title}` : ''} - */}
{props.children} diff --git a/website/src/components/Toolbar.css b/website/src/components/Toolbar.css index 3b980a3b..b96e6a9f 100644 --- a/website/src/components/Toolbar.css +++ b/website/src/components/Toolbar.css @@ -1,37 +1,24 @@ .Toolbar { - border-bottom: 1px solid #dddfe2; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); - background: white; - height: 50px; - padding: 0 10px; - padding-bottom: 1px; - z-index: 4; display: flex; + padding: 20px 15px; + z-index: 4; align-items: center; + background-color: white; } .Toolbar .logo { display: flex; - height: 100%; align-items: center; text-decoration: none; - margin-left: 5px; } .Toolbar a { margin: 0 15px; + color: #606770; } -.Toolbar h1 { - font-size: 20px; - margin: 0; - padding: 0; - margin-left: 3px; - white-space: nowrap; -} - -.Toolbar .ToolbarSpacer { - flex-grow: 1; +.Toolbar a:hover { + color: #8FD0C6; } .Toolbar .ToolbarToggle { diff --git a/website/src/components/Toolbar.js b/website/src/components/Toolbar.js index 07d53903..3adb6763 100644 --- a/website/src/components/Toolbar.js +++ b/website/src/components/Toolbar.js @@ -29,12 +29,12 @@ export default class Toolbar extends Component { width="42" alt="Yoga logo" /> -

Yoga Layout

-
+ Docs Playground GitHub + {this.props.onShowCode && (