mirror of
https://github.com/Lissy93/web-check.git
synced 2024-11-07 17:05:53 +01:00
Updates base layout
This commit is contained in:
Alicia Sykes
parent
a12e7c5c22
commit
8f552147ed
@ -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 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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user