remove old fonts, update success
This commit is contained in:
saiminh
parent
3108c0628a
commit
3dfdb1e47b
3 changed files with 74 additions and 150 deletions
|
|
@ -47,65 +47,6 @@
|
|||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Lack';
|
||||
src: url('/fonts/Lack-Regular.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Syne';
|
||||
src: url('/fonts/Syne-Regular.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Syne';
|
||||
src: url('/fonts/Syne-Bold.woff2') format('woff2');
|
||||
font-weight: bold;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Syne';
|
||||
src: url('/fonts/SyneTactile-Regular.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Cantique';
|
||||
src: url('/fonts/Cantique-Normal.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Feroniapi';
|
||||
src: url('/fonts/Feroniapi-MediumItalic.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Lineal';
|
||||
src: url('/fonts/LinealVF.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'LeMurmure';
|
||||
src: url('/fonts/LeMurmure-Regular.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'PPFormula';
|
||||
src: url('/fonts/PPFormula-Medium.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'PPFormula';
|
||||
src: url('/fonts/PPFormula-ExtraBold.woff2') format('woff2');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
a:hover, input:hover, button:hover {
|
||||
cursor: url('/pointer.svg'), auto;
|
||||
|
|
|
|||
|
|
@ -10,64 +10,76 @@
|
|||
}
|
||||
|
||||
onMount(() => {
|
||||
app = new PIXI.Application({
|
||||
view: canvas,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
backgroundColor: 0x000000,
|
||||
backgroundAlpha: 0,
|
||||
resizeTo: window
|
||||
});
|
||||
(PIXI.Filter as any).defaultResolution = window.devicePixelRatio;
|
||||
(async ()=>{
|
||||
app = new PIXI.Application()
|
||||
await app.init({
|
||||
canvas: canvas,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
backgroundColor: 0x000000,
|
||||
backgroundAlpha: 0,
|
||||
resizeTo: window
|
||||
});
|
||||
(PIXI.Filter as any).defaultResolution = window.devicePixelRatio;
|
||||
|
||||
const container = new PIXI.Container();
|
||||
app.stage.addChild(container);
|
||||
// Preload assets to suppress cache warnings
|
||||
await PIXI.Assets.load([
|
||||
"/success/envelope.png",
|
||||
"/success/displacementMap.jpg"
|
||||
]);
|
||||
|
||||
const envelope = PIXI.Sprite.from("/success/envelope.png");
|
||||
const envelopeAspectRatio = 1420 / 830;
|
||||
envelope.anchor.set(0.5);
|
||||
envelope.width = isLandscape() ? window.innerWidth / 4.5 : window.innerWidth / 2 ;
|
||||
envelope.height = envelope.width / envelopeAspectRatio;
|
||||
envelope.x = app.screen.width / 2;
|
||||
envelope.y = envelope.height / 2 + 30;
|
||||
|
||||
container.addChild(envelope);
|
||||
const container = new PIXI.Container();
|
||||
app.stage.addChild(container);
|
||||
|
||||
const text = new PIXI.Text("Thank you!", {
|
||||
fontFamily: "stratos",
|
||||
fontSize: 66,
|
||||
letterSpacing: -3,
|
||||
fill: 0xffead9,
|
||||
align: "center",
|
||||
});
|
||||
text.anchor.set(0.5);
|
||||
text.x = app.screen.width / 2;
|
||||
text.y = envelope.y + envelope.height / 2 + 20;
|
||||
container.addChild(text);
|
||||
text.resolution = window.devicePixelRatio;
|
||||
|
||||
const displacementSprite = PIXI.Sprite.from('/success/displacementMap.jpg');
|
||||
displacementSprite.scale.set(.75);
|
||||
displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
|
||||
const displacementFilter = new PIXI.DisplacementFilter(displacementSprite);
|
||||
displacementFilter.scale.x = 0;
|
||||
displacementFilter.scale.y = 100;
|
||||
displacementFilter.padding = 50;
|
||||
const envelope = PIXI.Sprite.from("/success/envelope.png");
|
||||
const envelopeAspectRatio = 1420 / 830;
|
||||
envelope.anchor.set(0.5);
|
||||
envelope.width = isLandscape() ? window.innerWidth / 4.5 : window.innerWidth / 2 ;
|
||||
envelope.height = envelope.width / envelopeAspectRatio;
|
||||
envelope.x = app.screen.width / 2;
|
||||
envelope.y = envelope.height / 2 + 70;
|
||||
|
||||
container.addChild(envelope);
|
||||
|
||||
displacementSprite.position.x = envelope.position._x;
|
||||
const text = new PIXI.Text({
|
||||
text: "Thank you!",
|
||||
style: {
|
||||
fontFamily: "stratos",
|
||||
fontSize: 66,
|
||||
letterSpacing: -3,
|
||||
fill: 0xffead9,
|
||||
align: "center",
|
||||
}
|
||||
});
|
||||
text.anchor.set(0.5);
|
||||
text.x = app.screen.width / 2;
|
||||
text.y = envelope.y + envelope.height / 2 + 20;
|
||||
container.addChild(text);
|
||||
text.resolution = window.devicePixelRatio;
|
||||
|
||||
const displacementSprite = PIXI.Sprite.from('/success/displacementMap.jpg');
|
||||
displacementSprite.scale.set(.75);
|
||||
displacementSprite.texture.source.addressMode = 'repeat';
|
||||
const displacementFilter = new PIXI.DisplacementFilter(displacementSprite);
|
||||
displacementFilter.scale.x = 0;
|
||||
displacementFilter.scale.y = 100;
|
||||
displacementFilter.padding = 50;
|
||||
|
||||
container.addChild(displacementSprite);
|
||||
displacementSprite.position.x = envelope.position._x;
|
||||
|
||||
container.filters = [displacementFilter];
|
||||
container.addChild(displacementSprite);
|
||||
|
||||
app.ticker.add(() =>
|
||||
{
|
||||
container.filters = [displacementFilter];
|
||||
|
||||
app.ticker.add(() =>
|
||||
{
|
||||
// Offset the sprite position to make vFilterCoord update to larger value.
|
||||
// Repeat wrapping makes sure there's still pixels on the coordinates.
|
||||
displacementSprite.x = displacementSprite.x + 6;
|
||||
// Reset x to 0 when it's over width to keep values from going to very huge numbers.
|
||||
if (displacementSprite.x > displacementSprite.width) { displacementSprite.x = 0; }
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
return () => {
|
||||
app.destroy(true, true);
|
||||
|
|
@ -77,48 +89,18 @@
|
|||
|
||||
</script>
|
||||
|
||||
<div class="wrapper">
|
||||
<h1>Your message is underway.</h1>
|
||||
<p>I will get back to you as soon as I can and look forward to discussing further whatever you have sent me.</p>
|
||||
<div class="
|
||||
flex flex-col justify-end md:justify-center
|
||||
h-screen
|
||||
w-full max-w-[1200px] landscape:max-w-[74vw] landscape:mx-auto
|
||||
mx-auto
|
||||
p-(--spacing-outer) pb-[90px] landscape:pt-[90px] landscape:pb-[0px]
|
||||
">
|
||||
<h1 class="text-[2em] md:text-[3em] leading-[0.9] mt-8 md:mt-4 mb-4 text-(--color-highlight)">
|
||||
Your message is underway.
|
||||
</h1>
|
||||
<p class="text-base md:text-[1.5em]">
|
||||
I will get back to you as soon as I can and look forward to discussing further whatever you have sent me.
|
||||
</p>
|
||||
</div>
|
||||
<canvas bind:this={canvas}></canvas>
|
||||
|
||||
<style>
|
||||
canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
padding: var(--spacing-outer) var(--spacing-outer) 60px var(--spacing-outer);
|
||||
margin: 0 auto;
|
||||
@media screen and (min-width: 768px) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
line-height: .9;
|
||||
margin: 2em 0 0 0;
|
||||
color: var(--color-highlight);
|
||||
@media screen and (min-width: 768px) {
|
||||
font-size: 3.9em;
|
||||
margin: 1em 0 0 0;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 1em;
|
||||
@media screen and (min-width: 768px) {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<canvas bind:this={canvas} class="fixed top-0 left-0 -z-10 w-screen h-screen"></canvas>
|
||||
|
|
@ -36,7 +36,8 @@ const config = {
|
|||
'style-src': ['self', 'unsafe-inline', '*.typekit.net'],
|
||||
"font-src": ['self', '*.typekit.net'],
|
||||
'script-src': ['self', 'unsafe-eval', 'unsafe-inline', 'https://analytics.floter.design'],
|
||||
'connect-src': ['self', 'https://analytics.floter.design'],
|
||||
'connect-src': ['self', 'https://analytics.floter.design', 'data:'], // Allow data: URIs for PixiJS
|
||||
'worker-src': ['self', 'blob:'], // Allow blob: URLs for PixiJS Web Workers
|
||||
// "upgrade-insecure-requests": true // Disabled for HTTP/IP access - enable when using HTTPS
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue