mirror of
https://github.com/web3privacy/web
synced 2024-10-15 18:26:27 +02:00
update summit gen tpl
This commit is contained in:
parent
09f33554c6
commit
2b7c8462bc
16 changed files with 163 additions and 60 deletions
BIN
public/fonts/KyivTypeSerif-Medium3.woff2
Normal file
BIN
public/fonts/KyivTypeSerif-Medium3.woff2
Normal file
Binary file not shown.
BIN
public/gen-img/events/prague01.png
Normal file
BIN
public/gen-img/events/prague01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 MiB |
6
public/gen-img/summit-title2.svg
Normal file
6
public/gen-img/summit-title2.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 30 KiB |
6
public/gen-img/summit-title3.svg
Normal file
6
public/gen-img/summit-title3.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 29 KiB |
|
|
@ -66,7 +66,6 @@ onMount(() => {
|
|||
const img = searchParams.get('img');
|
||||
if (img) {
|
||||
imageSelected.set(img);
|
||||
updateImages();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -8,19 +8,17 @@
|
|||
<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 object-fit" style="background-image: url({image.src}); background-size: 100% 100%; background-position: center; {image.calcBgOffsets('poster-simple')}"></div>
|
||||
<div class="absolute bottom-0 left-0 h-64 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
|
||||
<img src="/gen-img/summit-title3.svg" class="absolute top-28 left-0 w-full z-20" />
|
||||
<div class="absolute top-14 left-0 h-64 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
|
||||
<div class="absolute top-14 left-[-70px] w-[900px] h-[1020px] -z-0" style="background-image: url({image.src}); background-size: cover; background-position: center; {image.calcBgOffsets('poster-simple')}"></div>
|
||||
<div class="absolute bottom-0 left-0 h-[30rem] 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">
|
||||
<div class="border-2 border-white py-2 px-4 border-r-0 inline-block bg-black">
|
||||
{tools.dateFormat(event.date)}
|
||||
</div>
|
||||
<div class="border-2 border-white py-2 px-4 bg-black">
|
||||
{event.city}, {event.country}
|
||||
</div>
|
||||
<div class="absolute bottom-10 left-10 right-10 uppercase text-[5.5rem] z-20 font-kyiv">
|
||||
<div>
|
||||
{tools.dateFormat(event.date, "dd/MM/yyyy")}
|
||||
</div>
|
||||
<div class="-mt-8">
|
||||
{event.city}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,25 +8,40 @@
|
|||
<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.src} class="absolute top-20 left-0 -z-0 object-cover" style="{image.ratio > 1 ? 'height: 760px;' : ''} {image.calcObjOffsets('poster')}" />
|
||||
<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">
|
||||
<div class="border-2 border-white py-2 px-4 border-r-0 inline-block bg-black">
|
||||
{tools.dateFormat(event.date)}
|
||||
{#if event.type === 'summit'}
|
||||
<img src="/gen-img/summit-title3.svg" class="absolute top-28 left-0 w-full z-20 " />
|
||||
<div class="absolute top-10 left-0 h-96 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
|
||||
<img src={image.src} class="absolute top-10 left-0 -z-0 object-cover" style="{image.ratio > 1 ? 'height: 760px;' : ''} {image.calcObjOffsets('poster')}" />
|
||||
<div class="absolute bottom-[14rem] left-0 h-96 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
|
||||
<div class="absolute bottom-72 left-10 right-10 uppercase text-[5rem] z-20 font-kyiv">
|
||||
<div>
|
||||
{tools.dateFormat(event.date, "dd/MM/yyyy")}
|
||||
</div>
|
||||
<div class="border-2 border-white py-2 px-4 bg-black">
|
||||
{event.city}, {event.country}
|
||||
<div class="-mt-8">
|
||||
{event.city}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-2 px-4 bg-white text-black">
|
||||
{event.type}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="absolute top-20 left-0 h-36 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
|
||||
<img src={image.src} class="absolute top-20 left-0 -z-0 object-cover" style="{image.ratio > 1 ? 'height: 760px;' : ''} {image.calcObjOffsets('poster')}" />
|
||||
<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">
|
||||
<div class="border-2 border-white py-2 px-4 border-r-0 inline-block bg-black">
|
||||
{tools.dateFormat(event.date)}
|
||||
</div>
|
||||
<div class="border-2 border-white py-2 px-4 bg-black">
|
||||
{event.city}, {event.country}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-2 px-4 bg-white text-black">
|
||||
{event.type}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -12,19 +12,34 @@
|
|||
<div class="absolute top-0 left-0 h-full w-1/2 z-10" style="background: linear-gradient(to left, transparent, black);"></div>
|
||||
<img src={image.src} class="absolute top-0 left-0 -z-0 h-full object-cover" style="{image.calcObjOffsets('square')}" />
|
||||
|
||||
<div class="absolute bottom-8 left-8 uppercase z-20">
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-1 px-2 border-r-0 inline-block bg-black">
|
||||
{tools.dateFormat(event.date)}
|
||||
|
||||
{#if event.type === 'summit'}
|
||||
<img src="/gen-img/summit-title3.svg" class="absolute -bottom-1 left-0 w-full z-20" />
|
||||
<div class="absolute bottom-0 left-0 h-32 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
|
||||
|
||||
<div class="absolute bottom-20 left-8 right-8 uppercase text-[2rem] z-20 font-kyiv">
|
||||
<div>
|
||||
{tools.dateFormat(event.date, "dd/MM/yyyy")}
|
||||
</div>
|
||||
<div class="border-2 border-white py-1 px-2 bg-black">
|
||||
{event.city}, {event.country}
|
||||
<div class="-mt-1">
|
||||
{event.city}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-1 px-2 bg-white text-black uppercase">
|
||||
{event.type}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="absolute bottom-8 left-8 uppercase z-20">
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-1 px-2 border-r-0 inline-block bg-black">
|
||||
{tools.dateFormat(event.date)}
|
||||
</div>
|
||||
<div class="border-2 border-white py-1 px-2 bg-black">
|
||||
{event.city}, {event.country}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-1 px-2 bg-white text-black uppercase">
|
||||
{event.type}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -13,13 +13,30 @@
|
|||
<img src="/logo.svg" class="absolute top-8 left-8 w-1/3 z-20" />
|
||||
|
||||
<div class="flex items-end justify-end w-full h-full">
|
||||
<div class="absolute top-0 h-full {image.ratio > 1 ? 'w-2/3' : 'w-2/6'} left-1/12 z-10" style="background: linear-gradient(to left, transparent, black); left: {image.ratio > 1 ? '0px' : '130px'};"></div>
|
||||
<div class="absolute top-0 h-full {image.ratio > 1 && event.type !== 'summit' ? 'w-2/3' : 'w-2/6'} left-1/12 z-10" style="background: linear-gradient(to left, transparent, black); left: {image.ratio > 1 ? '0px' : '130px'};"></div>
|
||||
|
||||
<div class="h-full {image.ratio > 1.3 ? 'w-full' : 'w-5/6'} justify-end flex">
|
||||
<img src={image.src} class="h-full object-cover" style="{image.calcObjOffsets('wide-square')}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{#if event.type === 'summit'}
|
||||
<img src="/gen-img/summit-title3.svg" class="absolute -bottom-1.5 left-0 w-full z-20" />
|
||||
<div class="absolute bottom-0 left-0 h-32 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
|
||||
|
||||
<div class="absolute top-0 left-0 h-36 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
|
||||
<div class="absolute right-0 top-0 h-full w-36 z-10" style="background: linear-gradient(to right, transparent, black);"></div>
|
||||
|
||||
<div class="absolute top-5 right-8 uppercase text-[2.2rem] z-20 font-kyiv text-right">
|
||||
<div>
|
||||
{tools.dateFormat(event.date, "dd/MM/yyyy")}
|
||||
</div>
|
||||
<div class="-mt-1">
|
||||
{event.city}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="absolute bottom-8 left-8 uppercase z-20 text-xl">
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-1 px-2 inline-block bg-black">
|
||||
|
|
@ -37,4 +54,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -10,29 +10,48 @@
|
|||
|
||||
<img src="/logo.svg" class="absolute top-8 left-8 w-1/4 z-20" />
|
||||
|
||||
<div class="flex items-end justify-end w-full h-full">
|
||||
<div class="absolute top-0 h-full {image.ratio > 1 ? 'w-2/3' : 'w-2/6'} left-1/12 z-10" style="background: linear-gradient(to left, transparent, black); left: {image.ratio > 1 ? '0px' : '130px'};"></div>
|
||||
<!--div class="flex items-end justify-end w-full h-full">
|
||||
<div class="absolute top-0 h-full {image.ratio > 1 && event.type !== 'summit' ? 'w-2/3' : 'w-2/6'} left-1/12 z-10" style="background: linear-gradient(to left, transparent, black); left: {image.ratio > 1 ? '0px' : '130px'};"></div>
|
||||
|
||||
<div class="h-full {image.ratio > 1.3 ? 'w-full' : 'w-5/6'} justify-end flex">
|
||||
<img src={image.src} class="h-full object-cover" style="{image.calcObjOffsets('wide')}" />
|
||||
</div>
|
||||
</div>
|
||||
</div-->
|
||||
|
||||
<div class="absolute bottom-8 left-8 uppercase z-20 text-xl">
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-1 px-2 inline-block bg-black">
|
||||
{tools.dateFormat(event.date)}
|
||||
<div class="absolute left-0 top-0 h-full w-64 z-10" style="background: linear-gradient(to left, transparent, black);"></div>
|
||||
<img src={image.src} class="absolute right-0 h-full w-full object-cover" style="{image.calcObjOffsets('wide')}" />
|
||||
|
||||
{#if event.type === 'summit'}
|
||||
<img src="/gen-img/summit-title3.svg" class="absolute -bottom-1.5 left-0 w-full z-20" />
|
||||
<div class="absolute top-0 left-0 h-44 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
|
||||
<div class="absolute bottom-0 left-0 h-32 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
|
||||
<div class="absolute right-0 top-0 h-full w-44 z-10" style="background: linear-gradient(to right, transparent, black);"></div>
|
||||
|
||||
<div class="absolute top-5 right-8 uppercase text-[2.4rem] z-20 font-kyiv text-right">
|
||||
<div>
|
||||
{tools.dateFormat(event.date, "dd/MM/yyyy")}
|
||||
</div>
|
||||
<div class="-mt-1">
|
||||
{event.city}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex" style="margin-top: -2px;">
|
||||
<div class="border-2 border-white py-1 px-2 bg-black">
|
||||
{event.city}, {event.country}
|
||||
{:else}
|
||||
<div class="absolute bottom-8 left-8 uppercase z-20 text-xl">
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-1 px-2 inline-block bg-black">
|
||||
{tools.dateFormat(event.date)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex" style="margin-top: -2px;">
|
||||
<div class="border-2 border-white py-1 px-2 bg-black">
|
||||
{event.city}, {event.country}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex" style="margin-top: -2px;">
|
||||
<div class="border-2 border-white py-1 px-2 bg-white text-black uppercase">
|
||||
{event.type}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex" style="margin-top: -2px;">
|
||||
<div class="border-2 border-white py-1 px-2 bg-white text-black uppercase">
|
||||
{event.type}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,4 +25,10 @@ copenhagen02:
|
|||
wide-square: { x: 100% }
|
||||
wide: { x: 100% }
|
||||
poster: { x: 100% }
|
||||
poster-simple: { x: 108% }
|
||||
poster-simple: { x: 108% }
|
||||
prague01:
|
||||
square: { x: 67% }
|
||||
wide-square: { x: 70% }
|
||||
wide: { x: 110% }
|
||||
poster: { x: 60% }
|
||||
poster-simple: { x: 60% }
|
||||
|
|
@ -29,6 +29,12 @@
|
|||
"height": 2100,
|
||||
"ratio": 1
|
||||
},
|
||||
"prague01": {
|
||||
"format": "PNG",
|
||||
"width": 7000,
|
||||
"height": 3517,
|
||||
"ratio": 1.99033266988911
|
||||
},
|
||||
"summit02": {
|
||||
"format": "PNG",
|
||||
"width": 2600,
|
||||
|
|
|
|||
|
|
@ -14,8 +14,21 @@ const { title } = Astro.props;
|
|||
type="font/woff2"
|
||||
crossorigin
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="/fonts/KyivTypeSerif-Medium3.woff2"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
crossorigin
|
||||
/>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'KyivTypeSerif';
|
||||
src: url(/fonts/KyivTypeSerif-Medium3.woff2) format('woff2');
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#F0F0F0] text-black font-mono font-['DM Mono Regular Latin']">
|
||||
<body class="bg-[#F0F0F0] text-black font-mono">
|
||||
|
||||
<div class="pl-10 pt-10 pb-0">
|
||||
|
||||
|
|
|
|||
|
|
@ -35,9 +35,9 @@ export function dateInfo (item) {
|
|||
return { isDate, isFuture: future, year }
|
||||
}
|
||||
|
||||
export function dateFormat (str) {
|
||||
export function dateFormat (str, fmt) {
|
||||
if (str.match(/^\d{4}-\d{2}-\d{2}$/)) {
|
||||
return format(new Date(str), 'MMM d, yyyy')
|
||||
return format(new Date(str), fmt || 'MMM d, yyyy')
|
||||
}
|
||||
const qm = str.match(/^(\d{4})\/(\w+)$/)
|
||||
if (qm) {
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
|
||||
@tailwind components;
|
||||
|
||||
@layer components {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ export default {
|
|||
fontFamily: {
|
||||
sans: ["Archivo", ...defaultTheme.fontFamily.sans],
|
||||
mono: ["DM Mono", ...defaultTheme.fontFamily.mono],
|
||||
kyiv: ["KyivTypeSerif"],
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue