anais_berck
/
www.moonwalks.be
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

modified flyer

Browse Source
main
Dorian 3 years ago
parent a2ebcf60e4
commit 23e27e9c4c
2 changed files with 215 additions and 167 deletions
Show Stats Download Patch File Download Diff File

281
theme/static/css/flyer.css
Unescape Escape View File

@ -50,7 +50,6 @@ a, a:visited {
/* variable for flyer */ /* variable for flyer */
--bleeds: 5mm; --bleeds: 5mm;
--bleeds-print: 3mm; --bleeds-print: 3mm;
--margin: 0.8cm;
/* A5 */ /* A5 */
--page-inner-w: 210mm; --page-inner-w: 210mm;
@ -81,7 +80,7 @@ html{
} }
.pad{ .pad{
padding: var(--lh) var(--margin); padding: var(--lh) calc(var(--lh) * 1.5);
} }
.page{ .page{
@ -121,92 +120,60 @@ html{
/* crops mark */ /* crops mark */
:root{ :root{
--trsp: rgba(0,0,0,0);
/* --- variables */
--crop-marks-w: 1px;
--crop-marks-space: 1mm;
/* --- pre-computed values */
--crop-mark-gradient:
white 0,
white var(--crop-marks-w),
black var(--crop-marks-w),
black calc(var(--crop-marks-w) * 2)
;
--crop-marks-l: linear-gradient(to right, var(--crop-mark-gradient));
--crop-marks-r: linear-gradient(to left, var(--crop-mark-gradient));
--crop-marks-t: linear-gradient(to bottom, var(--crop-mark-gradient));
--crop-marks-b: linear-gradient(to top, var(--crop-mark-gradient));
--crop-mark-v-sizes: calc(var(--crop-marks-w) * 2) calc(var(--bleeds) - var(--crop-marks-space));
--crop-mark-h-sizes: calc(var(--bleeds) - var(--crop-marks-space)) calc(var(--crop-marks-w) * 2);
} }
.page::after{ .page::after{
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
background: background:
linear-gradient( var(--crop-marks-l), var(--crop-marks-r),
to right, var(--crop-marks-l), var(--crop-marks-r),
var(--trsp) 0, var(--crop-marks-t), var(--crop-marks-b),
var(--trsp) calc(var(--bleeds) - 1px), var(--crop-marks-t), var(--crop-marks-b)
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: background-size:
100% calc(var(--bleeds) - 1mm), var(--crop-mark-v-sizes), var(--crop-mark-v-sizes),
100% calc(var(--bleeds) - 1mm), var(--crop-mark-v-sizes), var(--crop-mark-v-sizes),
calc(var(--bleeds) - 1mm) 100%, var(--crop-mark-h-sizes), var(--crop-mark-h-sizes),
calc(var(--bleeds) - 1mm) 100%; var(--crop-mark-h-sizes), var(--crop-mark-h-sizes)
;
background-position: background-position:
0% 0%, calc(var(--bleeds) - var(--crop-marks-w)) 0%,
0% 100%, calc(var(--page-w) - var(--bleeds) - var(--crop-marks-w)) 0%,
0% 0%, calc(var(--bleeds) - var(--crop-marks-w)) 100%,
100% 0%; calc(var(--page-w) - var(--bleeds) - var(--crop-marks-w)) 100%,
0% calc(var(--bleeds) - var(--crop-marks-w)),
0% calc(var(--page-h) - var(--bleeds) - var(--crop-marks-w)),
100% calc(var(--bleeds) - var(--crop-marks-w)),
100% calc(var(--page-h) - var(--bleeds) - var(--crop-marks-w))
;
background-repeat: no-repeat; background-repeat: no-repeat;
pointer-events: none; pointer-events: none;
} }
@ -230,21 +197,41 @@ html{
} }
} }
/* FLYER
===================================================== */
.flyer{
--clr-back: white;
--clr-text: black;
--border-width: 0.5px;
--border: var(--border-width) solid var(--clr-text);
}
.flyer section.data-section {
padding: calc(var(--lh) * 1) 0 0;
}
.flyer section.data-section > *{
z-index: 9;
position: relative;
}
.flyer section.data-section:after{
line-height: 1.1;
}
/* RECTO /* RECTO
===================================================== */ ===================================================== */
.recto__title{ .recto__title{
/* padding-top: var(--lh); */ margin-left: calc(0 * var(--lh));
position: relative; position: relative;
} }
.recto__title h2{ .recto__title h2{
line-height: 0.95; line-height: 0.95;
display: inline-block; display: inline-block;
/* text-transform: uppercase; */
} }
.recto__title h2:nth-of-type(3){ .recto__title h2:nth-of-type(3){
margin-left: calc(var(--lh) * 3); /* margin-left: calc(var(--lh) * 2); */
} }
.new-moon-slanted-fvs, .new-moon-slanted-fvs,
@ -252,6 +239,8 @@ html{
text-transform: none !important; text-transform: none !important;
} }
.recto__text{ .recto__text{
display: grid; display: grid;
grid-template-rows: min-content 1fr min-content; grid-template-rows: min-content 1fr min-content;
@ -261,6 +250,11 @@ html{
.recto__langs{ .recto__langs{
display: flex; display: flex;
gap: var(--lh); gap: var(--lh);
margin-left: calc(var(--lh) * 4);
height: min-content;
margin-top: auto;
} }
.recto__langs > *{ .recto__langs > *{
flex: 0 1 100%; flex: 0 1 100%;
@ -271,74 +265,128 @@ html{
margin: 0; margin: 0;
} }
.recto__footer{ /* VERSO
display: flex; ===================================================== */
justify-content: space-between;
color: white; .verso{
--clr-back: black;
--clr-text: white;
--border: var(--border-width) solid var(--clr-text);
}
.verso .data-section:after{
color: black;
}
.verso__calendar{
display: grid;
grid-template-rows: 1fr min-content;
gap: calc(var(--lh) / 2);
}
.date-time-info{
line-height: var(--lh);
}
/* GRADIENTS
===================================================== */
.recto{
color: black;
--border-width: 1px;
--border: var(--border-width) solid var(--clr-text);
} }
.recto__back{ .recto__back{
background: linear-gradient(to top, background: linear-gradient(to top,
black calc(var(--bleeds-print) + var(--lh)), black calc(var(--bleeds-print) + calc(var(--lh) * 0.5)),
white calc(var(--bleeds-print) + calc(var(--lh) * 3)) white calc(var(--bleeds-print) + calc(var(--lh) * 3))
); );
} }
/* VERSO
===================================================== */
.verso{ .verso{
color: white; color: white;
} }
.verso__back{ .verso__back{
background: black;
background: linear-gradient(to top, background: linear-gradient(to top,
white calc(var(--bleeds-print) + var(--lh)), white calc(var(--bleeds-print) + calc(var(--lh) * 0.5)),
black calc(var(--bleeds-print) + calc(var(--lh) * 3)) black calc(var(--bleeds-print) + calc(var(--lh) * 3))
); );
} }
.calendar-content{ /* FOOTERS
padding: calc(var(--lh) / 2) 0; ===================================================== */
}
.verso__calendar{
display: grid;
grid-template-rows: min-content 1fr min-content;
}
.mono{
line-height: var(--lh);
}
.recto__footer{
display: flex;
justify-content: flex-end;
color: white;
}
.verso__footer{ .verso__footer{
color: black; color: black;
display: flex;
justify-content: flex-end;
}
.recto__footer .mono,
.verso__footer .mono{
line-height: 1;
}
/* CALENDAR
===================================================== */
.flyer section.data-section.calendar-content > header{
position: absolute;
top: -0.9em;
right: 0;
height: var(--lh);
background: black;
padding-left: var(--lh);
} }
/* --- calendar */
.flyer-cal-entry{ .flyer-cal-entry{
display: flex; display: flex;
justify-content: space-between;
align-items: baseline; align-items: baseline;
height: var(--lh); height: var(--lh);
justify-content: space-between;
justify-content: flex-start;
gap: var(--lh);
} }
.flyer-cal-entry .day { .flyer-cal-entry .day {
width: 10ch; width: 6em;
margin-right: calc(var(--lh) * 0.5);
} }
.flyer-cal-entry .phase-name { .flyer-cal-entry .phase-name {
width: 10ch; width: 4.6em;
margin-left: calc(var(--lh) * 2.5);
} }
.flyer-cal-entry > *{ .flyer-cal-entry > *{
/* outline: 1px solid white; */ flex-grow: 0;
background-color: black;
} }
.cal-entry__time{ .cal-entry__time{
margin-right: 10em; flex-grow: 1;
background: none;
}
.moon-time{
background-color: black;
padding: 0.2em 0;
} }
/* --- moon drawing */ /* --- moon drawing */
.cal-entry__moon { .cal-entry__moon {
width: 3rem; width: calc(var(--lh) * 2);
margin-right: 2em; margin-right: 1em;
} }
.moon-drawing { .moon-drawing {
@ -365,19 +413,20 @@ html{
display: block; display: block;
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
max-height: 85%;
position: absolute; position: absolute;
right: 11.0%;
top: 0.7cm; /* top: var(--lh);
max-height: 86%;
right: 14%; */
top: calc(var(--lh) * 2);
max-height: 82.0%;
right: 16.4%;
} }
.recto__drawing path{ .recto__drawing path{
fill: none; fill: none;
stroke: white; stroke: white;
vector-effect: non-scaling-stroke; vector-effect: non-scaling-stroke;
stroke-width: 0.5px; stroke-width: var(--border-width);
/* stroke-dasharray: 4; */ /* stroke-dasharray: 4; */
} }
.flyer-cal-entry > *{
background-color: black;
}

53
theme/templates/flyer.html
Unescape Escape View File

@ -19,10 +19,10 @@
<header class="recto__title"> <header class="recto__title">
<h2 class="phase-name font-big new-moon-fvs">New moon&nbsp;</h2> <h2 class="phase-name font-big new-moon-fvs">New moon&nbsp;</h2>
<h2 class="font-big new-moon-slanted-fvs">walks</h2> <h2 class="font-big new-moon-fvs">walks</h2>
<h2 class="phase-name font-big full-moon-fvs">Full moon&nbsp;</h2> <h2 class="phase-name font-big full-moon-fvs">Full moon&nbsp;</h2>
<h2 class="font-big full-moon-slanted-fvs">walks</h2> <h2 class="font-big full-moon-fvs">walks</h2>
{#<div class="layer recto__drawing"> {#<div class="layer recto__drawing">
{% include 'inline-svg/bouleau-feuilles-big-1-export.svg' %} {% include 'inline-svg/bouleau-feuilles-big-1-export.svg' %}
@ -30,30 +30,24 @@
</header> </header>
<main class="text-content recto__langs"> <main class="text-content recto__langs">
<div class="recto__lang"> <section class="recto__lang data-section" data-box-title="en">
<p class="font-up">en</p>
<div class="progressive-fvs"> <div class="progressive-fvs">
{{ page.sections["en"] }} {{ page.sections["en"] }}
</div> </div>
</div> </section>
<div class="recto__lang"> <section class="recto__lang data-section" data-box-title="fr">
<p class="font-up">fr</p>
<div class="progressive-fvs"> <div class="progressive-fvs">
{{ page.sections["fr"] }} {{ page.sections["fr"] }}
</div> </div>
</div> </section>
<div class="recto__lang"> <section class="recto__lang data-section" data-box-title="nl">
<p class="font-up">nl</p>
<div class="progressive-fvs"> <div class="progressive-fvs">
{{ page.sections["nl"] }} {{ page.sections["nl"] }}
</div> </div>
</div> </section>
</main> </main>
<footer class="recto__footer"> <footer class="recto__footer">
<p class="mono">
walks calendar at <a href="http://moonwalks.be">moonwalks.be</a>
</p>
<p class="mono"> <p class="mono">
an initiative by Anaïs Berck an initiative by Anaïs Berck
</p> </p>
@ -73,10 +67,11 @@
<div class="layer verso__calendar pad"> <div class="layer verso__calendar pad">
<header class="date-time-info mono"> {#<header class="date-time-info mono">
Dates and times are given in <span class="timezone"></span> Moon Phases for Brussels, generated on the <span class="generation-time"></span>
</header> </header>#}
<div class="calendar-content"> <section class="data-section calendar-content" data-box-title="Moon Phases for Brussels">
<header class="mono">generated on the <span class="generation-time"></span></header>
<template id="cal-entry__template"> <template id="cal-entry__template">
<div class="flyer-cal-entry"> <div class="flyer-cal-entry">
@ -94,22 +89,24 @@
<span class="moon-time"></span> <span class="moon-time"></span>
</div> </div>
<h2 class="sunset-name">Sunset</h2>
<div class="cal-entry__data mono"> <div class="cal-entry__data mono">
sunset <span class="sunset-time"></span> <span class="sunset-time"></span>
</div> </div>
</div> </div>
</template> </template>
</div> </section>
<footer class="verso__footer"> <footer class="verso__footer">
<!-- <p class="mono"> <p class="mono">
walks calendar at <a href="http://moonwalks.be">moonwalks.be</a> complete walks calendar on <a href="http://moonwalks.be">moonwalks.be</a>
</p> --> <!-- <br/> reservation at <a href="mailto:anais@anaisberck.be">anais@anaisberck.be</a> -->
<!-- <p class="mono"> </p>
reservations at <a class="mail"></a>
</p> -->
</footer> </footer>
</div> </div>
</div> </div>
</div> </div>
@ -167,7 +164,9 @@
$(document).ready(function(){ $(document).ready(function(){
createCalendar(months_ahead); createCalendar(months_ahead);
writeTimezone(); // writeTimezone();
$('.generation-time').html(format_date_time(now)['date']);
}); });
</script> </script>
{% endblock %} {% endblock %}
Write Preview
Loading…
Cancel
Save