ya funciona razonablemente bien una segunda plantilla de cartel, falta recortarle un poco lo de las imágenes

pull/7/head
Borja Robert 2 years ago
parent 9009f70592
commit dac2b3b8b4

@ -19,6 +19,7 @@
line-height: {templates[templateIndex].address.lineHeight}; line-height: {templates[templateIndex].address.lineHeight};
text-align: {templates[templateIndex].address.textAlign}; text-align: {templates[templateIndex].address.textAlign};
font-weight: {templates[templateIndex].address.fontWeight}; font-weight: {templates[templateIndex].address.fontWeight};
line-height: {templates[templateIndex].address.lineHeight}rem;
" "
> >
{$address} {$address}

@ -18,6 +18,7 @@
font-family: {templates[templateIndex].content.fontFamily}; font-family: {templates[templateIndex].content.fontFamily};
text-align: {templates[templateIndex].content.textAlign}; text-align: {templates[templateIndex].content.textAlign};
font-weight: {templates[templateIndex].content.fontWeight}; font-weight: {templates[templateIndex].content.fontWeight};
line-height: {templates[templateIndex].content.lineHeight}rem;
" "
> >
{@html $content} {@html $content}

@ -49,6 +49,7 @@
font-family: {templates[templateIndex].date.fontFamily}; font-family: {templates[templateIndex].date.fontFamily};
text-align: {templates[templateIndex].date.textAlign}; text-align: {templates[templateIndex].date.textAlign};
font-weight: {templates[templateIndex].date.fontWeight}; font-weight: {templates[templateIndex].date.fontWeight};
line-height: {templates[templateIndex].date.lineHeight}rem;
" "
> >
{newdate.date} {newdate.date}
@ -67,6 +68,7 @@
font-family: {templates[templateIndex].time.fontFamily}; font-family: {templates[templateIndex].time.fontFamily};
text-align: {templates[templateIndex].time.textAlign}; text-align: {templates[templateIndex].time.textAlign};
font-weight: {templates[templateIndex].time.fontWeight}; font-weight: {templates[templateIndex].time.fontWeight};
line-height: {templates[templateIndex].time.lineHeight}rem;
" "
> >
{newdate.time} {newdate.time}
@ -78,9 +80,7 @@
position: absolute; position: absolute;
text-transform: uppercase; text-transform: uppercase;
overflow: hidden; overflow: hidden;
display: flex; display: block;
justify-content: center;
align-items: start;
} }
.time { .time {

@ -18,6 +18,7 @@
font-family: {templates[templateIndex].subtitle.fontFamily}; font-family: {templates[templateIndex].subtitle.fontFamily};
text-align: {templates[templateIndex].subtitle.textAlign}; text-align: {templates[templateIndex].subtitle.textAlign};
font-weight: {templates[templateIndex].subtitle.fontWeight}; font-weight: {templates[templateIndex].subtitle.fontWeight};
line-height: {templates[templateIndex].subtitle.lineHeight}rem;
" "
> >
{$subtitle} {$subtitle}

@ -18,6 +18,8 @@
font-family: {templates[templateIndex].title.fontFamily}; font-family: {templates[templateIndex].title.fontFamily};
text-align: {templates[templateIndex].title.textAlign}; text-align: {templates[templateIndex].title.textAlign};
font-weight: {templates[templateIndex].title.fontWeight}; font-weight: {templates[templateIndex].title.fontWeight};
line-height: {templates[templateIndex].title.lineHeight}rem;
" "
> >
{$title} {$title}
@ -31,6 +33,6 @@
overflow: hidden; overflow: hidden;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: end; align-items: center;
} }
</style> </style>

@ -18,6 +18,7 @@
font-family: {templates[templateIndex].weekday.fontFamily}; font-family: {templates[templateIndex].weekday.fontFamily};
text-align: {templates[templateIndex].weekday.textAlign}; text-align: {templates[templateIndex].weekday.textAlign};
font-weight: {templates[templateIndex].weekday.fontWeight}; font-weight: {templates[templateIndex].weekday.fontWeight};
line-height: {templates[templateIndex].weekday.lineHeight}rem;
" "
> >
{$weekday} {$weekday}

