From 8f552147ed647983f43222dc825c406b539eb32a Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Mon, 3 Jun 2024 23:39:36 +0100
Subject: [PATCH] Updates base layout

---
 src/components/HomeBackground.tsx | 119 ------------------------------
 src/components/Nav.astro          |  84 ---------------------
 src/layouts/Base.astro            |  33 ++-------
 3 files changed, 6 insertions(+), 230 deletions(-)
 delete mode 100644 src/components/HomeBackground.tsx
 delete mode 100644 src/components/Nav.astro

diff --git a/src/components/HomeBackground.tsx b/src/components/HomeBackground.tsx
deleted file mode 100644
index d1a2b8a..0000000
--- a/src/components/HomeBackground.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { motion } from 'framer-motion';
-import styled from '@emotion/styled';
-
-const dotSpacing = 32;
-
-const Meteor = styled(motion.div)`
-  position: absolute;
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background-color: #9fef00;
-  box-shadow: 0 0 15px 3px #9fef00;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: -100px;
-    left: 0;
-    width: 2px;
-    height: 100px;
-    background: linear-gradient(to bottom, #9fef00, transparent);
-  }
-`;
-
-const StyledSvg = styled.svg`
-  pointer-events: none;
-  position: absolute;
-  inset: 0;
-  height: 100%;
-  width: 100%;
-  fill: rgba(100, 100, 100, 0.5);
-`;
-
-const StyledRect = styled.rect`
-  width: 100%;
-  height: 100%;
-  stroke-width: 0;
-`;
-
-const generateMeteor = (id: number, gridSizeX: number, gridSizeY: number) => {
-  const column = Math.floor(Math.random() * gridSizeX);
-  const startRow = Math.floor(Math.random() * (gridSizeY - 12));
-  const travelDistance = 5 + Math.floor(Math.random() * 10); // Between 5 and 15 spaces
-  const duration = 1.5 + Math.random(); // 1.5 to 2.5 seconds duration
-
-  return {
-    id,
-    column,
-    startRow,
-    endRow: startRow + travelDistance,
-    duration,
-    key: Math.random() + Math.random(),
-  };
-};
-
-const DotPattern = ({ className }: { className?: string }) => {
-  const countOfMeteors = 6;
-  const [gridSizeX, setGridSizeX] = useState(Math.floor(window.innerWidth / dotSpacing));
-  const [gridSizeY, setGridSizeY] = useState(Math.floor(window.innerHeight / dotSpacing));
-  const [meteors, setMeteors] = useState(() => Array.from({ length: countOfMeteors }, (_, index) => generateMeteor(index, gridSizeX, gridSizeY)));
-
-  const handleAnimationComplete = (id: number) => {
-    setMeteors(current =>
-      current.map(meteor => {
-        if (meteor.id === id) {
-          return generateMeteor(id, gridSizeX, gridSizeY);
-        }
-        return meteor;
-      })
-    );
-  };
-
-  useEffect(() => {
-    const handleResize = () => {
-      setGridSizeX(Math.floor(window.innerWidth / dotSpacing));
-      setGridSizeY(Math.floor(window.innerHeight / dotSpacing));
-    };
-
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  return (
-    <>
-      <StyledSvg className={className}>
-        <defs>
-          <pattern id="dot-pattern" width={dotSpacing} height={dotSpacing} patternUnits="userSpaceOnUse">
-            <circle cx={1} cy={1} r={2} />
-          </pattern>
-        </defs>
-        <StyledRect fill="url(#dot-pattern)" />
-      </StyledSvg>
-
-      {meteors.map(({ id, column, startRow, endRow, duration, key }) => (
-        <Meteor
-          key={key}
-          initial={{
-            x: column * dotSpacing,
-            y: startRow * dotSpacing,
-            opacity: 1
-          }}
-          animate={{
-            y: endRow * dotSpacing,
-            opacity: 0
-          }}
-          transition={{
-            duration,
-            // ease: "easeInOut"
-            ease: [0.7, 0.75, 0.75, 1]
-          }}
-          onAnimationComplete={() => handleAnimationComplete(id)}
-        />
-      ))}
-    </>
-  );
-};
-
-export default DotPattern;
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
deleted file mode 100644
index 536ab81..0000000
--- a/src/components/Nav.astro
+++ /dev/null
@@ -1,84 +0,0 @@
----
-
----
-
-<nav class="navbar">
-  <div class="nav-left">
-    <a href="/" class="logo-link" aria-label="Home">
-      <img width="64" src="/web-check.png" alt="Site Logo" />
-      <span class="site-title">Web Check</span>
-    </a>
-  </div>
-  <div class="nav-right">
-    <a href="/check" class="nav-link">Try Live</a>
-    <a href="/check/about" class="nav-link">About</a>
-    <a href="/account" class="nav-link">Join</a>
-  </div>
-</nav>
-
-
-<style lang="scss">
-  .navbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.5rem 1rem;
-    flex-wrap: wrap;
-    background-color: var(--background);
-    color: var(--text-color);
-    width: 80vw;
-    margin: 0 auto;
-    border-radius: 2rem;
-    border: 1px solid var(--primary-transparent);
-
-    
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(5px);
-    -webkit-backdrop-filter: blur(5px);
-    .nav-left {
-      display: flex;
-      align-items: center;
-
-      .logo-link {
-        display: flex;
-        align-items: center;
-        text-decoration: none;
-        color: var(--text-color);
-
-        img {
-          width: 2rem;
-          max-width: 64px;
-          margin-right: 0.5rem;
-        }
-
-        .site-title {
-          font-weight: bold;
-          color: var(--primary);
-          font-size: 1.8rem;
-        }
-      }
-    }
-
-    .nav-right {
-      display: flex;
-
-      .nav-link {
-        text-decoration: none;
-        color: var(--text-color);
-        margin-left: 1rem;
-        padding: 0.5rem;
-        transition: background-color 0.3s;
-
-        &:hover {
-          background-color: var(--primary-light);
-        }
-
-        &:focus {
-          outline: none;
-          background-color: var(--primary-dark);
-          box-shadow: 0 0 0 3px var(--primary);
-        }
-      }
-    }
-  }
-</style>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 810cd78..2f178ae 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -1,9 +1,6 @@
 ---
 import { ViewTransitions } from 'astro:transitions'
 import MetaTags from '@layouts/MetaTags.astro';
-// import NavBar from '@components/scafold/NavBar.astro';
-// import Footer from '@components/scafold/Footer.astro';
-// import config from '../site-config';
 
 import '@styles/typography.scss';
 import '@styles/global.scss';
@@ -29,32 +26,14 @@ interface Props {
 		<ViewTransitions />
 		<MetaTags {...Astro.props } />
     <slot name="head" />
+		<link href="/fonts/Hubot-Sans/Hubot-Sans.woff2"
+			as="font"
+			rel="preload"
+			type="font/woff2"
+			crossorigin="anonymous"
+			>
 	</head>
 	<body>
 		<slot />
 	</body>
 </html>
-
-<style is:global>
-	/* @import '../styles/values.css';
-	@import '../styles/typography.css'; */
-</style>
-	
-
-<style is:global>
-	@import '@styles/global.scss';
-	html {
-		::selection {
-			background: var(--accent);
-			color: var(--accent-fg);
-		}
-		scroll-behavior: smooth;
-	}
-	body {
-		margin: 0;
-		min-height: 100vh;
-		color: var(--foreground);
-		background: var(--background);
-	}
-	
-</style>