diff --git a/__pycache__/pelicanconf.cpython-38.pyc b/__pycache__/pelicanconf.cpython-38.pyc index 04fba3c..6f24a85 100644 Binary files a/__pycache__/pelicanconf.cpython-38.pyc and b/__pycache__/pelicanconf.cpython-38.pyc differ diff --git a/content/calendar/calendar.yaml b/content/calendar/calendar.yaml index f4fdbec..1f8acac 100644 --- a/content/calendar/calendar.yaml +++ b/content/calendar/calendar.yaml @@ -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" \ No newline at end of file + # 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" \ No newline at end of file diff --git a/content/global_multilang.json b/content/global_multilang.json index 293c4da..45d32f7 100644 --- a/content/global_multilang.json +++ b/content/global_multilang.json @@ -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" } } diff --git a/content/pages/footer.md b/content/pages/footer.md new file mode 100644 index 0000000..ddcbd7c --- /dev/null +++ b/content/pages/footer.md @@ -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) \ No newline at end of file diff --git a/content/pages/footer_es.md b/content/pages/footer_es.md new file mode 100644 index 0000000..331ca78 --- /dev/null +++ b/content/pages/footer_es.md @@ -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). \ No newline at end of file diff --git a/content/pages/footer_fr.md b/content/pages/footer_fr.md new file mode 100644 index 0000000..4ac2faf --- /dev/null +++ b/content/pages/footer_fr.md @@ -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). \ No newline at end of file diff --git a/content/pages/footer_nl.md b/content/pages/footer_nl.md new file mode 100644 index 0000000..37c67d4 --- /dev/null +++ b/content/pages/footer_nl.md @@ -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). \ No newline at end of file diff --git a/content/pages/gallery_sp.md b/content/pages/gallery_es.md similarity index 84% rename from content/pages/gallery_sp.md rename to content/pages/gallery_es.md index b7a84b8..d366cc8 100644 --- a/content/pages/gallery_sp.md +++ b/content/pages/gallery_es.md @@ -1,4 +1,4 @@ Title: Galería template: gallery slug: gallery -lang: sp +lang: es diff --git a/content/pages/index_sp.md b/content/pages/index_es.md similarity index 98% rename from content/pages/index_sp.md rename to content/pages/index_es.md index 95f3f83..493e1a4 100644 --- a/content/pages/index_sp.md +++ b/content/pages/index_es.md @@ -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. diff --git a/content/pages/index_multilang.json b/content/pages/index_multilang.json index 20c822e..a2bbcdf 100644 --- a/content/pages/index_multilang.json +++ b/content/pages/index_multilang.json @@ -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" } } diff --git a/content/projects/individual-walks_sp.md b/content/projects/individual-walks_es.md similarity index 99% rename from content/projects/individual-walks_sp.md rename to content/projects/individual-walks_es.md index b267713..8a515d0 100644 --- a/content/projects/individual-walks_sp.md +++ b/content/projects/individual-walks_es.md @@ -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. diff --git a/content/projects/moonwalks_sp.md b/content/projects/moonwalks_es.md similarity index 99% rename from content/projects/moonwalks_sp.md rename to content/projects/moonwalks_es.md index f9e0bdd..5ef265e 100644 --- a/content/projects/moonwalks_sp.md +++ b/content/projects/moonwalks_es.md @@ -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. diff --git a/content/projects/nature-theatre_sp.md b/content/projects/nature-theatre_es.md similarity index 99% rename from content/projects/nature-theatre_sp.md rename to content/projects/nature-theatre_es.md index 96bc02c..3a55e6c 100644 --- a/content/projects/nature-theatre_sp.md +++ b/content/projects/nature-theatre_es.md @@ -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. diff --git a/pelicanconf.py b/pelicanconf.py index 89cc58c..d500f61 100644 --- a/pelicanconf.py +++ b/pelicanconf.py @@ -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'] diff --git a/theme/static/css/article.css b/theme/static/css/article.css index 7a32eee..b290d3b 100644 --- a/theme/static/css/article.css +++ b/theme/static/css/article.css @@ -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); diff --git a/theme/static/css/calendar.css b/theme/static/css/calendar.css index f5ecd9a..ee7e2f3 100644 --- a/theme/static/css/calendar.css +++ b/theme/static/css/calendar.css @@ -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; + } +} \ No newline at end of file diff --git a/theme/static/css/header.css b/theme/static/css/header.css index 71cdf8b..d2a1b6f 100644 --- a/theme/static/css/header.css +++ b/theme/static/css/header.css @@ -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 */ diff --git a/theme/static/css/layout.css b/theme/static/css/layout.css index 8d872fd..ac9f8f2 100644 --- a/theme/static/css/layout.css +++ b/theme/static/css/layout.css @@ -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; } - section.grid-display > aside.moon-watch{ - position: static; - width: auto; + /* remove sticky */ + body > section.grid-display > .column-fixed > *{ + position: relative; + top: 0; + } + + /* 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); + } +} \ No newline at end of file diff --git a/theme/static/css/main.css b/theme/static/css/main.css index cba7baa..d14d738 100644 --- a/theme/static/css/main.css +++ b/theme/static/css/main.css @@ -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; } diff --git a/theme/static/css/moon-watch.css b/theme/static/css/moon-watch.css index 9ed81af..fe62a78 100644 --- a/theme/static/css/moon-watch.css +++ b/theme/static/css/moon-watch.css @@ -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; + } +} \ No newline at end of file diff --git a/theme/static/js/moon-calendar.js b/theme/static/js/moon-calendar.js index ba1a46a..2f912fb 100644 --- a/theme/static/js/moon-calendar.js +++ b/theme/static/js/moon-calendar.js @@ -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,27 +127,43 @@ 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() { @@ -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(); diff --git a/theme/static/js/moon-utilities.js b/theme/static/js/moon-utilities.js index 1b13ebb..2710d75 100644 --- a/theme/static/js/moon-utilities.js +++ b/theme/static/js/moon-utilities.js @@ -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: '🌑', }, - { 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: '🌒', }, - { 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: '🌓', }, - { 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: '🌔', }, - { 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: '🌕', }, - { 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: '🌖', }, - { 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: '🌗', }, - { 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: '🌘', } ] +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(); +}); \ No newline at end of file diff --git a/theme/static/js/moon-watch.js b/theme/static/js/moon-watch.js index eab47a0..a0fe2b4 100644 --- a/theme/static/js/moon-watch.js +++ b/theme/static/js/moon-watch.js @@ -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,8 +9,12 @@ function updateCurrentMoonWatch(date){ let long = window.walk_calendar["longitude"]; let moon = getMoonStateFromDate(date, lat, long); - let phase_name = moon["name"].split(" ").join("
"); 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("
"); + // sunset // let distance = moon["distance"]; @@ -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 = $('