@ -17,36 +17,36 @@ export const azul = {
fontWeight: 700 fontWeight: 700
}, },
title: { title: {
top: 320, top: 487,
height: 6, height: 7.5,
left: 1, left: 1,
right: 1, right: 1,
fontSize: 2.9, fontSize: 3,
color: "firebrick", color: "firebrick",
fontFamily: "Gill Sans, sans-serif", fontFamily: "sans-serif",
lineHeight: 2.5, lineHeight: 2.4,
textAlign: "left", textAlign: "right",
fontWeight: 700 fontWeight: 700
}, },
subtitle: { subtitle: {
top: 420, top: 620,
height: 3, height: 1.4,
left: 1, left: 1,
right: 2, right: 2,
fontSize: 1.2, fontSize: 1.6,
color: "#787", color: "white",
fontFamily: "Gill Sans, sans-serif", fontFamily: "Gill Sans, sans-serif",
lineHeight: 1.5, lineHeight: 1.5,
textAlign: "left", textAlign: "center",
fontWeight: 700 fontWeight: 400
}, },
content: { content: {
top: 480, top: 480,
height: 8.5, height: 8.5,
left: 1.5, left: 1.5,
right: 17, right: 17,
fontSize: 0.8, fontSize: 0,
color: "#222", color: "#222",
fontFamily: "sans-serif", fontFamily: "sans-serif",
lineHeight: 1.1, lineHeight: 1.1,
@ -54,34 +54,34 @@ export const azul = {
fontWeight: 700 fontWeight: 700
}, },
date: { date: {
top: 625, top: 25,
height: 4, height: 4,
left: 18.5, left: 5,
right: 4, right: 1,
fontSize: 1.1, fontSize: 1.1,
color: "#fff", color: "#fff",
fontFamily: "sans-serif", fontFamily: "sans-serif",
lineHeight: 1, lineHeight: 1,
textAlign: "left", textAlign: "right",
fontWeight: 700 fontWeight: 700
}, },
time: { time: {
top: 645, top: 65,
height: 2, height: 2,
left: 18.5, left: 18.5,
right: 5, right: 1,
fontSize: 1.8, fontSize: 1.8,
color: "#fff", color: "#fff",
fontFamily: "sans-serif", fontFamily: "sans-serif",
lineHeight: 1, lineHeight: 2,
textAlign: "left", textAlign: "right",
fontWeight: 700 fontWeight: 700
}, },
weekday: { weekday: {
top: 600, top: 25,
height: 1.5, height: 1.5,
left: 18.5, left: 1,
right: 5, right: 10,
fontSize: 1.3, fontSize: 1.3,
color: "#fff", color: "#fff",
fontFamily: "sans-serif", fontFamily: "sans-serif",
@ -90,15 +90,15 @@ export const azul = {
fontWeight: 700 fontWeight: 700
}, },
address: { address: {
top: 625, top: 660,
height: 4.5, height: 5.5,
left: 2, left: 2,
right: 20, right: 2,
fontSize: 1, fontSize: 1.2,
color: "firebrick", color: "white",
fontFamily: "sans-serif", fontFamily: "sans-serif",
lineHeight: 1.5, lineHeight: 1.8,
textAlign: "left", textAlign: "left",
fontWeight: 700 fontWeight: 400
}, },
} }

@ -18,6 +18,7 @@
font-family: {templates[templateIndex].heading.fontFamily}; font-family: {templates[templateIndex].heading.fontFamily};
text-align: {templates[templateIndex].heading.textAlign}; text-align: {templates[templateIndex].heading.textAlign};
font-weight: {templates[templateIndex].heading.fontWeight}; font-weight: {templates[templateIndex].heading.fontWeight};
line-height: {templates[templateIndex].heading.lineHeight}rem;
" "
> >
{$heading} {$heading}

@ -54,7 +54,7 @@ export const verde = {
}, },
date: { date: {
top: 625, top: 625,
height: 4, height: 1,
left: 18.5, left: 18.5,
right: 4, right: 4,
fontSize: 1.1, fontSize: 1.1,
@ -65,14 +65,14 @@ export const verde = {
fontWeight: 700 fontWeight: 700
}, },
time: { time: {
top: 645, top: 647,
height: 2, height: 2,
left: 18.5, left: 18.5,
right: 5, right: 5,
fontSize: 1.8, fontSize: 1.8,
color: "#fff", color: "#fff",
fontFamily: "sans-serif", fontFamily: "sans-serif",
lineHeight: 1, lineHeight: 1.5,
textAlign: "center", textAlign: "center",
fontWeight: 700 fontWeight: 700
}, },

@ -9,29 +9,57 @@
content="Aplicación para la generación automática de carteles de actividades de DMD" content="Aplicación para la generación automática de carteles de actividades de DMD"
/> />
</svelte:head> </svelte:head>
<main>
<div class="main"> <p>Elige la plantilla que quieras usar para tu diseño</p>
<ul> <div class="main">
{#each templates as template} <ul>
<li><a href="/{template.name}">{template.name}</a></li> {#each templates as template}
{/each} <li>
</ul> <a href="/{template.name}"
</div> ><img src="/{template.image}" alt="Plantilla en blanco estilo {template.name}" />
<div class="caption">{template.name}</div></a
>
</li>
{/each}
</ul>
</div>
</main>
<style> <style>
main {
max-width: 800px;
margin: 0 auto;
}
.main { .main {
display: grid; display: grid;
grid-template-columns: repeat(4, min-content); grid-auto-columns: 1fr;
max-width: 900px; grid-auto-rows: 1fr;
margin: 0 auto; grid-gap: 1rem;
border: 1px solid blue; padding: 1rem 0;
padding: 1rem; }
p {
font-size: 1.5rem;
}
ul {
list-style: none;
} }
li { li {
line-height: 2rem; line-height: 2rem;
display: inline-block;
padding: 0.5rem;
background-color: rgb(80, 80, 80);
margin: 0 0.5rem;
} }
a { a {
text-transform: capitalize; text-transform: capitalize;
cursor: pointer; cursor: pointer;
color: white;
text-decoration: none;
text-align: center;
font-weight: 700;
font-size: 1.2rem;
}
img {
max-height: 200px;
} }
</style> </style>

Loading…
Cancel
Save