---
import NavBar from '../components/NavBar.astro';
export interface Props {
title: string;
navLinks: {
to: string;
name: string;
img: {
src: string;
alt: string;
}
}[] | undefined
}
const { title, navLinks } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
{ navLinks != undefined ? (
<NavBar links={navLinks} />
) : (<!-- If there were NavLinks, they would be here -->)
}
<slot />
</body>
</html>
<style lang="scss" is:global>
@use "../assets/styles/colours";
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
body {
font-family: 'Ubuntu', sans-serif !important;
background-color: colours.$bg-colour-light;
}
.container {
min-height: 80vh;
padding: 0 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
font-size: 3rem;
}
.footer {
width: 100%;
height: 100px;
border-top: 1px solid #eaeaea;
display: flex;
justify-content: center;
align-items: center;
}
.footer a:hover {
color: #0070f3;
}
.footer a {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
color: #eaeaea;
}
.grid-2 {
display: grid;
align-items: center;
justify-content: center;
grid-template-columns: 1fr 1fr;
}
.grid-3 {
display: grid;
align-items: center;
justify-content: center;
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 600px) {
.grid-3 {
width: 90%;
grid-template-columns: 1fr 1fr;
}
}
</style>