Added progress bars in project presentation on main page

_posts/0000-01-01-Character-Creation.html

@@ -1,6 +1,7 @@
 ---
 published: true
 layout: ikrpg
+categories: [ Portal ]
 tags: 
   - Rules
   - None

_posts/0000-01-01-Character-Sheet.html

@@ -1,6 +1,7 @@
 ---
 published: true
 layout: ikrpg
+categories: [ Portal ]
 tags: 
   - Character Sheet
   - None

_posts/0000-01-01-Publications.html

@@ -1,6 +1,7 @@
 ---
 published: true
 layout: ikrpg
+categories: [ Portal ]
 tags: 
   - Rules
   - None
@@ -8,8 +9,8 @@ tags:
 ---
 
 <p>
-    This page contains all resources used to build this wiki and their contents. It is split into
+    This page contains all publications used to build the publication index and their contents. It is split
-    <a href="#Rulebooks">Rulebooks</a>, <a href="#Magazines">Magazines</a>,
+    into <a href="#Rulebooks">Rulebooks</a>, <a href="#Magazines">Magazines</a>,
     <a href="#Adventures">Adventures</a> and <a href="#Supplements">Supplements</a>.
 </p>
 
@@ -17,7 +18,7 @@ tags:
 <table class="hero text-left">
     <thead>
         <tr>
-            <th>Resource</th>
+            <th>Publication</th>
             <th>Available contents</th>
             <th>Unavailable contents</th>
         </tr>
@@ -72,7 +73,7 @@ tags:
 <table class="veteran text-left">
     <thead>
         <tr>
-            <th>Resource</th>
+            <th>Publication</th>
             <th>Available contents</th>
             <th>Unavailable contents</th>
         </tr>
@@ -189,7 +190,7 @@ tags:
 <table class="epic text-left">
     <thead>
         <tr>
-            <th>Resource</th>
+            <th>Publication</th>
             <th>Available contents</th>
             <th>Unavailable contents</th>
         </tr>
@@ -223,7 +224,7 @@ tags:
 <table class="hero text-left">
     <thead>
         <tr>
-            <th>Resource</th>
+            <th>Publication</th>
             <th>Available contents</th>
             <th>Unavailable contents</th>
         </tr>

_posts/0000-01-01-Sitemap.html

@@ -0,0 +1,47 @@
+---
+layout: ikrpg
+categories: [ Portal ]
+tags: [ Factual dimension, Geographic dimension, Time dimension ]
+---
+
+<p>
+    All pages contained in the IKRPG wiki are listed here. They are either a standalone category page or
+    assigned to a subproject.
+</p>
+
+{% assign sorted_posts = site.posts | sort:"title" %}
+
+<h2 id="Pages">Pages</h2>
+<ul>
+    {% for post in sorted_posts %}
+    {% if post.categories == empty %}
+    <li><a href="{{ post.url }}">{{ post.title }}</a></li>
+    {% endif %}
+    {% endfor %}
+</ul>
+
+
+{% comment %}
+    The below code displays the categories in *sorted* order. 
+{% endcomment %}
+{% capture get_items %}
+    {% for cat in site.categories %}
+        {{ cat | first | replace: ' ', '_' }}
+    {% endfor %}
+{% endcapture %}
+{% capture num_words %}
+    {{ get_items | split:' ' |  sort | join:' ' | number_of_words }}
+{% endcapture %}
+{% for item in (1..num_words) %}
+    {% assign category = get_items | split:' ' |  sort | join:' ' | truncatewords:item | remove:'...' | split:' '  | last | replace: '_', ' ' %}
+    <h2>{{ category | upcase }}</h2>
+    <ul>
+        {% for post in sorted_posts %}
+        {% if post.categories contains category %}
+        <li>
+            <a href="{{ post.url }}">{{ post.title }}</a>
+        </li>
+        {% endif %}
+        {% endfor %}
+    </ul>
+{% endfor %}

_posts/Index/0000-01-01-Ability-Index.html

@@ -9,7 +9,7 @@ tags:
 ---
 
 <p>
