many many style tweaks and changes on participant, event and program pages

_data/menu.yml

@@ -25,10 +25,9 @@
         name: participants
         url: "/rf2020/participants"
       fr: 
-        name: participants
+        name: intervenants
         url: /rf2020/participants
 - donate:
-  colour: red
   en: 
     name: donate
     url: "/donate"

_data/rf2020/events.yml

@@ -16,28 +16,31 @@
     Or will we wake up and places bets on activities, provocation and cultural production that inspires imagination and multitudes of possible futures? (Turbo Mañana)  
     A new sun rises.
   participants : [1]
+
 - id: 2
   title_: Shock Doctrine as a Service
-  ref: SDaaS
+  ref: shock-doctrine-as-a-service
   format: talk
   date: 2020-09-18 17:00
   description: |
     The last fifteen years has seen a surge of interest in decentralised technology. From well-funded blockchain projects like IPFS to the emergence of large scale information networks such as Dat, Scuttlebutt and ActivityPub, this is renewed life in peer-to-peer technologies; a renaissance that enjoys widespread growth, driven by the desire for platform commons and community self-determination. These are goals that are fundamentally at odds with – and a response to – the incumbent platforms of social media, music and movie distribution and data storage. As we enter the 2020s, centralised power and decentralised communities are on the verge of outright conflict for the control of the digital public space.   
     The resilience of centralised networks and the political organisation of their owners remains significantly underestimated by protocol activists. At the same time, the decentralised networks and the communities they serve have never been more vulnerable. The peer-to-peer community is dangerously unprepared for a crisis-fuelled future that has very suddenly arrived at their door.
   participants : [2]
+
 - id: 3
-  title_: Rebuild a data future between us
+  title_: Feminist Data Set
   format: talk
-  ref: rebuild-a-data-future
+  ref: feminist-data-set
   date: 2020-09-19 13:00
   description: |
-    I am working on a series of projects examine the human’s relationship with data and AI in the future. I want to address the iteration of ourselves and the iteration of computing. In the iteration process, how might we design a space that is safe for everyone, and how should we detail with our personal privacy with Artificial Intelligence of Things (AIoT)? And, when we have the technology to understand and communicate with every object, what’s the relationship between humans? If we live in a fully virtual world, how might we sense and feel the reality? The projects includes a fiction story, a critical essay, a short film, and a speculative design solution. Through storytelling, I invite viewers to experience and rethink about the information revolution. For the talk, I want to discuss about my art and design research process, and how might us as artists, designers, and technologists to help build a positive future with data. I want to share my findings about our data culture, and how the current system might drive us to a world we don’t want to live in. These projects I am working on can’t be the solution for the data-driven world, but hopefully we can starting a conversation and some actions to protect our digital selves.
+    What is feminist data inside of social networks, algorithms, and big data? How can we queer data, the archive, and the internet? How can a data set act as a form of protest, of a creation of bias mitigation? This talk looks at ways of intervention, from art, design, and technology that combat and challenge bias. How can we create data to be an act of protest against algorithms? Part of this talk will focus on Caroline's research and current art project, Feminist Data Set. Feminist Data Set acts as a means to combat bias and introduce the possibility of data collection as a feminist practice, aiming to produce a slice of data to intervene in larger civic and private networks. Exploring its potential to disrupt larger systems by generating new forms of agency, her work asks: can data collection itself function as an artwork?
-  participants : [2]
+  participants : [3]
+
 - id: 4
-  title_: Testing testing
+  title_: Testing event with multiple participants
-  format: talk
+  format: panel discussion
-  ref: rebuild-a-data-testing
+  ref: rebuild-data
   date: 2020-09-20 13:00
   description: |
-    I am working on a series of projects examine the human’s relationship with data and AI in the future. I want to address the iteration of ourselves and the iteration of computing. In the iteration process, how might we design a space that is safe for everyone, and how should we detail with our personal privacy with Artificial Intelligence of Things (AIoT)? And, when we have the technology to understand and communicate with every object, what’s the relationship between humans? If we live in a fully virtual world, how might we sense and feel the reality? The projects includes a fiction story, a critical essay, a short film, and a speculative design solution. Through storytelling, I invite viewers to experience and rethink about the information revolution. For the talk, I want to discuss about my art and design research process, and how might us as artists, designers, and technologists to help build a positive future with data. I want to share my findings about our data culture, and how the current system might drive us to a world we don’t want to live in. These projects I am working on can’t be the solution for the data-driven world, but hopefully we can starting a conversation and some actions to protect our digital selves.
+    Some kind of event (panel discussion?) with multiple participants
-  participants : [1]
+  participants : [3, 2]

