From a84ce45a2757faa7174a5a8039b167b425a4b629 Mon Sep 17 00:00:00 2001 From: romo Date: Tue, 17 Oct 2023 19:03:45 +0200 Subject: [PATCH] white version --- README.md | 6 ++ static/flyers/simple/style.css | 2 +- static/flyers/simple_white/paper.css | 50 +++++++++++ static/flyers/simple_white/style.css | 121 +++++++++++++++++++++++++++ templates/flyers/simple_white.html | 64 ++++++++++++++ 5 files changed, 242 insertions(+), 1 deletion(-) create mode 100644 static/flyers/simple_white/paper.css create mode 100644 static/flyers/simple_white/style.css create mode 100644 templates/flyers/simple_white.html diff --git a/README.md b/README.md index 91a6f4c..438d884 100644 --- a/README.md +++ b/README.md @@ -13,3 +13,9 @@ flask run In teoria sto coso supporta più template ma non ho ancora finito di sistemarlo. Se vuoi aggiungerne uno nuovo metti il template in `templates/flyers/nometemplate.html` e crea la directory `static/flyers/nometemplate` per i files css. + +# Come usare i tamplate esistenti + +Vai nel file app.py ed alla riga #13 passi, come valore di "template_name" il nome del template che vuoi utilizzare. +Ad esempio: +template_name = 'simple_white' diff --git a/static/flyers/simple/style.css b/static/flyers/simple/style.css index e8dd6af..3439423 100644 --- a/static/flyers/simple/style.css +++ b/static/flyers/simple/style.css @@ -58,7 +58,7 @@ h3 { grid-template-rows: auto auto auto auto auto; /* grid-gap: 1.5em; */ grid-gap: 0.5em; - border: 1px dotted black; + /* border: 1px dotted black; */ padding-left: 24px; padding-right: 24px; } diff --git a/static/flyers/simple_white/paper.css b/static/flyers/simple_white/paper.css new file mode 100644 index 0000000..6547679 --- /dev/null +++ b/static/flyers/simple_white/paper.css @@ -0,0 +1,50 @@ +@page { + margin: 0; +} +body { + margin: 0; + position: relative; + box-sizing: border-box; + page-break-after: always; +} + +body.A3 { + width: 297mm; + height: 420mm; +} +body.A3.landscape .sheet { + width: 420mm; + height: 297mm; +} +body.A4 .sheet { + width: 210mm; + height: 297mm; +} +body.A4.landscape .sheet { + width: 297mm; + height: 210mm; +} +body.A5 .sheet { + width: 148mm; + height: 210mm; +} +body.A5.landscape .sheet { + width: 210mm; + height: 148mm; +} +body.letter .sheet { + width: 216mm; + height: 280mm; +} +body.letter.landscape .sheet { + width: 280mm; + height: 216mm; +} +body.legal .sheet { + width: 216mm; + height: 357mm; +} +body.legal.landscape .sheet { + width: 357mm; + height: 216mm; +} diff --git a/static/flyers/simple_white/style.css b/static/flyers/simple_white/style.css new file mode 100644 index 0000000..f855a80 --- /dev/null +++ b/static/flyers/simple_white/style.css @@ -0,0 +1,121 @@ +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; + display: flex; + justify-content: space-between; +} + +h1, h2, h3 { + line-height: 1.2; +} + +h1 { + margin: 0 0 .1em; + color: #ff6e40; + font-size: 10mm; +} +.subtitle { + color: #0d1117; + font-size: 14px; +} + +h3 { + margin-top: 0; + margin-bottom: .2em; + color: #ff6e40; +} + +.intestazione { + padding: 0.5rem 1.5rem; + display: grid; + grid-template-columns: auto auto auto; + margin-bottom: 0.5rem; +} +.logo, +.qrcode { + display: flex; + align-items: center; + height: 100%; +} +.qrcode { + justify-content: flex-end; +} +.logo img, +.qrcode img { + width: 15%; +} + +#events { + display: grid; + grid-template-columns: auto auto auto auto; + grid-template-rows: auto auto auto auto auto; + grid-gap: 0.5em; + 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 { + margin: 0.5rem 1rem; +} +.event_info svg { + height: 12px; + width: 12px; + fill: white; + margin-right: 0.2em; +} +.title { + font-size: 14px; +} +.place_name, +.flex { + font-size: 12px; +} +.center { + display: flex; + flex-direction: column; + align-items: center; +} +.flex, +.location { + display: flex; + align-items: center; +} +.place_name { + color: #ff6e40; +} + +.flyer { + width: 100%; + object-fit: cover; + max-height: 30mm; + border-radius: 4px 4px 0 0; +} + +footer { + color: #0d1117; + width: 100%; + padding: 1rem; + display: grid; + grid-template-columns: 66% 33%; + padding-left: 24px; + padding-right: 24px; +} +.contacts { + padding-left: 24px; +} +.contacts span { + padding-right: 1rem; +} +.contacts svg { + width: 1rem; + fill:#0d1117; +} +.published { + text-align: right; + padding-right: 24px; +} diff --git a/templates/flyers/simple_white.html b/templates/flyers/simple_white.html new file mode 100644 index 0000000..18a6b33 --- /dev/null +++ b/templates/flyers/simple_white.html @@ -0,0 +1,64 @@ + + + + + Balotta cartecea + + + + + + + +
+ +
+

Balotta

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

{{ event.title }}

+
{{ event.when }}
+
+
+ {{ event.place.name }} +
+
+
+
+ {% endfor %} +
+ + + + +