griglia 4x6

This commit is contained in:
romo 2023-10-17 18:46:54 +02:00
parent 30f9112422
commit 59eadcb7ba
2 changed files with 68 additions and 22 deletions

View file

@ -15,8 +15,8 @@
overflow: auto;
}
.flyer {
object-fit: cover;
max-height: 150px;
object-fit: cover;
max-height: 150px;
}
@ -32,9 +32,14 @@ h1, h2, h3 {
}
h1 {
margin: 0 0 .2em;
/* margin: 0 0 .2em; */
margin: 0 0 .1em;
color: #ff6e40;
font-size: 20mm;
/* font-size: 20mm; */
font-size: 10mm;
}
.subtitle {
font-size: 14px;
}
h3 {
@ -44,10 +49,12 @@ h3 {
}
.intestazione {
padding: 1.5rem;
/* padding: 1.5rem; */
padding: 0.5rem 1.5rem;
display: grid;
grid-template-columns: auto auto auto;
margin-bottom: 1.5rem;
/* margin-bottom: 1.5rem; */
margin-bottom: 0.5rem;
}
.logo,
.qrcode {
@ -60,7 +67,8 @@ h3 {
}
.logo img,
.qrcode img {
width: 25%;
/* width: 25%; */
width: 15%;
}
#events {
@ -78,17 +86,26 @@ h3 {
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;
/* margin: .5rem 1rem; */
}
.center {
display: flex;

View file

@ -3,6 +3,8 @@ body {
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;
display: flex;
justify-content: space-between;
}
h1, h2, h3 {
@ -10,9 +12,14 @@ h1, h2, h3 {
}
h1 {
margin: 0 0 .2em;
/* margin: 0 0 .2em; */
margin: 0 0 .1em;
color: #ff6e40;
font-size: 20mm;
/* font-size: 20mm; */
font-size: 10mm;
}
.subtitle {
font-size: 14px;
}
h3 {
@ -22,10 +29,12 @@ h3 {
}
.intestazione {
padding: 1.5rem;
/* padding: 1.5rem; */
padding: 0.5rem 1.5rem;
display: grid;
grid-template-columns: auto auto auto;
margin-bottom: 1.5rem;
/* margin-bottom: 1.5rem; */
margin-bottom: 0.5rem;
}
.logo,
.qrcode {
@ -38,14 +47,17 @@ h3 {
}
.logo img,
.qrcode img {
width: 25%;
/* width: 25%; */
width: 15%;
}
#events {
display: grid;
/* grid-template-columns: 33% 33% 33%; */
grid-template-columns: auto auto auto;
grid-gap: 1.5em;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto auto auto auto;
/* grid-gap: 1.5em; */
grid-gap: 0.5em;
border: 1px dotted black;
padding-left: 24px;
padding-right: 24px;
@ -55,16 +67,30 @@ h3 {
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;
/* height: 24px;
width: 24px; */
height: 12px;
width: 12px;
fill: white;
margin-right: 0.2em;
}
.title {
/* font-size: 16px; */
font-size: 14px;
}
.place_name,
.flex {
/* font-size: 14px; */
font-size: 12px;
}
.title,
.flex,
.location {
margin: .5rem 1rem;
/* margin: .5rem 1rem; */
}
.center {
display: flex;
@ -73,9 +99,11 @@ h3 {
}
.flex,
.location {
display: grid;
/* display: grid;
grid-template-columns: auto auto;
justify-content: start;
justify-content: start; */
display: flex;
align-items: center;
}
.place_name {
color: #ff6e40;
@ -87,7 +115,8 @@ h3 {
.flyer {
width: 100%;
object-fit: cover;
max-height: 40mm;
/* max-height: 40mm; */
max-height: 30mm;
border-radius: 4px 4px 0 0;
}