[gimp-web/gimp-web-static] Added building/writing instructions in meta

[Pat David <patdavid src gnome org>]

commit f24492d539d9e9ccc982ee01f44185866f1d3eb5
Author: Pat David <patdavid gmail com>
Date:   Tue Aug 11 16:04:28 2015 -0500

    Added building/writing instructions in meta

 content/about/meta/building/index.md       |   71 ++++++++++++++--
 content/about/meta/writing/abby-normal.jpg |  Bin 0 -> 66136 bytes
 content/about/meta/writing/index.md        |  124 ++++++++++++++++++++++++++++
 themes/newgimp/static/css/page.css         |    8 ++
 4 files changed, 195 insertions(+), 8 deletions(-)
---
diff --git a/content/about/meta/building/index.md b/content/about/meta/building/index.md
index c52f19a..f9ac0d2 100644
--- a/content/about/meta/building/index.md
+++ b/content/about/meta/building/index.md
@@ -11,7 +11,9 @@ Here are the steps to follow to get your very own copy of the website!
 
 [TOC]
 
-## git
+## Building the Site
+
+### Get git
 
 You will need to get git: <https://git-scm.com/>
 
@@ -27,7 +29,7 @@ We'll cover those steps a little later.
 
 
 
-## Get the Source
+### Get the Source
 
 The source for the GIMP websites can be found here: <https://git.gnome.org/browse/gimp-web/>
 
@@ -79,7 +81,7 @@ Now we just need to get the rest of the tools in place for you to make use of it
 
 
 
-## Get Python
+### Get Python
 
 You will need to download and install Python 2.7.x.
 
@@ -89,7 +91,7 @@ You will need to download and install Python 2.7.x.
 
 
 
