main
Dorian 3 years ago
parent d2b3f19664
commit 420e27fced

@ -21,8 +21,8 @@
start_location: "Drève du comte" start_location: "Drève du comte"
start_location_link: "https://www.openstreetmap.org/way/14502214#map=17/50.79518/4.40096" start_location_link: "https://www.openstreetmap.org/way/14502214#map=17/50.79518/4.40096"
#New Moon walk on the 01.04.22 # New Moon walk on the 01.04.22
# 01-04-22: 01-04-22:
# start_time: "19:30" start_time: "19:30"
# start_location: "Drève du comte" start_location: "Drève du comte"
# start_location_link: "https://www.openstreetmap.org/way/14502214#map=17/50.79518/4.40096" start_location_link: "https://www.openstreetmap.org/way/14502214#map=17/50.79518/4.40096"

@ -3,18 +3,18 @@
"en": "Current moon phase", "en": "Current moon phase",
"fr": "Phase lunaire actuelle", "fr": "Phase lunaire actuelle",
"nl": "Huidige maanstand", "nl": "Huidige maanstand",
"sp": "Fase lunar actual" "es": "Fase lunar actual"
}, },
"quotes":{ "quotes":{
"en": "reactions participants", "en": "reactions participants",
"fr": "réactions participant.es", "fr": "réactions participant.es",
"nl": "reacties deelnemers", "nl": "reacties deelnemers",
"sp": "reacciones participantes" "es": "reacciones participantes"
}, },
"projects":{ "projects":{
"en": "Projects", "en": "Projects",
"fr": "Projets", "fr": "Projets",
"nl": "Projecten", "nl": "Projecten",
"sp": "Proyectos" "es": "Proyectos"
} }
} }

@ -0,0 +1,11 @@
Title: Footer
save_as:
partial: true
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.
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)

@ -0,0 +1,9 @@
Title: Footer
lang: es
La tipografía de este sitio web varía ligeramente bajo la influencia de la luna.
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).

@ -0,0 +1,9 @@
Title: Footer
lang: fr
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.
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).

@ -0,0 +1,9 @@
Title: Footer
lang: nl
De typografie van deze website varieert lichtjes onder invloed van de maan.
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).

@ -1,4 +1,4 @@
Title: Galería Title: Galería
template: gallery template: gallery
slug: gallery slug: gallery
lang: sp lang: es

@ -1,6 +1,6 @@
Title: Calendario Title: Calendario
slug: index slug: index
lang: sp lang: es
template: index template: index
Caminar cuando todos los colores han desaparecido del bosque es una experiencia especial. Caminar cuando todos los colores han desaparecido del bosque es una experiencia especial.

@ -3,66 +3,72 @@
"en": "About the walks", "en": "About the walks",
"fr": "À propos des promenades", "fr": "À propos des promenades",
"nl": "Over de wandelingen", "nl": "Over de wandelingen",
"sp": "Sobre los paseos" "es": "Sobre los paseos"
}, },
"calendar":{ "calendar":{
"en": "Moonwalks calendar", "en": "Moonwalks calendar",
"fr": "Calendrier des promenades lunaires", "fr": "Calendrier des promenades lunaires",
"nl": "Kalender Maanwandelingen", "nl": "Kalender Maanwandelingen",
"sp": "Calendario de paseos lunares" "es": "Calendario de paseos lunares"
}, },
"datetime":{ "datetime":{
"en": "Dates and times are given in", "en": "Dates and times are given in",
"fr": "Les dates et heures sont indiquées en", "fr": "Les dates et heures sont indiquées en",
"nl": "Data en uren zijn vermeld in", "nl": "Data en uren zijn vermeld in",
"sp": "Las fechas y horas se indican en" "es": "Las fechas y horas se indican en"
}, },
"loading":{ "loading":{
"en": "Loading the calendar", "en": "Loading the calendar",
"fr": "Chargement du calendrier", "fr": "Chargement du calendrier",
"nl": "Laden van de kalender", "nl": "Laden van de kalender",
"sp": "Cargar el calendario" "es": "Cargar el calendario"
}, },
"signup":{ "signup":{
"en": "Sign up", "en": "Sign up",
"fr": "S'inscrire", "fr": "S'inscrire",
"nl": "Reserveren", "nl": "Reserveren",
"sp": "Reservar" "es": "Reservar"
}, },
"notconfirmed":{ "notconfirmed":{
"en": "Not confirmed", "en": "Not confirmed",
"fr": "Non confirmé", "fr": "Non confirmé",
"nl": "Niet bevestigd", "nl": "Niet bevestigd",
"sp": "No confirmado" "es": "No confirmado"
},
"past":{
"en": "Past",
"fr": "Passé",
"nl": "Voorbij",
"es": "Pasado"
}, },
"start":{ "start":{
"en": "Walk starts at", "en": "Walk starts at",
"fr": "La marche commence à", "fr": "La marche commence à",
"nl": "De wandeling begint om", "nl": "De wandeling begint om",
"sp": "La caminata comienza a las" "es": "La caminata comienza a las"
}, },
"sunsetat":{ "sunsetat":{
"en": "Sunset at", "en": "Sunset at",
"fr": "Coucher de soleil à", "fr": "Coucher de soleil à",
"nl": "Zonsondergang om", "nl": "Zonsondergang om",
"sp": "Puesta de sol a las" "es": "Puesta de sol a las"
}, },
"moonat":{ "moonat":{
"en": "Moon event at", "en": "Moon event at",
"fr": "Événement lunaire à", "fr": "Événement lunaire à",
"nl": "Maangebeuren om", "nl": "Maangebeuren om",
"sp": "Evento lunar a las" "es": "Evento lunar a las"
}, },
"mailsubject":{ "mailsubject":{
"en": "$ walk on the", "en": "$ walk on the",
"fr": "Balade de $ le", "fr": "Balade de $ le",
"nl": "$ wandeling op", "nl": "$ wandeling op",
"sp": "Paseo de $ el" "es": "Paseo de $ el"
}, },
"more":{ "more":{
"en": "More to come", "en": "More to come",
"fr": "Plus à venir", "fr": "Plus à venir",
"nl": "Wordt vervolgd", "nl": "Wordt vervolgd",
"sp": "Más por venir" "es": "Más por venir"
} }
} }

@ -1,6 +1,6 @@
Title: Paseo individual Title: Paseo individual
slug: individual-walks slug: individual-walks
lang: sp lang: es
La naturaleza siempre ofrece curación si la buscas. Un guía puede ayudarte. Ese es el objetivo del paseo individual. Tienes una pregunta y te pones a trabajar en ella. Durante dos o tres horas. Cada paseo es único y se adapta a ti. La naturaleza siempre ofrece curación si la buscas. Un guía puede ayudarte. Ese es el objetivo del paseo individual. Tienes una pregunta y te pones a trabajar en ella. Durante dos o tres horas. Cada paseo es único y se adapta a ti.

@ -1,6 +1,6 @@
Title: Paseos lunares Title: Paseos lunares
slug: moonwalks slug: moonwalks
lang: sp lang: es
## Nuevos rituales ## Nuevos rituales
La botánica e india americana Robin Wall Kimmerer afirma en su libro «Braiding Sweetgrass» que el núcleo de la crisis climática está relacionado con la pérdida de la conexión con la tierra. Al reconectar, puede producirse una forma de recuperación de la tierra y su gente, así como un cuidado sostenible. La conexión puede hacerse de varias maneras, por ejemplo, responsabilizándose de un trozo de tierra, ya sea un huerto, un jardín ornamental o un bosque. Su hipótesis es que la salud física, emocional y espiritual de una persona mejora enormemente cuando se restablece la relación con la tierra en su vida. Insta a crear nuevos rituales que promuevan esas relaciones. Los paseos lunares intentan ser un nuevo ritual. La botánica e india americana Robin Wall Kimmerer afirma en su libro «Braiding Sweetgrass» que el núcleo de la crisis climática está relacionado con la pérdida de la conexión con la tierra. Al reconectar, puede producirse una forma de recuperación de la tierra y su gente, así como un cuidado sostenible. La conexión puede hacerse de varias maneras, por ejemplo, responsabilizándose de un trozo de tierra, ya sea un huerto, un jardín ornamental o un bosque. Su hipótesis es que la salud física, emocional y espiritual de una persona mejora enormemente cuando se restablece la relación con la tierra en su vida. Insta a crear nuevos rituales que promuevan esas relaciones. Los paseos lunares intentan ser un nuevo ritual.

