diff --git a/theme/static/css/flyer.css b/theme/static/css/flyer.css
index 0041790..421d6f2 100644
--- a/theme/static/css/flyer.css
+++ b/theme/static/css/flyer.css
@@ -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%
-        )
+    inset: 0; 
+
+    background: 
+        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;
 }
\ No newline at end of file
diff --git a/theme/templates/flyer.html b/theme/templates/flyer.html
index 95b0737..2ee397f 100644
--- a/theme/templates/flyer.html
+++ b/theme/templates/flyer.html
@@ -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,43 +67,46 @@
 
 
                 <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">
-                            <template id="cal-entry__template">
-                                <div class="flyer-cal-entry">
-
-                                    <div class="date mono"></div>
-
-                                    <div class="day"></div>
-
-                                    <div class="cal-entry__moon">
-                                        <div class="moon-drawing"></div>
-                                    </div>
-                            
-                                    <h2 class="phase-name"></h2>
-
-                                    <div class="cal-entry__time mono">
-                                        <span class="moon-time"></span>
-                                    </div>
-                            
-                                    <div class="cal-entry__data mono">
-                                        sunset <span class="sunset-time"></span>
-                                    </div>
+                    {#<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">
+
+                                <div class="date mono"></div>
+
+                                <div class="day"></div>
+
+                                <div class="cal-entry__moon">
+                                    <div class="moon-drawing"></div>
+                                </div>
+                        
+                                <h2 class="phase-name"></h2>
+
+                                <div class="cal-entry__time mono">
+                                    <span class="moon-time"></span>
+                                </div>
 
+                                <h2 class="sunset-name">Sunset</h2>
+                        
+                                <div class="cal-entry__data mono">
+                                    <span class="sunset-time"></span>
                                 </div>
-                            </template>
-                        </div>
-                        <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> -->
-                        </footer>
+
+                            </div>
+                        </template>
+                    </section>
+                    <footer class="verso__footer">
+                        <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 %}
\ No newline at end of file