From a2ebcf60e408df8c3b83c1feb3f884c2d3464122 Mon Sep 17 00:00:00 2001 From: Dorian Date: Thu, 19 May 2022 23:12:26 +0200 Subject: [PATCH] flyer v2 + correct night colors --- content/flyer/flyer.md | 6 +- theme/static/css/flyer.css | 372 ++++++++++++++-------- theme/static/css/main.css | 6 +- theme/static/css/old/calendar_old.css | 282 ---------------- theme/static/js/moon-calendar.js | 101 ++++-- theme/static/js/tools/css-grid-drawing.js | 261 --------------- theme/templates/flyer.html | 188 ++++++----- theme/templates/index.html | 32 +- 8 files changed, 456 insertions(+), 792 deletions(-) delete mode 100644 theme/static/css/old/calendar_old.css delete mode 100644 theme/static/js/tools/css-grid-drawing.js diff --git a/content/flyer/flyer.md b/content/flyer/flyer.md index 45adf2a..4612762 100644 --- a/content/flyer/flyer.md +++ b/content/flyer/flyer.md @@ -6,18 +6,18 @@ status: hidden Walking when all the colours have disappeared from the forest is a special experience. -You tune in to other senses. You discover silence, but you also notice movements and sounds that are absent during the day.
+You tune in to other senses. You discover silence, but you also notice movements and sounds that are absent during the day. Moreover, when you walk during the most intense and important moments of the lunar cycle, you can transform your intentions. That is what these walks invite you to do. Se promener lorsque toutes les couleurs ont disparu de la forêt est une expérience particulière. -Vous êtes à l'écoute d’autres sens. Vous découvrez le silence, mais vous remarquez aussi des mouvements et des sons qui sont absents pendant la journée.
+Vous êtes à l'écoute d’autres sens. Vous découvrez le silence, mais vous remarquez aussi des mouvements et des sons qui sont absents pendant la journée. De plus, lorsque vous marchez pendant les moments les plus intenses et les plus importants du cycle lunaire, vous pouvez transformer vos intentions. C'est à cela que vous invitent ces marches. Wandelen wanneer alle kleurtjes uit het bos verdwenen zijn, is een bijzondere ervaring. -Je stelt in op andere zintuigen. Je ontdekt de stilte, maar je merkt ook bewegingen en geluiden op die overdag afwezig zijn.
+Je stelt in op andere zintuigen. Je ontdekt de stilte, maar je merkt ook bewegingen en geluiden op die overdag afwezig zijn. Wanneer je bovendien wandelt tijdens de meest intense en belangrijke momenten van de maancyclus, kan je je intenties transformeren. Dat is waartoe deze wandelingen je uitnodigen. \ No newline at end of file diff --git a/theme/static/css/flyer.css b/theme/static/css/flyer.css index 8a83458..0041790 100644 --- a/theme/static/css/flyer.css +++ b/theme/static/css/flyer.css @@ -2,6 +2,7 @@ /* RESET ===================================================== */ + body{ background: white; color: black; @@ -24,21 +25,21 @@ body > section.grid-display { max-width: none; } +a, a:visited { + color: currentColor; + text-decoration-thickness: 0.04em; +} + /* VARIABLES ===================================================== */ -:root{ - /* big -> bigger but mono big stay the same */ - --fs-big: 5rem; - --fs-mono-big: 2.4rem; - +:root{ /* reduce a bit the lh for print */ --lh: 1.3rem; - - /* 3 lang paysage */ + --fs-big: 5rem; - - /* 3 langs paysage */ + /* --fs-big: 4.6rem; */ + --fs-mono-big: 2.4rem; --fs-main: 11pt; /* @@ -47,15 +48,42 @@ body > section.grid-display { */ /* variable for flyer */ - --margin: 1cm; + --bleeds: 5mm; + --bleeds-print: 3mm; + --margin: 0.8cm; + /* A5 */ - --page-w: 210mm; - --page-h: 148mm; + --page-inner-w: 210mm; + --page-inner-h: 148mm; + --page-w: calc(var(--page-inner-w) + calc(var(--bleeds) * 2)); + --page-h: calc(var(--page-inner-h) + calc(var(--bleeds) * 2)); + +} + +html{ + font-size: var(--fs-main); } /* PRINT LAYOUT ===================================================== */ + +.container{ + position: relative; +} +.layer{ + position: absolute; + inset: 0; +} +.bleeds{ + position: absolute; + inset: calc(-1 * var(--bleeds-print)); +} + +.pad{ + padding: var(--lh) var(--margin); +} + .page{ width: var(--page-w); height: var(--page-h); @@ -70,13 +98,16 @@ body > section.grid-display { page-break-inside: avoid; } -.container{ +.page > .page-content{ position: relative; + box-sizing: border-box; + margin: var(--bleeds); + top: var(--bleeds); + margin-top: 0; + width: var(--page-inner-w); + height: var(--page-inner-h); } -.layer{ - position: absolute; - inset: 0; -} + .page-rotate{ width: var(--page-h); height: var(--page-w); @@ -87,6 +118,100 @@ body > section.grid-display { transform: rotate(90deg); } + +/* crops mark */ +:root{ + --trsp: rgba(0,0,0,0); +} +.page::after{ + content: ''; + position: absolute; + inset: 0; + background: + linear-gradient( + to right, + var(--trsp) 0, + var(--trsp) calc(var(--bleeds) - 1px), + white calc(var(--bleeds) - 1px), + white var(--bleeds), + black var(--bleeds), + black calc(var(--bleeds) + 1px), + var(--trsp) calc(var(--bleeds) + 1px), + var(--trsp) calc(var(--page-w) - var(--bleeds) - 1px), + black calc(var(--page-w) - var(--bleeds) - 1px), + black calc(var(--page-w) - var(--bleeds)), + white calc(var(--page-w) - var(--bleeds)), + white calc(var(--page-w) - var(--bleeds) + 1px), + var(--trsp) calc(var(--page-w) - var(--bleeds) + 1px), + var(--trsp) 100% + ), + linear-gradient( + to right, + var(--trsp) 0, + var(--trsp) calc(var(--bleeds) - 1px), + white calc(var(--bleeds) - 1px), + white var(--bleeds), + black var(--bleeds), + black calc(var(--bleeds) + 1px), + var(--trsp) calc(var(--bleeds) + 1px), + var(--trsp) calc(var(--page-w) - var(--bleeds) - 1px), + black calc(var(--page-w) - var(--bleeds) - 1px), + black calc(var(--page-w) - var(--bleeds)), + white calc(var(--page-w) - var(--bleeds)), + white calc(var(--page-w) - var(--bleeds) + 1px), + var(--trsp) calc(var(--page-w) - var(--bleeds) + 1px), + var(--trsp) 100% + ), + linear-gradient( + to bottom, + var(--trsp) 0, + var(--trsp) calc(var(--bleeds) - 1px), + white calc(var(--bleeds) - 1px), + white var(--bleeds), + black var(--bleeds), + black calc(var(--bleeds) + 1px), + var(--trsp) calc(var(--bleeds) + 1px), + var(--trsp) calc(var(--page-h) - var(--bleeds) - 1px), + black calc(var(--page-h) - var(--bleeds) - 1px), + black calc(var(--page-h) - var(--bleeds)), + white calc(var(--page-h) - var(--bleeds)), + white calc(var(--page-h) - var(--bleeds) + 1px), + var(--trsp) calc(var(--page-h) - var(--bleeds) + 1px), + var(--trsp) 100% + ), + linear-gradient( + to bottom, + var(--trsp) 0, + var(--trsp) calc(var(--bleeds) - 1px), + white calc(var(--bleeds) - 1px), + white var(--bleeds), + black var(--bleeds), + black calc(var(--bleeds) + 1px), + var(--trsp) calc(var(--bleeds) + 1px), + var(--trsp) calc(var(--page-h) - var(--bleeds) - 1px), + black calc(var(--page-h) - var(--bleeds) - 1px), + black calc(var(--page-h) - var(--bleeds)), + white calc(var(--page-h) - var(--bleeds)), + white calc(var(--page-h) - var(--bleeds) + 1px), + var(--trsp) calc(var(--page-h) - var(--bleeds) + 1px), + var(--trsp) 100% + ) + ; + background-size: + 100% calc(var(--bleeds) - 1mm), + 100% calc(var(--bleeds) - 1mm), + calc(var(--bleeds) - 1mm) 100%, + calc(var(--bleeds) - 1mm) 100%; + background-position: + 0% 0%, + 0% 100%, + 0% 0%, + 100% 0%; + background-repeat: no-repeat; + pointer-events: none; +} + + @media only screen { body{ background-color: whitesmoke; @@ -96,37 +221,41 @@ body > section.grid-display { outline: 1px yellowgreen solid; background: white; } + .page-content::after{ + content: ''; + position: absolute; + inset: 0; + outline: 1px green solid; + pointer-events: none; + } } -/* COMPOSITION + +/* RECTO ===================================================== */ -html{ - font-size: var(--fs-main); +.recto__title{ + /* padding-top: var(--lh); */ + position: relative; } - -.flyer h2{ - line-height: 1; - +.recto__title h2{ + line-height: 0.95; display: inline-block; + /* text-transform: uppercase; */ } -.flyer h2:nth-of-type(3){ - margin-left: calc(var(--lh) * 2); +.recto__title h2:nth-of-type(3){ + margin-left: calc(var(--lh) * 3); } +.new-moon-slanted-fvs, +.full-moon-slanted-fvs{ + text-transform: none !important; +} .recto__text{ - padding: var(--margin); - display: grid; - grid-template-rows: 1fr min-content min-content; -} -.verso__text{ - padding: var(--margin); - - display: flex; - flex-direction: column; - justify-content: flex-end; + grid-template-rows: min-content 1fr min-content; + gap: calc(var(--lh) * 2); } .recto__langs{ @@ -142,134 +271,113 @@ html{ margin: 0; } -footer{ - margin: calc(var(--lh) * 1) 0 calc(var(--lh) * 0.5); +.recto__footer{ display: flex; - /* justify-content: space-between; */ - align-items: baseline; - - gap: calc(var(--lh) * 2); - - /* 3 langs paysage */ - margin: calc(var(--lh) * 0.5) 0 calc(var(--lh) * 0); + justify-content: space-between; + color: white; } -.verso footer{ - /* color: white; */ +.recto__back{ + background: linear-gradient(to top, + black calc(var(--bleeds-print) + var(--lh)), + white calc(var(--bleeds-print) + calc(var(--lh) * 3)) + ); } -/* GRID DRAWING +/* VERSO ===================================================== */ - -.grid-cell{ - width: 100%; - height: 100%; - position: relative; + +.verso{ + color: white; } -.element-wrapper{ - position: absolute; - inset: 0; - transform-origin: center center; +.verso__back{ + background: black; - width: 100%; - height: 100%; + background: linear-gradient(to top, + white calc(var(--bleeds-print) + var(--lh)), + black calc(var(--bleeds-print) + calc(var(--lh) * 3)) + ); } -/* added */ +.calendar-content{ + padding: calc(var(--lh) / 2) 0; +} -.drawing-back{ - background: - radial-gradient(circle closest-side, white, white 50%, transparent calc(100% - var(--margin))), - linear-gradient(to bottom, white, black); +.verso__calendar{ + display: grid; + grid-template-rows: min-content 1fr min-content; +} - /* background-blend-mode: difference; */ +.verso__footer{ + color: black; } -/* .drawing-cirlce{ - background: linear-gradient(white, black); -} */ +/* --- calendar */ +.flyer-cal-entry{ + display: flex; + justify-content: space-between; + align-items: baseline; + height: var(--lh); +} -.drawing-grid{ - box-sizing: border-box; - overflow: hidden; - width: 100%; - height: 100%; - position: absolute; - inset: 0; +.flyer-cal-entry .day { + width: 10ch; +} +.flyer-cal-entry .phase-name { + width: 10ch; +} +.flyer-cal-entry > *{ + /* outline: 1px solid white; */ +} +.cal-entry__time{ + margin-right: 10em; +} - /* mix-blend-mode: difference; */ +/* --- moon drawing */ + +.cal-entry__moon { + width: 3rem; + margin-right: 2em; } -.leaf{ - --s: 80%; +.moon-drawing { + width: 1em; + height: 1em; + border-radius: 100%; + position: relative; + top: 0.2em; +} +.fullmoon .moon-drawing{ + background: white; +} +.newmoon .moon-drawing{ + border: 0.12em dotted white; box-sizing: border-box; - width: var(--s); - height: var(--s); - border-radius: 0 100% 0 50% / 0 50% 0 100%; - background: black; - - /* border: var(--border); - background: white; */ + overflow: visible; } + /* SVG DRAWING ===================================================== */ -.verso{ - /* background-color: lightgrey; */ -} - -.svg-layer{ - padding: var(--margin); - padding-bottom: calc( var(--margin) * 2); -} -.svg-layer svg{ +.recto__drawing svg{ display: block; margin: 0 auto; max-width: 100%; - max-height: 100%; - + max-height: 85%; + position: absolute; + right: 11.0%; + top: 0.7cm; } -.svg-layer path{ +.recto__drawing path{ fill: none; - stroke: black; + stroke: white; vector-effect: non-scaling-stroke; - stroke-width: var(--border-width); + stroke-width: 0.5px; /* stroke-dasharray: 4; */ - -} -.new-full-drawing{ - /* padding: var(--margin); - display: grid; - grid-template-rows: 1fr 1fr; - gap: var(--margin); */ } -.new-full-drawing > *{ - border-radius: 50%; - width: 5cm; - height: 5cm; - position: absolute; -} - -.new-moon-drawing{ - top: 5cm; - left: 5cm; - - box-sizing: border-box; - border-style: dotted; - border-width: 0.25cm; - border-color: rgba(0,0,0,0.5); - - /* background-color: white; - background: linear-gradient(to left, white, transparent); */ -} - -.full-moon-drawing{ - - top: 12cm; - left: 7cm; - background-color: white; - background: linear-gradient(to bottom, black, transparent 75%); +.flyer-cal-entry > *{ + background-color: black; } \ No newline at end of file diff --git a/theme/static/css/main.css b/theme/static/css/main.css index 23c546d..6f2c5f6 100644 --- a/theme/static/css/main.css +++ b/theme/static/css/main.css @@ -51,14 +51,14 @@ body{ body.night{ /* slitghly cyan moon reflection, low contrast */ - --clr-text: hsl(160, 6%, 86%); + --clr-text: hsl(160, 6%, 92%); --clr-soft-text: rgba(255,255,255,0.35); --clr-header: hsl(320, 4%, 12%); --clr-header: black; /* night -- grey purple */ - /* --clr-soft: hsl(290, 10%, 38%); */ - --clr-back: hsl(252, 30%, 18%); + --clr-soft: hsl(290, 10%, 38%); + --clr-back: hsl(252, 34%, 14%); } diff --git a/theme/static/css/old/calendar_old.css b/theme/static/css/old/calendar_old.css deleted file mode 100644 index ef533de..0000000 --- a/theme/static/css/old/calendar_old.css +++ /dev/null @@ -1,282 +0,0 @@ -/* -bug fix past / confirmed in both dark and light time -make sure it fit on iphone 5 -make whole transition in size -add (open) button -add a [now] indicator on the timeline -decide if we leave or not the illumination level -homogenize time notation (19h30 & 8:05:30pm) -*/ -/* CALENDAR SECTIONS - ============================================================================ */ -.calendar-box { - display: grid; - align-items: last baseline; - grid-template-columns: repeat(4, auto) 1fr; - grid-template-rows: auto auto; - gap: calc(var(--pad) * 1) calc(var(--pad) * 4); - padding: calc(var(--pad) * 2) 0; - border-bottom: var(--border); - position: relative; -} - -.calendar-box .phase-name { - /* has to have fixed width so both phase name have same width */ - width: 4.8em; -} - -.calendar-box>.reservation-wrapper { - flex-grow: 1; -} - -/* --- date --- */ -#calendar-section .day-in-full { - display: block; - font-size: var(--fs-big); - margin-bottom: -0.15em; -} - -#calendar-section .number-date { - /* mono */ - font-family: 'Inconsolata', monospace; - font-variation-settings: 'wght'220, 'wdth'120; - font-size: calc(var(--fs-mono) * 2.4); - line-height: 1; - /* classic */ - /* font-size: var(--fs-big); - line-height: 1; */ -} - -.number-date span:not(:last-of-type)::after { - content: "."; - margin: 0 -0.2em; -} - -/* --- moon drawing --- */ -.moon-drawing { - --size: 0.8em; - --illumination: 1; - font-size: var(--fs-title); - display: block; - margin: auto; - width: var(--size); - height: var(--size); - background-color: rgba(255, 255, 255, var(--illumination)); - border-radius: 100%; -} - -/* --- phase name --- */ -h2.phase-name { - line-height: 0.76; - text-transform: capitalize; -} - -/* --- reservation link --- */ -/* basic */ -.reservation-wrapper { - font-size: var(--fs-big); - text-align: right; - white-space: nowrap; -} - -.reservation-wrapper a { - text-transform: capitalize; - text-decoration: none; -} - -.calendar-box:not(.confirmed) .reservation-wrapper { - display: none; -} - -/* blue if confirmed */ -.confirmed .reservation-wrapper { - color: midnightblue; -} - -/* underline if confirmed and not past (=has href)*/ -.confirmed .reservation-wrapper a[href] { - color: midnightblue; -} - -.confirmed .reservation-wrapper a[href] span:nth-of-type(2) { - text-decoration: underline; - text-decoration-thickness: var(--border-width); -} - -/* grey if past */ -.past .reservation-wrapper { - color: grey; -} - -.past .reservation-wrapper a { - color: grey; -} - -/* --- secondary info --- */ -.moon-event-time { - padding-left: 0.2em; -} - -.sun { - font-size: 1.75em; - vertical-align: initial; - margin-right: 0.14em; - position: relative; - top: 0.18em; - line-height: 0; -} - -.api-info-wrapper { - display: contents; -} - -.sunset { - grid-column: 4 / span 2; -} - -.moon-event-time { - grid-column: 1 / span 1; -} - -.distance { - grid-column: 3 / span 1; -} - -.illumination { - display: none; -} - -/* --- past & confirmed --- */ -/* the past & confirmed must be visible without opening on mobile!! */ -.confirmed .date-wrapper, -.confirmed .phase-name-wrapper { - color: midnightblue; -} - -.past .date-wrapper, -.past .phase-name-wrapper { - color: grey; -} - -/* .last-past:after { - content: "\27A4"; - display: block; - background: var(--c-light); - position: absolute; - top: 100%; - grid-column: 2 / span 1; -} */ - -/* loading-holder */ -.loading-holder { - margin: calc(var(--pad) * 2) 0; - animation: glowing 1s infinite alternate; -} - -@keyframes glowing { - from { - color: var(--c-dark); - } - to { - color: white; - } -} - -/* FOOTER - ============================================================================ */ - -.calendar > footer{ - text-align: center; - grid-column: 1 / span 2; - margin-bottom: calc(var(--pad) * 2); -} - -/* MOBILE - ============================================================================ */ -@media only screen and (max-width: 1050px) { - .calendar-box { - gap: calc(var(--pad) * 1) calc(var(--pad) * 2); - } -} - -@media only screen and (max-width: 850px) { - .calendar-box { - grid-template-columns: 1fr auto 1fr; - grid-template-rows: auto auto auto; - gap: 0 calc(var(--pad) * 2); - } - - .calendar-box:not(.confirmed) { - grid-template-rows: auto auto; - } - - /* --- typo adjustments --- */ - .moon-drawing { - --size: 1em; - } - - .date-wrapper .number-date { - font-variation-settings: 'wght'250, 'wdth'120; - font-size: calc(var(--fs-mono) * 2.5); - } - - /* --- open / close mobile mechanism --- */ - /* the open close button */ - .date-wrapper, - .phase-name-wrapper, - .moon-drawing { - cursor: pointer; - } - - /* hidding in mobile - when click --> .open */ - .calendar-box.open { - gap: calc(var(--pad) * 2); - } - - .to-hide-on-mob { - display: none; - } - - /* walk info placement */ - .open.confirmed .walk-info-wrapper { - display: block; - grid-column-end: span 3; - } - - .open.confirmed .reservation-wrapper { - display: block; - padding-right: calc(var(--pad) * 1); - grid-column: -2 / -1; - grid-row: -2 / -1; - } - - /* api-info placement */ - .open .api-info-wrapper { - grid-column-end: span 2; - display: flex; - flex-wrap: wrap; - } - - .api-info-wrapper>* { - flex-basis: 100%; - padding: 0; - } - - .sunset { - order: 1; - } - - .moon-event-time { - order: 2; - } - - .illumination { - order: 3; - } - - .distance { - order: 4; - } -} - -@media only screen and (max-width: 600px) {} diff --git a/theme/static/js/moon-calendar.js b/theme/static/js/moon-calendar.js index 5a3caa2..9d0ede2 100644 --- a/theme/static/js/moon-calendar.js +++ b/theme/static/js/moon-calendar.js @@ -13,17 +13,6 @@ // 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 = []; - // UTILITIES // ========================================================================== @@ -205,6 +194,77 @@ function writeTimezone(){ } +function addDateToFlyer(date, moon){ +// given a moon state object from the API, + // fill in the template and add it to the calendar + + // --- data we need from the yaml + let lat = window.walk_calendar["latitude"]; + let long = window.walk_calendar["longitude"]; + let timezone = window.walk_calendar["timezone"]; + let contact_mail = window.walk_calendar["reservation_mail"]; + + // --- converting the date to walk timezone + date = date.setZone(timezone); + + // --- clone template + let template = $('#cal-entry__template').html(); + let $cal_entry = $($.parseHTML(template)); + + // --- get suncalc sun object + let walk_sunset = getSunStateFromDate(date, lat, long, timezone)[1]; + + // --- formating the info + let phase_name = moon.phaseName; + let phase = moon.isPhaseLimit === 1 ? 0 : 0.5; + + // API is missing dutch phase name + if (window.current_local == "nl-be"){ + phase_name = translatePhaseDutch(phase_name); + } + + // convert those two luxon dates in 'timezone' to human readable strings + // whith 'timezone' indicated + let walk_sunset_time = format_luxon_date(walk_sunset); + let formated_date = format_luxon_date(date); + + // let time_id = date.toUnixInteger(); + let time_id =formated_date['date'].split(".").join("-"); + + // --- filling the info + $cal_entry.attr("id", time_id); + // --- PHASENAME + $cal_entry.find(".phase-name").html(phase_name); + // --- EVENT + $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']); + $cal_entry.find(".moon-time").html(formated_date['time']); + + // --- MAIL --- + $(".mail").html(contact_mail); + let uri = "mailto:" + contact_mail; + $(".mail").attr("href", uri); + + // --- updating the font + updateAxis($cal_entry, phase); + + if(phase === 0){ + $cal_entry.addClass("newmoon"); + } + else{ + $cal_entry.addClass("fullmoon"); + } + + let moon_shift = mapValue(parseInt(formated_date['time'].substring(0,2)), 0, 24, 0, 100); + $cal_entry.find('.moon-drawing').css("left", moon_shift+"%"); + + // --- append to body + $('.calendar-content').append($cal_entry); +} + // PROCESSING API RESPONSE // ========================================================================== @@ -259,7 +319,12 @@ function processMonthResponse(response){ // console.log(dateTimeISO); // console.log(date.zoneName); - addDateToCalendar(date, moon); + if(! window.is_flyer){ + addDateToCalendar(date, moon); + } + else{ + addDateToFlyer(date, moon); + } } } } @@ -333,11 +398,10 @@ function processQueue() { function createCalendar(months_ahead){ let new_month = now; + let lang = window.current_local.substring(0,2); for (var i = 0; i < months_ahead; i++) { - let lang = window.current_local.substring(0,2); - // config to send to the API let config_month = { lang : lang, @@ -352,12 +416,3 @@ function createCalendar(months_ahead){ new_month = nextMonth(new_month); } } - - -$(document).ready(function(){ - - createCalendar(months_ahead); - - writeTimezone(); - -}); diff --git a/theme/static/js/tools/css-grid-drawing.js b/theme/static/js/tools/css-grid-drawing.js deleted file mode 100644 index f6936c8..0000000 --- a/theme/static/js/tools/css-grid-drawing.js +++ /dev/null @@ -1,261 +0,0 @@ - -class Grid{ - constructor(id, cell_size, mode = "STRETCH"){ - - this.id = id; - this.$grid = $("#"+id); - - if (Array.isArray(cell_size)){ - this.cell_width = cell_size[0]; - this.cell_height = cell_size[1]; - } else{ - this.cell_width = cell_size; - this.cell_height = cell_size; - } - this.columns = 0; - this.rows = 0; - - const possible_mode = ["STRETCH", "FIXED", "SPACE"]; - if(possible_mode.includes(mode)){ - this.mode = mode; - } - - // this.init_css(); - - this.elements = []; - this.distribute = function(i,j){ - // default distribution if there is more than one element - let index = j; - let choose = (index+(i%this.elements.length))%this.elements.length; - return choose; - } - - this.mouvements = []; - - } - - init_css(){ - // get the new element because pagedjs changed it - this.$grid = $("#"+this.id); - - // compute number of cell that can fit horizontaly and verticaly - this.columns = String(Math.floor(this.$grid.width() / this.cell_width)); - this.rows = String(Math.floor(this.$grid.height() / this.cell_height)); - console.log(this.$grid.width(), this.$grid.height()); - console.log("col-row-size", this.columns, this.rows, "(" + this.cell_width + "px", this.cell_width + "px" + ")"); - - // init css grid - this.$grid.css("display", "grid"); - if(this.mode == "STRETCH" || this.mode == "SPACE"){ - this.$grid.css("grid-template-columns", "repeat("+ this.columns +", 1fr"); - this.$grid.css("grid-template-rows", "repeat("+ this.rows +", 1fr"); - } else{ - this.$grid.css("grid-template-columns", "repeat("+ this.columns +", "+ this.cell_width + "px"); - this.$grid.css("grid-template-rows", "repeat("+ this.rows +", "+ this.cell_height + "px"); - } - } - - addElement(element_template){ - this.elements.push(element_template); - } - - addMouvement(grid_mouvement){ - this.mouvements.push(grid_mouvement); - } - - draw(){ - // fill all the grid with it's element - - this.init_css(); - - for (var i = 0; i < this.rows; i++) { - for (var j = 0; j < this.columns; j++) { - - // pick the element we are going to draw - let pick = this.distribute(i,j); - let element_html = ""; - if(pick >= 0){ - element_html = this.elements[pick].html; - } - - // a clone - let $el = $(element_html); - - // wrapp it in a cell - let $cell = $("
").addClass("grid-cell"); - let $wrapper = $("
").addClass("element-wrapper"); - //so we can chain transform on it - // $wrapper.css("transform-origin", "center center"); - // $wrapper.css("transform", "translate(-50%, -50%)"); - if(this.mode == "SPACE"){ - $wrapper.css("width", this.cell_width); - $wrapper.css("height", this.cell_height); - } - $cell.append($wrapper.append($el)); - - // iterate over all mouvement and apply them to the clone - this.mouvements.forEach( function(mvt){ - mvt.apply($cell,i,j); - }); - - // get a clone with mouvement applied - // let $el = this.element_template.draw(i,j); - - - this.$grid.append($cell); - } - } - } - -} - -class GridElement{ - // a template of grid element to clone into the grid - constructor(id){ - - //get html content string - // let content = $("#"+id).html(); - - // wrapp it in a cell - // let $cell = $("
").addClass("grid-cell"); - // let $wrapper = $("
").addClass("element-wrapper"); - // $cell.append($wrapper.append(content)); - // - // this.html = $("
").append($cell).html().trim(); - - this.html = $("#"+id).html(); - - // this.mouvements = []; - } - - // addMouvement(grid_mouvement){ - // this.mouvements.push(grid_mouvement); - // } - - // draw(i, j){ - // // return the DOM element according to it's template and an i,j parameter - // - // // a clone - // let $new_el = $(this.html); - // - // // iterate over all mouvement and apply them to the clone - // this.mouvements.forEach( function(mvt){ - // mvt.apply($new_el,i,j); - // }); - // - // return $new_el; - // } -} - -class GridMouvement{ - - constructor(css_property, eval_function, selector=".element-wrapper"){ - this.selector = selector; - this.property = css_property; - this.evaluate = eval_function; - } - - apply($element, i, j){ - // apply the mouvement to an element according to it's i, j position - // on the grid - let $search = $("
").append($element); - let $affected_by_mvt = $search.find(this.selector); - let css = this.evaluate(i,j); - if(this.property == "transform"){ - let current_transform = $affected_by_mvt.css("transform"); - css = current_transform + " " + css; - } - $affected_by_mvt.css(this.property, css); - } - -} - - -// default mouvements - -function map_range(value, in_min, in_max, out_min, out_max) { - return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; -} - -const sym2HH = new GridMouvement("transform", function(i,j){ - let scaleY = 1; - if(j%2==1){ scaleY = -1; } - let transform = "scaleY("+scaleY+")"; - return transform; -}); -const sym2VV = new GridMouvement("transform", function(i,j){ - let scaleX = 1; - if(i%2==1){ scaleX = -1; } - let transform = "scaleX("+scaleX+")"; - return transform; -}); -const sym4 = new GridMouvement("transform", function(i,j){ - let scaleX = 1; - let scaleY = 1; - if(i%2==1){ scaleX = -1; } - if(j%2==1){ scaleY = -1; } - let transform = "scaleX("+scaleX+") scaleY("+scaleY+")"; - return transform; -}); -const sym4alt = new GridMouvement("transform", function(i,j){ - let scaleX = 1; - let scaleY = 1; - if(i%2==1){ scaleY = -1; } - if(j%2==1){ scaleX = -1; } - let transform = "scaleX("+scaleX+") scaleY("+scaleY+")"; - return transform; -}); - -const line_shift = new GridMouvement("transform", function(i,j){ - let translate = ""; - if(i%2==1){ - translate = "translateX(-25%)"; - } - if(i%2==0){ - translate = "translateX(+25%)"; - } - return translate; -}); - - -const shrink = new GridMouvement("transform", function(i,j){ - let factor = j/(mygrid.columns); - return "scale("+factor+")"; -}); - - -const rotation = new GridMouvement("transform", function(i,j){ - let angle = String((j/(mygrid.columns-1))*360)+"deg"; - let rotate = "rotate("+angle+")"; - return rotate; -}); - -const random_rot = new GridMouvement("transform", function(i,j){ - let angle = Math.random()*360; - let rotate = "rotate("+angle+"deg)"; - return rotate; -}); - - -const random_color = new GridMouvement("background", function(i,j){ - let hue = map_range(Math.random(),0,1,30,100); - let color = "hsl("+hue+",70%,50%)"; - return color; -}, ".leaves"); - - -const scattered = new GridMouvement("transform", function(i,j){ - let maxdecal = 120; - let decalx = (Math.random()*maxdecal) - (maxdecal/2); - let decaly = (Math.random()*maxdecal) - (maxdecal/2); - let transform = "translate("+decalx+"%, "+decaly+"%)"; - return transform; -}); - - -const diagonal_fontsize = new GridMouvement("font-size", function(i,j){ - let x = j/(mygrid.columns-1); - let y = i/(mygrid.rows-1); - let fontsize = Math.max(Math.abs(x-y) * 10, 1); - return fontsize+"em"; -}); \ No newline at end of file diff --git a/theme/templates/flyer.html b/theme/templates/flyer.html index 6fd670d..95b0737 100644 --- a/theme/templates/flyer.html +++ b/theme/templates/flyer.html @@ -4,10 +4,6 @@ {{ super() }} - - - {% endblock %} {% block scroll_content %} @@ -15,108 +11,127 @@
-
- -
-

New moon 

-

walks

+
+ +
+ +
+ +
+

New moon 

+

walks

+ +

Full moon 

+

walks

+ + {#
+ {% include 'inline-svg/bouleau-feuilles-big-1-export.svg' %} +
#} +
-

Full moon 

-

walks

-
- -
-
-

en

-
- {{ page.sections["en"] }} +
+
+

en

+
+ {{ page.sections["en"] }} +
-
-
-

fr

-
- {{ page.sections["fr"] }} +
+

fr

+
+ {{ page.sections["fr"] }} +
-
-
-

nl

-
- {{ page.sections["nl"] }} +
+

nl

+
+ {{ page.sections["nl"] }} +
-
-
- - - + + +
+

+ walks calendar at moonwalks.be +

+

+ an initiative by Anaïs Berck +

+
+ +
+
+
-
- - - -
- {% include 'inline-svg/bouleau.svg' %} -
-
-
-
-
- -
- -
+
+
+ Dates and times are given in +
+
+ +
+
+ + +
+
+
-