summaryrefslogtreecommitdiff
path: root/examples/blog-multiple-authors/src/layouts/post.astro
blob: bbfc7b3357d11b56f376f176be181937690a316d (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
---
import MainHead from '../components/MainHead.astro';
import Nav from '../components/Nav.astro';
import authorData from '../data/authors.json';

const { content } = Astro.props;
let canonicalURL = Astro.canonicalURL;
---

<html lang={content.lang || 'en'}>
	<head>
		<title>{content.title}</title>
		<MainHead title={content.title} description={content.description} image={content.image} {canonicalURL} />
		<style lang="scss">
			.title {
				margin-top: 4rem;
				margin-bottom: 4rem;
				font-size: 3em;
				letter-spacing: -0.04em;
				text-align: center;
			}

			.description {
				margin-bottom: 4rem;
				font-size: 1.4em;
				font-weight: 400;
				text-align: justify;
				text-transform: uppercase;
			}

			.img {
				display: block;
				width: 100%;
				height: auto;
			}

			.article {
				margin-top: 4rem;
				margin-bottom: 6rem;

				:global(p) {
					font-size: 1.3em;
					line-height: 2;
					margin-top: 2em;
					margin-bottom: 2em;
				}
			}

			.posts {
				text-transform: uppercase;
			}

			.footer {
				margin-top: 6rem;
				padding-bottom: 6rem;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<Nav />

		<main class="wrapper">
			<h2 class="title">{content.title}</h2>
			<p class="description">{content.description}</p>
			<img class="img" src={content.image} alt="" />
			<article class="article">
				<slot />
			</article>
			<footer class="footer">
				<a class="posts" href="/posts">All Posts</a>
			</footer>
		</main>

		<footer></footer>
	</body>
</html>