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

arregla un problema de importar el css a lo loco

Browse Source
pull/6/head
Borja Robert 2 years ago
parent 07343d4ec3
commit f09a6dba7f
5 changed files with 234 additions and 225 deletions
Show Stats Download Patch File Download Diff File

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

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

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

@ -108,7 +108,7 @@
<textarea bind:value={$address} type="text" name="address" /> <textarea bind:value={$address} type="text" name="address" />
</div> </div>
</div> </div>
<div class="form-group media"> <div class="form-group ">
<label for="organizedBy">Organiza:</label> <label for="organizedBy">Organiza:</label>
<Organized /> <Organized />
<label for="colabs">Colabora:</label> <label for="colabs">Colabora:</label>
@ -158,7 +158,7 @@
} }
button { button {
margin: 0 1rem; margin: 1rem;
padding: 0.5rem; padding: 0.5rem;
font-size: 1.1rem; font-size: 1.1rem;
cursor: pointer; cursor: pointer;

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save