@ -1,6 +1,6 @@
Title: Teatro de naturaleza Title: Teatro de naturaleza
slug: nature-theatre slug: nature-theatre
lang: sp lang: es
El teatro de naturaleza es una obra que no se desarrolla entre cuatro paredes, sino en el bosque; donde los actores no son personas, sino más que humanos, como árboles, musgos o plantas, y donde el público contribuye a la catarsis de la obra. Puedes inscribirte en grupo. El teatro de naturaleza es una obra que no se desarrolla entre cuatro paredes, sino en el bosque; donde los actores no son personas, sino más que humanos, como árboles, musgos o plantas, y donde el público contribuye a la catarsis de la obra. Puedes inscribirte en grupo.

@ -77,7 +77,7 @@ TAG_SAVE_AS = ''
# DIRECT_TEMPLATES = ['index', 'authors', 'categories', 'tags', 'archives'] # DIRECT_TEMPLATES = ['index', 'authors', 'categories', 'tags', 'archives']
# because gallery and even index is a page # because gallery and even index is a page
# (this allow to have translation for index_fr, index_nl, etc) # (this allow to have translation for index_fr, index_nl, etc)
DIRECT_TEMPLATES = [] DIRECT_TEMPLATES = ['alltypo']
# to copy every image to the output direction # to copy every image to the output direction
STATIC_PATHS = ['gallery'] STATIC_PATHS = ['gallery']

@ -33,8 +33,7 @@ nav.nav-projects li.active::after{
========================================================================== */ ========================================================================== */
blockquote{ blockquote{
padding: calc(var(--lh) * 0.5) calc(var(--lh) * 1); padding: calc(var(--lh) * 0.5) calc(var(--lh) * 0.5);
background: var(--c-soft);
border: var(--border); border: var(--border);
margin-left: var(--lh); margin-left: var(--lh);

@ -14,8 +14,8 @@
animation: glowing 1s infinite alternate; animation: glowing 1s infinite alternate;
} }
@keyframes glowing { @keyframes glowing {
from { color: var(--c-dark); } from { color: var(--clr-text); }
to { color: var(--c-light); } to { color: var(--clr-back); }
} }
/* layout */ /* layout */
@ -29,7 +29,7 @@
margin-bottom: calc(var(--lh) * 0.5); margin-bottom: calc(var(--lh) * 0.5);
} }
#calendar-section .calendar-content{ #calendar-section .calendar-content{
padding-left: calc(var(--lh) * 0.5); padding-left: calc(var(--lh) * 1);
} }
#calendar-section footer{ #calendar-section footer{
padding-top: calc(var(--lh) * 0.5); padding-top: calc(var(--lh) * 0.5);
@ -38,31 +38,40 @@
margin-top: calc(var(--lh) * 0.5); margin-top: calc(var(--lh) * 0.5);
} }
/* an entry */ /* AN ENTRY
=========================================================================== */
/* layout */
.cal-entry{ .cal-entry{
padding: calc(var(--lh) * 1) 0 calc(var(--lh) * 0.5); padding: calc(var(--lh) * 1) 0 calc(var(--lh) * 1);
display: grid;
grid-template-columns: min-content min-content 1fr;
grid-auto-rows: min-content;
align-items: last baseline;
gap: 0 calc(var(--lh) * 1.5);
/* padding: calc(var(--lh) * 1) 0 calc(var(--lh) * 1);
border-left: calc(var(--lh) * 0.5) solid white;
padding-left: calc(var(--lh) * 1); */
}
.cal-entry.newmoon{
/* border-style: dotted; */
} }
.cal-entry:not(:last-of-type){ .cal-entry:not(:last-of-type){
border-bottom: var(--border); border-bottom: var(--border);
} }
.cal-entry__prime{ .cal-entry__date,
display: flex; .cal-entry__moon,
align-items: last baseline; .cal-entry__phase,
gap: calc(var(--lh) * 1.5); .cal-entry__reservation{
} }
.cal-entry__second{ .cal-entry__description,
margin-top: calc(var(--lh) * 0.75); .cal-entry__data{
grid-column: 1 / span all;
} }
.cal-entry__tertary{
margin-top: calc(var(--lh) * 0.75); .cal-entry__description{
margin-top: calc(var(--lh) * 0.5);
}
.cal-entry__data{
margin-top: calc(var(--lh) * 0.5);
} }
@ -72,13 +81,7 @@
} }
/* --- past --- */ /* --- past --- */
.cal-entry.past .cal-entry__date .date{
text-decoration-line: line-through;
text-decoration-thickness: calc(var(--lh) * 0.2);
}
.cal-entry.past h2{
color: var(--c-soft-text);
}
/* --- moon drawing */ /* --- moon drawing */
.cal-entry__moon .moon-drawing { .cal-entry__moon .moon-drawing {
@ -86,15 +89,12 @@
width: 1em; width: 1em;
height: 1em; height: 1em;
border-radius: 100%; border-radius: 100%;
position: relative;
top: 0.12em;
} }
.cal-entry.fullmoon .moon-drawing{ .cal-entry.fullmoon .moon-drawing{
background: white; background: white;
} }
.cal-entry.newmoon .moon-drawing{ .cal-entry.newmoon .moon-drawing{
border: 3px dotted white; border: 5px dotted white;
box-sizing: border-box; box-sizing: border-box;
} }
@ -102,64 +102,60 @@
.cal-entry__phase{ .cal-entry__phase{
flex-grow: 1; flex-grow: 1;
} }
h2.phase-name { .cal-entry__phase h2.phase-name {
line-height: calc(var(--lh) * 1.5); line-height: calc(var(--lh) * 1.5);
text-transform: capitalize; text-transform: capitalize;
white-space: nowrap; white-space: nowrap;
width: 6em;
} }
/* --- reservation */ /* --- reservation */
.cal-entry__reservation{ .cal-entry__reservation{
/* flex-grow: 1; */ text-align: right;
display: flex;
justify-content: flex-end;
}
.reservation {
white-space: nowrap; white-space: nowrap;
} }
.cal-entry__reservation .picto{ /* .cal-entry__reservation .picto{
position: relative; position: relative;
top: 0.16em; top: 0.16em;
margin-right: 0.1em; margin-right: 0.1em;
line-height: 0;
} */
.cal-entry__reservation .signup{
border: var(--border);
border-radius: calc(var(--lh) * 0.5);
padding: calc(var(--lh) * 0.5) calc(var(--lh) * 0.75) calc(var(--lh) * 0.25);
text-decoration: none;
} }
.cal-entry:not(.confirmed) .cal-entry__reservation .picto{ .cal-entry__reservation .signup:hover{
display: none; background: rgba(255,255,255,0.35);
}
.cal-entry:not(.confirmed) .cal-entry__reservation a{
color: var(--c-soft-text);
} }
.cal-entry.past.confirmed .cal-entry__reservation{ .cal-entry:not(.confirmed) .cal-entry__reservation,
color: var(--c-soft-text); .cal-entry.past .cal-entry__reservation{
color: var(--clr-soft-text);
} }
/* activvve */ /* --- data */
/* .cal-entry.confirmed:not(.past) :is(h2, .cal-entry__description, .cal-entry__reservation a), */
.cal-entry.confirmed:not(.past) :is(.cal-entry__description, .cal-entry__reservation){
/* color: midnightblue; */
/* color: navy; */
}
/* --- tertary */
.cal-entry__tertary{ .cal-entry__data{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.5em; gap: 0.5em;
} }
.cal-entry__tertary > *:not(:last-child)::after{ .cal-entry__data > *:not(:last-child)::after{
content: "•"; content: "•";
margin: 0 0.5em; margin: 0 0.5em;
} }
.cal-entry__tertary > *:not(:first-child)::before{ .cal-entry__data > *:not(:first-child)::before{
content: " "; content: " ";
} }
/* typo animation */ /* ANIMATION
=========================================================================== */
.cal-entry{ .cal-entry{
--animation-duration: 2s; --animation-duration: 2s;
/* --animation-duration: 0.5s; */
animation-timing-function: linear; animation-timing-function: linear;
} }
.cal-entry:not(.past).confirmed.newmoon.animated h2{ .cal-entry:not(.past).confirmed.newmoon.animated h2{
@ -170,11 +166,104 @@ h2.phase-name {
} }
@keyframes newmoon { @keyframes newmoon {
0% { font-variation-settings: "SERI"0, "slnt"0; } 0% { font-variation-settings: "SERI"0, "slnt"0; }
50% { font-variation-settings: "SERI"100, "slnt"0; color: white;} 50% { font-variation-settings: "SERI"100, "slnt"0; color: var(--clr-back);}
100% { font-variation-settings: "SERI"0, "slnt"0; } 100% { font-variation-settings: "SERI"0, "slnt"0; }
} }
@keyframes fullmoon { @keyframes fullmoon {
0% { font-variation-settings: "SERI"100, "slnt"0; } 0% { font-variation-settings: "SERI"100, "slnt"0; }
50% { font-variation-settings: "SERI"0, "slnt"0; color: white;} 50% { font-variation-settings: "SERI"0, "slnt"0; color: var(--clr-back);}
100% { font-variation-settings: "SERI"100, "slnt"0; } 100% { font-variation-settings: "SERI"100, "slnt"0; }
} }
/* RESPONSIVE
=========================================================================== */
/* @media only screen and (max-width: 920px) */
/* smaller date */
@media only screen and (max-width: 1450px) {
.cal-entry{
grid-template-columns: min-content 1fr;
align-items: last baseline;
}
/* first line */
.cal-entry__moon{
grid-row: 1 / span 1;
grid-column: 1 / span 1;
}
.cal-entry__phase{
grid-row: 1 / span 1;
grid-column: 2 / span 1;
}
.cal-entry__reservation{
grid-row: 1 / span 1;
grid-column: 3 / span 1;
}
/* second line */
:root{
--fs-mono-big: calc(var(--fs-up) * 1.125);
--fvs-mono-big: 'wght' 300, 'wdth' 100;
}
.cal-entry__date .day::before{
content: "— ";
}
.cal-entry__date{
grid-row: 2 / span 1;
grid-column: 1 / span all;
display: flex;
align-items: baseline;
gap: 0.5em;
margin-top: calc(var(--lh) * 0.5);
}
.cal-entry__date .date{
order: 0;
line-height: var(--lh);
}
.cal-entry__date .day{
order: 1;
}
.cal-entry__description,
.cal-entry__data{
order: 4;
grid-column: 1 / span all;
}
}
/* mobile */
@media only screen and (max-width: 680px) {
#calendar-section .calendar-content{
padding-left: 0;
}
.cal-entry{
grid-template-columns: min-content min-content;
gap: 0 calc(var(--lh) * 1);
}
/* --- reservation */
.cal-entry__reservation{
grid-column: 1 / span all;
grid-row: auto;
text-align: left;
margin-top: calc(var(--lh) * 0.5);
}
.cal-entry__reservation .signup{
display: inline-block;
}
/* --- data */
.cal-entry__data{
display: block;
}
.cal-entry__data > *:not(:last-child)::after{
content: none;
}
}

