From 461a1ea41243a20e8fc76cf3a8d7a3f8484c7857 Mon Sep 17 00:00:00 2001 From: Sylvain UTARD Date: Wed, 23 Dec 2015 18:43:25 +0100 Subject: [PATCH] docs(website): a few CSS & README minor fixes - highlight background CSS rules was wrongly configured - navbar-header text was black - active links had a default black background - fixed a few links using references instead of actual links (doesn't work once extracted to documentation.md) - use absolute image path --- README.md | 26 +++++++++++--------------- docs/css/_base.scss | 2 +- docs/css/_home.scss | 13 ++++++++++++- docs/css/_syntax-highlighting.scss | 2 +- docs/documentation.md | 7 +++---- 5 files changed, 28 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index b7f01e08..fe2f3925 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,7 @@ We're scratching our own itch here. As developers, we spend a lot of time readin Not blaming anyone here. Building a good search for a documentation is a complex challenge. We happen to have a lot of experience doing that, and we want to share it with the world. For free. -Just submit the form on the [website][https://community.algolia.com/docsearch/] and we'll get back to you with what you need to integrate your new search into your website. +Just submit the form on the [website](https://community.algolia.com/docsearch/) and we'll get back to you with what you need to integrate your new search into your website. 1. We'll crawl your documentation pages, 2. We'll configure your search experience, @@ -69,7 +69,7 @@ docsearch({ The default colorscheme is blue and gray: -![Default colorscheme][12] +![Default colorscheme](https://community.algolia.com/docsearch/img/default-colorscheme.png) To update the colors to suit your website, you just need to override a few colors. Here is an example of a CSS file that you can use as a basis and that @@ -115,8 +115,7 @@ sets white and purples colors. } ``` -Advanced users can also clone the repository, edit the [_variables.scss][13] -file and re-build the CSS file using `npm run build:css`. +Advanced users can also clone the repository, edit the [_variables.scss](https://github.com/algolia/docsearch/blob/master/src/styles/_variables.scss) file and re-build the CSS file using `npm run build:css`. @@ -127,7 +126,7 @@ file and re-build the CSS file using `npm run build:css`. We use a simple documentation example website as a way to develop the docsearch library. Requirements: -- [Node.js][15] +- [Node.js][12] - npm@2 ```sh @@ -148,11 +147,11 @@ npm run dev ### Documentation website -This is the [Jekyll][16] instance running at [https://community.algolia.com/docsearch](https://community.algolia.com/docsearch). +This is the [Jekyll][13] instance running at [https://community.algolia.com/docsearch](https://community.algolia.com/docsearch). Requirements: -- [Ruby][17] -- [Bundler][18] +- [Ruby][14] +- [Bundler][15] ```sh npm run dev:docs @@ -181,10 +180,7 @@ bundle config build.eventmachine --with-cppflags=-I$(brew --prefix openssl)/incl [9]: #local-example [10]: #documentation-website [11]: #macos -[12]: ./docs/img/default-colorscheme.png -[13]: https://github.com/algolia/docsearch/blob/master/src/styles/_variables.scss -[14]: https://github.com/algolia/docsearch/blob/master/dev/docsearch-styling.css -[15]: https://nodejs.org/en/ -[16]: https://jekyllrb.com/ -[17]: https://www.ruby-lang.org/en/ -[18]: http://bundler.io/ +[12]: https://nodejs.org/en/ +[13]: https://jekyllrb.com/ +[14]: https://www.ruby-lang.org/en/ +[15]: http://bundler.io/ diff --git a/docs/css/_base.scss b/docs/css/_base.scss index d2cb2cf0..5a1d68bc 100644 --- a/docs/css/_base.scss +++ b/docs/css/_base.scss @@ -5,7 +5,7 @@ $headings-font-family: "Raleway"; $headings-font-weight: 300; $brand-primary: #1d96c7; -$code-color: #a3b6cb; +//$code-color: #a3b6cb; $text-color: rgba(black, 0.75); diff --git a/docs/css/_home.scss b/docs/css/_home.scss index b4160794..e9698d22 100644 --- a/docs/css/_home.scss +++ b/docs/css/_home.scss @@ -34,9 +34,20 @@ html, body { height: 50px; font-size: 16px; line-height: 50px; + color: white; + a:hover { + text-decoration: none; + } + } + .navbar-nav > li { + padding: 14px 15px; } .navbar-nav > li > a { - padding-bottom: 0; + padding: 0 0 4px 0; + } + .navbar-nav > li.active > a { + background-color: transparent; + border-bottom: 2px solid #FF2E6C; } .fa-github { font-size: 1.6em; diff --git a/docs/css/_syntax-highlighting.scss b/docs/css/_syntax-highlighting.scss index ca7eb97b..b1527a6f 100644 --- a/docs/css/_syntax-highlighting.scss +++ b/docs/css/_syntax-highlighting.scss @@ -16,7 +16,7 @@ cyan #2aa198 strings, numbers green #859900 operators, other keywords */ -.highlight pre { +pre.highlight { background: #0A1724; border: none; color: #A3B6CB; diff --git a/docs/documentation.md b/docs/documentation.md index 6332656f..96290136 100644 --- a/docs/documentation.md +++ b/docs/documentation.md @@ -10,7 +10,7 @@ We're scratching our own itch here. As developers, we spend a lot of time readin Not blaming anyone here. Building a good search for a documentation is a complex challenge. We happen to have a lot of experience doing that, and we want to share it with the world. For free. -Just submit the form on the [website][https://community.algolia.com/docsearch/] and we'll get back to you with what you need to integrate your new search into your website. +Just submit the form on the [website](https://community.algolia.com/docsearch/) and we'll get back to you with what you need to integrate your new search into your website. 1. We'll crawl your documentation pages, 2. We'll configure your search experience, @@ -36,7 +36,7 @@ docsearch({ The default colorscheme is blue and gray: -![Default colorscheme][12] +![Default colorscheme](https://community.algolia.com/docsearch/img/default-colorscheme.png) To update the colors to suit your website, you just need to override a few colors. Here is an example of a CSS file that you can use as a basis and that @@ -82,6 +82,5 @@ sets white and purples colors. } ``` -Advanced users can also clone the repository, edit the [_variables.scss][13] -file and re-build the CSS file using `npm run build:css`. +Advanced users can also clone the repository, edit the [_variables.scss](https://github.com/algolia/docsearch/blob/master/src/styles/_variables.scss) file and re-build the CSS file using `npm run build:css`.