event, participant and program layouts (WIP)

_data/rf2020/events.yml

@@ -1,7 +1,8 @@
 - id: 1
-  title_: turbo mañana
+  title_: Turbo Mañana
+  format: workshop
   ref: turbo-manana
-  date: 2020-07-2 12:45
+  date: 2020-09-18 17:45
   description: |
     Attendees will explore our aesthetic and socio-economic landscape and how it applies to possible futures and ways we can influence them. In a workshop format, the attendees can explore the following zones and ideate ways to create Turbo Mañana in their professional and personal lives.  
     How and why is it that some experiential products that sell a feeling or vibe have license to “own” radically futuristic visions? Why do others all look the same? —  
@@ -18,15 +19,25 @@
 - id: 2
   title_: Shock Doctrine as a Service
   ref: SDaaS
-  date: 2020-07-02 17:00
+  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
+  format: talk
   ref: rebuild-a-data-future
-  date: 2020-08-10 13:00
+  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.
   participants : [2]
+- id: 4
+  title_: Testing testing
+  format: talk
+  ref: rebuild-a-data-testing
+  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.
+  participants : [1]

_data/rf2020/participants.yml

@@ -15,5 +15,6 @@
   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/cade.png
+  picture : /assets/participants/cade2.png
+  
   events: [2,3]

_data/translations.yml

@@ -18,3 +18,6 @@ formats:
   artwork: 
     en: artwork
     fr: artwork
+program: 
+  en: Program
+  fr: Programme

_includes/program/full-program.html

@@ -0,0 +1,5 @@
+<div>
+  {% include program/program-day.html date="2020-09-18" weekday=5 %}
+  {% include program/program-day.html date="2020-09-19" weekday=6 %}
+  {% include program/program-day.html date="2020-09-20" weekday=0 %}
+</div>

_includes/program/program-day.html

@@ -0,0 +1,15 @@
+{% assign events = site.data.rf2020.events | sort: "date" %}
+{% assign date = include.date | date: "%d.%m" %}
+{% assign weekday = include.weekday %}
+
+<div class="content">
+  <h2 class="textbox inline-block">{{ site.data.date-locales[page.lang].full_weekday[weekday] }} - {{ date }}</h2>
+  <ul class="prog-list margin-16-bottom block" >
+    {% for event in events %}
+      {% assign eventDate = event.date | date: "%d.%m" %}
+      {% if eventDate == date %}
+        {% include program/program-item.html event=event %}
+      {% endif %}
+    {% endfor %}
+  </ul>
+</div>

_includes/program/program-item.html

