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;
padding: 0;
font-size: 16px;
font-family: 'Arial', sans-serif;
}
html {
-webkit-text-size-adjust: 100%; /* 2 */
}
:root {
font-family: Ubuntu, Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
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;
font-family: Arial, sans-serif;
}
body {

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}

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

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

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}

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

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}

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

@ -10,7 +10,6 @@
}
h1 {
text-align: left;
font-size: 2rem;
font-weight: 700;
color: firebrick;
font-family: 'Ubuntu', sans-serif;
@ -21,5 +20,6 @@
color: inherit;
text-decoration: none;
cursor: pointer;
font-size: 2rem;
}
</style>

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

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

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

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

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

@ -1,6 +1,31 @@
<script>
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 />
@ -15,5 +40,4 @@
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: 1fr 600px;
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>

Write Preview
Loading…
Cancel
Save