lucxjo/friends-best
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity

Refactored project ready for server.

Browse source 
Signed-off-by: Louis Hollingworth <louis@hollingworth.nl>
This commit is contained in:
Louis Hollingworth 2024-02-14 17:39:30 +00:00
parent 5a115374b4
commit dd67fc967a
Signed by: lucxjo
GPG key ID: A11415CB3DC7809B
36 changed files with 1187 additions and 1003 deletions
Download patch file Download diff file Expand all files Collapse all files

108
server/src/layouts/Layout.astro Normal file
View file

@ -0,0 +1,108 @@
---
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;
import { ViewTransitions } from 'astro:transitions';
---
<!DOCTYPE html>
<html lang="en">
<head>
<ViewTransitions />
<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 {
background-color: colours.$bg-colour-light;
font-family: 'Ubuntu', sans-serif !important;
}
.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;
}
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
body {
background-color: #1E293B !important;
color: antiquewhite;
}
}
</style>