site/blueprints/site.yml

@@ -12,26 +12,6 @@ columns:
         sortable: true
         create: false
         status: listed
-
-  - width: 1/2
-    fields:
-      siteTitle:
-        label: Titre du site
-        type: text
-        translate: true
-      siteTagline:
-        label: Tagline
-        type: text
-        translate: true
-      siteDescription:
-        label: Description
-        type: textarea
-        translate: true
-      logo:
-        label: Logo
-        type: files
-        max: 1
-
   - width: 1/2
     fields:
       contactEmail:

site/controllers/site.php

@@ -14,7 +14,7 @@ return function ($page, $kirby, $site) {
     'template' => $page->intendedTemplate()->name(),
     'modified' => $page->modified('Y-m-d'),
     'site' => [
-      'title' => $site->siteTitle()->value(),
+      'title' => $site->site_title()->value(),
       'url' => $site->url(),
       'logo' => $site->logo()->toFile()?->url(),
       'language' => $kirby->language()?->code() ?? 'fr',

src/components/layout/Cursor.svelte

@@ -1,9 +1,10 @@
 <script>
   import { onMount } from 'svelte'
 
-  let cursorX = $state(0)
-  let cursorY = $state(0)
-  let onTarget = $state(false)
+  let cursorX = 0
+  let cursorY = 0
+  let outlineX = 0
+  let outlineY = 0
   let rafId
 
   onMount(() => {
@@ -12,74 +13,55 @@
       cursorY = e.clientY
     }
 
-    const handleMouseOver = (e) => {
-      onTarget = !!e.target.closest('a, button, [role="button"], [tabindex]')
-    }
-
-    const handleMouseOut = () => {
-      onTarget = false
+    const animate = () => {
+      outlineX += (cursorX - outlineX) * 0.2
+      outlineY += (cursorY - outlineY) * 0.2
+      rafId = requestAnimationFrame(animate)
     }
 
     window.addEventListener('mousemove', handleMouseMove)
-    window.addEventListener('mouseover', handleMouseOver)
-    window.addEventListener('mouseout', handleMouseOut)
+    animate()
 
     return () => {
       window.removeEventListener('mousemove', handleMouseMove)
-      window.removeEventListener('mouseover', handleMouseOver)
-      window.removeEventListener('mouseout', handleMouseOut)
+      if (rafId) cancelAnimationFrame(rafId)
     }
   })
 </script>
 
-<div
-  class="cursor-wrapper"
-  class:upon-target={onTarget}
-  style="transform: translate({cursorX}px, {cursorY}px)"
->
-  <div class="cursor-dot"></div>
-  <div class="cursor-outline"></div>
-</div>
+<div class="cursor" style="transform: translate({cursorX}px, {cursorY}px)"></div>
+<div class="cursor-outline" style="transform: translate({outlineX}px, {outlineY}px)"></div>
 
 <style>
-  .cursor-wrapper {
+  .cursor,
+  .cursor-outline {
     position: fixed;
     top: 0;
     left: 0;
-    width: 0;
-    height: 0;
     pointer-events: none;
     z-index: var(--z-cursor);
   }
 
-  .cursor-dot,
-  .cursor-outline {
-    position: absolute;
-    top: 0;
-    left: 0;
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .cursor-dot {
+  .cursor {
     width: 8px;
     height: 8px;
     background: #04fea0;
+    border-radius: 50%;
+    transform-origin: center;
   }
 
   .cursor-outline {
     width: 40px;
     height: 40px;
     border: 2px solid #04fea0;
-    transition: transform 0.2s ease;
-  }
-
-  .upon-target .cursor-outline {
-    transform: translate(-50%, -50%) scale(0.5);
+    border-radius: 50%;
+    transform-origin: center;
+    margin: -16px 0 0 -16px;
   }
 
   @media (max-width: 768px) {
-    .cursor-wrapper {
+    .cursor,
+    .cursor-outline {
       display: none;
     }
   }