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,8 +10,10 @@
   }
   
   onMount(() => {
-    app = new PIXI.Application({
+    (async ()=>{
-      view: canvas,
+      app = new PIXI.Application()
+      await app.init({
+        canvas: canvas,
         width: window.innerWidth,
         height: window.innerHeight,
         backgroundColor: 0x000000,
@@ -20,6 +22,12 @@
       });
       (PIXI.Filter as any).defaultResolution = window.devicePixelRatio;
 
+      // Preload assets to suppress cache warnings
+      await PIXI.Assets.load([
+        "/success/envelope.png",
+        "/success/displacementMap.jpg"
+      ]);
+
       const container = new PIXI.Container();
       app.stage.addChild(container);
 
@@ -29,16 +37,19 @@
       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;
+      envelope.y = envelope.height / 2 + 70;
       
       container.addChild(envelope);
 
-    const text = new PIXI.Text("Thank you!", {
+      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;
@@ -48,7 +59,7 @@
       
       const displacementSprite = PIXI.Sprite.from('/success/displacementMap.jpg');
       displacementSprite.scale.set(.75);
-    displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
+      displacementSprite.texture.source.addressMode = 'repeat';
       const displacementFilter = new PIXI.DisplacementFilter(displacementSprite);
       displacementFilter.scale.x = 0;
       displacementFilter.scale.y = 100;
@@ -68,6 +79,7 @@
         // 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
       },
     },