web3privacy/web
1
0
Fork 0
mirror of https://github.com/web3privacy/web synced 2024-10-15 18:26:27 +02:00
Code Issues Projects Releases Packages Wiki Activity

change aspect ratio of poster from 2:3 to 1:1.414

Browse source
This commit is contained in:
tree🌴 2024-03-07 15:24:34 +01:00
parent 69efa6092d
commit b306ab4d17
3 changed files with 15 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/EventImageGenerator.svelte
View file

@ -133,7 +133,7 @@ for (const path in imagesSrc) {
<div>
<div class="mb-2 text-[#909090]">{event.id} [{event.design?.image || '-'}]</div>
<div class="w-[380px] h-[570px] relative">
<div class="scale-50 absolute -left-[172px] -top-[285px] bg-red-200 {!event.design?.image ? 'opacity-50' : ''}" style="margin-left: -1rem;">
<div class="scale-50 absolute -left-[172px] -top-[270px] bg-red-200 {!event.design?.image ? 'opacity-50' : ''}" style="margin-left: -1rem;">
<a href="/gen/event?id={event.id}"><PosterSimple {event} image={getImageUrl(event.design?.image)} {tools} /></a>
</div>
</div>
@ -159,7 +159,7 @@ for (const path in imagesSrc) {
<div>
<div class="mb-4 text-xl text-[#909090]">Square (1:1)</div>
<div class="w-[404px]">
<div class="w-[400px]">
<Square {event} {image} {tools} />
</div>
</div>
@ -167,7 +167,7 @@ for (const path in imagesSrc) {
<div>
<div class="mb-4 text-xl text-[#909090]">Wide-square (4:3)</div>
<div class="h-[404px]">
<div class="h-[400px]">
<WideSquare {event} {image} {tools} />
</div>
</div>
@ -175,7 +175,7 @@ for (const path in imagesSrc) {
<div>
<div class="mb-4 text-xl text-[#909090]">Wide (16:9)</div>
<div class="h-[404px]">
<div class="h-[400px]">
<Wide {event} {image} {tools} />
</div>
</div>
@ -193,23 +193,23 @@ for (const path in imagesSrc) {
</select>
</div>
<div class="w-[404px]">
<div class="w-[400px]">
<SquareSpeaker {speaker} {event} {image} {tools} />
</div>
</div>
<div>
<div class="mb-4 text-xl text-[#909090]">Poster (3:2)</div>
<div class="mb-4 text-xl text-[#909090]">Poster (1:1.414)</div>
<div class="w-[764px]">
<div class="w-[760px]">
<Poster {topics} {event} {image} {tools} />
</div>
</div>
<div>
<div class="mb-4 text-xl text-[#909090]">Poster (simple) (3:2)</div>
<div class="mb-4 text-xl text-[#909090]">Poster (simple) (1:1.414)</div>
<div class="w-[764px]">
<div class="w-[760px]">
<PosterSimple {event} {image} {tools} />
</div>
</div>

6
src/components/event-formats/poster-simple.svelte
View file

@ -4,14 +4,14 @@
export let tools;
</script>
<div id="img-poster-simple" class="aspect-[2/3] w-[760px] h-[1140px] relative bg-black overflow-hidden text-white">
<div id="img-poster-simple" class="aspect-[1/1.414] w-[760px] relative bg-black overflow-hidden text-white">
<img src="/logo.svg" class="absolute top-10 left-10 w-1/3 z-20" />
{#if event.type === 'summit'}
<img src="/gen-img/summit-title.svg" class="absolute top-28 left-0 w-full z-20" />
<div class="absolute top-36 left-0 h-64 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
<div class="absolute top-36 left-[-70px] w-[900px] h-[900px] -z-0" style="background-image: url({image}); background-size: 100% 100%; background-position: center;"></div>
<div class="absolute bottom-[6em] left-0 h-48 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
<div class="absolute bottom-0 left-0 h-64 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
<div class="absolute bottom-24 left-10 right-10 uppercase text-4xl z-20">
<div class="flex justify-center">
@ -27,7 +27,7 @@
{:else}
<div class="absolute top-28 left-0 h-32 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
<div class="absolute top-28 left-[-70px] w-[900px] h-[900px] -z-0" style="background-image: url({image}); background-size: 100% 100%; background-position: center;"></div>
<div class="absolute bottom-[7em] left-0 h-48 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
<div class="absolute bottom-[3.5em] left-0 h-48 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
<div class="absolute bottom-10 left-10 uppercase text-3xl z-20">
<div class="flex">

6
src/components/event-formats/poster.svelte
View file

@ -5,12 +5,12 @@
export let topics;
</script>
<div id="img-poster" class="aspect-[2/3] w-[760px] h-[1140px] relative bg-black text-white overflow-hidden">
<div id="img-poster" class="aspect-[1/1.414] w-[760px] relative bg-black text-white overflow-hidden">
<img src="/logo.svg" class="absolute top-10 left-10 w-1/3 z-20" />
<div class="absolute top-20 left-0 h-36 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
<img src={image} class="absolute top-20 left-0 -z-0" />
<div class="absolute bottom-[18.5rem] left-0 h-36 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
<div class="absolute bottom-[14rem] left-0 h-64 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
<div class="absolute bottom-80 left-10 uppercase text-3xl z-20">
<div class="flex">
@ -27,7 +27,7 @@
</div>
</div>
</div>
<div class="absolute left-10 right-10 bottom-28 uppercase text-lg flex flex-wrap gap-3">
<div class="absolute left-10 right-10 bottom-28 uppercase text-lg flex flex-wrap gap-3 z-20">
{#each topics as topic}
<div><span class="inline-block w-2 h-2 bg-white"></span> {topic}</div>
{/each}