Updates base layout
This commit is contained in:
Alicia Sykes
@@ -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;
|
|
||||||
@@ -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>
|
|
||||||
@@ -1,9 +1,6 @@
|
|||||||
---
|
---
|
||||||
import { ViewTransitions } from 'astro:transitions'
|
import { ViewTransitions } from 'astro:transitions'
|
||||||
import MetaTags from '@layouts/MetaTags.astro';
|
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/typography.scss';
|
||||||
import '@styles/global.scss';
|
import '@styles/global.scss';
|
||||||
@@ -29,32 +26,14 @@ interface Props {
|
|||||||
<ViewTransitions />
|
<ViewTransitions />
|
||||||
<MetaTags {...Astro.props } />
|
<MetaTags {...Astro.props } />
|
||||||
<slot name="head" />
|
<slot name="head" />
|
||||||
|
<link href="/fonts/Hubot-Sans/Hubot-Sans.woff2"
|
||||||
|
as="font"
|
||||||
|
rel="preload"
|
||||||
|
type="font/woff2"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<slot />
|
<slot />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user