added first '/watch' layout.

.htaccess

@@ -0,0 +1 @@
+ErrorDocument 404 /404.html

_config.yml

@@ -26,6 +26,8 @@ description: >- # this means to ignore newlines until "baseurl:"
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "" # the base hostname & protocol for your site, e.g. http://example.com
 permalink: /:categories/news/:year/:title:output_ext
+discordID: 737678270924849183
+twitchChannel: bnjmnjns
 
 
 # Build settings

_data/menu.yml

@@ -27,10 +27,10 @@
       fr: 
         name: intervenants
         url: /rf2020/participants
-# - donate:
+- donate:
-#   en: 
+  en: 
-#     name: donate
+    name: donate
-#     url: "/donate"
+    url: "/donate"
-#   fr: 
+  fr: 
-#     name: faire un don
+    name: faire un don
-#     url: /donate
+    url: /donate

_data/watch-menu.yml

@@ -0,0 +1,14 @@
+- program: 
+  en: 
+    name: program
+    url: "#program"
+  fr: 
+    name: programme
+    url: "#program"
+- donate:
+  en: 
+    name: donate
+    url: "/donate"
+  fr: 
+    name: faire un don
+    url: "/donate"

_includes/common/banner.html

@@ -29,7 +29,9 @@
 
       function cdText() {
         const cd = countdown(new Date(), new Date("Wed Sep 18 2020 10:30:00 GMT+0200 (Central European Summer Time)"), 0, 3).toString();
-        cdTime.innerHTML = cd;
+        if(cdTime.innerHTML !== cd) {
+          cdTime.innerHTML = cd;
+        }
 
         if (!bannerVisible) {
           banner.classList.remove('hidden')

_includes/common/clock.html

@@ -0,0 +1,19 @@
+<div class="inline-block" id="clock"><p></p></div>
+
+<script src="https://unpkg.com/spacetime"></script>
+<script>
+  const clock = document.querySelector('#clock p');
+
+  const getTime = () => {
+    var d = spacetime(new Date(), 'Europe/Zurich')
+    return d.format('{hour-24-pad}:{minute-pad}:{second-pad}')
+  }
+  
+  const setTime = () => {
+    clock.innerHTML = `<span class="time">${getTime()}</span> (CEST)`
+  }
+
+
+  setTime();
+  setInterval(setTime, 1000);
+</script>

_includes/common/donate-button.html

@@ -0,0 +1,3 @@
+<a href="https://opencollective.com/reclaimfutures/donate" target="_blank" class="text-center donate-button">
+  <img src="https://opencollective.com/webpack/donate/button@2x.png?color=blue" width=300 />
+</a>

_includes/common/header-collapsed.html

@@ -0,0 +1,19 @@
+<header class="page-header header-collapsed">
+  {% include common/navigation.html menu=site.data.watch-menu %}
+
+
+  {% 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 --wide" id="rf-logo-wrapper">
+    {% if page.lang == 'fr' %}
+      <a href="{{ site.baseurl }}/fr">{% include common/logo.html size = 'small' %}</a>
+    {% else %}
+      <a href="{{ site.baseurl }}/">{% include common/logo.html size = 'small' %}</a>
+    {% endif %}  
+  </div>
+</header>

_includes/common/header.html

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

_includes/common/logo.html

@@ -1 +1,5 @@
-<H1 class="logo">Reclaim<br />Futures</H1>
+{% if include.size == 'small' %}
+  <H1 class="logo logo-sm">Reclaim Futures 2020</H1>
+{% else %}
+  <H1 class="logo">Reclaim<br />Futures</H1>
+{% endif %}

_includes/common/navigation.html

@@ -1,6 +1,14 @@
+{% if include.menu %}
+  {% assign menu = include.menu %}
+{% else %}
+  {% assign menu = site.data.menu %}
+{% endif %}
+
+
 
 <nav class="menu page-content">
-    {% for item in site.data.menu %}
+    {% include common/clock.html %}
+    {% for item in menu %}
       {% if item.items %}
         <div class="nav-group nofocus" tabindex="0">
             <a class="nav-link colour-{{ item.colour | default: 'black' }} {{ item.case }}">{{ item[page.lang].name }}</a>

_includes/common/watch-panel.html

@@ -0,0 +1,4 @@
+<div class="watch-panel">
+  {% include embeds/twitch.html %}
+  {% include embeds/discord-chat.html %}
+</div>

_includes/embeds/discord-chat.html

@@ -0,0 +1,3 @@
+<div class="discord-chat">
+  <iframe src="https://titanembeds.com/embed/{{ site.discordID }}?css=155&theme=DiscordDark" height="650" width="400" frameborder="0"></iframe>
+</div>

_includes/embeds/twitch.html

@@ -0,0 +1,12 @@
+<!-- Add a placeholder for the Twitch embed -->
+<div id="twitch-embed"></div>
+
+<!-- Load the Twitch embed script -->
+<script src="https://player.twitch.tv/js/embed/v1.js"></script>
+
+<!-- Create a Twitch.Player object. This will render within the placeholder div -->
+<script type="text/javascript">
+  new Twitch.Player("twitch-embed", {
+    channel: "{{ site.twitchChannel }}"
+  });
+</script>

_layouts/default.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
-<html lang={{ page.lang }}>
+<html lang="{{ page.lang }}">
   {% include common/head.html %}
-  <body>
+  <body id="page-{{ page.className }}">
       {{ content }}
   </body>
   <script src="{{ site.baseurl }}/assets/js/index.js"  }}></script>

_layouts/page.html

@@ -2,7 +2,7 @@
 layout: default
 ---
 
-{% include common/header.html %}
+{% include common/header.html collapsed=false %}
 
 
 <main class="page lang-{{ page.lang }}" id="page-{{ page.className }}">
@@ -17,4 +17,5 @@ layout: default
   {% include common/lang-selector.html en-text="english version" fr-text="version française" %}
 </span>
 
-{% include common/footer.html %}
+{% include common/footer.html %}
+{% include common/banner.html %}

_layouts/watch.html

@@ -0,0 +1,21 @@
+---
+layout: default
+---
+
+{% include common/header.html collapsed=true %}
+
+
+<main class="page lang-{{ page.lang }}" id="page-{{ page.className }}">
+    {{ content }}
+
+    {% include common/watch-panel.html %}
+    <div class="page-content" id="program">
+      {% include program/full-program.html %}
+    </div>
+</main>
+
+<span class="side-title side-title--left hidden">
+  ReclaimFutures 2020
+</span>
+
+{% include common/footer.html %}

_sass/includes/clock.scss

@@ -0,0 +1,13 @@
+#clock {
+  margin-right: var(--size-24);
+
+  p,
+  span {
+    color: var(--colour-white);
+  }
+
+  .time {
+    font-size: var(--size-32);
+    // font-weight: bold;
+  }
+}

