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

797
src/app.css
View File

File diff suppressed because it is too large Load Diff

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -2,7 +2,7 @@
/** @type {number} */ export let templateIndex;
/** @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 Title from '$lib/components/Title.svelte';
@ -84,27 +84,30 @@
<style>
.preview {
padding: 0.5rem;
display: grid;
justify-content: center;
grid-template-columns: 1fr;
align-items: start;
padding: 8px;
/* display: grid; */
/* justify-content: center; */
/* grid-template-columns: 1fr; */
/* align-items: start; */
}
.result {
display: block;
width: 600px;
/* height: 8px; */
aspect-ratio: 1/1.4142;
min-height: 842px;
align-self: center;
width: auto;
background-size: contain;
/* min-height: 842px; */
/* align-self: center; */
/* width: auto; */
background-size: cover;
position: relative;
padding: 1rem;
/* padding: 1rem; */
}
.imagetitle {
position: absolute;
top: 725px;
left: 16px;
font-size: 0.8rem;
color: #444;
text-transform: uppercase;
@ -150,6 +153,7 @@
.orgcolab {
position: absolute;
top: 725px;
left: 16px;
height: 7rem;
overflow: hidden;
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 colabs = 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",
heading: {
top: 400,
height: 2,
left: 10,
right: 1,
fontSize: 2,
height: 32,
left: 240,
right: 8,
fontSize: 32,
color: "white",
fontFamily: "sans-serif",
lineHeight: 2,
fontFamily: "'Alegreya Sans SC', sans-serif",
lineHeight: 32,
textAlign: "right",
fontWeight: 700
},
title: {
top: 440,
height: 7.5,
left: 1,
right: 1,
fontSize: 3,
top: 445,
height: 120,
left: 16,
right: 16,
fontSize: 40,
color: "firebrick",
fontFamily: "'Arial', sans-serif",
lineHeight: 2.4,
fontFamily: "'Alegreya Sans SC', sans-serif",
lineHeight: 40,
textAlign: "right",
fontWeight: 700
},
subtitle: {
top: 575,
height: 1.4,
left: 1,
right: 1,
fontSize: 1.6,
height: 32,
left: 16,
right: 16,
fontSize: 24,
color: "white",
fontFamily: "Gill Sans, sans-serif",
lineHeight: 1.5,
fontFamily: "'Alegreya Sans SC', sans-serif",
lineHeight: 32,
textAlign: "center",
fontWeight: 400
},
content: {
top: 480,
height: 8.5,
left: 1.5,
right: 17,
top: 8,
height: 42,
left: 8,
right: 400,
fontSize: 0,
color: "#222",
color: "#fff",
fontFamily: "sans-serif",
lineHeight: 1.1,
lineHeight: 14,
textAlign: "left",
fontWeight: 700
fontWeight: 400
},
date: {
top: 48,
height: 4,
left: 1,
right: 1,
fontSize: 1.5,
top: 40,
height: 32,
left: 200,
right: 8,
fontSize: 32,
color: "#fff",
fontFamily: "sans-serif",
lineHeight: 2,
fontFamily: "'Alegreya Sans SC', sans-serif",
lineHeight: 32,
textAlign: "right",
fontWeight: 700
},
time: {
top: 72,
height: 2,
left: 1,
right: 1,
fontSize: 1.5,
height: 32,
left: 200,
right: 8,
fontSize: 32,
color: "#fff",
fontFamily: "sans-serif",
lineHeight: 2,
lineHeight: 32,
textAlign: "right",
fontWeight: 700
},
weekday: {
top: 24,
height: 1.5,
left: 1,
right: 1,
fontSize: 1.5,
top: 8,
height: 32,
left: 300,
right: 8,
fontSize: 32,
color: "#fff",
fontFamily: "sans-serif",
lineHeight: 2,
fontFamily: "'Alegreya Sans SC', sans-serif",
lineHeight: 32,
textAlign: "right",
fontWeight: 700
},
address: {
top: 620,
height: 3,
left: 2,
right: 2,
fontSize: 1.2,
top: 630,
height: 48,
left: 8,
right: 8,
fontSize: 20,
color: "white",
fontFamily: "sans-serif",
lineHeight: 1.5,
lineHeight: 24,
textAlign: "center",
fontWeight: 400
},
city: {
top: 680,
height: 2,
left: 2,
right: 2,
fontSize: 1.2,
height: 36,
left: 8,
right: 8,
fontSize: 30,
color: "white",
fontFamily: "sans-serif",
lineHeight: 1.8,
lineHeight: 36,
textAlign: "center",
fontWeight: 400
},

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

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

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

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

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

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

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

@ -1,19 +1,43 @@
<script>
import Header from '$lib/header/Header.svelte';
import '../app.css';
import { multiplier } from '$lib/stores/store';
import Header from '$lib/header/Header.svelte';
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>
<Header />
<main>
<slot />
<slot />
</main>
<style>
main {
width: 100%;
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
main {
width: 100%;
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
</style>

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

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