main
Dorian 3 years ago
parent d2b3f19664
commit 420e27fced

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

@ -3,18 +3,18 @@
"en": "Current moon phase",
"fr": "Phase lunaire actuelle",
"nl": "Huidige maanstand",
"sp": "Fase lunar actual"
"es": "Fase lunar actual"
},
"quotes":{
"en": "reactions participants",
"fr": "réactions participant.es",
"nl": "reacties deelnemers",
"sp": "reacciones participantes"
"es": "reacciones participantes"
},
"projects":{
"en": "Projects",
"fr": "Projets",
"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
template: gallery
slug: gallery
lang: sp
lang: es

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

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

@ -1,6 +1,6 @@
Title: Paseo individual
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.

@ -1,6 +1,6 @@
Title: Paseos lunares
slug: moonwalks
lang: sp
lang: es
## 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.

@ -1,6 +1,6 @@
Title: Teatro de naturaleza
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.

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

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

@ -14,8 +14,8 @@
animation: glowing 1s infinite alternate;
}
@keyframes glowing {
from { color: var(--c-dark); }
to { color: var(--c-light); }
from { color: var(--clr-text); }
to { color: var(--clr-back); }
}
/* layout */
@ -29,7 +29,7 @@
margin-bottom: calc(var(--lh) * 0.5);
}
#calendar-section .calendar-content{
padding-left: calc(var(--lh) * 0.5);
padding-left: calc(var(--lh) * 1);
}
#calendar-section footer{
padding-top: calc(var(--lh) * 0.5);
@ -38,31 +38,40 @@
margin-top: calc(var(--lh) * 0.5);
}
/* an entry */
/* AN ENTRY
=========================================================================== */
/* layout */
.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){
border-bottom: var(--border);
}
.cal-entry__prime{
display: flex;
align-items: last baseline;
gap: calc(var(--lh) * 1.5);
.cal-entry__date,
.cal-entry__moon,
.cal-entry__phase,
.cal-entry__reservation{
}
.cal-entry__description,
.cal-entry__data{
grid-column: 1 / span all;
}
.cal-entry__second{
margin-top: calc(var(--lh) * 0.75);
.cal-entry__description{
margin-top: calc(var(--lh) * 0.5);
}
.cal-entry__tertary{
margin-top: calc(var(--lh) * 0.75);
.cal-entry__data{
margin-top: calc(var(--lh) * 0.5);
}
@ -72,13 +81,7 @@
}
/* --- 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 */
.cal-entry__moon .moon-drawing {
@ -86,15 +89,12 @@
width: 1em;
height: 1em;
border-radius: 100%;
position: relative;
top: 0.12em;
}
.cal-entry.fullmoon .moon-drawing{
background: white;
}
.cal-entry.newmoon .moon-drawing{
border: 3px dotted white;
border: 5px dotted white;
box-sizing: border-box;
}
@ -102,64 +102,60 @@
.cal-entry__phase{
flex-grow: 1;
}
h2.phase-name {
.cal-entry__phase h2.phase-name {
line-height: calc(var(--lh) * 1.5);
text-transform: capitalize;
white-space: nowrap;
width: 6em;
}
/* --- reservation */
.cal-entry__reservation{
/* flex-grow: 1; */
display: flex;
justify-content: flex-end;
}
.reservation {
text-align: right;
white-space: nowrap;
}
.cal-entry__reservation .picto{
/* .cal-entry__reservation .picto{
position: relative;
top: 0.16em;
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{
display: none;
}
.cal-entry:not(.confirmed) .cal-entry__reservation a{
color: var(--c-soft-text);
.cal-entry__reservation .signup:hover{
background: rgba(255,255,255,0.35);
}
.cal-entry.past.confirmed .cal-entry__reservation{
color: var(--c-soft-text);
.cal-entry:not(.confirmed) .cal-entry__reservation,
.cal-entry.past .cal-entry__reservation{
color: var(--clr-soft-text);
}
/* activvve */
/* .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 */
/* --- data */
.cal-entry__tertary{
.cal-entry__data{
display: flex;
flex-wrap: wrap;
gap: 0.5em;
}
.cal-entry__tertary > *:not(:last-child)::after{
.cal-entry__data > *:not(:last-child)::after{
content: "•";
margin: 0 0.5em;
}
.cal-entry__tertary > *:not(:first-child)::before{
.cal-entry__data > *:not(:first-child)::before{
content: " ";
}
/* typo animation */
/* ANIMATION
=========================================================================== */
.cal-entry{
--animation-duration: 2s;
/* --animation-duration: 0.5s; */
animation-timing-function: linear;
}
.cal-entry:not(.past).confirmed.newmoon.animated h2{
@ -170,11 +166,104 @@ h2.phase-name {
}
@keyframes newmoon {
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; }
}
@keyframes fullmoon {
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; }
}
/* 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 > .top-header{
background: var(--c-dark);
background: var(--clr-header);
height: calc(var(--lh) * 1);
display: flex;
@ -30,18 +30,15 @@ nav.lang-menu ul{
line-height: var(--lh);
/* theme 1 */
color: var(--c-soft);
/* theme 2 */
/* background: var(--c-soft);
color: var(--c-dark); */
/* background: var(--clr-soft);
color: var(--clr-text); */
}
nav.lang-menu a{
color: currentColor;
color: rgba(255,255,255,0.5);
text-decoration: none;
}
nav.lang-menu li.active{
nav.lang-menu li.active a{
color: white;
}
@ -55,7 +52,7 @@ nav.lang-menu #lang__fr{
nav.lang-menu #lang__nl{
order: 3;
}
nav.lang-menu #lang__sp{
nav.lang-menu #lang__es{
order: 4;
}
@ -66,17 +63,19 @@ nav.nav-menu ul{
display: flex;
align-items: stretch;
border-top: var(--border);
border-bottom: var(--border);
border-color: var(--clr-header);
box-sizing: border-box;
/* theme 1 */
background: var(--c-soft);
background: var(--clr-soft);
/* theme 2 */
/* border-top: var(--border);
background: var(--c-dark);
border-color: var(--c-soft);
color: var(--c-soft); */
background: var(--clr-text);
border-color: var(--clr-soft);
color: var(--clr-soft); */
}
nav.nav-menu li{
flex: 1 0 0%;
@ -84,18 +83,19 @@ nav.nav-menu li{
max-width: 16rem;
position: relative;
border-right: var(--border);
border-color: var(--clr-header);
/* theme 1 */
/* background: var(--c-light); */
/* background: var(--clr-back); */
/* theme 2 */
/* border-color: var(--c-soft); */
/* border-color: var(--clr-soft); */
}
nav.nav-menu li:first-child{
/* border-left: var(--border); */
/* theme 2 */
/* border-color: var(--c-soft); */
/* border-color: var(--clr-soft); */
}
nav.nav-menu a{
@ -123,11 +123,11 @@ nav.nav-menu li.active a{
}
nav.nav-menu li.active{
/* theme 1 */
background: white;
/* theme 2 */
/* color: white; */
}
.night nav.nav-menu li.active{
background: white;
color: var(--clr-back);
}
/* order */

@ -2,6 +2,7 @@
/* we have fixed element but the only scroll is on the body,
so scrolling anywhere on the page works */
body > header{
position: sticky;
top: 0;
@ -9,68 +10,75 @@ body > header{
}
body > section.grid-display{
display: grid;
grid-template-columns: 1fr 40%;
grid-template-columns: 40% 60%;
position: relative;
}
body > section.grid-display > *{
padding: var(--lh);
padding-top: calc(var(--lh) * 1);
box-sizing: border-box;
}
aside.moon-watch{
position: fixed;
top: calc(var(--lh) * 3); /* the height of the header */
right: 0;
/* half minus half of the grid-gap */
width: 40%;
box-sizing: border-box;
body > section.grid-display > .column-fixed > *{
position: sticky;
top: calc(var(--lh) * 4);
}
body > section.grid-display::before{
/* content: ""; */
position: fixed;
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;
body.all-typo > section.grid-display{
grid-template-columns: 1fr !important;
}
.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 */
:root{
--fs-display: clamp(3rem, 16vw, 6rem);
}
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;
padding-top: calc(var(--lh) * 1);
padding-bottom: 0;
}
section.grid-display > main{
padding-top: calc(var(--lh) * 1);
/* padding-bottom: 0; */
body.calendar #about-section{
order: 1;
}
body > section.grid-display > *{
padding-left: calc(var(--lh) * 0.5);
padding-right: calc(var(--lh) * 0.5);
body.calendar #calendar-section{
order: 2;
}
}
/* gallery */
body:not(.gallery) section.grid-display > main{
order: 1;
padding-top: 0;
/* mobile */
@media only screen and (max-width: 680px) {
/* one column when smaller */
: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{
/* --- 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 --- */
--fs-display: clamp(3rem, 8vw, 7rem);
--fs-display: clamp(3rem, 6vw, 7rem);
/* --fs-big: 2.35rem; */
--fs-big: 2.4rem;
--fs-up: 1.35rem;
--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.75rem; */
--fvs-mono: 'wght' 420, 'wdth' 140;
--fvs-mono: 'wght' 360, 'wdth' 140;
--lh: 1.35rem;
/* --- SPACES --- */
/* --border-width: 0.08rem; */
--border-width: 1.5px;
--border: var(--border-width) solid var(--c-dark);
}
html{
background: var(--c-light);
/* background: linear-gradient(to bottom, var(--c-light), hsl(34, 44%, 82%)); */
color: var(--c-dark);
font-family: "unoversoneueGX";
/* bigger than default (16px --> 20px) */
font-size: 1.25em;
@ -65,12 +25,54 @@ html{
body{
font-size: inherit;
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 */
a,
a:visited{
color: currentColor;
/* color: yellowgreen; */
/* text-decoration-thickness: var(--border-width); */
text-decoration-thickness: 1px;
}
@ -81,7 +83,19 @@ a:visited{
/* selection */
*::selection{
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
@ -152,28 +166,33 @@ section.data-section{
border-top: var(--border);
padding: calc(var(--lh) * 2) 0 calc(var(--lh) * 3);
}
section.data-section::before{
section.data-section::after{
font-family: 'Inconsolata', monospace;
/* font-variation-settings: 'wght' 460, 'wdth' 150; */
font-variation-settings: var(--fvs-mono);
font-size: var(--fs-mono);
letter-spacing: 0.04em;
text-transform: uppercase;
}
section.data-section::before {
content: attr(data-box-title);
background: var(--c-dark);
color: var(--c-light);
background: var(--clr-text);
color: var(--clr-back);
position: absolute;
top: calc(-1 * var(--border-width));
left: 0;
padding: 0.2em calc(var(--lh) / 2);
display: flex;
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;
}
section > a:first-of-type{
display: block;
margin-top: -200px;
height: 200px;
}
/* INTRO TEXT
=========================================================================== */
@ -192,36 +211,35 @@ section.data-section::before {
=========================================================================== */
body > footer{
background: var(--c-soft);
background: var(--clr-soft);
font-size: 0.625rem !important;
border-top: var(--border);
/* text-align: right; */
border-color: var(--clr-header);
display: grid;
grid-template-columns: 1fr 1fr;
}
body > footer > .additionnal-info{
border-right: var(--border);
color: var(--c-soft-text);
}
body > footer > *{
padding: var(--lh);
}
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 920px) {
body > footer{
grid-template-columns: 1fr;
}
body > footer > .additionnal-info{
border-right: none;
border-bottom: var(--border);
body > footer > p:not(:last-of-type){
padding-bottom: 0;
}
}
/* RESPONSIVENESS
/* RESPONSIVE
=========================================================================== */
@media only screen and (max-width: 600px) {
/* mobile */
@media only screen and (max-width: 680px) {
:root{
--fs-big: 2rem;
}
html{
font-size: 1.125em;
}

@ -1,28 +1,53 @@
:root {
--animation-duration: 2s;
}
#moon-watch-section{
/* padding-top: calc(var(--lh) * 1.5); */
padding-bottom: calc(var(--lh) * 1);
}
.watch__date{
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;
font-size: var(--fs-display);
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);
/* 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));
-webkit-background-clip: text;
-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 {
@ -35,61 +60,80 @@
}
/* ------------- old */
/* MOON WATCH
/* SVG SCHEME
============================================================================ */
/* svg scheme */
.flex-scheme-info-wrapper {
.watch__scheme{
display: flex;
justify-content: center;
position: relative;
}
.flex-scheme-info-wrapper .api-info-wrapper {
display: block;
flex-grow: 1;
}
#current-phase-scheme {
position: absolute;
bottom: 0;
right: 0;
}
#current-phase-scheme .scheme-sun{
text-align: center;
.watch__scheme svg{
height: 200px;
width: 100%;
max-width: 500px;
}
#current-phase-scheme svg {
overflow: hidden;
width: 200px;
height: 150px;
.watch__scheme::after{
content: "↓ sunlights";
position: absolute;
left: calc(50% + 1em);
top: 0;
}
svg text {
font-family: "Symbola";
.watch__scheme svg circle{
vector-effect: non-scaling-stroke;
}
circle {
.watch__scheme svg line{
vector-effect: non-scaling-stroke;
stroke: var(--clr-text);
}
circle.svg-moon-trajectory,
circle.svg-earth-trajectory {
stroke: var(--c-dark);
stroke: var(--clr-soft-text);
stroke-width: var(--border-width);
stroke-dasharray: 4;
fill: none;
}
circle.svg-moon,
circle.svg-earth,
path.svg-sun {
fill: var(--c-dark);
circle.svg-earth{
fill: var(--clr-text);
}
.stop-light{
stop-color: white;
}
.stop-dark{
stop-color: var(--clr-text);
}
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
// 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 month_to_get = now;
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
// ==========================================================================
@ -102,19 +86,7 @@ function addDateToCalendar(date, moon){
// let illumination = (moon_calc["illumination"]*100).toFixed(2);
// --- 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 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());
let walk_sunset = getSunStateFromDate(date, lat, long, timezone)[1];
// --- formating the info
let phase_name = moon.phaseName;
@ -133,24 +105,13 @@ function addDateToCalendar(date, moon){
// let time_id = date.toUnixInteger();
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
$cal_entry.attr("id", time_id);
// --- PHASENAME
$cal_entry.find(".phase-name").html(phase_name);
// --- EVENT
$cal_entry.find(".cal-entry__date .day").html(formated_date['day']);
$cal_entry.find(".cal-entry__date .date").html(formated_date['date']);
$cal_entry.find(".day").html(formated_date['day']);
$cal_entry.find(".date").html(formated_date['date']);
// --- SECONDARY INFO ---
$cal_entry.find(".sunset-time").html(walk_sunset_time['time']);
@ -166,28 +127,44 @@ function addDateToCalendar(date, moon){
// --- add the class
$cal_entry.addClass("confirmed");
$cal_entry.find(".cal-entry__reservation a .not-confirmed").remove();
$cal_entry.find(".reservation .not-confirmed").remove();
// --- fill infos
$cal_entry.find(".cal-entry__description .start-time").html(walk_entry.start_time);
$cal_entry.find(".cal-entry__description .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-time").html(walk_entry.start_time);
$cal_entry.find(".start-location a").html(walk_entry.start_location);
$cal_entry.find(".start-location a").attr("href", walk_entry.start_location_link);
// --- mail subject
// only added if event has an entry in yaml AND not a past event
if(date > now){
let mail_subject = $cal_entry.find(".cal-entry__reservation a").attr("data-mail-subject");
mail_subject = mail_subject.replace("$", phase_name) + " " + formated_date['date'];
let uri = "mailto:" + contact_mail + "?subject=";
uri += encodeURIComponent(mail_subject);
$cal_entry.find(".cal-entry__reservation a").attr("href", uri);
}
let mail_subject = $cal_entry.find(".reservation a").attr("data-mail-subject");
mail_subject = mail_subject.replace("$", phase_name) + " " + formated_date['date'];
let uri = "mailto:" + contact_mail + "?subject=";
uri += encodeURIComponent(mail_subject);
$cal_entry.find(".reservation a").attr("href", uri);
}
else{
$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
$cal_entry.on( "click", function() {
let yaml_entry = '#'+ phase_name + " walk on the " + formated_date['date']
@ -365,7 +342,6 @@ function createCalendar(months_ahead){
year : new_month.getFullYear()
}
console.log("doing request", config_month.month + " " + config_month.year + " in " + lang);
requestMonthMoonPhases(config_month, processQueue);
@ -377,8 +353,6 @@ function createCalendar(months_ahead){
$(document).ready(function(){
window.current_local = getLocalFromURL();
createCalendar(months_ahead);
writeTimezone();

@ -7,32 +7,79 @@
//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)
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;',
},
{ 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;',
},
{ 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;',
},
{ 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;',
},
{ 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;',
},
{ 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;',
},
{ 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;',
},
{ 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;',
}
]
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
// ============================================================================
@ -110,7 +157,7 @@ function getMoonDataFromPhase(phase){
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
let mooncalc_illumination = SunCalc.getMoonIllumination(date);
let moon = getMoonDataFromPhase(mooncalc_illumination.phase);
@ -118,12 +165,36 @@ function getMoonStateFromDate(date, latitude=0, longitude=0){
moon['phase'] = mooncalc_illumination.phase;
/* 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;
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
// ============================================================================
@ -166,4 +237,10 @@ function updateAxis($element, value, secondAxis=true){
let axis_2 = '"slnt" ' + mapValue(x, -1, 1, -100, 100);
let settings = secondAxis ? axis_1 + ", " + axis_2 : axis_1;
$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
// ==========================================================================
@ -16,9 +9,13 @@ function updateCurrentMoonWatch(date){
let long = window.walk_calendar["longitude"];
let moon = getMoonStateFromDate(date, lat, long);
let phase_name = moon["name"].split(" ").join(" <br>");
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
// let distance = moon["distance"];
// let sun_calc = SunCalc.getTimes(date, lat, long);
@ -30,16 +27,63 @@ function updateCurrentMoonWatch(date){
$watch.find('.date').html(formated_date['date']);
// scheme position
// let [cx, cy] = getCircle(moon["phase"]);
// cx = mapValue(cx,-1,1,50,-50);
// 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);
let angle = mapValue(moon["phase"], 0, 1, 0, 360);
$(".watch__scheme .svg-moon").css("--moon-rotation", angle + "deg");
// change the font
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){
let lat = window.walk_calendar["latitude"];
let long = window.walk_calendar["longitude"];
@ -49,3 +93,23 @@ function updateCurrentMoonTypo(date){
updateAxis($(".moon-phased-typo > *:not(p)"), 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,47 +8,55 @@
<link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/article.css" />
{% 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 }}">
<nav class="nav-projects mono">
<ul>
{# ---> list all the 'projects' article in the current language #}
{% for art in articles %}
{% if art.category == 'projects' %}
{% if current_lang == DEFAULT_LANG %}
<li {% if art == article %} class="active" {% endif %}>
<a href="{{ art.url }}">{{ art.title }}</a>
</li>
{% else %}
{% for translation in art.translations %}
{% if translation.lang == current_lang %}
<li {% if translation == article %} class="active" {% endif %}>
<a href="{{ translation.url }}" hreflang="{{ translation.lang }}">{{ translation.title }}</a>
</li>
{% endif %}
{% endfor %}
<a name="topp"></a>
<nav class="nav-projects mono">
<ul>
{# ---> list all the 'projects' article in the current language #}
{% for art in articles %}
{% if art.category == 'projects' %}
{% if current_lang == DEFAULT_LANG %}
<li {% if art == article %} class="active" {% endif %}>
<a href="{{ art.url }}#topp">{{ art.title }}</a>
</li>
{% else %}
{% for translation in art.translations %}
{% if translation.lang == current_lang %}
<li {% if translation == article %} class="active" {% endif %}>
<a href="{{ translation.url }}#topp" hreflang="{{ translation.lang }}">{{ translation.title }}</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
</ul>
</nav>
</section>
<section id="{{ article.title }}-section" class="data-section" data-box-title="{{ article.title }}">
<div class="text-content moon-phased-typo">
{{ article.content }}
</div>
</section>
{% if article.quotes %}
<section id="{{ article.title }}-quotes-section" class="data-section" data-box-title="{{ multilang.quotes }}">
<div class="text-content article-quotes">
{{ article.quotes }}
{% endfor %}
</ul>
</nav>
</section>
<section id="{{ article.title }}-section" class="data-section" data-box-title="{{ article.title }}">
<div class="text-content moon-phased-typo">
{{ article.content }}
</div>
</section>
{% endif %}
{% if article.quotes %}
<section id="{{ article.title }}-quotes-section" class="data-section" data-box-title="{{ multilang.quotes }}">
<div class="text-content article-quotes">
{{ article.quotes }}
</div>
</section>
{% endif %}
{% endblock %}

@ -32,19 +32,32 @@
<section class="grid-display">
<main class="">
{% block content %}
<div class="column-fixed">
{% block fixed_content %}
{% endblock %}
</main>
</div>
<aside class="moon-watch">
{% include 'partials/moon-watch.html' %}
</aside>
<div class="column-scroll">
{% block scroll_content %}
{% endblock %}
</div>
</section>
<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>
{% block js_body %}
@ -56,13 +69,9 @@
</script>
<script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/moon-utilities.js"></script>
<script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/moon-watch.js"></script>
<script>
window.setInterval(function(){
// now.setHours(now.getHours() + 2);
updateCurrentMoonWatch(now);
updateCurrentMoonTypo(now);
}, 100);
</script>
<!-- <script>
printAllMoonphases();
</script> -->
{% endblock %}
</body>

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

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

@ -21,50 +21,49 @@
<div class="cal-entry">
<section class="cal-entry__prime">
<time class="cal-entry__date" datetime="">
<div class="day font-up"></div>
<div class="date mono-big">
</div>
</time>
<time class="cal-entry__date" datetime="">
<div class="day font-up"></div>
<div class="date mono-big">
</div>
</time>
<div class="cal-entry__moon">
<div class="moon-drawing"></div>
</div>
<div class="cal-entry__moon">
<div class="moon-drawing"></div>
</div>
<div class="cal-entry__phase">
<h2 class="phase-name font-big"></h2>
</div>
<div class="cal-entry__phase">
<h2 class="phase-name font-big"></h2>
</div>
<div class="cal-entry__reservation">
<div class="reservation font-up">
<div class="cal-entry__reservation">
<div class="reservation">
<span class="picto mono-big">&rarr;</span>
<a class="font-up" data-mail-subject="{{ page.multilang.mailsubject }}">
<span class="signup">{{ page.multilang.signup }}</span>
<span class="not-confirmed">{{ page.multilang.notconfirmed }}</span>
</a>
</div>
</div>
<a class="signup" data-mail-subject="{{ page.multilang.mailsubject }}">
{# <span class="picto mono-big">&rarr;</span> #}
{{ page.multilang.signup }}
</a>
<span class="not-confirmed">{{ page.multilang.notconfirmed }}</span>
</section>
<span class="past">{{ page.multilang.past }}</span>
<section class="cal-entry__second">
<div class="cal-entry__description">
{{ page.multilang.start }}
<time class="start-time" datetime=""></time>,
<span class="start-location"><a target="_blank"></a></span>
</div>
</section>
</div>
<div class="cal-entry__description">
{{ page.multilang.start }}
<time class="start-time" datetime=""></time>,
<span class="start-location"><a target="_blank"></a></span>
</div>
<section class="cal-entry__tertary mono">
<div class="cal-entry__sunset">
<div class="cal-entry__data mono">
<div>
{{ page.multilang.sunsetat }} <span class="sunset-time"></span>
</div>
<div class="cal-entry__moon-time">
<div>
{{ page.multilang.moonat }} <span class="moon-time"></span>
</div>
</section>
</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 }}">
<div class="watch__date mono" datetime="">
<!-- <div class="watch__date mono" datetime="">
Today is the <span class="date"></span> and the moon is in:
</div>
</div> -->
<div class="watch__phase">
<h2 class="phase-name"
@ -11,27 +11,30 @@
</h2>
</div>
<div class="watch__scheme mono">
<svg viewBox="-100 -75 200 150" preserveAspectRatio="xMidYMid meet">
</section>
<!-- <div class="api-info-wrapper mono">
</div> -->
<!-- <div class="api-info-wrapper mono">
<div class="illumination">illumination <span></span>%</div>
<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> -->
<defs>
<linearGradient id="moon-light-gradient" x1="0" x2="0" y1="0" y2="1">
<stop class="stop-light" offset="0%"/>
<stop class="stop-light" offset="50%"/>
<stop class="stop-dark" offset="50%"/>
<stop class="stop-dark" offset="100%"/>
</linearGradient>
</defs>
<!-- <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" cx="0" cy="-50" r="5"/>
<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"/>
</g>
</svg>
</div> -->
</div>
</section>

@ -48,45 +48,41 @@
<nav class="nav-menu">
<ul>
{% for title, link in MENUITEMS %}
<li id="nav__{{ title }}" {% if output_file in link %} class="active" {% endif %}>
<a href="{{ link }}"><span>{{ title }}</span></a>
{% for cat, arts in categories %}
<li id="nav__{{ cat }}" {% if category and cat == category %} class="active" {% endif %}>
{% if current_lang == DEFAULT_LANG %}
{# take the last dated article #}
<a href="{{ arts[0].url }}"><span>{{ multilang[cat] }}</span></a>
{% else %}
{% for translation in arts[0].translations %}
{% if translation.lang == current_lang %}
<a href="{{ translation.url }}">
<span>{{ multilang[cat] }}</span>
</a>
{% endif %}
{% endfor %}
{% 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 %}
{# take the last dated article #}
<a href="{{ arts[0].url }}"><span>{{ multilang[cat] }}</span></a>
{% else %}
{% for translation in arts[0].translations %}
{% if translation.lang == current_lang %}
<a href="{{ translation.url }}">
<span>{{ multilang[cat] }}</span>
</a>
{% endif %}
{% endfor %}
{% endif %}
</li>
{% endif %}
{% endfor %}
{% for p in pages %} {# the individual pages #}
{% if current_lang == DEFAULT_LANG %}
<li id="nav__{{ p.slug }}" {% if p == page %} class="active"{% endif %}>
{% 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 %}
<a href="{{ p.url }}"><span>{{ p.title }}</span></a>
</li>
{% else %}
{% for translation in p.translations %}
{% if translation.lang == current_lang %}
<li id="nav__{{ translation.slug }}" {% if translation == page %} class="active"{% endif %}>
{% else %}
{% for translation in p.translations %}
{% if translation.lang == current_lang %}
<a href="{{ translation.url }}">
<span>{{ translation.title }}</span>
</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
</nav>

Loading…
Cancel
Save