From 83d258705c3bdfafd86e806e7dc2ff05b92293a7 Mon Sep 17 00:00:00 2001
From: te <thrizzle@skiff.com>
Date: Wed, 22 Mar 2023 20:58:08 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20fix=20about=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Background.svelte |  2 +-
 src/components/Link.svelte       | 26 ++++++++++++++++++++++++++
 src/routes/+page.svelte          |  1 -
 src/routes/about/+page.mdx       | 18 ++++++++++--------
 4 files changed, 37 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Link.svelte

diff --git a/src/components/Background.svelte b/src/components/Background.svelte
index c9dce7e..c0af13f 100644
--- a/src/components/Background.svelte
+++ b/src/components/Background.svelte
@@ -3,7 +3,7 @@
     let _text = text.repeat(500)
 </script>
 
-<div class="h-screen w-screen overflow-clip absolute -z-100">
+<div class="max-h-120vh w-screen overflow-clip absolute -z-100">
     <div class="m-0 h-full w-[105vw] bg-black text-neutral-800 m-0 break-words" style="font-family: Array-Wide; font-size: 3rem; line-height:2.5rem">
         {_text}
     </div>
diff --git a/src/components/Link.svelte b/src/components/Link.svelte
new file mode 100644
index 0000000..3d426bc
--- /dev/null
+++ b/src/components/Link.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let href: string;
+    export let away: boolean = false;
+    export let back: boolean = false;
+</script>
+
+{#if back}
+<a href={href} class="group text-white font-bold">
+    <span class="inline-block font-normal group-hover:-translate-x-1 duration-500 ease-out">←</span>
+    <slot/> 
+</a>
+{:else if away}
+<a href={href} class="group text-white font-bold">
+    <slot/> 
+    <span class="inline-block font-normal group-hover:-translate-y-[0.125rem] group-hover:translate-x-[0.125rem] duration-500 ease-out">
+        ↗
+    </span>
+</a>
+{:else}
+<a href={href} class="group text-white font-bold">
+    <slot/> 
+    <span class="inline-block font-normal group-hover:translate-x-[0.125rem] duration-500 ease-out">
+        →
+    </span>
+</a>
+{/if}
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8e84961..b9024e0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,5 @@
 <script>
     import Background from "../components/Background.svelte";
-    import Rise from "../components/Rise.svelte";
     let links = [
         { href: "/about", text: "About" },
         { href: "/contact", text: "Contact" },
diff --git a/src/routes/about/+page.mdx b/src/routes/about/+page.mdx
index db3aad4..0fafc24 100644
--- a/src/routes/about/+page.mdx
+++ b/src/routes/about/+page.mdx
@@ -1,17 +1,18 @@
 ---
 title: Smoke and Mirrors
 date: '2023-4-2'
-image: /about.webp
 abstract: ''
 ---
+
 <script>
-    import Background from "../../components/Background.svelte";
+	import Background from "../../components/Background.svelte"; import Link from
+	"../../components/Link.svelte"
 </script>
 
-<Background text="ABOUTUS"/>
-<div class="h-screen w-screen px-0 m-0" style="font-family: Inter">
-    <header class="mx-auto flex flex-col items-center text-white lg:max-w-screen-xl w-screen" style={`background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(rgba(2, 0, 36, 0) 0%, rgb(0, 0, 0) 100%), url(${image})`}>
-        <div class="text-left w-2/3 mt-20">
+<div class="min-h-screen w-screen px-0 m-0" style="font-family: Inter">
+    <header class="mx-auto flex items-center text-white lg:max-w-screen-xl w-2/5">
+        <div class="text-left mt-20">
+            <Link href="/" back>Back</Link>
             <h1 class="text-2xl my-0">{date}</h1>
             <div class="rise-wrapper whitespace-pre w-fit font-800 -spacing-1 text-purple">
                 {#each title.split(" ") as word, index}
@@ -19,10 +20,10 @@ abstract: ''
                         >{`${word}`}{index !== title.length-1 ? " " : ""}</p>
 				{/each}
             </div>
-            <hr class="my-10 border-neutral-700"/>
+            <hr class="my-10 border-neutral-700 "/>
         </div>
     </header>
-    <div class="prose text-xl text-white w-1/3 mx-auto">
+    <div class="prose text-xl text-white w-2/5 mx-auto font-500">
         At Team Illusion, we believe in the power of innovation, collaboration, transparency, and creativity to achieve our goals. Our team is more than just a robotics club-- it is a community of like-minded individuals who share a passion for science, technology, engineering, and mathematics.
 
         We are committed to pushing the boundaries of what is possible in the field of robotics. We believe that technology can be used to make the world a better place, and we strive to create robots that can solve real-world problems. Our focus is on developing robots that are not only functional but also aesthetically pleasing and inspiring.
@@ -33,4 +34,5 @@ abstract: ''
 
         We believe that robotics can be used to make a positive impact on the world. Whether it is through developing robots that can assist with disaster relief, improving the quality of life for people with disabilities, or exploring new frontiers in space, we are committed to using our skills and expertise to make a difference.
     </div>
+
 </div>