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 */
--bleeds: 5mm;
--bleeds-print: 3mm;
--margin: 0.8cm;
/* A5 */
--page-inner-w: 210mm;
@ -81,7 +80,7 @@ html{
}
.pad{
padding: var(--lh) var(--margin);
padding: var(--lh) calc(var(--lh) * 1.5);
}
.page{
@ -121,92 +120,60 @@ html{
/* crops mark */
: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{
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%
)
var(--crop-marks-l), var(--crop-marks-r),
var(--crop-marks-l), var(--crop-marks-r),
var(--crop-marks-t), var(--crop-marks-b),
var(--crop-marks-t), var(--crop-marks-b)
;
background-size:
100% calc(var(--bleeds) - 1mm),
100% calc(var(--bleeds) - 1mm),
calc(var(--bleeds) - 1mm) 100%,
calc(var(--bleeds) - 1mm) 100%;
var(--crop-mark-v-sizes), var(--crop-mark-v-sizes),
var(--crop-mark-v-sizes), var(--crop-mark-v-sizes),
var(--crop-mark-h-sizes), var(--crop-mark-h-sizes),
var(--crop-mark-h-sizes), var(--crop-mark-h-sizes)
;
background-position:
0% 0%,
0% 100%,
0% 0%,
100% 0%;
calc(var(--bleeds) - var(--crop-marks-w)) 0%,
calc(var(--page-w) - var(--bleeds) - var(--crop-marks-w)) 0%,
calc(var(--bleeds) - var(--crop-marks-w)) 100%,
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;
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__title{
/* padding-top: var(--lh); */
margin-left: calc(0 * var(--lh));
position: relative;
}
.recto__title h2{
line-height: 0.95;
display: inline-block;
/* text-transform: uppercase; */
}
.recto__title h2:nth-of-type(3){
margin-left: calc(var(--lh) * 3);
/* margin-left: calc(var(--lh) * 2); */
}
.new-moon-slanted-fvs,
@ -252,6 +239,8 @@ html{
text-transform: none !important;
}
.recto__text{
display: grid;
grid-template-rows: min-content 1fr min-content;
@ -261,6 +250,11 @@ html{
.recto__langs{
display: flex;
gap: var(--lh);
margin-left: calc(var(--lh) * 4);
height: min-content;
margin-top: auto;
}
.recto__langs > *{
flex: 0 1 100%;
@ -271,74 +265,128 @@ html{
margin: 0;
}
.recto__footer{
display: flex;
justify-content: space-between;
color: white;
/* VERSO
===================================================== */
.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{
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))
);
}
/* VERSO
===================================================== */
.verso{
color: white;
}
.verso__back{
background: black;
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))
);
}
.calendar-content{
padding: calc(var(--lh) / 2) 0;
}
/* FOOTERS
===================================================== */
.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{
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{
display: flex;
justify-content: space-between;
align-items: baseline;
height: var(--lh);
justify-content: space-between;
justify-content: flex-start;
gap: var(--lh);
}
.flyer-cal-entry .day {
width: 10ch;
width: 6em;
margin-right: calc(var(--lh) * 0.5);
}
.flyer-cal-entry .phase-name {
width: 10ch;
width: 4.6em;
margin-left: calc(var(--lh) * 2.5);
}
.flyer-cal-entry > *{
/* outline: 1px solid white; */
flex-grow: 0;
background-color: black;
}
.cal-entry__time{
margin-right: 10em;
flex-grow: 1;
background: none;
}
.moon-time{
background-color: black;
padding: 0.2em 0;
}
/* --- moon drawing */
.cal-entry__moon {
width: 3rem;
margin-right: 2em;
width: calc(var(--lh) * 2);
margin-right: 1em;
}
.moon-drawing {
@ -365,19 +413,20 @@ html{
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 85%;
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{
fill: none;
stroke: white;
vector-effect: non-scaling-stroke;
stroke-width: 0.5px;
stroke-width: var(--border-width);
/* 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">
<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="font-big full-moon-slanted-fvs">walks</h2>
<h2 class="font-big full-moon-fvs">walks</h2>
{#<div class="layer recto__drawing">
{% include 'inline-svg/bouleau-feuilles-big-1-export.svg' %}
@ -30,30 +30,24 @@
</header>
<main class="text-content recto__langs">
<div class="recto__lang">
<p class="font-up">en</p>
<section class="recto__lang data-section" data-box-title="en">
<div class="progressive-fvs">
{{ page.sections["en"] }}
</div>
</div>
<div class="recto__lang">
<p class="font-up">fr</p>
</section>
<section class="recto__lang data-section" data-box-title="fr">
<div class="progressive-fvs">
{{ page.sections["fr"] }}
</div>
</div>
<div class="recto__lang">
<p class="font-up">nl</p>
</section>
<section class="recto__lang data-section" data-box-title="nl">
<div class="progressive-fvs">
{{ page.sections["nl"] }}
</div>
</div>
</section>
</main>
<footer class="recto__footer">
<p class="mono">
walks calendar at <a href="http://moonwalks.be">moonwalks.be</a>
</p>
<p class="mono">
an initiative by Anaïs Berck
</p>
@ -73,10 +67,11 @@
<div class="layer verso__calendar pad">
<header class="date-time-info mono">
Dates and times are given in <span class="timezone"></span>
</header>
<div class="calendar-content">
{#<header class="date-time-info mono">
Moon Phases for Brussels, generated on the <span class="generation-time"></span>
</header>#}
<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">
<div class="flyer-cal-entry">
@ -94,22 +89,24 @@
<span class="moon-time"></span>
</div>
<h2 class="sunset-name">Sunset</h2>
<div class="cal-entry__data mono">
sunset <span class="sunset-time"></span>
<span class="sunset-time"></span>
</div>
</div>
</template>
</div>
</section>
<footer class="verso__footer">
<!-- <p class="mono">
walks calendar at <a href="http://moonwalks.be">moonwalks.be</a>
</p> -->
<!-- <p class="mono">
reservations at <a class="mail"></a>
</p> -->
<p class="mono">
complete walks calendar on <a href="http://moonwalks.be">moonwalks.be</a>
<!-- <br/> reservation at <a href="mailto:anais@anaisberck.be">anais@anaisberck.be</a> -->
</p>
</footer>
</div>
</div>
</div>
@ -167,7 +164,9 @@
$(document).ready(function(){
createCalendar(months_ahead);
writeTimezone();
// writeTimezone();
$('.generation-time').html(format_date_time(now)['date']);
});
</script>
{% endblock %}
Write Preview
Loading…
Cancel
Save