diff --git a/docs/features/index.md b/docs/features/index.md index 81e24a5e0..90789e9ce 100644 --- a/docs/features/index.md +++ b/docs/features/index.md @@ -3,9 +3,6 @@ id: index title: Features --- - - - Flipper itself only provides the architectural platform. What makes it useful are the plugins built on top of it: [Logs](logs-plugin.md), [Layout Inspector](layout-plugin.md) and [Network Inspector](network-plugin.md) are all plugins. Plugins can be built very specific to your business logic and the use-cases you have in your app. We are shipping Flipper with a couple of built-in all-purpose plugins, but we encourage you to build your own. Each plugin plugin needs to be enabled individually.  @@ -14,6 +11,4 @@ Flipper itself only provides the architectural platform. What makes it useful ar The Flipper desktop app and the mobile native SDK establish a connection which is used to send data to and from the device. Flipper does not make any restrictions on what kind of data is being sent. This enables a lot of different use-cases where you want to better understand what is going inside your app. For example you can visualize the state of local caches, events happening or trigger actions on your app from the desktop. -A plugin always consists of the native implementation sending and receiving data and the desktop plugin visualizing data. Learn more on how to [create a plugin](/docs/create-plugin.md). The native implementations are written in Java, Objective-C, or C++, the desktop UI is written in React. - -If there is no plugin that does exactly what you want, you can build your own plugin, tailored to your needs. [Learn more]() about how to build plugins. +If there is no plugin that does exactly what you want, you can build your own plugin, tailored to your needs. A plugin always consists of the native implementation sending and receiving data and the desktop plugin visualizing data. Learn more on how to [extend Flipper](extending/index.md) and build your own plugin. The native implementations are written in Java, Objective-C, or C++, the desktop UI is written in React. diff --git a/website/pages/en/index.js b/website/pages/en/index.js index 0be3bd284..0438c6a94 100755 --- a/website/pages/en/index.js +++ b/website/pages/en/index.js @@ -22,11 +22,11 @@ class Index extends React.Component {
@@ -58,7 +58,7 @@ class Index extends React.Component { useful tools including a log viewer, interactive layout inspector, and network inspector. - + Learn more @@ -74,7 +74,7 @@ class Index extends React.Component { data back and forth, calling functions, and listening for events on the mobile app. - + Learn more @@ -102,11 +102,25 @@ class Index extends React.Component { improve Flipper. We are excited to see what you will build on this platform. - + Learn more + ); } diff --git a/website/static/css/custom.css b/website/static/css/custom.css index a2e656549..9cb083f1e 100644 --- a/website/static/css/custom.css +++ b/website/static/css/custom.css @@ -46,17 +46,29 @@ h6 { letter-spacing: 1px; } -.splash .btn { - color: white; +.landing-btn { display: inline-block; padding: 7px 20px; border-radius: 6px; margin: 0 10px; - border: 1px solid white; + border: 1px solid #777; } -.splash .btn.primary { +.landing-btn:hover { +} + +.landing-btn.primary { background-color: #008cf2; + color: white; + border-color: #008cf2; +} + +.splash .landing-btn { + color: white; + border-color: white; +} + +.splash .landing-btn.primary { border-color: #008cf2; } @@ -216,11 +228,6 @@ nav.toc .toggleNav .navGroup.navGroupActive h3 { margin: 0; } -.button { - border-radius: 6px; - text-transform: none; -} - .sitemap { width: 100%; } @@ -236,7 +243,6 @@ a.learnmore:hover { } .toc .toggleNav ul li.navListItemActive a { - color: $actionColor; opacity: 1; } @@ -440,3 +446,24 @@ footer iframe { content: ''; position: absolute; } + +.landing-cta { + padding-top: 30px; + padding-bottom: 80px; + text-align: center; +} +.button { + text-transform: none; + border: none; + font-size: 0.8em; + border-radius: 999em; + background-color: rgba(0, 0, 0, 0.05); + padding: 0.5em 1em; + font-weight: 500; + margin-top: 8px; +} + +.button:hover { + background-color: rgba(0, 0, 0, 0.1); + color: inherit; +}