@ -3,7 +3,7 @@ body > header{
--header-h: calc(var(--lh) * 3); --header-h: calc(var(--lh) * 3);
} }
header > .top-header{ header > .top-header{
background: var(--c-dark); background: var(--clr-header);
height: calc(var(--lh) * 1); height: calc(var(--lh) * 1);
display: flex; display: flex;
@ -30,18 +30,15 @@ nav.lang-menu ul{
line-height: var(--lh); line-height: var(--lh);
/* theme 1 */
color: var(--c-soft);
/* theme 2 */ /* theme 2 */
/* background: var(--c-soft); /* background: var(--clr-soft);
color: var(--c-dark); */ color: var(--clr-text); */
} }
nav.lang-menu a{ nav.lang-menu a{
color: currentColor; color: rgba(255,255,255,0.5);
text-decoration: none; text-decoration: none;
} }
nav.lang-menu li.active{ nav.lang-menu li.active a{
color: white; color: white;
} }
@ -55,7 +52,7 @@ nav.lang-menu #lang__fr{
nav.lang-menu #lang__nl{ nav.lang-menu #lang__nl{
order: 3; order: 3;
} }
nav.lang-menu #lang__sp{ nav.lang-menu #lang__es{
order: 4; order: 4;
} }
@ -66,17 +63,19 @@ nav.nav-menu ul{
display: flex; display: flex;
align-items: stretch; align-items: stretch;
border-top: var(--border);
border-bottom: var(--border); border-bottom: var(--border);
border-color: var(--clr-header);
box-sizing: border-box; box-sizing: border-box;
/* theme 1 */ /* theme 1 */
background: var(--c-soft); background: var(--clr-soft);
/* theme 2 */ /* theme 2 */
/* border-top: var(--border); /* border-top: var(--border);
background: var(--c-dark); background: var(--clr-text);
border-color: var(--c-soft); border-color: var(--clr-soft);
color: var(--c-soft); */ color: var(--clr-soft); */
} }
nav.nav-menu li{ nav.nav-menu li{
flex: 1 0 0%; flex: 1 0 0%;
@ -84,18 +83,19 @@ nav.nav-menu li{
max-width: 16rem; max-width: 16rem;
position: relative; position: relative;
border-right: var(--border); border-right: var(--border);
border-color: var(--clr-header);
/* theme 1 */ /* theme 1 */
/* background: var(--c-light); */ /* background: var(--clr-back); */
/* theme 2 */ /* theme 2 */
/* border-color: var(--c-soft); */ /* border-color: var(--clr-soft); */
} }
nav.nav-menu li:first-child{ nav.nav-menu li:first-child{
/* border-left: var(--border); */ /* border-left: var(--border); */
/* theme 2 */ /* theme 2 */
/* border-color: var(--c-soft); */ /* border-color: var(--clr-soft); */
} }
nav.nav-menu a{ nav.nav-menu a{
@ -123,11 +123,11 @@ nav.nav-menu li.active a{
} }
nav.nav-menu li.active{ nav.nav-menu li.active{
/* theme 1 */
background: white; background: white;
}
/* theme 2 */ .night nav.nav-menu li.active{
/* color: white; */ background: white;
color: var(--clr-back);
} }
/* order */ /* order */

@ -2,6 +2,7 @@
/* we have fixed element but the only scroll is on the body, /* we have fixed element but the only scroll is on the body,
so scrolling anywhere on the page works */ so scrolling anywhere on the page works */
body > header{ body > header{
position: sticky; position: sticky;
top: 0; top: 0;
@ -9,68 +10,75 @@ body > header{
} }
body > section.grid-display{ body > section.grid-display{
display: grid; display: grid;
grid-template-columns: 1fr 40%; grid-template-columns: 40% 60%;
position: relative; position: relative;
} }
body > section.grid-display > *{ body > section.grid-display > *{
padding: var(--lh); padding: var(--lh);
padding-top: calc(var(--lh) * 1); box-sizing: border-box;
} }
aside.moon-watch{ body > section.grid-display > .column-fixed > *{
position: fixed; position: sticky;
top: calc(var(--lh) * 3); /* the height of the header */ top: calc(var(--lh) * 4);
right: 0;
/* half minus half of the grid-gap */
width: 40%;
box-sizing: border-box;
} }
body > section.grid-display::before{
/* content: ""; */ body.all-typo > section.grid-display{
position: fixed; grid-template-columns: 1fr !important;
inset: 0;
top: calc(var(--lh) * 3); /* the height of the header */
height: calc(var(--lh) * 2);
background: linear-gradient(var(--c-light) 33%, transparent);
pointer-events: none;
z-index: 2;
} }
.all-typo .column-scroll{
display: none;
}
/* RESPONSIVE
=========================================================================== */
@media only screen and (max-width: 60rem) { /* one column break */
@media only screen and (max-width: 1050px) {
/* one column when smaller */ /* one column when smaller */
:root{ :root{
--fs-display: clamp(3rem, 16vw, 6rem); --fs-display: clamp(3rem, 16vw, 6rem);
} }
body > section.grid-display{ body > section.grid-display{
grid-template-columns: 1fr; grid-template-columns: 1fr !important;
padding: var(--lh);
} }
body > section.grid-display::before{
height: calc(var(--lh) * 1); /* remove column containers */
section.grid-display > div{
display: contents;
}
/* remove sticky */
body > section.grid-display > .column-fixed > *{
position: relative;
top: 0;
} }
section.grid-display > aside.moon-watch{
position: static;
width: auto;
/* calendar */
body.calendar #moon-watch-section{
order: 0; order: 0;
padding-top: calc(var(--lh) * 1);
padding-bottom: 0;
} }
section.grid-display > main{ body.calendar #about-section{
padding-top: calc(var(--lh) * 1); order: 1;
/* padding-bottom: 0; */
} }
body.calendar #calendar-section{
body > section.grid-display > *{ order: 2;
padding-left: calc(var(--lh) * 0.5);
padding-right: calc(var(--lh) * 0.5);
} }
}
/* gallery */ /* mobile */
body:not(.gallery) section.grid-display > main{ @media only screen and (max-width: 680px) {
order: 1; /* one column when smaller */
padding-top: 0; :root{
--fs-display: clamp(3rem, 16vw, 6rem);
}
body > section.grid-display{
grid-template-columns: 1fr !important;
padding: var(--lh) calc(var(--lh) * 0.5);
} }
} }