-    Abilities are assigned to characters during <a href="/Character-Creation">Character Creation</a>.
+    Abilities are assigned to characters during <a href="/portal/Character-Creation">Character Creation</a>.
 </p>
 <h2>Ability Index</h2>
 <table class="veteran">

_posts/Index/0000-01-01-Adventuring-Company-Index.html

@@ -4,7 +4,7 @@ categories: [ Index ]
 tags: [ Rules, None, None ]
 ---
 <p>
-    Picking an adventuring company is part of the <a href="/Character-Creation">character creation</a> process.
+    Picking an adventuring company is part of the <a href="/portal/Character-Creation">character creation</a> process.
 </p>
 <h2>Adventuring Company Index</h2>
 <table class="veteran">

_posts/Index/0000-01-01-Archetype-Index.html

@@ -4,7 +4,8 @@ categories: [ Index ]
 tags: [ Rules, None, None ]
 ---
 <p>
-    Picking an archetype is part of the <a href="/Character-Creation">character creation</a> process.
+    Picking an archetype is part of the <a href="/portal/Character-Creation">character creation</a>
+    process.
 </p>
 <h2>Archetype Index</h2>
 <table class="veteran">

_posts/Index/0000-01-01-Career-Index.html

@@ -4,7 +4,7 @@ categories: [ Index ]
 tags: [ Rules, None, None ]
 ---
 <p>
-    Picking a career is part of the <a href="/Character-Creation">character creation</a> process.
+    Picking a career is part of the <a href="/portal/Character-Creation">character creation</a> process.
     Characters get access to <a href="/index/Ability-Index">abilities</a>, connections,
     <a href="/index/Skill-Index">skills</a> and <a href="/index/Spell-Index">spells</a> through their
     careers.

_posts/Index/0000-01-01-Race-Index.html

@@ -4,7 +4,7 @@ categories: [ Index ]
 tags: [ Rules, None, None ]
 ---
 <p>
-    Picking a race is part of the <a href="/Character-Creation">character creation</a> process.
+    Picking a race is part of the <a href="/portal/Character-Creation">character creation</a> process.
     Characters get access to stats and <a href="/index/Ability-Index">abilities</a> through their race.
 </p>
 <h2>Race Index</h2>

_posts/Index/0000-01-01-Skill-Index.html

@@ -4,7 +4,7 @@ categories: [ Index ]
 tags: [ Rules, None, None ]
 ---
 <p>
-    Characters are assigned skills while <a href="/Character-Creation">being created</a>.
+    Characters are assigned skills while <a href="/portal/Character-Creation">being created</a>.
 </p>
 <h2>Military Skill Index</h2>
 <table class="hero">

_posts/Index/0000-01-01-Spell-Index.html

@@ -4,7 +4,7 @@ categories: [ Index ]
 tags: [ Rules, None, None ]
 ---
 <p>
-    Gifted characters are assigned spells while <a href="/Character-Creation">being created</a>.
+    Gifted characters are assigned spells while <a href="/portal/Character-Creation">being created</a>.
 </p>
 <h2>Spell Index</h2>
 <table class="hero">

index.html

@@ -6,26 +6,181 @@ tags: [ Factual dimension, Geographic dimension, Time dimension ]
 
 {% assign sorted_posts = site.posts | sort:"title" %}
 <p>
-    Welcome to the unofficial Iron Kingdoms Role Playing Game (IKRPG) wiki.
+    Welcome to the unofficial Iron Kingdoms Role Playing Game (IKRPG) wiki. The best place to start
+    exploring this wiki is its <a href="/portal/Sitemap">sitemap</a>. A different approach is to visit a
+    <a href="#projects">project page</a>.
 </p>
-<h2 id="Portals">Portals</h2>
-<ul>
-    {% for post in sorted_posts %}
-    {% if post.categories == empty %}
-    <li><a href="{{ post.url }}">{{ post.title }}</a></li>
-    {% endif %}
-    {% endfor %}
-</ul>
 
