remove old fonts, update success

src/lib/styles/global.css

@@ -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;

src/routes/success/+page.svelte

@@ -10,64 +10,76 @@
   }
   
   onMount(() => {
-    app = new PIXI.Application({
+    (async ()=>{
-      view: canvas,
+      app = new PIXI.Application()
-      width: window.innerWidth,
+      await app.init({
-      height: window.innerHeight,
+        canvas: canvas,
-      backgroundColor: 0x000000,
+        width: window.innerWidth,
-      backgroundAlpha: 0,
+        height: window.innerHeight,
-      resizeTo: window
+        backgroundColor: 0x000000,
-    });
+        backgroundAlpha: 0,
-    (PIXI.Filter as any).defaultResolution = window.devicePixelRatio;
+        resizeTo: window
+      });
+      (PIXI.Filter as any).defaultResolution = window.devicePixelRatio;
 
-    const container = new PIXI.Container();
+      // Preload assets to suppress cache warnings
-    app.stage.addChild(container);
+      await PIXI.Assets.load([
+        "/success/envelope.png",
+        "/success/displacementMap.jpg"
+      ]);
 
-    const envelope = PIXI.Sprite.from("/success/envelope.png");
+      const container = new PIXI.Container();
-    const envelopeAspectRatio = 1420 / 830;
+      app.stage.addChild(container);
-    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 text = new PIXI.Text("Thank you!", {
+      const envelope = PIXI.Sprite.from("/success/envelope.png");
-      fontFamily: "stratos",
+      const envelopeAspectRatio = 1420 / 830;
-      fontSize: 66,
+      envelope.anchor.set(0.5);
-      letterSpacing: -3,
+      envelope.width = isLandscape() ? window.innerWidth / 4.5 : window.innerWidth / 2 ;
-      fill: 0xffead9,
+      envelope.height = envelope.width / envelopeAspectRatio;
-      align: "center",
+      envelope.x = app.screen.width / 2;
-    });
+      envelope.y = envelope.height / 2 + 70;
-    text.anchor.set(0.5);
+      
-    text.x = app.screen.width / 2;
+      container.addChild(envelope);
-    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;
 
-    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">
+<div class="
-  <h1>Your message is underway.</h1>
+  flex flex-col justify-end md:justify-center 
-  <p>I will get back to you as soon as I can and look forward to discussing further whatever you have sent me.</p>
+  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>
+<canvas bind:this={canvas} class="fixed top-0 left-0 -z-10 w-screen h-screen"></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>

svelte.config.js

@@ -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
       },
     },