Updates and improves the "starter" template.

* Cleans up CSS.
 * Handles page title endings more elegantly.
 * Renders the advanced menu below the basic one.
 * Corrects and updates content.
 * Explains how to generate and serve the template.
 * Makes it more straightforward to contribute.

hyde/layouts/starter/content/about.html

@@ -1,6 +1,6 @@
 ---
 extends: base.j2
-title_ending: "| About"
+title: About
 default_block: content
 ---
 
@@ -14,8 +14,14 @@ write:
 
     hyde -s folder_name create -l starter
 
-To check for the newest version, to download it separately or to report
-a bug, please visit Hyde Starter Kit's [GitHub page][3].
+To build and serve the template, type:
+
+    cd folder_name
+    hyde gen
+    hyde serve
+
+To check for the newest version, download it separately, report a bug
+or contribute, please visit Hyde Starter Kit's [GitHub page][3].
 
 
 Attributions

hyde/layouts/starter/content/advanced/grouper.html

@@ -1,6 +1,6 @@
 ---
 index: 3
-title_ending: "| Grouping"
+title: Grouping
 tags:
     - sort
     - group

hyde/layouts/starter/content/advanced/overview.html

@@ -1,6 +1,6 @@
 ---
 index: 1
-title_ending: "| Advanced topics"
+title: Advanced topics
 tags:
     - sort
     - group

hyde/layouts/starter/content/advanced/sorter.html

@@ -1,6 +1,6 @@
 ---
 index: 2
-title_ending: "| Sorting"
+title: Sorting
 tags:
     - sort
 learning_order: 1

hyde/layouts/starter/content/advanced/tagger.html

@@ -1,6 +1,6 @@
 ---
 index: 4
-title_ending: "| Tagging"
+title: Tagging
 tags:
     - sort
     - tag

hyde/layouts/starter/content/first-steps.html

@@ -1,6 +1,6 @@
 ---
 extends: base.j2
-title_ending: "| First steps"
+title: First steps
 ---
 {# In-file metadata. Supplements data from the site's configuration file 
    and node (folder) level data in "meta.yaml" files.
@@ -77,8 +77,8 @@ content with Jinja templates.
 
 While searching and navigating this template you'll find more files and
 sections than mentioned on this page (something like **meta.yaml**
-files, the **content/advanced** folder or other Jinja templates). They
-are files needed for the [advanced topics](advanced/overview.html) so
+files, the **content/advanced** folder or other Jinja templates). Those
+files are needed for the [advanced topics](advanced/overview.html) so
 just ignore them at the beginning.  They will start to make sense while
 you're working through the template or will be explicitly explained when
 the right time comes.

hyde/layouts/starter/content/media/css/style.css

@@ -13,10 +13,8 @@ body {
     width: 980px;
     min-height: 700px;
     background: url('../img/background.jpg') top left no-repeat;
-    font-size: 14px;
     position: relative;
-
-    font-size: 62.5%;
+    font-size: 14px;
     font-family: Tahoma, sans-serif;
 }
 