-{% for category in site.categories %}
+<h2 id="projects">Projects</h2>
-<h2>{{ category[0] | upcase }}</h2>
+<p>
-<ul>
+    The wiki comprises several projects: the <a href="#publication-index">Publication Index</a> project,
-    {% for post in sorted_posts %}
+    the <a href="#character-sheet">Character Sheet</a> project and the
-    {% if post.categories contains category[0] %}
+    <a href="#character-generator">Character Generator</a> project.
-    <li>
+</p>
-        <a href="{{ post.url }}">{{ post.title }}</a>
+
-    </li>
+<h3 id="publication-index">Publication Index</h3>
-    {% endif %}
+<p>
-    {% endfor %}
+    The <a href="/portal/Publications">Publication Index</a> project aims at providing a publication
-</ul>
+    spanning index for content like <a href="/index/Career-Index">careers</a> or
-{% endfor %}
+    <a href="/index/Equipment-Index">equipment</a>. This project can never be considered finished as long as
+    new publications are released.
+</p>
+<nav class="progress blue step3">
+    <ul id="No-Quarter-49">
+        <li><a href="#No-Quarter-49"><span>No Quarter<br />#49</span></a>
+    <ul id="No-Quarter-48">
+        <li><a href="#No-Quarter-48"><span>No Quarter<br />#48</span></a>
+    <ul id="Full-Metal-Friday-5-1">
+        <li><a href="#Full-Metal-Friday-5-1"><span>Full Metal<br />Friday 5/1</span></a>
+    <ul class="current" id="Full-Metal-Friday-4-4">
+        <li><a href="#Full-Metal-Friday-4-4"><span>Full Metal<br />Friday 4/4</span></a>
+    <ul id="Full-Metal-Friday-4-3">
+        <li><a href="#Full-Metal-Friday-4-3"><span>Full Metal<br />Friday 4/3</span></a>
+    <ul id="Full-Metal-Friday-4-2">
+        <li><a href="#Full-Metal-Friday-4-2"><span>Full Metal<br />Friday 4/2</span></a>
+    <ul id="Full-Metal-Friday-4-1">
+        <li><a href="#Full-Metal-Friday-4-1"><span>Full Metal<br />Friday 4/1</span></a>
+    <ul id="Full-Metal-Friday-3-4">
+        <li><a href="#Full-Metal-Friday-3-4"><span>Full Metal<br />Friday 3/4</span></a>
+    <ul id="Full-Metal-Friday-3-3">
+        <li><a href="#Full-Metal-Friday-3-3"><span>Full Metal<br />Friday 3/3</span></a>
+    <ul id="Full-Metal-Friday-3-2">
+        <li><a href="#Full-Metal-Friday-3-2"><span>Full Metal<br />Friday 3/2</span></a>
+    <ul id="Full-Metal-Friday-3-1">
+        <li><a href="#Full-Metal-Friday-3-1"><span>Full Metal<br />Friday 3/1</span></a>
+    <ul id="Full-Metal-Friday-2-4">
+        <li><a href="#Full-Metal-Friday-2-4"><span>Full Metal<br />Friday 2/4</span></a>
+    <ul id="Full-Metal-Friday-2/3">
+        <li><a href="#Full-Metal-Friday-2-3"><span>Full Metal<br />Friday 2/3</span></a>
+    <ul id="Full-Metal-Friday-2-2">
+        <li><a href="#Full-Metal-Friday-2-2"><span>Full Metal<br />Friday 2/2</span></a>
+    <ul id="Full-Metal-Friday-2-1">
+        <li><a href="#Full-Metal-Friday-2-1"><span>Full Metal<br />Friday 2/1</span></a>
+    <ul id="Full-Metal-Friday-1-4">
+        <li><a href="#Full-Metal-Friday-1-4"><span>Full Metal<br />Friday 1/4</span></a>
+    <ul id="Full-Metal-Friday-1-3">
+        <li><a href="#Full-Metal-Friday-1-3"><span>Full Metal<br />Friday 1/3</span></a>
+    <ul id="Full-Metal-Friday-1-2">
+        <li><a href="#Full-Metal-Friday-1-2"><span>Full Metal<br />Friday 1/2</span></a>
+    <ul id="Full-Metal-Friday-1-1">
+        <li><a href="#Full-Metal-Friday-1-1"><span>Full Metal<br />Friday 1/1</span></a>
+    <ul id="Errata">
+        <li><a href="#Errata"><span>Errata</span></a>
+    <ul id="Core-Rules-Bestiary-Expanded">
+        <li><a href="#Core-Rules-Bestiary-Expanded"><span>Core Rules<br />Bestiary Exp</span></a>
+    <ul id="Fools-Rush-In">
+        <li><a href="#Fools-Rush-In"><span>Fools Rush<br />In</span></a>
+    <ul id="No-Quarter-47">
+        <li><a href="#No-Quarter-47"><span>No Quarter<br />#47</span></a>
+    <ul id="No-Quarter-46">
+        <li><a href="#No-Quarter-46"><span>No Quarter<br />#46</span></a>
+    <ul id="No-Quarter-45">
+        <li><a href="#No-Quarter-45"><span>No Quarter<br />#45</span></a>
+    <ul id="No-Quarter-44">
+        <li><a href="#No-Quarter-44"><span>No Quarter<br />#44</span></a>
+    <ul id="No-Quarter-43">
+        <li><a href="#No-Quarter-43"><span>No Quarter<br />#43</span></a>
+    <ul id="Urban-Adventure">
+        <li><a href="#Urban-Adventure"><span>Urban<br />Adventure</span></a>
+    <ul id="Core-Rules" class="last-sibling-of-kind">
+        <li><a href="#Core-Rules"><span>Core Rules</span></a>
+    </li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul>
+    </li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul>
+    </li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul>
+</nav>
+<nav class="progress green step3">
+    <ul id="Settings">
+        <li><a href="#Settings"><span>Settings</span></a>
+    <ul id="Scenery">
+        <li><a href="#Scenery"><span>Scenery</span></a>
+    <ul id="Encounters">
+        <li><a href="#Encounters"><span>Encounters</span></a>
+    <ul id="Adventures">
+        <li><a href="#Adventures"><span>Adventures</span></a>
+    <ul id="Benefits">
+        <li><a href="#Benefits"><span>Benefits</span></a>
+    <ul id="Feats">
+        <li><a href="#Feats"><span>Feats</span></a>
+    <ul class="current" id="Thralls">
+        <li><a href="#Thralls"><span>Thralls</span></a>
+    <ul id="Steamjacks">
+        <li><a href="#Steamjacks"><span>Steamjacks</span></a>
+    <ul id="Spells">
+        <li><a href="#Spells"><span>Spells</span></a>
+    <ul id="Skills">
+        <li><a href="#Skills"><span>Skills</span></a>
+    <ul id="Races">
+        <li><a href="#Races"><span>Races</span></a>
+    <ul id="Organizations">
+        <li><a href="#Organizations"><span>Organizations</span></a>
+    <ul id="Monsters">
+        <li><a href="#Monsters"><span>Monsters</span></a>
+    <ul id="Mechanika">
+        <li><a href="#Mechanika"><span>Mechanika</span></a>
+    <ul id="Equipment">
+        <li><a href="#Equipment"><span>Equipment</span></a>
+    <ul id="Careers">
+        <li><a href="#Careers"><span>Careers</span></a>
+    <ul id="Archetypes">
+        <li><a href="#Archetypes"><span>Archetypes</span></a>
+    <ul id="Alchemica">
+        <li><a href="#Alchemica"><span>Alchemica</span></a>
+    <ul id="Adventuring-Companies">
+        <li><a href="#Adventuring-Companies"><span>Adventuring<br />Companies</span></a>
+    <ul id="Abilities" class="last-sibling-of-kind">
+        <li><a href="#Abilities"><span>Abilities</span></a>
+    </li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul>
+    </li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul>
+</nav>
+
+<h3 id="character-sheet">Character Sheet</h3>
+<p>
+    We develop a custom <a href="/portal/Character-Sheet">Character Sheet</a> in this wiki. It is written
+    entirely in HTML and Javascript and can thus be used on any internet device (in varying quality). Since
+    all character sheets are finished now, we will either develop more specialized sheets like for
+    'jacks, thralls or warbeasts or concentrate on extending on the already existing sheets (maybe through a
+    character generator).
+</p>
+<nav class="progress red step1">
+    <ul id="Warbeast-Sheet">
+        <li><a href="#Warbeast-Sheet"><span>Warbeast<br />Sheet</span></a>
+    <ul id="Thrall-Sheet">
+        <li><a href="#Thrall-Sheet"><span>Thrall<br />Sheet</span></a>
+    <ul id="Steamjack-Sheet">
+        <li><a href="#Steamjack-Sheet"><span>'Jack<br />Sheet</span></a>
+    <ul id="Damage-Boxes">
+        <li><a href="#Damage-Boxes"><span>Damage<br />Boxes</span></a>
+    <ul id="Portrait">
+        <li><a href="#Portrait"><span>Portrait</span></a>
+    <ul class="current" id="Notes">
+        <li><a href="#Notes"><span>Notes<br />Sheet</span></a>
+    <ul id="Gear">
+        <li><a href="#Gear"><span>Gear<br />Sheet</span></a>
+    <ul id="Spells">
+        <li><a href="#Spells"><span>Spells<br />Sheet</span></a>
+    <ul id="Abilities">
+        <li><a href="#Abilities"><span>Abilities<br />Sheet</span></a>
+    <ul id="Benefits">
+        <li><a href="#Benefits"><span>Benefits<br />Sheet</span></a>
+    <ul id="Skills">
+        <li><a href="#Skills"><span>Skills<br />Sheet</span></a>
+    <ul id="Stats" class="last-sibling-of-kind">
+        <li><a href="#Stats"><span>Stats<br />Sheet</span></a>
+    </li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul>
+    </li></ul></li></ul>
+</nav>
+
+<h3 id="character-generator">Character Generator</h3>
+<p>
+    Based on the custom <a href="#character-sheet">Character Sheet</a>, we aim to build a <strong>Character
+    Generator</strong> whose character sheets can be easily shared by their URLs (see the
+    <a href="/portal/Character-Sheet">Character Sheet</a> for a live example). We think this is especially
+    useful for online games.
+</p>
+<nav class="progress blue step3">
+    <ul id="Program-Logic">
+        <li><a href="#Program-Logic"><span>Program<br />Logic</span></a>
+    <ul id="Collect-Database">
+        <li><a href="#Collect-Database"><span>Collect<br />Database</span></a>
+    </li></ul></li></ul>
+</nav>

