My personal website.
entomoviscera.online
1---
2import { getCollection } from "astro:content";
3import Base from "../components/Base.astro";
4import BlogPost from "../components/BlogPost.astro";
5import "../styles/main.css";
6
7const post = await getCollection("blog").then((x) =>
8 x.sort(
9 (a, b) =>
10 (b.data.pub as unknown as number) - (a.data.pub as unknown as number),
11 ),
12);
13---
14
15<Base
16 title="HOME"
17 graph={{
18 description: "WARNING: Bug inside.",
19 }}
20>
21 <div class="bwcontainer wrapper">
22 <header class="bwbox center flex">
23 <h1 class="barcodetext">ENTOMOVISCERA.ONLINE</h1>
24 <a href="/">
25 <img src="/img/icons/poweroff.png" alt="return to landing page" />
26 </a>
27 </header>
28 <main class="grid">
29 <div class="bwbox center hidedeco">
30 <img src="/img/sprites/sunfl1.png" alt="" />
31 </div>
32 <div id="blog" class="bwbox">
33 <h2>Latest blog post</h2>
34 <BlogPost
35 url={`/blog/${post[0].id}`}
36 title={post[0].data.title}
37 time={`${post[0].data.pub.getFullYear()}-${post[0].data.pub.getMonth() + 1}-${post[0].data.pub.getDate()}`}
38 />
39 <a href="/blog">View all posts</a>
40 <a href="/rss.xml">RSS feed</a>
41 </div>
42 </main>
43 </div>
44</Base>
45
46<style>
47 header {
48 justify-content: space-between;
49 align-items: center;
50 gap: 8px;
51 }
52
53 #blog {
54 grid-column: span 3;
55 }
56
57 .wrapper {
58 max-width: 100ch;
59 margin: 0 auto;
60 }
61
62 .grid {
63 display: grid;
64 grid-template-columns: repeat(4, 1fr);
65 }
66
67 @media (max-width: 86ch) {
68 header {
69 justify-content: center;
70 }
71
72 header h1 {
73 flex: 1 1 100%;
74 }
75
76 .grid {
77 grid-template-columns: 1fr;
78 }
79
80 .hidedeco {
81 display: none;
82 }
83 }
84</style>