add logo + logo animation (#5)

* Logo Animation + Register button * Merge remote-tracking branch 'upstream/main' into text-animation-2 * Re-add logo after merge + clean some codes * chore: format code Co-authored-by: Nutthapat Pongtanyavichai <59821765+Leomotors@users.noreply.github.com>
crackncode-th · Sep 3, 2022 · 2530b7c · 2530b7c
1 parent 0be7413
commit 2530b7c
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 13 deletions.
diff --git a/src/app.scss b/src/app.scss
@@ -8,12 +8,12 @@
     sans-serif;
 }
 
-.rwidth {
+.app-width {
   @apply w-full lg:w-4/5 xl:w-3/4 2xl:w-2/3;
 }
 
 .page {
-  @apply rwidth mx-auto;
+  @apply app-width mx-auto;
 }
 
 .page-title {

diff --git a/src/components/elements/CncLogo.svelte b/src/components/elements/CncLogo.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { cubicOut } from "svelte/easing";
+  import { draw, fade } from "svelte/transition";
+
+  import { bottom, top } from "$components/elements/LogoShape";
+
+  let showElement = false;
+  onMount(() => {
+    showElement = true;
+  });
+</script>
+
+{#if showElement}
+  <div class="flex justify-center p-10">
+    <svg
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      width="130"
+      height="130"
+      viewBox="0 0 1000 1000"
+    >
+      <defs>
+        <path
+          id="logo-top"
+          in:draw={{ duration: 1600, easing: cubicOut }}
+          d={top}
+        />
+        <clipPath id="clip-top">
+          <use xlink:href="#logo-top" />
+        </clipPath>
+        <path
+          id="logo-bottom"
+          in:draw={{ duration: 1600, easing: cubicOut }}
+          d={bottom}
+        />
+        <clipPath id="clip-bottom">
+          <use xlink:href="#logo-bottom" />
+        </clipPath>
+      </defs>
+      <g>
+        <use
+          xlink:href="#logo-top"
+          clip-path="url(#clip-top)"
+          style="fill: transparent; stroke: white; stroke-width: 40;"
+        />
+        <use
+          xlink:href="#logo-bottom"
+          clip-path="url(#clip-bottom)"
+          style="fill: transparent; stroke: white; stroke-width: 40;"
+        />
+
+        <path
+          in:fade={{ delay: 1300, duration: 500 }}
+          style="fill: white;"
+          d={top}
+        />
+        <path
+          in:fade={{ delay: 1300, duration: 500 }}
+          style="fill: white;"
+          d={bottom}
+        />
+      </g>
+    </svg>
+  </div>
+{/if}
diff --git a/src/components/elements/LogoShape.ts b/src/components/elements/LogoShape.ts
@@ -0,0 +1,7 @@
+export const top = `M692,518.5c0,14.1-4.2,27.1-11.5,38L555.8,681.2c-103.6,103.6-273.1,103.6-376.8,0l-1.3-1.3
+c-103.6-103.6-103.6-273.2,0-376.8l6.9-6.9L381.3,99.7c24.6,25.1,39.7,59.4,39.7,97.3c0,34.5-12.6,66.1-33.4,90.4L280.8,394.3
+c-51,51-51,134.5,0,185.5s134.5,51,185.5,0L582,464c11.5-8.8,25.9-14,41.5-14C661.3,450,692,480.7,692,518.5z`;
+
+export const bottom = `M310.7,480c0-14.1,4.2-27.1,11.5-38l124.7-124.7c103.6-103.6,273.1-103.6,376.8,0l1.3,1.3
+c103.6,103.6,103.6,273.2,0,376.8l-6.9,6.9L621.4,898.8c-24.6-25.1-39.7-59.4-39.7-97.3c0-34.5,12.6-66.1,33.4-90.4L722,604.2
+c51-51,51-134.5,0-185.5s-134.5-51-185.5,0L420.7,534.5c-11.5,8.8-25.9,14-41.5,14C341.4,548.5,310.7,517.8,310.7,480z`;
diff --git a/src/components/layouts/Footer.svelte b/src/components/layouts/Footer.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <footer
-  class="mt-5 my-3 mx-auto flex w-2/3 flex-col items-center justify-center"
+  class="my-3 mx-auto mt-5 flex w-2/3 flex-col items-center justify-center"
 >
   <hr class="mb-5 w-full" />
   <h2 class="text-lg font-bold">Crack 'n' Code Thailand</h2>

diff --git a/src/components/layouts/NavBar.svelte b/src/components/layouts/NavBar.svelte
@@ -23,16 +23,17 @@
 </script>
 
 <nav
-  class="rwidth mx-auto flex select-none flex-row items-center justify-between p-4"
+  class="app-width mx-auto mt-8 flex select-none flex-row items-center justify-between p-4"
 >
   <div class="left">
-    <a href="/">
+    <a href="/" class="flex flex-row items-center lg:gap-3">
       <img
-        class="cursor-pointer scale-[.66] lg:scale-100"
-        width="96"
+        class="scale-[.66] cursor-pointer lg:scale-100"
+        width="48"
         src="crackncode.webp"
         alt="crack n code logo"
       />
+      <p class="font-bold lg:text-lg">CRACK 'N' CODE</p>
     </a>
   </div>
 
@@ -43,13 +44,13 @@
   >
     {#each Object.entries(routes) as [url, name]}
       <a
-        class="text-xl {(
+        class="text-lg {(
           url == '/'
             ? $page.url.pathname == '/'
             : $page.url.pathname == '/' + url
         )
           ? 'cursor-default bg-slate-800'
-          : 'hover:bg-slate-700'} rounded p-2 transition-all"
+          : 'hover:bg-slate-700'} rounded px-2 py-1 transition-all"
         href={url}
       >
         {name}

diff --git a/src/lib/transitions.ts b/src/lib/transitions.ts
@@ -33,3 +33,29 @@ export function doubleSlide_txt(
     css: (t: number) => `opacity: ${t <= 0.5 ? 0 : 100}%;`,
   };
 }
