gancio-flyers/static/flyers/asymmetric/style.css

155 lines
2.4 KiB
CSS

.eventcol {
display: flex;
flex-direction: column;
gap: 3mm;
height: fit-content;
/*! max-height: 350mm; */
/*! height: ; */
}
.flyer-container {
max-height: fit-content;
min-content: 40mm;
max-content: 50mm;
/* border: 1px solid rgb(253, 140, 140); */
overflow: auto;
}
.flyer {
object-fit: cover;
max-height: 50px;
}
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;
}
h1, h2, h3 {
line-height: 1.2;
}
h1 {
/* margin: 0 0 .2em; */
margin: 0 0 .1em;
color: #ff6e40;
/* font-size: 20mm; */
font-size: 10mm;
}
.subtitle {
font-size: 14px;
}
h3 {
margin-top: 0;
margin-bottom: .2em;
color: #ff6e40;
}
.intestazione {
/* padding: 1.5rem; */
padding: 0.5rem 1.5rem;
display: grid;
grid-template-columns: auto auto auto;
/* margin-bottom: 1.5rem; */
margin-bottom: 0.5rem;
}
.logo,
.qrcode {
display: flex;
align-items: center;
height: 100%;
}
.qrcode {
justify-content: flex-end;
}
.logo img,
.qrcode img {
/* width: 25%; */
width: 15%;
}
#events {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 1.5em;
border: 1px dotted black;
padding-left: 24px;
padding-right: 24px;
height: 379mm;
}
.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: 24px;
width: 24px;
fill: white;
margin-right: 0.2em;
}
.title {
font-size: 14px;
}
.place_name,
.flex {
font-size: 12px;
}
.title,
.flex,
.location {
/* margin: .5rem 1rem; */
}
.center {
display: flex;
flex-direction: column;
align-items: center;
}
.flex,
.location {
display: grid;
grid-template-columns: auto auto;
justify-content: start;
}
.place_name {
color: #ff6e40;
}
.flyer-container {
background: #0d1117;
}
.flyer {
width: 100%;
object-fit: cover;
border-radius: 4px 4px 0 0;
}
footer {
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:#c9d1d9;
}
.published {
text-align: right;
padding-right: 24px;
}