Final platform design

_data/menu.yml

@@ -1,29 +1,11 @@
-- title: "About"
-  slug: "about"
-  subitems:
-    - subtitle: "Objectives"
-      subslug: "objectives"
-    - subtitle: "Technical structure"
-      subslug: "technical-structure"
-    - subtitle: "Work Packages"
-      subslug: "work-packages"
-    - subtitle: "Deliverables"
-      subslug: "deliverables"
-    - subtitle: "Partners"
-      subslug: "partners"
+- title: "Upload"
+  slug: "comingsoon"
 
-# - title: "Events"
-#  slug: "events"
-# disabled due to inactivity
+- title: "Explore"
+  slug: "comingsoon"
 
-- title: "Blog"
-  slug: "blog"
-
-- title: "Tools"
+- title: "Toolbox"
   slug: "tools"
 
-- title: "Contact"
-  slug: "contact"
-
-- title: "Press"
-  slug: "press"
+- title: "Blog"
+  slug: "blog"

_data/secondary-menu.yml

@@ -1,6 +1,5 @@
-# - title: "About"
-#  slug: "about"
-# disabled as already featurd above
+- title: "About"
+  slug: "about"
 
 - title: "Work Packages"
   slug: "about/work-packages"
@@ -12,8 +11,7 @@
   slug: "about/technical-structure"
 
 - title: "Partners"
-  slug: "about/partners"
+  slug: "about/partners/"
 
 - title: "Resources"
   slug: "resources"
-

_includes/footer.html

@@ -7,51 +7,3 @@
   {% endfor %}
   </ul>
 </nav>
-
-<footer class="site-footer">
-  <div class="wrapper">
-    <a class="footer-logo" href="http://openbudgets.eu/">
-      <img src="{{ "/img/openbudgets-logo-white.png" | prepend: site.baseurl }}" alt="OpenBudgets.eu">
-    </a>
-    <ul class="footer-primary-links">
-      <li><a href="https://okfn.org/about/">About</a></li>
-    </ul>
-
-    <div class="footer-secondary-links">
-
-      <ul class="footer-social">
-        {% if site.facebook_username %}
-        <li>
-            <a href="https://facebook.com/{{ site.facebook_username }}" class="facebook" rel="external">
-              Facebook
-            </a>
-        </li>
-        {% endif %}
-        {% if site.twitter_username %}
-        <li>
-          <a href="https://twitter.com/{{ site.twitter_username }}" class="twitter" rel="external">
-            Twitter
-          </a>
-        </li>
-        {% endif %}
-        {% if site.linkedin %}
-        <li>
-          <a href="https://www.linkedin.com/{{ site.linkedin }}" class="linkedin" rel="external">
-            LinkedIn
-          </a>
-        </li>
-        {% endif %}
-        {% if site.github_link %}
-        <li>
-          <a href="https://github.com/{{ site.github_link }}" class="github" rel="external">
-            GitHub
-          </a>
-        </li>
-        {% endif %}
-      </ul>
-    </div>
-
-    <hr>
-    <p>OpenBudget.eu has received funding from the European Union’s <a href="https://ec.europa.eu/programmes/horizon2020/">H2020 EU research and innovation programme</a> under grant agreement <a href="http://cordis.europa.eu/project/rcn/194394_en.html">No 645833</a>.</p>
-  </div>
-</footer>

_includes/head.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link rel="apple-touch-icon" href="apple-touch-icon.png">
-    <link href='//fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,700' rel='stylesheet' type='text/css'>
+    <link href="//fonts.googleapis.com/css?family=Cabin:400,400i,600,700" rel="stylesheet"> 
     <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
     <script src="{{ "/js/vendor/modernizr-2.8.3.min.js" | prepend: site.baseurl }}"></script>
-</head>
+</head>

_includes/header.html

@@ -1,9 +1,8 @@
 <header class="site-header">
     <div class="wrapper">
         <a href="{{ "/" | prepend: site.baseurl }}" class="logo">
-            <img src="{{ "/img/openbudgets-logo-white.png" | prepend: site.baseurl }}" alt="OpenBudgets.eu">
+            <img src="{{ "/img/openbudgets-logo.svg" | prepend: site.baseurl }}" alt="OpenBudgets">
         </a>
-        {% include social-links.html %}
         {% assign current_page = page.url | downcase | split: '/' %}
 		<nav>
 			<ul>

_includes/post-list-item.html

@@ -1,17 +1,9 @@
 <article>
-    <div class="date"><span>{{ post.date | date: "%-d %b" }}</span> <span class="year">{{ post.date | date: "%Y" }}</span></div>
-
     <div class="text">
