fix(style): Seperate CSS style to src\styles
This commit is contained in:
@@ -3,16 +3,23 @@ import '../styles/global.css'
|
||||
|
||||
export interface Props {
|
||||
title?: string
|
||||
description?: string
|
||||
lang?: string
|
||||
}
|
||||
const { title = 'Talk Pro — One User. Multiple Worlds.' } = Astro.props
|
||||
|
||||
const {
|
||||
title = 'Talk Pro - One User. Multiple Worlds.',
|
||||
description = 'Talk Pro is a modern messaging app for private chats, group conversations, channels, voice and video calls.',
|
||||
lang = 'en',
|
||||
} = Astro.props
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang={lang}>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Talk Pro is a modern messaging app for private chats, group conversations, channels, voice and video calls." />
|
||||
<meta name="description" content={description} />
|
||||
<title>{title}</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
@@ -25,7 +32,6 @@ const { title = 'Talk Pro — One User. Multiple Worlds.' } = Astro.props
|
||||
const header = document.getElementById('site-header');
|
||||
const getOffset = () => header ? header.offsetHeight : 0;
|
||||
|
||||
// Smooth scroll with header offset
|
||||
document.querySelectorAll('a[href^="#"]').forEach(link => {
|
||||
link.addEventListener('click', e => {
|
||||
const href = link.getAttribute('href');
|
||||
@@ -38,7 +44,6 @@ const { title = 'Talk Pro — One User. Multiple Worlds.' } = Astro.props
|
||||
});
|
||||
});
|
||||
|
||||
// Active nav highlighting via IntersectionObserver
|
||||
const navLinks = document.querySelectorAll('[data-nav-link]');
|
||||
const sections = Array.from(navLinks)
|
||||
.map(l => document.querySelector(l.getAttribute('href') ?? ''))
|
||||
@@ -52,8 +57,7 @@ const { title = 'Talk Pro — One User. Multiple Worlds.' } = Astro.props
|
||||
if (!visible) return;
|
||||
navLinks.forEach(link => {
|
||||
const active = link.getAttribute('href') === `#${visible.target.id}`;
|
||||
link.classList.toggle('!text-[#f28a4b]', active);
|
||||
link.classList.toggle('text-[#7a726d]', !active);
|
||||
link.classList.toggle('is-active', active);
|
||||
});
|
||||
}, { rootMargin: '-30% 0px -60% 0px', threshold: 0 });
|
||||
sections.forEach(s => observer.observe(s));
|
||||
|
||||
Reference in New Issue
Block a user