Finishing up site (#131)

* Finishing up site

* Make site a bit responsive

* Fix menu responsiveness

* Remove Fira Sans and revamp a bit text

* Update list of syntax and change output of syntax

* Add Rust mention

* Some doc tweaks

* Correct capitalization for GitHub

Correct capitalization for GitHub

* Some CSS tweaks

* More css tweaks + favicon

* Add link to my site

components/rendering/examples/generate_sublime.rs

@@ -32,7 +32,9 @@ fn main() {
             dump_to_file(&ps, packpath_nonewlines).unwrap();
 
             for s in ps.syntaxes() {
-                println!("Add {} -> {:?}", s.name, s.file_extensions);
+                if !s.file_extensions.is_empty() {
+                    println!("- {} -> {:?}", s.name, s.file_extensions);
+                }
             }
         },
         (Some(ref cmd), Some(ref theme_dir), Some(ref packpath), None) if cmd == "themepack" => {

docs/config.toml

@@ -1,6 +1,6 @@
-base_url = "https://gutenberg.netlify.com/"
+base_url = "https://www.getgutenberg.io/"
 title = "Gutenberg"
-description = "Everything you need to make a static site engine in one binary. And it's fast"
+description = "Everything you need to make a static site engine in one binary."
 
 compile_sass = true
 highlight_code = true

docs/content/documentation/content/linking.md

@@ -20,7 +20,7 @@ if the slug already exists for that article. For example:
 It is possible to have Gutenberg automatically insert anchor links next to the header, as you can see on the site you are currently 
 reading if you hover a title.
 
-This option is set at the section level, look up the `insert_anchor_links` variable on the 
+This option is set at the section level: the `insert_anchor_links` variable on the 
 [Section front-matter page](./documentation/content/section.md#front-matter).
 
 The default template is very basic and will need CSS tweaks in your project to look decent. 
@@ -33,5 +33,4 @@ special syntax to Markdown links to handle them: start the link with `./` and po
 to link to. The path to the file starts from the `content` directory.
 
 For example, linking to a file located at `content/pages/about.md` would be `[my link](./pages/about.md)`.
-You can still link to a header directly: `[my link](./pages/about.md#example)` would work as expected, granted
+You can still link to a header directly: `[my link](./pages/about.md#example)` will work as expected.
-the `example` id exists on the header.

docs/content/documentation/content/overview.md

@@ -6,7 +6,7 @@ weight = 10
 
 Gutenberg uses the folder structure to determine the site structure.
 Each folder in the `content` directory represents a [section](./documentation/content/section.md) 
-that contains [pages](./documentation/content/page.md) : your `.md` files. 
+that contains [pages](./documentation/content/page.md): your `.md` files. 
 
 ```bash
 .
@@ -23,8 +23,8 @@ that contains [pages](./documentation/content/page.md) : your `.md` files.
         └── _index.md // -> https://mywebsite.com/landing/
 ```
 
-Obviously, each page path (the part after the `base_url`, for example `blog/`) can be customised by setting the wanted value
+Each page path (the part after the `base_url`, for example `blog/cli-usage/`) can be customised by changing the `path` or `slug`
-in the [page front-matter](./documentation/content/page.md#front-matter).
+attribute of the [page front-matter](./documentation/content/page.md#front-matter).
 
 You might have noticed a file named `_index.md` in the example above. 
 This file will be used for the metadata and content of the section itself and is not considered a page.
@@ -37,12 +37,18 @@ and `installation.md`.
 
 While not shown in the example, sections can be nested indefinitely.
 
+## Assets colocation
+
 The `content` directory is not limited to markup files though: it's natural to want to co-locate a page and some related 
-assets. Gutenberg supports that pattern out of the box: create a folder, add a `index.md` file and as many non-markdown as you want.
+assets. 
-Those assets will be copied in the same folder when building so you can just use a relative path to access them.
+
+Gutenberg supports that pattern out of the box: create a folder, add a `index.md` file and as many non-markdown files as you want.
+Those assets will be copied in the same folder when building the site which allows you to use a relative path to access them.
 
 ```bash
 └── with-assets
     ├── index.md
     └── yavascript.js
 ```
+
+By default, this page will get the folder name (`with-assets` in this case) as its slug.

docs/content/documentation/content/page.md

@@ -11,8 +11,7 @@ named `_index/md`.
 The front-matter is a set of metadata embedded in a file. In Gutenberg,
 it is at the beginning of the file, surrounded by `+++` and uses TOML.
 
-None of the front-matter variables are mandatory. However the opening and closing `+++` are required even if there are
+While none of the front-matter variables are mandatory, the the opening and closing `+++` are required.
-no variables in it.
 
 Here is an example page with all the variables available:
 
@@ -65,8 +64,10 @@ Some content
 ```
 
 ## Summary
+
 You can ask Gutenberg to create a summary if you only want to show the first 
 paragraph of each page in a list for example.
+
 To do so, add `<!-- more -->` in your content at the point where you want the
 summary to end and the content up to that point will be also available separately
-in the template.
+in the [template](./documentation/templates/pages-sections.md#page-variables).

docs/content/documentation/content/section.md

@@ -3,20 +3,22 @@ title = "Section"
 weight = 20
 +++
 
-A section is automatically created implicitly when a folder is found 
+A section is automatically created when a folder is found 
-in the `content` section.
+in the `content` section, unless it only contains a `index.md` file and is actually
+a page with assets.
 
 You can add `_index.md` file to a folder to augment a section and give it
 some metadata and/or content.
 
+The index page is actually a section created automatically like any other: you can add metadata
+and content by adding `_index.md` at the root of the `content` folder.
+
 ## Front-matter
 
 The front-matter is a set of metadata embedded in a file. In Gutenberg,
 it is at the beginning of the file, surrounded by `+++` and uses TOML.
 
-As the file itself is optional, none of the front-matter variables are
+While none of the front-matter variables are mandatory, the the opening and closing `+++` are required.
-mandatory. However the opening and closing `+++` are required even if there are
-no variables in it.
 
 Here is an example `_index.md` with all the variables available:
 
@@ -67,12 +69,11 @@ redirect_to = ""
 Some content
 ```
 
-Keep in mind that the variables only apply to the direct pages, not to the subsections' pages. This means
+Keep in mind that any configuration apply only to the direct pages, not to the subsections' pages.
-you can only paginate the pages directly in the section folder for example.
 
 ## Sorting
-Sections' pages can be sorted three different ways, not counting the unsorted default.
+Sections' pages can be sorted three different ways, not counting the unsorted default and 
-Sorting is enabled by setting the `sort_by` front-matter variable.
+is enabled by setting the `sort_by` front-matter variable.
 
 Any page that cannot be sorted, for example if missing the date variable while sorting by `date`, will be ignored and
 won't be rendered. The terminal will warn you if this is happening.

docs/content/documentation/content/shortcodes.md

@@ -34,18 +34,23 @@ That's it, Gutenberg will now recognise this template as a shortcode named `yout
 
 ## Using shortcodes
 
-There are two kinds of shortcodes: ones that do no take a body like the YouTube example above and ones that do, a quote for example.
+There are two kinds of shortcodes: 
+
+- ones that do not take a body like the YouTube example above
+- ones that do, a quote for example
+
 In both cases, their arguments must be named and they will all be passed to the template.
 
-Do note that shortcodes in code blocks will be ignored.
+Any shortcodes in code blocks will be ignored.
 
 ### Shortcodes without body
-Those look like rendering a variable in Tera.
 
-On a new line, call the shortcode as if it was a function in a variable block. All the examples below are valid
+On a new line, call the shortcode as if it was a Tera function in a variable block. All the examples below are valid
 calls of the YouTube shortcode.
 
 ```md
+Here is a YouTube video:
+
 {{ youtube(id="dQw4w9WgXcQ") }}
 
 {{ youtube(id="dQw4w9WgXcQ", autoplay=true) }}
@@ -54,7 +59,6 @@ calls of the YouTube shortcode.
 ```
 
 ### Shortcodes with body
-Those look like a block in Tera.
 For example, let's imagine we have the following shortcode `quote.html` template:
 
 ```jinja2
@@ -67,13 +71,14 @@ For example, let's imagine we have the following shortcode `quote.html` template
 We could use it in our markup file like so:
 
 ```md
+As someone said:
+
 {% quote(author="Vincent") %}
 A quote
 {% end %}
 ```
 
-The `body` variable used in the shortcode template will be implicitly passed down to the rendering
+The body of the shortcode will be automatically passed down to the rendering context as the `body` variable.
-context automatically.
 
 ## Built-in shortcodes
 

docs/content/documentation/content/syntax-highlighting.md

@@ -17,16 +17,21 @@ let highlight = true;
 
 ````
 
-You can replace the `rust` by the language you want to highlight.
+You can replace the `rust` by the language you want to highlight or not put anything to get it 
-Here is a full list of the supported languages and the short name you can use:
+interpreted as plain text.
+
+Here is a full list of the supported languages and the short names you can use:
 
 ```
 - Plain Text -> ["txt"]
 - Assembly x86 (NASM) -> ["asm", "inc", "nasm"]
+- Crystal -> ["cr"]
+- Elixir -> ["ex", "exs"]
 - Elm -> ["elm"]
 - Handlebars -> ["handlebars", "handlebars.html", "hbr", "hbrs", "hbs", "hdbs", "hjs", "mu", "mustache", "rac", "stache", "template", "tmpl"]
 - Jinja2 -> ["j2", "jinja2"]
 - Julia -> ["jl"]
+- Kotlin -> ["kt", "kts"]
 - LESS -> ["less"]
 - ASP -> ["asa"]
 - HTML (ASP) -> ["asp"]
@@ -44,42 +49,33 @@ Here is a full list of the supported languages and the short name you can use:
 - Erlang -> ["erl", "hrl", "Emakefile", "emakefile"]
 - HTML (Erlang) -> ["yaws"]
 - Go -> ["go"]
-- Graphviz (DOT) -> ["dot", "DOT"]
+- Graphviz (DOT) -> ["dot", "DOT", "gv"]
 - Groovy -> ["groovy", "gvy", "gradle"]
 - HTML -> ["html", "htm", "shtml", "xhtml", "inc", "tmpl", "tpl"]
 - Haskell -> ["hs"]
 - Literate Haskell -> ["lhs"]
 - Java Server Page (JSP) -> ["jsp"]
 - Java -> ["java", "bsh"]
-- JavaDoc -> []
 - Java Properties -> ["properties"]
 - JSON -> ["json", "sublime-settings", "sublime-menu", "sublime-keymap", "sublime-mousemap", "sublime-theme", "sublime-build", "sublime-project", "sublime-completions", "sublime-commands", "sublime-macro"]
 - JavaScript -> ["js", "htc"]
-- Regular Expressions (Javascript) -> []
 - BibTeX -> ["bib"]
-- LaTeX Log -> []
 - LaTeX -> ["tex", "ltx"]
 - TeX -> ["sty", "cls"]
 - Lisp -> ["lisp", "cl", "l", "mud", "el", "scm", "ss", "lsp", "fasl"]
 - Lua -> ["lua"]
-- Make Output -> []
 - Makefile -> ["make", "GNUmakefile", "makefile", "Makefile", "OCamlMakefile", "mak", "mk"]
 - Markdown -> ["md", "mdown", "markdown", "markdn"]
-- MultiMarkdown -> []
 - MATLAB -> ["matlab"]
 - OCaml -> ["ml", "mli"]
 - OCamllex -> ["mll"]
 - OCamlyacc -> ["mly"]
-- camlp4 -> []
 - Objective-C++ -> ["mm", "M", "h"]
 - Objective-C -> ["m", "h"]
-- PHP Source -> []
 - PHP -> ["php", "php3", "php4", "php5", "php7", "phps", "phpt", "phtml"]
 - Pascal -> ["pas", "p", "dpr"]
 - Perl -> ["pl", "pm", "pod", "t", "PL"]
-- Python -> ["py", "py3", "pyw", "pyi", "rpy", "cpy", "SConstruct", "Sconstruct", "sconstruct", "SConscript", "gyp", "gypi", "Snakefile", "wscript"]
+- Python -> ["py", "py3", "pyw", "pyi", "pyx", "pyx.in", "pxd", "pxd.in", "pxi", "pxi.in", "rpy", "cpy", "SConstruct", "Sconstruct", "sconstruct", "SConscript", "gyp", "gypi", "Snakefile", "wscript"]
-- Regular Expressions (Python) -> []
-- R Console -> []
 - R -> ["R", "r", "s", "S", "Rprofile"]
 - Rd (R Documentation) -> ["rd"]
 - HTML (Rails) -> ["rails", "rhtml", "erb", "html.erb"]
@@ -90,11 +86,10 @@ Here is a full list of the supported languages and the short name you can use:
 - Regular Expression -> ["re"]
 - reStructuredText -> ["rst", "rest"]
 - Ruby -> ["rb", "Appfile", "Appraisals", "Berksfile", "Brewfile", "capfile", "cgi", "Cheffile", "config.ru", "Deliverfile", "Fastfile", "fcgi", "Gemfile", "gemspec", "Guardfile", "irbrc", "jbuilder", "podspec", "prawn", "rabl", "rake", "Rakefile", "Rantfile", "rbx", "rjs", "ruby.rail", "Scanfile", "simplecov", "Snapfile", "thor", "Thorfile", "Vagrantfile"]
-- Cargo Build Results -> []
 - Rust -> ["rs"]
 - SQL -> ["sql", "ddl", "dml"]
 - Scala -> ["scala", "sbt"]
-- Shell Script (Bash) -> ["sh", "bash", "zsh", ".bash_aliases", ".bash_functions", ".bash_login", ".bash_logout", ".bash_profile", ".bash_variables", ".bashrc", ".profile", ".textmate_init"]
+- Bourne Again Shell (bash) -> ["sh", "bash", "zsh", "fish", ".bash_aliases", ".bash_functions", ".bash_login", ".bash_logout", ".bash_profile", ".bash_variables", ".bashrc", ".profile", ".textmate_init"]
 - HTML (Tcl) -> ["adp"]
 - Tcl -> ["tcl"]
 - Textile -> ["textile"]

docs/content/documentation/content/table-of-contents.md

@@ -5,8 +5,8 @@ weight = 60
 
 Each page/section will automatically generate a table of content for itself based on the headers present. 
 
-TODO: add link for template variables
+It is available in the template through `section.toc` and `page.toc`. 
-It is available in the template through `section.toc` and `page.toc`. You can view the [template variables]() 
+You can view the [template variables](./documentation/templates/pages-sections.md#table-of-contents) 
 documentation for information on its structure.
 
 Here is an example of using that field to render a 2-level table of content:

docs/content/documentation/getting-started/cli-usage.md

@@ -30,9 +30,12 @@ $ gutenberg build
 You can override the config `base_url` by passing a new URL to the `base-url` flag.
 
 ```bash
-$ gutenberg build --base-url https://59a896e2cf321c2dcfd2d6de--tera.netlify.com/
+$ gutenberg build --base-url $DEPLOY_URL
 ```
 
+This is useful for example when you want to deploy previews of a site to a dynamic URL, such as Netlify 
+deploy previews.
+
 ## serve
 
 This will build and serve the site using a local server. You can also specify
@@ -48,5 +51,5 @@ $ gutenberg serve --interface 0.0.0.0 --port 2000
 The serve command will watch all your content and will provide live reload, without
 hard refresh if possible.
 
-If you fail to see your change, this means that Gutenberg couldn't reload that bit and you will
+Gutenberg does a best-effort to live reload but some changes cannot be handled automatically. If you
-need to restart `gutenberg serve`.
+fail to see your change, you will need to restart `gutenberg serve`.

docs/content/documentation/getting-started/installation.md

@@ -10,14 +10,14 @@ Gutenberg provides pre-built binaries for MacOS, Linux and Windows on the
 
 Gutenberg is not currently available on Homebrew at the moment.
 
-If you can help package it, please comment on https://github.com/Keats/gutenberg/issues/12
+If you can help package it, please comment on [https://github.com/Keats/gutenberg/issues/12](https://github.com/Keats/gutenberg/issues/12)
 if you encounter any issues.
 
 ## Windows
 
 I am not aware of the package management state in Windows.
 
-If you can help package it, please comment on https://github.com/Keats/gutenberg/issues/12
+If you can help package it, please comment on [https://github.com/Keats/gutenberg/issues/12](https://github.com/Keats/gutenberg/issues/12)
 if you encounter any issues.
 
 ## Archlinux
@@ -29,7 +29,7 @@ $ yaourt -S gutenberg-bin
 ```
 
 ## From source
-To build it from source, you will need to have Git, [Rust and Cargo](https://www.rust-lang.org/en-US/)
+To build it from source, you will need to have Git, [Rust and Cargo](https://www.rust-lang.org/)
 installed.
 
 From a terminal, you can now run the following command:

docs/content/documentation/templates/overview.md

@@ -3,23 +3,24 @@ title = "Overview"
 weight = 10
 +++
 
-Gutenberg uses the [Tera](tera.netlify.com) template engine. 
+Gutenberg uses the [Tera](tera.netlify.com) template engine and is very similar
-This documentation will only touch how templates work in Gutenberg, please read
+to Jinja2, Liquid or Twig.
+
+As this documentation will only talk about how templates work in Gutenberg, please read
 the [Tera template documentation](https://tera.netlify.com/docs/templates/) if you want
-to know how write them. If you are familiar with Jinja2, Liquid or Twig, this should be 
+to learn more about it first.
-a breeze.
 
 All templates live in the `templates` directory and built-in or themes templates can
 be overriden by creating a template with same name in the correct path. For example,
 you can override the RSS template by creating a `templates/rss.xml` file.
 
-If you are not sure what is available in a template, you can just stick `{{ __tera_context }}` in it
+If you are not sure what variables are available in a template, you can just stick `{{ __tera_context }}` in it
 to print the whole context.
 
-A few variables are available on all templates except for RSS/Sitemap:
+A few variables are available on all templates minus RSS and sitemap:
 
 - `config`: the [configuration](./documentation/getting-started/configuration.md) without any modifications
-- `current_path`: the path (full URL without the `base_url`) of the current page
+- `current_path`: the path (full URL without the `base_url`) of the current page, never starting with a `/`
 - `current_url`: the full URL for that page
 
 ## Built-in filters

docs/content/documentation/templates/pages-sections.md

@@ -1,17 +1,13 @@
 +++
-title = "Index, Sections and Pages"
+title = "Sections and Pages"
 weight = 20
 +++
 
-First off, it is important to know that in Gutenberg the index 
-page is actually a section like any other: you can add metadata
-and content by adding `_index.md` at the root of the `content` folder.
-
 Pages and sections are actually very similar.
 
 ## Page variables
-By default, Gutenberg will try to load `templates/page.html`. If there isn't
+Gutenberg will try to load the `templates/page.html` template, the `page.html` template of the theme if one is used
-one, it will render the built-in template: a blank page.
+or will render the built-in template: a blank page.
 
 Whichever template you decide to render, you will get a `page` variable in your template
 with the following fields:

docs/content/documentation/templates/pagination.md

@@ -4,9 +4,8 @@ weight = 30
 +++
 
 A paginated section gets the same `section` variable as a normal
-[section page](./documentation/templates/pages-sections.md#section-variables) and will use
+[section page](./documentation/templates/pages-sections.md#section-variables).
-the template mentioned in the section front-matter or the default one.
+In addition, a paginated section gets a `paginator` variable of the `Pager` type:
-In addition, a paginated section gets a `paginator` one, which has a `Pager` type:
 
 ```ts
 // How many items per page

docs/content/documentation/templates/rss.md

@@ -13,4 +13,4 @@ The RSS template gets two variables in addition of the config:
 
 - `last_build_date`: the date of the latest post
 - `pages`: see [the page variables](./documentation/templates/pages-sections.md#page-variables) for
-a detailed description of this variable.
+a detailed description of what this contains

docs/content/documentation/templates/tags-categories.md

@@ -20,7 +20,6 @@ A `TaxonomyItem` has the following fields:
 ```ts
 name: String;
 slug: String;
-// Permalink to the generated page
 permalink: String;
 pages: Array<Page>;
 ```

docs/sass/_base.scss

@@ -4,9 +4,12 @@ html, body {
 }
 
 body {
-  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   line-height: 1.6;
-  background-color: $background;
+  // from http://www.heropatterns.com
+  background-color: #191919;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%234b4b4b' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+
   color: $foreground;
 
   // for sticky footer
@@ -16,16 +19,17 @@ body {
 }
 
 a {
-  color: white;
+  color: $link-color;
   text-decoration: none;
   cursor: pointer;
+  border-bottom: 1px solid rgba(0, 124, 188, 0.25);
 
   &:hover {
-    text-decoration: underline;
+    border-bottom: 1px solid $link-color;
   }
 
   &:visited {
-    color: white;
+    color: $link-color;
   }
 
   // totally taken from stripe
@@ -46,6 +50,7 @@ a {
     color: #191919;
     text-decoration: none;
     transition: all .15s ease;
+    border-bottom: none;
 
     &:hover {
       transform: translateY(-1px);
@@ -58,6 +63,19 @@ a {
       transform: translateY(1px);
     }
   }
+
+  &.white {
+    color: white;
+    border-bottom-color: rgba(255, 255, 255, 0.25);
+
+    &:hover {
+      border-bottom-color: white;
+    }
+
+    &:visited {
+      color: white;
+    }
+  }
 }
 
 pre {

docs/sass/_docs.scss

@@ -32,21 +32,11 @@
 
         li.active a {
           font-weight: bold;
-          border-bottom: 1px solid $background;
+          border-bottom: 1px solid $link-color;
         }
       }
     }
 
-    a {
-      color: $background;
-      padding-bottom: 2px;
-      border-bottom: 1px solid rgba(25, 25, 25, 0.25);
-      text-decoration: none;
-
-      &:hover {
-        border-bottom: 1px solid $background;
-      }
-    }
   }
 
   &__content {
@@ -70,26 +60,30 @@
         }
       }
     }
-
-    a {
-      color: $background;
-      padding-bottom: 2px;
-      border-bottom: 1px solid $background;
-      cursor: pointer;
-
-      &:hover {
-        text-decoration: none;
-      }
-
-      &:visited {
-        color: $background;
-      }
-    }
   }
 
-
   iframe {
     width: 100%;
     min-height: 400px;
   }
 }
+
+
+@media only screen and (max-width: 1000px) {
+  .documentation {
+    flex-direction: column;
+    padding: 2rem;
+
+    &__content {
+      width: 100%;
+      margin-left: 0;
+    }
+
+    &__sidebar {
+      border-top: 1px solid $background;
+      order: 1;
+      margin-right: 0;
+      margin-top: 1rem;
+    }
+  }
+}

docs/sass/_header.scss

@@ -1,6 +1,10 @@
 header {
+  .header__logo {
+    border-bottom: none;
+  }
+
   nav a {
-    margin-right: 1rem;
+    margin-right: 2rem;
   }
 
   .header__logo {
@@ -12,3 +16,18 @@ header {
     }
   }
 }
+
+@media only screen and (max-width: 1000px) {
+  header {
+    padding: 1rem 0;
+
+    nav {
+      text-align: center;
+    }
+
+    .header__logo {
+      // to force menu links to be on a line below
+      display: block;
+    }
+  }
+}

docs/sass/_index.scss

@@ -1,3 +1,8 @@
+.inverted-colours {
+  background: $foreground;
+  color: $background;
+}
+
 .hero {
   width: 60%;
   margin: 0 auto;
@@ -11,8 +16,6 @@
 }
 
 .selling-points {
-  background: $foreground;
-  color: $background;
   padding: 3rem;
 
   &__content {
@@ -23,6 +26,29 @@
 
 .selling-point {
   // 2 selling points per row on desktop
-  width: 50%;
+  width: 33%;
   padding: 2rem;
+  padding-top: 1rem;
+}
+
+// and 1 on mobile
+@media only screen and (max-width: 1000px) {
+  .hero {
+    width: 90%;
+    margin-top: 2rem;
+    margin-bottom: 4rem;
+  }
+
+  .selling-points {
+    padding: 2rem;
+  }
+
+  .selling-point {
+    width: 100%;
+    padding: 1rem;
+
+    h2 {
+      text-align: center;
+    }
+  }
 }

docs/sass/_layout.scss

@@ -1,5 +1,5 @@
 header {
-  padding: 2rem 0;
+  padding: 2rem 3rem;
 }
 
 .container {
@@ -25,5 +25,5 @@ header {
 
 footer {
   text-align: center;
-  padding: 2rem 0;
+  padding: 2rem 3rem;
 }

docs/sass/site.scss

@@ -8,6 +8,7 @@
 
 $background: #191919;
 $foreground: white;
+$link-color: #007CBC;
 
 @import "base";
 @import "layout";

docs/templates/documentation.html

@@ -1,5 +1,6 @@
 {% extends "index.html" %}
 
+{% block extra_nav_class %}{% endblock extra_nav_class %}
 {% block extra_content_class %}content--reversed{% endblock extra_content_class %}
 
 {% block content %}

docs/templates/index.html

@@ -7,73 +7,90 @@
         <meta name="description" content="{% block description %}{{ config.description }}{% endblock description %}">
         <meta name="author" content="{{ config.extra.author }}">
         <title>{% block title %}{{ config.title }}{% endblock title %}</title>
-        <link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet">
+        <link rel="stylesheet" href="{{ get_url(path="site.css") }}"/>
-        <link rel="stylesheet" href="{{ get_url(path="site.css", cachebust=true) }}"/>
+        <link rel="icon" href="{{ get_url(path="favicon.ico") }}">
     </head>
     <body>
 
         <header>
-            <nav class="container">
+            <nav class="{% block extra_nav_class %}container{% endblock extra_nav_class %}">
-                <a class="header__logo" href="{{ config.base_url }}">Gutenberg</a>
+                <a class="header__logo white" href="{{ config.base_url }}">Gutenberg</a>
-                <a href="/documentation" class="nav-link">Docs</a>
+                <a class="white" href="{{ get_url(path="./documentation/_index.md") }}" class="nav-link">Docs</a>
-                <a href="https://github.com/Keats/gutenberg" class="nav-link">Github</a>
+                <a class="white" href="https://github.com/Keats/gutenberg" class="nav-link">GitHub</a>
             </nav>
         </header>
 
         <div class="content {% block extra_content_class %}{% endblock extra_content_class %}">
             {% block content %}
                 <div class="hero">
-                    <h1>Your damn fast one-stop static site engine</h1>
+                    <h1>Your one-stop static site engine</h1>
                     <p class="hero__tagline">
                         Forget dependencies. Everything you need in one binary.
                     </p>
-                    <a href="/documentation" class="button">Get started</a>
+                    <a href="{{ get_url(path="./documentation/_index.md") }}" class="button">Get started</a>
                 </div>
 
-                <div class="selling-points">
+                <div class="inverted-colours selling-points">
                     <div class="selling-points__content container">
-
                         <div class="selling-point">
-                            <h2>Everything built-in</h2>
+                            <h2>No dependencies</h2>
                             <p>
-                                Gutenberg comes with Sass compilation, syntax highlighting and
+                                Gutenberg comes as a single executable with Sass compilation, syntax highlighting, table of contents
-                                other features that usually require using additional tools
+                                and many other features that traditionally require setting up a dev environment
-                                or use JavaScript libraries on your site.
+                                or adding some JavaScript libraries to your site.
                             </p>
                         </div>
 
                         <div class="selling-point">
-                            <h2>Fast</h2>
+                            <h2>Blazing fast</h2>
                             <p>
-                                Your site will be generated in milliseconds, not seconds.
+                                The average site will be generated in less than a second,
-                                That includes Sass compilation and syntax highlighting.
+                                including Sass compilation and syntax highlighting
+                                thanks to <a href="https://www.rust-lang.org">Rust</a>.
                             </p>
                         </div>
 
                         <div class="selling-point">
-                            <h2>Flexible</h2>
+                            <h2>Scalable</h2>
                             <p>
-                                You can build anything you want with Gutenberg: blogs, landing pages, knowledge bases...
+                                Gutenberg renders your whole site as static files, making it trivial to handle
+                                any kind of traffic you will throw at it at no cost without having
+                                to worry about managing a server or a database.
                             </p>
                         </div>
 
                         <div class="selling-point">
                             <h2>Easy to use</h2>
                             <p>
-                                Gutenberg gets out of your way so you can focus on what
+                                From the CLI to the template engine, everything is designed to be intuitive.
-                                you are actually making.
+                                Don't take my words for it though, look at the
+                                <a href="{{ get_url(path="./documentation/_index.md") }}">documentation</a> and see for yourself.
                             </p>
                         </div>
 
+                        <div class="selling-point">
+                            <h2>Flexible</h2>
+                            <p>
+                                Gutenberg gets out of your way so you can focus on your content, be it a blog,
+                                a knowledge base, a landing page or a combination of them.
+                            </p>
+                        </div>
+
+                        <div class="selling-point">
+                            <h2>Augmented Markdown</h2>
+                            <p>
+                                Gutenberg comes with <a href="{{ get_url(path="./documentation/content/shortcodes.md") }}">shortcodes</a> and
+                                <a href="{{ get_url(path="./documentation/content/linking.md") }}">internal links</a>
+                                to make it easier to write your content.
+                            </p>
+                        </div>
                     </div>
                 </div>
+
             {% endblock content %}
         </div>
-
         <footer>
-            <div class="container">
+            ©2017 — <a class="white" href="https://vincent.is">Vincent Prouillet</a> and <a class="white" href="https://github.com/Keats/gutenberg/graphs/contributors">contributors</a>
-                © 2017 Vincent Prouillet
-            </div>
         </footer>
     </body>
 </html>

netlify.toml

@@ -0,0 +1,8 @@
+[build]
+  base    = "docs"
+  publish = "docs/public"
+  command = "curl -sL https://github.com/Keats/gutenberg/releases/download/v0.2.1/gutenberg-v0.2.1-x86_64-unknown-linux-gnu.tar.gz | tar zxvf - && /opt/build/repo/docs/gutenberg build"
+
+[context.deploy-preview]
+  command = "curl -sL https://github.com/Keats/gutenberg/releases/download/v0.2.1/gutenberg-v0.2.1-x86_64-unknown-linux-gnu.tar.gz | tar zxvf - && /opt/build/repo/docs/gutenberg build --base-url $DEPLOY_PRIME_URL"
+