_sass/includes/header.scss

@@ -87,6 +87,14 @@ header.page-header {
       margin: var(--size-128) 0 var(--size-64) 0;
     }
   }
+
+  &.header-collapsed {
+    h1.logo {
+      margin: 0;
+      font-size: var(--size-32);
+      margin: var(--size-32) 0;
+    }
+  }
 }
 
 #rf-logo-wrapper {

_sass/includes/watch-panel.scss

@@ -0,0 +1,29 @@
+.watch-panel {
+  margin: 0 auto;
+  display: flex;
+  width: 95vw;
+  margin-bottom: var(--size-128);
+
+  #twitch-embed {
+    flex: 4;
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .discord-chat {
+    flex: 1;
+
+    iframe {
+      width: 100%;
+    }
+  }
+
+  @include touch {
+    flex-direction: column;
+    #twitch-embed {
+      height: 80vh;
+    }
+  }
+}

_sass/layout.scss

@@ -38,6 +38,10 @@ body {
 .page-content {
   max-width: 920px;
   margin: 0 auto;
+
+  &.--wide {
+    max-width: 95vw;
+  }
 }
 
 html,

_sass/pages/donate.scss

@@ -0,0 +1,18 @@
+#page-donate {
+  .content p:last-of-type {
+    margin-top: 24px;
+  }
+
+  .donate-button {
+    display: flex;
+    justify-content: center;
+
+    img {
+      filter: hue-rotate(-25deg) drop-shadow(0px 1px 0px var(--colour-highlight));
+    }
+  }
+
+  .content h2 {
+    margin-top: 0;
+  }
+}

