refresh

theme/static/css/flyer.css

@@ -155,7 +155,7 @@ footer{
 }
 
 .verso footer{
-    color: white;
+    /* color: white; */
 }
 
 /*  GRID DRAWING
@@ -212,3 +212,64 @@ footer{
     /* border: var(--border);
     background: white; */
 }
+
+/*  SVG DRAWING
+    ===================================================== */
+
+.verso{
+    /* background-color: lightgrey; */
+}
+
+.svg-layer{
+    padding: var(--margin);
+    padding-bottom: calc( var(--margin) * 2);
+}
+.svg-layer svg{
+    display: block;
+    margin: 0 auto;
+    max-width: 100%;
+    max-height: 100%;
+
+}
+.svg-layer path{
+    fill: none;
+    stroke: black;
+    vector-effect: non-scaling-stroke;
+    stroke-width: var(--border-width);
+    /* 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%);
+}

theme/templates/flyer.html

@@ -49,7 +49,7 @@
                 <footer>
                     <a class="mono-big" href="http://moonwalks.be">moonwalks.be</a>
                     <p class="mono">
-                        a project by Anaïs Berck
+                        an initiative by Anaïs Berck
                     </p>
                 </footer>
 
@@ -60,12 +60,21 @@
 
             <div class="page-rotate">
 
-                <div class="layer drawing-back">
+                <!-- <div class="layer drawing-back">
                 </div>
-    
                 <div id="verso-drawing" class="layer drawing-grid">
+                </div> -->
+
+                
+                <div class="layer svg-layer">
+                    {% include 'inline-svg/bouleau.svg' %}
+                </div>
+                <div class="layer new-full-drawing">
+                    <div class="new-moon-drawing"></div>
+                    <div class="full-moon-drawing"></div>
                 </div>
 
+    
                 <div id="verso-drawing" class="layer verso__text">
                     <footer class="mono-big">
                         <a href="http://moonwalks.be">moonwalks.be</a>
@@ -100,7 +109,7 @@
         mygrid.addMouvement(random_rot);
         mygrid.addMouvement(scattered);
     
-        mygrid.draw();
+        //mygrid.draw();
     </script>
 {% endblock %}