-        {% if post.categories %}
-        <ul class="categories">
-        {% for cat in post.categories %}
-            <li>{{ cat }}</li>
-        {% endfor %}
-        </ul>
-        {% endif %}
+        <div class="date"><span>{{ post.date | date: "%-d %b" }}</span> <span class="year">{{ post.date | date: "%Y" }}</span></div>
         <h1 class="title"><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h1>
         <div class="content">
-        {{ post.excerpt }}
+        {{ post.excerpt | markdownify }}
         </div>
         <a href="{{ site.baseurl }}{{ post.url }}">Read More</a>
     </div>

_includes/users.html

@@ -0,0 +1,29 @@
+<section class="users">
+  <div>
+    <h2>Let’s get started!</h2>
+    <span class="item">
+      <a href="{{ site.baseurl }}/tools/#filter=.audience-administration"><img src="{{ site.baseurl }}/img/tree-map.svg" alt="" /></a>
+      <h3><a href="{{ site.baseurl }}/tools/#filter=.audience-administration">Are you a government agency?</a></h3>
+      <p>
+        Upload, package, and visualise your dataset, and embedd it on your website using the Microsite. Present your progress using Key Performance Indicators or learn about how to implement participatory budgeting.
+      </p>
+      <a class="more" href="{{ site.baseurl }}/tools/#filter=.audience-administration">More</a>
+    </span>
+    <span class="item">
+      <a href="{{ site.baseurl }}/tools/#filter=.audience-data-wrangling"><img src="{{ site.baseurl }}/img/chart.svg" alt="" /></a>
+      <h3><a href="{{ site.baseurl }}/tools/#filter=.audience-data-wrangling">Are you a data wrangler?</a></h3>
+      <p>
+        Apply a wide range of tools to your fiscal dataset and exlpore new ways to gain insight. Feel Confident? Build you own pipelines and explore the depths of your linked dataset.
+      </p>
+      <a class="more" href="{{ site.baseurl }}/tools/#filter=.audience-data-wrangling">More</a>
+    </span>
+    <span class="item">
+      <a href="{{ site.baseurl }}/tools/#filter=.audience-journalism"><img src="{{ site.baseurl }}/img/find.svg" alt="" /></a>
+      <h3><a href="{{ site.baseurl }}/tools/#filter=.audience-journalism">Are you a journalist?</a></h3>
+      <p>
+        View our catalogue of journalistic investigations into the realm of fiscal data, discover a series of tools made to illustrate corruption techniques, and test your guessing skills in a gamified environment.
+      </p>
+      <a class="more" href="{{ site.baseurl }}/tools/#filter=.audience-journalism">More</a>
+    </span>
+  </div>
+</section>

_layouts/default.html

@@ -32,28 +32,28 @@
                 </li>
             {% endfor %}
             </ul>
-            {% include social-links.html %}
         </nav>
 
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
         <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
         <script src="{{ "/js/plugins.js" | prepend: site.baseurl }}"></script>
         <script src="{{ "/js/main.js" | prepend: site.baseurl }}"></script>
 
-        {% if page.aside == true and site.twitter_feed %}
-        <script src="{{ "/js/vendor/twitterFetcher_min.js" | prepend: site.baseurl }}"></script>
+        {% if page.layout == 'tools' %}
+        <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
+        <script src="{{ "/js/tools.js" | prepend: site.baseurl }}"></script>
+        {% endif %}
+
+        {% if page.layout == 'docs' %}
+        <script src="{{ "/js/vendor/jquery.colorbox-min.js" | prepend: site.baseurl }}"></script>
         <script>
-          var configProfile = {
-            "id": '{{ site.twitter_feed }}',
-            "domId": 'twitter',
-            "maxTweets": 5,
-            "enableLinks": true,
-            "showUser": true,
-            "showTime": false,
-            "showImages": false,
-            "lang": 'en'
-          };
-          twitterFetcher.fetch(configProfile);
+          jQuery(document).ready(function($){
+          {% assign group = 0 %}
+          {% for s in page.steps %}
+            {% assign group = group | plus: 1 %}
+          	$(".group{{ group }}").colorbox({rel:'group{{ group }}', width:"80%"});
+          {% endfor %}
+          });
         </script>
         {% endif %}
 

_layouts/docs.html