_sass/pages/watch.scss

@@ -0,0 +1,21 @@
+#page-watch {
+  @include touch {
+    #rf-logo-wrapper {
+      width: 10%;
+    }
+
+    .page-header {
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: space-between;
+    }
+
+    #clock {
+      display: none;
+    }
+
+    .logo {
+      margin: var(--size-16) 0;
+    }
+  }
+}

assets/css/index.scss

@@ -23,7 +23,11 @@
 @import 'includes/footer';
 @import 'includes/back-button';
 @import 'includes/banner';
+@import 'includes/watch-panel';
+@import 'includes/clock';
 @import 'pages/home';
 @import 'pages/about';
 @import 'pages/how-to-participate';
 @import 'pages/rf2020';
+@import 'pages/donate';
+@import 'pages/watch';

donate/index.md

@@ -0,0 +1,19 @@
+---
+layout: text-page
+lang: en
+title: Support ReclaimFutures
+className: donate
+ref: donate
+---
+
+## Make a donation to ReclaimFutures
+ReclaimFutures is run as a DIT (Do It Together), self-funded, not-for-profit project and rejects *commercial* influence. 
+
+**All proceeds received via donations will go directly to participants of the conference** (after 3rd party handler fees<span class="sup">[1]</span>). The expenses of running the event are covered by the ReclaimFutures organisers personally.
+
+Click the button below to make a donation through OpenCollective:
+
+
+{% include common/donate-button.html %}
+
+<small>1. [Stripe](https://stripe.com/gb/pricing) (card handler) and [OpenCollective Europe](https://opencollective.com/europe-collective#section-about) (fiscal host)</small>

fr/donate/index.md

@@ -0,0 +1,19 @@
+---
+layout: text-page
+lang: fr
+title: Support ReclaimFutures
+className: donate
+ref: donate
+---
+
+## Make a donation to ReclaimFutures
+ReclaimFutures is run as a DIT (Do It Together), self-funded, not-for-profit project and rejects *commercial* influence. 
+
+**All proceeds received via donations will go directly to participants of the conference** (after 3rd party handler fees<span class="sup">[1]</span>). The expenses of running the event are covered by the ReclaimFutures organisers personally.
+
+Click the button below to make a donation through OpenCollective:
+
+
+{% include common/donate-button.html %}
+
+<small>1. [Stripe](https://stripe.com/gb/pricing) (card handler) and [OpenCollective Europe](https://opencollective.com/europe-collective#section-about) (fiscal host)</small>

package.json

@@ -7,7 +7,7 @@
     "start": "bundle exec jekyll serve",
     "build": "JEKYLL_ENV=production jekyll build",
     "deploy-dev": "yarn build && scp -r -P 7833 ./_site/* amemasu@185.203.114.165:/var/www/dev.reclaimfutures.org",
-    "deploy-prod": "yarn build && scp -r -P 7833 ./_site/* amemasu@185.203.114.165:/var/www/dev.reclaimfutures.org"
+    "deploy-prod": "yarn build && scp -r -P 7833 ./_site/* amemasu@185.203.114.165:/var/www/reclaimfutures.org"
   },
   "author": "",
   "license": "ISC"

watch/index.html

@@ -0,0 +1,8 @@
+---
+layout: watch
+lang: en
+title: Watch ReclaimFutures
+className: watch
+ref: watch
+---
+