From bad13784850936945f9210da6fc9fbc63df8b913 Mon Sep 17 00:00:00 2001 From: Vincent Prouillet Date: Tue, 12 Sep 2017 16:13:26 +0900 Subject: [PATCH] WIP docs --- docs/content/documentation/_index.md | 34 +++++++++++++++ .../documentation/getting-started/_index.md | 4 ++ .../getting-started/cli-usage.md | 6 +++ .../getting-started/configuration.md | 6 +++ .../getting-started/directory-structure.md | 6 +++ .../getting-started/installation.md | 6 +++ docs/sass/_base.scss | 8 +--- docs/sass/_docs.scss | 3 ++ docs/sass/_index.scss | 18 ++++++++ docs/sass/_layout.scss | 26 ++++++++--- docs/sass/site.scss | 4 ++ docs/templates/documentation.html | 26 +++++++++++ docs/templates/index.html | 43 +++++++++++++++++-- 13 files changed, 174 insertions(+), 16 deletions(-) create mode 100644 docs/content/documentation/_index.md create mode 100644 docs/content/documentation/getting-started/_index.md create mode 100644 docs/content/documentation/getting-started/cli-usage.md create mode 100644 docs/content/documentation/getting-started/configuration.md create mode 100644 docs/content/documentation/getting-started/directory-structure.md create mode 100644 docs/content/documentation/getting-started/installation.md create mode 100644 docs/sass/_docs.scss create mode 100644 docs/templates/documentation.html diff --git a/docs/content/documentation/_index.md b/docs/content/documentation/_index.md new file mode 100644 index 00000000..93266003 --- /dev/null +++ b/docs/content/documentation/_index.md @@ -0,0 +1,34 @@ ++++ +template = "documentation.html" ++++ + +Getting started + - Installation + - CLI usage + - Directory structure + - config.toml + +Content + - Organisation + - Pages + - Sections + - Shortcodes + - Internal links + - Table of contents + - Deep linking (# links) + - Syntax highlighting + - Pagination + - Tag & categories + - RSS + - Sitemap + +Templates + - Intro + - Each kind of page and the variables available + - Built-in global functions + - Built-in filters + - Debugging + +Theme + - Installing & customising a theme + - Creating a theme diff --git a/docs/content/documentation/getting-started/_index.md b/docs/content/documentation/getting-started/_index.md new file mode 100644 index 00000000..7d612614 --- /dev/null +++ b/docs/content/documentation/getting-started/_index.md @@ -0,0 +1,4 @@ ++++ +title = "Getting Started" +sort_by = "order" ++++ diff --git a/docs/content/documentation/getting-started/cli-usage.md b/docs/content/documentation/getting-started/cli-usage.md new file mode 100644 index 00000000..3d1ca149 --- /dev/null +++ b/docs/content/documentation/getting-started/cli-usage.md @@ -0,0 +1,6 @@ ++++ +title = "CLI usage" +order = 2 ++++ + +Hey diff --git a/docs/content/documentation/getting-started/configuration.md b/docs/content/documentation/getting-started/configuration.md new file mode 100644 index 00000000..8285a2c7 --- /dev/null +++ b/docs/content/documentation/getting-started/configuration.md @@ -0,0 +1,6 @@ ++++ +title = "Configuration" +order = 4 ++++ + +Hey diff --git a/docs/content/documentation/getting-started/directory-structure.md b/docs/content/documentation/getting-started/directory-structure.md new file mode 100644 index 00000000..b08854fa --- /dev/null +++ b/docs/content/documentation/getting-started/directory-structure.md @@ -0,0 +1,6 @@ ++++ +title = "Directory structure" +order = 3 ++++ + +Hey diff --git a/docs/content/documentation/getting-started/installation.md b/docs/content/documentation/getting-started/installation.md new file mode 100644 index 00000000..cd4c3515 --- /dev/null +++ b/docs/content/documentation/getting-started/installation.md @@ -0,0 +1,6 @@ ++++ +title = "Installation" +order = 1 ++++ + +Hey diff --git a/docs/sass/_base.scss b/docs/sass/_base.scss index f4046898..c9357721 100644 --- a/docs/sass/_base.scss +++ b/docs/sass/_base.scss @@ -6,8 +6,8 @@ html, body { body { 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: #191919; - color: white; + background-color: $background; + color: $foreground; // for sticky footer display: flex; @@ -65,7 +65,3 @@ pre { padding: 1rem; overflow: auto; } - -button { - -} diff --git a/docs/sass/_docs.scss b/docs/sass/_docs.scss new file mode 100644 index 00000000..12edefe9 --- /dev/null +++ b/docs/sass/_docs.scss @@ -0,0 +1,3 @@ +.documentation { + padding: 3rem; +} diff --git a/docs/sass/_index.scss b/docs/sass/_index.scss index 469995ac..3b9b10d6 100644 --- a/docs/sass/_index.scss +++ b/docs/sass/_index.scss @@ -2,9 +2,27 @@ width: 60%; margin: 0 auto; margin-top: 3rem; + margin-bottom: 6rem; text-align: center; &__tagline { margin-bottom: 2rem; } } + +.selling-points { + background: $foreground; + color: $background; + padding: 3rem; + + &__content { + display: flex; + flex-wrap: wrap; + } +} + +.selling-point { + // 2 selling points per row on desktop + width: 50%; + padding: 2rem; +} diff --git a/docs/sass/_layout.scss b/docs/sass/_layout.scss index d935323d..5b36df24 100644 --- a/docs/sass/_layout.scss +++ b/docs/sass/_layout.scss @@ -1,17 +1,29 @@ header { padding: 2rem 0; +} - nav { - max-width: 1000px; - margin: 0 auto; +.container { + max-width: 1000px; + margin: 0 auto; +} + +@media only screen and (max-width: 1000px) { + .container { + max-width: 90%; } } +.content { + flex-grow: 1; + + &--reversed { + background: $foreground; + color: $background; + } +} + + footer { text-align: center; padding: 2rem 0; } - -.content { - flex-grow: 1; -} diff --git a/docs/sass/site.scss b/docs/sass/site.scss index 6e65bea1..6d990895 100644 --- a/docs/sass/site.scss +++ b/docs/sass/site.scss @@ -6,7 +6,11 @@ box-sizing: border-box; } +$background: #191919; +$foreground: white; + @import "base"; @import "layout"; @import "header"; @import "index"; +@import "docs"; diff --git a/docs/templates/documentation.html b/docs/templates/documentation.html new file mode 100644 index 00000000..6ce88557 --- /dev/null +++ b/docs/templates/documentation.html @@ -0,0 +1,26 @@ +{% extends "index.html" %} + +{% block title %}{{ super() }} - Documentation {% endblock title %} + +{% block extra_content_class %}content--reversed{% endblock extra_content_class %} + +{% block content %} +{% set section = get_section(path="documentation/_index.md") %} +
+ +
+ hey +
+
+{% endblock content %} diff --git a/docs/templates/index.html b/docs/templates/index.html index 971d9938..017c6ee1 100644 --- a/docs/templates/index.html +++ b/docs/templates/index.html @@ -12,15 +12,15 @@
-
-
+
{% block content %}

Your damn fast one-stop static site engine

@@ -29,6 +29,43 @@

Get started
+ +
+
+ +
+

Everything built-in

+

+ Gutenberg comes with Sass compilation, syntax highlighting and + a other features that usually require using additional tools + or use JavaScript libraries on your site. +

+
+ +
+

Fast

+

+ Your site will be generated in milliseconds, not seconds. + That includes Sass compilation and syntax highlighting. +

+
+ +
+

Flexible

+

+ You can build anything you want with Gutenberg: blogs, landing pages, knowledge bases... +

+
+ +
+

Easy to use

+

+ Gutenberg strives for good UX and being productive instantly. +

+
+ +
+
{% endblock content %}