website: Move cursor to module

Fysh-Fyve · Oct 17, 2024 · 92d3f5f · 92d3f5f
1 parent 56990ab
commit 92d3f5f
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 47 deletions.
diff --git a/pkg/website-old/assets/css/opening/cursor.css b/pkg/website-old/assets/css/opening/cursor.css
@@ -19,15 +19,6 @@
   }
 }
 
-@keyframes appear {
-  0% {
-    font-size: 0;
-  }
-  100% {
-    font-size: 10vw;
-  }
-}
-
 code.blinking {
   animation: cursor 4s 1 steps(1) 3.5s forwards;
 }

diff --git a/...src/components/Opening/opening/cursor.css → .../src/components/Opening/cursor.module.css b/...src/components/Opening/opening/cursor.css → .../src/components/Opening/cursor.module.css
@@ -1,3 +1,16 @@
+code.blinking {
+  animation: cursor 4s 1 steps(1) 3.5s forwards;
+  background-color: transparent;
+  border: none;
+}
+
+code.blinkingAfter {
+  font-size: 0;
+  animation: cursor-after 0.5s 1 steps(1) 7.5s;
+  background-color: transparent;
+  border: none;
+}
+
 @keyframes cursor {
   0% {
     opacity: 1;
@@ -19,29 +32,7 @@
   }
 }
 
-@keyframes appear {
-  0% {
-    font-size: 0;
-  }
-  100% {
-    font-size: 10vw;
-  }
-}
-
-code.blinking {
-  animation: cursor 4s 1 steps(1) 3.5s forwards;
-  background-color: transparent;
-  border: none;
-}
-
-code.blinking-after {
-  font-size: 0;
-  animation: cursor-after 0.5s 1 steps(1) 7.5s;
-  background-color: transparent;
-  border: none;
-}
-
 @keyframes cursor-after {
   0% { font-size: var(--fysh); }
   100% { font-size: var(--fysh); }
-}
+}
diff --git a/pkg/website/src/components/Opening/index.tsx b/pkg/website/src/components/Opening/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import './opening/cursor.css';
 import './opening/opening.css';
 import styles from './styles.module.css';
 import waveStyles from './wave.module.css';
+import cursorStyles from './cursor.module.css';
 
 export default function Opening() {
   return (
@@ -14,23 +14,29 @@ export default function Opening() {
       <div className="opening" id="opening">
         <OGFysh />
         <Wave />
-        <div className="bottom-fysh">
-          <span className="fysh-container">
-            <code className="fysh">
-              &gt;&lt;<code className="c c-1">f</code>
-              <code className="c c-2">y</code>
-              <code className="c c-3">s</code>
-              <code className="c c-4">h</code>
-              <code className="blinking">&#x25AF;</code>&gt;
-              <code className="blinking-after">&#x25AF;</code>
-            </code>
-          </span>
-        </div>
+        <DarkFysh />
       </div>
     </div>
   );
 }
 
+function DarkFysh() {
+  return (
+    <div className="bottom-fysh">
+      <span className="fysh-container">
+        <code className="fysh">
+          &gt;&lt;<code className="c c-1">f</code>
+          <code className="c c-2">y</code>
+          <code className="c c-3">s</code>
+          <code className="c c-4">h</code>
+          <code className={cursorStyles.blinking}>&#x25AF;</code>&gt;
+          <code className={cursorStyles.blinkingAfter}>&#x25AF;</code>
+        </code>
+      </span>
+    </div>
+  );
+}
+
 function OGFysh() {
   return (
     <div className={styles.ogFysh}>

diff --git a/pkg/website/src/components/Opening/opening/opening.css b/pkg/website/src/components/Opening/opening/opening.css
@@ -66,6 +66,14 @@ main[role="main"] {
   }
 }
 
+@keyframes appear {
+  0% {
+    font-size: 0;
+  }
+  100% {
+    font-size: var(--fysh);
+  }
+}
 
 .fysh > code.c {
   z-index: 999;

diff --git a/pkg/website/static/js/interpreter.js b/pkg/website/static/js/interpreter.js
@@ -89,8 +89,7 @@ if (typeof WebInterpreter === 'undefined') {
   ><//> number -= 1
   <number><< ~
 <><
-(+o ><factorial> ~ ><//> Should be 120
-  `;
+(+o ><factorial> ~ ><//> Should be 120`;
       const go = this.#newRunner();
       if ('instantiateStreaming' in WebAssembly) {
         WebAssembly.instantiateStreaming(fetch(WASM_URL), go.importObject).then((obj) => {