static/stylesheets/content/progress-bar.css

@@ -0,0 +1,120 @@
+nav.progress {
+    height: 4.5em;
+    margin: 1em 0em 0em 0.2em;
+    padding-top: 1.5em;
+    white-space: nowrap;
+    overflow: auto; }
+    nav.progress > ul {
+        background-color: #ddd;
+        box-shadow: inset 0 0.1em 0.2em rgba(0, 0, 0, 0.3); }
+    nav.progress ul {
+        float: left;
+        padding-left: 0;
+        height: 16px;
+        border-radius: 3em; }
+        nav.progress ul > li {
+            display: inline;
+            margin-top: 0em;
+            margin-bottom: 0em; }
+        nav.progress.step1 ul > li {
+            margin-left: 1em;
+            margin-right: 1em; }
+        nav.progress.step2 ul > li {
+            margin-left: 1.5em;
+            margin-right: 1.5em; }
+        nav.progress.step3 ul > li {
+            margin-left: 2em;
+            margin-right: 2em; }
+        nav.progress.step4 ul > li {
+            margin-left: 2.5em;
+            margin-right: 2.5em; }
+        nav.progress.step5 ul > li {
+            margin-left: 3em;
+            margin-right: 3em; }
+            nav.progress ul > li > a {
+                display: inline-block;
+                margin: -0.6em 0em 0em 0em;
+              /*width: 1.6em;
+                height: 1.6em;*/
+                width: 32px;
+                height: 32px;
+                background-color: #ddd;
+                border-radius: 1em;
+                box-shadow: inset 0 0.1em 0.2em rgba(0, 0, 0, 0.3); }
+            nav.progress ul li > div {
+                position: absolute;
+                display: none; }
+                nav.progress ul > li > a > span {
+                    display: block;
+                    padding-top: 2em;
+                    text-align: center;
+                    line-height: 1em;
+                    color: #666; }
+                nav.progress.step1 ul > li > a > span {
+                    margin-left: -10px;
+                    width: 3.2em; }
+                nav.progress.step2 ul > li > a > span {
+                    margin-left: -18px;
+                    width: 4.2em; }
+                nav.progress.step3 ul > li > a > span {
+                    margin-left: -26px;
+                    width: 5.2em; }
+                nav.progress.step4 ul > li > a > span {
+                    margin-left: -34px;
+                    width: 6.2em; }
+                nav.progress.step5 ul > li > a > span {
+                    margin-left: -42px;
+                    width: 7.2em; }
+
+    nav.progress.blue ul.last-sibling-of-kind,
+    nav.progress.blue ul:target,
+    nav.progress.blue ul.current { background-color: #3B8DBD; }
+    nav.progress.green ul.last-sibling-of-kind,
+    nav.progress.green ul:target,
+    nav.progress.green ul.current { background-color: #82B964; }
+    nav.progress.red ul.last-sibling-of-kind,
+    nav.progress.red ul:target,
+    nav.progress.red ul.current { background-color: #D24D33; }
+        nav.progress ul.last-sibling-of-kind > li > a,
+        nav.progress ul > li > a:hover,
+        nav.progress ul:target li > a,
+        nav.progress ul.current li > a {
+          background-repeat: no-repeat; }
+        nav.progress.blue ul.last-sibling-of-kind > li > a,
+        nav.progress.blue ul > li > a:hover,
+        nav.progress.blue ul:target li > a,
+        nav.progress.blue ul.current li > a {
+            background-color: #3B8DBD;
+            background-image: url(/static/images/progress/cygnar.png); }
+        nav.progress.red ul.last-sibling-of-kind > li > a,
+        nav.progress.red ul > li > a:hover,
+        nav.progress.red ul:target li > a,
+        nav.progress.red ul.current li > a {
+            background-color: #D24D33;
+            background-image: url(/static/images/progress/khador.png); }
+        nav.progress.green ul.last-sibling-of-kind > li > a,
+        nav.progress.green ul > li > a:hover,
+        nav.progress.green ul:target li > a,
+        nav.progress.green ul.current li > a {
+            background-color: #82B964;
+            background-image: url(/static/images/progress/mercenaries.png); }
+        nav.progress ul.last-sibling-of-kind > li > div,
+        nav.progress ul:target > li > div,
+        nav.progress ul.current > li > div { display: block; }
+        nav.progress ul:target > li > div,
+        nav.progress ul.current > li > div { z-index: 2; }
+            nav.progress ul.last-sibling-of-kind > li > a > span,
+            nav.progress ul > li > a:hover > span,
+            nav.progress ul:target li > a > span,
+            nav.progress ul.current li > a > span {
+                padding-top: 32px; }
+            nav.progress.step1 ul.current li > a > span {
+                margin-left: -12px; }
+            nav.progress.step2 ul.current li > a > span {
+                margin-left: -20px; }
+            nav.progress.step3 ul.current li > a > span {
+                margin-left: -28px; }
+            nav.progress.step4 ul.current li > a > span {
+                margin-left: -36px; }
+            nav.progress.step5 ul.current li > a > span {
+                margin-left: -44px; }

static/stylesheets/index.css

@@ -7,4 +7,5 @@
 @import url("/static/stylesheets/content/tables.css") all;
 @import url("/static/stylesheets/content/lists.css") all;
 @import url("/static/stylesheets/content/character-sheet.css") all;
+@import url("/static/stylesheets/content/progress-bar.css") all;
 @import url("/static/stylesheets/foot.css") all;