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

hasta aquí, me es más fácil quitar las small-caps y pasar de todo

Browse Source
pull/15/head
Borja Robert 2 years ago
parent 00415c3404
commit 183b4d9f30
16 changed files with 137 additions and 115 deletions
Show Stats Download Patch File Download Diff File

19
src/app.css
Unescape Escape View File

@ -4,22 +4,15 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 16px; font-size: 16px;
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 {

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}

15
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,8 @@
<style> <style>
.heading { .heading {
position: absolute; position: absolute;
font-variant: small-caps; /* font-variant: small-caps; */
text-transform: uppercase;
overflow: hidden; overflow: hidden;
} }
</style> </style>

13
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}

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}

12
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;
" "
> >

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}

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

@ -10,7 +10,6 @@
} }
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: 'Ubuntu', sans-serif;
@ -21,5 +20,6 @@
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
font-size: 2rem;
} }
</style> </style>

23
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;

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);

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

@ -6,49 +6,49 @@ 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: "'Helvetica', sans-serif",
lineHeight: 1.1, lineHeight: 32,
textAlign: "left", textAlign: "left",
fontWeight: 400 fontWeight: 400
}, },
title: { title: {
top: 150, top: 150,
height: 6, height: 86,
left: 8, left: 132,
right: 1, right: 16,
fontSize: 3, fontSize: 32,
color: "white", color: "white",
fontFamily: "Gill Sans, sans-serif", fontFamily: "'Helvetica', sans-serif",
lineHeight: 2.1, lineHeight: 40,
textAlign: "center", textAlign: "center",
fontWeight: 400 fontWeight: 400
}, },
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: "'Helvetica', sans-serif",
lineHeight: 1.5, lineHeight: 32,
textAlign: "center", textAlign: "center",
fontWeight: 400 fontWeight: 400
}, },
content: { content: {
top: 480, top: 480,
height: 8.5, height: 240,
left: 1.5, left: 32,
right: 17, right: 320,
fontSize: 0.8, fontSize: 16,
color: "#222", color: "#222",
fontFamily: "sans-serif", fontFamily: "'Helvetica', sans-serif",
lineHeight: 1.1, lineHeight: 24,
textAlign: "left", textAlign: "left",
fontWeight: 400 fontWeight: 400
}, },

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

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

Write Preview
Loading…
Cancel
Save