added first '/watch' layout.

This commit is contained in:
Benjamin Jones 2020-09-05 16:12:50 +02:00
parent 5bde3075eb
commit ad8d6d5389
28 changed files with 292 additions and 31 deletions

1
.htaccess Normal file
View File

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

View File

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

View File

@ -27,10 +27,10 @@
fr: fr:
name: intervenants name: intervenants
url: /rf2020/participants 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

14
_data/watch-menu.yml Normal file
View File

@ -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"

View File

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

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

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

View File

@ -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 %}

View File

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

View File

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

View File

@ -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>

View File

@ -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>

View File

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

View File

@ -2,7 +2,7 @@
layout: default layout: default
--- ---
{% include common/header.html %} {% include common/header.html collapsed=false %}
<main class="page lang-{{ page.lang }}" id="page-{{ page.className }}"> <main class="page lang-{{ page.lang }}" id="page-{{ page.className }}">
@ -18,3 +18,4 @@ layout: default
</span> </span>
{% include common/footer.html %} {% include common/footer.html %}
{% include common/banner.html %}

21
_layouts/watch.html Normal file
View File

@ -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 %}

13
_sass/includes/clock.scss Normal file
View File

@ -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;
}
}

View File

@ -87,6 +87,14 @@ header.page-header {
margin: var(--size-128) 0 var(--size-64) 0; 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 { #rf-logo-wrapper {

View File

@ -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;
}
}
}

View File

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

18
_sass/pages/donate.scss Normal file
View File

@ -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;
}
}

21
_sass/pages/watch.scss Normal file
View File

@ -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;
}
}
}

View File

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

19
donate/index.md Normal file
View File

@ -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>

19
fr/donate/index.md Normal file
View File

@ -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>

View File

@ -7,7 +7,7 @@
"start": "bundle exec jekyll serve", "start": "bundle exec jekyll serve",
"build": "JEKYLL_ENV=production jekyll build", "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-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": "", "author": "",
"license": "ISC" "license": "ISC"

8
watch/index.html Normal file
View File

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