Refactor: Visual update

src/comp/comment.svelte

@@ -93,7 +93,7 @@
           <div class="nameField">
             <Mention user={comment.author}></Mention>
             {#each tags as tag}
-            <span class="tag typeTitle">{tag}</span>
+            <span class="tag typeHead">{tag}</span>
             {/each}
     
             {#if replyTo}

src/comp/entry/entryform.svelte

@@ -59,7 +59,7 @@
 
 <form class="entryForm" {action} {method} on:submit={(e) => {dispatch('submit', e);}} {...$$restProps}>
   <div class="name">
-    <h1 class="typeHead noSelect">{formName}</h1>
+    <h1 class="typeDisplay noSelect">{formName}</h1>
     <slot name="belowName" />
   </div>
 

src/comp/page/post.svelte

@@ -128,7 +128,7 @@
           <Mention user={post.author}></Mention>
           <Ago date={post.postDate}></Ago>
         </div>
-        <h1 class="typeTitle title">{post.name}</h1>
+        <h1 class="typeHead title">{post.name}</h1>
       </div>
     </div>
   

src/routes/(app)/+layout.server.js

@@ -1,8 +1,8 @@
 import { getCategories } from "$lib/server/db/category";
 
 /** @type {import("@sveltejs/kit").ServerLoad} */
-export async function load({ locals }) {
+export async function load() {
-  const categories = await getCategories(locals.sql);
+  const categories = await getCategories();
 
   return {
     categories: categories

src/routes/(login)/+layout.svelte

@@ -1,10 +1,20 @@
 <script>
+    import { onMount } from "svelte";
+
   /** @type {Element} */
   let glow1;
   
   /** @type {Element} */
   let background;
 
+  /** @typedef {{x: number, y: number, size: number}} glowAnimState */
+  /** @type {glowAnimState} */
+  let current = {x: 0, y: 0, size: 100};
+  /** @type {glowAnimState} */
+  let target = {x: 0, y: 0, size: 100};
+
+  const speed = 0.003;
+
   function mouseMoveGlow(/** @type {MouseEvent | TouchEvent} */ e) {
     const rect = background.getBoundingClientRect();
 
@@ -16,8 +26,46 @@
 
     const size = (Math.max(Math.abs(x - 0.5), Math.abs(y - 0.5)) * 2) * 10 + 100;
 
-    glow1.setAttribute('style', `--x: ${x * 100}%; --y: ${y * 100}%; --size: ${size}%;`);
+    target = {x: x * 100, y: y * 100, size: size};
   }
+
+  /** @type {number} */
+  let prevTimeStamp = -1;
+
+  function follow(/** @type {number} */ timeStamp) {
+    if (prevTimeStamp == -1) {
+      prevTimeStamp = timeStamp;
+      requestAnimationFrame(follow);
+      return;
+    }
+
+    /** @type {glowAnimState} */
+    const vector = {
+      x: target.x - current.x,
+      y: target.y - current.y,
+      size: target.size - current.size,
+    };
+
+    const delta = Math.min((timeStamp - prevTimeStamp) * speed, 1.0);
+
+    current = {
+      x: current.x + vector.x * delta,
+      y: current.y + vector.y * delta,
+      size: current.size + vector.size * delta,
+    };
+
+    glow1.setAttribute('style', `--x: ${current.x}%; --y: ${current.y}%; --size: ${current.size}%;`);
+
+    prevTimeStamp = timeStamp;
+
+    requestAnimationFrame(follow);
+    // setTimeout(() => {
+    // }, 300);
+  }
+
+  onMount(() => {
+    window.requestAnimationFrame(follow);
+  });
 </script>
 
 <style lang="scss">
@@ -99,7 +147,6 @@
       background-size: var(--size) var(--size);
 
       mix-blend-mode: color-dodge;
-      transition: 0.5s ease-out;
     }
 
     &#glow-2 {

src/routes/(login)/login/+page.svelte

@@ -6,6 +6,6 @@
 <Entryform action="/login" formName="Login" submitText="enter">
   <a href="/register" slot="belowName">New here?</a>
 
-  <Entryfield name="username" labelName="Username" type="text" autocomplete="username"></Entryfield>
+  <Entryfield name="username" labelName="username" type="text" autocomplete="username"></Entryfield>
-  <Entryfield name="password" labelName="Password" type="password" autocomplete="current-password"></Entryfield>
+  <Entryfield name="password" labelName="password" type="password" autocomplete="current-password"></Entryfield>
 </Entryform>

src/routes/(login)/register/+page.svelte

@@ -18,7 +18,7 @@
 <Entryform action="/register" formName="Register" submitText="go!" on:submit={(e) => {submitForm(e.detail);}}>
   <a href="/login" slot="belowName">Already a member?</a>
 
-  <Entryfield name="username" labelName="Username" type="text" autocomplete="username"></Entryfield>
+  <Entryfield name="username" labelName="username" type="text" autocomplete="username"></Entryfield>
-  <Entryfield name="password" labelName="Password" type="password" autocomplete="new-password" bind:value={password}></Entryfield>
+  <Entryfield name="password" labelName="password" type="password" autocomplete="new-password" bind:value={password}></Entryfield>
-  <Entryfield name="repeatPassword" labelName="Confirm Password" type="password" autocomplete="new-password" bind:value={repeatPassword}></Entryfield>
+  <Entryfield name="repeatPassword" labelName="confirm password" type="password" autocomplete="new-password" bind:value={repeatPassword}></Entryfield>
 </Entryform>

src/routes/+page.svelte

@@ -22,6 +22,6 @@
 </style>
 
 <div class="center">
-  <h1 class="typeHead"><span class="typeContent">Welcome to </span>Echo</h1>
+  <h1 class="typeDisplay"><span class="typeContent">Welcome to </span>Echo</h1>
   <p>Currently suppored link: <a href="/posts">/posts</a></p>
 </div>

static/css/base.scss

@@ -3,7 +3,7 @@
 
   --background: #111118;
 
-  --accent-gray: #8298b1;
+  --accent-gray: #b182a3;
 
   --accent-light: #9e8afa;
   --accent: #846bf7;

static/css/font.scss

@@ -11,7 +11,7 @@
 }
 
 .lt-afficher-neue-400,
-.typeTitle {
+.typeHead {
   font-family: "LT Afficher Neue", serif;
   font-weight: 400;
   font-style: normal;
@@ -47,7 +47,8 @@
   font-style: normal;
 }
 
-.taviraj-light {
+.taviraj-light,
+.typeTitle {
   font-family: "Taviraj", serif;
   font-weight: 300;
   font-style: normal;
@@ -168,7 +169,7 @@
 }
 
 .cinzel-decorative-regular,
-.typeHead {
+.typeDisplay {
   font-family: "Cinzel Decorative", serif;
   font-weight: 400;
   font-style: normal;

static/css/form.scss

@@ -7,7 +7,7 @@ form.entryForm {
   padding: 32px;
   background: #00000090;
   border-radius: 16px;
-  /* backdrop-filter: blur(28px); */
+  backdrop-filter: blur(16px);
 
   max-width: 350px;
   width: calc(20dvw + 150px);