brobert
/
carteles
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

templates (#6)

Browse Source 
Co-authored-by: Borja Robert <borja@brobert.net>
Reviewed-on: #6
pull/12/head
brobert 2 years ago
parent fb2bfa7808
commit ab3eaad3a8
10 changed files with 242 additions and 227 deletions
Show Stats Download Patch File Download Diff File

2
src/app.css
Unescape Escape View File

@ -32,7 +32,7 @@ p {
} }
ul,ol { ul,ol {
margin-left: 2rem; margin-left: 1rem;
} }

4
src/lib/form/Colabs.svelte
Unescape Escape View File

@ -57,10 +57,11 @@
<style> <style>
.colabs { .colabs {
display: grid; display: grid;
grid-template-columns: repeat(5, min-content); grid-template-columns: repeat(3, min-content);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.organization { .organization {
position: relative; position: relative;
display: grid; display: grid;
@ -88,6 +89,7 @@
cursor: pointer; cursor: pointer;
background-color: white; background-color: white;
padding: 0 0.25rem; padding: 0 0.25rem;
z-index: 2;
} }
input { input {

7
src/lib/form/Form.svelte
Unescape Escape View File

@ -61,7 +61,8 @@
toolbar: quillOptions toolbar: quillOptions
}, },
theme: 'snow', theme: 'snow',
placeholder: 'Detalles del evento' placeholder:
'Participan:\nFernando Marín (DMD)\nPresenta:\nFernanda del Castillo (DMD Asturias)'
}); });
}); });
</script> </script>
@ -108,7 +109,7 @@
<textarea bind:value={$address} type="text" name="address" /> <textarea bind:value={$address} type="text" name="address" />
</div> </div>
</div> </div>
<div class="form-group media"> <div class="form-group ">
<label for="organizedBy">Organiza:</label> <label for="organizedBy">Organiza:</label>
<Organized /> <Organized />
<label for="colabs">Colabora:</label> <label for="colabs">Colabora:</label>
@ -158,7 +159,7 @@
} }
button { button {
margin: 0 1rem; margin: 1rem;
padding: 0.5rem; padding: 0.5rem;
font-size: 1.1rem; font-size: 1.1rem;
cursor: pointer; cursor: pointer;

7
src/lib/form/Organized.svelte
Unescape Escape View File

@ -22,7 +22,7 @@
}; };
</script> </script>
<div class="organized-by"> <div class="form-organized-by">
{#if $organizedBy[0]} {#if $organizedBy[0]}
{#each $organizedBy as organization, i} {#each $organizedBy as organization, i}
<div class="organization"> <div class="organization">
@ -55,7 +55,7 @@
/> />
<style> <style>
.organized-by { .form-organized-by {
display: grid; display: grid;
grid-template-columns: repeat(5, min-content); grid-template-columns: repeat(5, min-content);
align-items: center; align-items: center;
@ -87,11 +87,14 @@
cursor: pointer; cursor: pointer;
background-color: white; background-color: white;
padding: 0 0.25rem; padding: 0 0.25rem;
z-index: 2;
} }
input { input {
display: block; display: block;
max-width: 100px; max-width: 100px;
} }
button { button {
display: block; display: block;
padding: 0.5rem; padding: 0.5rem;

221
src/lib/preview/Preview.svelte
Unescape Escape View File

@ -1,4 +1,5 @@
<script> <script>
import './verde.css';
import { import {
title, title,
subtitle, subtitle,
@ -95,224 +96,4 @@
</div> </div>
<style> <style>
.preview {
padding: 1rem;
display: grid;
justify-content: center;
grid-template-columns: 1fr;
}
.result {
display: block;
aspect-ratio: 1/1.4142;
min-height: 842px;
align-self: center;
/* background-color: rebeccapurple; */
width: auto;
background-image: url('/imagen01.png');
background-size: contain;
position: relative;
padding: 1rem;
/* border-radius: 0.5rem; */
}
.heading {
position: absolute;
top: 300px;
left: 1rem;
right: 1rem;
font-size: 1rem;
color: grey;
font-variant: small-caps;
height: 1.2rem;
overflow: hidden;
}
.title {
position: absolute;
top: 320px;
left: 1rem;
right: 1rem;
font-family: 'Gill Sans', sans-serif;
font-size: 2.9rem;
font-variant: small-caps;
line-height: 2.5rem;
color: firebrick;
font-weight: 600;
height: 5rem;
overflow: hidden;
display: flex;
justify-content: center;
align-items: end;
text-align: center;
}
.subtitle {
position: absolute;
display: flex;
top: 410px;
left: 1rem;
right: 2rem;
font-size: 1.2rem;
color: #787;
text-transform: uppercase;
height: 3rem;
overflow: hidden;
text-align: center;
align-items: start;
justify-content: center;
}
.content {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
top: 480px;
left: 2rem;
right: 16rem;
height: 7.5rem;
font-size: 1rem;
color: #222;
line-height: 1.5rem;
overflow: hidden;
}
.weekday {
position: absolute;
text-transform: uppercase;
top: 605px;
left: 22rem;
right: 5rem;
color: white;
max-height: 2rem;
font-size: 1.3rem;
font-weight: 700;
overflow: hidden;
text-align: center;
}
.date {
position: absolute;
text-transform: uppercase;
top: 630px;
left: 22rem;
right: 4rem;
font-size: 1.1rem;
/* font-weight: 700; */
color: white;
max-height: 2rem;
overflow: hidden;
text-align: center;
}
.time {
position: absolute;
top: 650px;
left: 22rem;
right: 5rem;
font-size: 1.8rem;
color: white;
max-height: 2rem;
overflow: hidden;
text-align: center;
font-weight: 700;
}
.address {
position: absolute;
top: 620px;
left: 2rem;
right: 20rem;
font-size: 1rem;
text-align: center;
font-weight: 700;
line-height: 1.5rem;
font-family: sans-serif;
color: firebrick;
max-height: 4.5rem;
overflow: hidden;
white-space: pre-wrap;
}
.imagetitle {
position: absolute;
top: 720px;
font-size: 0.8rem;
color: #444;
}
.organized-by {
position: absolute;
top: 740px;
left: 1rem;
right: 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%/3, max(64px, 100%/5)), 1fr));
grid-template-rows: min-content;
grid-auto-rows: auto;
justify-content: center;
align-items: center;
}
.organization {
margin: 0 1rem;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
}
.organization img {
max-height: 48px;
max-width: 100px;
margin: 0 auto;
opacity: 75%;
}
.caption {
margin: 0.5rem 0;
font-size: 0.7rem;
font-family: sans-serif;
text-transform: uppercase;
color: #666;
}
.orgcolab {
position: absolute;
top: 720px;
height: 7rem;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: min-content 1fr;
grid-gap: 0.25rem;
justify-content: start;
align-items: center;
width: 100%;
}
.org {
grid-row: 1/2;
grid-column: 1/2;
font-size: 0.8rem;
}
.colab {
font-size: 0.8rem;
grid-row: 1/2;
grid-column: 2/3;
}
.orgmixed {
grid-row: 2/3;
grid-column: 1/2;
display: flex;
}
.colabmixed {
grid-row: 2/3;
grid-column: 2/3;
display: flex;
}
</style> </style>

226
src/lib/preview/verde.css
Unescape Escape View File

@ -0,0 +1,226 @@
.preview {
padding: 0.5rem;
display: grid;
justify-content: center;
grid-template-columns: 1fr;
align-items: start;
}
.result {
display: block;
aspect-ratio: 1/1.4142;
min-height: 842px;
align-self: center;
/* background-color: rebeccapurple; */
width: auto;
background-image: url('/imagen01.png');
background-size: contain;
position: relative;
padding: 1rem;
/* border-radius: 0.5rem; */
}
.heading {
position: absolute;
top: 300px;
left: 1rem;
right: 1rem;
font-size: 1rem;
color: grey;
font-variant: small-caps;
height: 1.2rem;
overflow: hidden;
}
.title {
position: absolute;
top: 320px;
left: 1rem;
right: 1rem;
font-family: 'Gill Sans', sans-serif;
font-size: 2.9rem;
font-variant: small-caps;
line-height: 2.5rem;
color: firebrick;
font-weight: 600;
height: 5rem;
overflow: hidden;
display: flex;
justify-content: center;
align-items: end;
text-align: center;
}
.subtitle {
position: absolute;
display: flex;
top: 410px;
left: 1rem;
right: 2rem;
font-size: 1.2rem;
color: #787;
text-transform: uppercase;
height: 3rem;
overflow: hidden;
text-align: center;
align-items: start;
justify-content: center;
}
.content {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
top: 480px;
left: 1.5rem;
right: 17rem;
height: 8.5rem;
font-size: 0.8rem;
color: #222;
line-height: 1rem;
overflow: hidden;
}
.weekday {
position: absolute;
text-transform: uppercase;
top: 600px;
left: 18.5rem;
right: 5rem;
color: white;
max-height: 2rem;
font-size: 1.3rem;
font-weight: 700;
overflow: hidden;
text-align: center;
}
.date {
position: absolute;
text-transform: uppercase;
top: 625px;
left: 18.5rem;
right: 4rem;
font-size: 1.1rem;
font-weight: 700;
color: white;
max-height: 2rem;
overflow: hidden;
text-align: center;
}
.time {
position: absolute;
top: 645px;
left: 18.5rem;
right: 5rem;
font-size: 1.8rem;
color: white;
max-height: 2rem;
overflow: hidden;
text-align: center;
font-weight: 700;
}
.address {
position: absolute;
display: grid;
top: 620px;
left: 2rem;
right: 20rem;
font-size: 1rem;
text-align: center;
font-weight: 700;
line-height: 1.5rem;
font-family: sans-serif;
color: firebrick;
height: 4.5rem;
overflow: hidden;
white-space: pre-wrap;
align-items: center;
justify-content: center;
}
.imagetitle {
position: absolute;
top: 720px;
font-size: 0.8rem;
color: #444;
}
.organized-by {
position: absolute;
top: 740px;
left: 1rem;
right: 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%/3, max(64px, 100%/5)), 1fr));
grid-template-rows: min-content;
grid-auto-rows: auto;
justify-content: center;
align-items: center;
}
.organization {
margin: 0 1rem;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
}
.organization img {
max-height: 48px;
max-width: 100px;
margin: 0 auto;
opacity: 75%;
}
.caption {
margin: 0.5rem 0;
font-size: 0.7rem;
font-family: sans-serif;
text-transform: uppercase;
color: #666;
}
.orgcolab {
position: absolute;
top: 720px;
height: 7rem;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: min-content 1fr;
grid-gap: 0.25rem;
justify-content: start;
align-items: center;
width: 100%;
}
.org {
grid-row: 1/2;
grid-column: 1/2;
font-size: 0.8rem;
}
.colab {
font-size: 0.8rem;
grid-row: 1/2;
grid-column: 2/3;
}
.orgmixed {
grid-row: 2/3;
grid-column: 1/2;
display: flex;
}
.colabmixed {
grid-row: 2/3;
grid-column: 2/3;
display: flex;
}

1
src/lib/templates/Template.svelte
Unescape Escape View File

@ -1 +1,2 @@
<script> <script>
</script>

1
src/routes/+page.svelte
Unescape Escape View File

@ -23,6 +23,7 @@
grid-gap: 0.5rem; grid-gap: 0.5rem;
min-height: calc(100vh - 5rem); min-height: calc(100vh - 5rem);
} }
.form { .form {
grid-column: 1/2; grid-column: 1/2;
background-color: rgb(230, 240, 240); background-color: rgb(230, 240, 240);

BIN
static/imagen01.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 866 KiB

After

Width:  |  Height:  |  Size: 890 KiB

BIN
static/imagen01_old.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 866 KiB

Write Preview
Loading…
Cancel
Save