--- import '@fontsource-variable/work-sans' import workSans from '@fontsource-variable/work-sans/files/work-sans-latin-wght-normal.woff2' import Navbar from '@components/navbar/navbar.astro' import NavbarEntry from '@components/navbar/navbarEntry.astro' import navdata from '@datafiles/navdata.json' import embed from '@assets/embed.png' import favicon from '@assets/favicon.ico' import home from 'iconoir/icons/home-simple.svg' import fgo from 'iconoir/icons/gamepad.svg' import blog from 'iconoir/icons/bookmark-book.svg' import about from 'iconoir/icons/mail.svg' import projects from 'iconoir/icons/network-right.svg' export interface Props { title: string currentpage: string descriptionOverride?: string } interface IconsLookup { [key: string]: ImageMetadata } const icons: IconsLookup = { home: home, fgo: fgo, projects: projects, blog: blog, about: about, } const { descriptionOverride, currentpage, title } = Astro.props let description if (descriptionOverride === undefined) { description = 'Firqs own site!' } else { description = descriptionOverride } let currPage = 'https://firq.dev/' if (currentpage !== 'home') { currPage += currentpage } const mapped_navdata = navdata.map((item) => ({ ...item, ...{ icon: icons[item.icon] }, })) --- <!doctype html> <html lang="en"> <head> <title>{title}</title> <!-- Meta Tags --> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> <meta name="generator" content={Astro.generator} /> <meta name="description" content={description} /> <meta property="og:title" content={title} /> <meta property="og:url" content={currPage} /> <meta property="og:description" content={description} /> <meta property="og:image" content={embed.src} /> <meta property="og:type" content="website" /> <meta property="og:locale" content="en_US" /> <meta name="theme-color" content="#b86cff" /> <meta name="google-site-verification" content="SmcWcewh7DCANcLeTe3ntU0R-LESbo_bsolICJnmulE" /> <!-- Disable DarkReader, as site is already in dark mode --> <meta name="darkreader-lock" content="this site only has darkmode" /> <!-- Links --> <link rel="preload" as="font" crossorigin="anonymous" href={workSans} type="font/woff2" /> <link rel="icon" type="image/ico" href={favicon} /> <link rel="sitemap" href="/sitemap-index.xml" /> <link href="https://mastodon.neshweb.net/@Firq" rel="me" /> </head> <body> <Navbar> { mapped_navdata.map((item) => ( <NavbarEntry currentPage={currentpage} navtype="desktop" {...item} slot="desktop" /> )) } { mapped_navdata.map((item) => ( <NavbarEntry currentPage={currentpage} navtype="mobile" {...item} slot="mobile" /> )) } </Navbar> <slot /> </body> </html> <style is:global> :root { /* Animations */ --a-time-default: 200ms; --a-time-short: 100ms; --a-time-slow: 1000ms; --a-animation-1: ease-in-out; /* Fonts */ --f-default: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --f-title: 'Work Sans Variable', sans-serif; font-family: var(--f-default); /* Colors */ --c-primary-background: #1b1b1b; --c-secondary-background: #333; --c-primary-text: #eee; --c-accent-1: #b86cff; --c-accent-1-alt: #c105ff; --c-accent-2: #ff0077; --c-rgb-primary-background: 27, 27, 27; --c-rgb-secondary-background: 51, 51, 51; --c-rgb-primary-text: 238, 238, 238; --c-rgb-accent-1: 184, 108, 255; --c-rgb-accent-1-alt: 193, 5, 255; --c-rgb-accent-2: 255, 0, 119; /* Scrollbar */ scrollbar-color: var(--c-secondary-background) var(--c-primary-background); } body { background: var(--c-secondary-background); margin: 0px; } .visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } </style>