@@ -0,0 +1,19 @@
+{% assign event = include.common/program/full-program.html %}
+
+
+<li class="textbox margin-16-bottom">
+  <a href="/rf2020/events/{{ event.ref }}">{{ 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>
+      {% endif %}
+    {% endfor %}
+  {% endfor %}
+
+  {% if event.format %}
+    <span>[{{ event.format }}]</span>
+  {% endif %}
+
+</li> 

_includes/text/en/main-text.md

@@ -24,6 +24,6 @@ All participants will be paid an equal share of the proceeds of the event.
 If you're looking for inspiration we've assembled a list of [hypothetical talk titles and subjects](https://www.are.na/reclaimfutures/hypothetical-subjects) which you may take as a starting point, fully adopt, use to get an impression, or of course completely disregard.
 
 {:.link-to-submit}
-**To submit a proposal go over to the <br /> [submissions page](/how-to-participate)**
+The submissions deadline has now passed.
 
 <small id="ref-1">[1] If you are concerned financial factors would limit your ability to partake in the conference, please get in touch and we will do all we can to help.</small>

_layouts/event.html

@@ -1,31 +1,30 @@
 ---
 layout: page
 lang: en
-ref: index
 ---
 
-<article class="page-content news-post">
+<article class="page-content event">
   <div class="content post-item">
     <header class="post-header">
-      <h2> {{ page.title_ }}</h2>
+      <div class="flex flex-col">
-    </header>
+        <h2>{{ page.title_ }}</h2>
-    <div class="post-content">
+        <h3>
-      <h3>
+        [{{ page.format }}]
-        {% include utils/translated-date.html date=page.date  lang=page.lang %}
-        {{ page.date | date: "%H:%M" }}
-      </h3>
-      <p>{{ page.ref }}</p>
-      <h3>
-        By:
       </h3>
+      </div>
+    <div class="flex flex-col">
       {% for id in page.participants %}
         {% for participant in site.data.rf2020.participants %}
           {% if participant.id == id %}
-            <a class="block with-url-arrow" href="/participants/{{ participant.ref }}">{{ participant.fullname }}</a>
+          <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">
       <h3>

_layouts/participant.html

@@ -4,30 +4,17 @@ lang: en
 ref: going-online
 ---
 
-<article class="page-content news-post">
+<article class="page-content participant">
   <div class="content post-item">
-      <img src="{{ page.picture }}" alt="">
     <header class="post-header">
       <h2>{{ page.fullname }}</h2>
+      <img src="/assets/participants/{{ page.ref }}.png" alt="" class="participant-profile">
     </header>
 
-    <p class="block">
+    <div class="post-content margin-16-bottom">
-      
-    </p>
-    <div class="post-content">
       <h2>
         About {{ page.fullname }}
       </h2>
-      <p>
-        Events : 
-      </p>
-      {% for id in page.events %}
-        {% for event in site.data.rf2020.events %}
-          {% if event.id == id %}
-            <a class="block with-url-arrow" href="/events/{{ id }}.html">{{ event.title_ }}</a>
-          {% endif %}
-        {% endfor %}
-      {% endfor %}
       <p>
         {{ page.bio }}
       </p>
@@ -36,6 +23,20 @@ ref: going-online
       {% endfor %}
 
     </div>
+    <div class="post-content margin-16-bottom inline-block">
+      <h3>
+        {{ page.fullname }}'s Events: 
+      </h3>
+      {% for id in page.events %}
+        {% for event in site.data.rf2020.events %}
+          {% if event.id == id %}
+            <a class="block with-url-arrow" href="/rf2020/events/{{ event.ref }}">{{ event.title_ }}</a>
+          {% endif %}
+        {% endfor %}
+      {% endfor %}
+    </div>
   </div>
 
+  
+
 </article>

_sass/includes/footer.scss

@@ -35,6 +35,7 @@ footer.page-footer {
       display: flex;
       justify-content: space-between;
       flex-wrap: wrap;
+      max-width: $size-512 + $size-128;
     }
   }
 }

_sass/includes/header.scss

@@ -1,18 +1,39 @@
 header.page-header {
   .lang,
-  .nav-link {
+  .nav-link,
+  .sub-nav-link {
     color: $text;
     background-color: white;
     padding: $size-8;
     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);
+      // 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 {
+    cursor: default;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    .sub-nav-link {
+      opacity: 0;
+    }
+    &:hover {
+      .sub-nav-link {
+        opacity: 1;
+      }
+    }
+
+    a {
+      cursor: pointer;
+    }
+  }
+
   nav {
     position: absolute;
     top: $size-32;

_sass/layout.scss

@@ -1,8 +1,8 @@
 body {
   background-color: $bg;
-  background-image: url('../img/bg/bg-2.png');
+  background-image: url('../img/bg/bg-2.png'), url('../img/bg/bg-el-light.png');
   transition: background-color 0.5s ease-in-out;
-  background-position: 3px 5px;
+  background-position: $size-base $size-8, $size-8 $size-12;
   background-repeat-x: no-repeat;
   background-repeat-y: repeat;
   background-size: cover;
@@ -17,20 +17,20 @@ body {
 
   @include darkMode {
     background-color: $black;
-    &::after {
+    // &::after {
-      content: '';
+    //   content: '';
-      background-image: url('../img/bg/bg-el-light.png');
+    //   background-image: ;
-      opacity: 1;
+    //   opacity: 1;
-      background-position: 0 0;
+    //   background-position: 0 0;
-      background-repeat-x: no-repeat;
+    //   background-repeat-x: no-repeat;
-      background-repeat-y: repeat;
+    //   background-repeat-y: repeat;
-      background-size: 100%;
+    //   background-size: 100%;
-      background-attachment: fixed;
+    //   background-attachment: fixed;
-      height: 100vh;
+    //   height: 100vh;
-      width: 100vw;
+    //   width: 100vw;
-      position: fixed;
+    //   position: fixed;
-      pointer-events: none;
+    //   pointer-events: none;
-    }
+    // }
   }
 }
 

_sass/layouts/event.scss

@@ -0,0 +1,8 @@
+.event {
+  .post-header {
+    h3,
+    a {
+      margin: 0;
+    }
+  }
+}

_sass/layouts/participant.scss

@@ -0,0 +1,5 @@
+.participant {
+  .post-header {
+    align-items: flex-end;
+  }
+}

_sass/layouts/post.scss

@@ -56,6 +56,19 @@
 
   .post-content {
     @include textbox;
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    p,
+    span,
+    a,
+    li {
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
   }
 
   .tag {

_sass/layouts/program.scss

@@ -0,0 +1,83 @@
+.prog-list {
+  margin: 0;
+  padding: 0;
+  margin-bottom: $size-64;
+
+  li {
+    display: inline-block;
+    margin-right: $size-64;
+  }
+
+  h2 {
+    margin-bottom: $size-32;
+  }
+
+  .prog-item {
+    margin-bottom: $size-64;
+
+    .prog-header {
+      margin-bottom: $size-16;
+    }
+    .prog-content {
+      p {
+        display: inline;
+      }
+    }
+  }
+}
+
+// .news-post {
+//   margin-bottom: $size-64;
+// }
+
+.prog-item {
+  list-style: none;
+  padding: 0;
+  margin-bottom: $size-16;
+
+  .prog-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: $size-32;
+    h2,
+    h3,
+    label {
+      display: inline-flex;
+      align-items: center;
+      @include textbox;
+      margin: 0;
+    }
+
+    a {
+      color: $black;
+      text-decoration: none;
+
+      &:hover,
+      &:visited {
+        font-style: normal;
+      }
+    }
+  }
+
+  .prog-content {
+    @include textbox;
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    p,
+    span,
+    a,
+    li {
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .tag {
+    @include textbox;
+    display: inline-block;
+  }
+}

_sass/utils/layout-utils.scss

@@ -33,3 +33,19 @@
   display: flex;
   flex-direction: row;
 }
+
+.margin-4-bottom {
+  margin-bottom: 4px;
+}
+.margin-8-bottom {
+  margin-bottom: 8px;
+}
+.margin-16-bottom {
+  margin-bottom: 16px;
+}
+.margin-24-bottom {
+  margin-bottom: 24px;
+}
+.margin-32-bottom {
+  margin-bottom: 32px;
+}

_sass/utils/position-utils.scss

@@ -2,6 +2,10 @@
   display: block;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 .flex {
   display: flex;
 

assets/css/index.scss

@@ -15,6 +15,9 @@
 @import 'layouts/text-page';
 @import 'layouts/404';
 @import 'layouts/post';
+@import 'layouts/program';
+@import 'layouts/participant';
+@import 'layouts/event';
 @import 'includes/scrollbar';
 @import 'includes/header';
 @import 'includes/footer';

assets/favicons/safari-pinned-tab.svg

@@ -4,9 +4,16 @@
 <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
  width="496.000000pt" height="496.000000pt" viewBox="0 0 496.000000 496.000000"
  preserveAspectRatio="xMidYMid meet">
-<metadata>
+ <style>
-Created by potrace 1.11, written by Peter Selinger 2001-2013
+    g {
-</metadata>
+      fill: #1d2022;
+    }
+    @media (prefers-color-scheme: dark) {
+      g {
+      fill: #ffffff;
+    }
+    }
+  </style>
 <g transform="translate(0.000000,496.000000) scale(0.100000,-0.100000)"
 fill="#000000" stroke="none">
 <path d="M40 2490 c0 -940 3 -1710 8 -1711 4 0 106 -1 227 -2 l220 0 3 706 2

assets/favicons/svg-favi.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="496.000000pt" height="496.000000pt" viewBox="0 0 496.000000 496.000000"
+ preserveAspectRatio="xMidYMid meet">
+ <style>
+    g {
+      fill: #1d2022;
+    }
+    @media (prefers-color-scheme: dark) {
+      g {
+      fill: #ffffff;
+    }
+    }
+  </style>
+<g transform="translate(0.000000,496.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M40 2490 c0 -940 3 -1710 8 -1711 4 0 106 -1 227 -2 l220 0 3 706 2
+707 353 0 352 0 0 -222 0 -223 115 -3 115 -3 -2 -127 -1 -128 91 0 92 1 3
+-122 c2 -108 5 -123 20 -124 9 0 51 -1 93 -1 l76 -1 0 -116 -1 -116 103 -3
+102 -3 -2 -87 c0 -48 0 -98 0 -112 l1 -25 232 2 c128 1 243 2 256 2 l23 1 -3
+193 -3 192 -92 0 c-50 0 -94 3 -98 7 -4 4 -8 53 -9 110 l-1 103 -92 3 -93 3 0
+118 0 119 -77 -2 c-117 -3 -109 -12 -109 121 1 63 -3 117 -7 120 -4 2 -55 5
+-112 5 -58 0 -106 3 -106 6 -1 4 -2 91 -3 194 l-1 186 80 27 c328 111 513 314
+585 640 26 116 31 190 34 468 1 187 -1 237 -11 238 -7 1 -73 2 -145 3 l-133 1
+-1 117 c-1 64 -4 122 -6 130 -4 10 -49 13 -212 13 l-206 0 1 95 c0 52 0 121 0
+153 l-1 57 -830 0 -830 0 0 -1710z m1478 1321 l92 -1 0 -149 c0 -110 3 -150
+13 -153 6 -2 83 -3 170 -2 153 1 157 0 158 -20 3 -77 -1 -348 -6 -390 -33
+-270 -165 -416 -430 -475 -141 -31 -155 -32 -597 -38 l-418 -5 0 616 0 616
+413 2 c226 2 435 2 462 1 28 -1 92 -2 143 -2z"/>
+<path d="M2780 4162 c-7 -3 -10 -582 -10 -1713 l0 -1709 230 0 c177 0 230 3
+231 13 0 6 1 380 1 830 l0 817 62 0 c75 1 829 1 874 0 l32 0 0 -100 0 -100
+235 0 235 0 0 195 0 195 -178 0 -178 0 0 98 0 97 -541 3 -541 2 2 493 1 492
+853 0 852 0 0 192 c0 147 -3 193 -12 194 -37 3 -2140 3 -2148 1z"/>
+</g>
+</svg>

fr/rf2020/participants/index.html

@@ -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 }}">{{ participant.fullname }}</a></li>
+        {% endfor %}
+        </ul>
+      </div>
+    </div>  
+
+</article> 

fr/rf2020/programme/index.html

@@ -0,0 +1,14 @@
+---
+layout: page
+lang: fr
+ref: 2020-program
+---
+
+
+<article class="page-content news-post">
+      <div class="prog-header">
+        <h2>{{ site.data.translations.program[page.lang] }}</h2>
+      </div>
+      {% include program/full-program.html %}
+
+</article> 

rf2020/participants/index.html

@@ -0,0 +1,25 @@
+---
+layout: page
+lang: en
+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 }}">{{ participant.fullname }}</a>
+          </li>
+        {% endfor %}
+        </ul>
+      </div>
+    </div>  
+
+</article> 

rf2020/program/index.html

@@ -0,0 +1,13 @@
+---
+layout: page
+lang: en
+ref: 2020-program
+---
+
+
+<article class="page-content program">
+  <div class="post-header">
+    <h2>{{ site.data.translations.program[page.lang] }}</h2>
+  </div>
+  {% include program/full-program.html %}
+</article>