added back button to event and participant pages

_includes/common/back-button.html

@@ -0,0 +1,10 @@
+<a href="{{ include.parent }}" class="back-button">
+  <span class="back-arrow">←</span>
+  <span class="hide-mobile">
+    {% if include.parentName %}
+      /{{ include.parentName }}
+    {% else %}
+      {{ include.parent }}
+    {% endif %}
+  </span>
+</a>

_includes/common/head.html

@@ -1,10 +1,10 @@
 {% capture title %}
     {% if page.title_ %}
-        {{ site.title | append: " \\ "| append: page.title_ }}
+        {{ site.title | append: " \ "| append: page.title_ }}
     {% elsif page.fullname %}
-        {{ site.title | append: " \\ "| append: page.fullname }}
+        {{ site.title | append: " \ "| append: page.fullname }}
     {% elsif page.title %}
-        {{ site.title | append: " \\ "| append: page.title }}
+        {{ site.title | append: " \ "| append: page.title }}
     {% else %}
         {{ site.title | escape }}
     {% endif %}

_includes/common/header.html

@@ -1,6 +1,14 @@
 <header class="page-header">
   {% include common/navigation.html %}
 
+
+  {% if page.parentEn %}
+    {% include common/back-button.html parent=page.parentEn parentName=page.parentNameEn %}\
+  {% elsif page.parentFr %}
+    {% include common/back-button.html parent=page.parentFr parentName=page.parentNameFr %}\
+  {% endif %}
+  
+
   <div class="page-content" id="rf-logo-wrapper">
     {% if page.lang == 'fr' %}
       <a href="{{ site.baseurl }}/fr">{% include common/logo.html %}</a>

_layouts/event.html

@@ -1,7 +1,10 @@
 ---
 layout: page
 lang: en
-<!-- parent: /rf2020/program -->
+parentEn: /rf2020/program
+parentFr: /fr/rf2020/programme
+parentNameEn: program
+parentNameFr: programme
 ---
 
 {% assign format=page.format | downcase %}
@@ -18,6 +21,7 @@ lang: en
             </small>
         </h2>
       </div>
+      <img src="{{ page.pic }}" alt="" class="participant-profile">
     </header>
 
     <div class="post-content margin-16-bottom">

_layouts/participant.html

@@ -2,6 +2,10 @@
 layout: page
 lang: en
 ref: going-online
+parentEn: /rf2020/participants/
+parentFr: /fr/rf2020/participants/
+parentNameEn: participants
+parentNameFr: intervenants
 ---
 
 <article class="page-content margin-128-bottom participant">

_sass/includes/back-button.scss

@@ -0,0 +1,27 @@
+.back-button {
+  position: fixed;
+  display: block;
+  top: var(--size-32);
+  background-color: white;
+  padding: var(--size-24) var(--size-16);
+  left: 5%;
+  text-decoration: none;
+  z-index: 1;
+  border: 1px solid var(--colour-grey-light);
+  border-radius: 1px;
+
+  span {
+    margin-bottom: var(--size-8);
+    font-weight: normal;
+  }
+
+  @include touch {
+    margin: 0;
+    padding: var(--size-16) var(--size-16);
+    left: var(--size-8);
+  }
+
+  @include darkMode {
+    border-color: var(--colour-graphite);
+  }
+}

_sass/layouts/participant.scss

@@ -8,7 +8,7 @@
     }
 
     img.participant-profile {
-      max-width: 252px;
+      max-width: 300px;
     }
 
     @include touch {
@@ -25,3 +25,16 @@
     }
   }
 }
+
+.participant,
+.event {
+  .post-header {
+    h2 {
+      margin-right: var(--size-32);
+    }
+
+    img.participant-profile {
+      max-width: 252px;
+    }
+  }
+}

assets/css/index.scss

@@ -21,6 +21,7 @@
 @import 'includes/scrollbar';
 @import 'includes/header';
 @import 'includes/footer';
+@import 'includes/back-button';
 @import 'pages/home';
 @import 'pages/about';
 @import 'pages/how-to-participate';