_data/rf2020/participants.yml

@@ -5,16 +5,18 @@
   location : Austin, Texas U.S.A
   links : ["https://www.are.na/andrew-van-hyfte", "https://www.hyperisland.com", "https://www.frogdesign.com"]
   bio : "Andrew is a designer and strategist currently working at frog; focusing on emerging markets and aesthetic futures in order to imagine brave new ventures. Previously a graduate of Scandinavia’s preeminent experimental design institution, Hyper Island, and investigator/collaborator of mythopoetic modes of teaching in partnership with Barcelona’s Internet Age Media’s 2020 IAM Weekend."
-  picture: /assets/participants/andrew-van-hyfte.jpg
   events: [1]
 - id : 2
   fullname: Cade Diehm
-  title: Cade Diehm
   ref: cade-diehm
   pronouns : he/him
   location : Berlin, Germany
   links : ["https://twitter.com/helveticade", "https://newdesigncongress.org"]
   bio : "Cade is the founder of the New Design Congress, a research group developing a nuanced understanding of technology's role as a social, political and environmental accelerant. He spent ten years embedded in digital infrastructure and security projects in six countries. After his studies, he consulted with government and telecommunications clients with Deloitte Australia. He prototyped Signal, the secure messaging app, with Open Whisper Systems in 2014, led design and strategy at the early cryptocurrency fintech CoinJar and was Chief Creative Officer at SpiderOak, a Snowden-approved cloud storage company. Prior to founding the New Design Congress he led design and information security research at Tactical Tech, a Berlin-based NGO that works to raise awareness of issues of data, privacy and technology in societies."
