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>
<div class="mb-2 text-[#909090]">{event.id} [{event.design?.image || '-'}]</div> <div class="mb-2 text-[#909090]">{event.id} [{event.design?.image || '-'}]</div>
<div class="w-[380px] h-[570px] relative"> <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> <a href="/gen/event?id={event.id}"><PosterSimple {event} image={getImageUrl(event.design?.image)} {tools} /></a>
</div> </div>
</div> </div>
@ -159,7 +159,7 @@ for (const path in imagesSrc) {
<div> <div>
<div class="mb-4 text-xl text-[#909090]">Square (1:1)</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} /> <Square {event} {image} {tools} />
</div> </div>
</div> </div>
@ -167,7 +167,7 @@ for (const path in imagesSrc) {
<div> <div>
<div class="mb-4 text-xl text-[#909090]">Wide-square (4:3)</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} /> <WideSquare {event} {image} {tools} />
</div> </div>
</div> </div>
@ -175,7 +175,7 @@ for (const path in imagesSrc) {
<div> <div>
<div class="mb-4 text-xl text-[#909090]">Wide (16:9)</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} /> <Wide {event} {image} {tools} />
</div> </div>
</div> </div>
@ -193,23 +193,23 @@ for (const path in imagesSrc) {
</select> </select>
</div> </div>
<div class="w-[404px]"> <div class="w-[400px]">
<SquareSpeaker {speaker} {event} {image} {tools} /> <SquareSpeaker {speaker} {event} {image} {tools} />
</div> </div>
</div> </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} /> <Poster {topics} {event} {image} {tools} />
</div> </div>
</div> </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} /> <PosterSimple {event} {image} {tools} />
</div> </div>
</div> </div>

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

@ -4,14 +4,14 @@
export let tools; export let tools;
</script> </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" /> <img src="/logo.svg" class="absolute top-10 left-10 w-1/3 z-20" />
{#if event.type === 'summit'} {#if event.type === 'summit'}
<img src="/gen-img/summit-title.svg" class="absolute top-28 left-0 w-full z-20" /> <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-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 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="absolute bottom-24 left-10 right-10 uppercase text-4xl z-20">
<div class="flex justify-center"> <div class="flex justify-center">
@ -27,7 +27,7 @@
{:else} {: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-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 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="absolute bottom-10 left-10 uppercase text-3xl z-20">
<div class="flex"> <div class="flex">

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

@ -5,12 +5,12 @@
export let topics; export let topics;
</script> </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" /> <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> <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" /> <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="absolute bottom-80 left-10 uppercase text-3xl z-20">
<div class="flex"> <div class="flex">
@ -27,7 +27,7 @@
</div> </div>
</div> </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} {#each topics as topic}
<div><span class="inline-block w-2 h-2 bg-white"></span> {topic}</div> <div><span class="inline-block w-2 h-2 bg-white"></span> {topic}</div>
{/each} {/each}