@@ -0,0 +1,48 @@
+---
+layout: default
+---
+<div class="docs">
+  <div class="banner">
+    <div class="wrapper">
+      <span>
+        <h1>{{ page.title }}</h1>
+        {{ content }}
+      </span>
+    </div>
+  </div>
+
+  <article>
+    {% assign step = 0 %}
+    {% for s in page.steps %}
+    {% assign step = step | plus: 1 %}
+    <div class="step{% if s.class %} {{ s.class }}{% endif %}">
+      <div class="wrapper">
+        <h2>{{ s.heading }}</h2>
+        <figure>
+          <figcaption>
+            <h3>{{ s.caption-heading }}</h3>
+            <em>{{ s.caption }}</em>
+          </figcaption>
+          {% if s.image %}
+          {% if s.large-images %}
+          <a class="group{{ step }}" href="{{ site.baseurl }}/img/{% for i in s.large-images limit:1 %}{{ i }}{% endfor %}">
+            <img src="{{ site.baseurl }}/img/{{ s.image }}" alt="">
+          </a>
+          <ul class="image-list">
+            {% for i in s.large-images offset:1 %}
+            <li>
+              <a class="group{{ step }}" href="{{ site.baseurl }}/img/{{ i }}">Image</a>
+            </li>
+            {% endfor %}
+          </ul>
+          {% else %}
+          <img src="{{ site.baseurl }}/img/{{ s.image }}" alt="">
+          {% endif %}
+          {% endif %}
+        </figure>
+      </div>
+    </div>
+    {% endfor %}
+  </article>
+  {% include users.html %}
+</div>

_layouts/home.html

@@ -1,56 +1,43 @@
 ---
 layout: default
 ---
-{% capture future_events %}{% for event in site.data.events %}{% if event.status == 'future' %}<h3><a href="{{ event.link }}">{{ event.title }}</a></h3><span>{{ event.description | truncate: 270 | markdownify }}</span><a href="{{ event.link }}">Join us!</a>@@{% endif %}{% endfor %}{% endcapture %}
-{% assign future_e = future_events | split:"@@" %}
-
-{% capture featured_events %}{% for event in site.data.events %}{% if event.status == 'featured' %}<h3><a href="{{ event.link }}">{{ event.title }}</a></h3><span>{{ event.description | truncate: 270 | markdownify }}</span><a href="{{ event.link }}">Join us!</a>@@{% endif %}{% endfor %}{% endcapture %}
-{% assign featured_e = featured_events | split:"@@" %}
-
 <div class="home">
-    <div class="banner">
-        <div class="wrapper">
-            <span>
-                <h1>{{ site.description }}</h1>
-            </span>
-        </div>
+  <div class="banner">
+    <div class="wrapper">
+      <span>
+        <h1>{{ site.description }}</h1>
+      </span>
     </div>
-    <div class="{% if page.aside == true %}aside {% endif %}wrapper">
-      <article>
-
-        {% if page.video %}
-        <section class="video">
-          <div class="video-wrapper">
-            <iframe src="https://www.youtube-nocookie.com/embed/{{ page.video }}?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
-          </div>
-        </section>
-        {% endif %}
+  </div>
 
-        <section>
-          {{ content | markdownify }}
-          <a href="{{ site.baseurl }}/about/objectives/">Our objectives</a>
-        </section>
+  {% include users.html %}
 
-        <section class="blog-posts">
-          <h2>Recently published on the blog</h2>
-          {% for post in site.categories.post limit:2  %}
+  <section class="blog-posts">
+    <div class="wrapper">
+      <h2>Get to know new ways to discover and share fiscal datasets.</h2>
+      {% assign postnum = 0 %}
+      {% for post in site.categories.post limit:2  %}
+      {% assign postnum = postnum | plus: 1 %}
+        <article class="post-{{ postnum }}">
+          <a class="image" href="{{ site.baseurl }}{{ post.url }}">
+            <span style="background-image:url( {{ site.baseurl }}/img/{{ post.image }} )"></span>
+          </a>
+          <span class="date">{{ post.date | date: "%-d %b" }} {{ post.date | date: "%Y" }}</span>
+          <div class="text">
             <h3><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h3>
-            {% if post.author %}
-            <p class="author">
-              A post by {{ post.author }}{% if post.author_affiliation %} of <em>{% if post.author_affiliation_link %}<a href="{{ post.author_affiliation_link }}">{% endif %}{{ post.author_affiliation }}{% if post.author_affiliation_link %}</a>{% endif %}</em>{% endif %}.
-            </p>
-            {% endif %}
-            <span>{{ post.excerpt | truncate: 500 | markdownify }}</span>
-            <a href="{{ site.baseurl }}{{ post.url }}">Read more</a>
-          {% endfor %}
-        </section>
+            {{ post.excerpt | truncate: 140 | markdownify }}
+          </div>
+        </article>
+      {% endfor %}
+    </div>
+  </section>
 
+  <section class="about">
+    <div class="wrapper">
+      <article>
+        {{ content | markdownify }}
       </article>
-      {% if page.aside == true %}
-      <aside>
-        {% include aside.html %}
-      </aside>
-      {% endif %}
     </div>
+  </section>
 
 </div>