@ -1,62 +1,22 @@
/*
IDEA:
* the black of the screen is litteraly the absence of light,
then the serif in white become an exact representation of the changing pattern
of moonlight through the tree
*/
:root{ :root{
/* --- COLORS --- */
/* --c-dark: hsl(60, 2%, 18%);
--c-soft: hsl(60, 6%, 68%);
--c-light: hsl(96, 18%, 92%); */
/* from image sampling */
/* char: low contrast, background on which we can put white */
/* still we could switch the hue to either a blue or a redish */
--c-dark: hsl(62, 8%, 16%); /* darker than sampling feel */
--c-soft: hsl(62, 30%, 88%); /* back lit turn off on dark feel */
--c-soft-text: hsl(62, 4%, 68%); /* back lit turn off on dark feel */
--c-light: hsl(92, 36%, 90%);
/* old color theme */
/* --c-light: hsl(34, 44%, 82%);
/* --c-light: hsl(48, 36%, 86%); */
/* inverted */
/* --c-dark: hsl(96, 20%, 94%);
--c-soft: hsl(60, 6%, 40%);
--c-light: hsl(60, 2%, 25%); */
/* --- FONT-SIZES --- */ /* --- FONT-SIZES --- */
--fs-display: clamp(3rem, 8vw, 7rem); --fs-display: clamp(3rem, 6vw, 7rem);
/* --fs-big: 2.35rem; */
--fs-big: 2.4rem; --fs-big: 2.4rem;
--fs-up: 1.35rem; --fs-up: 1.35rem;
--fs-mono-big: calc(var(--fs-big) * 1); /* match title size */ --fs-mono-big: calc(var(--fs-big) * 1); /* match title size */
--fvs-mono-big: 'wght' 220, 'wdth' 100; --fvs-mono-big: 'wght' 180, 'wdth' 100;
--fs-mono: 0.725rem; --fs-mono: 0.725rem;
/* --fs-mono: 0.75rem; */ /* --fs-mono: 0.75rem; */
--fvs-mono: 'wght' 420, 'wdth' 140; --fvs-mono: 'wght' 360, 'wdth' 140;
--lh: 1.35rem; --lh: 1.35rem;
/* --- SPACES --- */
/* --border-width: 0.08rem; */
--border-width: 1.5px;
--border: var(--border-width) solid var(--c-dark);
} }
html{ html{
background: var(--c-light);
/* background: linear-gradient(to bottom, var(--c-light), hsl(34, 44%, 82%)); */
color: var(--c-dark);
font-family: "unoversoneueGX"; font-family: "unoversoneueGX";
/* bigger than default (16px --> 20px) */ /* bigger than default (16px --> 20px) */
font-size: 1.25em; font-size: 1.25em;
@ -65,12 +25,54 @@ html{
body{ body{
font-size: inherit; font-size: inherit;
line-height: var(--lh); line-height: var(--lh);
/* slitghly brown forest light, low contrast */
--clr-text: hsl(62, 6%, 24%);
--clr-soft-text: rgba(0,0,0,0.25);
--clr-header: var(--clr-text);
/* day -- colored */
/* --clr-soft: hsl(60, 32%, 84%);
--clr-back: hsl(90, 32%, 86%); */
/* day -- grey green */
/* --clr-soft: hsl(54, 32%, 78%);
--clr-back: hsl(66, 18%, 82%); */
--clr-soft: hsl(54, 32%, 82%);
--clr-back: hsl(82, 16%, 84%);
/* --clr-soft: hsl(60, 32%, 78%);
--clr-back: hsl(48, 24%, 82%); */
background: var(--clr-back);
color: var(--clr-text);
--border-width: 1px;
--border: var(--border-width) solid var(--clr-text);
}
body.night{
/* slitghly cyan moon reflection, low contrast */
--clr-text: hsl(160, 6%, 82%);
--clr-soft-text: rgba(255,255,255,0.35);
--clr-header: hsl(320, 4%, 12%);
/* night -- colored */
/* --clr-soft: hsl(340, 4%, 30%);
--clr-back: hsl(240, 30%, 18%); */
/* night -- grey purple */
--clr-soft: hsl(350, 3%, 42%);
--clr-back: hsl(252, 15%, 22%);
} }
/* link */ /* link */
a, a,
a:visited{ a:visited{
color: currentColor; color: currentColor;
/* color: yellowgreen; */
/* text-decoration-thickness: var(--border-width); */ /* text-decoration-thickness: var(--border-width); */
text-decoration-thickness: 1px; text-decoration-thickness: 1px;
} }
@ -81,7 +83,19 @@ a:visited{
/* selection */ /* selection */
*::selection{ *::selection{
background: white; background: white;
color: var(--c-dark); color: var(--clr-text);
}
.night *::selection{
background: white;
color: var(--clr-back);
}
.moon-phased-typo > *{
opacity: 0;
transition: opacity 0.25s;
}
.moon-phased-typo > *.computed{
opacity: 1;
} }
/* CONSTANT VERTICAL RYTHM /* CONSTANT VERTICAL RYTHM
@ -152,28 +166,33 @@ section.data-section{
border-top: var(--border); border-top: var(--border);
padding: calc(var(--lh) * 2) 0 calc(var(--lh) * 3); padding: calc(var(--lh) * 2) 0 calc(var(--lh) * 3);
} }
section.data-section::before{ section.data-section::after{
font-family: 'Inconsolata', monospace; font-family: 'Inconsolata', monospace;
/* font-variation-settings: 'wght' 460, 'wdth' 150; */ /* font-variation-settings: 'wght' 460, 'wdth' 150; */
font-variation-settings: var(--fvs-mono); font-variation-settings: var(--fvs-mono);
font-size: var(--fs-mono); font-size: var(--fs-mono);
letter-spacing: 0.04em; letter-spacing: 0.04em;
text-transform: uppercase; text-transform: uppercase;
}
section.data-section::before {
content: attr(data-box-title); content: attr(data-box-title);
background: var(--c-dark); background: var(--clr-text);
color: var(--c-light); color: var(--clr-back);
position: absolute; position: absolute;
top: calc(-1 * var(--border-width)); top: calc(-1 * var(--border-width));
left: 0; left: 0;
padding: 0.2em calc(var(--lh) / 2); padding: 0.2em calc(var(--lh) / 2);
display: flex; display: flex;
align-items: center; align-items: center;
outline: calc(var(--lh) / 2) solid var(--c-light); outline: calc(var(--lh) / 2) solid var(--clr-back);
line-height: 1.25; line-height: 1.25;
} }
section > a:first-of-type{
display: block;
margin-top: -200px;
height: 200px;
}
/* INTRO TEXT /* INTRO TEXT
=========================================================================== */ =========================================================================== */
@ -192,36 +211,35 @@ section.data-section::before {
=========================================================================== */ =========================================================================== */
body > footer{ body > footer{
background: var(--c-soft); background: var(--clr-soft);
font-size: 0.625rem !important; font-size: 0.625rem !important;
border-top: var(--border); border-top: var(--border);
/* text-align: right; */ border-color: var(--clr-header);
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
body > footer > .additionnal-info{
border-right: var(--border);
color: var(--c-soft-text);
}
body > footer > *{ body > footer > *{
padding: var(--lh); padding: var(--lh);
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 920px) {
body > footer{ body > footer{
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
body > footer > .additionnal-info{ body > footer > p:not(:last-of-type){
border-right: none; padding-bottom: 0;
border-bottom: var(--border);
} }
} }
/* RESPONSIVENESS /* RESPONSIVE
=========================================================================== */ =========================================================================== */
@media only screen and (max-width: 600px) { /* mobile */
@media only screen and (max-width: 680px) {
:root{
--fs-big: 2rem;
}
html{ html{
font-size: 1.125em; font-size: 1.125em;
} }

@ -1,28 +1,53 @@
:root { :root {
--animation-duration: 2s; --animation-duration: 2s;
} }
#moon-watch-section{ #moon-watch-section{
/* padding-top: calc(var(--lh) * 1.5); */ padding-bottom: calc(var(--lh) * 1);
} }
.watch__date{ .watch__date{
padding-bottom: calc(var(--lh) * 0.5); padding-bottom: calc(var(--lh) * 0.5);
} }
.watch__phase > h2.phase-name{ .watch__phase{
/* padding-left: calc(var(--lh) * 1); */
}
.watch__phase > h2.phase-name,
.all-phases > h2{
text-transform: uppercase; text-transform: uppercase;
font-size: var(--fs-display); font-size: var(--fs-display);
line-height: 0.85; line-height: 0.85;
letter-spacing: -0.05em;
/* with the accent */
/* line-height: 1.05; */
letter-spacing: -0.04em;
animation: setting_phase var(--animation-duration); animation: setting_phase var(--animation-duration);
/* Note: The overflow-wrap property acts in the same way as the non-standard property word-wrap.
The word-wrap property is now treated by browsers as an alias of the standard property. */
/* Note: In contrast to word-break, overflow-wrap will only create a break
if an entire word cannot be placed on its own line without overflowing. */
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
/* text-align: center; */
/* background: radial-gradient(circle closest-side, white, var(--c-dark)); /* background: radial-gradient(circle closest-side, white, var(--c-dark));
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; */ -webkit-text-fill-color: transparent; */
min-height: 1.6em;
border-left: var(--border);
padding-left: var(--lh);
margin-bottom: calc(var(--lh) * 0.5);
}
body.projects .watch__phase > h2.phase-name{
border-left: none;
margin-bottom: calc(var(--lh) * 1);
} }
@keyframes setting_phase { @keyframes setting_phase {
@ -35,61 +60,80 @@
} }
/* SVG SCHEME
/* ------------- old */
/* MOON WATCH
============================================================================ */ ============================================================================ */
/* svg scheme */ .watch__scheme{
.flex-scheme-info-wrapper {
display: flex; display: flex;
justify-content: center;
position: relative;
} }
.flex-scheme-info-wrapper .api-info-wrapper {
display: block;
flex-grow: 1;
}
#current-phase-scheme { .watch__scheme svg{
position: absolute; height: 200px;
bottom: 0; width: 100%;
right: 0; max-width: 500px;
} }
#current-phase-scheme .scheme-sun{ .watch__scheme::after{
text-align: center; content: "↓ sunlights";
} position: absolute;
left: calc(50% + 1em);
#current-phase-scheme svg { top: 0;
overflow: hidden;
width: 200px;
height: 150px;
} }
svg text { .watch__scheme svg circle{
font-family: "Symbola"; vector-effect: non-scaling-stroke;
} }
.watch__scheme svg line{
circle {
vector-effect: non-scaling-stroke; vector-effect: non-scaling-stroke;
stroke: var(--clr-text);
} }
circle.svg-moon-trajectory, circle.svg-moon-trajectory,
circle.svg-earth-trajectory { circle.svg-earth-trajectory {
stroke: var(--c-dark); stroke: var(--clr-soft-text);
stroke-width: var(--border-width); stroke-width: var(--border-width);
stroke-dasharray: 4;
fill: none; fill: none;
} }
circle.svg-moon, circle.svg-earth{
circle.svg-earth, fill: var(--clr-text);
path.svg-sun { }
fill: var(--c-dark);
.stop-light{
stop-color: white;
}
.stop-dark{
stop-color: var(--clr-text);
} }
circle.svg-moon { circle.svg-moon {
/* transition: var(--animation-duration); */ --moon-rotation: 0deg;
/* stroke: var(--clr-text);
stroke-width: var(--border-width); */
/* fill: url(#moon-light-gradient); */
fill: white;
transform:
rotate(calc(-1 * var(--moon-rotation)))
translateY(-50px)
rotate(var(--moon-rotation))
;
transition: transform var(--animation-duration);
}
/* RESPONSIVE
============================================================================ */
/* 1 column break */
@media only screen and (max-width: 1050px) {
.watch__phase > h2.phase-name{
padding-left: 0;
border: none;
text-align: center;
}
} }

@ -13,6 +13,13 @@
// so we have to use luxon to parse the string as CET, and convert it to a proper date object // so we have to use luxon to parse the string as CET, and convert it to a proper date object
// then we can print this object back according to where the walk happens // then we can print this object back according to where the walk happens
// test zone for other date
// first new moon of 2000 according to:
// https://www.calendar-12.com/moon_phases/2000
// let now = new Date(Date.parse('06 Jan 2000 19:14:00 GMT+1'));
// let now = new Date(Date.parse('13 Jan 2000 05:41:00 GMT+1'));
// let now = new Date(Date.parse('21 Jan 2000 05:41:00 GMT+1'));
let now = new Date();
let months_ahead = window.walk_calendar["months_ahead"]; let months_ahead = window.walk_calendar["months_ahead"];
let month_to_get = now; let month_to_get = now;
let queue = []; let queue = [];
@ -49,29 +56,6 @@ function translatePhaseDutch(phase_name){
} }
} }
function getLocalFromURL(){
let local = "";
let url = window.location.href;
let filename = url.split("/").pop().split(".")[0];
let lang_split = filename.split("_");
if (lang_split.length == 1){
local = "en-gb";
}
else{
if (lang_split[1] == "fr"){
local = "fr-be";
}
else if (lang_split[1] == "nl"){
local = "nl-be";
}
else if (lang_split[1] == "sp"){
local = "es-es";
}
}
return local;
}
// FILL CALENDAR WITH DATA // FILL CALENDAR WITH DATA
// ========================================================================== // ==========================================================================
@ -102,19 +86,7 @@ function addDateToCalendar(date, moon){
// let illumination = (moon_calc["illumination"]*100).toFixed(2); // let illumination = (moon_calc["illumination"]*100).toFixed(2);
// --- get suncalc sun object // --- get suncalc sun object
// for complementary info such as: sunset time let walk_sunset = getSunStateFromDate(date, lat, long, timezone)[1];
// Note: suncalc gives us sunset time as a date object
// meaning if we just print it it will print in local user time
// what we need to do:
// js sunset_time --> ISO string in UTC --> luxon sunset_time
// set proper timezone to luxon sunset_time
// print it in it's timezone
let sun_calc = SunCalc.getTimes(date, lat, long);
let sunset = sun_calc["sunset"];
walk_sunset = luxon.DateTime.fromISO(sunset.toISOString());
walk_sunset = walk_sunset.setZone(timezone);
// console.log(sunset);
// console.log(walk_sunset.toString());
// --- formating the info // --- formating the info
let phase_name = moon.phaseName; let phase_name = moon.phaseName;
@ -133,24 +105,13 @@ function addDateToCalendar(date, moon){
// let time_id = date.toUnixInteger(); // let time_id = date.toUnixInteger();
let time_id =formated_date['date'].split(".").join("-"); let time_id =formated_date['date'].split(".").join("-");
// --- adding classes
if(date < now){
$cal_entry.addClass("past");
}
if(phase === 0){
$cal_entry.addClass("newmoon");
}
else{
$cal_entry.addClass("fullmoon");
}
// --- filling the info // --- filling the info
$cal_entry.attr("id", time_id); $cal_entry.attr("id", time_id);
// --- PHASENAME // --- PHASENAME
$cal_entry.find(".phase-name").html(phase_name); $cal_entry.find(".phase-name").html(phase_name);
// --- EVENT // --- EVENT
$cal_entry.find(".cal-entry__date .day").html(formated_date['day']); $cal_entry.find(".day").html(formated_date['day']);
$cal_entry.find(".cal-entry__date .date").html(formated_date['date']); $cal_entry.find(".date").html(formated_date['date']);
// --- SECONDARY INFO --- // --- SECONDARY INFO ---
$cal_entry.find(".sunset-time").html(walk_sunset_time['time']); $cal_entry.find(".sunset-time").html(walk_sunset_time['time']);
@ -166,28 +127,44 @@ function addDateToCalendar(date, moon){
// --- add the class // --- add the class
$cal_entry.addClass("confirmed"); $cal_entry.addClass("confirmed");
$cal_entry.find(".cal-entry__reservation a .not-confirmed").remove(); $cal_entry.find(".reservation .not-confirmed").remove();
// --- fill infos // --- fill infos
$cal_entry.find(".cal-entry__description .start-time").html(walk_entry.start_time); $cal_entry.find(".start-time").html(walk_entry.start_time);
$cal_entry.find(".cal-entry__description .start-location a").html(walk_entry.start_location); $cal_entry.find(".start-location a").html(walk_entry.start_location);
$cal_entry.find(".cal-entry__description .start-location a").attr("href", walk_entry.start_location_link); $cal_entry.find(".start-location a").attr("href", walk_entry.start_location_link);
// --- mail subject // --- mail subject
// only added if event has an entry in yaml AND not a past event // only added if event has an entry in yaml AND not a past event
if(date > now){ let mail_subject = $cal_entry.find(".reservation a").attr("data-mail-subject");
let mail_subject = $cal_entry.find(".cal-entry__reservation a").attr("data-mail-subject");
mail_subject = mail_subject.replace("$", phase_name) + " " + formated_date['date']; mail_subject = mail_subject.replace("$", phase_name) + " " + formated_date['date'];
let uri = "mailto:" + contact_mail + "?subject="; let uri = "mailto:" + contact_mail + "?subject=";
uri += encodeURIComponent(mail_subject); uri += encodeURIComponent(mail_subject);
$cal_entry.find(".cal-entry__reservation a").attr("href", uri); $cal_entry.find(".reservation a").attr("href", uri);
}
} }
else{ else{
$cal_entry.find(".cal-entry__description").remove(); $cal_entry.find(".cal-entry__description").remove();
$cal_entry.find(".cal-entry__reservation a .signup").remove(); $cal_entry.find(".reservation .signup").remove();
}
// --- adding classes
if(date < now){
$cal_entry.addClass("past");
$cal_entry.find(".reservation .signup").remove();
$cal_entry.find(".reservation .not-confirmed").remove();
}
else{
$cal_entry.find(".reservation .past").remove();
} }
if(phase === 0){
$cal_entry.addClass("newmoon");
}
else{
$cal_entry.addClass("fullmoon");
}
// --- make it clickable // --- make it clickable
$cal_entry.on( "click", function() { $cal_entry.on( "click", function() {
let yaml_entry = '#'+ phase_name + " walk on the " + formated_date['date'] let yaml_entry = '#'+ phase_name + " walk on the " + formated_date['date']
@ -365,7 +342,6 @@ function createCalendar(months_ahead){
year : new_month.getFullYear() year : new_month.getFullYear()
} }
console.log("doing request", config_month.month + " " + config_month.year + " in " + lang); console.log("doing request", config_month.month + " " + config_month.year + " in " + lang);
requestMonthMoonPhases(config_month, processQueue); requestMonthMoonPhases(config_month, processQueue);
@ -377,8 +353,6 @@ function createCalendar(months_ahead){
$(document).ready(function(){ $(document).ready(function(){
window.current_local = getLocalFromURL();
createCalendar(months_ahead); createCalendar(months_ahead);
writeTimezone(); writeTimezone();

@ -7,32 +7,79 @@
//shapes of the moon from north hemispheres //shapes of the moon from north hemispheres
//otherwise the picto are left-right inversed (and at the equator the crescent are in the bottom-top direction) //otherwise the picto are left-right inversed (and at the equator the crescent are in the bottom-top direction)
const MOONPHASES = [ const MOONPHASES = [
{ name: 'new moon', //not visible: not in nightsky, and in daysky it's the hidden side that's light up by the sun { name_en: 'new moon', //not visible: not in nightsky, and in daysky it's the hidden side that's light up by the sun
name_fr: 'nouvelle lune',
name_nl: 'nieuwe maan',
name_es: 'luna nueva',
picto: '&#x1F311;', picto: '&#x1F311;',
}, },
{ name: 'waxing crescent', //in daysky, but a bit in the west: from late morning to post-dusk, not in nightsky { name_en: 'waxing crescent', //in daysky, but a bit in the west: from late morning to post-dusk, not in nightsky
name_fr: 'premier croissant',
name_nl: 'jonge maansikkel',
name_es: 'creciente cóncava',
picto: '&#x1F312;', picto: '&#x1F312;',
}, },
{ name: 'first quarter', //at the west intersection of night and day skies -> begin to appear in night: afternoon to early evening { name_en: 'first quarter', //at the west intersection of night and day skies -> begin to appear in night: afternoon to early evening
name_fr: 'premier quartier',
name_nl: 'eerste kwartier',
name_es: 'cuarto creciente',
picto: '&#x1F313;', picto: '&#x1F313;',
}, },
{ name: 'waxing gibbous', //in the nightsky, but a bit in the west: from late afternoon to most of the night { name_en: 'waxing gibbous', //in the nightsky, but a bit in the west: from late afternoon to most of the night
name_fr: 'gibbeuse croissante',
name_nl: 'wassende maan',
name_es: 'creciente gibosa',
picto: '&#x1F314;', picto: '&#x1F314;',
}, },
{ name: 'full moon', //all night: sunset to sunrise { name_en: 'full moon', //all night: sunset to sunrise
name_fr: 'pleine lune',
name_nl: 'volle maan',
name_es: 'luna llena',
picto: '&#x1F315;', picto: '&#x1F315;',
}, },
{ name: 'waning gibbous', //in the nightsky, but a bit in the east: most of the night to early morning { name_en: 'waning gibbous', //in the nightsky, but a bit in the east: most of the night to early morning
name_fr: 'gibbeuse décroissante',
name_nl: 'krimpende maan',
name_es: 'menguante gibosa',
picto: '&#x1F316;', picto: '&#x1F316;',
}, },
{ name: 'last quarter', //at the east intersection of night and day skies -> begin to appear in day: late night to morning { name_en: 'last quarter', //at the east intersection of night and day skies -> begin to appear in day: late night to morning
name_fr: 'dernier quartier',
name_nl: 'laatste kwartier',
name_es: 'cuarto menguante',
picto: '&#x1F317;', picto: '&#x1F317;',
}, },
{ name: 'waning crescent', //in daysky, but a bit in the east: from pre-dawn to early afternoon, not in nightsky { name_en: 'waning crescent', //in daysky, but a bit in the east: from pre-dawn to early afternoon, not in nightsky
name_fr: 'dernier croissant',
name_nl: 'krimpende maansikkel',
name_es: 'menguante cóncava',
picto: '&#x1F318;', picto: '&#x1F318;',
} }
] ]
function getLocalFromURL(){
let local = "";
let url = window.location.href;
let filename = url.split("/").pop().split(".")[0];
let lang_split = filename.split("_");
if (lang_split.length == 1){
local = "en-gb";
}
else{
if (lang_split[1] == "fr"){
local = "fr-be";
}
else if (lang_split[1] == "nl"){
local = "nl-be";
}
else if (lang_split[1] == "es"){
local = "es-es";
}
}
return local;
}
// JS DATE FORMATING // JS DATE FORMATING
// ============================================================================ // ============================================================================
@ -110,7 +157,7 @@ function getMoonDataFromPhase(phase){
else return MOONPHASES[0]; else return MOONPHASES[0];
} }
function getMoonStateFromDate(date, latitude=0, longitude=0){ function getMoonStateFromDate(date, lat=0, long=0){
// return a moon object containing everything that we need // return a moon object containing everything that we need
let mooncalc_illumination = SunCalc.getMoonIllumination(date); let mooncalc_illumination = SunCalc.getMoonIllumination(date);
let moon = getMoonDataFromPhase(mooncalc_illumination.phase); let moon = getMoonDataFromPhase(mooncalc_illumination.phase);
@ -118,12 +165,36 @@ function getMoonStateFromDate(date, latitude=0, longitude=0){
moon['phase'] = mooncalc_illumination.phase; moon['phase'] = mooncalc_illumination.phase;
/* TODO: those data depend of the location on earth!! lat and lon to precise */ /* TODO: those data depend of the location on earth!! lat and lon to precise */
let mooncalc_position = SunCalc.getMoonPosition(date, latitude, longitude); let mooncalc_position = SunCalc.getMoonPosition(date, lat, long);
moon['distance'] = mooncalc_position.distance; moon['distance'] = mooncalc_position.distance;
return moon; return moon;
} }
function getSunStateFromDate(date, lat=0, long=0, timezone){
// --- get suncalc sun object
// for complementary info such as: sunset time
// Note: suncalc gives us sunset time as a date object
// meaning if we just print it it will print in local user time
// what we need to do:
// js sunset_time --> ISO string in UTC --> luxon sunset_time
// set proper timezone to luxon sunset_time
// print it in it's timezone
let sun_calc = SunCalc.getTimes(date, lat, long);
let sunrise = sun_calc["sunrise"];
let sunset = sun_calc["sunset"];
let offset_sunset = luxon.DateTime.fromISO(sunset.toISOString());
offset_sunset = offset_sunset.setZone(timezone);
let offset_sunrise = luxon.DateTime.fromISO(sunrise.toISOString());
offset_sunrise = offset_sunrise.setZone(timezone);
return [offset_sunrise, offset_sunset];
}
// PHASE TO TYPO // PHASE TO TYPO
// ============================================================================ // ============================================================================
@ -166,4 +237,10 @@ function updateAxis($element, value, secondAxis=true){
let axis_2 = '"slnt" ' + mapValue(x, -1, 1, -100, 100); let axis_2 = '"slnt" ' + mapValue(x, -1, 1, -100, 100);
let settings = secondAxis ? axis_1 + ", " + axis_2 : axis_1; let settings = secondAxis ? axis_1 + ", " + axis_2 : axis_1;
$element.css("font-variation-settings", settings); $element.css("font-variation-settings", settings);
$element.addClass("computed");
} }
$(document).ready(function(){
window.current_local = getLocalFromURL();
});

