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 0000000..77338bc Binary files /dev/null and b/static/qr-code.png differ 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 @@