start flyer, favicon and meta title & descr
Dorian
3 years ago
parent
68c14af46c
commit
2fe1794ab1
Binary file not shown.
@ -1,11 +1,12 @@
|
||||
Title: Footer
|
||||
save_as:
|
||||
partial: true
|
||||
save_as:
|
||||
|
||||
|
||||
The typography of this website varies slightly under the influence of the moon.
|
||||
The website color theme switch according if it's day time or night time in Brussels.
|
||||
The typography of this website varies slightly under the influence of the moon. <br/>
|
||||
The website color theme changes following day time or night time in Brussels.
|
||||
|
||||
Font [Unoverso](https://github.com/oxomoto/Unoverso-Libre) by Oxomoto, and Inconsolata Variable by Raph Levien.
|
||||
All texts and images are published under de [CC4R license](https://constantvzw.org/wefts/cc4r.en.html), Anaïs Berck, 2022.
|
||||
Website design and development by Doriane Timmermans (OSP)
|
||||
Website design and development by Doriane Timmermans ([OSP](http://osp.kitchen/))
|
||||
@ -1,9 +1,10 @@
|
||||
Title: Footer
|
||||
lang: es
|
||||
save_as:
|
||||
|
||||
La tipografía de este sitio web varía ligeramente bajo la influencia de la luna.
|
||||
La tipografía de este sitio web varía ligeramente bajo la influencia de la luna. <br/>
|
||||
El tema del sitio web cambia de color según sea de día o de noche en Bruselas.
|
||||
|
||||
Fuente [Unoverso](https://github.com/oxomoto/Unoverso-Libre) de Oxomoto, e Inconsolata Variable de Raph Levien.
|
||||
Todos los textos e imágenes están publicados bajo licencia [CC4R](https://constantvzw.org/wefts/cc4r.en.html), Anaïs Berck, 2022.
|
||||
Diseño y desarrollo del sitio web por Doriane Timmermans (OSP).
|
||||
Diseño y desarrollo del sitio web por Doriane Timmermans ([OSP](http://osp.kitchen/)).
|
||||
@ -1,9 +1,10 @@
|
||||
Title: Footer
|
||||
lang: fr
|
||||
save_as:
|
||||
|
||||
La typographie de ce site web varie légèrement sous l'influence de la lune.
|
||||
Le thème de couleurs de ce site web change selon qu'il fait jour ou nuit à Bruxelles.
|
||||
La typographie de ce site web varie légèrement sous l'influence de la lune. <br/>
|
||||
Le thème de couleurs de ce site web change selon s'il fait jour ou nuit à Bruxelles.
|
||||
|
||||
Font [Unoverso](https://github.com/oxomoto/Unoverso-Libre) par Oxomoto, et Inconsolata Variable par Raph Levien.
|
||||
Tous les textes et images sont publiés sous [license CC4R](https://constantvzw.org/wefts/cc4r.en.html), Anaïs Berck, 2022.
|
||||
Conception et développement du site web par Doriane Timmermans (OSP).
|
||||
Conception et développement du site web par Doriane Timmermans ([OSP](http://osp.kitchen/)).
|
||||
@ -1,9 +1,10 @@
|
||||
Title: Footer
|
||||
lang: nl
|
||||
save_as:
|
||||
|
||||
De typografie van deze website varieert lichtjes onder invloed van de maan.
|
||||
De typografie van deze website varieert lichtjes onder invloed van de maan. <br/>
|
||||
Het kleurenthema van de website verandert naargelang het in Brussel dag- of nachttijd is.
|
||||
|
||||
Font [Unoverso](https://github.com/oxomoto/Unoverso-Libre) van Oxomoto, en Inconsolata Variable van Raph Levien.
|
||||
Alle teksten en beelden zijn gepubliceerd onder de [CC4R licentie](https://constantvzw.org/wefts/cc4r.en.html), Anaïs Berck, 2022.
|
||||
Website ontwerp en ontwikkeling door Doriane Timmermans (OSP).
|
||||
Website ontwerp en ontwikkeling door Doriane Timmermans ([OSP](http://osp.kitchen/)).
|
||||
@ -0,0 +1,36 @@
|
||||
from readline import set_completion_display_matches_hook
|
||||
from pelican import signals
|
||||
import re
|
||||
|
||||
|
||||
def split_sections(generator, content):
|
||||
"""
|
||||
Split the markdown content of an article or page into sections
|
||||
everytime it encounter a comment of the form <!--[section-name]-->
|
||||
and put those in a new `sections` attribute as a dictonnary.
|
||||
|
||||
The `content` attribute is left intact.
|
||||
"""
|
||||
|
||||
html_content = content.content
|
||||
content.sections = {}
|
||||
|
||||
pattern = re.compile(r"<!--\[((?:(?!\]-->).)*)\]-->((?:(?!<!--\[)[\s\S])+)")
|
||||
|
||||
# find all matches to groups
|
||||
matches = pattern.finditer(html_content)
|
||||
|
||||
for match in matches:
|
||||
# section name
|
||||
section_name = match.group(1)
|
||||
section_content = match.group(2)
|
||||
content.sections[section_name] = section_content
|
||||
|
||||
if content.sections:
|
||||
sections_names = ", ".join([section_name for section_name in content.sections.keys()])
|
||||
print("Sections in {t}: {s}".format(t=content.title, s=sections_names))
|
||||
|
||||
|
||||
def register():
|
||||
signals.article_generator_write_article.connect(split_sections)
|
||||
signals.page_generator_write_page.connect(split_sections)
|
||||
Binary file not shown.
@ -1,29 +0,0 @@
|
||||
from pelican import signals
|
||||
|
||||
def split_to_quotes_section(article):
|
||||
article_sections = article._content.split('<!--quotes-->');
|
||||
article._content = article_sections[0]
|
||||
if len(article_sections) > 1:
|
||||
article.quotes = article_sections[1]
|
||||
|
||||
def split_to_bio_section(article):
|
||||
article_sections = article._content.split('<!--bio-->');
|
||||
article._content = article_sections[0]
|
||||
if len(article_sections) > 1:
|
||||
article.bio = article_sections[1]
|
||||
|
||||
def article_add_quotes(article_generator):
|
||||
for article in article_generator.articles:
|
||||
split_to_quotes_section(article)
|
||||
for translation in article.translations:
|
||||
split_to_quotes_section(translation)
|
||||
|
||||
def page_add_bio(page_generator):
|
||||
for page in page_generator.pages:
|
||||
split_to_bio_section(page)
|
||||
for translation in page.translations:
|
||||
split_to_bio_section(translation)
|
||||
|
||||
def register():
|
||||
signals.article_generator_finalized.connect(article_add_quotes)
|
||||
signals.page_generator_finalized.connect(page_add_bio)
|
||||
Binary file not shown.
@ -0,0 +1,214 @@
|
||||
|
||||
|
||||
/* RESET
|
||||
===================================================== */
|
||||
body{
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
body > header{
|
||||
display: none;
|
||||
}
|
||||
|
||||
body > section.grid-display > .column-fixed{
|
||||
display: none;
|
||||
}
|
||||
|
||||
body > section.grid-display {
|
||||
display: block;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.text-content{
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* VARIABLES
|
||||
===================================================== */
|
||||
|
||||
:root{
|
||||
/* big -> bigger but mono big stay the same */
|
||||
--fs-big: 5rem;
|
||||
--fs-mono-big: 2.4rem;
|
||||
|
||||
/* reduce a bit the lh for print */
|
||||
--lh: 1.3rem;
|
||||
|
||||
/* 3 lang paysage */
|
||||
--fs-big: 5rem;
|
||||
|
||||
/* 3 langs paysage */
|
||||
--fs-main: 11pt;
|
||||
|
||||
/*
|
||||
notes:
|
||||
- 12pt is a bit too much for main text
|
||||
*/
|
||||
|
||||
/* variable for flyer */
|
||||
--margin: 1cm;
|
||||
/* A5 */
|
||||
--page-w: 210mm;
|
||||
--page-h: 148mm;
|
||||
}
|
||||
|
||||
|
||||
/* PRINT LAYOUT
|
||||
===================================================== */
|
||||
.page{
|
||||
width: var(--page-w);
|
||||
height: var(--page-h);
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
|
||||
/* https://developer.mozilla.org/en-US/docs/Web/CSS/break-after */
|
||||
break-after: page;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.container{
|
||||
position: relative;
|
||||
}
|
||||
.layer{
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
.page-rotate{
|
||||
width: var(--page-h);
|
||||
height: var(--page-w);
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
transform-origin: top right;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
@media only screen {
|
||||
body{
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
.page{
|
||||
margin: 1cm auto;
|
||||
outline: 1px yellowgreen solid;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
/* COMPOSITION
|
||||
===================================================== */
|
||||
|
||||
html{
|
||||
font-size: var(--fs-main);
|
||||
}
|
||||
|
||||
.flyer h2{
|
||||
line-height: 1;
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
.flyer h2:nth-of-type(3){
|
||||
margin-left: calc(var(--lh) * 2);
|
||||
}
|
||||
|
||||
|
||||
.recto__text{
|
||||
padding: var(--margin);
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: 1fr min-content min-content;
|
||||
}
|
||||
.verso__text{
|
||||
padding: var(--margin);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.recto__langs{
|
||||
display: flex;
|
||||
gap: var(--lh);
|
||||
}
|
||||
.recto__langs > *{
|
||||
flex: 0 1 100%;
|
||||
gap: var(--lh);
|
||||
}
|
||||
|
||||
.recto__lang > p{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
footer{
|
||||
margin: calc(var(--lh) * 1) 0 calc(var(--lh) * 0.5);
|
||||
display: flex;
|
||||
/* justify-content: space-between; */
|
||||
align-items: baseline;
|
||||
|
||||
gap: calc(var(--lh) * 2);
|
||||
|
||||
/* 3 langs paysage */
|
||||
margin: calc(var(--lh) * 0.5) 0 calc(var(--lh) * 0);
|
||||
}
|
||||
|
||||
.verso footer{
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* GRID DRAWING
|
||||
===================================================== */
|
||||
|
||||
.grid-cell{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.element-wrapper{
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
transform-origin: center center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* added */
|
||||
|
||||
.drawing-back{
|
||||
background:
|
||||
radial-gradient(circle closest-side, white, white 50%, transparent calc(100% - var(--margin))),
|
||||
linear-gradient(to bottom, white, black);
|
||||
|
||||
/* background-blend-mode: difference; */
|
||||
}
|
||||
|
||||
/* .drawing-cirlce{
|
||||
background: linear-gradient(white, black);
|
||||
} */
|
||||
|
||||
.drawing-grid{
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
/* mix-blend-mode: difference; */
|
||||
}
|
||||
|
||||
.leaf{
|
||||
--s: 80%;
|
||||
box-sizing: border-box;
|
||||
width: var(--s);
|
||||
height: var(--s);
|
||||
border-radius: 0 100% 0 50% / 0 50% 0 100%;
|
||||
background: black;
|
||||
|
||||
/* border: var(--border);
|
||||
background: white; */
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
|
||||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'>
|
||||
<defs>
|
||||
<linearGradient id='moon-light-gradient' x1="0" x2="0" y1="0" y2="1">
|
||||
<stop stop-color='white' offset="0%"/>
|
||||
<stop stop-color='rgba(255,255,255,0)' offset="75%"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx='0' cy='0' r='50' fill='url("#moon-light-gradient")'/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 388 B |
@ -0,0 +1,261 @@
|
||||
|
||||
class Grid{
|
||||
constructor(id, cell_size, mode = "STRETCH"){
|
||||
|
||||
this.id = id;
|
||||
this.$grid = $("#"+id);
|
||||
|
||||
if (Array.isArray(cell_size)){
|
||||
this.cell_width = cell_size[0];
|
||||
this.cell_height = cell_size[1];
|
||||
} else{
|
||||
this.cell_width = cell_size;
|
||||
this.cell_height = cell_size;
|
||||
}
|
||||
this.columns = 0;
|
||||
this.rows = 0;
|
||||
|
||||
const possible_mode = ["STRETCH", "FIXED", "SPACE"];
|
||||
if(possible_mode.includes(mode)){
|
||||
this.mode = mode;
|
||||
}
|
||||
|
||||
// this.init_css();
|
||||
|
||||
this.elements = [];
|
||||
this.distribute = function(i,j){
|
||||
// default distribution if there is more than one element
|
||||
let index = j;
|
||||
let choose = (index+(i%this.elements.length))%this.elements.length;
|
||||
return choose;
|
||||
}
|
||||
|
||||
this.mouvements = [];
|
||||
|
||||
}
|
||||
|
||||
init_css(){
|
||||
// get the new element because pagedjs changed it
|
||||
this.$grid = $("#"+this.id);
|
||||
|
||||
// compute number of cell that can fit horizontaly and verticaly
|
||||
this.columns = String(Math.floor(this.$grid.width() / this.cell_width));
|
||||
this.rows = String(Math.floor(this.$grid.height() / this.cell_height));
|
||||
console.log(this.$grid.width(), this.$grid.height());
|
||||
console.log("col-row-size", this.columns, this.rows, "(" + this.cell_width + "px", this.cell_width + "px" + ")");
|
||||
|
||||
// init css grid
|
||||
this.$grid.css("display", "grid");
|
||||
if(this.mode == "STRETCH" || this.mode == "SPACE"){
|
||||
this.$grid.css("grid-template-columns", "repeat("+ this.columns +", 1fr");
|
||||
this.$grid.css("grid-template-rows", "repeat("+ this.rows +", 1fr");
|
||||
} else{
|
||||
this.$grid.css("grid-template-columns", "repeat("+ this.columns +", "+ this.cell_width + "px");
|
||||
this.$grid.css("grid-template-rows", "repeat("+ this.rows +", "+ this.cell_height + "px");
|
||||
}
|
||||
}
|
||||
|
||||
addElement(element_template){
|
||||
this.elements.push(element_template);
|
||||
}
|
||||
|
||||
addMouvement(grid_mouvement){
|
||||
this.mouvements.push(grid_mouvement);
|
||||
}
|
||||
|
||||
draw(){
|
||||
// fill all the grid with it's element
|
||||
|
||||
this.init_css();
|
||||
|
||||
for (var i = 0; i < this.rows; i++) {
|
||||
for (var j = 0; j < this.columns; j++) {
|
||||
|
||||
// pick the element we are going to draw
|
||||
let pick = this.distribute(i,j);
|
||||
let element_html = "";
|
||||
if(pick >= 0){
|
||||
element_html = this.elements[pick].html;
|
||||
}
|
||||
|
||||
// a clone
|
||||
let $el = $(element_html);
|
||||
|
||||
// wrapp it in a cell
|
||||
let $cell = $("<div>").addClass("grid-cell");
|
||||
let $wrapper = $("<div>").addClass("element-wrapper");
|
||||
//so we can chain transform on it
|
||||
// $wrapper.css("transform-origin", "center center");
|
||||
// $wrapper.css("transform", "translate(-50%, -50%)");
|
||||
if(this.mode == "SPACE"){
|
||||
$wrapper.css("width", this.cell_width);
|
||||
$wrapper.css("height", this.cell_height);
|
||||
}
|
||||
$cell.append($wrapper.append($el));
|
||||
|
||||
// iterate over all mouvement and apply them to the clone
|
||||
this.mouvements.forEach( function(mvt){
|
||||
mvt.apply($cell,i,j);
|
||||
});
|
||||
|
||||
// get a clone with mouvement applied
|
||||
// let $el = this.element_template.draw(i,j);
|
||||
|
||||
|
||||
this.$grid.append($cell);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class GridElement{
|
||||
// a template of grid element to clone into the grid
|
||||
constructor(id){
|
||||
|
||||
//get html content string
|
||||
// let content = $("#"+id).html();
|
||||
|
||||
// wrapp it in a cell
|
||||
// let $cell = $("<div>").addClass("grid-cell");
|
||||
// let $wrapper = $("<div>").addClass("element-wrapper");
|
||||
// $cell.append($wrapper.append(content));
|
||||
//
|
||||
// this.html = $("<div>").append($cell).html().trim();
|
||||
|
||||
this.html = $("#"+id).html();
|
||||
|
||||
// this.mouvements = [];
|
||||
}
|
||||
|
||||
// addMouvement(grid_mouvement){
|
||||
// this.mouvements.push(grid_mouvement);
|
||||
// }
|
||||
|
||||
// draw(i, j){
|
||||
// // return the DOM element according to it's template and an i,j parameter
|
||||
//
|
||||
// // a clone
|
||||
// let $new_el = $(this.html);
|
||||
//
|
||||
// // iterate over all mouvement and apply them to the clone
|
||||
// this.mouvements.forEach( function(mvt){
|
||||
// mvt.apply($new_el,i,j);
|
||||
// });
|
||||
//
|
||||
// return $new_el;
|
||||
// }
|
||||
}
|
||||
|
||||
class GridMouvement{
|
||||
|
||||
constructor(css_property, eval_function, selector=".element-wrapper"){
|
||||
this.selector = selector;
|
||||
this.property = css_property;
|
||||
this.evaluate = eval_function;
|
||||
}
|
||||
|
||||
apply($element, i, j){
|
||||
// apply the mouvement to an element according to it's i, j position
|
||||
// on the grid
|
||||
let $search = $("<div>").append($element);
|
||||
let $affected_by_mvt = $search.find(this.selector);
|
||||
let css = this.evaluate(i,j);
|
||||
if(this.property == "transform"){
|
||||
let current_transform = $affected_by_mvt.css("transform");
|
||||
css = current_transform + " " + css;
|
||||
}
|
||||
$affected_by_mvt.css(this.property, css);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// default mouvements
|
||||
|
||||
function map_range(value, in_min, in_max, out_min, out_max) {
|
||||
return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
|
||||
}
|
||||
|
||||
const sym2HH = new GridMouvement("transform", function(i,j){
|
||||
let scaleY = 1;
|
||||
if(j%2==1){ scaleY = -1; }
|
||||
let transform = "scaleY("+scaleY+")";
|
||||
return transform;
|
||||
});
|
||||
const sym2VV = new GridMouvement("transform", function(i,j){
|
||||
let scaleX = 1;
|
||||
if(i%2==1){ scaleX = -1; }
|
||||
let transform = "scaleX("+scaleX+")";
|
||||
return transform;
|
||||
});
|
||||
const sym4 = new GridMouvement("transform", function(i,j){
|
||||
let scaleX = 1;
|
||||
let scaleY = 1;
|
||||
if(i%2==1){ scaleX = -1; }
|
||||
if(j%2==1){ scaleY = -1; }
|
||||
let transform = "scaleX("+scaleX+") scaleY("+scaleY+")";
|
||||
return transform;
|
||||
});
|
||||
const sym4alt = new GridMouvement("transform", function(i,j){
|
||||
let scaleX = 1;
|
||||
let scaleY = 1;
|
||||
if(i%2==1){ scaleY = -1; }
|
||||
if(j%2==1){ scaleX = -1; }
|
||||
let transform = "scaleX("+scaleX+") scaleY("+scaleY+")";
|
||||
return transform;
|
||||
});
|
||||
|
||||
const line_shift = new GridMouvement("transform", function(i,j){
|
||||
let translate = "";
|
||||
if(i%2==1){
|
||||
translate = "translateX(-25%)";
|
||||
}
|
||||
if(i%2==0){
|
||||
translate = "translateX(+25%)";
|
||||
}
|
||||
return translate;
|
||||
});
|
||||
|
||||
|
||||
const shrink = new GridMouvement("transform", function(i,j){
|
||||
let factor = j/(mygrid.columns);
|
||||
return "scale("+factor+")";
|
||||
});
|
||||
|
||||
|
||||
const rotation = new GridMouvement("transform", function(i,j){
|
||||
let angle = String((j/(mygrid.columns-1))*360)+"deg";
|
||||
let rotate = "rotate("+angle+")";
|
||||
return rotate;
|
||||
});
|
||||
|
||||
const random_rot = new GridMouvement("transform", function(i,j){
|
||||
let angle = Math.random()*360;
|
||||
let rotate = "rotate("+angle+"deg)";
|
||||
return rotate;
|
||||
});
|
||||
|
||||
|
||||
const random_color = new GridMouvement("background", function(i,j){
|
||||
let hue = map_range(Math.random(),0,1,30,100);
|
||||
let color = "hsl("+hue+",70%,50%)";
|
||||
return color;
|
||||
}, ".leaves");
|
||||
|
||||
|
||||
const scattered = new GridMouvement("transform", function(i,j){
|
||||
let maxdecal = 120;
|
||||
let decalx = (Math.random()*maxdecal) - (maxdecal/2);
|
||||
let decaly = (Math.random()*maxdecal) - (maxdecal/2);
|
||||
let transform = "translate("+decalx+"%, "+decaly+"%)";
|
||||
return transform;
|
||||
});
|
||||
|
||||
|
||||
const diagonal_fontsize = new GridMouvement("font-size", function(i,j){
|
||||
let x = j/(mygrid.columns-1);
|
||||
let y = i/(mygrid.rows-1);
|
||||
let fontsize = Math.max(Math.abs(x-y) * 10, 1);
|
||||
return fontsize+"em";
|
||||
});
|
||||
@ -0,0 +1,134 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" type="text/css" href="{{ THEME_STATIC_DIR }}/css/flyer.css" />
|
||||
|
||||
<!-- GRID DRAWING
|
||||
------------------------------------------------------------------- -->
|
||||
<script src="{{ THEME_STATIC_DIR }}/js/tools/css-grid-drawing.js"></script>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block scroll_content %}
|
||||
|
||||
<article class="flyer">
|
||||
|
||||
<div class="page recto">
|
||||
<div class="layer recto__text">
|
||||
|
||||
<header>
|
||||
<h2 class="phase-name font-big new-moon-fvs">New moon </h2>
|
||||
<h2 class="font-big new-moon-slanted-fvs">walks</h2>
|
||||
|
||||
<h2 class="phase-name font-big full-moon-fvs">Full moon </h2>
|
||||
<h2 class="font-big full-moon-slanted-fvs">walks</h2>
|
||||
</header>
|
||||
|
||||
<main class="text-content recto__langs">
|
||||
<div class="recto__lang">
|
||||
<p class="font-up">en</p>
|
||||
<div class="progressive-fvs">
|
||||
{{ page.sections["en"] }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="recto__lang">
|
||||
<p class="font-up">fr</p>
|
||||
<div class="progressive-fvs">
|
||||
{{ page.sections["fr"] }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="recto__lang">
|
||||
<p class="font-up">nl</p>
|
||||
<div class="progressive-fvs">
|
||||
{{ page.sections["nl"] }}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<a class="mono-big" href="http://moonwalks.be">moonwalks.be</a>
|
||||
<p class="mono">
|
||||
a project by Anaïs Berck
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page verso">
|
||||
|
||||
<div class="page-rotate">
|
||||
|
||||
<div class="layer drawing-back">
|
||||
</div>
|
||||
|
||||
<div id="verso-drawing" class="layer drawing-grid">
|
||||
</div>
|
||||
|
||||
<div id="verso-drawing" class="layer verso__text">
|
||||
<footer class="mono-big">
|
||||
<a href="http://moonwalks.be">moonwalks.be</a>
|
||||
<p class="mono">
|
||||
an initiative by Anaïs Berck
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
<template id="leaf-element">
|
||||
<div class="leaf">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// ___ GRID INIT ___
|
||||
const CELL_SIZE = [80,80];
|
||||
const GRID_ID = "verso-drawing";
|
||||
mygrid = new Grid(GRID_ID, CELL_SIZE, "STRETCH");
|
||||
|
||||
// ___ ELEMENT INIT ___
|
||||
myelement = new GridElement("leaf-element");
|
||||
mygrid.addElement(myelement);
|
||||
|
||||
// ___ CUSTOM MOUVEMENT ___
|
||||
mygrid.addMouvement(random_rot);
|
||||
mygrid.addMouvement(scattered);
|
||||
|
||||
mygrid.draw();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{% block js_body %}
|
||||
{{ super() }}
|
||||
|
||||
<script>
|
||||
let prog_fvs = document.getElementsByClassName("progressive-fvs");
|
||||
|
||||
for (let div of prog_fvs) {
|
||||
// separate every words in the p as a span
|
||||
let ps = div.getElementsByTagName("p");
|
||||
|
||||
for (let p of ps){
|
||||
p.innerHTML = p.innerHTML.split(" ").map(x => "<span class='prog-fvs__span'>" + x + "</span>").join(" ");
|
||||
}
|
||||
}
|
||||
|
||||
for (let div of prog_fvs) {
|
||||
let prog_spans = div.getElementsByClassName("prog-fvs__span");
|
||||
|
||||
let i = 0;
|
||||
for (let prog_span of prog_spans){
|
||||
let value = (i / (prog_spans.length - 1)) / 2;
|
||||
console.log(value);
|
||||
updateAxis($(prog_span), value, secondAxis=false);
|
||||
i = i + 1;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 15 KiB |
Loading…
Reference in New Issue