@ -1,11 +1,4 @@
// test zone for other date
// first new moon of 2000 according to:
// https://www.calendar-12.com/moon_phases/2000
// let now = new Date(Date.parse('06 Jan 2000 19:14:00 GMT+1'));
// let now = new Date(Date.parse('21 Jan 2000 05:41:00 GMT+1'));
// let now = new Date(Date.parse('13 Jan 2000 05:41:00 GMT+1'));
let now = new Date();
// MOON COMPUTATION // MOON COMPUTATION
// ========================================================================== // ==========================================================================
@ -16,9 +9,13 @@ function updateCurrentMoonWatch(date){
let long = window.walk_calendar["longitude"]; let long = window.walk_calendar["longitude"];
let moon = getMoonStateFromDate(date, lat, long); let moon = getMoonStateFromDate(date, lat, long);
let phase_name = moon["name"].split(" ").join(" <br>");
let formated_date = format_date_time(date); let formated_date = format_date_time(date);
let lang = window.current_local.split("-")[0];
let phase_name = moon["name_"+lang];
phase_name = phase_name.split(" ").join(" <br>");
// sunset // sunset
// let distance = moon["distance"]; // let distance = moon["distance"];
// let sun_calc = SunCalc.getTimes(date, lat, long); // let sun_calc = SunCalc.getTimes(date, lat, long);
@ -30,16 +27,63 @@ function updateCurrentMoonWatch(date){
$watch.find('.date').html(formated_date['date']); $watch.find('.date').html(formated_date['date']);
// scheme position // scheme position
// let [cx, cy] = getCircle(moon["phase"]); let angle = mapValue(moon["phase"], 0, 1, 0, 360);
// cx = mapValue(cx,-1,1,50,-50); $(".watch__scheme .svg-moon").css("--moon-rotation", angle + "deg");
// cy = mapValue(cy,-1,1,50,-50);
// $('#current-phase-scheme svg .svg-moon').attr('cx', cx);
// $('#current-phase-scheme svg .svg-moon').attr('cy', cy);
// change the font // change the font
updateAxis($watch, moon["phase"]); updateAxis($watch, moon["phase"]);
} }
function printAllMoonphases(){
let langs = ['en', 'fr', 'nl', 'es'];
for (let lg of langs) {
console.log(lg);
let phase_number = 0;
for (let phase of MOONPHASES){
let phase_name = phase["name_"+lg];
let title = $('<h2>').html(phase_name);
updateAxis(title, phase_number, true);
$(".all-phases").append(title);
phase_number = phase_number + 0.125;
}
$(".all-phases").append(
$('<hr>')
);
}
}
function toggleTheme(now){
let lat = window.walk_calendar["latitude"];
let long = window.walk_calendar["longitude"];
let timezone = window.walk_calendar["timezone"];
// we want to have the time now in "Europe/Brussels"
let date = luxon.DateTime.fromISO(now.toISOString()).setZone(timezone);
let [sunrise, sunset] = getSunStateFromDate(date, lat, long, timezone);
console.log("now", date.toString());
console.log("rise", sunrise.toString());
console.log("set", sunset.toString());
if( date < sunset && sunrise < date ){
console.log("day");
}
else{
console.log("night");
$("body").addClass("night");
}
}
function updateCurrentMoonTypo(date){ function updateCurrentMoonTypo(date){
let lat = window.walk_calendar["latitude"]; let lat = window.walk_calendar["latitude"];
let long = window.walk_calendar["longitude"]; let long = window.walk_calendar["longitude"];
@ -49,3 +93,23 @@ function updateCurrentMoonTypo(date){
updateAxis($(".moon-phased-typo > *:not(p)"), moon["phase"], true); updateAxis($(".moon-phased-typo > *:not(p)"), moon["phase"], true);
updateAxis($("#about-section .about-box p:first-child"), moon["phase"], true); updateAxis($("#about-section .about-box p:first-child"), moon["phase"], true);
} }
$(document).ready(function(){
// test zone for other date
// first new moon of 2000 according to:
// https://www.calendar-12.com/moon_phases/2000
// let now = new Date(Date.parse('06 Jan 2000 19:14:00 GMT+1'));
// let now = new Date(Date.parse('13 Jan 2000 05:41:00 GMT+1'));
// let now = new Date(Date.parse('21 Jan 2000 05:41:00 GMT+1'));
let now = new Date();
toggleTheme(now);
window.setInterval(function(){
// now.setHours(now.getHours() + 2);
updateCurrentMoonWatch(now);
updateCurrentMoonTypo(now);
}, 100);
});

@ -0,0 +1,9 @@
{% extends "base.html" %}
{% block body_class %}all-typo {% endblock %}
{% block fixed_content %}
<div class="all-phases">
</div>
{% endblock %}

@ -8,11 +8,19 @@
<link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/article.css" /> <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/article.css" />
{% endblock %} {% endblock %}
{% block body_class %}article{% endblock %} {% block body_class %}{{ article.category }}{% endblock %}
{% block fixed_content %}
{% include 'partials/moon-watch.html' %}
{% endblock %}
{% block scroll_content %}
{% block content %}
<section id="projects-section" class="data-section" data-box-title="{{ multilang.projects }}"> <section id="projects-section" class="data-section" data-box-title="{{ multilang.projects }}">
<a name="topp"></a>
<nav class="nav-projects mono"> <nav class="nav-projects mono">
<ul> <ul>
{# ---> list all the 'projects' article in the current language #} {# ---> list all the 'projects' article in the current language #}
@ -20,13 +28,13 @@
{% if art.category == 'projects' %} {% if art.category == 'projects' %}
{% if current_lang == DEFAULT_LANG %} {% if current_lang == DEFAULT_LANG %}
<li {% if art == article %} class="active" {% endif %}> <li {% if art == article %} class="active" {% endif %}>
<a href="{{ art.url }}">{{ art.title }}</a> <a href="{{ art.url }}#topp">{{ art.title }}</a>
</li> </li>
{% else %} {% else %}
{% for translation in art.translations %} {% for translation in art.translations %}
{% if translation.lang == current_lang %} {% if translation.lang == current_lang %}
<li {% if translation == article %} class="active" {% endif %}> <li {% if translation == article %} class="active" {% endif %}>
<a href="{{ translation.url }}" hreflang="{{ translation.lang }}">{{ translation.title }}</a> <a href="{{ translation.url }}#topp" hreflang="{{ translation.lang }}">{{ translation.title }}</a>
</li> </li>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
@ -35,20 +43,20 @@
{% endfor %} {% endfor %}
</ul> </ul>
</nav> </nav>
</section> </section>
<section id="{{ article.title }}-section" class="data-section" data-box-title="{{ article.title }}"> <section id="{{ article.title }}-section" class="data-section" data-box-title="{{ article.title }}">
<div class="text-content moon-phased-typo"> <div class="text-content moon-phased-typo">
{{ article.content }} {{ article.content }}
</div> </div>
</section> </section>
{% if article.quotes %} {% if article.quotes %}
<section id="{{ article.title }}-quotes-section" class="data-section" data-box-title="{{ multilang.quotes }}"> <section id="{{ article.title }}-quotes-section" class="data-section" data-box-title="{{ multilang.quotes }}">
<div class="text-content article-quotes"> <div class="text-content article-quotes">
{{ article.quotes }} {{ article.quotes }}
</div> </div>
</section> </section>
{% endif %} {% endif %}
{% endblock %} {% endblock %}

@ -32,19 +32,32 @@
<section class="grid-display"> <section class="grid-display">
<main class=""> <div class="column-fixed">
{% block content %} {% block fixed_content %}
{% endblock %} {% endblock %}
</main> </div>
<aside class="moon-watch"> <div class="column-scroll">
{% include 'partials/moon-watch.html' %} {% block scroll_content %}
</aside> {% endblock %}
</div>
</section> </section>
<footer class="mono"> <footer class="mono">
{% include 'partials/footer.html' %} {% for p in pages %}
{% if p.slug == "footer" %}
{% if current_lang == DEFAULT_LANG %}
{{ p.content }}
{% else %}
{% for translation in p.translations %}
{% if translation.lang == current_lang %}
{{ translation.content }}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% endfor %}
</footer> </footer>
{% block js_body %} {% block js_body %}
@ -56,13 +69,9 @@
</script> </script>
<script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/moon-utilities.js"></script> <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/moon-utilities.js"></script>
<script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/moon-watch.js"></script> <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/moon-watch.js"></script>
<script> <!-- <script>
window.setInterval(function(){ printAllMoonphases();
// now.setHours(now.getHours() + 2); </script> -->
updateCurrentMoonWatch(now);
updateCurrentMoonTypo(now);
}, 100);
</script>
{% endblock %} {% endblock %}
</body> </body>

@ -10,7 +10,7 @@
{% block body_class %}gallery{% endblock %} {% block body_class %}gallery{% endblock %}
{% block content %} {% block fixed_content %}
<section class="gallery-section"> <section class="gallery-section">
{% for img in GALLERY %} {% for img in GALLERY %}
<figure class="image"> <figure class="image">
@ -19,4 +19,4 @@
</figure> </figure>
{% endfor %} {% endfor %}
</section> </section>
{% endblock content %} {% endblock %}

@ -10,7 +10,7 @@
{% block body_class %}calendar{% endblock %} {% block body_class %}calendar{% endblock %}
{% block content %} {% block fixed_content %}
<section id="about-section" class="data-section" data-box-title="{{ page.multilang.about }}"> <section id="about-section" class="data-section" data-box-title="{{ page.multilang.about }}">
<div class="text-content moon-phased-typo about-box"> <div class="text-content moon-phased-typo about-box">
@ -21,10 +21,15 @@
</div> </div>
</section> </section>
{% endblock %}
{% block scroll_content %}
{% include 'partials/moon-watch.html' %}
<section id="calendar-section" class="data-section" data-box-title="{{ page.multilang.calendar }}"> <section id="calendar-section" class="data-section" data-box-title="{{ page.multilang.calendar }}">
{% include 'partials/calendar.html' %} {% include 'partials/calendar.html' %}
</section> </section>
{% endblock %} {% endblock %}
{% block js_body %} {% block js_body %}

@ -21,8 +21,6 @@
<div class="cal-entry"> <div class="cal-entry">
<section class="cal-entry__prime">
<time class="cal-entry__date" datetime=""> <time class="cal-entry__date" datetime="">
<div class="day font-up"></div> <div class="day font-up"></div>
<div class="date mono-big"> <div class="date mono-big">
@ -38,33 +36,34 @@
</div> </div>
<div class="cal-entry__reservation"> <div class="cal-entry__reservation">
<div class="reservation"> <div class="reservation font-up">
<span class="picto mono-big">&rarr;</span>
<a class="font-up" data-mail-subject="{{ page.multilang.mailsubject }}"> <a class="signup" data-mail-subject="{{ page.multilang.mailsubject }}">
<span class="signup">{{ page.multilang.signup }}</span> {# <span class="picto mono-big">&rarr;</span> #}
<span class="not-confirmed">{{ page.multilang.notconfirmed }}</span> {{ page.multilang.signup }}
</a> </a>
<span class="not-confirmed">{{ page.multilang.notconfirmed }}</span>
<span class="past">{{ page.multilang.past }}</span>
</div> </div>
</div> </div>
</section>
<section class="cal-entry__second">
<div class="cal-entry__description"> <div class="cal-entry__description">
{{ page.multilang.start }} {{ page.multilang.start }}
<time class="start-time" datetime=""></time>, <time class="start-time" datetime=""></time>,
<span class="start-location"><a target="_blank"></a></span> <span class="start-location"><a target="_blank"></a></span>
</div> </div>
</section>
<section class="cal-entry__tertary mono"> <div class="cal-entry__data mono">
<div class="cal-entry__sunset"> <div>
{{ page.multilang.sunsetat }} <span class="sunset-time"></span> {{ page.multilang.sunsetat }} <span class="sunset-time"></span>
</div> </div>
<div class="cal-entry__moon-time"> <div>
{{ page.multilang.moonat }} <span class="moon-time"></span> {{ page.multilang.moonat }} <span class="moon-time"></span>
</div> </div>
</section> </div>
</div> </div>

@ -1,22 +0,0 @@
<div class="additionnal-info">
<p>
The typography of this website varies slightly under the influence of the moon.
</p>
<p>
The website color theme switch according if it's day time or night time in Brussels.
</p>
</div>
<div class="credits">
<p>
Font <a href="https://github.com/oxomoto/Unoverso-Libre">Unoverso</a> by Oxomoto, and Inconsolata Variable by Raph Levien.
</p>
<p>
All texts and images are published under de <a href="https://constantvzw.org/wefts/cc4r.en.html">CC4R license<a>, Anaïs Berck, 2022.
</p>
<p>
Website design and development by Doriane Timmermans (OSP)
</p>
</div>

@ -1,9 +1,9 @@
<section id="moon-watch-section" class="data-section" data-box-title="{{ multilang.watch }}"> <section id="moon-watch-section" class="data-section" data-box-title="{{ multilang.watch }}">
<div class="watch__date mono" datetime=""> <!-- <div class="watch__date mono" datetime="">
Today is the <span class="date"></span> and the moon is in: Today is the <span class="date"></span> and the moon is in:
</div> </div> -->
<div class="watch__phase"> <div class="watch__phase">
<h2 class="phase-name" <h2 class="phase-name"
@ -11,27 +11,30 @@
</h2> </h2>
</div> </div>
<div class="watch__scheme mono">
<svg viewBox="-100 -75 200 150" preserveAspectRatio="xMidYMid meet">
</section> <defs>
<linearGradient id="moon-light-gradient" x1="0" x2="0" y1="0" y2="1">
<!-- <div class="api-info-wrapper mono"> <stop class="stop-light" offset="0%"/>
</div> --> <stop class="stop-light" offset="50%"/>
<stop class="stop-dark" offset="50%"/>
<stop class="stop-dark" offset="100%"/>
<!-- <div class="api-info-wrapper mono"> </linearGradient>
<div class="illumination">illumination <span></span>%</div> </defs>
<div class="distance"><span></span>km from earth</div>
<div class="sunset"><span class="sun">&#x2600;</span>&darr; <span class="sunset-time"></span></div>
</div> -->
<!-- <div id="current-phase-scheme">
<div class="scheme-sun mono">&darr;sun&darr;</div>
<svg viewBox="-100 -50 200 100">
<g transform="translate(0 0)">
<circle class="svg-moon-trajectory" cx="0" cy="0" r="50"/> <circle class="svg-moon-trajectory" cx="0" cy="0" r="50"/>
<circle class="svg-moon" cx="0" cy="-50" r="5"/>
<circle class="svg-earth-trajectory" cx="0" cy="-500" r="500"/> <circle class="svg-earth-trajectory" cx="0" cy="-500" r="500"/>
<line x1="0" y1="-75" x2="0" y2="-40"></line>
<line x1="0" y1="75" x2="0" y2="40"></line>
<line x1="-75" y1="0" x2="-40" y2="0"></line>
<line x1="75" y1="0" x2="40" y2="0"></line>
<circle class="svg-moon" cx="0" cy="0" r="5"/>
<circle class="svg-earth" cx="0" cy="0" r="5"/> <circle class="svg-earth" cx="0" cy="0" r="5"/>
</g>
</svg> </svg>
</div> --> </div>
</section>

@ -48,14 +48,9 @@
<nav class="nav-menu"> <nav class="nav-menu">
<ul> <ul>
{% for title, link in MENUITEMS %}
<li id="nav__{{ title }}" {% if output_file in link %} class="active" {% endif %}> {% for cat, arts in categories %}
<a href="{{ link }}"><span>{{ title }}</span></a> <li id="nav__{{ cat }}" {% if category and cat == category %} class="active" {% endif %}>
</li>
{% endfor %}
{% for cat, arts in categories %} {# the non-null-save_as categories (remove 'calendar') #}
{% if not cat == 'calendar' %}
<li id="nav__{{ cat }}" {% if cat == category %} class="active" {% endif %}>
{% if current_lang == DEFAULT_LANG %} {% if current_lang == DEFAULT_LANG %}
{# take the last dated article #} {# take the last dated article #}
<a href="{{ arts[0].url }}"><span>{{ multilang[cat] }}</span></a> <a href="{{ arts[0].url }}"><span>{{ multilang[cat] }}</span></a>
@ -69,24 +64,25 @@
{% endfor %} {% endfor %}
{% endif %} {% endif %}
</li> </li>
{% endif %}
{% endfor %} {% endfor %}
{% for p in pages %} {# the individual pages #}
{% for p in pages %}
{% if not p.partial %}
<li id="nav__{{ p.slug }}" {% if page and p.slug == page.slug %} class="active"{% endif %}>
{% if current_lang == DEFAULT_LANG %} {% if current_lang == DEFAULT_LANG %}
<li id="nav__{{ p.slug }}" {% if p == page %} class="active"{% endif %}>
<a href="{{ p.url }}"><span>{{ p.title }}</span></a> <a href="{{ p.url }}"><span>{{ p.title }}</span></a>
</li>
{% else %} {% else %}
{% for translation in p.translations %} {% for translation in p.translations %}
{% if translation.lang == current_lang %} {% if translation.lang == current_lang %}
<li id="nav__{{ translation.slug }}" {% if translation == page %} class="active"{% endif %}>
<a href="{{ translation.url }}"> <a href="{{ translation.url }}">
<span>{{ translation.title }}</span> <span>{{ translation.title }}</span>
</a> </a>
</li>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% endif %} {% endif %}
</li>
{% endif %}
{% endfor %} {% endfor %}
</ul> </ul>
</nav> </nav>

Loading…
Cancel
Save