@@ -33,11 +31,11 @@ a:hover, a:focus {
 }
 
 p, ul, ol {
-    margin-bottom: 1.6em;
+    margin-bottom: 22px;
 }
 
 ul, ol {
-    margin-left: 2em;
+    margin-left: 28px;
 }
 
 header {
@@ -82,7 +80,7 @@ nav a:visited {
     text-decoration: none;
     color: white;
     text-transform: uppercase;
-    font-size: 2.8em;
+    font-size: 28px;
 }
 
 nav a.selected {
@@ -97,23 +95,14 @@ nav ul li {
     list-style-type: none;
 }
 
-aside {
-    position: absolute;
-    top: 550px;
-    right: 120px;
-    width: 140px;
-    text-align: right;
-    font-size: 1em;
-}
-
 nav, aside {
     /* to line up with the header */
     padding-right: 5px;
 }
 
 #content {
-    font-size: 1.4em;
-    line-height: 1.6em;
+    /*font-size: 14px;*/
+    line-height: 22px;
     position: absolute;
     top: 350px;
     left: 180px;
@@ -123,18 +112,18 @@ nav, aside {
 
 #content h1 {
     font-weight: normal;
-    font-size: 2em;
+    font-size: 28px;
     font-family: Anton, Tahoma, sans-serif;
     text-transform: uppercase;
-    margin-bottom: 0.8em;
+    margin-bottom: 22px;
     color: white;
 }
 
 #content h2 {
     font-weight: bold;
-    font-size: 1.2em;
+    font-size: 17px;
     font-family: Tahoma, sans-serif;
-    margin-bottom: 1.33em;
+    margin-bottom: 22px;
     color: white;
     border-bottom: 1px dashed #888;
 }
@@ -142,10 +131,10 @@ nav, aside {
 #content code {
     display: block;
     font-family: 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New';
-    font-size: 1.2em;
+    font-size: 12px;
     background-color: #222;
     padding: 5px 10px;
-    margin-bottom: 1.33em;
+    margin-bottom: 20px;
     border-top: 1px solid #444;
     border-right: 1px solid #333;
     border-bottom: 1px solid #222;
@@ -153,7 +142,7 @@ nav, aside {
 }
 
 #content .tags {
-    font-size: 0.8em;
+    font-size: 8px;
     color: #888;
 }
 

hyde/layouts/starter/layout/base.j2

@@ -1,8 +1,10 @@
 <!doctype html>
 <html lang="en">
     <head>
-        <link href="http://fonts.googleapis.com/css?family=Anton" rel="stylesheet" type="text/css">
-        <title>Hyde Starter Kit {{ resource.meta.title_ending }}</title>
+        <link href="http://fonts.googleapis.com/css?family=Anton"
+            rel="stylesheet" type="text/css">
+            <title>Hyde Starter Kit {% if resource.meta.title-%}
+                | {{ resource.meta.title}}{%-endif %}</title>
         <meta charset="utf-8" />
         <link rel="stylesheet" href="{{ media_url('css/style.css') }}">
         <!--[if lt IE 9]>
@@ -19,11 +21,12 @@
         </header>
         <nav>
         {# Move main menu rendering away from the base layout. This
-           way it can be used to generate the list many times, in
+           way it can be used to generate the list many times, e.g. in
            a footer, etc.
         #}
             {% import "macros.j2" as macros with context %}
-            {{ macros.render_main_menu() }}
+            {{ macros.render_basic_menu() }}
+            {{ macros.render_advanced_menu() }}
         </nav>
         <article id="content">
         {# Main content block. Notice it has to pass through the
@@ -34,13 +37,9 @@
             {% block content %}{% endblock %}
             {%- endfilter %}
         </article>
-        <aside>
-            <p>Created by <a href="{{ author.url}}">{{ author.name}}</a>
-            for <a href="{{ project.url }}">{{ project.name }}</a></p>
-        </aside>
 
         {# Some parts of the web are not needed for development and can
-           wait for production (ex. analytics). They can be included in
+           wait for production (e.g. analytics). They can be included in
            the final production build. Create a new config file, extend
            the original one and override the "mode" property; then build
            the site with the new "production configuration".

hyde/layouts/starter/layout/macros.j2

@@ -1,34 +1,45 @@
-{% macro render_main_menu() -%}
-
-{# Set menu item selected if the current resource matches the item in the
-   site's config file or set "Advanced topics" selected for any resources
-   that have the "advanced" folder as their parent.
+{# Generates the main and basic menu from context data in the site's
+   configuration file.
 #}
-<ul>
+{% macro render_basic_menu() -%}
+<ul class="basic">
 {% for menu_item in menu -%}
-    <li><a {% if (menu_item.url == resource.url) or
-                 (menu_item.title == "Advanced topics"
-                  and resource.node.name == "advanced")
-            %}class="selected"{% endif -%}
-            href="{{ content_url(menu_item.url) }}">{{ menu_item.title }}</a></li>
+    <li><a {% if (menu_item.url == resource.url) %}class="selected"{% endif -%}
+        href="{{ content_url(menu_item.url) }}">{{ menu_item.title }}</a></li>
 {%- endfor %}
 </ul>
 {%- endmacro %}
 
 
-{# Advanced topics macro. Renders navigation at the end of the article. #}
+{# Generates the advanced menu from all files located in the content/advanced
+   folder. Only advanced section files have 'index' metadata, so we can be
+   certain that no other files will creep in.
+#}
+{% macro render_advanced_menu() -%}
+<ul class="advanced">
+{% for res in site.content.walk_resources_sorted_by_index() %}
+    <li><a {% if (res.url == resource.url) %}class="selected"{% endif -%}
+        href="{{ res.full_url }}">{{ res.meta.title }}
+        </a></li>
+{% endfor %}
+</ul>
+{%- endmacro %}
+
 
+{# Advanced topics macro. Renders navigation at the end of an advanced
+   article. It also depends on 'index' metadata.
+#}
 {% macro render_bottom_article_nav() %}
 <div class="bottom_article_nav">
 {% if resource.next_by_index is not none -%}
     <div class="next"><a href="{{ resource.next_by_index.full_url }}">
-    {{ resource.next_by_index.meta.title_ending|replace("| ", "") }}</a>
+    {{ resource.next_by_index.meta.title }}</a>
     &gt;</div>
 {%- endif %}
 
 {% if resource.prev_by_index is not none -%}
     <div class="prev">&lt; <a href="{{ resource.prev_by_index.full_url }}">
-    {{ resource.prev_by_index.meta.title_ending|replace("| ", "") }}</a>
+    {{ resource.prev_by_index.meta.title }}</a>
     </div>
 {%- endif %}
 </div>

hyde/layouts/starter/site.yaml

@@ -32,8 +32,6 @@ context:
             url: index.html
           - title: First steps
             url: first-steps.html
-          - title: Advanced topics
-            url: advanced/overview.html
           - title: About
             url: about.html