From 420e27fcedd91cb1553629cb420974367602359e Mon Sep 17 00:00:00 2001 From: Dorian Date: Wed, 23 Mar 2022 17:42:31 +0100 Subject: [PATCH] update --- __pycache__/pelicanconf.cpython-38.pyc | Bin 1732 -> 1743 bytes content/calendar/calendar.yaml | 10 +- content/global_multilang.json | 6 +- content/pages/footer.md | 11 + content/pages/footer_es.md | 9 + content/pages/footer_fr.md | 9 + content/pages/footer_nl.md | 9 + .../pages/{gallery_sp.md => gallery_es.md} | 2 +- content/pages/{index_sp.md => index_es.md} | 2 +- content/pages/index_multilang.json | 28 ++- ...ual-walks_sp.md => individual-walks_es.md} | 2 +- .../{moonwalks_sp.md => moonwalks_es.md} | 2 +- ...ure-theatre_sp.md => nature-theatre_es.md} | 2 +- pelicanconf.py | 2 +- theme/static/css/article.css | 3 +- theme/static/css/calendar.css | 207 +++++++++++++----- theme/static/css/header.css | 40 ++-- theme/static/css/layout.css | 86 ++++---- theme/static/css/main.css | 142 ++++++------ theme/static/css/moon-watch.css | 126 +++++++---- theme/static/js/moon-calendar.js | 102 ++++----- theme/static/js/moon-utilities.js | 97 +++++++- theme/static/js/moon-watch.js | 90 ++++++-- theme/templates/alltypo.html | 9 + theme/templates/article.html | 82 +++---- theme/templates/base.html | 37 ++-- theme/templates/gallery.html | 4 +- theme/templates/index.html | 9 +- theme/templates/partials/calendar.html | 65 +++--- theme/templates/partials/footer.html | 22 -- theme/templates/partials/moon-watch.html | 43 ++-- theme/templates/partials/nav-menu.html | 60 +++-- 32 files changed, 821 insertions(+), 497 deletions(-) create mode 100644 content/pages/footer.md create mode 100644 content/pages/footer_es.md create mode 100644 content/pages/footer_fr.md create mode 100644 content/pages/footer_nl.md rename content/pages/{gallery_sp.md => gallery_es.md} (84%) rename content/pages/{index_sp.md => index_es.md} (98%) rename content/projects/{individual-walks_sp.md => individual-walks_es.md} (99%) rename content/projects/{moonwalks_sp.md => moonwalks_es.md} (99%) rename content/projects/{nature-theatre_sp.md => nature-theatre_es.md} (99%) create mode 100644 theme/templates/alltypo.html delete mode 100644 theme/templates/partials/footer.html diff --git a/__pycache__/pelicanconf.cpython-38.pyc b/__pycache__/pelicanconf.cpython-38.pyc index 04fba3c0754f14f05be808ad0e71786f3cbbeced..6f24a8509387c619415a99fafea67f6371974f3b 100644 GIT binary patch delta 144 zcmX@Yd!Cm!l$V!_0SMR_t&+Y^K zrI;carIaEClu=HRP64V(kxh|HXN^)xk&jXZ@)S}OQ *: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 %} +
- {% 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 %}
{% 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 @@