animations file

src/about/about.sass

@@ -34,18 +34,15 @@ $min-width: 400px
     padding: nav.$padding
     max-width: $max-width
     font-size: $paragraph
-
+  h1,h2,h3
-  h1
-    font-size: $paragraph * 2
     padding: nav.$padding
+    font-size: $paragraph * 2
 
   h2
     font-size: $paragraph * 1.5
-    padding: nav.$padding
 
   h3
     font-size: $paragraph * 1.1
-    font-weight: bold
 
 .edge
   background: #27213C

src/animations.ts

@@ -0,0 +1,27 @@
+import {Target} from "motion";
+
+export type AnimateTemplate = {
+  initial: Target,
+  animate: Target,
+};
+
+export function AnimateDirection(dir: "top" | "left" | "right" | "bottom", top: string | number = 0) : AnimateTemplate {
+  const animation: Required<AnimateTemplate> = { animate: {}, initial: {} };
+  animation.animate[dir] = top;
+  animation.initial[dir] = "-100%";
+
+  return animation;
+}
+
+export function AnimateFade() : AnimateTemplate {
+  return {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+  };
+}
+
+export function AnimateSpin() : Pick<AnimateTemplate, "animate"> {
+  return {
+    animate : { rotate: 360 },
+  };
+}

src/articles/Reader.tsx

@@ -1,18 +1,11 @@
 import {useArticle} from "./ArticleContext";
 import {motion} from "framer-motion";
 import {useAnimate, animate as animateClass} from "motion/react";
-import {TargetAndTransition} from "motion";
 import {useEffect} from "react";
+import {AnimateDirection, AnimateFade, AnimateTemplate} from "../animations";
 
-type Transition = "open" | "closed";
+const READER : AnimateTemplate = AnimateFade();
-const READER : Record<Transition, TargetAndTransition> = {
+const ARTICLE : AnimateTemplate = AnimateDirection("top", "50%");
-  closed : { opacity: 0 },
-  open : { opacity: 1 }
-};
-const ARTICLE : Record<Transition, TargetAndTransition> = {
-  closed : { top: "-100%" },
-  open : { top: "50%" }
-};
 
 
 export function Reader() {
@@ -21,8 +14,8 @@ export function Reader() {
 
   useEffect(() => {
     if(post && scope.current) {
-      animate(scope.current, READER.open);
+      animate(scope.current, READER.animate);
-      animateClass(".read-box", ARTICLE.open);
+      animateClass(".read-box", ARTICLE.animate!);
     }
   }, [post, scope]);
 
@@ -37,8 +30,8 @@ export function Reader() {
 
   function handleClose() {
     Promise.all([
-      animate(scope.current, READER.closed),
+      animate(scope.current, READER.initial),
-      animateClass(".read-box", ARTICLE.closed)
+      animateClass(".read-box", ARTICLE.initial!)
     ]).then(() => setPost(undefined));
   }
 
@@ -47,11 +40,11 @@ export function Reader() {
     <motion.article
       key="reader"
       ref={scope}
-      initial={READER.closed}
+      initial={READER.initial}
-      animate={READER.open}
+      animate={READER.animate}
       onClick={handleClose}
       className="reader link">
-        <motion.section className="read-box" initial={{top: "-100%"}} animate={{top: "50%"}} onClick={e => e.stopPropagation()}>
+        <motion.section className="read-box"  initial={{top: "-100%"}} animate={{top: "50%"}} onClick={e => e.stopPropagation()}>
           <post.article/>
         </motion.section>
     </motion.article>

src/articles/list.sass

@@ -62,6 +62,7 @@ $entry-width: 400px
     left: 50%
     transform: translate(-50%, -50%)
 
+  overflow: scroll
   z-index: 9999
   width: 100vw
   min-height: 100vh
@@ -70,5 +71,8 @@ $entry-width: 400px
     margin-top: nav.$padding
     background: white
     color: black
-    width: 50vw
+    min-width: 50vw
+    max-width: 800px
     min-height: 75vh
+    h1
+      font-size: xxx-large

src/index/Canvas.tsx

@@ -4,6 +4,7 @@ import {Canvas as ThreeCanvas, useFrame} from "@react-three/fiber";
 import {Vector3} from "three";
 import {Moon} from "./Moon";
 import {Stars} from "./Stars";
+import {AnimateSpin} from "../animations";
 
 export default function Canvas() {
 
@@ -19,7 +20,7 @@ export default function Canvas() {
           <directionalLight color="#E3A857" args={[1,10]} position={[100,10,100]} />
         </ThreeCanvas>
       </section>
-      <motion.h1 className="welcome" animate={{ rotate: 360 }}>
+      <motion.h1 className="welcome" animate={AnimateSpin().animate}>
         Welcome to my blog
       </motion.h1>
     </main>

src/nav/nav.sass

@@ -27,8 +27,9 @@ nav
   justify-content: center
 
   .name
-    margin: auto
+    position: absolute
-    flex-grow: 1
+    left: 50%
+    transform: translateX(-50%)
     h1
       margin: auto 0
       font-size: 40px
@@ -37,7 +38,7 @@ nav
 
 .links
   flex-grow: 1
-  justify-content: center
+  justify-content: flex-end
   align-items: center
   display: flex
   flex-wrap: wrap