From 3ce3573f84a59734f1c651bc880e2574abe4ff7b Mon Sep 17 00:00:00 2001 From: romo Date: Mon, 16 Oct 2023 18:35:45 +0200 Subject: [PATCH] stile + template + qrcode --- static/flyers/simple/style.css | 130 ++++++++++++++++++++------------- static/qr-code.png | Bin 0 -> 7211 bytes templates/flyers/simple.html | 53 +++++++++----- templates/index.html | 3 +- 4 files changed, 116 insertions(+), 70 deletions(-) create mode 100644 static/qr-code.png diff --git a/static/flyers/simple/style.css b/static/flyers/simple/style.css index 9d12ab2..076dca8 100644 --- a/static/flyers/simple/style.css +++ b/static/flyers/simple/style.css @@ -1,61 +1,76 @@ body { - border: 1px solid yellow; - font: 18px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; - color: #c9d1d9; - background: #0d1117; + border: 1px solid yellow; + font: 18px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; + color: #c9d1d9; + background: #0d1117; } -.event { - background-color: #1e1e1e; - border-radius: 5mm 5mm 0 0; +h1, h2, h3 { + line-height: 1.2; } -.event_info > h3.title { - margin-top: 2mm; - margin-left: 3mm; +h1 { + margin: 0 0 .2em; + color: #ff6e40; + font-size: 20mm; } -.intestazione { - border: 1px solid black; - height: 10%; - width: 90%; +h3 { + margin-top: 0; + margin-bottom: .2em; + color: #ff6e40; } -.titolo > h1 { - font-size: 35mm; - margin-top: -22px; +.intestazione { + padding: 1.5rem; + display: grid; + grid-template-columns: auto auto auto; + margin-bottom: 1.5rem; } - -.subtitle { - margin-top: -50px; +.logo, +.qrcode { + display: flex; + align-items: center; + height: 100%; } - -.event { - border: 1px solid black; -o} - -.center { - display: flex; - flex-direction: column; - align-items: center; +.qrcode { + justify-content: flex-end; +} +.logo img, +.qrcode img { + width: 25%; } #events { - width: 99%; - height: 90%; - display: grid; - grid-template-columns: auto auto auto; - grid-gap: 1em; - border: 1px dotted black; + display: grid; + grid-template-columns: auto auto auto; + grid-gap: 1.5em; + border: 1px dotted black; + padding-left: 24px; + padding-right: 24px; +} +.event { + background-color: #1e1e1e; + border-radius: 4px; + box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12); } - .event_info svg { height: 24px; width: 24px; fill: white; margin-right: 0.2em; } - +.title, +.flex, +.location { + margin: .5rem 1rem; +} +.center { + display: flex; + flex-direction: column; + align-items: center; +} +.flex, .location { display: grid; grid-template-columns: auto auto; @@ -65,24 +80,35 @@ o} color: #ff6e40; } +.flyer-container { + background: #0d1117; +} .flyer { - width: 100%; - object-fit: cover; - max-height: 50mm; + width: 100%; + object-fit: cover; + max-height: 40mm; + border-radius: 4px 4px 0 0; } -h1,h2,h3 { - line-height: 1.2; +footer { + width: 100%; + padding: 1rem; + display: grid; + grid-template-columns: 66% 33%; + padding-left: 24px; + padding-right: 24px; } - -h1 { - margin: 0 0 .2em; - color: #ff6e40; +.contacts { + padding-left: 24px; } - -h3 { - margin-top: 0; - margin-bottom: .2em; - color: #ff6e40; +.contacts span { + padding-right: 1rem; +} +.contacts svg { + width: 1rem; + fill:#c9d1d9; +} +.published { + text-align: right; + padding-right: 24px; } - diff --git a/static/qr-code.png b/static/qr-code.png new file mode 100644 index 0000000000000000000000000000000000000000..77338bc5b66d28593f5ef5ce395ea4d2baa1b131 GIT binary patch literal 7211 zcmeHM|4$ob7=H_F&dp7iW{GowEV@7EPsMX<^yWcGoMi_CWf@_sS2}_z#RX=F;4g zrg@X+eLm0g`8=NU(S3DfP`bhXH6XZhL^p4624ZK?$62u5#c#K z)X@aM7FTxW-h(x*_a-O5+?KTg>@6*J_dJ^~(loYq-v8sMKJNYRyO~`IJOU3nJx{6N z89Gn>W&rl&G>ZVZ{D1hM--AJ=GhfS*#szCEE$2NUb(T__I$ot@cNX6!R#9FC|M@tQ z<-FJV5O8s9`9-gNn8Szt_x4O@Hzf!ODjT{ zHmE=brf_eR{pwI9Wc<#Ai~)ir?hMSd$O&!g)EVyXRvAzS{4b8>TqHx*GfY~YSX*K1sVZF!z+++sME3T#R(MFbMdfSJvazl^S;7v-FPox9uZ0)0Hj`4S^%?1$&pVF)93-Tz6lpvkybe^Q?yl3a| zn34?{7c#VFj9Nz3>CLOAe3a&xA_SjS81o^ae3)f%WrcQBIveGU=n3D52O7tCb z0g%Z_0qKqd6Gr(hIMBP8G_F4o{__Op9L0jqTpA|sqgwWkB-bY}?>3k|wq%qGeO^0a z;>|Ns)re_!k%1Fl87@axoVS}S{xx+!*>67O`;e3t(AFl}o5p=(=ypffGPsK)tI{tW zh9iDqE6-bC+n4+0c}vC`?P9{%_%2f2;}WB^a>tlqF|LcSiDJ&r-C;;?n|MAEQk=RS za((aYVj{YT2igj_oRlRO(i&$j%b#+G<92`jkM|PUOnn-ujR$pNgoy4!N0M$#*i^*T z<|L7hn#LO|W@=HMYp}}8^3}|6JG>m;?M?G}kZoz8)4uaBP-DEAsklNUP}h-_sjglD z%L@&{a+XI21arwxyvO1`hB)YOVzeHAVS79P#~zN_s_82{l=^|$4$X1^d?S_7T^owg z;N#=^d2g~Ozm?UR-L-+R^){oC7H~d`4^_PeWjgfDbiW|l$}vR!;Dx?O!1D&QEL>wn6}DdX!i7!k-ua`RS^OtDo&DdhXT@;l%8H LvP|-&lB0hE<~G__ literal 0 HcmV?d00001 diff --git a/templates/flyers/simple.html b/templates/flyers/simple.html index 590e5a0..143d670 100644 --- a/templates/flyers/simple.html +++ b/templates/flyers/simple.html @@ -5,36 +5,55 @@ Balotta - sito in manutenzione - + -
+
+

Balotta

Agenda condivisa per Bologna
-
+
+ +
+ -
+
{% for event in events %} -
-
-

{{ event.title }}

-
{{ event.when }}
-
-
- {{ event.place.name }} -
+
+
+ +
+
+

{{ event.title }}

+
{{ event.when }}
+
+
+ {{ event.place.name }}
-
- -
+
{% endfor %} -
+
+ +
+
+ + https://balotta.org + + info@balotta.org +
+
+ stampato il 16/10/23 +
+
+ diff --git a/templates/index.html b/templates/index.html index 6353a8d..f513409 100644 --- a/templates/index.html +++ b/templates/index.html @@ -5,8 +5,9 @@ Scegli gli eventi che vuoi mettere nel volantino e premi genera. Per stampare fai "File >> Stampa" Scegli come destinazione "Salva come PDF" e seleziona il giusto formato di carta (A3).
+Puoi selezionare solo 12 eventi, di più non entrano in un A3.
- +
{% for event in events %}