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

allpx (#15)

Browse Source 
Todas las plantillas tienen TODO definido en pixels y usan un tipo de letra con SmallCaps incorporadas para que todo se ajuste perfectamente

Co-authored-by: Borja Robert <borja@brobert.net>
Reviewed-on: #15
main
brobert 2 years ago
parent bf74361fc3
commit 0e3088d236
24 changed files with 702 additions and 691 deletions
Show Stats Download Patch File Download Diff File

27
src/app.css
Unescape Escape View File

@ -1,24 +1,18 @@
@import '@fontsource/fira-mono'; @import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@300;400;700&display=swap');
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 14px;
font-family: 'Arial', sans-serif;
}
html {
-webkit-text-size-adjust: 100%; /* 2 */
} }
:root { :root {
font-family: Ubuntu, Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, font-family: Arial, sans-serif;
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--font-mono: 'Fira Mono', monospace;
--pure-white: #ffffff;
--primary-color: #b9c6d2;
--secondary-color: #d0dde9;
--tertiary-color: #edf0f8;
--accent-color: #ff3e00;
--heading-color: rgba(0, 0, 0, 0.7);
--text-color: #444444;
--background-without-opacity: rgba(255, 255, 255, 0.7);
--column-width: 42rem;
--column-margin-top: 4rem;
} }
body { body {
@ -26,11 +20,6 @@ body {
margin: 0; margin: 0;
} }
p {
line-height: 1.5;
}
ul,ol { ul,ol {
margin-left: 1rem; margin-left: 1rem;
} }

12
src/lib/components/Address.svelte
Unescape Escape View File

@ -2,7 +2,7 @@
import { templates } from '$lib/templates/templates'; import { templates } from '$lib/templates/templates';
/** @type number */ export let templateIndex; /** @type number */ export let templateIndex;
import { address } from '$lib/stores/store'; import { address, multiplier } from '$lib/stores/store';
</script> </script>
{#if templates[templateIndex] && $address} {#if templates[templateIndex] && $address}
@ -10,16 +10,16 @@
class="address" class="address"
style=" style="
top: {templates[templateIndex].address.top}px; top: {templates[templateIndex].address.top}px;
height: {templates[templateIndex].address.height}rem; height: {templates[templateIndex].address.height}px;
left: {templates[templateIndex].address.left}rem; left: {templates[templateIndex].address.left}px;
right: {templates[templateIndex].address.right}rem; right: {templates[templateIndex].address.right}px;
color: {templates[templateIndex].address.color}; color: {templates[templateIndex].address.color};
font-size: {templates[templateIndex].address.fontSize}rem; font-size: {templates[templateIndex].address.fontSize * $multiplier}px;
font-family: {templates[templateIndex].address.fontFamily}; font-family: {templates[templateIndex].address.fontFamily};
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; line-height: {templates[templateIndex].address.lineHeight}px;
" "
> >
{$address} {$address}

12
src/lib/components/City.svelte
Unescape Escape View File

@ -2,7 +2,7 @@
import { templates } from '$lib/templates/templates'; import { templates } from '$lib/templates/templates';
/** @type number */ export let templateIndex; /** @type number */ export let templateIndex;
import { city } from '$lib/stores/store'; import { city, multiplier } from '$lib/stores/store';
</script> </script>
{#if templates[templateIndex] && $city} {#if templates[templateIndex] && $city}
@ -10,16 +10,16 @@
class="city" class="city"
style=" style="
top: {templates[templateIndex].city.top}px; top: {templates[templateIndex].city.top}px;
height: {templates[templateIndex].city.height}rem; height: {templates[templateIndex].city.height}px;
left: {templates[templateIndex].city.left}rem; left: {templates[templateIndex].city.left}px;
right: {templates[templateIndex].city.right}rem; right: {templates[templateIndex].city.right}px;
color: {templates[templateIndex].city.color}; color: {templates[templateIndex].city.color};
font-size: {templates[templateIndex].city.fontSize}rem; font-size: {templates[templateIndex].city.fontSize * $multiplier}px;
font-family: {templates[templateIndex].city.fontFamily}; font-family: {templates[templateIndex].city.fontFamily};
line-height: {templates[templateIndex].city.lineHeight}; line-height: {templates[templateIndex].city.lineHeight};
text-align: {templates[templateIndex].city.textAlign}; text-align: {templates[templateIndex].city.textAlign};
font-weight: {templates[templateIndex].city.fontWeight}; font-weight: {templates[templateIndex].city.fontWeight};
line-height: {templates[templateIndex].city.lineHeight}rem; line-height: {templates[templateIndex].city.lineHeight}px;
" "
> >
{$city} {$city}

12
src/lib/components/Content.svelte
Unescape Escape View File

@ -2,7 +2,7 @@
import { templates } from '$lib/templates/templates'; import { templates } from '$lib/templates/templates';
/** @type number */ export let templateIndex; /** @type number */ export let templateIndex;
import { content } from '$lib/stores/store'; import { content, multiplier } from '$lib/stores/store';
</script> </script>
{#if templates[templateIndex] && $content} {#if templates[templateIndex] && $content}
@ -10,15 +10,15 @@
class="content" class="content"
style=" style="
top: {templates[templateIndex].content.top}px; top: {templates[templateIndex].content.top}px;
height: {templates[templateIndex].content.height}rem; height: {templates[templateIndex].content.height}px;
left: {templates[templateIndex].content.left}rem; left: {templates[templateIndex].content.left}px;
right: {templates[templateIndex].content.right}rem; right: {templates[templateIndex].content.right}px;
color: {templates[templateIndex].content.color}; color: {templates[templateIndex].content.color};
font-size: {templates[templateIndex].content.fontSize}rem; font-size: {templates[templateIndex].content.fontSize * $multiplier}px;
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; line-height: {templates[templateIndex].content.lineHeight}px;
" "
> >
{@html $content} {@html $content}

12
src/lib/components/Date.svelte
Unescape Escape View File

@ -1,6 +1,6 @@
<script> <script>
import { templates } from '$lib/templates/templates'; import { templates } from '$lib/templates/templates';
import { date } from '$lib/stores/store'; import { date, multiplier } from '$lib/stores/store';
import { convertDate } from '$lib/convertDate'; import { convertDate } from '$lib/convertDate';
/** @type number */ export let templateIndex; /** @type number */ export let templateIndex;
@ -16,15 +16,15 @@
class="date" class="date"
style=" style="
top: {templates[templateIndex].date.top}px; top: {templates[templateIndex].date.top}px;
height: {templates[templateIndex].date.height}rem; height: {templates[templateIndex].date.height}px;
left: {templates[templateIndex].date.left}rem; left: {templates[templateIndex].date.left}px;
right: {templates[templateIndex].date.right}rem; right: {templates[templateIndex].date.right}px;
color: {templates[templateIndex].date.color}; color: {templates[templateIndex].date.color};
font-size: {templates[templateIndex].date.fontSize}rem; font-size: {templates[templateIndex].date.fontSize * $multiplier}px;
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; line-height: {templates[templateIndex].date.lineHeight}px;
" "
> >
{newdate} {newdate}

13
src/lib/components/Heading.svelte
Unescape Escape View File

@ -2,7 +2,7 @@
import { templates } from '$lib/templates/templates'; import { templates } from '$lib/templates/templates';
/** @type number */ export let templateIndex; /** @type number */ export let templateIndex;
import { heading } from '$lib/stores/store'; import { heading, multiplier } from '$lib/stores/store';
</script> </script>
{#if $heading && templates[templateIndex].heading} {#if $heading && templates[templateIndex].heading}
@ -10,15 +10,15 @@
class="heading" class="heading"
style=" style="
top: {templates[templateIndex].heading.top}px; top: {templates[templateIndex].heading.top}px;
height: {templates[templateIndex].heading.height}rem; height: {templates[templateIndex].heading.height}px;
left: {templates[templateIndex].heading.left}rem; left: {templates[templateIndex].heading.left}px;
right: {templates[templateIndex].heading.right}rem; right: {templates[templateIndex].heading.right}px;
color: {templates[templateIndex].heading.color}; color: {templates[templateIndex].heading.color};
font-size: {templates[templateIndex].heading.fontSize}rem; font-size: {templates[templateIndex].heading.fontSize * $multiplier}px;
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; line-height: {templates[templateIndex].heading.lineHeight}px;
" "
> >
{$heading} {$heading}
@ -28,7 +28,6 @@
<style> <style>
.heading { .heading {
position: absolute; position: absolute;
font-variant: small-caps;
overflow: hidden; overflow: hidden;
} }
</style> </style>

14
src/lib/components/Subtitle.svelte
Unescape Escape View File

@ -2,7 +2,8 @@
import { templates } from '$lib/templates/templates'; import { templates } from '$lib/templates/templates';
/** @type number */ export let templateIndex; /** @type number */ export let templateIndex;
import { subtitle } from '$lib/stores/store'; import { subtitle, multiplier } from '$lib/stores/store';
console.log($multiplier);
</script> </script>
{#if templates[templateIndex] && $subtitle} {#if templates[templateIndex] && $subtitle}
@ -10,15 +11,15 @@
class="subtitle" class="subtitle"
style=" style="
top: {templates[templateIndex].subtitle.top}px; top: {templates[templateIndex].subtitle.top}px;
height: {templates[templateIndex].subtitle.height}rem; height: {templates[templateIndex].subtitle.height}px;
left: {templates[templateIndex].subtitle.left}rem; left: {templates[templateIndex].subtitle.left}px;
right: {templates[templateIndex].subtitle.right}rem; right: {templates[templateIndex].subtitle.right}px;
color: {templates[templateIndex].subtitle.color}; color: {templates[templateIndex].subtitle.color};
font-size: {templates[templateIndex].subtitle.fontSize}rem; font-size: {templates[templateIndex].subtitle.fontSize * $multiplier}px;
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; line-height: {templates[templateIndex].subtitle.lineHeight}px;
" "
> >
{$subtitle} {$subtitle}
@ -28,7 +29,6 @@
<style> <style>
.subtitle { .subtitle {
position: absolute; position: absolute;
font-variant: small-caps;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
justify-content: center; justify-content: center;

12
src/lib/components/Time.svelte
Unescape Escape View File

@ -2,7 +2,7 @@
import { templates } from '$lib/templates/templates'; import { templates } from '$lib/templates/templates';
/** @type number */ export let templateIndex; /** @type number */ export let templateIndex;
import { time } from '$lib/stores/store'; import { time, multiplier } from '$lib/stores/store';
</script> </script>
{#if templates[templateIndex] && $time !== ''} {#if templates[templateIndex] && $time !== ''}
@ -10,15 +10,15 @@
class="time" class="time"
style=" style="
top: {templates[templateIndex].time.top}px; top: {templates[templateIndex].time.top}px;
height: {templates[templateIndex].time.height}rem; height: {templates[templateIndex].time.height}px;
left: {templates[templateIndex].time.left}rem; left: {templates[templateIndex].time.left}px;
right: {templates[templateIndex].time.right}rem; right: {templates[templateIndex].time.right}px;
color: {templates[templateIndex].time.color}; color: {templates[templateIndex].time.color};
font-size: {templates[templateIndex].time.fontSize}rem; font-size: {templates[templateIndex].time.fontSize * $multiplier}px;
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; line-height: {templates[templateIndex].time.lineHeight}px;
" "
> >
{$time} {$time}

13
src/lib/components/Title.svelte
Unescape Escape View File

@ -2,7 +2,7 @@
import { templates } from '$lib/templates/templates'; import { templates } from '$lib/templates/templates';
/** @type number */ export let templateIndex; /** @type number */ export let templateIndex;
import { title } from '$lib/stores/store'; import { title, multiplier } from '$lib/stores/store';
</script> </script>
{#if templates[templateIndex] && $title} {#if templates[templateIndex] && $title}
@ -10,15 +10,15 @@
class="title" class="title"
style=" style="
top: {templates[templateIndex].title.top}px; top: {templates[templateIndex].title.top}px;
height: {templates[templateIndex].title.height}rem; height: {templates[templateIndex].title.height}px;
left: {templates[templateIndex].title.left}rem; left: {templates[templateIndex].title.left}px;
right: {templates[templateIndex].title.right}rem; right: {templates[templateIndex].title.right}px;
color: {templates[templateIndex].title.color}; color: {templates[templateIndex].title.color};
font-size: {templates[templateIndex].title.fontSize}rem; font-size: {templates[templateIndex].title.fontSize * $multiplier}px;
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; line-height: {templates[templateIndex].title.lineHeight}px;
" "
> >
@ -29,7 +29,6 @@
<style> <style>
.title { .title {
position: absolute; position: absolute;
font-variant: small-caps;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
justify-content: center; justify-content: center;

12
src/lib/components/Weekday.svelte
Unescape Escape View File

@ -2,7 +2,7 @@
import { templates } from '$lib/templates/templates'; import { templates } from '$lib/templates/templates';
/** @type number */ export let templateIndex; /** @type number */ export let templateIndex;
import { weekday } from '$lib/stores/store'; import { weekday, multiplier } from '$lib/stores/store';
</script> </script>
{#if templates[templateIndex] && $weekday} {#if templates[templateIndex] && $weekday}
@ -10,15 +10,15 @@
class="weekday" class="weekday"
style=" style="
top: {templates[templateIndex].weekday.top}px; top: {templates[templateIndex].weekday.top}px;
height: {templates[templateIndex].weekday.height}rem; height: {templates[templateIndex].weekday.height}px;
left: {templates[templateIndex].weekday.left}rem; left: {templates[templateIndex].weekday.left}px;
right: {templates[templateIndex].weekday.right}rem; right: {templates[templateIndex].weekday.right}px;
color: {templates[templateIndex].weekday.color}; color: {templates[templateIndex].weekday.color};
font-size: {templates[templateIndex].weekday.fontSize}rem; font-size: {templates[templateIndex].weekday.fontSize * $multiplier}px;
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; line-height: {templates[templateIndex].weekday.lineHeight}px;
" "
> >
{$weekday} {$weekday}

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

@ -38,11 +38,9 @@
const res = await html2canvas($canvas, { scale: 2 }); const res = await html2canvas($canvas, { scale: 2 });
const image = res.toDataURL('image/png'); const image = res.toDataURL('image/png');
const link = document.createElement('a'); const link = document.createElement('a');
const city = $address.split('\n'); link.download = `${$date.split('-')[0]}-${$date.split('-')[1]}-${
link.download = `${$date.split('T')[0]}-${city[city.length - 1].replace( $date.split('-')[2].split('T')[0]
' ', }-${$city.replace(' ', '_')}-cartel.png`;
'_'
)}-cartel.png`;
link.href = image; link.href = image;
link.click(); link.click();
} }

6
src/lib/header/Header.svelte
Unescape Escape View File

@ -10,16 +10,14 @@
} }
h1 { h1 {
text-align: left; text-align: left;
font-size: 2rem;
font-weight: 700; font-weight: 700;
color: firebrick; color: firebrick;
font-family: 'Ubuntu', sans-serif; font-family: 'Alegreya Sans SC', sans-serif;
/* font-family: 'Gill Sans', sans-serif; */
/* font-variant: small-caps; */
} }
a { a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
font-size: 2rem;
} }
</style> </style>

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

@ -2,7 +2,7 @@
/** @type {number} */ export let templateIndex; /** @type {number} */ export let templateIndex;
/** @type {string} */ export let templateImage; /** @type {string} */ export let templateImage;
import { organizedBy, colabs, canvas } from '$lib/stores/store'; import { organizedBy, colabs, canvas, multiplier } from '$lib/stores/store';
import Heading from '$lib/components/Heading.svelte'; import Heading from '$lib/components/Heading.svelte';
import Title from '$lib/components/Title.svelte'; import Title from '$lib/components/Title.svelte';
@ -84,27 +84,30 @@
<style> <style>
.preview { .preview {
padding: 0.5rem; padding: 8px;
display: grid; /* display: grid; */
justify-content: center; /* justify-content: center; */
grid-template-columns: 1fr; /* grid-template-columns: 1fr; */
align-items: start; /* align-items: start; */
} }
.result { .result {
display: block; display: block;
width: 600px;
/* height: 8px; */
aspect-ratio: 1/1.4142; aspect-ratio: 1/1.4142;
min-height: 842px; /* min-height: 842px; */
align-self: center; /* align-self: center; */
width: auto; /* width: auto; */
background-size: contain; background-size: cover;
position: relative; position: relative;
padding: 1rem; /* padding: 1rem; */
} }
.imagetitle { .imagetitle {
position: absolute; position: absolute;
top: 725px; top: 725px;
left: 16px;
font-size: 0.8rem; font-size: 0.8rem;
color: #444; color: #444;
text-transform: uppercase; text-transform: uppercase;
@ -150,6 +153,7 @@
.orgcolab { .orgcolab {
position: absolute; position: absolute;
top: 725px; top: 725px;
left: 16px;
height: 7rem; height: 7rem;
overflow: hidden; overflow: hidden;
display: grid; display: grid;

1
src/lib/stores/store.js
Unescape Escape View File

@ -12,3 +12,4 @@ export const city = writable("");
export const organizedBy = writable([]); export const organizedBy = writable([]);
export const colabs = writable([]); export const colabs = writable([]);
export const canvas = writable(); export const canvas = writable();
export const multiplier = writable(1);

112
src/lib/templates/azul.js
Unescape Escape View File

@ -6,110 +6,110 @@ export const azul = {
image: "plantilla_azul.png", image: "plantilla_azul.png",
heading: { heading: {
top: 400, top: 400,
height: 2, height: 32,
left: 10, left: 240,
right: 1, right: 8,
fontSize: 2, fontSize: 32,
color: "white", color: "white",
fontFamily: "sans-serif", fontFamily: "'Alegreya Sans SC', sans-serif",
lineHeight: 2, lineHeight: 32,
textAlign: "right", textAlign: "right",
fontWeight: 700 fontWeight: 700
}, },
title: { title: {
top: 440, top: 445,
height: 7.5, height: 120,
left: 1, left: 16,
right: 1, right: 16,
fontSize: 3, fontSize: 40,
color: "firebrick", color: "firebrick",
fontFamily: "'Arial', sans-serif", fontFamily: "'Alegreya Sans SC', sans-serif",
lineHeight: 2.4, lineHeight: 40,
textAlign: "right", textAlign: "right",
fontWeight: 700 fontWeight: 700
}, },
subtitle: { subtitle: {
top: 575, top: 575,
height: 1.4, height: 32,
left: 1, left: 16,
right: 1, right: 16,
fontSize: 1.6, fontSize: 24,
color: "white", color: "white",
fontFamily: "Gill Sans, sans-serif", fontFamily: "'Alegreya Sans SC', sans-serif",
lineHeight: 1.5, lineHeight: 32,
textAlign: "center", textAlign: "center",
fontWeight: 400 fontWeight: 400
}, },
content: { content: {
top: 480, top: 8,
height: 8.5, height: 42,
left: 1.5, left: 8,
right: 17, right: 400,
fontSize: 0, fontSize: 0,
color: "#222", color: "#fff",
fontFamily: "sans-serif", fontFamily: "sans-serif",
lineHeight: 1.1, lineHeight: 14,
textAlign: "left", textAlign: "left",
fontWeight: 700 fontWeight: 400
}, },
date: { date: {
top: 48, top: 40,
height: 4, height: 32,
left: 1, left: 200,
right: 1, right: 8,
fontSize: 1.5, fontSize: 32,
color: "#fff", color: "#fff",
fontFamily: "sans-serif", fontFamily: "'Alegreya Sans SC', sans-serif",
lineHeight: 2, lineHeight: 32,
textAlign: "right", textAlign: "right",
fontWeight: 700 fontWeight: 700
}, },
time: { time: {
top: 72, top: 72,
height: 2, height: 32,
left: 1, left: 200,
right: 1, right: 8,
fontSize: 1.5, fontSize: 32,
color: "#fff", color: "#fff",
fontFamily: "sans-serif", fontFamily: "sans-serif",
lineHeight: 2, lineHeight: 32,
textAlign: "right", textAlign: "right",
fontWeight: 700 fontWeight: 700
}, },
weekday: { weekday: {
top: 24, top: 8,
height: 1.5, height: 32,
left: 1, left: 300,
right: 1, right: 8,
fontSize: 1.5, fontSize: 32,
color: "#fff", color: "#fff",
fontFamily: "sans-serif", fontFamily: "'Alegreya Sans SC', sans-serif",
lineHeight: 2, lineHeight: 32,
textAlign: "right", textAlign: "right",
fontWeight: 700 fontWeight: 700
}, },
address: { address: {
top: 620, top: 630,
height: 3, height: 48,
left: 2, left: 8,
right: 2, right: 8,
fontSize: 1.2, fontSize: 20,
color: "white", color: "white",
fontFamily: "sans-serif", fontFamily: "sans-serif",
lineHeight: 1.5, lineHeight: 24,
textAlign: "center", textAlign: "center",
fontWeight: 400 fontWeight: 400
}, },
city: { city: {
top: 680, top: 680,
height: 2, height: 36,
left: 2, left: 8,
right: 2, right: 8,
fontSize: 1.2, fontSize: 30,
color: "white", color: "white",
fontFamily: "sans-serif", fontFamily: "sans-serif",
lineHeight: 1.8, lineHeight: 36,
textAlign: "center", textAlign: "center",
fontWeight: 400 fontWeight: 400
}, },

108
src/lib/templates/corazon.js
Unescape Escape View File

@ -5,41 +5,41 @@ export const corazon = {
name: "corazon", name: "corazon",
image: "corazon.png", image: "corazon.png",
heading: { heading: {
top: 20, top: 8,
height: 2, height: 32,
left: 3, left: 8,
right: 10, right: 100,
fontSize: 2, fontSize: 32,
color: "white", color: "white",
fontFamily: "sans-serif", fontFamily: "'Alegreya Sans SC', sans-serif",
lineHeight: 2, lineHeight: 32,
textAlign: "left", textAlign: "left",
fontWeight: 700 fontWeight: 700
}, },
title: { title: {
top: 145, top: 88,
height: 3, height: 64,
left: 1, left: 8,
right: 1, right: 8,
fontSize: 3, fontSize: 32,
color: "white", color: "white",
fontFamily: "'Arial', sans-serif", fontFamily: "'Alegreya Sans SC', sans-serif",
lineHeight: 2.4, lineHeight: 32,
textAlign: "right", textAlign: "center",
fontWeight: 700 fontWeight: 300
}, },
subtitle: { subtitle: {
top: 100, top: 160,
height: 1.5, height: 48,
left: 1, left: 8,
right: 1, right: 8,
fontSize: 2, fontSize: 48,
color: "white", color: "white",
fontFamily: "'Arial', sans-serif", fontFamily: "'Alegreya Sans SC', sans-serif",
lineHeight: 1.5, lineHeight: 48,
textAlign: "center", textAlign: "center",
fontWeight: 400 fontWeight: 700
}, },
content: { content: {
top: 480, top: 480,
@ -54,34 +54,34 @@ export const corazon = {
fontWeight: 700 fontWeight: 700
}, },
date: { date: {
top: 535, top: 540,
height: 4, height: 32,
left: 8, left: 128,
right: 1, right: 8,
fontSize: 2, fontSize: 32,
color: "#fff", color: "#fff",
fontFamily: "'Arial', sans-serif", fontFamily: "'Arial', sans-serif",
lineHeight: 2, lineHeight: 32,
textAlign: "left", textAlign: "left",
fontWeight: 700 fontWeight: 700
}, },
time: { time: {
top: 595, top: 600,
height: 2, height: 32,
left: 8, left: 128,
right: 1, right: 8,
fontSize: 2, fontSize: 32,
color: "#fff", color: "#fff",
fontFamily: "'Arial', sans-serif", fontFamily: "'Arial', sans-serif",
lineHeight: 2, lineHeight: 32,
textAlign: "left", textAlign: "left",
fontWeight: 700 fontWeight: 700
}, },
weekday: { weekday: {
top: 25, top: 8,
height: 1.5, height: 32,
left: 1, left: 8,
right: 10, right: 80,
fontSize: 0, fontSize: 0,
color: "#fff", color: "#fff",
fontFamily: "sans-serif", fontFamily: "sans-serif",
@ -90,26 +90,26 @@ export const corazon = {
fontWeight: 700 fontWeight: 700
}, },
address: { address: {
top: 645, top: 650,
height: 3.6, height: 48,
left: 8, left: 128,
right: 1, right: 8,
fontSize: 1.3, fontSize: 24,
color: "white", color: "white",
fontFamily: "'Arial', sans-serif", fontFamily: "'Alegreya Sans SC', sans-serif",
lineHeight: 1.6, lineHeight: 24,
textAlign: "left", textAlign: "left",
fontWeight: 400 fontWeight: 400
}, },
city: { city: {
top: 25, top: 8,
height: 1.5, height: 32,
left: 8, left: 80,
right: 1, right: 8,
fontSize: 1.5, fontSize: 32,
color: "white", color: "white",
fontFamily: "'Arial', sans-serif", fontFamily: "'Alegreya Sans SC', sans-serif",
lineHeight: 1.6, lineHeight: 36,
textAlign: "right", textAlign: "right",
fontWeight: 700 fontWeight: 700
}, },

62
src/lib/templates/posits.js
Unescape Escape View File

@ -17,14 +17,14 @@ export const posits = {
fontWeight: 400 fontWeight: 400
}, },
title: { title: {
top: 430, top: 450,
height: 3, height: 32,
left: 4, left: 80,
right: 4, right: 80,
fontSize: 2, fontSize: 32,
color: "#000", color: "#000",
fontFamily: "'Arial', sans-serif", fontFamily: "'Alegreya Sans SC', sans-serif",
lineHeight: 2.1, lineHeight: 38,
textAlign: "center", textAlign: "center",
fontWeight: 700 fontWeight: 700
}, },
@ -54,61 +54,61 @@ export const posits = {
}, },
date: { date: {
top: 600, top: 600,
height: 4, height: 48,
left: 26.5, left: 428,
right: 2, right: 32,
fontSize: 1.2, fontSize: 20,
color: "firebrick", color: "firebrick",
fontFamily: "sans-serif", fontFamily: "sans-serif",
lineHeight: 1.5, lineHeight: 22,
textAlign: "center", textAlign: "center",
fontWeight: 700 fontWeight: 700
}, },
time: { time: {
top: 655, top: 655,
height: 2, height: 32,
left: 26.5, left: 428,
right: 2, right: 32,
fontSize: 1.8, fontSize: 32,
color: "firebrick", color: "firebrick",
fontFamily: "sans-serif", fontFamily: "sans-serif",
lineHeight: 2, lineHeight: 32,
textAlign: "center", textAlign: "center",
fontWeight: 700 fontWeight: 700
}, },
weekday: { weekday: {
top: 600, top: 600,
height: 1.5, height: 5,
left: 18.5, left: 18.5,
right: 5, right: 5,
fontSize: 0, fontSize: 20,
color: "#fff", color: "#fff",
fontFamily: "sans-serif", fontFamily: "sans-serif",
lineHeight: 1.8, lineHeight: 28,
textAlign: "center", textAlign: "center",
fontWeight: 700 fontWeight: 700
}, },
address: { address: {
top: 555, top: 555,
height: 4.5, height: 96,
left: 1.5, left: 32,
right: 23, right: 385,
fontSize: 1.2, fontSize: 18,
color: "#000", color: "#000",
fontFamily: "'Arial', sans-serif", fontFamily: "'Arial', sans-serif",
lineHeight: 1.5, lineHeight: 24,
textAlign: "center", textAlign: "center",
fontWeight: 400 fontWeight: 400
}, },
city: { city: {
top: 655, top: 660,
height: 1.5, height: 48,
left: 2, left: 32,
right: 23, right: 385,
fontSize: 1.2, fontSize: 24,
color: "#000", color: "#000",
fontFamily: "'Arial', sans-serif", fontFamily: "'Arial', sans-serif",
lineHeight: 1.5, lineHeight: 24,
textAlign: "center", textAlign: "center",
fontWeight: 700 fontWeight: 700
}, },

114
src/lib/templates/verde.js
Unescape Escape View File

@ -6,109 +6,109 @@ export const verde = {
image: "plantilla_verde.png", image: "plantilla_verde.png",
heading: { heading: {
top: 100, top: 100,
height: 1.2, height: 32,
left: 8, left: 140,
right: 1, right: 20,
fontSize: 1.5, fontSize: 24,
color: "white", color: "white",
fontFamily: "sans-serif", fontFamily: "'Alegreya Sans SC', sans-serif",
lineHeight: 1.1, lineHeight: 32,
textAlign: "left", textAlign: "left",
fontWeight: 400 fontWeight: 700
}, },
title: { title: {
top: 150, top: 150,
height: 6, height: 86,
left: 8, left: 132,
right: 1, right: 16,
fontSize: 3, fontSize: 40,
color: "white", color: "white",
fontFamily: "Gill Sans, sans-serif", fontFamily: "'Alegreya Sans SC', sans-serif",
lineHeight: 2.1, lineHeight: 40,
textAlign: "center", textAlign: "center",
fontWeight: 400 fontWeight: 700
}, },
subtitle: { subtitle: {
top: 300, top: 300,
height: 3, height: 72,
left: 8, left: 132,
right: 2, right: 16,
fontSize: 1.5, fontSize: 24,
color: "firebrick", color: "firebrick",
fontFamily: "'Arial', sans-serif", fontFamily: "'Alegreya Sans SC', sans-serif",
lineHeight: 1.5, lineHeight: 32,
textAlign: "center", textAlign: "center",
fontWeight: 400 fontWeight: 400
}, },
content: { content: {
top: 480, top: 470,
height: 8.5, height: 164,
left: 1.5, left: 32,
right: 17, right: 320,
fontSize: 0.8, fontSize: 14,
color: "#222", color: "#222",
fontFamily: "sans-serif", fontFamily: "'Helvetica', sans-serif",
lineHeight: 1.1, lineHeight: 18,
textAlign: "left", textAlign: "left",
fontWeight: 400 fontWeight: 400
}, },
date: { date: {
top: 625, top: 628,
height: 1, height: 32,
left: 18.5, left: 275,
right: 4, right: 32,
fontSize: 1.1, fontSize: 18,
color: "#fff", color: "#fff",
fontFamily: "sans-serif", fontFamily: "sans-serif",
lineHeight: 1, lineHeight: 32,
textAlign: "center", textAlign: "center",
fontWeight: 700 fontWeight: 700
}, },
time: { time: {
top: 647, top: 650,
height: 2, height: 32,
left: 18.5, left: 275,
right: 5, right: 32,
fontSize: 1.8, fontSize: 32,
color: "#fff", color: "#fff",
fontFamily: "sans-serif", fontFamily: "sans-serif",
lineHeight: 1.5, lineHeight: 32,
textAlign: "center", textAlign: "center",
fontWeight: 700 fontWeight: 700
}, },
weekday: { weekday: {
top: 600, top: 605,
height: 1.5, height: 32,
left: 18.5, left: 245,
right: 5, right: 32,
fontSize: 1.3, fontSize: 24,
color: "#fff", color: "#fff",
fontFamily: "sans-serif", fontFamily: "sans-serif",
lineHeight: 1.8, lineHeight: 32,
textAlign: "center", textAlign: "center",
fontWeight: 700 fontWeight: 700
}, },
address: { address: {
top: 625, top: 635,
height: 2.8, height: 48,
left: 2, left: 32,
right: 20, right: 300,
fontSize: 1, fontSize: 18,
color: "#91b756", color: "#91b756",
fontFamily: "sans-serif", fontFamily: "sans-serif",
lineHeight: 1.5, lineHeight: 22,
textAlign: "center", textAlign: "center",
fontWeight: 700 fontWeight: 700
}, },
city: { city: {
top: 675, top: 690,
height: 2, height: 24,
left: 2, left: 32,
right: 20, right: 300,
fontSize: 1.2, fontSize: 24,
color: "#91b756", color: "#91b756",
fontFamily: "sans-serif", fontFamily: "sans-serif",
lineHeight: 1.5, lineHeight: 24,
textAlign: "center", textAlign: "center",
fontWeight: 700 fontWeight: 700
}, },

26
src/routes/+layout.svelte
Unescape Escape View File

@ -1,6 +1,31 @@
<script> <script>
import { multiplier } from '$lib/stores/store';
import Header from '$lib/header/Header.svelte'; import Header from '$lib/header/Header.svelte';
import '../app.css'; import '../app.css';
import { browser } from '$app/environment';
let browserType = 'firefox';
if (browser) {
const agent = navigator.userAgent;
if (agent.match(/chrome|chromium|crios/i)) {
browserType = 'chrome';
$multiplier = 1;
} else if (agent.match(/firefox|fxios/i)) {
browserType = 'firefox';
$multiplier = 1;
} else if (agent.match(/safari/i)) {
browserType = 'safari';
} else if (agent.match(/opr\//i)) {
browserType = 'opera';
} else if (agent.match(/edg/i)) {
browserType = 'edge';
} else {
browserType = 'No browser detection';
}
}
console.log('Browser is: ', browserType);
</script> </script>
<Header /> <Header />
@ -15,5 +40,4 @@
margin: 0 auto; margin: 0 auto;
box-sizing: border-box; box-sizing: border-box;
} }
</style> </style>

3
src/routes/[slug]/+page.svelte
Unescape Escape View File

@ -35,7 +35,7 @@
<style> <style>
.main { .main {
display: grid; display: grid;
grid-template-columns: minmax(200px, 1fr) minmax(480px, min-content); grid-template-columns: 1fr 616px;
grid-gap: 0.5rem; grid-gap: 0.5rem;
min-height: calc(100vh - 5rem); min-height: calc(100vh - 5rem);
} }
@ -47,7 +47,6 @@
.preview { .preview {
grid-column: 2/3; grid-column: 2/3;
min-height: 200px;
background-color: rgb(240, 238, 240); background-color: rgb(240, 238, 240);
} }
</style> </style>

BIN
static/imagen01_old.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 866 KiB

BIN
static/plantilla_azul.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 137 KiB

After

Width:  |  Height:  |  Size: 109 KiB

BIN
static/svelte-welcome.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 352 KiB

BIN
static/svelte-welcome.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 113 KiB

Write Preview
Loading…
Cancel
Save