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
|
Title: Footer
|
||||||
save_as:
|
save_as:
|
||||||
partial: true
|
partial: true
|
||||||
|
save_as:
|
||||||
|
|
||||||
|
|
||||||
The typography of this website varies slightly under the influence of the moon.
|
The typography of this website varies slightly under the influence of the moon. <br/>
|
||||||
The website color theme switch according if it's day time or night time in Brussels.
|
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.
|
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.
|
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
|
Title: Footer
|
||||||
lang: es
|
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.
|
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.
|
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.
|
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
|
Title: Footer
|
||||||
lang: fr
|
lang: fr
|
||||||
|
save_as:
|
||||||
|
|
||||||
La typographie de ce site web varie légèrement sous l'influence de la lune.
|
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 qu'il fait jour ou nuit à Bruxelles.
|
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.
|
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.
|
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
|
Title: Footer
|
||||||
lang: nl
|
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.
|
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.
|
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.
|
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