mirror of
https://github.com/maciejpedzich/cats-album.git
synced 2024-11-09 23:03:02 +01:00
Create a base layout for all pages to use
This commit is contained in:
parent
b39d1c4ae3
commit
8b2a7f0e4d
24
src/components/Footer.astro
Normal file
24
src/components/Footer.astro
Normal file
@ -0,0 +1,24 @@
|
||||
<footer class="bd-light text-center">
|
||||
<p>
|
||||
Made with 🧠 by <span lang="pl"
|
||||
><a href="https://maciejpedzi.ch">Maciej Pędzich</a></span
|
||||
>. Built with <a href="https://astro.build">Astro</a>, <a
|
||||
href="https://jenil.github.io/chota">Chota</a
|
||||
>, and <a href="https://usebasin.com">Basin</a>. Hosted on <a
|
||||
href="https://netlify.com">Netlify</a
|
||||
>.
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://github.com/maciejpedzich/catsof.tech">Source Code</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
margin: 2rem 0 3rem 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
</style>
|
20
src/components/Header.astro
Normal file
20
src/components/Header.astro
Normal file
@ -0,0 +1,20 @@
|
||||
<header>
|
||||
<nav class="nav" aria-label="Main menu">
|
||||
<div class="nav-left">
|
||||
<a id="logo" class="brand" href="/">Cats Of Tech</a>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<a class="button outline" href="/submit">Submit a cat</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
header {
|
||||
margin-bottom: 2rem;
|
||||
padding: 1rem 0;
|
||||
border-bottom-width: 3px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: var(--color-primary);
|
||||
}
|
||||
</style>
|
53
src/layouts/BaseLayout.astro
Normal file
53
src/layouts/BaseLayout.astro
Normal file
@ -0,0 +1,53 @@
|
||||
---
|
||||
import 'chota/dist/chota.min.css';
|
||||
import '../styles/global.css';
|
||||
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
|
||||
export interface Props {
|
||||
title?: string;
|
||||
description?: string;
|
||||
image?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
title: titleProp,
|
||||
description = 'Cats of people working in the tech industry',
|
||||
image
|
||||
} = Astro.props;
|
||||
|
||||
const title = `${titleProp ? `${titleProp} - ` : ''}Cats Of Tech`;
|
||||
const imageUrl = image ? new URL(image, Astro.site) : null;
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>{title}</title>
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<meta name="description" content={description} />
|
||||
<meta property="twitter:card" content="summary" />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="twitter:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="twitter:description" content={description} />
|
||||
{
|
||||
imageUrl && (
|
||||
<>
|
||||
<meta property="og:image" content={imageUrl} />
|
||||
<meta property="twitter:description" content={imageUrl} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
8
src/styles/global.css
Normal file
8
src/styles/global.css
Normal file
@ -0,0 +1,8 @@
|
||||
:root {
|
||||
--grid-gutter: 3rem;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 auto;
|
||||
max-width: min(1200px, 85%);
|
||||
}
|
Loading…
Reference in New Issue
Block a user