').html(phase_name); + updateAxis(title, phase_number, true); + $(".all-phases").append(title); + + phase_number = phase_number + 0.125; + } + $(".all-phases").append( + $('
') + ); + } +} + +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); + +}); diff --git a/theme/templates/alltypo.html b/theme/templates/alltypo.html new file mode 100644 index 0000000..9a192f7 --- /dev/null +++ b/theme/templates/alltypo.html @@ -0,0 +1,9 @@ +{% extends "base.html" %} + +{% block body_class %}all-typo {% endblock %} + +{% block fixed_content %} +
+ +
+{% endblock %} diff --git a/theme/templates/article.html b/theme/templates/article.html index dbbd0a5..e01d5c8 100644 --- a/theme/templates/article.html +++ b/theme/templates/article.html @@ -8,47 +8,55 @@ {% 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 %}
-
- -
-
- {{ article.content }} -
-
- -{% if article.quotes %} -
-
- {{ article.quotes }} + {% endfor %} + + +
+ +
+
+ {{ article.content }}
-{% endif %} -{% endblock %} + {% if article.quotes %} +
+
+ {{ article.quotes }} +
+
+ {% endif %} + +{% endblock %} \ No newline at end of file diff --git a/theme/templates/base.html b/theme/templates/base.html index a3b3eb6..e15a8f6 100644 --- a/theme/templates/base.html +++ b/theme/templates/base.html @@ -32,19 +32,32 @@
-
- {% block content %} +
+ {% block fixed_content %} {% endblock %} -
+ - +
+ {% block scroll_content %} + {% endblock %} +
{% block js_body %} @@ -56,13 +69,9 @@ - + {% endblock %} diff --git a/theme/templates/gallery.html b/theme/templates/gallery.html index 2cacc3b..bcc2aec 100644 --- a/theme/templates/gallery.html +++ b/theme/templates/gallery.html @@ -10,7 +10,7 @@ {% block body_class %}gallery{% endblock %} -{% block content %} +{% block fixed_content %}
{% for img in GALLERY %}
@@ -19,4 +19,4 @@
{% endfor %}
-{% endblock content %} +{% endblock %} diff --git a/theme/templates/index.html b/theme/templates/index.html index 6246373..f44a328 100644 --- a/theme/templates/index.html +++ b/theme/templates/index.html @@ -10,7 +10,7 @@ {% block body_class %}calendar{% endblock %} -{% block content %} +{% block fixed_content %}
@@ -20,11 +20,16 @@ {{ page.bio }}
+ +{% endblock %} + +{% block scroll_content %} + + {% include 'partials/moon-watch.html' %}
{% include 'partials/calendar.html' %}
- {% endblock %} {% block js_body %} diff --git a/theme/templates/partials/calendar.html b/theme/templates/partials/calendar.html index 7c372d4..bc58266 100644 --- a/theme/templates/partials/calendar.html +++ b/theme/templates/partials/calendar.html @@ -21,50 +21,49 @@
-
+ - +
+
+
-
-
-
+
+

+
-
-

-
+
+
-
-
- → - - - {{ page.multilang.notconfirmed }} - -
-
+ -
+ {{ page.multilang.notconfirmed }} + + {{ page.multilang.past }} -
-
- {{ page.multilang.start }} - , -
-
- -
-
+
+ +
+ {{ page.multilang.start }} + , + +
+ +
+
{{ page.multilang.sunsetat }}
-
+
{{ page.multilang.moonat }}
-
+
diff --git a/theme/templates/partials/footer.html b/theme/templates/partials/footer.html deleted file mode 100644 index bf8cd43..0000000 --- a/theme/templates/partials/footer.html +++ /dev/null @@ -1,22 +0,0 @@ - - -
-

- 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 by Oxomoto, and Inconsolata Variable by Raph Levien. -

-

- All texts and images are published under de CC4R license, Anaïs Berck, 2022. -

-

- Website design and development by Doriane Timmermans (OSP) -

-
\ No newline at end of file diff --git a/theme/templates/partials/moon-watch.html b/theme/templates/partials/moon-watch.html index 257b8b4..7cf2e0b 100644 --- a/theme/templates/partials/moon-watch.html +++ b/theme/templates/partials/moon-watch.html @@ -1,9 +1,9 @@
-
+

+
+ -
- - - - - + + + + + + + + - + + + diff --git a/theme/templates/partials/nav-menu.html b/theme/templates/partials/nav-menu.html index 2b1541c..5777300 100644 --- a/theme/templates/partials/nav-menu.html +++ b/theme/templates/partials/nav-menu.html @@ -48,45 +48,41 @@