added header and navigation components (for new pages)

_data/menu.yml

@@ -0,0 +1,24 @@
+
+- about: 
+  en: 
+    name: call for participants
+    url: /about
+  fr: 
+    name: à propos
+    url: /a-propos
+
+- participate: 
+  en: 
+    name: submit a proposal
+    url: "/how-to-participate"
+  fr: 
+    name: soumettre une proposition
+    url: /participer
+
+# - attend:
+#   en:
+#     name: attend
+#     url: /attend
+#   fr:
+#     name: l'événement
+#     url: /evenement

_includes/common/header.html

@@ -0,0 +1,11 @@
+<header class="page-header">
+  {% include common/navigation.html %}
+
+  <div class="page-content" id="rf-logo-wrapper">
+    {% if page.lang == 'fr' %}
+      <a href="{{ site.baseurl }}/fr">{% include common/logo.html %}</a>
+    {% else %}
+      <a href="{{ site.baseurl }}/">{% include common/logo.html %}</a>
+    {% endif %}  
+  </div>
+</header>

_includes/common/lang-selector.html

@@ -1,5 +1,38 @@
+{% assign posts=site.posts | where:"ref", page.ref | sort: 'lang' %}
+{% assign newpages=site.pages | where:"ref", page.ref | sort: 'lang' %}
+
+
+{% if posts.size > 1 %}
+    {% for post in posts %}
+        {% if post.lang != page.lang %}
+            <a href="{{ site.base-url }}{{ post.url }}" class="lang lang--{{ page.lang }}">
                 {% if page.lang == 'en' %}
+                    {{ include.fr-text }}
+                {% else %}
+                    {{ include.en-text }}
+                {% endif %}
+            </a>
+        {% endif %}
+    {% endfor %}
+
+{% elsif newpages.size > 1 %}
+    {% for pege in newpages %}
+        {% if pege.lang != page.lang and page.ref != '' %}
+                {% if page.lang == 'en' %}
+                    <a href="{{ pege.url }}" class="lang lang--{{ page.lang }}">{{ include.fr-text }}</a>
+                {% else %}
+                    <a href="{{ pege.url }}" class="lang lang--{{ page.lang }}">{{ include.en-text }} </a>
+                {% endif %}
+        {% endif %}
+    {% endfor %}
+
+
+{% elsif page.lang == 'en' %}
     <a href="{{ site.baseurl }}/fr" class="lang lang--{{ page.lang }}">{{ include.fr-text }}</a>
+    <span class="poop">{{ site.data.menu[page.ref]}}</span>
 {% else %}
     <a href="{{ site.baseurl }}/" class="lang lang--{{ page.lang }}">{{ include.en-text }} </a>
+    <span class="poop">{{ site.data.menu[page.ref]}}</span>
 {% endif %}
+
+

_includes/common/navigation.html

@@ -0,0 +1,14 @@
+
+<nav>
+  <div class="menu">
+    {% for item in site.data.menu %}
+      {% if page.lang == 'en' %}
+        <a class="nav-link" href="{{ site.baseurl | append: item[page.lang].url }}">{{ item[page.lang].name }}</a>
+      {% else %}
+        <a class="nav-link" href="{{ site.baseurl }}/{{ page.lang | append: item[page.lang].url }}">{{ item[page.lang].name }}</a>
+      {% endif %}
+    {% endfor %}
+  </div>
+  {% include common/lang-selector.html en-text="/english" fr-text="/français" %}
+
+</nav>

_sass/includes/header.scss

@@ -1,21 +1,34 @@
 header.page-header {
-  .lang {
+  .lang,
-    position: absolute;
+  .nav-link {
     color: $text;
-    top: $size-32;
-    right: $size-32;
     background-color: white;
     padding: $size-8;
     transition: box-shadow 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
+    z-index: 1;
 
     &:hover {
       box-shadow: 5px 5px 0 rgba($white, 0.5), 10px 10px 0 rgba($white, 0.4), 15px 15px 0 rgba($white, 0.3);
       transition: box-shadow 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
     }
+  }
 
+  nav {
+    position: absolute;
+    top: $size-32;
+    right: $size-32;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    .menu {
+      display: flex;
+    }
+  }
+
+  .lang,
+  .nav-link {
+    margin: 0 4px 8px 0;
     @include touch {
-      top: $size-16;
-      right: $size-16;
       font-size: 0.8em;
     }
   }
@@ -27,3 +40,29 @@ header.page-header {
     display: inline-block;
   }
 }
+
+#rf-logo-wrapper {
+  transition: all 0.8s ease-in-out;
+  a {
+    font-weight: normal;
+
+    &:hover,
+    &:visited {
+      font-style: normal;
+    }
+  }
+
+  &.hidden {
+    opacity: 0.0001;
+    margin-top: -100px;
+  }
+
+  .rf-logo {
+    margin: $size-64 0 $size-64 $size-32;
+
+    @include touch {
+      max-width: 90%;
+      margin-left: 5%;
+    }
+  }
+}

_sass/layouts/page-with-header.scss

@@ -1,17 +0,0 @@
-#rf-logo-wrapper {
-  transition: all 0.8s ease-in-out;
-
-  &.hidden {
-    opacity: 0.0001;
-    margin-top: -100px;
-  }
-
-  .rf-logo {
-    margin: $size-64 0 $size-64 $size-32;
-
-    @include touch {
-      max-width: 90%;
-      margin-left: 5%;
-    }
-  }
-}

_sass/pages/how-to-participate.scss

@@ -0,0 +1,15 @@
+#page-participate {
+  h2 {
+    display: block;
+  }
+  &.lang-en h2 {
+    margin: 0 203px 16px 0;
+  }
+  &.lang-fr h2 {
+    margin: 0 40px 16px 0;
+  }
+
+  .content p:last-of-type {
+    margin-top: 24px;
+  }
+}

index.html

@@ -1,10 +1,38 @@
 ---
-layout: page-with-header
+layout: content-page
 lang: en
+title: index
+className: index
+ref: index
 ---
 
-{% capture maintext %}
+{% capture intro %}
-  {% include text/intro-text-en.md %}
+  {% include text/en/intro.md %}
 {% endcapture %}
 
-{{ maintext | markdownify }}
+
+<div>
+  <span class="intro">{{ intro | markdownify }}</span>
+  <h2>{{ site.data.translations.latest[page.lang]}}</h2>
+  <ul class="post-list">
+    {% for post in site.posts %}
+      {% if post.lang == page.lang %}
+      <li class="post-item">
+        <header class="post-header">
+          <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
+          <h3 class="titlecase">
+            {% include utils/translated-date.html date=post.date  lang=page.lang %}
+          </h3>
+          <!-- <h3>{{ post.date | date_to_string }}</h3> -->
+
+        </header>
+        <div class="post-content">
+          <span class="post-excerpt">{{ post.excerpt }}</span>
+          <a href="{{ post.url }}">{{ site.data.translations.readMore[page.lang]}} -></a>
+        </div>
+      </li>
+      {% endif %}
+    {% endfor %}
+  </ul>
+</div> 
+