+
+export function drawLogo(
+  node: SVGPathElement,
+  { delay = 0, duration = 1500, easing = cubicOut } = {}
+) {
+  const len = node.getTotalLength();
+  return {
+    delay,
+    duration,
+    easing,
+    css: (t: number, u: number) => `stroke-dasharray: ${t * len} ${u * len};`,
+  };
+}
+
+export function drawLogoRect(
+  node: SVGPathElement,
+  { delay = 0, duration = 1500, easing = cubicOut } = {}
+) {
+  const len = node.getTotalLength();
+  return {
+    delay,
+    duration,
+    easing,
+    css: (t: number, u: number) => `stroke-dasharray: ${t * len} ${u * len};`,
+  };
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -7,7 +7,7 @@
 
 <NavBar />
 
-<div class="min-h-[calc(100vh-19rem)] p-4">
+<div class="min-h-[calc(100vh-21rem)] p-4 lg:min-h-[calc(100vh-19rem)]">
   <slot />
 </div>
 

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import CncLogo from "$components/elements/CncLogo.svelte";
   import CncText from "$components/elements/CncText.svelte";
 </script>
 
@@ -11,15 +12,17 @@
 </svelte:head>
 
 <main class="page">
-  <CncText delay={100} clsx="mb-10">
+  <CncLogo />
+
+  <CncText delay={200} clsx="mb-10">
     <h1 class="page-title">Crack 'n' Code Thailand</h1>
   </CncText>
 
-  <CncText delay={650} clsx="mb-2">
+  <CncText delay={750} clsx="mb-2">
     <h2 class="text-3xl font-bold">Next Contest</h2>
   </CncText>
 
-  <CncText delay={650}>
+  <CncText delay={750}>
     <p class="text-xl">September 10, 2022 @ 19:00-22:00 (UTC+7)</p>
   </CncText>
 </main>