-  picture : /assets/participants/cade2.png
+- id : 3
-  
+  fullname: Caroline Sinders
-  events: [2,3]
+  ref: caroline-sinders
+  pronouns : She/her
+  location : Berlin, Germany
+  links : ["https://twitter.com/carolinesinders", https://carolinesinders.com/]
+  bio : "Caroline Sinders is a machine-learning-design researcher and artist. For the past few years, she has been examining the intersections of natural language processing, artificial intelligence, abuse, online harassment, and politics in digital, conversational spaces. Sinders is the founder of Convocation Design + Research, an agency focusing on the intersections of machine learning, user research, designing for public good, and solving difficult communication problems. As a designer and researcher, she has worked with Amnesty International, Intel, IBM Watson, the Wikimedia Foundation, and others. Currently, she is a fellow with the Harvard Kennedy School exploring trust patterns designed to trick users in social networks, and a senior fellow with the Mozilla Foundation exploring AI, ethics, and society. Sinders has held fellowships with the Yerba Buena Center for the Arts, Eyebeam, STUDIO for Creative Inquiry, and the International Center of Photography. Her work has been featured in the Tate Exchange in Tate Modern, Victoria and Albert Museum, MoMA PS1, the Houston Center for Contemporary Craft, Slate, Quartz, and the Channels Festival as well as others. Sinders holds a Masters from New York University's Interactive Telecommunications Program."

_data/social-links.yml

@@ -2,3 +2,4 @@ arena: https://are.na/reclaimfutures
 twitter: https://twitter.com/reclaim_futures
 email: mailto:info@reclaimfutures.org
 substack: https://reclaimfutures.substack.com/
+instagram: https://instagram.com/reclaimfutures

_data/translations.yml

@@ -21,3 +21,6 @@ formats:
 program: 
   en: Program
   fr: Programme
+participants: 
+  en: Participants
+  fr: Intervenants

_includes/common/footer.html

@@ -3,8 +3,9 @@
     {% include svg/social-icons/email.html size='17' %}
     {% include svg/social-icons/key.html size='17' %}
     {% include svg/social-icons/arena.html size='17' %}
+    {% include svg/social-icons/instagram.html size='18' %}
+    {% include svg/social-icons/twitter.html size='18' %}
     {% include svg/social-icons/substack.html size='17' %}
-    {% include svg/social-icons/rss.html size='17' %}
+    <!-- {% include svg/social-icons/rss.html size='17' %} -->
-    <!-- {% include svg/social-icons/twitter.html size='17' %} -->
     </div>
 </footer>

_includes/common/head.html

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

_includes/common/lang-selector.html

@@ -29,10 +29,8 @@
 
     {% 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 %}
 </div>
 

_includes/common/navigation.html

@@ -4,23 +4,23 @@
     {% for item in site.data.menu %}
       {% if item.items %}
         <div class="nav-group">
-            <a class="nav-link">{{ item[page.lang].name }}</a>
+            <a class="nav-link colour-{{ item.colour | default: 'black' }} {{ item.case }}">{{ item[page.lang].name }}</a>
           {% for sublink in item.items %}
             {% if page.lang == 'en' %}
-              <a class="sub-nav-link" href="{{ site.baseurl | append: sublink[page.lang].url }}" style=" color: {{ sublink.colour }}">{{ sublink[page.lang].name }}</a>
+              <a class="sub-nav-link colour-{{ sublink.colour | default: 'black' }} {{ sublink.case }}" href="{{ site.baseurl | append: sublink[page.lang].url }}">{{ sublink[page.lang].name }}</a>
             {% else %}
-              <a class="sub-nav-link" href="{{ site.baseurl }}/{{ page.lang | append: sublink[page.lang].url }}">{{ sublink[page.lang].name }}</a>
+              <a class="sub-nav-link colour-{{ sublink.colour | default: 'black' }} {{ sublink.case }}" href="{{ site.baseurl }}/{{ page.lang | append: sublink[page.lang].url }}">{{ sublink[page.lang].name }}</a>
             {% endif %}
           {% endfor %}
         </div>
       {% else %}
         {% if page.lang == 'en' %}
         <div class="nav-group">
-          <a class="nav-link" href="{{ site.baseurl | append: item[page.lang].url }}">{{ item[page.lang].name }}</a>
+          <a class="nav-link colour-{{ item.colour | default: 'black' }} {{ item.case }}" href="{{ site.baseurl | append: item[page.lang].url }}">{{ item[page.lang].name }}</a>
         </div>
         {% else %}
         <div class="nav-group">
-          <a class="nav-link" href="{{ site.baseurl }}/{{ page.lang | append: item[page.lang].url }}">{{ item[page.lang].name }}</a>
+          <a class="nav-link colour-{{ item.colour | default: 'black' }} {{ item.case }}" href="{{ site.baseurl }}/{{ page.lang | append: item[page.lang].url }}">{{ item[page.lang].name }}</a>
         </div>
         {% endif %}
       {% endif %}

_includes/program/program-day.html

@@ -2,8 +2,8 @@
 {% assign date = include.date | date: "%d.%m" %}
 {% assign weekday = include.weekday %}
 
-<div class="content">
+<div class="content margin-64-bottom">
-  <h2 class="textbox inline-block">{{ site.data.date-locales[page.lang].full_weekday[weekday] }} - {{ date }}</h2>
+  <h3 class="textbox inline-block">{{ site.data.date-locales[page.lang].full_weekday[weekday] }} - {{ date }}</h3>
   <ul class="prog-list margin-16-bottom block" >
     {% for event in events %}
       {% assign eventDate = event.date | date: "%d.%m" %}

_includes/program/program-item.html

@@ -2,12 +2,12 @@
 
 
 <li class="textbox margin-16-bottom">
-  <a href="/rf2020/events/{{ event.ref }}">{{ event.title_ }}</a>
+  <a href="/rf2020/events/{{ event.ref }}.html">{{ event.title_ }}</a>
   <span>→</span>
   {% for eventParticipantId in event.participants %}
     {% for participant in site.data.rf2020.participants %}
       {% if participant.id == eventParticipantId %}
-        <a href="/rf2020/participants/{{ participant.ref }}">{{ participant.fullname }}</a>
+        <a href="/rf2020/participants/{{ participant.ref }}.html">{{ participant.fullname }}</a>
       {% endif %}
     {% endfor %}
   {% endfor %}

_includes/svg/social-icons/instagram.html

@@ -0,0 +1,7 @@
+<a href="{{ site.data.social-links.instagram }}" class="social-link social-link--insta" title="ReclaimFutures on Instagram">
+  <svg xmlns="http://www.w3.org/2000/svg" width="{{ include.size }}" height="{{ include.size }}" viewBox="0 0 50 50">
+      <path  d="M25,4.5109127 C31.6732143,4.5109127 32.4635913,4.53650794 35.0992063,4.65674603 C37.5359127,4.76795635 38.859127,5.175 39.739881,5.5172619 C40.8254058,5.91790872 41.8073395,6.55674527 42.6134921,7.38680556 C43.4435523,8.19295816 44.0823889,9.1748918 44.4830357,10.2604167 C44.8252976,11.1410714 45.2324405,12.4643849 45.3435516,14.9010913 C45.4637897,17.5365079 45.4892857,18.3268849 45.4892857,25.0002976 C45.4892857,31.6737103 45.4637897,32.4638889 45.3435516,35.099504 C45.2323413,37.5362103 44.8251984,38.8594246 44.4830357,39.7401786 C43.6422501,41.9197836 41.919486,43.6425477 39.739881,44.4833333 C38.8592262,44.8255952 37.5359127,45.2327381 35.0992063,45.3438492 C32.4642857,45.4640873 31.6739087,45.4895833 25,45.4895833 C18.3260913,45.4895833 17.5360119,45.4640873 14.9007937,45.3438492 C12.4640873,45.2326389 11.140873,44.825496 10.260119,44.4833333 C9.17459266,44.0826895 8.19265839,43.4438526 7.38650794,42.6137897 C6.55645027,41.8076349 5.91761413,40.8257019 5.51696429,39.7401786 C5.17470238,38.8595238 4.76755952,37.5362103 4.65644841,35.099504 C4.53621032,32.4641865 4.51071429,31.6737103 4.51071429,25.0002976 C4.51071429,18.3268849 4.53621032,17.5367063 4.65644841,14.9010913 C4.76765873,12.4643849 5.17470238,11.1411706 5.51696429,10.2604167 C5.91765581,9.1748377 6.55656195,8.19286741 7.38670635,7.38670635 C8.19286111,6.55664868 9.17479411,5.91781254 10.2603175,5.5171627 C11.1409722,5.17490079 12.4642857,4.76775794 14.9009921,4.65664683 C17.5364087,4.53640873 18.3267857,4.5109127 25.0001984,4.5109127 M25.0001984,0.00783730159 C18.2126984,0.00783730159 17.3613095,0.0366071429 14.6960317,0.158234127 C12.0358135,0.279662698 10.2191468,0.702083333 8.62946429,1.31994048 C6.96186495,1.94748325 5.45122234,2.93122916 4.20287698,4.20257937 C2.93124027,5.45084645 1.94721967,6.96149496 1.31944444,8.62916667 C0.702083333,10.2189484 0.279662698,12.0356151 0.158730159,14.6958333 C0.0366071429,17.3611111 0.00783730159,18.2125 0.00783730159,25 C0.00783730159,31.7875 0.0366071429,32.6388889 0.158730159,35.3041667 C0.28015873,37.9643849 0.702579365,39.7810516 1.32043651,41.3707341 C1.94798215,43.038332 2.93172767,44.548974 4.2030754,45.7973214 C5.4514167,47.0686766 6.96206047,48.0524233 8.6296627,48.6799603 C10.2194444,49.2978175 12.0361111,49.7202381 14.6962302,49.8416667 C17.3619048,49.9632937 18.212996,49.9920635 25.0003968,49.9920635 C31.7877976,49.9920635 32.6392857,49.9632937 35.3045635,49.8416667 C37.9647817,49.7202381 39.7814484,49.2978175 41.371131,48.6799603 C44.7281491,47.3815941 47.3819909,44.7277522 48.6803571,41.3707341 C49.2982143,39.7809524 49.7206349,37.9642857 49.8420635,35.3041667 C49.9636905,32.6384921 49.9924603,31.7874008 49.9924603,25 C49.9924603,18.2125992 49.9636905,17.3611111 49.8420635,14.6958333 C49.7206349,12.0356151 49.2982143,10.2189484 48.6803571,8.62926587 C48.0528201,6.96166364 47.0690734,5.45101987 45.7977183,4.20267857 C44.5493474,2.9310749 43.0385949,1.94712039 41.3708333,1.31944444 C39.7810516,0.702083333 37.9643849,0.279662698 35.3041667,0.158730159 C32.6388889,0.0366071429 31.7875,0.00783730159 25,0.00783730159 L25,0.00783730159 L25.0001984,0.00783730159 Z"/>
+      <path  d="M25,12.1661706 C17.9120718,12.1661706 12.1661706,17.9120718 12.1661706,25 C12.1661706,32.0879282 17.9120718,37.8338294 25,37.8338294 C32.0879282,37.8338294 37.8338294,32.0879282 37.8338294,25 C37.8338294,17.9120718 32.0879282,12.1661706 25,12.1661706 Z M25,33.3306548 C20.3991193,33.3306548 16.6694444,29.6008145 16.6694444,24.9999339 C16.6694444,20.3990532 20.3992516,16.6693452 25.0001323,16.6693452 C29.6010129,16.6693452 33.330754,20.3991193 33.330754,25 C33.330754,29.6009096 29.6009096,33.3306548 25,33.3306548 Z"/>
+      <circle cx="38.341" cy="11.659" r="2.999" />
+  </svg>
+</a>

_layouts/event.html

@@ -3,36 +3,57 @@ layout: page
 lang: en
 ---
 
-<article class="page-content event">
+
+<article class="page-content margin-64-bottom event">
   <div class="content post-item">
     <header class="post-header">
       <div class="flex flex-col">
-        <h2>{{ page.title_ }}</h2>
+        <h2>
-        <h3>
+          {{ page.title_ | strip }}
+            <small>
+              [{{ page.format | strip }}]
+            </small>
+        </h2>
+      </div>
+    
+      <!-- <div class="flex flex-col margin-16-left text-center">
+        <small class="textbox-sm inline-block ">
           [{{ page.format }}]
-      </h3>
+        </small>
-      </div>
+      </div> -->
-    <div class="flex flex-col">
-      {% for id in page.participants %}
-        {% for participant in site.data.rf2020.participants %}
-          {% if participant.id == id %}
-          <h3>
-            <a class="block with-url-arrow" href="/rf2020/participants/{{ participant.ref }}">{{ participant.fullname }}</a>
-          </h3>
-          {% endif %}
-        {% endfor %}
-      {% endfor %}
-    </div>
     </header>
 
-    {% include common/separator.html %}
+    <div class="post-content margin-16-bottom">
-    <div class="post-content">
+      <!-- <h3>
-      <h3>
         Description:
-      </h3>
+      </h3> -->
       <p>
         {{ page.description | markdownify }}
       </p>
     </div>
+    <div class="flex flex-row flex-justify-space-between">
+      <div class="post-content inline-block">
+        <h3>
+          In this {{ page.format }}:
+        </h3>
+        {% for id in page.participants %}
+          {% for participant in site.data.rf2020.participants %}
+            {% if participant.id == id %}
+
+                <a class="block with-url-arrow" href="/rf2020/participants/{{ participant.ref }}.html">{{ participant.fullname }}</a>
+
+            {% endif %}
+          {% endfor %}
+        {% endfor %}
+      </div>
+      <div class="post-content inline-block margin-16-left">
+        <h3 class="text-right">
+          Event date/time:
+        </h3>
+        <p class="text-right">
+            {{ page.date | date: "%d.%m.%y" }}
+        </p>
+      </div>
+    </div>
   </div>
 </article>

_layouts/participant.html

@@ -4,7 +4,7 @@ lang: en
 ref: going-online
 ---
 
-<article class="page-content participant">
+<article class="page-content margin-128-bottom participant">
   <div class="content post-item">
     <header class="post-header">
       <h2>{{ page.fullname }}</h2>
@@ -27,10 +27,10 @@ ref: going-online
       <h3>
         {{ page.fullname }}'s Events: 
       </h3>
-      {% for id in page.events %}
       {% for event in site.data.rf2020.events %}
-          {% if event.id == id %}
+        {% for id in event.participants %}
-            <a class="block with-url-arrow" href="/rf2020/events/{{ event.ref }}">{{ event.title_ }}</a>
+          {% if page.id == id %}
+            <a class="block with-url-arrow" href="/rf2020/events/{{ event.ref }}.html">{{ event.title_ }}</a>
           {% endif %}
         {% endfor %}
       {% endfor %}

_sass/includes/footer.scss

@@ -30,6 +30,7 @@ footer.page-footer {
 
     a.social-link {
       margin: 0;
+      cursor: pointer;
     }
     .page-content {
       display: flex;

_sass/includes/header.scss

@@ -1,6 +1,6 @@
 header.page-header {
-  .lang,
   .nav-link,
+  .lang,
   .sub-nav-link {
     color: $text;
     background-color: white;
@@ -8,11 +8,11 @@ header.page-header {
     transition: box-shadow 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
     z-index: 1;
     text-decoration: underline;
-
-    &: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);
   }
+
+  .lang: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-group {

_sass/layout.scss

@@ -56,3 +56,8 @@ footer.page-footer {
 .textbox {
   @include textbox;
 }
+
+.textbox-sm {
+  @include textbox;
+  padding: $size-8 $size-16;
+}

_sass/layouts/event.scss

@@ -4,5 +4,22 @@
     a {
       margin: 0;
     }
+    h2 {
+      display: inline-block;
+      align-items: flex-start;
+
+      small {
+        display: inline;
+        vertical-align: super;
+        font-size: $size-14;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .post-content {
+    h3 {
+      font-weight: bold;
+    }
   }
 }

_sass/layouts/participant.scss

@@ -1,5 +1,18 @@
 .participant {
   .post-header {
     align-items: flex-end;
+    position: relative;
+
+    @include touch {
+      flex-direction: column-reverse;
+      h2 {
+        z-index: 1;
+      }
+
+      img {
+        transform: translateY($size-24);
+        width: 100%;
+      }
+    }
   }
 }

_sass/layouts/post.scss

@@ -52,6 +52,14 @@
         font-style: normal;
       }
     }
+
+    @include touch {
+      flex-wrap: wrap;
+
+      h2 {
+        margin-bottom: 8px;
+      }
+    }
   }
 
   .post-content {

_sass/pages/rf2020.scss

@@ -0,0 +1,12 @@
+#page-rf2020 {
+  a {
+    display: block;
+    button {
+      -webkit-appearance: none;
+      border: none;
+      box-shadow: none;
+      font-size: $size-16;
+      cursor: pointer;
+    }
+  }
+}

_sass/typography.scss

@@ -11,6 +11,7 @@ em,
 h6,
 li,
 label,
+button,
 .separator {
   font-family: $font;
   color: $text;
@@ -55,7 +56,7 @@ h2,
 
 h3,
 .h3 {
-  font-size: $size-16;
+  font-size: $size-24;
 }
 
 p,

_sass/utils/layout-utils.scss

@@ -34,18 +34,38 @@
   flex-direction: row;
 }
 
+.margin-0 {
+  margin: 0px !important;
+}
+
 .margin-4-bottom {
-  margin-bottom: 4px;
+  margin-bottom: $size-base !important;
 }
+
 .margin-8-bottom {
-  margin-bottom: 8px;
+  margin-bottom: $size-8 !important;
 }
+
 .margin-16-bottom {
-  margin-bottom: 16px;
+  margin-bottom: $size-16 !important;
 }
+
 .margin-24-bottom {
-  margin-bottom: 24px;
+  margin-bottom: $size-24 !important;
 }
+
 .margin-32-bottom {
-  margin-bottom: 32px;
+  margin-bottom: $size-32 !important;
+}
+
+.margin-64-bottom {
+  margin-bottom: $size-64 !important;
+}
+
+.margin-128-bottom {
+  margin-bottom: $size-128 !important;
+}
+
+.margin-16-left {
+  margin-left: $size-16 !important;
 }

_sass/utils/typo-utils.scss

@@ -17,3 +17,17 @@
   background-color: $white;
   padding: $size-16 $size-32;
 }
+
+.text-right {
+  text-align: right;
+}
+.text-left {
+  text-align: left;
+}
+.text-center {
+  text-align: center;
+}
+
+.colour-highlight {
+  color: $highlight !important;
+}

about/index.md

@@ -1,7 +1,7 @@
 ---
 layout: text-page
 lang: en
-title: about
+title: About RF
 className: about
 ref: about
 ---

assets/css/index.scss

@@ -24,3 +24,4 @@
 @import 'pages/home';
 @import 'pages/about';
 @import 'pages/how-to-participate';
+@import 'pages/rf2020';

fr/rf2020/index.html

@@ -0,0 +1,15 @@
+---
+layout: page
+lang: fr
+className: rf2020
+ref: 2020-mainpage
+---
+
+
+<article class="page-content margin-128-bottom re">
+  <h2 class="textbox inline-block margin">ReclaimFutures 2020</h2>
+  <div>
+    <a href="/rf2020/program"><button class="textbox uppercase margin-0">{{ site.data.translations.program[page.lang] }}</button></a>
+    <a href="/rf2020/participants/"><button class="textbox uppercase margin-0">{{ site.data.translations.participants[page.lang] }}</button></a>
+  </div>
+</article> 

fr/rf2020/participants/index.html

@@ -1,20 +1,22 @@
 ---
 layout: page
-lang: fr
+lang: en
 ref: 2020-participants
 ---
 
 {% assign participants = site.data.rf2020.participants | sort: "fullname" %}
 
-<article class="page-content news-post">
+<article class="page-content news-post margin-128-bottom">
     <div class="content post-item">
       <div class="post-header">
-        <h2>Participants</h2>
+        <h2>{{ site.data.translations.participants[page.lang] }}</h2>
       </div>
-      <div class="post-content margin-16-bottom">
+      <div class="post-content margin-16-bottom inline-block">
         <ul>
         {% for participant in participants %}
-          <li><a class="block with-url-arrow" href="/rf2020/participants/{{ participant.ref }}">{{ participant.fullname }}</a></li>
+          <li>
+            <a class="block with-url-arrow" href="/rf2020/participants/{{ participant.ref }}.html">{{ participant.fullname }}</a>
+          </li>
         {% endfor %}
         </ul>
       </div>

fr/rf2020/participants/index.html.old

@@ -0,0 +1,23 @@
+---
+layout: page
+lang: fr
+ref: 2020-participants
+---
+
+{% assign participants = site.data.rf2020.participants | sort: "fullname" %}
+
+<article class="page-content news-post">
+    <div class="content post-item">
+      <div class="post-header">
+        <h2>Participants</h2>
+      </div>
+      <div class="post-content margin-16-bottom">
+        <ul>
+        {% for participant in participants %}
+          <li><a class="block with-url-arrow" href="/rf2020/participants/{{ participant.ref }}.html">{{ participant.fullname }}</a></li>
+        {% endfor %}
+        </ul>
+      </div>
+    </div>  
+
+</article> 

fr/rf2020/programme/index.html

@@ -5,10 +5,9 @@ ref: 2020-program
 ---
 
 
-<article class="page-content news-post">
+<article class="page-content program margin-128-bottom">
-      <div class="prog-header">
+  <div class="post-header textbox inline-block margin-64-bottom">
-        <h2>{{ site.data.translations.program[page.lang] }}</h2>
+    <h2 class="margin-0">{{ site.data.translations.program[page.lang] }} — 2020</h2>
   </div>
   {% include program/full-program.html %}
-
 </article> 

rf2020/index.html

@@ -0,0 +1,14 @@
+---
+layout: page
+lang: en
+ref: 2020-mainpage
+---
+
+
+<article class="page-content margin-128-bottom">
+  <h2 class="textbox inline-block margin">ReclaimFutures 2020</h2>
+  <div>
+    <a href="/rf2020/program"><button class="textbox uppercase">{{ site.data.translations.program[page.lang] }}</button></a>
+    <a href="/rf2020/participants/"><button class="textbox uppercase">{{ site.data.translations.participants[page.lang] }}</button></a>
+  </div>
+</article> 

rf2020/participants/index.html

@@ -6,16 +6,16 @@ ref: 2020-participants
 
 {% assign participants = site.data.rf2020.participants | sort: "fullname" %}
 
-<article class="page-content news-post">
+<article class="page-content news-post margin-128-bottom">
     <div class="content post-item">
       <div class="post-header">
-        <h2>Participants</h2>
+        <h2>{{ site.data.translations.participants[page.lang] }}</h2>
       </div>
-      <div class="post-content margin-16-bottom">
+      <div class="post-content margin-16-bottom inline-block">
         <ul>
         {% for participant in participants %}
           <li>
-            <a class="block with-url-arrow" href="/rf2020/participants/{{ participant.ref }}">{{ participant.fullname }}</a>
+            <a class="block with-url-arrow" href="/rf2020/participants/{{ participant.ref }}.html">{{ participant.fullname }}</a>
           </li>
         {% endfor %}
         </ul>

rf2020/program/index.html

@@ -5,9 +5,9 @@ ref: 2020-program
 ---
 
 
-<article class="page-content program">
+<article class="page-content program margin-128-bottom">
-  <div class="post-header">
+  <div class="post-header textbox inline-block margin-64-bottom">
-    <h2>{{ site.data.translations.program[page.lang] }}</h2>
+    <h2 class="margin-0">{{ site.data.translations.program[page.lang] }} — 2020</h2>
   </div>
   {% include program/full-program.html %}
 </article>