-## Get Pelican
+### Get Pelican
 
 Install [Pelican](http://blog.getpelican.com/):
 
@@ -101,7 +103,7 @@ The easiest way to get it after installing Python is to use pip:
 
 
 
-### Some Extras
+#### Some Extras
 
 Some extra components that we use on the site are [Markdown][] and [typogrify][]:
 
@@ -113,7 +115,7 @@ Some extra components that we use on the site are [Markdown][] and [typogrify][]
 
 
 
-## Build the Site
+### Build the Site
 
 Once the requirements are installed building the site is straightforward.
 Enter the project directory and issue the `Pelican` command to build:
@@ -124,7 +126,7 @@ Enter the project directory and issue the `Pelican` command to build:
 After a few moments, the command will finish, and the site files will be in the `output` directory.
 
 
-### Auto Rebuild
+#### Auto Rebuild
 
 If you are developing the site or content and want pelican to automatically regenerate the site when files 
change then you can run the command with the `-r` switch to reload automatically (and will possibly want to 
ignore any caches as well):
 
@@ -132,7 +134,7 @@ If you are developing the site or content and want pelican to automatically rege
 
 
 
-## View the Site
+### View the Site
 
 To accurately see the site it is best to access it through a web server.
 Python has one built in that can be used.
@@ -149,3 +151,56 @@ Do note that the SimpleHTTPServer won't serve SVG elements as images correctly.
 See [this section][] for a solution
 
 [this section]: ../using-pelican/#python-simplehttpserver-svg
+
+
+
+## Writing for the Site
+
+This section will cover writing something for the site.
+In particular it will focus on writing page content (a tutorial, or page like this).
+News items are similar, but will be covered in a different place (not all users will be allowed
+to publish news items).
+
+The actual structure of the site and directory hierarchies are covered in the [Using Pelican][] page.
+For this page, we will stick to writing a tutorial for the site.
+[Using Pelican]: ../using-pelican/
+
+The directories of page sections will be nested just as they are in the source directories now.
+This means that new tutorials will be located in their own directories under the `content/tutorials/` 
directory.
+They will then be accessible on a url like `www.gimp.org/tutorials/NEW_TUTORIAL_NAME/`
+
+For this example, we will create a new tutorial called `GIMP-Test`.
+Create this new directory under the tutorials directory:
+
+    cd content/tutorials/
+    mkdir GIMP-Test
+
+Inside that directory, create a new `index.md` file.
+This will be the page content.
+
+
+### Markdown File
+
+The `index.md` [Markdown][] file requires that any metadata be located first in the file.
+To finish describing metadata, follow it with a blank line and then start the actual file contents.
+The minimum metadata for files should at least be *Title*, *Date*, and *Author*.
+A sample leading section of an `index.md` file might look like this:
+
+    :::Markdown
+    Title: GIMP Test Tutorial
+    Date: 2015-08-11T14:11:02-05:00
+    Author: Pat David
+
+    Welcome to a quick test of writing new content!
+
+The rest of the file will contain the actual tutorial content.
+There is a Markdown cheatsheet available [here]({filename}../markdown.md) for reference.
+There will also be a more detailed article for writing a tutorial coming soon...
+
+When finished, save the file.
+If the webserver is running, and pelican was run with the `-r` option, refreshing the browser page should 
reflect the changes.
+Otherwise run pelican in the base directory again to rebuild the site and show the latest changes.
+
+Due to the way the directories are nested, the above example can be found at:
+
+    localhost:8000/tutorials/GIMP-Test/
diff --git a/content/about/meta/writing/abby-normal.jpg b/content/about/meta/writing/abby-normal.jpg
new file mode 100644
index 0000000..63fef25
Binary files /dev/null and b/content/about/meta/writing/abby-normal.jpg differ
diff --git a/content/about/meta/writing/index.md b/content/about/meta/writing/index.md
new file mode 100644
index 0000000..959ed5d
--- /dev/null
+++ b/content/about/meta/writing/index.md
@@ -0,0 +1,124 @@
+Title: Writing for WGO
+Date: 2015-08-11T14:41:26-05:00
+Modified: 2015-08-11T14:41:33-05:00
+Authors: Pat David
+
+
+Oh good, you want to help us write content for the website!
+
+First, check that you have what you need to build and view the website locally.
+This is so you can check to make sure that what you write is correct, looks good, and doesn't break anything.
+
+Instructions can be found on the [Building WGO page]({filename}../building/index.md).
+
+
+
+## A Tutorial
+
+This walk-through will assume you want to write a new tutorial for the site.
+We will call this tutorial: `GIMP Test`.
+
+
+### Directories
+
+Pelican currently nests page directories as they exist in the source directories.
+This means that if the source directories contain something like this:
+
+`content/about/meta/index.html`
+
+then the same file will be nested in its URL as:
+
+`gimp.org/about/meta/index.html`
+
+The main **Tutorials** index page can be located here:
+
+`content/tutorials/index.md`
+
+Or by it's URL:
+
+`gimp.org/tutorials/`
+
+This page will list each of the tutorials that are available.
+They are all in self-contained directories below tutorials/.
+For instance, the *GIMP_Quickies* tutorial is fully contained in the sub directory:
+
+`content/tutorials/GIMP_Quickies/`
+
+Our sample tutorial will need us to create a directory that we will call *GIMP-Test*:
+
+`content/tutorials/GIMP-Test/`
+
+The actual content for this tutorial will be contained in a file called *index.md* inside this directory:
+
+`content/tutorials/GIMP-Test/index.md`
+
+The tutorial content and all of its assets live inside the same folder.
+This keeps all of the material together in a logical place and eases re-use.
+
+
+
+### index.md
+
+This tutorial assumes the file is a Markdown file, but could also be a reStructuredText or HTML file.
+This is the content that will display when anyone visits the url for your tutorial at:
+
+    gimp.org/tutorials/GIMP-Test/
+    gimp.org/tutorials/GIMP-Test/index.html
+
+
+#### Metadata
+
+The file assumes that before any content the metadata is defined.
+A property/value pair on each line.
+The bare minimum metadata required is the *Title* attribute.
+A good minimum would include *Title*, *Author*, *Date* and would look like this:
+
+    Title: Gimp Test Tutorial
+    Author: Pat David
+    Date: 2015-08-11T15:22:12-05:00
+
+    Hello World!
+    I am the start of a tutorial.
+
+
+
+#### File Content
+
+Refer to the [Markdown cheatsheet]({filename}../markdown.md) for a more complete look at all of the 
formatting options.
+More WGO/Pelican specific things are mentioned here.
+
+
+##### Images
+
+Images are included in a page as a `<figure>` and an optional `<ficaption>`.
+The standard way of including an image into a page is:
+
+    :::html
+    <figure>
+    <img src='image-file-relative-to-index.jpg' alt='alt text' />
+    <figcaption>
+        An optional caption for the image
+    </figcaption>
+    </figure>
+
+With image assets in the same directory as the index.md file, it is much easier to link/refer to them in the 
content.
+For instance, the following refers to a local image "abby-normal.jpg" in the same directory as this index.md 
file:
+
+    :::html
+    <figure>
+    <img src='abby-normal.jpg' alt='Abby Normal' />
+    <figcaption>
+        A sample caption for a figure.
+    </figcaption>
+    </figure>
+
+Which will render as:
+
+<figure>
+<img src='abby-normal.jpg' alt='Abby Normal' />
+<figcaption>
+    A sample caption for a figure.
+</figcaption>
+</figure>
+
+The `<figure>` tag makes more semantic sense in describing a figure element that will usually be referred to 
by 
diff --git a/themes/newgimp/static/css/page.css b/themes/newgimp/static/css/page.css
index 8d03be3..1d1a025 100644
--- a/themes/newgimp/static/css/page.css
+++ b/themes/newgimp/static/css/page.css
@@ -85,3 +85,11 @@ figure figcaption {
 .container.title h1 {
     margin-bottom: 0;
 }
+
+.toc li {
+    margin-bottom: 0;
+}
+
+.toc li ul {
+    margin-bottom: 0;
+}