added header and navigation components (for new pages)

This commit is contained in:
Benjamin Jones 2020-04-25 10:49:47 +02:00
parent 59ef82665f
commit cbaf20c13f
8 changed files with 176 additions and 29 deletions

24
_data/menu.yml Normal file
View File

@ -0,0 +1,24 @@
- about:
en:
name: call for participants
url: /about
fr:
name: à propos
url: /a-propos
- participate:
en:
name: submit a proposal
url: "/how-to-participate"
fr:
name: soumettre une proposition
url: /participer
# - attend:
# en:
# name: attend
# url: /attend
# fr:
# name: l'événement
# url: /evenement

View File

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

View File

@ -1,5 +1,38 @@
{% if page.lang == 'en' %} {% assign posts=site.posts | where:"ref", page.ref | sort: 'lang' %}
{% assign newpages=site.pages | where:"ref", page.ref | sort: 'lang' %}
{% if posts.size > 1 %}
{% for post in posts %}
{% if post.lang != page.lang %}
<a href="{{ site.base-url }}{{ post.url }}" class="lang lang--{{ page.lang }}">
{% if page.lang == 'en' %}
{{ include.fr-text }}
{% else %}
{{ include.en-text }}
{% endif %}
</a>
{% endif %}
{% endfor %}
{% elsif newpages.size > 1 %}
{% for pege in newpages %}
{% if pege.lang != page.lang and page.ref != '' %}
{% if page.lang == 'en' %}
<a href="{{ pege.url }}" class="lang lang--{{ page.lang }}">{{ include.fr-text }}</a>
{% else %}
<a href="{{ pege.url }}" class="lang lang--{{ page.lang }}">{{ include.en-text }} </a>
{% endif %}
{% endif %}
{% endfor %}
{% elsif page.lang == 'en' %}
<a href="{{ site.baseurl }}/fr" class="lang lang--{{ page.lang }}">{{ include.fr-text }}</a> <a href="{{ site.baseurl }}/fr" class="lang lang--{{ page.lang }}">{{ include.fr-text }}</a>
<span class="poop">{{ site.data.menu[page.ref]}}</span>
{% else %} {% else %}
<a href="{{ site.baseurl }}/" class="lang lang--{{ page.lang }}">{{ include.en-text }} </a> <a href="{{ site.baseurl }}/" class="lang lang--{{ page.lang }}">{{ include.en-text }} </a>
<span class="poop">{{ site.data.menu[page.ref]}}</span>
{% endif %} {% endif %}

View File

@ -0,0 +1,14 @@
<nav>
<div class="menu">
{% for item in site.data.menu %}
{% if page.lang == 'en' %}
<a class="nav-link" href="{{ site.baseurl | append: item[page.lang].url }}">{{ item[page.lang].name }}</a>
{% else %}
<a class="nav-link" href="{{ site.baseurl }}/{{ page.lang | append: item[page.lang].url }}">{{ item[page.lang].name }}</a>
{% endif %}
{% endfor %}
</div>
{% include common/lang-selector.html en-text="/english" fr-text="/français" %}
</nav>

View File

@ -1,21 +1,34 @@
header.page-header { header.page-header {
.lang { .lang,
position: absolute; .nav-link {
color: $text; color: $text;
top: $size-32;
right: $size-32;
background-color: white; background-color: white;
padding: $size-8; padding: $size-8;
transition: box-shadow 0.8s cubic-bezier(0.075, 0.82, 0.165, 1); transition: box-shadow 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
z-index: 1;
&:hover { &: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); transition: box-shadow 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
} }
}
nav {
position: absolute;
top: $size-32;
right: $size-32;
display: flex;
flex-direction: column;
align-items: flex-end;
.menu {
display: flex;
}
}
.lang,
.nav-link {
margin: 0 4px 8px 0;
@include touch { @include touch {
top: $size-16;
right: $size-16;
font-size: 0.8em; font-size: 0.8em;
} }
} }
@ -27,3 +40,29 @@ header.page-header {
display: inline-block; display: inline-block;
} }
} }
#rf-logo-wrapper {
transition: all 0.8s ease-in-out;
a {
font-weight: normal;
&:hover,
&:visited {
font-style: normal;
}
}
&.hidden {
opacity: 0.0001;
margin-top: -100px;
}
.rf-logo {
margin: $size-64 0 $size-64 $size-32;
@include touch {
max-width: 90%;
margin-left: 5%;
}
}
}

View File

@ -1,17 +0,0 @@
#rf-logo-wrapper {
transition: all 0.8s ease-in-out;
&.hidden {
opacity: 0.0001;
margin-top: -100px;
}
.rf-logo {
margin: $size-64 0 $size-64 $size-32;
@include touch {
max-width: 90%;
margin-left: 5%;
}
}
}

View File

@ -0,0 +1,15 @@
#page-participate {
h2 {
display: block;
}
&.lang-en h2 {
margin: 0 203px 16px 0;
}
&.lang-fr h2 {
margin: 0 40px 16px 0;
}
.content p:last-of-type {
margin-top: 24px;
}
}

View File

@ -1,10 +1,38 @@
--- ---
layout: page-with-header layout: content-page
lang: en lang: en
title: index
className: index
ref: index
--- ---
{% capture maintext %} {% capture intro %}
{% include text/intro-text-en.md %} {% include text/en/intro.md %}
{% endcapture %} {% endcapture %}
{{ maintext | markdownify }}
<div>
<span class="intro">{{ intro | markdownify }}</span>
<h2>{{ site.data.translations.latest[page.lang]}}</h2>
<ul class="post-list">
{% for post in site.posts %}
{% if post.lang == page.lang %}
<li class="post-item">
<header class="post-header">
<h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
<h3 class="titlecase">
{% include utils/translated-date.html date=post.date lang=page.lang %}
</h3>
<!-- <h3>{{ post.date | date_to_string }}</h3> -->
</header>
<div class="post-content">
<span class="post-excerpt">{{ post.excerpt }}</span>
<a href="{{ post.url }}">{{ site.data.translations.readMore[page.lang]}} -></a>
</div>
</li>
{% endif %}
{% endfor %}
</ul>
</div>