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 flex flexcenter hidedeco">
30 <img src="/img/sprites/sunfl1.png" alt="" />
31 </div>
32 <div id="blog" class="bwbox">
33 <h2 class="center">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 <div class="center">
40 <a href="/blog" class="button">::ALL_POSTS::</a>
41 <a href="/rss.xml" class="button">::RSS_FEED::</a>
42 </div>
43 </div>
44 </main>
45 </div>
46</Base>
47
48<style>
49 header {
50 justify-content: space-between;
51 align-items: center;
52 gap: 8px;
53 }
54
55 #blog {
56 grid-column: span 3;
57 }
58
59 .wrapper {
60 max-width: 100ch;
61 margin: 0 auto;
62 }
63
64 .grid {
65 display: grid;
66 grid-template-columns: repeat(4, 1fr);
67 }
68
69 .button {
70 margin-bottom: 13px;
71 }
72
73 @media (max-width: 86ch) {
74 header {
75 justify-content: center;
76 }
77
78 header h1 {
79 flex: 1 1 100%;
80 }
81
82 .grid {
83 grid-template-columns: 1fr;
84 }
85
86 .hidedeco {
87 display: none;
88 }
89 }
90</style>