update background video

hackclub · Mar 27, 2024 · c2d7166 · c2d7166
1 parent 0afeb44
commit c2d7166
Show file tree

Hide file tree

Showing 13 changed files with 921 additions and 16 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,7 @@ node_modules
 
 .DS_Store
 yarn-error.log
+
+generate-animation/svgs
+generate-animation/pngs
+generate-animation/output
diff --git a/backend/pages/landing.js b/backend/pages/landing.js
@@ -27,7 +27,7 @@ export default function() {
 
       <img data-fade-in style="opacity: 0;" class="h-[57%] mx-auto mt-[1.5rem]" src="/assets/blot-clear-bg.png">
 
-      <video class="w-full h-full absolute inset-0 z-[-30] object-cover opacity-[.4]" autoplay muted>
+      <video class="w-full h-full absolute inset-0 z-[-30] object-cover opacity-[.4] scale-[1.15]" autoplay muted>
         <source src="/assets/output-movie.mp4" type="video/mp4">
         Your browser does not support the video tag.
       </video>
@@ -219,9 +219,48 @@ function footer() {
   // </footer>
 
   return `
+    <style>
+      @font-face {
+        font-family: 'Phantom Sans';
+        src: url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Regular.woff')
+            format('woff'),
+          url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Regular.woff2')
+            format('woff2');
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'Phantom Sans';
+        src: url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Italic.woff')
+            format('woff'),
+          url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Italic.woff2')
+            format('woff2');
+        font-weight: normal;
+        font-style: italic;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'Phantom Sans';
+        src: url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Bold.woff')
+            format('woff'),
+          url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Bold.woff2')
+            format('woff2');
+        font-weight: bold;
+        font-style: normal;
+        font-display: swap;
+      }
+
+      footer {
+        font-family: "Phantom Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        font-size: 20px;
+        line-height: 1.5;
+        font-weight: 400;
+      }
+    </style>
     <footer class="bg-gray-900 text-white">
       <div>
-        <article class="sm:flex hidden h-[400px] gap-[5rem] items-center">
+        <article class="sm:flex hidden h-[400px] gap-[5rem] items-center  justify-center">
           <div class="flex flex-col px-4 gap-[1rem]">
             <h2 class="font-bold text-xl mb-4">Hack&nbsp;Club</h2>
             <a href="https://hackclub.com/philosophy/" class="text-white-400 hover:underline">Philosophy</a>
@@ -272,10 +311,10 @@ function footer() {
             </div>
           </div>
 
-          <span class="css-w392fy">
+          <span>
             <a href="tel:1-855-625-HACK" class="text-white-400 hover:underline">1-855-625-HACK</a>
             <br>
-            <span class="css-1hqcz08">(call toll-free)</span>
+            <span>(call toll-free)</span>
           </span>
 
           </div>

diff --git a/backend/wrapHTML.js b/backend/wrapHTML.js
@@ -6,6 +6,7 @@ export function wrapHTML(inner) {
         <meta name="description" content="Blot!" />
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="title" content="blot">
 
         <link rel="icon" type="image/svg+xml" href="/assets/borpheus.svg" id="favicon">
         <script>
@@ -36,7 +37,7 @@ export function wrapHTML(inner) {
 
         <!-- <script leave-it src="./tailwindjit.js"></script> -->
       </head>
-      <body>
+      <body class="overflow-x-hidden">
         ${inner}
       </body>
     </html>

diff --git a/generate-animation/generateAnimation.js b/generate-animation/generateAnimation.js
diff --git a/guides/leaf.md b/guides/leaf.md
@@ -256,7 +256,7 @@ Then call veins again and flip it over for the bottom side.
 ```js
 const bottomVeins = makeVeins();
 bt.scale(bottomVeins, [1, -1], [0, 0]);
-leaf.join(bottomVeins);
+bt.join(finalLines, bottomVeins);
 ```
 
 <img

diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "watch": [
       "**/*"
     ],
-    "ext": "ts js jsx tsx md css",
+    "ext": "ts js jsx tsx md css html",
     "ignore": [
       "dist",
       "dist/"