flyer v2 + correct night colors
Dorian
3 years ago
parent
3447053632
commit
a2ebcf60e4
@ -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) {}
|
||||
@ -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 = $("<div>").addClass("grid-cell");
|
||||
let $wrapper = $("<div>").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 = $("<div>").addClass("grid-cell");
|
||||
// let $wrapper = $("<div>").addClass("element-wrapper");
|
||||
// $cell.append($wrapper.append(content));
|
||||
//
|
||||
// this.html = $("<div>").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 = $("<div>").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";
|
||||
});
|
||||
Loading…
Reference in New Issue